/* Global Theme */
:root{
  --bg: #6f8ff0;
  --text: #111827;
  --card: #ffffff;
  --card-border: rgba(17,24,39,0.06);
  --primary: #1f7aec;
  --primary-weak: #a9ccff;
  --primary-strong: #2563eb;
  --danger: #e05353;
  --muted: #6b7280;
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --panel-start: #ffffff;
  --panel-end: #f1f5ff;
  --panel-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 18px rgba(31,122,236,0.08);
  --table-row-bg: #ffffff;
  --table-border: #eef0f5;
  --table-hover-shadow: 0 8px 18px rgba(0,0,0,0.08);
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #111827;
  --dropzone-bg: #f8fbff;
  --dropzone-border: #93c5fd;
  --queue-bg: #ffffff;
  --queue-border: #eef0f5;
  --bar-bg: #e5e7eb;
  --topbar-bg-start: #1f2a5a;
  --topbar-bg-end: #2d3b8b;
  --btn-primary: #60a5fa;
  --btn-primary-text: #0b1120;
  --btn-blue: #93c5fd;
  --btn-blue-text: #0b1120;
  --btn-danger: #ef4444;
  --btn-danger-text: #ffffff;
  --btn-muted: #e5e7eb;
  --btn-muted-text: #111827;
  --btn-disabled-bg: #d1d5db;
  --btn-disabled-text: #6b7280;
  --modal-bg: #ffffff;
  --code-card-bg: #7789B0;
  --code-card-border: #1f2a44;
  --code-head-bg: #111827;
  --code-head-text: #cbd5e1;
  --code-head-border: #1f2937;
  --code-badge-bg: #1f2937;
  --code-badge-text: #93c5fd;
  --code-badge-border: #334155;
  --code-copy-border: #334155;
  --code-copy-text: #cbd5e1;
  --code-copy-hover: #1f2937;
  --code-body-text: #e5e7eb;
}

body[data-theme="dark"]{
  --bg: #020617;
  --text: #e2e8f0;
  --card: #0f172a;
  --card-border: #1e293b;
  --shadow: 0 10px 25px rgba(15,23,42,0.55);
  --panel-start: #1e293b;
  --panel-end: #101b2f;
  --panel-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 18px rgba(2,6,23,0.6);
  --primary-strong: #93c5fd;
  --muted: #94a3b8;
  --table-row-bg: #1e293b;
  --table-border: #25304a;
  --table-hover-shadow: 0 8px 18px rgba(2,6,23,0.55);
  --input-bg: #0b1628;
  --input-border: #334155;
  --input-text: #e2e8f0;
  --dropzone-bg: #0f1b30;
  --dropzone-border: #334155;
  --queue-bg: #111c2f;
  --queue-border: #25304a;
  --bar-bg: #1f2937;
  --topbar-bg-start: #0b1120;
  --topbar-bg-end: #111c35;
  --btn-primary: #3b82f6;
  --btn-primary-text: #f8fafc;
  --btn-blue: #2563eb;
  --btn-blue-text: #f8fafc;
  --btn-danger: #ef4444;
  --btn-danger-text: #ffffff;
  --btn-muted: #1f2937;
  --btn-muted-text: #e2e8f0;
  --btn-disabled-bg: #1e293b;
  --btn-disabled-text: #475569;
  --modal-bg: #0f172a;
  --code-card-bg: #111c30;
  --code-card-border: #1f2a44;
  --code-head-bg: #0b1220;
  --code-head-text: #cbd5e1;
  --code-head-border: #1f2a44;
  --code-badge-bg: #1e2a43;
  --code-badge-text: #60a5fa;
  --code-badge-border: #334155;
  --code-copy-border: #334155;
  --code-copy-text: #e2e8f0;
  --code-copy-hover: #1e293b;
  --code-body-text: #cbd5e1;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { overflow-x: hidden; overscroll-behavior: none; }
body{
  margin:0;
  min-height:100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  cursor: default;
  transition: background .3s ease, color .3s ease;
}

input[type="text"],
input[type="password"],
textarea{
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
}
input::placeholder,
textarea::placeholder{ color: var(--muted); }

*:not(input):not(textarea):not(button){ user-select: none; }

.container{ max-width: 1100px; margin: 40px auto; padding: 0 16px; }
.card{ background: var(--card); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); border:1px solid var(--card-border); margin: 0 auto; }

