:root{
  --bg:#0b0b0d; --card:#151518; --card-2:#1c1c21; --ink:#ededf0; --muted:#9a9aa3;
  --line:#2a2a31; --side:#000; --side-ink:#cfd0d6; --side-mut:#74747e;
  --gold:#e4c25c; --gold-2:#f0d27e; --gold-deep:#caa63f; --on-gold:#0b0b0d;
  --amber:#e4c25c; --green:#6ee7a3; --red:#f0867d; --blue:#8ab4f8; --gray:#9a9aa3;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 30px rgba(0,0,0,.35);
  --font-display:'Oswald',Impact,'Arial Narrow',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none}
h1{font-family:var(--font-display); font-weight:600; font-size:30px; margin:0 0 2px; letter-spacing:.01em; text-transform:uppercase}
h2{font-size:16px; margin:0 0 14px; letter-spacing:.01em; font-weight:600}
.muted{color:var(--muted)}
code{background:#26262c; padding:1px 6px; border-radius:6px; font-size:.9em; color:var(--gold-2)}

/* shell */
.shell{display:flex; min-height:100vh}
.side{
  width:248px; flex:0 0 248px; background:var(--side); color:var(--side-ink);
  display:flex; flex-direction:column; padding:24px 16px; position:sticky; top:0; height:100vh;
  border-right:1px solid #171717;
}
.brand{font-family:var(--font-display); font-weight:600; font-size:20px; color:#fff; line-height:1.05; letter-spacing:.04em; text-transform:uppercase; display:block}
.brand span{display:block; font-family:-apple-system,sans-serif; font-weight:600; font-size:10.5px; color:var(--gold); text-transform:uppercase; letter-spacing:.22em; margin-top:4px}
.side nav{display:flex; flex-direction:column; gap:3px; margin-top:30px}
.side nav a{
  color:var(--side-ink); padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; letter-spacing:.01em;
}
.side nav a:hover{background:rgba(255,255,255,.05); color:#fff}
.side nav a.active{background:var(--gold); color:var(--on-gold); font-weight:600}
.main{flex:1; padding:28px 40px; max-width:1060px}
.page-head{margin-bottom:24px}
#navtoggle{display:none}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px}
.page-title{margin:0}
.menu-btn{display:none; font-size:20px; cursor:pointer; color:var(--ink)}
.user-chip{display:inline-flex; align-items:center; gap:14px; font-size:14px}
.user-chip .nm{color:var(--ink); font-weight:600}

/* flash */
.flash{padding:12px 16px; border-radius:12px; margin-bottom:18px; font-size:14px; font-weight:500; border:1px solid transparent}
.flash.ok{background:rgba(110,231,163,.1); color:var(--green); border-color:rgba(110,231,163,.25)}
.flash.err{background:rgba(240,134,125,.1); color:var(--red); border-color:rgba(240,134,125,.25)}

/* cards + grid */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); margin-bottom:20px}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:20px; align-items:stretch; margin-bottom:20px}
.cols2 .card{margin-bottom:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:20px}
.stat{display:flex; flex-direction:column; gap:6px; margin:0}
a.stat{transition:transform .08s ease, border-color .12s ease}
a.stat:hover{transform:translateY(-2px); border-color:var(--gold)}
.stat-num{font-family:var(--font-display); font-size:34px; font-weight:600; letter-spacing:.01em; color:var(--gold)}
.stat-lbl{font-size:13px; color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--card-2); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; transition:all .1s; white-space:nowrap}
.btn:hover{border-color:#3a3a43; background:#24242a}
.btn.primary{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
.btn.primary:hover{background:var(--gold-2); border-color:var(--gold-2)}
.btn.full{width:100%; justify-content:center; margin-top:6px}
.btn.sm{padding:6px 11px; font-size:13px}
.btn.icon{padding:6px 9px; font-size:14px; line-height:1}
.btn.danger{color:var(--red); border-color:rgba(240,134,125,.35); background:transparent}
.btn.danger:hover{background:rgba(240,134,125,.1)}
.btnrow{display:flex; flex-wrap:wrap; gap:10px}

/* tables */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:0 12px 10px; border-bottom:1px solid var(--line); font-weight:600}
td{padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
td .inline-form{align-items:center}
.tc th, .tc td{text-align:center}
.tc td .inline-form{justify-content:center}
tr:last-child td{border-bottom:none}
.rowtoday td{background:rgba(228,194,92,.06)}
.rowtoday td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.table-wrap{overflow-x:auto}
.compact td{padding:7px 12px}
.compact .minsedit{padding:6px 10px; margin:0}
.sololist{display:flex; flex-direction:column; max-width:520px}
.solorow{display:flex; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line)}
.solorow:last-child{border-bottom:none}
.solorow .rlabel{width:72px; color:var(--muted); font-size:13px; flex:none}
.solorow .rname{font-weight:600}
.solorow .rmin{margin-left:auto; color:var(--muted); font-size:13px}
tr[draggable]{cursor:default}
tr.dragging{opacity:.4; background:var(--card-2)}
.grip{display:inline-block; margin-right:9px; color:var(--muted); cursor:grab; user-select:none; font-size:15px; vertical-align:middle; touch-action:none}
.grip:active{cursor:grabbing}

/* pills */
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap}
.pill.amber{background:rgba(228,194,92,.12); color:var(--gold); border-color:rgba(228,194,92,.3)}
.pill.green{background:rgba(110,231,163,.1); color:var(--green); border-color:rgba(110,231,163,.28)}
.pill.red{background:rgba(240,134,125,.1); color:var(--red); border-color:rgba(240,134,125,.28)}
.pill.blue{background:rgba(138,180,248,.1); color:var(--blue); border-color:rgba(138,180,248,.28)}
.pill.gray{background:rgba(154,154,163,.1); color:var(--gray); border-color:rgba(154,154,163,.25)}

