:root{
  --bg:#0b0f14;
  --bg-accent:#101a28;
  --panel:#151d2a;
  --panel-soft:#1b2636;
  --text:#eef4ff;
  --muted:#a7b3c8;
  --primary:#4f8cff;
  --primary-strong:#2f6de0;
  --danger:#ef4444;
  --border:#2a3b56;
  --ring:rgba(79,140,255,.35);
  --grid:rgba(212,227,255,.22);
  --frame:rgba(176,202,255,.28);
  --radius:12px;
  --fs-base:13px;
  --fs-h:20px;
  --row-h-eras:28px;
}

*{box-sizing:border-box}

html, body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  font-size:var(--fs-base);
  min-height:100vh;
  background-color:var(--bg);
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(79,140,255,.18), transparent 60%),
    radial-gradient(900px 420px at 85% -20%, rgba(57,214,180,.1), transparent 60%),
    linear-gradient(180deg, var(--bg-accent) 0%, var(--bg) 45%, #0a0d12 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(9,13,20,.8);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:14px 18px;
}

.topbar h1{
  margin:0;
  font-size:var(--fs-h);
  letter-spacing:.2px;
}

.topbar-actions{
  margin-top:10px;
  display:flex;
  gap:12px;
  align-items:center;
}

.topbar-admin-link{ margin-left:auto; }

