:root{
  --bg:#121214;
  --surface:#1B1B1F;
  --surface2:#232328;
  --surface3:#2A2A31;
  --border:#2E2E34;
  --text:#F1F0EC;
  --text-dim:#8C8B92;
  --text-faint:#5C5B62;
  --accent:#FF5A36;
  --accent-dim:#7A2D1B;
  --accent-soft:rgba(255,90,54,0.14);
  --good:#7CD992;
  --fail:#FF4368;
  --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:88px;
}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Bebas Neue',sans-serif; letter-spacing:0.03em;}

/* subtle plate-texture backdrop on header */
header.top{
  padding:22px 18px 16px;
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, var(--bg) 60%, rgba(18,18,20,0.85));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.plate-mark{
  width:30px; height:30px; border-radius:50%;
  border:5px solid var(--accent);
  position:relative; flex-shrink:0;
}
.plate-mark::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  top:0;bottom:0;left:0;right:0;
}
.brand h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:30px; letter-spacing:0.06em; margin:0; line-height:1;
}
.brand small{display:block; color:var(--text-dim); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;}

main{padding:16px; max-width:560px; margin:0 auto;}
.hidden{display:none !important;}

/* Tabs bottom nav */
nav.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:var(--surface);
  border-top:1px solid var(--border);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
nav.tabbar button{
  flex:1; background:none; border:none; color:var(--text-faint);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
}
nav.tabbar button svg{width:22px; height:22px; stroke:var(--text-faint); fill:none; stroke-width:2;}
nav.tabbar button.active{color:var(--accent);}
nav.tabbar button.active svg{stroke:var(--accent);}

/* session card */
.session-head{
  display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px;
}
.session-head h2{font-family:'Bebas Neue',sans-serif; font-size:34px; margin:0; letter-spacing:0.02em;}
.session-head .sub{color:var(--text-dim); font-size:13px; margin-top:2px;}
.loc-btn{
  background:var(--surface2); border:1px solid var(--border); color:var(--text);
  font-family:'Inter'; font-size:14.5px; padding:10px 14px; border-radius:10px; cursor:pointer;
  transition:all 0.15s; font-weight:500;
  display:flex; align-items:center; gap:6px;
}
.loc-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;}
.loc-btn:active{background:var(--border);}
.loc-btn.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
.manage-loc-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px; border-bottom:1px solid var(--border);
}
.manage-loc-item:last-child{border-bottom:none;}
.manage-loc-item .name{font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px;}
.manage-loc-item .name svg{width:18px; height:18px; stroke:var(--text-faint); fill:none; stroke-width:2;}
.manage-loc-item .name.hidden-text{text-decoration:line-through; color:var(--text-faint);}

.icon-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(60px, 1fr)); gap:12px;
}
.icon-grid button{
  background:var(--surface2); border:1px solid var(--border); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px 0; cursor:pointer; color:var(--text); transition:all 0.15s;
}
.icon-grid button svg{width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.5;}
.icon-grid button:active{background:var(--border);}