/* forms */
label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:14px}
input,select,textarea{
  display:block; width:100%; margin-top:6px; padding:10px 12px; font-size:14px; font-weight:400;
  border:1px solid var(--line); border-radius:10px; background:#0f0f12; color:var(--ink); font-family:inherit;
}
input[type=radio],input[type=checkbox]{width:auto; display:inline-block; margin:0; accent-color:var(--gold); flex:none}
input::placeholder,textarea::placeholder{color:#5c5c66}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(228,194,92,.18)}
textarea{min-height:84px; resize:vertical}
select{appearance:none; -webkit-appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' stroke='%239a9aa3' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.78); opacity:.85; cursor:pointer; padding-left:4px}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=date]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit{color:var(--ink); font-weight:500}
input[type=date]::-webkit-datetime-edit-fields-wrapper,input[type=time]::-webkit-datetime-edit-fields-wrapper{color:var(--ink)}
/* iOS renders the date/time value centered by default — pin it left, keep native vertical centering */
input[type=date],input[type=time]{min-height:42px}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:0 22px}
.pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px}
.row4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px}
.personrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:0 14px; align-items:end}
.personrow label{margin-bottom:0}
.row5{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr auto; gap:0 14px; align-items:end}
.row5 label{margin-bottom:0}
.merge-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:0 14px; align-items:end}
.form-row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; max-width:1000px}
.form-row4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 18px; align-items:end}
.inline-form{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
dialog.modal{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:26px; width:min(440px,92vw); box-shadow:var(--shadow)}
dialog.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px}

/* auth */
.auth-main{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(900px 460px at 50% -8%, rgba(228,194,92,.10) 0%, var(--bg) 60%)}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px; width:100%; max-width:382px; box-shadow:var(--shadow)}
.brand.big{font-size:24px; margin-bottom:6px}
.login-card form{margin-top:14px}

