:root{
  --ink:#141a24; --panel:#1b2330; --line:#2a3547;
  --text:#e8e4da; --dim:#8b94a3;
  --amber:#e8a13d; --clay:#c96f5d; --pin:#f2ede2;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; margin:0}
[hidden]{display:none !important}
html{background:var(--ink)}
body{background:var(--ink); color:var(--text); font:15px/1.5 "Avenir Next","Seravek",system-ui,sans-serif; min-height:100vh}
a{color:var(--amber)}
button, input, select{font:inherit}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.num{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-variant-numeric:tabular-nums}
.empty{color:var(--dim); padding:40px 0; text-align:center}
.hint{color:var(--dim); font-size:13px; margin:-4px 0 12px; max-width:64ch}
.lead{color:var(--dim); font-size:13px; margin:-4px 0 12px; max-width:60ch}
h1{font-size:17px; font-weight:600}
h1 small{color:var(--dim); font-weight:400; margin-left:10px}
h2{font-size:13px; font-weight:600; color:var(--dim); margin:28px 0 10px; text-transform:lowercase; letter-spacing:.04em}
h2 .linkish{margin-left:12px}
.linkish{background:none; border:0; color:var(--amber); font-size:12px; cursor:pointer; padding:0; border-bottom:1px solid transparent; text-transform:none; letter-spacing:0}
.linkish:hover{border-bottom-color:var(--amber)}

/* header / nav */
#top{display:flex; align-items:center; gap:22px; padding:calc(14px + var(--sat)) 32px 0}
.brand{font-weight:600; text-decoration:none; color:var(--text); font-size:17px}
#nav{display:flex; gap:18px; margin-left:auto}
#nav a{color:var(--amber); text-decoration:none; font-size:13px; border-bottom:1px solid transparent}
#nav a:hover{border-bottom-color:var(--amber)}
#nav a.on{color:var(--text); border-bottom-color:var(--text)}
#signout{font-size:12px}
#view{padding:20px 32px 60px; max-width:1100px}
#tabs{display:none}

/* login */
.login{max-width:360px; margin:60px auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px}
.login h1{margin-bottom:6px} .login p{color:var(--dim); font-size:13.5px; margin-bottom:16px}
.login label{display:block; color:var(--dim); font-size:12.5px; margin:10px 0 4px}
.login input{width:100%; background:var(--ink); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:9px 11px; font-size:15px}
.login button{margin-top:16px; width:100%; background:var(--amber); color:var(--ink); border:0; border-radius:6px; padding:10px; font-weight:600; cursor:pointer}
.login .err{color:var(--clay); font-size:13px; margin-top:10px; min-height:1.2em}

/* cards & panels */
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:15px 18px; margin-bottom:10px; display:flex; gap:15px; align-items:flex-start}
.bar{width:3px; border-radius:2px; align-self:stretch; background:var(--amber); flex:none}
.bar.soft{background:var(--line)} .bar.warn{background:var(--clay)}
.headline{font-weight:600; font-size:15px}
.detail{color:var(--dim); font-size:13.5px; margin-top:4px}
.gap .headline{color:var(--clay)}
.tag{color:var(--ink); background:var(--dim); font-size:10.5px; font-weight:600; border-radius:4px; padding:1px 6px; margin-left:9px; vertical-align:1px; text-transform:lowercase; letter-spacing:.03em}
.note{color:var(--dim); font-size:12.5px; margin-top:26px; padding-top:14px; border-top:1px solid var(--line); line-height:1.65}
.scroll{overflow-x:auto; flex:1}
table.panel{border-collapse:collapse; font-size:13.5px; width:100%}
table.panel th{color:var(--dim); font-weight:500; text-align:right; padding:4px 10px 8px; font-size:11.5px; text-transform:lowercase; letter-spacing:.03em; white-space:nowrap}
table.panel th:first-child{text-align:left}
table.panel td{padding:5px 10px; border-top:1px solid var(--line); text-align:right; white-space:nowrap}
table.panel td:first-child{text-align:left; color:var(--dim)}
table.panel td.num{font-family:ui-monospace,"SF Mono",Menlo,monospace}
table.panel tr td:nth-child(2){color:var(--amber); font-weight:600}

