:root{
  --bg:#07080a;--bg2:#0d1015;--panel:#12151a;--panel2:#171b22;--line:#2a3039;
  --text:#f7f7f5;--muted:#9da5b1;--gold:#c8a45b;--red:#e5484d;--blue:#4b8df8;--green:#2dbf73;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.glass{background:rgba(18,21,26,.96);border:1px solid var(--line);box-shadow:0 18px 48px rgba(0,0,0,.2);backdrop-filter:blur(14px)}
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:min(440px,100%);padding:24px;border-radius:20px}
.brand{font-weight:900;letter-spacing:.08em}.brand span{color:var(--gold)}
h1,h2,h3{margin:0 0 10px}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11px}.warning{color:#d6bf84;line-height:1.5}
.field{display:grid;gap:5px;margin-bottom:10px}.field label{font-size:11px;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;background:#0c0f13;border:1px solid var(--line);color:#fff;border-radius:10px;padding:10px 11px;outline:none}
.field textarea{min-height:78px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#555f6d}
.btn{border:1px solid var(--line);background:#171b21;color:#fff;border-radius:10px;padding:10px 13px}.btn:hover{background:#20252d}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#101113;font-weight:800}.btn.danger{border-color:#623036;color:#ffb7bb}.btn.subtle{background:#0d1014}.full{width:100%}
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:20px;background:#090b0f;position:sticky;top:0;height:100vh}
.nav{display:grid;gap:8px;margin-top:26px}.nav-btn{border:1px solid transparent;background:transparent;color:#d8dde4;border-radius:10px;padding:11px;text-align:left}
.nav-btn:hover,.nav-btn.active{background:#15191f;border-color:var(--line)}.sidebar-bottom{position:absolute;left:20px;right:20px;bottom:20px;display:grid;gap:8px}
.main{padding:20px;min-width:0}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.topbar h1{font-size:25px}.topbar p{margin:3px 0 0}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}.patient-strip{border-radius:16px;padding:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.patient-strip .field{margin:0}
.panel{padding:16px;border-radius:16px}.panel-head,.capture-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-end}.search-field{width:min(320px,100%)}
.patient-list{display:grid;gap:9px}.patient-item{border:1px solid var(--line);background:#0d1014;border-radius:12px;padding:12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.patient-actions{display:flex;gap:7px;flex-wrap:wrap}.phase-tabs,.compare-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.phase-btn,.compare-tab{border:1px solid var(--line);background:#0e1115;color:#ddd;border-radius:9px;padding:9px 12px}.phase-btn.active,.compare-tab.active{background:#272d36}
.capture-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}.view-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}
.view-card{border:1px solid var(--line);background:#0c0f13;border-radius:12px;padding:9px;cursor:pointer}.view-card.active{outline:2px solid var(--gold)}.view-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;background:#111}
.view-card .placeholder{width:100%;aspect-ratio:3/4;border-radius:9px;background:linear-gradient(180deg,#15191e,#0b0d10);display:flex;align-items:center;justify-content:center;color:#68717c;font-size:12px;text-align:center;padding:8px}
.view-card strong{display:block;font-size:12px;margin-top:7px}.view-card span{display:block;font-size:10px;color:var(--muted);margin-top:2px}.capture-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.guide-box{margin-top:12px;padding:12px;border:1px solid var(--line);background:#0d1014;border-radius:11px;display:grid;gap:4px}.guide-box span{font-size:12px;color:var(--muted)}
.check-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #20252d}.ok{color:#7be0a5}.missing{color:#d89f65}.divider{height:1px;background:var(--line);margin:14px 0}
.planner-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 310px;gap:14px}.treatment-tools,.marker-editor{align-self:start}.treatment-btn{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#0d1014;color:#fff;border-radius:10px;padding:10px;margin-bottom:7px}
.treatment-btn.active{outline:2px solid var(--gold)}.swatch{width:12px;height:12px;border-radius:50%}.botox{background:var(--red)}.filler{background:var(--blue)}.booster{background:var(--green)}
.viewport-card{border-radius:16px;padding:10px;min-width:0}.three-container{height:70vh;min-height:540px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#19202a,#07090c);position:relative}
.three-container canvas{display:block;width:100%;height:100%;touch-action:none}.three-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:5px;pointer-events:none;text-align:center}
.three-empty strong{color:#eee}.viewport-hint{text-align:center;font-size:11px;color:var(--muted);padding-top:8px}.marker-list{display:grid;gap:7px;max-height:260px;overflow:auto}.marker-item{border:1px solid var(--line);background:#0c0f13;border-radius:10px;padding:9px;cursor:pointer}.marker-item.active{outline:1px solid var(--gold)}
.marker-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.badge{font-size:10px;padding:3px 7px;border-radius:999px;background:#222831}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-box{min-height:460px;background:#090b0e;border:1px dashed #343a43;border-radius:13px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.compare-box img{width:100%;height:100%;max-height:620px;object-fit:contain}.modal{position:fixed;inset:0;background:rgba(0,0,0,.84);z-index:50;display:flex;align-items:center;justify-content:center;padding:14px}.camera-card{width:min(980px,100%);padding:14px;border-radius:17px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px}
.camera-card video{width:100%;max-height:75vh;background:#000;border-radius:12px}.camera-panel{display:grid;gap:9px;align-content:start}
#toast{position:fixed;right:16px;bottom:16px;z-index:100;background:#171c22;color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 13px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;max-width:360px}
#toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1150px){.planner-layout{grid-template-columns:180px minmax(0,1fr)}.marker-editor{grid-column:1/-1}.capture-grid{grid-template-columns:1fr}.view-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}.nav{grid-template-columns:repeat(4,1fr)}.sidebar-bottom{position:static;margin-top:14px}.patient-strip{grid-template-columns:repeat(2,1fr)}.planner-layout{grid-template-columns:1fr}.treatment-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.treatment-tools h3,.treatment-tools .divider,.treatment-tools p{grid-column:1/-1}.three-container{height:60vh;min-height:430px}.camera-card{grid-template-columns:1fr}}
@media(max-width:600px){.main,.sidebar{padding:12px}.topbar{flex-direction:column;align-items:flex-start}.nav{grid-template-columns:repeat(2,1fr)}.patient-strip{grid-template-columns:1fr}.view-cards{grid-template-columns:repeat(2,1fr)}.compare-grid{grid-template-columns:1fr}.treatment-tools{grid-template-columns:1fr}.three-container{height:56vh;min-height:390px}}