/* ===== Variant E: refined A. Hairlines, one accent, crisp type, quiet controls ===== */
:root{
  --bg:#f7f7f5; --paper:#ffffff; --fg:#111312; --muted:#6e7370; --faint:#9aa09c; --line:#e8e9e6; --line2:#d9dbd7;
  --accent:#1f6b52; --accent-soft:#eef6f1; --tech2:#3b5bdb; --warn:#c2570c; --lock:#f4f4f2;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --r:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0f0f; --paper:#161817; --fg:#ecedeb; --muted:#9a9f9c; --faint:#6c716e; --line:#262928; --line2:#333735;
  --accent:#5cc79d; --accent-soft:#16251f; --tech2:#8ea2f0; --warn:#f0965a; --lock:#1c1f1e; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e0f0f; --paper:#161817; --fg:#ecedeb; --muted:#9a9f9c; --faint:#6c716e; --line:#262928; --line2:#333735;
  --accent:#5cc79d; --accent-soft:#16251f; --tech2:#8ea2f0; --warn:#f0965a; --lock:#1c1f1e; color-scheme:dark}
body{font-size:15px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;padding-block:24px 56px}
.wrap{gap:20px;max-width:620px}
.demo{border-radius:var(--r);border-style:solid;background:transparent;font-size:12px}
h1{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:2px 0 4px}
.sub{font-size:13px}
.back{font-size:13px;color:var(--muted);margin-bottom:10px}
.back:hover{color:var(--fg)}
.visit{border-radius:var(--r);border-color:var(--line);padding:16px 18px;gap:10px}
#app,#visits{display:flex;flex-direction:column;gap:12px}
#visits>.visit{padding:0;gap:0}
#visits>.visit>.vtop{padding:16px 16px 14px;border-bottom:1px solid var(--line)}
#visits>.visit>*:not(.vtop){margin-inline:16px}
#visits>.visit>ul.items:last-of-type{margin-bottom:8px}
#visits>.visit>.gallery{margin-top:12px}
#dayrep{margin-top:8px}
#dayrep input[type=time]{font-size:14px;padding:6px 4px}
.car{margin:4px 0}
.vhead{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.vaddr{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}
.zone{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--faint);margin:16px 0 2px;display:flex;align-items:center;gap:10px}
.zone::after{content:"";flex:1;height:1px;background:var(--line)}
li.item{padding:10px 0;border-top-color:var(--line)}
li.item.done{border-radius:4px;margin-inline:-8px;padding-inline:8px;border-top-color:transparent}
li.item.done+li.item{border-top-color:transparent}
.row{gap:12px;align-items:center}
.row label{line-height:1.4}
.row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--line2);border-radius:4px;background:var(--paper);display:grid;place-content:center;cursor:pointer;transition:background .12s,border-color .12s}
.row input[type=checkbox]:hover{border-color:var(--accent)}
.row input[type=checkbox]::before{content:"";width:10px;height:10px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:#fff;transform:scale(0);transition:transform .12s}
.row input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.row input[type=checkbox]:checked::before{transform:scale(1)}
.row input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cbtn{border:0;background:transparent;color:var(--faint);border-radius:4px;height:28px;min-width:0;padding:0 6px;font:500 12px var(--mono)}
.cbtn:hover{background:var(--lock);color:var(--fg)}
.cbtn.has{color:var(--accent);background:transparent;border:0}
.cbtn svg{width:15px;height:15px}
.panel{margin:10px 0 2px 30px;gap:6px}
.c{border-radius:var(--r);background:transparent;border:1px solid var(--line);padding:8px 12px}
.c.mine{background:var(--accent-soft);border-color:transparent}
.cmeta{font-size:11.5px}
.lock{border:0;padding:0;color:var(--faint)}
textarea,input[type=text],input[type=email],input[type=time],input[type=number],select{border-radius:4px!important;border-color:var(--line2)!important}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)}
.btn{border-radius:4px;padding:6px 14px;font-weight:500;font-size:13px}
.btn.ghost{border-color:var(--line2);color:var(--fg)}
.btn.ghost:hover{background:var(--lock)}
.pbtn{border-radius:4px;border-color:var(--line);color:var(--muted)}
.pbtn:hover{color:var(--fg);border-color:var(--line2);background:var(--lock)}
.pbtn.ib{width:30px;height:30px}
.pbtn.ib svg{width:16px;height:16px}
.pbtn.has{background:transparent;color:var(--accent);border-color:var(--line)}
.cnt{top:-5px;right:-5px;min-width:16px;height:16px;border-radius:8px;font:600 10px/16px var(--sans);box-shadow:0 0 0 2px var(--paper)}
.gallery{border-style:solid;border-radius:var(--r);background:var(--lock);border-color:transparent;padding:12px}
.addph{border-radius:4px}
.thumbs img{border-radius:4px}
.newtag{font:500 10.5px var(--mono);border-radius:3px;border:0;background:color-mix(in srgb,var(--warn) 12%,transparent);padding:1px 5px;vertical-align:1px}
.link{font-weight:500}
.pill{border-radius:3px;font-weight:500;padding:1px 6px}
.todo{border-radius:var(--r);border-color:var(--line);border-left:3px solid var(--warn);padding:14px 16px}
.todo.ok{border-left-color:var(--accent)}
.cntb{border-radius:3px}
.robanner{border-radius:var(--r);border-color:var(--line);border-left:3px solid var(--warn);color:var(--fg)}
.seg{border-radius:4px;border-color:var(--line2)}
.seg button{padding:5px 12px}
.seg button.on{background:var(--fg);color:var(--paper)}
.wkwrap{border-radius:var(--r)}
.ev{border-radius:3px;border-left:3px solid rgba(0,0,0,.18)}
.bar{height:4px;border-radius:2px;width:56px}
.chip{border-radius:3px;background:transparent;border-color:var(--line2)}
.chips select{border-radius:3px}
.mile{border-style:solid;border-radius:var(--r);background:var(--lock);border-color:transparent}
.note{color:var(--faint)}
.vrow,.feed li,.todo li{border-top-color:var(--line)}

/* E finish: white warning panel with an orange edge, done rows in the E green */
.todo,:root[data-theme="dark"] .todo{background:var(--paper);color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .todo{background:var(--paper);color:var(--fg)}}
li.item.done{background:var(--accent-soft)}
.t-vitaliy{background:var(--accent)}
li.item.done .row{background:none}
:root{--ok:var(--accent);--ok-soft:var(--accent-soft)}