:root {
  color-scheme: light;
  --bg:#f4f6fa;
  --side:#111827;
  --side-hover:#1b263a;
  --surface:#ffffff;
  --surface2:#f8fafc;
  --line:#dce3ec;
  --line2:#c8d2df;
  --ink:#172033;
  --muted:#667085;
  --faint:#8a97a8;
  --primary:#3157d5;
  --primary-hover:#2848b7;
  --primary-soft:#eaf0ff;
  --indigo:#5b5bd6;
  --indigo-soft:#eeeeff;
  --teal:#0e9384;
  --teal-soft:#e5f6f2;
  --amber:#a96d14;
  --amber-soft:#fff5df;
  --red:#c2414b;
  --red-soft:#fff0f1;
  --shadow:0 18px 55px rgba(24,39,75,.09);
  --shadow-small:0 6px 20px rgba(24,39,75,.07);
}

* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; transform:none !important; }
[hidden] { display:none !important; }
.muted { color:var(--muted); }
.eyebrow { margin:0 0 5px; color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
code { color:#244bb9; }
:focus-visible { outline:3px solid rgba(49,87,213,.24); outline-offset:2px; }

.auth-screen {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:
    radial-gradient(circle at 15% 12%,rgba(49,87,213,.48),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(14,147,132,.28),transparent 32%),
    linear-gradient(135deg,#0b1220,#111d36 62%,#0b3037);
}
.auth-card { width:min(500px,100%); padding:44px; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(255,255,255,.98); box-shadow:0 32px 110px rgba(0,0,0,.32); }
.auth-card h1 { margin:13px 0 16px; color:#111a2d; font:720 36px/1.08 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.045em; }
.auth-card label { margin-top:28px; }
.auth-card button { width:100%; margin-top:14px; }
.auth-card .muted { font-size:15px; }
.error-text { color:var(--red); }
.dev-note { margin:18px 0 0; color:#8792a3; font-size:12px; text-align:center; }

.brand-mark { position:relative; display:grid; flex:0 0 auto; width:54px; height:54px; place-items:center; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#4168e6,#2949bd); box-shadow:0 9px 24px rgba(49,87,213,.3); }
.brand-mark::before { content:""; position:absolute; top:50%; left:50%; width:25px; height:25px; border:2px solid rgba(255,255,255,.95); border-right-color:rgba(255,255,255,.28); border-radius:50%; transform:translate(-50%,-50%); }
.brand-mark::after { content:""; position:absolute; top:10px; right:9px; width:7px; height:7px; border:2px solid #fff; border-radius:50%; background:#27c4b2; box-shadow:0 0 0 3px rgba(39,196,178,.22); }
.brand-mark.small { width:39px; height:39px; border-radius:10px; box-shadow:0 7px 18px rgba(0,0,0,.2); }
.brand-mark.small::before { width:18px; height:18px; }
.brand-mark.small::after { top:7px; right:6px; width:5px; height:5px; border-width:1.5px; }

.app { min-height:100vh; display:grid; grid-template-columns:248px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 15px; border-right:1px solid #253149; background:var(--side); color:#fff; }
.brand { display:flex; align-items:center; gap:12px; padding:0 8px 29px; }
.brand strong,.brand span { display:block; }
.brand strong { color:#f7f9fc; font-size:18px; font-weight:730; letter-spacing:-.025em; }
.brand span { margin-top:2px; color:#8492aa; font-size:10px; letter-spacing:.03em; }
nav { display:grid; gap:5px; }
.nav-item { display:flex; align-items:center; gap:11px; width:100%; padding:11px 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:#aab5c7; text-align:left; transition:.15s ease; }
.nav-item span { width:18px; color:#72809a; font-size:18px; text-align:center; }
.nav-item:hover { background:var(--side-hover); color:#fff; }
.nav-item.active { border-color:#36529c; background:linear-gradient(100deg,#233866,#1d3158); color:#fff; box-shadow:inset 3px 0 0 #5f80ef; }
.nav-item.active span { color:#7f9cff; }
.sidebar-foot { display:grid; gap:8px; margin-top:auto; padding:16px 10px 0; border-top:1px solid #28344a; }
.sidebar-foot a,.text-button { border:0; background:none; color:#8492aa; font-size:12px; text-align:left; text-decoration:none; }
.sidebar-foot a:hover,.text-button:hover { color:#fff; }

.workspace { min-width:0; }
.topbar { position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; min-height:90px; padding:20px clamp(24px,4vw,55px); border-bottom:1px solid rgba(220,227,236,.9); background:rgba(244,246,250,.9); backdrop-filter:blur(16px); }
.topbar h2 { margin:0; color:#151e31; font-size:29px; font-weight:720; line-height:1.1; letter-spacing:-.035em; }
.health { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.8); box-shadow:var(--shadow-small); font-size:11px; }
.health span { width:8px; height:8px; border-radius:50%; background:var(--amber); }
.health.ready span { background:var(--teal); box-shadow:0 0 0 3px rgba(14,147,132,.13); }
.health.error span { background:var(--red); }
main { padding:34px clamp(24px,4vw,55px) 70px; }
.view { display:none; max-width:1440px; margin:0 auto; }
.view.active-view { display:block; }
.page-intro { max-width:790px; margin:0; color:#556276; font-size:15px; }
.action-bar,.panel-head,.catalog-hero,.dialog-head,.dialog-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.action-bar { align-items:center; margin-bottom:24px; }

.panel { margin-bottom:22px; padding:23px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-small); }
.panel h3,.catalog-hero h3,dialog h3 { margin:0; color:#1a2335; font-size:21px; font-weight:710; line-height:1.2; letter-spacing:-.025em; }
.panel-head { align-items:center; margin-bottom:20px; }
.hint { color:var(--faint); font-size:11px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.two-column .panel { min-width:0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stat-card { min-height:130px; padding:19px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,#fff,#f8faff); box-shadow:var(--shadow-small); }
.stat-card span { display:block; color:#758196; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.stat-card strong { display:block; margin:12px 0 3px; color:#172033; font-size:35px; font-weight:730; line-height:1; letter-spacing:-.04em; }
.stat-card small { color:#8a96a8; }
.compact-list { display:grid; gap:1px; }
.compact-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 2px; border-bottom:1px solid #edf0f4; }
.compact-row:last-child { border:0; }
.compact-row strong,.compact-row span { display:block; }
.compact-row span,.compact-row time { color:var(--muted); font-size:11px; }

button { padding:10px 15px; border:1px solid var(--primary); border-radius:8px; background:var(--primary); color:#fff; font-weight:720; box-shadow:0 4px 12px rgba(49,87,213,.17); transition:.15s ease; }
button:hover { border-color:var(--primary-hover); background:var(--primary-hover); transform:translateY(-1px); }
.secondary { border-color:var(--line2); background:#fff; color:#435067; box-shadow:none; }
.secondary:hover { border-color:#9fadc0; background:#f7f9fc; color:#202b3f; }
.small-button { padding:7px 10px; font-size:11px; }
.icon-button { width:34px; height:34px; padding:0; border-color:var(--line); background:#fff; color:#7a8799; box-shadow:none; font-size:23px; }
.danger { border-color:#e4b9bd; background:var(--red-soft); color:#a9343e; box-shadow:none; }
.danger:hover { border-color:#d8979d; background:#ffe6e8; color:#922d36; }
.back-button { margin-bottom:18px; padding:0; border:0; background:none; color:var(--primary); box-shadow:none; }
.back-button:hover { border:0; background:none; color:var(--primary-hover); transform:none; }

label { display:block; color:#475467; font-size:12px; font-weight:650; }
label small { display:block; margin-top:4px; color:#8491a3; font-weight:400; }
input,textarea,select { width:100%; margin-top:6px; padding:10px 11px; border:1px solid #cbd5e1; border-radius:8px; outline:none; background:#fff; color:var(--ink); box-shadow:inset 0 1px 2px rgba(16,24,40,.025); }
input::placeholder,textarea::placeholder { color:#98a3b3; }
input:focus,textarea:focus,select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(49,87,213,.11); }
input:disabled,select:disabled { background:#f2f4f7; color:#7d899a; }
textarea { resize:vertical; }
.form-row { display:grid; grid-template-columns:2fr 1.2fr 1fr 90px 1.2fr; gap:13px; margin:15px 0; align-items:end; }
.form-row.three { grid-template-columns:repeat(3,1fr); }
.checkbox { display:flex; align-items:center; gap:8px; min-height:39px; }
.checkbox input { width:auto; margin:0; accent-color:var(--primary); }
fieldset { display:grid; gap:8px; margin:17px 0; padding:15px; border:1px solid var(--line); border-radius:9px; }
legend { color:var(--muted); font-size:11px; }

.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:16px; }
.catalog-card { position:relative; min-height:210px; padding:22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(150deg,#fff,#f7f9fd); box-shadow:var(--shadow-small); cursor:pointer; transition:.15s ease; }
.catalog-card:hover { border-color:#aebce0; box-shadow:var(--shadow); transform:translateY(-2px); }
.catalog-card h3 { margin:11px 0 9px; color:#172033; font-size:21px; font-weight:710; line-height:1.15; letter-spacing:-.025em; }
.catalog-card p { margin:0; color:var(--muted); }
.catalog-metrics { position:absolute; right:22px; bottom:20px; left:22px; display:flex; gap:18px; padding-top:14px; border-top:1px solid var(--line); color:#7d899a; font-size:11px; }
.catalog-metrics strong { color:#354057; font-size:14px; }
.catalog-hero { align-items:center; margin-bottom:23px; }
.catalog-hero h3 { font-size:34px; }
.catalog-hero p { max-width:760px; }

.upload-panel { border-color:#bdc9e8; background:linear-gradient(145deg,#fff,#f6f8ff); }
.drop-zone { display:grid; min-height:170px; place-items:center; align-content:center; gap:4px; padding:25px; border:1px dashed #9daed8; border-radius:11px; background:rgba(234,240,255,.45); text-align:center; cursor:pointer; transition:.15s ease; }
.drop-zone:hover,.drop-zone.dragging { border-color:var(--primary); background:var(--primary-soft); }
.drop-zone input { display:none; }
.drop-zone strong { color:#25324a; font-size:16px; }
.drop-zone small { color:var(--muted); }
.drop-icon { color:var(--primary); font-size:31px; }
.folder-picker { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; }
.folder-picker input { display:none; }
.secondary-button { display:inline-flex; align-items:center; min-height:36px; padding:0 13px; border:1px solid #bcc7da; border-radius:8px; background:#fff; color:#36445d; font-size:13px; font-weight:650; cursor:pointer; }
.secondary-button:hover { border-color:#8fa1c1; background:#f7f9fd; }
.upload-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:15px; }
.upload-queue { display:grid; gap:7px; margin-top:15px; }
.upload-item { display:grid; grid-template-columns:1fr 120px; gap:15px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.upload-item span:last-child { color:var(--muted); text-align:right; }
.upload-item.success { border-color:#9ed8c7; background:#f4fbf9; }
.upload-item.error { border-color:#e1aeb3; background:var(--red-soft); color:#9f303a; }

.filters { display:grid; grid-template-columns:minmax(200px,1fr) 180px 160px auto; gap:10px; margin-bottom:15px; }
.filters input,.filters select { margin:0; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th { padding:9px 10px; border-bottom:1px solid var(--line2); color:#758196; font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
td { padding:13px 10px; border-bottom:1px solid #edf0f4; color:#48556a; vertical-align:top; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fafbfe; }
td strong,td small { display:block; }
td strong { color:#253047; }
td small { max-width:440px; overflow:hidden; color:#7c889a; text-overflow:ellipsis; white-space:nowrap; }
.table-actions { display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }
.table-actions button,.table-actions a { padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:#4c5a71; box-shadow:none; font-size:10px; font-weight:650; text-decoration:none; }
.table-actions button:hover,.table-actions a:hover { border-color:#9dabbe; background:#f6f8fb; color:#253047; transform:none; }
.table-actions .danger { border-color:#e6bdc1; background:var(--red-soft); color:#a9343e; }
.badge { display:inline-block; padding:3px 7px; border:1px solid var(--line2); border-radius:999px; background:#f7f9fb; color:#647084; font-size:9px; font-weight:720; letter-spacing:.08em; text-transform:uppercase; }
.badge.ready,.badge.succeeded,.badge.enabled { border-color:#a5dbcb; background:var(--teal-soft); color:#087567; }
.badge.failed,.badge.disabled { border-color:#e6bdc1; background:var(--red-soft); color:#a9343e; }
.badge.running,.badge.processing { border-color:#ebcf9e; background:var(--amber-soft); color:#8d5a0c; }
.badge.catalog { border-color:#c9c9f3; background:var(--indigo-soft); color:#4848b5; }
.badge.internet { border-color:#9edbd2; background:var(--teal-soft); color:#087a6d; }
.pagination { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.pagination span { align-self:center; color:var(--muted); font-size:11px; }
.empty { padding:35px 10px; color:var(--muted); text-align:center; }

.search-panel form > label textarea { min-height:120px; }
.message { margin-top:18px; padding:11px 13px; border-left:3px solid var(--primary); background:var(--primary-soft); color:#43516a; }
.message.success { border-color:var(--teal); background:var(--teal-soft); }
.message.error { border-color:var(--red); background:var(--red-soft); color:#a3343e; }
.message.working { border-color:var(--amber); background:var(--amber-soft); }
.answer-box { margin-top:20px; padding:20px; border:1px solid #b8c7ec; border-radius:11px; background:#f5f8ff; }
.answer-box pre { margin:0; color:#2f3a50; font:14px/1.65 inherit; white-space:pre-wrap; }
.search-results { display:grid; gap:11px; margin-top:15px; }
.result-card { padding:19px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.result-card h4 { margin:5px 0 8px; color:#253047; font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.015em; }
.result-card h4 a { color:#264fc6; text-decoration:none; }
.result-card h4 a:hover { color:var(--primary-hover); text-decoration:underline; }
.result-card p { display:-webkit-box; overflow:hidden; margin:0; color:#5d697c; -webkit-box-orient:vertical; -webkit-line-clamp:5; }
.result-meta { display:flex; gap:8px; color:#7a8698; font-size:10px; letter-spacing:.07em; text-transform:uppercase; }

.operations-grid { grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); }
dialog { width:min(620px,calc(100% - 30px)); padding:0; border:1px solid var(--line2); border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 30px 120px rgba(15,23,42,.3); }
dialog::backdrop { background:rgba(11,18,32,.62); backdrop-filter:blur(4px); }
dialog form,dialog > div,dialog > p,.secret-box { margin-inline:25px; }
dialog form { margin-block:25px; }
dialog label { margin-top:14px; }
dialog details { margin-top:16px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:#f8faff; }
dialog summary { cursor:pointer; color:#42516a; font-size:12px; font-weight:700; }
.dialog-head { align-items:center; margin-bottom:19px; }
.dialog-actions { justify-content:flex-end; margin-top:23px; padding-top:17px; border-top:1px solid var(--line); }
.secret-box { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:13px; border:1px solid #b8c7ec; border-radius:9px; background:#f4f7ff; }
.secret-box code { overflow:auto; white-space:nowrap; }
.dialog-spacer { flex:1; }
.toast-region { position:fixed; z-index:30; right:22px; bottom:22px; display:grid; gap:8px; }
.toast { max-width:390px; padding:12px 15px; border:1px solid var(--line2); border-radius:9px; background:#fff; box-shadow:var(--shadow); }
.toast.error { border-color:#dfabb0; background:var(--red-soft); color:#9f303a; }

@media (max-width:1050px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .two-column,.operations-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:repeat(2,1fr); }
  .links { grid-template-columns:1fr 1fr; }
}

@media (max-width:760px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:static; width:100%; height:auto; }
  .sidebar nav { grid-template-columns:repeat(3,1fr); }
  .sidebar-foot { display:none; }
  .nav-item { justify-content:center; font-size:11px; }
  .brand { padding-bottom:15px; }
  .topbar { position:static; }
  .stats-grid,.form-row,.form-row.three,.filters { grid-template-columns:1fr; }
  .upload-actions { align-items:stretch; flex-direction:column; }
  .folder-picker { align-items:flex-end; flex-direction:column; }
  .action-bar,.catalog-hero { align-items:flex-start; flex-direction:column; }
  .catalog-grid { grid-template-columns:1fr; }
  main { padding-inline:18px; }
  .auth-card { padding:28px; }
}