:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --ink:#172033;
  --muted:#64748b;
  --line:#d8e2ef;
  --soft:#eef6ff;
  --soft-2:#f8fafc;
  --accent:#0f766e;
  --accent-2:#0ea5e9;
  --danger:#b91c1c;
  --warn:#b45309;
  --ok:#166534;
  --shadow:0 10px 25px rgba(15,23,42,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 100%);
  color:var(--ink);
}
.container{max-width:1320px;margin:0 auto;padding:18px}
.hero{
  background:linear-gradient(135deg,#0f766e 0%,#0ea5e9 100%);
  color:#fff;
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.hero h1{margin:0 0 8px;font-size:clamp(1.45rem,2.6vw,2.35rem)}
.hero p{margin:4px 0;opacity:.96}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.user-chip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 12px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.cols-3{grid-column:span 3}.cols-4{grid-column:span 4}.cols-5{grid-column:span 5}.cols-6{grid-column:span 6}.cols-7{grid-column:span 7}.cols-8{grid-column:span 8}.cols-9{grid-column:span 9}.cols-12{grid-column:span 12}
h2,h3{margin-top:0;margin-bottom:12px}
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;align-items:end}
.field{grid-column:span 12;min-width:0}.field-2{grid-column:span 2}.field-3{grid-column:span 3}.field-4{grid-column:span 4}.field-5{grid-column:span 5}.field-6{grid-column:span 6}.field-8{grid-column:span 8}
label{display:block;margin-bottom:6px;font-size:.92rem;font-weight:700;color:#334155}
input,select,button,textarea{
  width:100%;border-radius:12px;border:1px solid #cbd5e1;padding:11px 13px;font-size:.96rem;background:#fff;color:var(--ink)
}
textarea{min-height:78px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(14,165,233,.15);border-color:var(--accent-2)}
button{cursor:pointer;font-weight:800;transition:transform .06s ease,opacity .2s ease}
button:hover{opacity:.95}button:active{transform:translateY(1px)}
.btn{background:var(--accent);color:#fff;border:none}.btn-secondary{background:#0f172a;color:#fff;border:none}.btn-soft{background:var(--soft);color:#0f172a;border:1px solid #bfdbfe}.btn-danger{background:var(--danger);color:#fff;border:none}.btn-warn{background:#fff7ed;color:var(--warn);border:1px solid #fed7aa}.btn-small{width:auto;padding:7px 10px;border-radius:10px;font-size:.86rem}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.actions button{width:auto}
.alert{display:none;margin:0 0 14px;padding:11px 13px;border-radius:14px;border:1px solid #cbd5e1;background:#f8fafc;line-height:1.45}
.alert.show{display:block}.alert.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}.alert.ok{background:#ecfdf5;border-color:#bbf7d0;color:#166534}.alert.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.status{padding:12px 14px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;line-height:1.5}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metric{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px;min-height:92px}
.metric .label{display:block;color:var(--muted);font-size:.88rem;margin-bottom:8px}.metric .value{font-size:1.35rem;font-weight:900;letter-spacing:-.02em}.metric .sub{color:var(--muted);font-size:.86rem;margin-top:5px}
.progress-wrap{margin-top:10px}.progress{width:100%;height:16px;border-radius:999px;background:#e2e8f0;overflow:hidden;border:1px solid #cbd5e1}.progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0f766e,#0ea5e9)}
table{width:100%;border-collapse:collapse;margin-top:10px}th,td{text-align:left;padding:11px 9px;border-bottom:1px solid #e2e8f0;vertical-align:top;font-size:.92rem}th{background:#f8fafc;color:#334155;font-size:.86rem;position:sticky;top:0;z-index:1}.table-wrap{overflow:auto;max-height:460px;border:1px solid #e2e8f0;border-radius:16px}.right{text-align:right}.muted{color:var(--muted)}.mono{font-family:Consolas,Monaco,monospace}.hidden{display:none!important}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.82rem;font-weight:800;background:#eef2ff;color:#3730a3;white-space:nowrap}.pill.Office{background:#ecfeff;color:#155e75}.pill.Remote{background:#f5f3ff;color:#6d28d9}.pill.Holiday{background:#fef9c3;color:#854d0e}.pill.open{background:#dcfce7;color:#166534}.pill.completed{background:#e0f2fe;color:#075985}.pill.void{background:#fee2e2;color:#991b1b}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tab{width:auto;background:#fff;border:1px solid #cbd5e1;color:#0f172a}.tab.active{background:#0f172a;color:#fff;border-color:#0f172a}.section{display:none}.section.active{display:block}
.login-wrap{max-width:480px;margin:34px auto}.login-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:22px}.login-card h1{margin-top:0}.split-line{height:1px;background:#e2e8f0;margin:14px 0}.note{font-size:.9rem;color:var(--muted);line-height:1.45}
@media(max-width:1050px){.cols-3,.cols-4,.cols-5,.cols-6,.cols-7,.cols-8,.cols-9{grid-column:span 12}.metric-grid{grid-template-columns:repeat(2,1fr)}.field-2,.field-3,.field-4,.field-5,.field-6,.field-8{grid-column:span 12}}
@media(max-width:640px){.container{padding:12px}.hero{padding:16px}.metric-grid{grid-template-columns:1fr}.actions button{width:100%}th,td{font-size:.86rem;padding:9px 7px}.table-wrap{max-height:380px}.login-wrap{margin:18px auto}}


/* Phase 6 polish */
.nav-card{display:block;text-decoration:none;color:inherit;transition:transform .08s ease, box-shadow .2s ease}
.nav-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.12)}
.nav-card p{color:var(--muted);line-height:1.45;margin-bottom:0}
.checklist{display:grid;gap:10px;margin-top:10px}.checklist label{display:flex;gap:10px;align-items:flex-start;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font-weight:600}.checklist input{width:auto;margin-top:2px}
.qa-list{line-height:1.8}.small-text{font-size:.82rem;white-space:pre-wrap}.field-1{grid-column:span 1}.pill.submitted{background:#dbeafe;color:#1d4ed8}.pill.approved{background:#dcfce7;color:#166534}.pill.locked{background:#fee2e2;color:#991b1b}.pill.reopened{background:#fef9c3;color:#854d0e}.pill.draft{background:#f1f5f9;color:#334155}
@media(max-width:1050px){.field-1{grid-column:span 12}}

/* Refinement patch 1 */
.btn-current{display:inline-flex;align-items:center;justify-content:center;width:auto;border-radius:10px;border:1px solid #cbd5e1;padding:8px 12px;font-size:.92rem;font-weight:800;background:#e2e8f0;color:#64748b;cursor:not-allowed;text-decoration:none;opacity:.9}.hero .actions{align-items:center}.ratio-panel{margin-top:16px;border:1px solid #dbeafe;background:#f8fbff;border-radius:16px;padding:14px}.ratio-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.ratio-grid{grid-template-columns:repeat(2,1fr)}.progress.compact{height:12px}.progress.split>span{background:linear-gradient(90deg,#0f766e,#0ea5e9)}.help-block{line-height:1.55}.help-block h3{margin-top:18px}.help-block ul,.help-block ol{line-height:1.7}.field-help{grid-column:span 12;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;color:#475569;font-size:.9rem;line-height:1.45}.field-help strong{color:#0f172a}@media(max-width:640px){.ratio-head{display:block}.ratio-grid{grid-template-columns:1fr}.btn-current{width:100%}}

/* Refinement patch 2 */
.brand-title{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.brand-logo{height:76px;max-width:340px;object-fit:contain;background:rgba(255,255,255,.92);border-radius:16px;padding:9px 12px}.login-logo{height:96px;max-width:380px;object-fit:contain;margin-bottom:14px}.brand-login{text-align:left}.smart-box{margin-top:10px;padding:12px 14px;border-radius:14px;background:#ecfdf5;border:1px solid #bbf7d0;color:#166534;font-size:1rem}.week-summary-box{margin-top:16px}.small-table{max-height:240px}.nav-actions .btn-current{background:#dbe4ef;color:#475569;border-color:#cbd5e1;pointer-events:none}.btn-danger.btn-small{width:auto}.portal-logo-mark{height:36px;width:auto}@media(max-width:640px){.brand-title{display:block}.brand-logo{height:56px;margin-bottom:10px}.login-logo{height:72px}.nav-actions a,.nav-actions span,.nav-actions button{width:100%;text-align:center}}

/* Refinement patch 3 */
.session-actions{display:flex;gap:8px;flex-wrap:wrap}.session-actions button{width:auto}.btn-disabled{opacity:.45;cursor:not-allowed}