/* public application page */
.pub{max-width:680px; margin:0 auto; padding:0 20px 80px}
.pub-hero{margin:36px 0 26px}
.pub-hero .kicker{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600}
.pub-hero h1{font-size:38px; line-height:1.05; margin:10px 0 0}
.pub-lead{color:var(--muted); font-size:15px; line-height:1.6; margin:16px 0 0}
.pub-meta{font-size:13px; color:var(--muted); margin-top:14px}
.pub-meta a{font-weight:600}
.pubcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin-bottom:16px; box-shadow:var(--shadow)}
.q{margin-bottom:0}
.q + .q{margin-top:22px}
.qlabel{display:block; font-size:15px; font-weight:600; margin-bottom:6px; color:var(--ink)}
.qhint{font-size:13px; color:var(--muted); font-weight:400; margin-left:4px}
.req{color:var(--red)}
.choices{display:flex; flex-direction:column; gap:2px; margin-top:4px}
.choices label{display:flex; align-items:center; gap:11px; font-weight:400; font-size:14px; margin:0; padding:9px 2px; cursor:pointer}
.choices.cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0 16px}
.pub-done{text-align:center; padding:46px 24px}
.pub-done .tick{font-size:40px; color:var(--green)}
.pub-submit{margin-top:8px}

/* misc */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.empty{text-align:center; color:var(--muted); padding:34px 0}
.subtle{font-size:13px; color:var(--muted)}
.right{text-align:right}
hr{border:none; border-top:1px solid var(--line); margin:20px 0}

.nav-overlay{display:none}

@media(max-width:760px){
  .side{position:fixed; left:0; top:0; width:min(264px,82vw); flex-basis:auto; transform:translateX(-100%); transition:transform .2s; z-index:30}
  #navtoggle:checked ~ .shell .side{transform:translateX(0)}
  #navtoggle:checked ~ .shell .nav-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:25}
  .main{padding:18px 16px; max-width:100%}
  .menu-btn{display:inline-block}
  h1{font-size:22px}
  .topbar{gap:10px; margin-bottom:20px}
  .card{padding:18px}
  .form-row,.form-row3,.form-row4{grid-template-columns:1fr}
  .row4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .personrow{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px}
  .row5{grid-template-columns:1fr; gap:16px 14px}
  .merge-row{grid-template-columns:1fr}
  .cols2{grid-template-columns:1fr}
  /* stack form controls and override fixed inline widths */
  .card .inline-form{flex-direction:column; align-items:stretch}
  .card .inline-form > label,
  .card .inline-form > input,
  .card .inline-form > select,
  .card .inline-form > button,
  .card .inline-form > form{width:100% !important; margin-left:0 !important}
  /* keep in-table action groups inline (the table itself scrolls) */
  .card td .inline-form{flex-direction:row; align-items:center}
  .card td .inline-form > *{width:auto !important}
  .table-wrap{-webkit-overflow-scrolling:touch}
  .solorow .rlabel{width:64px}
  .hide-sm{display:none !important}

  /* responsive tables: each row becomes a stacked card (no horizontal scroll) */
  .cardtable thead{display:none}
  .cardtable, .cardtable tbody, .cardtable tr, .cardtable td{display:block; width:100%}
  .cardtable tr{border:1px solid var(--line); border-radius:12px; padding:4px 16px; margin-bottom:12px; background:var(--card-2)}
  .cardtable tr:last-child{margin-bottom:0}
  .cardtable td{border:none; border-bottom:1px solid var(--line); padding:7px 0;
    text-align:left !important; white-space:normal !important; box-shadow:none !important; background:transparent !important;
    display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:start; justify-items:start}
  .cardtable td:last-child{border-bottom:none}
  .cardtable td::before{content:attr(data-label); color:var(--muted); font-size:11px; text-transform:uppercase;
    letter-spacing:.09em; font-weight:600; padding-top:2px}
  .cardtable td[data-label=""]{display:flex; justify-content:flex-end}
  .cardtable td[data-label=""]::before{display:none}
  .cardtable td:empty{display:none}
  .cardtable tr.rowtoday{border-color:var(--gold); background:rgba(228,194,92,.07)}
}