
:root{--g:#08745f;--bg:#f4f8f6;--line:#dce6e2;--mut:#68736f;--blue:#eaf4ff;--amber:#fff4df}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:16px system-ui;color:#17211e}.app{max-width:580px;margin:auto;padding:22px 18px 100px}.brand{font-size:34px;font-weight:850}.g{color:var(--g)}.tag,small{color:var(--mut)}.card{background:#fff;border-radius:23px;padding:20px;margin:14px 0;box-shadow:0 4px 18px #173d2c0c}h1{font-size:27px;margin:4px 0 12px}h2{font-size:20px}.btn{width:100%;padding:14px;border:0;border-radius:14px;background:var(--g);color:#fff;font-weight:750;font-size:16px;margin-top:9px}.sec{background:#eaf0ed;color:#24312c}.outline{background:#fff;color:var(--g);border:1px solid var(--g)}input,select,textarea{width:100%;padding:12px;border:1px solid #cdd8d3;border-radius:11px;font:inherit;background:#fff}textarea{min-height:76px}.field{margin:11px 0}.field label{display:block;font-size:14px;font-weight:700;margin-bottom:5px}.hidden{display:none}.info,.tip,.warn,.premium{padding:14px;border-radius:14px;margin:12px 0;line-height:1.45}.info{background:var(--blue)}.tip{background:#e9f6f0}.warn{background:var(--amber)}.premium{background:#075f50;color:#fff}.mode,.task,.customer,.asset,.entry{border:1px solid var(--line);border-radius:16px;padding:14px;margin:9px 0}.mode{padding:19px;cursor:pointer}.row{display:flex;justify-content:space-between;gap:10px;align-items:center}.badge{background:#edf3f0;border-radius:999px;padding:5px 8px;font-size:12px}.i{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e7f2ee;color:var(--g);font-size:12px;font-weight:900;cursor:pointer}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.zone{text-align:center;border:1px solid var(--line);border-radius:13px;padding:10px 4px}.tabs{display:flex;gap:7px;overflow:auto}.tab{white-space:nowrap;border:0;border-radius:999px;padding:9px 12px;background:#eaf0ed}.tab.active{background:var(--g);color:#fff}.choice{display:flex;gap:9px;border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0}.choice input{width:20px;height:20px;accent-color:var(--g)}.mini{border:0;border-radius:9px;padding:9px;margin:3px;background:#edf3f0;font-weight:700}.ok{background:var(--g);color:#fff}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pill{display:inline-block;padding:6px 9px;border-radius:999px;background:#edf3f0;font-size:12px;margin:3px 3px 3px 0}.result{border-left:4px solid var(--g);padding-left:12px}.danger{background:#fff0ee}.muted{opacity:.65}.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:580px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:11px;font-size:12px}.nav span{text-align:center;cursor:pointer}
.syncbar{background:#eef6f3;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:10px 0;font-size:13px}
.syncok{font-weight:700}.dangerBtn{background:#a6382d!important;color:#fff!important}
.authShell{max-width:520px;margin:30px auto}.authStatus{padding:10px 12px;border-radius:12px;background:#eef6f3;margin:10px 0}
.cloudBadge{display:inline-block;padding:4px 8px;border-radius:999px;background:#e8f6ef;font-size:12px;font-weight:700}
.offlineBadge{display:inline-block;padding:4px 8px;border-radius:999px;background:#f1f1f1;font-size:12px;font-weight:700}

details.fold{border:1px solid var(--line);border-radius:14px;margin:12px 0;background:#fbfdfc}
details.fold>summary{cursor:pointer;padding:13px 14px;font-weight:800;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary:before{content:"▸";display:inline-block;margin-right:8px;color:var(--g);transition:.15s}
details.fold[open]>summary:before{transform:rotate(90deg)}
details.fold .foldbody{padding:0 14px 14px}
.requiredBox{border:1px solid #9fcfc2;background:#f1faf7;border-radius:14px;padding:12px;margin:10px 0}
.requiredTag{display:inline-block;background:var(--g);color:#fff;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;margin-bottom:7px}
.optionalBlock{border:1px dashed #b9c8c2;border-radius:14px;padding:12px;margin:12px 0;background:#fbfdfc}
.optionalLabel{font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.02em}
.subtle{font-size:13px;color:var(--mut)}

.companion{background:linear-gradient(180deg,#ffffff,#f2faf7);border:1px solid #cfe5dd}
.statusGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.statusItem{border:1px solid var(--line);border-radius:13px;padding:11px;background:#fff}
.statusItem b{display:block;margin-bottom:3px}
.statusGood{color:var(--g);font-weight:800}
.statusOpen{color:#996719;font-weight:800}
.todayAction{border-left:4px solid var(--g);padding:12px 12px 12px 14px;background:#eef8f4;border-radius:12px;margin-top:10px}
.questionCard{border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0;background:#fff}

.modalBackdrop{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:18px;z-index:9999}
.modalBackdrop.hidden{display:none!important}.modalBox{width:min(92vw,480px);max-height:80vh;overflow:auto;background:#fff;border-radius:20px;padding:20px;box-shadow:0 16px 50px #0004}
.modalBox h2{margin-top:0}.modalClose{float:right;border:0;background:#edf3f0;border-radius:50%;width:34px;height:34px;font-size:20px}
.segment{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.segment .btn{margin-top:0}.roomCard{border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0;background:#fff}
.pathCard{border:1px solid var(--line);border-radius:14px;padding:13px;margin:10px 0;background:#fff}.verified{border-left:4px solid var(--g)}.serviceOnly{border-left:4px solid #d28a1d;background:#fffaf0}.unverified{border-left:4px solid #8b9490;background:#f7f8f7}.statusDone{background:#e8f6ef!important}.statusNA{opacity:.55}.dueSoon{border-color:#e0a33a!important;background:#fffaf0}

/* ===== WellGrad v3.0 Beta ===== */
:root{
 --g:#0b765c;--g2:#064c3c;--mint:#e8f5f0;--bg:#edf3f0;--card:#ffffff;
 --text:#17211e;--mut:#64716c;--line:#d9e3df;--warn:#fff4d8;--danger:#fde7e7;
 --shadow:0 12px 34px rgba(21,54,44,.08);
}
*{box-sizing:border-box}
html{background:#eaf1ee}
body{
 margin:0;color:var(--text);
 background:
 radial-gradient(circle at 10% 12%,rgba(11,118,92,.10),transparent 26rem),
 radial-gradient(circle at 92% 36%,rgba(11,118,92,.07),transparent 28rem),
 linear-gradient(180deg,#f8fbfa 0,#edf4f1 48%,#e8efec 100%);
 min-height:100vh;
}
body:before,body:after{
 content:"";position:fixed;z-index:-1;pointer-events:none;opacity:.55;
 border:1px solid rgba(11,118,92,.13);border-radius:36px;transform:rotate(-8deg)
}
body:before{width:310px;height:420px;left:-120px;top:170px}
body:after{width:350px;height:470px;right:-150px;top:330px;transform:rotate(10deg)}
header{
 max-width:760px;margin:0 auto;padding:26px 20px 14px;
 display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{
 font-size:29px;font-weight:900;letter-spacing:-1.2px;color:var(--g2);
 display:flex;align-items:center;gap:10px;
}
.logo:before{
 content:"W";display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
 background:linear-gradient(145deg,var(--g),var(--g2));color:white;
 font-size:21px;letter-spacing:-2px;box-shadow:0 8px 20px rgba(11,118,92,.22)
}
.logo span{color:var(--g)}
.tag{font-size:12px;color:var(--mut);font-weight:700;text-align:right;line-height:1.35}
main{max-width:760px;margin:0 auto;padding:8px 18px 100px}
.card{
 background:rgba(255,255,255,.94);border:1px solid rgba(213,226,221,.95);
 border-radius:24px;padding:22px;box-shadow:var(--shadow);
 backdrop-filter:blur(10px);
}
h1{font-size:27px;line-height:1.15;letter-spacing:-.55px;margin:4px 0 18px}
h2{font-size:18px;letter-spacing:-.2px;margin:18px 0 10px}
p{line-height:1.55}
.mode{
 position:relative;border:1px solid var(--line);border-radius:18px;padding:17px 18px;
 margin:12px 0;background:linear-gradient(145deg,#fff,#f8fbfa);
 box-shadow:0 5px 16px rgba(20,50,42,.035);transition:.18s ease;
 overflow:hidden;
}
.mode:after{content:"›";position:absolute;right:17px;top:50%;transform:translateY(-50%);font-size:28px;color:#9ab5ac}
.mode:hover{transform:translateY(-2px);border-color:#9fcfc2;box-shadow:0 10px 22px rgba(20,70,55,.09)}
.mode h2{margin:0 30px 5px 0;font-size:18px;color:var(--g2)}
.mode small{display:block;max-width:90%;line-height:1.45}
.btn{
 border:0;border-radius:14px;padding:13px 15px;font-weight:850;letter-spacing:.01em;
 background:linear-gradient(145deg,var(--g),#09654f);color:#fff;
 box-shadow:0 6px 14px rgba(11,118,92,.16);transition:.16s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(11,118,92,.20)}
.btn.sec,.btn.outline{box-shadow:none}
.btn.outline{background:#fff;color:var(--g);border:1px solid #b8d7cd}
.btn.outline:hover{background:#f1faf7}
.btn.sec{background:#eef3f1;color:#34433e}
.field{margin:13px 0}
label{font-size:13px;font-weight:800;color:#34433e;margin-bottom:6px}
input,select,textarea{
 width:100%;border:1px solid #ccd9d4;border-radius:13px;background:#fff;
 padding:12px 13px;font-size:15px;color:var(--text);outline:none;transition:.15s ease
}
input:focus,select:focus,textarea:focus{border-color:#5ba990;box-shadow:0 0 0 3px rgba(11,118,92,.09)}
.info,.tip,.warn,.entry,.task,.premium,.questionCard,.optionalBlock,.requiredBox{
 border-radius:16px;line-height:1.5
}
.info{background:#eef8f4;border-color:#cce7dd}
.tip{background:#f4f8f6;border-color:#dbe8e3}
.entry,.task{background:#fff;border:1px solid var(--line);box-shadow:0 3px 12px rgba(30,60,50,.025)}
.badge,.offlineBadge{border:1px solid rgba(11,118,92,.12)}
.companion{
 background:
 linear-gradient(135deg,rgba(232,247,241,.98),rgba(255,255,255,.98));
 border:1px solid #b9ded1;box-shadow:0 8px 24px rgba(11,118,92,.07)
}
.statusItem{box-shadow:0 3px 10px rgba(30,60,50,.035)}
.todayAction{box-shadow:inset 0 0 0 1px rgba(11,118,92,.06)}
details.fold{background:#fbfdfc;overflow:hidden}
details.fold>summary:hover{background:#f3f8f6}
.syncbar{border-bottom:1px solid #e4ece9;padding-bottom:12px;margin-bottom:16px}
.nav{
 left:50%;right:auto;transform:translateX(-50%);width:min(100%,760px);
 background:rgba(255,255,255,.94);border:1px solid rgba(213,226,221,.95);
 border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -8px 25px rgba(20,50,42,.06);
 backdrop-filter:blur(12px);padding-bottom:max(8px,env(safe-area-inset-bottom))
}
.nav button{padding:13px 6px 10px;color:#63726d}
.nav button:hover{color:var(--g)}
#start .card{padding-top:26px}
#start h1:after{
 content:"";display:block;width:48px;height:4px;border-radius:999px;
 background:var(--g);margin-top:10px
}
#start .mode:first-of-type{
 background:linear-gradient(135deg,#e9f7f2,#fff);border-color:#b8ddd0
}
@media(min-width:1000px){
 main,header{max-width:820px}
 main{padding-top:16px}
 .card{padding:28px 30px}
 body:before{left:3vw}
 body:after{right:3vw}
}
@media(max-width:620px){
 header{padding:18px 14px 10px}
 .logo{font-size:25px}.logo:before{width:34px;height:34px;border-radius:10px}
 .tag{font-size:10px;max-width:135px}
 main{padding:6px 10px 94px}
 .card{padding:17px 14px;border-radius:20px;box-shadow:0 8px 24px rgba(21,54,44,.06)}
 h1{font-size:24px}
 .statusGrid{grid-template-columns:1fr 1fr}
 body:before,body:after{display:none}
}

/* ===== WellGrad v1.5.1 Mobile Home refinement ===== */
@media(max-width:620px){
  header{padding-top:14px;padding-bottom:6px}
  .logo{font-size:23px}
  .logo:before{width:31px;height:31px;font-size:18px}
  .tag{font-size:10px;line-height:1.2}
  #home .card{padding-top:14px}
  #home h1{font-size:22px;margin-bottom:12px}
  #home .companion{padding:14px;margin:10px 0 14px}
  #home .companion h2{font-size:17px;margin:0 0 5px}
  #home .companion>p{font-size:13px;line-height:1.4;margin:4px 0 10px;color:var(--mut)}
  #home .companion .field{margin:8px 0}
  #home .companion label{font-size:12px}
  #home .companion input{padding:9px 11px;font-size:14px}
  #home .todayAction{padding:11px 12px;margin:9px 0;font-size:13px;line-height:1.4}
  #home .statusGrid{gap:8px;margin-top:8px}
  #home .statusItem{padding:10px;border-radius:13px}
  #home .statusItem b{font-size:12px}
  #home .statusItem strong{font-size:14px}
  #home .mode{padding:13px 15px;margin:9px 0}
  #home .mode h2{font-size:16px}
  #home .mode small{font-size:12px}
  #home .btn{padding:11px 12px}
}

/* More app-like visual hierarchy on Home */
#home .companion{position:relative;overflow:hidden}
#home .companion:before{
 content:"";position:absolute;width:120px;height:120px;border-radius:50%;
 right:-48px;top:-58px;background:rgba(11,118,92,.055);pointer-events:none
}
#home .statusGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#home .statusItem{
 border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.86);
 padding:12px;min-width:0
}
#home .statusItem strong{display:block;color:var(--g2);margin-top:4px}

/* ===== WellGrad v1.5.2 icons & detail pages ===== */
.wgIcon{
 width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;
 background:#eaf6f1;color:var(--g2);font-weight:900;font-size:15px;
 border:1px solid #c7e4da;vertical-align:middle;margin-right:8px;flex:0 0 auto
}
.wgIcon.red{background:#fff0ef;color:#b7463e;border-color:#f1cfcb}
.wgIcon.blue{background:#eef4fb;color:#315f91;border-color:#cedced}
.wgIcon.gold{background:#fff7e8;color:#8e681e;border-color:#ead9b2}
.mode h2{display:flex;align-items:center;gap:0}
.sectionHero{
 display:flex;align-items:flex-start;gap:12px;padding:14px 15px;margin:-2px 0 16px;
 background:linear-gradient(135deg,#eff9f5,#fff);border:1px solid #cce4db;border-radius:16px
}
.sectionHero .heroIcon{
 width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--g),var(--g2));color:#fff;font-weight:900;
 box-shadow:0 6px 14px rgba(11,118,92,.16);flex:0 0 auto
}
.sectionHero b{display:block;color:var(--g2);font-size:15px;margin-bottom:3px}
.sectionHero small{line-height:1.4;color:var(--mut)}
#diagnosis .card,#optGeneral .card,#optDetail .card,#guides .card,#test .card,#finish .card,#history .card,#currentTests .card{
 position:relative;overflow:hidden
}
#diagnosis .card:before,#optGeneral .card:before,#optDetail .card:before,#guides .card:before,#test .card:before,#finish .card:before,#history .card:before,#currentTests .card:before{
 content:"";position:absolute;right:-55px;top:-55px;width:125px;height:125px;border-radius:50%;
 background:rgba(11,118,92,.045);pointer-events:none
}
#diagnosis h1,#optGeneral h1,#optDetail h1,#guides h1,#test h1,#finish h1,#history h1,#currentTests h1{
 padding-bottom:10px;border-bottom:1px solid #e4ece9;margin-bottom:16px
}
.task b,.entry b{color:#23312c}
@media(max-width:620px){
 .wgIcon{width:28px;height:28px;border-radius:9px;font-size:14px}
 .sectionHero{padding:12px;margin-bottom:13px}
 .sectionHero .heroIcon{width:34px;height:34px;border-radius:10px}
}

/* ===== WellGrad v1.6 interaction refinements ===== */
.statusItem.clickable{cursor:pointer;transition:.15s ease;position:relative;padding-right:30px}
.statusItem.clickable:after{content:"›";position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:22px;color:#91aaa1}
.statusItem.clickable:hover{border-color:#9bcabb;transform:translateY(-1px)}
.weatherRow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.weatherRow .btn{width:auto;white-space:nowrap;margin:0;padding:11px 13px}
.sourceNote{font-size:11px;color:var(--mut);margin-top:5px}
.outcomeGood{background:#eaf7f2;border:1px solid #bfe0d4}
.marketBox{border:1px solid var(--line);border-radius:15px;padding:13px;margin:12px 0;background:#fbfdfc}
.marketSources{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.marketSource{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff;cursor:pointer}
.marketSource b{display:block;color:var(--g2);font-size:13px}.marketSource small{font-size:11px}
@media(max-width:620px){.weatherRow{grid-template-columns:1fr}.weatherRow .btn{width:100%}.marketSources{grid-template-columns:1fr}}

/* ===== WellGrad v3.0 Beta ===== */
.vlGateList{display:grid;gap:8px;margin:12px 0}
.vlGateList label{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fbfdfc;font-weight:650}
.vlGateList input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.vlGateHint{font-size:12px;color:var(--mut);line-height:1.45}

/* ===== WellGrad v3.0 Beta ===== */
.progressShell{height:12px;border-radius:999px;background:#e6efeb;overflow:hidden;margin:9px 0 5px}
.progressFill{height:100%;width:0;background:linear-gradient(90deg,var(--g),#37a47f);border-radius:999px;transition:.3s ease}
.successCard{background:linear-gradient(135deg,#e9f8f2,#fff);border:1px solid #bfe0d4;border-radius:16px;padding:14px;margin:12px 0}
.statStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.statBox{text-align:center;border:1px solid var(--line);border-radius:13px;padding:10px;background:#fff}
.statBox b{display:block;font-size:18px;color:var(--g2)}.statBox small{font-size:11px}
.chartWrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin:12px 0}
.chartWrap canvas{display:block;width:100%;height:260px}
.legendRow{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:7px}
.dotLegend{display:inline-flex;align-items:center;gap:6px}.dotLegend:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--g)}
.knowledgeSearch{position:sticky;top:0;background:#fff;padding:8px 0 12px;z-index:3}
.measureResult{border-left:4px solid var(--g);padding:12px 13px;background:#f2faf7;border-radius:12px;margin-top:12px;line-height:1.5}
@media(max-width:620px){.chartWrap canvas{height:220px}.statStrip{grid-template-columns:repeat(3,1fr)}}

/* ===== WellGrad v3.0 Beta ===== */
.testSuccessHero{text-align:center;padding:8px 4px 14px}
.testSuccessIcon{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#e6f6ef;color:var(--g);font-size:27px;font-weight:900;border:1px solid #b9ded0}
.changeCompare{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:12px 0}
.changeValue{border:1px solid var(--line);border-radius:13px;padding:11px;text-align:center;background:#fff}
.changeValue small{display:block}.changeValue b{font-size:18px;color:var(--g2)}
.changeArrow{font-size:22px;color:var(--g)}
.bandGain{padding:10px 12px;border-radius:12px;background:#eef8f4;border:1px solid #c7e6da;margin:10px 0}
.chartOld{opacity:.5}

/* ===== WellGrad v3.0 Beta ===== */
.houseSummary{border:1px solid var(--line);border-radius:17px;background:linear-gradient(135deg,#f1faf6,#fff);padding:14px;margin:12px 0}
.houseSummaryGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.houseSummaryItem{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.houseSummaryItem b{display:block;color:var(--g2);font-size:13px;margin-bottom:3px}
.todayState{border-radius:15px;padding:13px;margin:10px 0;border:1px solid var(--line);background:#fff}
.todayState.good{background:#edf9f4;border-color:#bee2d4}
.todayState.wait{background:#fff8e8;border-color:#ead6a2}
.todayState.infoState{background:#eef5fb;border-color:#cadced}
.todayState b{display:block;margin-bottom:4px}
.confirmedList .entry{padding:12px}
.syncStatusGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.syncStatusItem{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.syncStatusItem b{display:block;color:var(--g2)}
.currentBand{outline:2px solid var(--g);outline-offset:2px}
.weatherBadge{display:inline-block;padding:4px 8px;border-radius:999px;background:#edf6f2;font-size:11px;font-weight:800;margin-left:5px}
@media(max-width:620px){
 .houseSummaryGrid,.syncStatusGrid{grid-template-columns:1fr}
}
.smartCard{border:1px solid var(--line);border-radius:16px;padding:13px;margin:10px 0;background:#fff}.smartCard.good{background:#eef9f5;border-color:#bfe1d4}.smartStep{padding:12px;border:1px solid var(--line);border-radius:13px;margin:8px 0;background:#fff}.confidence{display:inline-block;padding:4px 8px;border-radius:999px;background:#edf5f2;font-size:11px;font-weight:800}.profileBand{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.profileBand b{color:var(--g2)}

/* ===== WellGrad v3.0 Beta ===== */
.compareGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compareCard{border:1px solid var(--line);border-radius:15px;padding:12px;background:#fff}
.compareCard b{display:block;color:var(--g2);margin-bottom:4px}
.regGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.regCard{border:1px solid var(--line);border-radius:15px;padding:12px;background:#fff;cursor:pointer}
.regCard:hover{border-color:#9bcabb}
.codeResult{border-left:4px solid var(--g);background:#f3faf7;padding:12px 13px;border-radius:12px;margin-top:10px}
@media(max-width:620px){.compareGrid,.regGrid{grid-template-columns:1fr}}

/* ===== WellGrad v3.0 Beta ===== */
.photoDrop{border:2px dashed #b9d7cd;border-radius:16px;padding:18px;text-align:center;background:#f8fcfa}
.photoPreviewGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.photoPreview{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.photoPreview img{width:100%;height:160px;object-fit:cover;display:block}
.photoPreview div{padding:9px}
.devicePass{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff}
.consultSummary{border:1px solid #cfe3dc;background:#f2faf7;border-radius:15px;padding:13px;white-space:pre-wrap}
@media(max-width:620px){.photoPreviewGrid{grid-template-columns:1fr}}

/* ===== WellGrad v3.0 Beta ===== */
.backendStatus{border:1px solid var(--line);border-radius:13px;padding:10px 12px;background:#fff;margin:10px 0}
.backendStatus.ok{background:#eef9f5;border-color:#bfe1d4}
.backendStatus.warn{background:#fff8e8;border-color:#ead7a5}
.uploadList{display:grid;gap:8px;margin:10px 0}
.uploadItem{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.uploadItem .row{align-items:center}
.progressMini{height:7px;border-radius:999px;background:#e4ece8;overflow:hidden;margin-top:6px}
.progressMini>span{display:block;height:100%;background:var(--g);width:0}
.consultSent{background:#eef9f5;border:1px solid #bfe1d4;border-radius:15px;padding:14px;margin:12px 0}

/* ===== WellGrad v3.0 Beta ===== */
.adminGrid{display:grid;gap:10px}
.adminCard{border:1px solid var(--line);border-radius:15px;padding:13px;background:#fff}
.adminCard.new{border-left:4px solid #b97717}
.adminCard.in_progress{border-left:4px solid #3c72a8}
.adminCard.done{border-left:4px solid var(--g)}
.adminMeta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.adminMeta div{background:#f8fbfa;border:1px solid var(--line);border-radius:10px;padding:8px}
.adminActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adminPhotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.adminPhotos img{width:100%;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.adminToolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
@media(max-width:620px){.adminMeta{grid-template-columns:1fr}.adminPhotos{grid-template-columns:1fr 1fr}}

/* ===== WellGrad v3.0 Beta ===== */
.threadList{display:grid;gap:10px}
.threadCard{border:1px solid var(--line);border-radius:15px;padding:13px;background:#fff;cursor:pointer}
.threadCard.unread{border-left:4px solid #b97717;background:#fffaf0}
.threadCard:hover{border-color:#9bcabb}
.threadMessages{display:grid;gap:10px;margin:14px 0}
.msg{max-width:86%;padding:11px 12px;border-radius:15px;border:1px solid var(--line);background:#fff}
.msg.user{justify-self:start;background:#f8fbfa}
.msg.admin{justify-self:end;background:#eaf7f2;border-color:#bfe0d4}
.msg.system{justify-self:center;background:#f4f5f5;color:var(--mut);font-size:12px}
.msgHead{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--mut);margin-bottom:5px}
.replyBox{position:sticky;bottom:76px;background:#fff;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.unreadBadge{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:999px;align-items:center;justify-content:center;background:#b97717;color:#fff;font-size:11px;font-weight:900}
.threadMeta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.threadMeta div{border:1px solid var(--line);border-radius:10px;padding:8px;background:#f9fbfa}
@media(max-width:620px){.threadMeta{grid-template-columns:1fr}.msg{max-width:94%}}

/* ===== WellGrad v3.0 Beta ===== */
.librarySearch{position:sticky;top:0;z-index:3;background:#fff;padding:8px 0 10px}
.libraryCount{font-size:11px;color:var(--mut);margin-top:4px}
.verifyBadge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:850;background:#eaf7f2;color:var(--g2);border:1px solid #c2e2d6}
.serviceBadge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:850;background:#fff1e8;color:#8a4d16;border:1px solid #efcfb2}
.deviceOverview{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.deviceOverview div{border:1px solid var(--line);border-radius:11px;padding:9px;background:#f9fbfa}
.faultResultCard{border:1px solid var(--line);border-radius:15px;padding:13px;background:#fff;margin:10px 0}
.faultResultCard.service{border-left:4px solid #b65a2a}
.faultResultCard.user{border-left:4px solid var(--g)}
.faultLog{display:grid;gap:8px;margin-top:12px}
.faultLogItem{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
@media(max-width:620px){.deviceOverview{grid-template-columns:1fr}}

/* ===== WellGrad v3.0 Beta ===== */
.startHero{padding:18px;border-radius:18px;background:linear-gradient(145deg,#f0f8f5,#fff);border:1px solid #d7e8e1;margin-bottom:13px}
.startHero h1{font-size:27px;line-height:1.08;margin:0 0 7px}
.startHero p{margin:0;color:var(--mut);font-size:13px}
.continueCard{border:1px solid #b9ddcf;background:#edf8f4;border-radius:16px;padding:14px;margin:12px 0;cursor:pointer}
.continueCard:hover{border-color:#76b7a2}
.continueCard strong{font-size:16px}
.nextStepCard{border:1px solid #b9ddcf;background:linear-gradient(145deg,#edf8f4,#fff);border-radius:17px;padding:15px;margin:12px 0}
.nextStepCard .nextIcon{width:40px;height:40px;border-radius:13px;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;flex:0 0 auto}
.nextStepCard h2{margin:0 0 4px;font-size:17px}
.nextStepCard p{margin:0;color:var(--mut);font-size:12px}
.setupChecklist{display:grid;gap:7px;margin-top:11px}
.setupCheck{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:9px 10px;background:#fff;font-size:12px}
.setupCheck.done{background:#f0f8f5;border-color:#cee5dc}
.setupDot{width:22px;height:22px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);font-weight:900;flex:0 0 auto}
.setupCheck.done .setupDot{background:var(--g);color:#fff;border-color:var(--g)}
.dashboardGroup{margin:18px 0}
.dashboardGroupHead{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:8px}
.dashboardGroupHead h2{margin:0;font-size:16px}
.dashboardGroupHead small{color:var(--mut)}
.quickGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quickTile{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;cursor:pointer;min-height:88px}
.quickTile:hover{border-color:#9ccbbb;background:#fbfefd}
.quickTile b{display:block;margin-bottom:4px;font-size:13px}
.quickTile small{display:block;line-height:1.35;color:var(--mut)}
.quickTile.primary{background:#eff8f5;border-color:#c6e1d7}
.quickTile .tileIcon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#edf2f0;margin-bottom:7px;font-size:13px;font-weight:900}
.quickTile.primary .tileIcon{background:var(--g);color:#fff}
.accountChip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:11px;background:#fff;cursor:pointer}
.homeSectionTitle{margin-top:18px}
.mobileNav{display:none}
.onboardingNote{border-left:4px solid var(--g);background:#f4faf8;padding:11px 12px;border-radius:10px;margin:10px 0;font-size:12px}
@media(max-width:620px){
 .startHero h1{font-size:24px}
 .quickGrid{grid-template-columns:1fr 1fr}
 body{padding-bottom:74px}
 .mobileNav{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:50;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px max(7px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
 .mobileNav button{border:0;background:transparent;padding:5px 2px;font-size:10px;color:#53605c;font-weight:750}
 .mobileNav span{display:block;font-size:16px;line-height:18px;margin-bottom:1px}
}

/* ===== WellGrad v3.0 Beta ===== */
.problemHero{border:1px solid #c7e1d7;background:linear-gradient(145deg,#eef8f4,#fff);border-radius:17px;padding:14px;margin:10px 0 14px}
.problemContext{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.problemContext div{border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px;font-size:11px}
.problemContext b{display:block;font-size:12px;margin-bottom:2px}
.diagProgress{height:5px;background:#edf1ef;border-radius:999px;overflow:hidden;margin:9px 0 14px}
.diagProgress span{display:block;height:100%;background:var(--g);border-radius:999px;transition:width .2s ease}
.diagChoices{display:grid;gap:8px;margin-top:10px}
.diagChoice{border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.diagChoice:hover{border-color:#8fc5b3;background:#fbfefd}
.diagChoice b{display:block;margin-bottom:3px}
.diagChoice small{display:block;color:var(--mut);line-height:1.35}
.diagResult{border:1px solid #b9ddcf;background:#f0f8f5;border-radius:16px;padding:14px;margin:11px 0}
.diagResult.warnResult{border-color:#e1c69e;background:#fff9ee}
.diagResult.serviceResult{border-color:#e3b9a2;background:#fff5ef}
.diagResultGrid{display:grid;gap:8px;margin-top:10px}
.diagResultRow{border-top:1px solid rgba(0,0,0,.08);padding-top:8px}
.diagResultRow:first-child{border-top:0;padding-top:0}
.diagResultRow small{display:block;color:var(--mut);font-weight:750;text-transform:uppercase;letter-spacing:.035em;margin-bottom:3px}
.diagWhy{font-size:12px;color:var(--mut);line-height:1.45}
.diagActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.diagHistory{display:grid;gap:8px;margin-top:12px}
.diagHistoryItem{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px}
.diagHistoryItem.resolved{opacity:.72;background:#f7f9f8}
.diagHistoryItem .statusOpen{color:#9a6018;font-weight:800}
.diagHistoryItem .statusDone{color:var(--g2);font-weight:800}
.problemWide{grid-column:1/-1}
@media(max-width:620px){
 .problemContext{grid-template-columns:1fr}
 .diagActionGrid{grid-template-columns:1fr}
}

/* ===== WellGrad v3.0 Beta ===== */
.homeMainGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.homeMainTile{border:1px solid var(--line);border-radius:17px;padding:14px;background:#fff;cursor:pointer;min-height:116px}
.homeMainTile:hover{border-color:#92c8b6;background:#fbfefd}
.homeMainTile.primary{background:linear-gradient(145deg,#edf8f4,#fff);border-color:#bee0d4}
.homeMainTile.problem{background:linear-gradient(145deg,#fff7ee,#fff);border-color:#ead2b6}
.homeMainTile .bigIcon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#edf3f1;font-weight:900;margin-bottom:8px}
.homeMainTile.primary .bigIcon{background:var(--g);color:#fff}
.homeMainTile.problem .bigIcon{background:#a86422;color:#fff}
.homeMainTile b{display:block;font-size:15px;margin-bottom:4px}
.homeMainTile small{display:block;color:var(--mut);line-height:1.4}
.submenuIntro{border:1px solid #d6e8e1;background:#f5faf8;border-radius:14px;padding:11px 12px;margin:8px 0 14px}
.submenuGrid{display:grid;gap:8px}
.submenuTile{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;cursor:pointer}
.submenuTile:hover{border-color:#93c8b7}
.submenuTile b{display:block;margin-bottom:3px}
.submenuTile small{display:block;color:var(--mut);line-height:1.35}
.activeContinue{border:1px solid #aad5c6;background:#edf8f4;border-radius:15px;padding:13px;margin:13px 0}
.activeContinue b{display:block;margin-bottom:3px}
.optRoomCard{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;margin:9px 0}
.optRoomCard .roomHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.optRoomSummary{border:1px solid #d9e8e2;background:#f7fbf9;border-radius:12px;padding:10px;margin:10px 0;font-size:12px}
.controllerAction{border:1px solid #a9d5c5;background:linear-gradient(145deg,#eaf7f2,#fff);border-radius:15px;padding:13px;margin:11px 0}
.controllerAction small{display:block;color:var(--mut);font-weight:850;letter-spacing:.04em;margin-bottom:4px}
.controllerAction strong{display:block;font-size:19px;line-height:1.2;margin-bottom:4px;color:var(--g2)}
.optimizeBoundary{border-left:4px solid var(--g);padding:10px 12px;background:#f6faf8;border-radius:10px;margin:10px 0}
.weatherAuto{font-weight:800;color:var(--g2)}
@media(max-width:620px){.homeMainGrid{grid-template-columns:1fr}.homeMainTile{min-height:auto}}

/* ===== WellGrad v3.0 Beta ===== */
.officialDocs{display:grid;gap:8px;margin:12px 0}
.officialDoc{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 11px;background:#fff;text-decoration:none;color:inherit}
.officialDoc:hover{border-color:#90c6b4;background:#fbfefd}
.officialDoc b{display:block;margin-bottom:3px}
.officialDoc small{display:block;color:var(--mut);line-height:1.35}
.reviewStatus{border:1px solid #d7e5df;border-radius:12px;padding:10px;background:#f7faf9;margin:9px 0}
.reviewStatus.partial{background:#fff9ef;border-color:#ead6b7}
.missingController{border:1px solid #e2c393;background:#fff7e9;border-radius:14px;padding:12px;margin:10px 0}
.faultScopeCard{border:1px solid var(--line);border-radius:14px;padding:12px;margin:9px 0;background:#fff}
.faultScopeCard.service{border-left:4px solid #b75c2c}
.faultScope{font-size:11px;color:var(--mut);margin:4px 0 8px}
.faultCount{font-size:11px;color:var(--mut);margin:6px 0}
.maNext{border:1px solid #b9ddcf;background:#eff8f5;border-radius:15px;padding:13px;margin:12px 0}
.maNext.warnNext{border-color:#e0c69d;background:#fff9ef}
.maSteps{display:grid;gap:8px;margin-top:9px}
.maStep{border:1px solid var(--line);border-radius:11px;padding:10px;background:#fff}
.bleedGuide{border-left:4px solid #3c8c76;background:#f3faf7;border-radius:10px;padding:11px 12px;margin:10px 0}
.bleedGuide ol{margin:7px 0 0 20px;padding:0}
.bleedGuide li{margin:4px 0}
.measureFlag{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:850;background:#eef3f1;margin-right:5px}
.measureFlag.warn{background:#fff0dd;color:#8f5616}
.measureFlag.good{background:#eaf7f2;color:var(--g2)}

/* ===== WellGrad v3.0 Beta ===== */
.legalFooter{max-width:820px;margin:0 auto;padding:14px 14px 90px;color:var(--mut);font-size:11px;text-align:center}
.legalFooter button{border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;padding:4px 7px;font:inherit}
.legalHero{border:1px solid #cfe1da;background:#f5faf8;border-radius:15px;padding:13px;margin:10px 0 14px}
.legalGrid{display:grid;gap:9px;margin:10px 0}
.legalBlock{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff}
.legalBlock h2{margin-top:0}
.launchBlocker{border:1px solid #d9ad77;background:#fff5e8;border-radius:14px;padding:12px;margin:11px 0}
.launchBlocker strong{color:#8a531d}
.legalOk{border:1px solid #b9ddcf;background:#eff8f5;border-radius:14px;padding:12px;margin:11px 0}
.legalPlaceholder{background:#fff1e4;border-radius:6px;padding:1px 5px;font-family:monospace}
.trademarkNote{font-size:11px;color:var(--mut);border-top:1px solid var(--line);padding-top:9px;margin-top:12px}
.legalTable{display:grid;gap:7px;margin:9px 0}
.legalTable>div{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff}

/* ===== WellGrad v3.0 Beta / Feedback ===== */
.betaFeedbackFab{
 position:fixed;right:16px;bottom:88px;z-index:80;border:0;border-radius:999px;
 padding:10px 14px;background:var(--g2,#064c3c);color:white;font-weight:800;
 box-shadow:0 8px 24px #183c2a33;cursor:pointer
}
.betaOverlay{position:fixed;inset:0;background:#081b1688;z-index:110;display:flex;align-items:flex-end;justify-content:center;padding:12px}
.betaOverlay.hidden{display:none}
.betaSheet{width:min(560px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:22px;padding:18px;box-shadow:0 18px 55px #0004}
.betaChoiceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.betaChoice{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 7px;font-weight:750;cursor:pointer}
.betaChoice.active{border-color:var(--g);background:var(--mint,#e8f5f0);color:var(--g2)}
.betaMetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.betaMetric{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.betaMetric b{display:block;font-size:22px;color:var(--g2)}
.betaFeedbackItem{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;background:#fff}
.betaPrivacy{font-size:11px;color:var(--mut);line-height:1.4}
.betaWelcomeSteps{display:grid;gap:8px;margin:12px 0}
.betaWelcomeStep{border:1px solid var(--line);border-radius:12px;padding:10px}
@media(max-width:520px){.betaMetrics{grid-template-columns:1fr}.betaChoiceGrid{grid-template-columns:1fr}.betaFeedbackFab{bottom:78px}}