.row-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 14px; margin-bottom:10px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
}
.row-card .ex-name{font-weight:700; font-size:14.5px; margin-bottom:3px;}
.row-card .ex-detail{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-dim); line-height:1.5;}
.row-card .ex-detail .fail{color:var(--fail); font-weight:700;}
.row-actions{display:flex; gap:6px; flex-shrink:0;}
.icon-btn{
  background:var(--surface2); border:1px solid var(--border); color:var(--text-dim);
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;}
.icon-btn.danger:active{background:var(--fail); color:#fff; border-color:var(--fail);}

.empty-state{
  text-align:center; padding:50px 20px; color:var(--text-faint);
}
.empty-state .plate-mark{margin:0 auto 14px; width:44px; height:44px; border-width:7px; opacity:0.5;}
.empty-state p{font-size:14px; line-height:1.6; max-width:280px; margin:0 auto;}

.fab{
  position:fixed; right:20px; bottom:96px; z-index:25;
  width:58px; height:58px; border-radius:50%; background:var(--accent); border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(255,90,54,0.35);
  cursor:pointer;
}
.fab svg{width:26px; height:26px; stroke:#fff; stroke-width:2.4; fill:none;}

/* History */
.hist-session{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:12px; overflow:hidden;
}
.hist-session-head{
  padding:14px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.hist-session-head .d{font-weight:700; font-size:15px;}
.hist-session-head .l{color:var(--text-dim); font-size:13.5px; margin-top:2px;}
.hist-session-head .count{font-weight:600; font-size:15px; color:var(--text);}
.hist-session-head .chev{width:16px; height:16px; stroke:var(--text-faint); fill:none; stroke-width:2;}
.hist-session-body{display:none; padding:0 14px 14px; border-top:1px solid var(--border);}
.hist-session-body.open{display:block;}

.month-header{
  font-family:'Bebas Neue', sans-serif; font-size:26px; letter-spacing:0.04em; color:var(--text);
  margin:24px 0 14px; border-bottom:1px solid var(--border); padding-bottom:6px;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.month-body{display:none;}
.month-body.open{display:block;}
.chev{transition:transform 0.2s; stroke:var(--text-faint); width:16px; height:16px; fill:none; stroke-width:2;}
.chev.open{transform:rotate(180deg);}
.session-actions-mini{display:flex; gap:8px; margin-top:6px;}
.text-link{color:var(--text-dim); font-size:12px; background:none; border:none; text-decoration:underline; cursor:pointer; padding:4px 0;}

.search-bar{
  background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 14px;
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.search-bar svg{width:16px; height:16px; stroke:var(--text-faint); fill:none; stroke-width:2; flex-shrink:0;}
.search-bar input{background:none; border:none; color:var(--text); font-family:'Inter'; font-size:14px; width:100%;}
.search-bar input:focus{outline:none;}

.ex-list-item{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 15px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; cursor:pointer;
}
.ex-list-item .name{font-weight:700; font-size:14.5px;}
.ex-list-item .meta{color:var(--text-faint); font-size:12px; margin-top:3px;}
.ex-list-item .arrow{stroke:var(--text-faint); width:16px; height:16px; fill:none; stroke-width:2; flex-shrink:0;}

.section-label{
  font-family:'Bebas Neue',sans-serif; letter-spacing:0.06em; color:var(--text-dim); font-size:15px;
  margin:22px 0 10px; text-transform:uppercase;
}

/* Bottom Sheet */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:40; opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.sheet-backdrop.open{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; background:var(--surface);
  border-radius:22px 22px 0 0; border:1px solid var(--border); border-bottom:none;
  max-height:88vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.25s cubic-bezier(.2,.9,.3,1);
  padding:10px 18px calc(24px + env(safe-area-inset-bottom));
  max-width:600px; margin:0 auto;
}
.sheet.open{transform:translateY(0);}
.sheet-handle{width:38px; height:4px; background:var(--border); border-radius:4px; margin:6px auto 14px;}
.sheet h3{font-family:'Bebas Neue'; font-size:24px; letter-spacing:0.04em; margin:0 0 16px;}
.field-label{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); font-weight:600; margin-bottom:7px; display:block;}
.field{margin-bottom:16px; position:relative;}
input[type=text], input[type=number], textarea{
  background:var(--surface2); border:1px solid var(--border); color:var(--text);
  font-family:'Inter'; font-size:15px; padding:12px 13px; border-radius:10px; width:100%;
}
textarea{font-family:'JetBrains Mono'; font-size:13.5px; resize:vertical; min-height:44px;}
input:focus, textarea:focus{outline:none; border-color:var(--accent);}

.ghost-input{
  background:transparent !important; border:none !important; border-bottom:1px dashed var(--border) !important;
  color:var(--text) !important; font-family:'Inter', sans-serif !important; font-size:14.5px !important;
  width:100%; padding:6px 0 !important; border-radius:0 !important; outline:none; transition:all 0.2s;
}
.ghost-input::placeholder{color:var(--text-faint);}
.ghost-input:focus{border-bottom-color:var(--accent) !important; border-bottom-style:solid !important;}

.autocomplete-list{
  position:absolute; top:100%; left:0; right:0; background:var(--surface3); border:1px solid var(--border);
  border-radius:10px; margin-top:4px; max-height:180px; overflow-y:auto; z-index:5; display:none;
}
.autocomplete-list.show{display:block;}
.autocomplete-list div{padding:10px 13px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--border);}
.autocomplete-list div:last-child{border-bottom:none;}
.autocomplete-list div:active{background:var(--accent-soft);}
.autocomplete-list div .freq{color:var(--text-faint); font-size:11px; margin-left:6px;}

.stepper-row{display:flex; align-items:center; gap:10px;}
.stepper-row .stepper-btn{
  width:40px; height:40px; border-radius:50%; background:var(--surface2); border:1px solid var(--border);
  color:var(--text); font-size:19px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; user-select:none;
}
.stepper-row .stepper-btn:active{background:var(--accent); border-color:var(--accent); color:#fff;}
.stepper-row input{text-align:center; flex:1; font-family:'JetBrains Mono'; font-weight:700; font-size:16px;}

.row-2{display:flex; gap:12px;}
.row-2 .field{flex:1;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; background:var(--surface2); border:1px solid var(--border); padding:11px 13px; border-radius:10px; margin-bottom:12px;}
.toggle-row span{font-size:14px; font-weight:500;}
.switch{width:42px; height:24px; border-radius:20px; background:var(--surface3); border:1px solid var(--border); position:relative; cursor:pointer; flex-shrink:0;}
.switch::after{content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--text-dim); top:2px; left:2px; transition:all 0.18s;}
.switch.on{background:var(--accent-soft); border-color:var(--accent);}
.switch.on::after{transform:translateX(18px); background:var(--accent);}

.history-hint{background:var(--surface2); border:1px dashed var(--border); border-radius:10px; padding:11px 13px; margin-bottom:16px;}
.history-hint .hh-title{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:8px;}
.hh-item{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--border);}
.hh-item:first-of-type{border-top:none;}
.hh-item .hh-text{font-size:12.5px; font-family:'JetBrains Mono'; color:var(--text); line-height:1.4;}
.hh-item .hh-date{font-size:10.5px; color:var(--text-faint); margin-bottom:2px; font-family:'Inter';}
.hh-use{
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-dim); font-size:11px; font-weight:700;
  padding:6px 10px; border-radius:7px; cursor:pointer; flex-shrink:0;
}

.btn-primary{
  background:var(--accent); color:#fff; border:none; border-radius:12px; padding:15px; width:100%;
  font-family:'Inter'; font-weight:700; font-size:15px; cursor:pointer; margin-top:6px;
}
.btn-primary:active{opacity:0.85;}
.btn-secondary{
  background:var(--surface2); color:var(--text-dim); border:1px solid var(--border); border-radius:12px; padding:13px;
  width:100%; font-weight:600; font-size:14px; cursor:pointer; margin-top:8px;
}
.btn-mini{
  background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px;
  font-weight:600; font-size:12px; cursor:pointer; font-family:'Inter', sans-serif;
}
.btn-mini:active{background:var(--border);}

#toast{
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); z-index:60;
  background:var(--surface3); color:var(--text); padding:10px 18px; border-radius:30px; font-size:13px;
  border:1px solid var(--border); opacity:0; transition:all 0.25s; pointer-events:none;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

::-webkit-scrollbar{width:0; height:0;}