:root{
  --bg:#0b0f14;
  --card:#121826;
  --stroke:#243042;
  --text:#e8edf6;
  --muted:#aab6c8;

  --alpha:#2b7cff;
  --story:#ff7a1a;
  --ok:#2bd67b;
  --warn:#ffc14a;
  --danger:#ff5a5a;

  --shadow: 0 10px 30px rgba(0,0,0,.22);
}

:root[data-theme="light"]{
  --bg:#f4f6fb;
  --card:#ffffff;
  --stroke:#d7deea;
  --text:#111827;
  --muted:#556176;

  --shadow: 0 10px 25px rgba(17,24,39,.08);
}

*{box-sizing:border-box}

html, body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% 0%, rgba(18,32,55,.75), var(--bg));
}

a{color:inherit}
a:hover{opacity:.92}

.container{max-width:1100px; margin:18px auto; padding:0 16px}

/* ===== Topbar ===== */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px);
  position:sticky;
  top:0;
  z-index:5;
}
.brand{font-weight:800; letter-spacing:.3px}
.userbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--stroke);
  padding:8px 12px;
  border-radius:10px;
  background: transparent;
}
.btn-outline:hover{border-color: color-mix(in srgb, var(--stroke) 60%, var(--text));}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  gap:10px;
  margin:10px 0 14px;
  flex-wrap:wrap;
}

.tab-btn{
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 86%, transparent);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.tab-btn:hover{filter:brightness(1.04)}
.tab-btn.active{outline:2px solid color-mix(in srgb, var(--alpha) 55%, transparent);}

/* Цветовые подсказки под вкладки (если классы есть на кнопках) */
.tab-btn.tab-alphabet{border-color: color-mix(in srgb, var(--alpha) 45%, var(--stroke));}
.tab-btn.tab-story{border-color: color-mix(in srgb, var(--story) 45%, var(--stroke));}
.tab-btn.tab-story3{border-color: color-mix(in srgb, var(--story) 45%, var(--stroke));}
.tab-btn.tab-story169{border-color: color-mix(in srgb, var(--story) 45%, var(--stroke));}
.tab-btn.tab-payroll{border-color: color-mix(in srgb, var(--ok) 35%, var(--stroke));}

.tab-btn.active.tab-alphabet{outline:2px solid color-mix(in srgb, var(--alpha) 65%, transparent);}
.tab-btn.active.tab-story,
.tab-btn.active.tab-story3,
.tab-btn.active.tab-story169{outline:2px solid color-mix(in srgb, var(--story) 65%, transparent);}
.tab-btn.active.tab-payroll{outline:2px solid color-mix(in srgb, var(--ok) 55%, transparent);}

/* ===== Tab sections (ВАЖНО: это не кнопки) ===== */
section.tab{
  display:none;          /* по умолчанию скрыты */
  margin-top: 8px;
}

/* JS включает активную секцию inline-style, поэтому всё ок */

/* ===== Cards / Typography ===== */
h1,h2,h3{margin:8px 0 10px; color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:12px}
.hint{margin-top:8px; color:var(--muted); font-size:13px}

.card{
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
  box-shadow: var(--shadow);
}

.alpha-card{border-color: color-mix(in srgb, var(--alpha) 35%, var(--stroke));}
.story-card{border-color: color-mix(in srgb, var(--story) 35%, var(--stroke));}

/* ===== Forms ===== */
label{display:block; margin:10px 0 6px; color:var(--muted); font-weight:700}

input[type="file"], input[type="text"], input, textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--bg) 55%, #0f1522);
  color:var(--text);
  outline:none;
}

textarea{min-height:120px; resize:vertical}

/* ===== Buttons ===== */
button, .btn{
  margin-top:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--story) 90%, transparent), color-mix(in srgb, var(--warn) 85%, transparent));
  color:#151515;
  font-weight:900;
  cursor:pointer;
}

button:hover, .btn:hover{filter:brightness(1.05)}
button:disabled{opacity:.6; cursor:not-allowed}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  line-height:1;
}

.btn.danger, button.danger{
  background: color-mix(in srgb, var(--danger) 25%, transparent);
  color:var(--text);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--stroke));
}

.btn.ghost{
  background: transparent;
  color: var(--text);
  border:1px solid var(--stroke);
}

.result{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed var(--stroke);
  color:var(--text);
}
.result a{color:color-mix(in srgb, var(--ok) 75%, var(--text))}
.warn{margin-top:8px; color:var(--warn)}

/* ===== Layout helpers ===== */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row-between{justify-content:space-between}
.table-wrap{overflow:auto; border-radius:12px; border:1px solid var(--stroke)}

/* ===== Tables ===== */
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
  background: transparent;
}
.table th, .table td{
  padding:10px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  text-align:left;
  vertical-align:top;
}
.table th{color:var(--muted); font-size:13px; font-weight:800}
.table tr:hover td{background: color-mix(in srgb, var(--stroke) 14%, transparent)}

/* ===== Login ===== */
.login-card{
  max-width:420px;
  margin: 10vh auto;
  padding:18px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-card h1{margin:0 0 10px}

/* ===== Errors ===== */
.error, .err{
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
  color: color-mix(in srgb, #fecaca 80%, var(--text));
  white-space:pre-wrap;
}

/* ===== Links inside cards ===== */
.card a, .card a:visited{
  color: color-mix(in srgb, var(--alpha) 55%, var(--text));
}

/* ===== Charts ===== */
.chart-box{height:360px}

/* ===== Small screens ===== */
@media (max-width: 720px){
  .table{min-width: 620px}
  .tab-btn{width:auto}
}