.panel{
  background: linear-gradient(145deg, var(--panel-start), var(--panel-end));
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--panel-shadow);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 16px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15); transform: translateY(0);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  color: inherit;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 0 rgba(0,0,0,0.12); filter: brightness(1.06); }
.btn:active{ transform: translateY(0); box-shadow: 0 3px 0 rgba(0,0,0,0.18); }

.btn-primary{ background:var(--btn-primary); color:var(--btn-primary-text); }
.btn-blue{ background:var(--btn-blue); color:var(--btn-blue-text); }
.btn-danger{ background:var(--btn-danger); color:var(--btn-danger-text); }
.btn-muted{ background:var(--btn-muted); color:var(--btn-muted-text); }

.btn:disabled, .disabled{ background:var(--btn-disabled-bg) !important; color:var(--btn-disabled-text) !important; cursor:not-allowed !important; position: relative; }

.footer{
  margin-top: 24px;
  text-align:center;
  font-size: 14px;
  font-weight: 700;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.theme-toggle{
  font-size: inherit;
  font-weight: 600;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border .2s ease, transform .1s ease;
}
.theme-toggle:hover{ transform: translateY(-1px); }
.theme-toggle:focus{ outline:2px solid var(--primary-weak); outline-offset:2px; }
body[data-theme="dark"] .theme-toggle{ background: var(--btn-muted); color: var(--btn-muted-text); }

.table-wrap{ overflow-x: auto; }
table{ width:100%; border-collapse: separate; border-spacing: 0 10px; }
thead th{ text-align:left; font-size: 13px; color: var(--muted); padding: 6px 10px; }
tbody td{ background: var(--table-row-bg); padding: 12px 10px; border-top: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border); vertical-align: top; }

tbody tr{ transition: transform .08s ease, box-shadow .12s ease; }
tbody tr:hover{ transform: scale(1.01); box-shadow: var(--table-hover-shadow); }

.filename{ max-width: 760px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.login-wrap{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.login-card{ width: 100%; max-width: 380px; }
.login-title{ margin-top:0; margin-bottom: 12px; }
.login-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 10px; }

.dropzone{ border: 2px dashed var(--dropzone-border); border-radius: 16px; padding: 30px; text-align:center; background: var(--dropzone-bg); color: var(--text); }

.actions{ display:flex; align-items:center; justify-content:center; gap:8px; }
.small{ font-size: 12px; }

.controls-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap: wrap; }
.controls-left, .controls-right{ display:flex; gap:10px; align-items:center; }

.search-right{ display:flex; justify-content:flex-end; gap:8px; }

.topbar{ position: sticky; top:0; z-index:50; background: linear-gradient(180deg,var(--topbar-bg-start),var(--topbar-bg-end)); color:#ecf2ff; }
.topbar-inner{ max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.topbar-title{ display:flex; align-items:center; gap:10px; font-weight:900; color:#ecf2ff; font-size:22px; }
.topbar-title img{ height:24px; border-radius:6px; }
.topbar .btn-signout{ background: rgba(255,255,255,0.25); color:#fff; box-shadow:none; }
.topbar .btn-signout:hover{ filter: brightness(1.1); }

.toast-wrap{ position: fixed; right: 16px; top: 16px; z-index: 9999; display:flex; flex-direction: column; gap:8px; }
.toast{ padding:10px 14px; border-radius:10px; color:#fff; box-shadow: 0 8px 18px rgba(0,0,0,0.25); font-weight:600; transition: opacity .2s ease, transform .2s ease; }
.toast.info{ background:#3b82f6; }
.toast.ok{ background:#10b981; }
.toast.err{ background:#ef4444; }

.modal-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; padding: 16px; z-index: 2000; }
.modal{ background:var(--modal-bg); border-radius:14px; padding:16px; max-width:520px; width:100%; box-shadow: var(--shadow); border:1px solid var(--card-border); }
.modal h3{ margin: 0 0 10px 0; }
.modal .actions{ justify-content:flex-end; }