.searchbar input{
  width:360px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(22,32,47,.9);
  color:var(--text);
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.searchbar input::placeholder{ color:#8ea0bd; }

.searchbar input:focus{
  border-color:#5f9bff;
  box-shadow:0 0 0 3px var(--ring);
  background:rgba(26,38,56,.95);
}

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

.card{
  background:linear-gradient(180deg, rgba(26,37,55,.92) 0%, rgba(19,28,42,.95) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 16px 38px rgba(2,7,16,.35);
}

.btn{
  background:#2c456b;
  border:1px solid #4f79b2;
  color:#f7fbff;
  border-radius:10px;
  padding:9px 13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:500;
  transition:transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn:hover{
  background:#355381;
  border-color:#6b95d3;
  transform:translateY(-1px);
}

.btn.primary{
  background:linear-gradient(180deg, #5c99ff 0%, var(--primary-strong) 100%);
  border-color:transparent;
  color:#fff;
}

.btn.primary:hover{
  background:linear-gradient(180deg, #6ca5ff 0%, #3b79eb 100%);
}

.btn.danger{ background:var(--danger); border-color:transparent; color:#fff; }

.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
}

#timeline{
  margin-top:14px;
  height:calc(100vh - 205px);
  max-height:none;
  overflow-y:auto;
}

#timeline.card{
  border:1px solid var(--frame);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(2,7,16,.35);
}

.vis-item{
  color:#fff !important;
  border:none !important;
  border-radius:9px;
  font-size:var(--fs-base);
  padding:4px 10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 4px 12px rgba(0,0,0,.2);
}

.darkred{ background-color:#8c1d2f !important; }
.blue   { background-color:#3d6de2 !important; }
.green  { background-color:#228b63 !important; }
.purple { background-color:#7946d1 !important; }
.orange { background-color:#d68424 !important; }

.vis-item[class*="era-"]{
  padding:6px 12px !important;
  border-radius:10px !important;
}

.era-golden      { background:#c69020 !important; }
.era-silver      { background:#c8cfda !important; color:#111 !important; }
.era-bronze      { background:#aa6d3e !important; }
.era-modern      { background:#207f91 !important; }
.era-renaissance { background:#4751c7 !important; }
.era-rebirth     { background:#2d9472 !important; }
.era-infinite    { background:#4853ad !important; }
.era-dawn        { background:#c33c52 !important; }

.vis-time-axis .vis-text{ color:var(--text) !important; }

.vis-time-axis .vis-grid.vis-vertical,
.vis-time-axis .vis-grid.vis-horizontal{
  border-color:var(--grid) !important;
  opacity:.85;
}

.vis-panel.vis-left,
.vis-panel.vis-center,
.vis-panel.vis-bottom,
.vis-timeline,
.vis-labelset{
  border-color:var(--frame) !important;
}

.vis-labelset .vis-label,
.vis-foreground .vis-group,
.vis-row{
  border-color:var(--grid) !important;
}

.vis-labelset .vis-label{
  display:block !important;
  color:var(--text);
}

.vis-labelset .vis-label.group-eras,
.vis-foreground .vis-group.group-eras{
  height:var(--row-h-eras) !important;
}

.vis-labelset .vis-label.group-eras .vis-inner{
  line-height:var(--row-h-eras) !important;
}

.vis-item.era-golden,
.vis-item.era-silver,
.vis-item.era-bronze,
.vis-item.era-modern,
.vis-item.era-renaissance,
.vis-item.era-rebirth,
.vis-item.era-infinite,
.vis-item.era-dawn{
  top:4px !important;
  height:22px !important;
  padding:0 10px !important;
  font-size:12px;
  border:0 !important;
  z-index:1;
}

.vis-item.era-golden .vis-item-content,
.vis-item.era-silver .vis-item-content,
.vis-item.era-bronze .vis-item-content,
.vis-item.era-modern .vis-item-content,
.vis-item.era-renaissance .vis-item-content,
.vis-item.era-rebirth .vis-item-content,
.vis-item.era-infinite .vis-item-content,
.vis-item.era-dawn .vis-item-content{
  display:flex;
  align-items:center;
  height:100%;
  white-space:nowrap;
}

.legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:12px 14px;
  margin:0 0 10px;
  align-items:center;
}

.legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border:1px solid rgba(147,173,219,.24);
  border-radius:999px;
  background:rgba(19,28,44,.5);
}

.legend-box{
  width:18px;
  height:18px;
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
  display:inline-block;
}

.vis-tooltip{
  background:#0f1624 !important;
  color:#f5f8ff !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  padding:9px 10px !important;
  box-shadow:0 12px 26px rgba(0,0,0,.42) !important;
}

@media (max-width:980px){
  .topbar-actions{ flex-wrap:wrap; }
  .searchbar{ flex:1 1 100%; }
  .searchbar input{ width:100%; }
}

@media (max-width:720px){
  .container{ padding:12px; }
  .topbar{ padding:12px; }
  .topbar h1{ font-size:17px; }
  .btn{ justify-content:center; width:100%; }
  #timeline{ height:calc(100vh - 270px); }
  .legend{ gap:10px; padding:10px 10px; }
}
:root{
  --bg:#0b0f14;
  --bg-accent:#101a28;
  --panel:#151d2a;
  --panel-soft:#1b2636;
  --text:#eef4ff;
  --muted:#a7b3c8;
  --primary:#4f8cff;
  --primary-strong:#2f6de0;
  --danger:#ef4444;
  --border:#2a3b56;
  --ring:rgba(79,140,255,.35);
}

*{box-sizing:border-box}

html, body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
  background-color:var(--bg);
  background:
    radial-gradient(1100px 480px at 10% -15%, rgba(79,140,255,.16), transparent 60%),
    radial-gradient(800px 380px at 90% -25%, rgba(57,214,180,.1), transparent 60%),
    linear-gradient(180deg, var(--bg-accent) 0%, var(--bg) 50%, #090d12 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.topbar{
  position:sticky;
  top:0;
  background:rgba(9,13,20,.84);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  padding:14px 18px;
  z-index:20;
}

.topbar h1{
  margin:0;
  font-size:19px;
  letter-spacing:.2px;
}

.tabs{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.tab{
  background:#23344f;
  border:1px solid #35517a;
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  transition:background .16s ease, transform .14s ease, border-color .16s ease, box-shadow .16s ease;
}

.tab:hover{
  background:#2a3d5d;
  border-color:#486b9d;
  transform:translateY(-1px);
}

.tab.active{
  background:linear-gradient(180deg, #5c99ff 0%, var(--primary-strong) 100%);
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(79,140,255,.22);
}

.frise-btn,
.sql-btn,
.logout-btn{
  padding:8px 12px;
  border-radius:10px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1.15;
  font-weight:500;
  transition:transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.frise-btn{
  background:linear-gradient(180deg, #5c99ff 0%, var(--primary-strong) 100%);
  border:0;
  color:#fff;
}

.frise-btn:hover{
  background:linear-gradient(180deg, #6ca5ff 0%, #3b79eb 100%);
  transform:translateY(-1px);
}

.sql-btn{
  background:#24344f;
  border:1px solid #35517a;
  color:var(--text);
}

.sql-btn:hover{
  background:#2a3d5d;
  border-color:#486b9d;
  transform:translateY(-1px);
}

.logout-btn{
  background:#b93a4a;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}

.logout-btn:hover{
  background:#a23240;
  transform:translateY(-1px);
}

.frise-btn:focus-visible,
.sql-btn:focus-visible,
.logout-btn:focus-visible,
.tab:focus-visible,
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
}

.container{
  padding:18px;
  max-width:1200px;
  margin:0 auto;
  min-height:calc(100vh - 112px);
  padding-bottom:28px;
}

.dashboard{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.dash-card{
  background:linear-gradient(180deg, rgba(26,37,55,.92) 0%, rgba(19,28,42,.95) 100%);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 12px;
  box-shadow:0 10px 24px rgba(2,7,16,.28);
}

.dash-card h2{
  margin:0 0 8px;
  font-size:12px;
  color:var(--muted);
  font-weight:500;
}

.dash-card p{
  margin:0;
  font-size:13px;
}

.section{display:none}
.section.active{display:block}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.section-tools{
  display:flex;
  gap:8px;
  align-items:center;
}

.table-search{
  width:280px;
  max-width:48vw;
  background:#111a28;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  color:var(--text);
}

.table-search::placeholder{ color:#8ea0bd; }

.table-search:focus{
  outline:none;
  border-color:#5f9bff;
  box-shadow:0 0 0 3px var(--ring);
}

.section h2{
  margin:0;
  font-size:17px;
  font-weight:700;
}

.table-wrap{
  background:linear-gradient(180deg, rgba(26,37,55,.92) 0%, rgba(19,28,42,.95) 100%);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:auto;
  box-shadow:0 16px 38px rgba(2,7,16,.35);
}

.grid{
  width:100%;
  border-collapse:collapse;
}

.grid th,
.grid td{
  border-bottom:1px solid rgba(93,127,178,.35);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}

.grid thead th{
  position:sticky;
  top:0;
  background:#1a2638;
  font-weight:700;
  z-index:5;
}

.grid tbody tr:hover{
  background:rgba(55,82,121,.2);
}

.btn{
  background:#2c456b;
  border:1px solid #4f79b2;
  color:#f7fbff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:transform .14s ease, background .16s ease, border-color .16s ease;
}

.btn:hover{
  background:#355381;
  border-color:#6b95d3;
  transform:translateY(-1px);
}

.btn.primary{
  background:linear-gradient(180deg, #5c99ff 0%, var(--primary-strong) 100%);
  border-color:transparent;
  color:#fff;
}

.btn.danger{
  background:var(--danger);
  border-color:transparent;
  color:#fff;
}

.btn.sm{
  padding:6px 10px;
  font-size:12px;
  font-weight:500;
}
.row-actions .btn.sm:not(.danger){
  background:#36588b;
  border-color:#5f89c8;
}
.row-actions{display:flex;gap:6px}

.modal{
  position:fixed;
  inset:0;
  background:rgba(3,7,12,.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:50;
}

.modal.show{display:flex}

.modal-card{
  width:min(720px,92vw);
  background:linear-gradient(180deg, rgba(26,37,55,.98) 0%, rgba(19,28,42,.99) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(2,7,16,.55);
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(93,127,178,.35);
}

.modal-head h3{margin:0;font-size:16px}

.icon-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:16px;
}

.form-grid .field{display:flex;flex-direction:column;gap:6px}

.field label{font-size:12px;color:var(--muted)}

.field input,
.field textarea,
.field select{
  background:#111a28;
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  color:var(--text);
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:#5f9bff;
  box-shadow:0 0 0 3px var(--ring);
}

.field textarea{min-height:90px;resize:vertical}
.field select[multiple]{min-height:150px}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 16px;
  border-top:1px solid rgba(93,127,178,.35);
}

.tabs .right-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.toast-region{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toast{
  min-width:260px;
  max-width:min(420px, calc(100vw - 28px));
  background:#162338;
  color:#f7fbff;
  border:1px solid #38537d;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 14px 30px rgba(2,7,16,.45);
  font-size:13px;
}

.toast.success{ border-color:#2f8b67; background:#143428; }
.toast.error{ border-color:#ad4a59; background:#3a1c24; }
.toast.info{ border-color:#49699b; background:#1a2940; }

@media (max-width:980px){
  .tabs{flex-wrap:wrap}

  .tabs .right-actions{
    margin-left:0;
    width:100%;
    justify-content:flex-end;
  }

  .dashboard{
    grid-template-columns:1fr;
  }

  .table-search{
    width:220px;
  }
}

@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:680px){
  .topbar{padding:12px}
  .topbar h1{font-size:17px}
  .container{padding:12px}

  .section-head{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .section-tools{
    flex-direction:column;
    align-items:stretch;
  }

  .table-search{
    width:100%;
    max-width:none;
  }

  .tabs .right-actions{
    flex-wrap:wrap;
    justify-content:stretch;
  }

  .tabs .right-actions > *{
    flex:1 1 100%;
  }

  .frise-btn,
  .logout-btn,
  .sql-btn{
    width:100%;
  }

  .grid th,
  .grid td{
    padding:8px 10px;
    font-size:12px;
  }

  .toast-region{
    left:12px;
    right:12px;
    bottom:12px;
  }
}