:root{
  --wo-ink:#172832;--wo-muted:#587078;--wo-border:#d3e1e4;--wo-surface:#fff;
  --wo-canvas:#edf4f5;--wo-brand:#087d84;--wo-brand-dark:#176168;
  --wo-sidebar:#17333a;--wo-sidebar-active:#24545c;--wo-danger:#9b2c20;
  --wo-radius:18px;--wo-shadow:0 14px 38px rgba(20,49,58,.08);
}

/* Shared application frame */
body.app{background:var(--wo-canvas);color:var(--wo-ink);min-width:0}
body.app main.workspace{
  width:calc(100% - 270px);max-width:none;min-width:0;margin:0 0 0 270px;
  padding:clamp(24px,3vw,48px);
}
body.app main.workspace>*{
  width:100%;max-width:1400px;margin-left:auto!important;margin-right:auto!important;
}
.app aside{z-index:20;overflow-y:auto}
.app aside h2{margin:.45rem 0 0;font-size:1.65rem}
.app aside nav{display:grid;gap:3px;margin-top:30px}
.app aside nav a{padding:10px 14px;font-weight:650}
.app aside nav a:hover,.app aside nav a:focus-visible{background:rgba(255,255,255,.08);outline:none}
.app aside nav a.active{background:var(--wo-sidebar-active);box-shadow:inset 3px 0 #74d7d2}
.identity{padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
.sidebar-head{display:block}
.nav-toggle{display:none;margin:0;min-height:42px;padding:9px 12px;border:1px solid rgba(255,255,255,.28);background:transparent;box-shadow:none}
.nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-toggle-icon,.nav-toggle-icon:before,.nav-toggle-icon:after{display:block;width:21px;height:2px;background:#fff;border-radius:2px;content:""}
.nav-toggle-icon{position:relative}.nav-toggle-icon:before{position:absolute;top:-6px}.nav-toggle-icon:after{position:absolute;top:6px}
.nav-toggle-label{color:#fff;font-size:.85rem;letter-spacing:0}

/* Consistent headings and page actions */
.workspace>header{margin:0 0 26px}
.workspace>.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.workspace>header>div{min-width:0}
.workspace header h1{margin:.45rem 0 .55rem;font-size:clamp(2.15rem,4vw,3.4rem);line-height:1.02}
.workspace header p{max-width:850px;margin:.35rem 0 0;font-size:1.05rem;line-height:1.5}
.head-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}

/* Surfaces */
.workspace .card{
  width:100%;max-width:none;margin:0 0 24px;padding:clamp(22px,2.6vw,38px);
  border-color:var(--wo-border);border-radius:var(--wo-radius);box-shadow:var(--wo-shadow);
}
.workspace .card+.card,.workspace .form-card+.form-card{margin-top:0}
.workspace .card h2:first-child{margin-top:0}
.notice,.error{margin:0 0 22px;padding:15px 18px;border-radius:12px}

/* Buttons and links */
button,.primary,.app a.primary{
  min-height:46px;padding:12px 20px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wo-brand);color:#fff;text-decoration:none;font-weight:800;
  box-shadow:0 5px 14px rgba(8,125,132,.16);
}
button:hover,.primary:hover{background:#076e75}
button:focus-visible,.primary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(8,125,132,.25);outline-offset:2px;
}
.secondary{background:#e3f1f2;color:var(--wo-brand-dark);box-shadow:none}
.danger-link{min-height:auto;background:transparent;color:var(--wo-danger);box-shadow:none}
.form-actions,.completion-actions,.quick-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-actions a{margin-top:22px}

/* Forms */
form{max-width:100%}
label{color:#29414a}
input,select,textarea{
  min-height:48px;border:1px solid #b9cdd1;border-radius:10px;background:#fff;color:var(--wo-ink);
}
textarea{min-height:112px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#86aab0}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.search{display:flex;align-items:flex-end;gap:12px;padding:0;margin:0 0 24px}
.search label{min-width:220px}
.billing-grid{grid-template-columns:minmax(150px,.8fr) minmax(240px,2fr) minmax(100px,.6fr) minmax(120px,.8fr) auto;gap:14px}
.check-label{min-height:48px}

/* Tables and dense records */
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--wo-border);border-radius:13px}
.table-wrap table{min-width:720px;background:#fff}
th{padding:14px 16px;background:#f4f8f9;color:#506870;white-space:nowrap}
td{padding:15px 16px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fbfdfd}
.status,.priority{white-space:nowrap}
.summary-grid{gap:16px}
.summary-grid article{background:#fbfdfd}

/* Feature layouts */
.plan-grid{grid-template-columns:repeat(3,minmax(240px,1fr));gap:20px;margin:0 0 24px}
.plan-grid .card{display:flex;flex-direction:column;margin:0}
.plan-grid .card form{margin-top:auto}
.plan-grid .card button{width:100%}
.timer-entry dl{grid-template-columns:repeat(5,minmax(110px,1fr))}
.selected-customer{align-items:center}
.component-card{background:#fbfdfd}
.completion{margin-inline:auto!important}
.totals{flex-wrap:wrap}
.balance{border:1px solid #d7e9eb}
.dashboard-workspace>*{max-width:1000px!important}
.dashboard-workspace>.card{padding:38px}
.dashboard-workspace .quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:650px}
.dashboard-workspace .quick-actions>a{min-width:0}
.filter-tabs{display:flex!important;flex-wrap:wrap;gap:8px;margin:0 0 22px!important}
.app .filter-tabs a{width:auto;flex:0 0 auto}

/* Authentication and signup */
body:not(.app):not(.clock-page){background:var(--wo-canvas)}
.auth,.signup-card{border-radius:22px;box-shadow:var(--wo-shadow)}
.auth h1,.signup-card h1{font-size:clamp(2.6rem,7vw,4.3rem)}
.auth button,.signup-card button{width:100%}

/* Tablet and PWA navigation */
@media(max-width:980px){
  body.app{display:block}
  .app aside{position:relative;inset:auto;width:100%;min-height:auto;padding:20px 22px;overflow:visible}
  .sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
  .app aside h2{margin-bottom:0}
  .nav-toggle{display:inline-flex}
  .app aside.nav-ready nav{display:none}
  .app aside.nav-ready.nav-open nav{display:grid}
  .app aside nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:16px 0 0}
  .app aside nav a{text-align:center;padding:10px 8px}
  .identity{position:static;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 18px;margin-top:16px;padding-top:14px}
  .identity small{margin:0}
  .identity form{margin:0}.identity .link{margin:0}
  body.app main.workspace{width:100%;max-width:none;margin-left:0;padding:28px 22px 42px}
  .plan-grid{grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}
}

@media(max-width:700px){
  .app aside nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace>.page-head{display:block;margin-bottom:20px}
  .head-actions{justify-content:flex-start;margin-top:16px}
  .head-actions>*{flex:1 1 auto}
  .workspace header h1{font-size:2.35rem}
  .workspace .card{padding:20px 17px;border-radius:15px}
  .form-grid{display:block}
  .search{display:grid;grid-template-columns:1fr;align-items:stretch}
  .search label{min-width:0}.search button,.search>a{width:100%;margin:0;text-align:center}
  .billing-grid,.timer-form,.timer-stop-form{display:grid;grid-template-columns:1fr}
  .billing-grid button,.timer-form button,.timer-stop-form button{width:100%;margin-top:0}
  .form-actions,.completion-actions,.quick-actions{align-items:stretch;flex-direction:column}
  .form-actions>*,.completion-actions>*,.quick-actions>*{width:100%;min-width:0!important;text-align:center}
  .selected-customer{display:block}.selected-customer a{margin-top:12px}
  .timer-entry dl{grid-template-columns:1fr 1fr}
  .totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .identity{align-items:center}.identity small{max-width:none}
  .dashboard-workspace .quick-actions{grid-template-columns:1fr}
}

@media(max-width:430px){
  .app aside{padding:18px 16px}.app aside nav{grid-template-columns:1fr 1fr}
  .app aside nav a{font-size:.92rem}
  body.app main.workspace{padding:22px 14px 34px}
  .workspace header h1{font-size:2.05rem}
  .plan-grid{grid-template-columns:1fr}
  .timer-entry dl,.totals{grid-template-columns:1fr 1fr}
  .identity{grid-template-columns:1fr auto}.identity small{grid-column:1/-1}.identity form{grid-column:2;grid-row:1;margin:0}
}