/* controls */
.ctl{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:6px}
select{background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:6px 10px; font-size:14px; max-width:100%}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; flex-wrap:wrap}
.seg button{background:none; border:0; color:var(--dim); padding:6px 12px; font-size:13.5px; cursor:pointer}
.seg button.on{background:var(--panel); color:var(--text)}
.seg button+button{border-left:1px solid var(--line)}
.modes{margin-top:18px} .modes button{padding:7px 14px}
.subhint{color:var(--dim); font-size:12.5px; flex-basis:100%}
.custom{color:var(--dim); font-size:13px; display:flex; gap:6px; align-items:center}
.custom input, input[type=date], input[type=time]{background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:4px 8px; font-size:13px; color-scheme:dark}
.btn{background:none; border:1px solid var(--line); color:var(--text); border-radius:6px; padding:5px 12px; font-size:13px; cursor:pointer}
.btn.primary{border-color:var(--amber); color:var(--amber)}
.btn.danger{color:var(--clay)}
.btn:hover:not(:disabled){border-color:var(--dim)} .btn:disabled{opacity:.4; cursor:default}
.err{color:var(--clay); font-size:12.5px}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:5px 12px 5px 14px; font-size:14px; cursor:pointer; display:inline-flex; gap:8px; align-items:center}
.chip small{color:var(--dim); font-size:12px}
.chip:hover{border-color:var(--dim)}
.chip.with{border-color:var(--amber); color:var(--amber)} .chip.with small{color:var(--amber); opacity:.8}
.chip.without{border-color:var(--clay); color:var(--clay); text-decoration:line-through} .chip.without small{color:var(--clay); text-decoration:none}
.chip.editing{padding-right:6px; cursor:text}
.chip .x{background:none; border:0; color:var(--dim); font-size:15px; line-height:1; padding:2px 6px; margin:-2px -2px -2px 0; border-radius:50%; cursor:pointer}
.chip .x:hover{color:var(--clay); background:var(--ink)}
.chip.removed{border-color:var(--clay); color:var(--clay); text-decoration:line-through; opacity:.7}
.chip.renamed{border-color:var(--amber)} .chip.renamed .arrow{color:var(--dim); margin:0 2px} .chip.renamed .new{color:var(--amber)}
.chip input{background:var(--ink); border:1px solid var(--line); color:var(--text); border-radius:4px; padding:1px 6px; font-size:14px; width:9em}
.legend{color:var(--dim); font-size:12.5px; margin-top:10px}
.legend b{font-weight:500} .legend .w{color:var(--amber)} .legend .wo{color:var(--clay)}
.legend i{display:inline-block; width:18px; height:3px; vertical-align:middle; margin:0 6px 0 14px; border-radius:2px}
#wordbar{display:flex; gap:10px; align-items:center; margin-top:12px; color:var(--dim); font-size:13px; flex-wrap:wrap}

/* result */
#result{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 22px 14px; margin-top:14px}
#verdict{font-size:16px; font-weight:600; line-height:1.4; max-width:70ch} #verdict.real{color:var(--amber)}
#means{display:flex; gap:28px; flex-wrap:wrap; margin-top:10px; color:var(--dim); font-size:13px}
#means b{display:block; color:var(--text); font-size:20px; font-weight:600} #means .these b{color:var(--amber)}
#xchart{display:block; width:100%; height:auto; margin-top:14px}
.chartnote{color:var(--dim); font-size:12px; margin-top:4px}
.axis{stroke:var(--line)} .axistext{fill:var(--dim); font-size:11px; font-family:ui-monospace,Menlo,monospace}
.axislabel{fill:var(--dim); font-size:12px}
.other{fill:var(--dim); opacity:.45} .these{fill:var(--amber)} .meanline{stroke-dasharray:4 4; stroke-width:1}
.dot2{fill:var(--amber); opacity:.55} .fit{stroke:var(--dim); stroke-dasharray:4 4; stroke-width:1}
table.days{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px}
table.days th{color:var(--dim); font-weight:500; text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); font-size:11.5px; text-transform:lowercase; letter-spacing:.03em}
table.days td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top}
table.days td.logged{color:var(--dim)} table.days td.val, table.days th.val{text-align:right}
table.days td a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line)}
table.days td a:hover{border-bottom-color:var(--amber); color:var(--amber)}
table.days td.none{color:var(--dim); font-style:italic}

/* day view */
#strip{margin-top:14px} #strip svg{display:block; width:100%; height:88px}
.stripbar{cursor:pointer} .stripbar:hover rect{fill:var(--pin)}
.striplabel{fill:var(--dim); font-size:10px; font-family:ui-monospace,Menlo,monospace}
#panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-top:20px; padding:20px 22px 14px}
#daynav{display:flex; align-items:baseline; gap:14px}
#daynav button{background:none; border:1px solid var(--line); color:var(--text); border-radius:6px; padding:3px 12px; font-size:14px; cursor:pointer}
#daynav button:hover{border-color:var(--dim)} #daynav button:disabled{opacity:.35}
#dtitle{font-size:16px; font-weight:600}
#stats{display:flex; gap:26px; flex-wrap:wrap; margin:14px 0 4px; color:var(--dim); font-size:13px}
#stats b{color:var(--text); font-weight:600; font-size:15px; display:block}
.ratings{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:6px 0 4px; font-size:13px; color:var(--dim)}
.ratings .rl{margin-right:8px} .ratings .rk{margin-left:10px; margin-right:2px} .ratings .rh{margin-left:12px; font-size:11.5px}
.ratings .dot{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--dim); font-size:12px; cursor:pointer}
.ratings .dot:hover{border-color:var(--dim); color:var(--text)}
.ratings .dot.on{background:var(--amber); border-color:var(--amber); color:var(--ink); font-weight:600}
#chart{display:block; width:100%; height:340px; margin-top:6px}
.bbline{stroke:var(--amber); stroke-width:2; fill:none} .bbfill{fill:var(--amber); opacity:.10}
.stline{stroke:var(--clay); stroke-width:1.3; fill:none; opacity:.75}
.band{fill:var(--pin); opacity:.045} .band.range{opacity:.07}
.bandedge{stroke:var(--pin); stroke-width:1; opacity:.35; stroke-dasharray:4 4}
.bandtext{fill:var(--pin); font-size:12px; opacity:.85}
.pin{stroke:var(--pin); stroke-width:1; stroke-dasharray:2 3} .pinhead{fill:var(--pin)} .pintext{fill:var(--pin); font-size:12px}
.evmark{cursor:context-menu} .evmark .hit{fill:transparent}
.evmark:hover .pintext, .evmark:hover .bandtext{fill:var(--amber)}
.evmark:hover .pin, .evmark:hover .bandedge{stroke:var(--amber); opacity:.9}
#evlist{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
#evlist>div, .evlist>div{color:var(--dim); font-size:13px; padding:2px 0}
.ev{display:flex; align-items:center; gap:0} .ev span{color:var(--text)}
.ev .edit{margin-left:auto; background:none; border:0; color:var(--dim); font-size:12px; cursor:pointer; padding:2px 6px; border-radius:4px}
.ev .edit:hover{color:var(--amber)}
@media (hover:hover){ .ev .edit{opacity:0} .ev:hover .edit, .ev .edit:focus-visible{opacity:1} }
.evedit{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 0}
.evedit input[type=text]{flex:1 1 220px; background:var(--ink); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:7px 9px; font-size:15px}
.evedit input[type=time]{background:var(--ink)} .evedit input[type=time]:disabled{opacity:.35}
.evedit .to{color:var(--dim); font-size:12.5px}
.evedit label{color:var(--dim); font-size:13px; display:flex; gap:5px; align-items:center}
.evedit .del{margin-left:auto}
.evedit .err{flex-basis:100%; min-height:0}
#ctx{position:absolute; z-index:5; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px; min-width:160px; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); display:flex; flex-direction:column}
#ctx .what{color:var(--dim); font-size:12px; padding:4px 10px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ctx button{background:none; border:0; color:var(--text); text-align:left; padding:6px 10px; border-radius:5px; font-size:14px; cursor:pointer}
#ctx button:hover, #ctx button:focus-visible{background:var(--ink); outline:none} #ctx .ctx-remove{color:var(--clay)}

/* log view */
.logbox{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px}
.logbox form{display:flex; gap:8px}
.logbox input[type=text]{flex:1; background:var(--ink); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:11px 12px; font-size:16px}
.logbox button.go{background:var(--amber); color:var(--ink); border:0; border-radius:8px; padding:0 18px; font-weight:600; cursor:pointer}
.logbox button.go:disabled{opacity:.4}
.readas{color:var(--dim); font-size:12.5px; margin-top:8px; min-height:1.2em}
.readas b{color:var(--text); font-weight:500}
.quick{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.quick .chip{padding:4px 11px; font-size:13px}
.last{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-top:14px}
.lh{color:var(--dim); font-size:12.5px; text-transform:lowercase; letter-spacing:.04em} .lh b{color:var(--text); font-weight:600; text-transform:none; letter-spacing:0}
.stats{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:8px}
.stats div{font-size:11.5px; color:var(--dim)} .stats span{display:block; font-size:20px; font-weight:600; color:var(--text); line-height:1.15}
#toast{position:fixed; left:50%; bottom:calc(24px + var(--sab)); transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); color:var(--text); padding:9px 16px; border-radius:8px; font-size:13.5px; z-index:9; max-width:90vw}
#toast.bad{border-color:var(--clay); color:var(--clay)}

/* phone */
@media (max-width:720px){
  #top{padding:calc(12px + var(--sat)) 16px 0} #nav{display:none}
  #view{padding:14px 16px calc(90px + var(--sab))}
  #tabs{display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--line); padding:6px 0 calc(6px + var(--sab)); z-index:8}
  #tabs a{flex:1; text-align:center; color:var(--dim); text-decoration:none; font-size:11px; display:flex; flex-direction:column; gap:2px; align-items:center}
  #tabs a .ico{font-size:17px; line-height:1.1} #tabs a.on{color:var(--amber)}
  #panel{padding:14px 14px 10px} #chart{height:260px}
  #stats{gap:14px 18px}
  .ev .edit{opacity:1}
  #result{padding:14px}
  .evedit .del{margin-left:0}
}