*{box-sizing:border-box} :root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#eaf7ee;background:#06100b;line-height:1.5;font-synthesis:none}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% -10%,#14482d 0,transparent 31%),radial-gradient(circle at 10% 105%,#0d2e1d 0,transparent 30%),#06100b}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}input,textarea,select{width:100%;border:1px solid #294d35;border-radius:11px;background:#07140c;color:#effff3;padding:12px 13px;outline:none;transition:.2s}input:focus,textarea:focus,select:focus{border-color:#52c879;box-shadow:0 0 0 3px #3fc46b1e}textarea{resize:vertical}.topbar{height:72px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#06100be8;backdrop-filter:blur(18px);border-bottom:1px solid #1a3926}.brand{border:0;background:transparent;color:#f3fff6;display:flex;align-items:center;gap:11px;text-align:left}.brand-mark{font-size:28px}.brand b{display:block;font-size:19px;line-height:1}.brand small{display:block;color:#6ed790;font-size:9px;letter-spacing:.19em;margin-top:5px}.top-actions{display:flex;align-items:center;gap:8px}.save-state{font-size:11px;color:#71917b;margin-right:5px}.icon-btn{width:40px;height:40px;border:1px solid #274b34;background:#0b1b11;color:#dcefe2;border-radius:12px;font-weight:800}.mobile-only{display:none}.shell{display:grid;grid-template-columns:238px 1fr;min-height:calc(100vh - 72px)}#sidebar{position:sticky;top:72px;height:calc(100vh - 72px);padding:22px 14px;border-right:1px solid #173422;background:#06120bcc;display:flex;flex-direction:column;justify-content:space-between}nav{display:flex;flex-direction:column;gap:5px}nav button,.subtle-btn{border:0;background:transparent;color:#92ad9a;text-align:left;padding:12px 13px;border-radius:11px;transition:.18s}nav button:hover,nav button.active,.subtle-btn:hover,.subtle-btn.active{background:#113a23;color:#e6ffee}.side-bottom{display:grid;gap:8px}.coach-btn,.cta{border:0;border-radius:12px;padding:12px 16px;background:#3bc36f;color:#031009;font-weight:850}.coach-btn{text-align:left}.coach-btn:hover,.cta:hover{background:#50d580}.secondary,.ghost,.danger{border:1px solid #285038;border-radius:11px;padding:10px 14px;background:#0c1d12;color:#dbede0;font-weight:650}.ghost{background:transparent}.secondary:hover,.ghost:hover{background:#122b1b}.danger{border-color:#653333;color:#ffbcbc;background:#251111}.full{width:100%}main{width:min(1280px,100%);padding:34px;margin:0 auto}.hero{min-height:360px;border:1px solid #245137;border-radius:28px;padding:46px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(135deg,#133e26a8,#08150de6);box-shadow:0 20px 80px #0005;overflow:hidden}.pill{display:inline-block;border:1px solid #2f6846;border-radius:99px;padding:5px 10px;color:#91e6ac;background:#0b2515;font-size:12px}.hero h1{font-size:clamp(42px,6vw,72px);line-height:1;margin:18px 0 14px;letter-spacing:-.045em}.hero p{max-width:670px;color:#a9c0b0;font-size:17px}.hero-actions,.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hero-visual{min-width:270px;text-align:center;color:#7eb48e}.pulse-ring{width:230px;height:230px;border:1px solid #3d7650;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 35px #2e74411a,0 0 0 70px #2e74410d}.pulse-ring span{font-size:82px}.hero-visual small{display:block;margin-top:16px;letter-spacing:.2em;font-size:10px}.section-head,.page-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:36px 0 18px}.section-head h2,.page-head h1{margin:4px 0;font-size:30px;letter-spacing:-.025em}.section-head small{color:#65ce86;letter-spacing:.16em}.page-head p{margin:5px 0 0;color:#8fa798;max-width:760px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.tool-card{min-height:188px;text-align:left;border:1px solid #1f442e;border-radius:18px;background:#0a1a10;color:#e9f6ed;padding:21px;transition:.2s}.tool-card:hover{transform:translateY(-3px);border-color:#3f8a59;background:#0d2114}.tool-card .tool-icon{display:block;font-size:30px;margin-bottom:17px}.tool-card b{font-size:18px}.tool-card p{color:#8fa796;min-height:55px}.tool-card .arrow{color:#72d992;font-size:12px}.panel{background:#0a1a10;border:1px solid #1e422c;border-radius:18px;padding:22px}.form-panel label{display:flex;flex-direction:column;gap:7px;color:#a8bbaa;font-size:13px;margin-bottom:16px}.form-panel label small{color:#6f8c77}.form-grid{display:grid;gap:13px}.form-grid.two{grid-template-columns:repeat(2,1fr)}.form-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid.four{grid-template-columns:repeat(4,1fr)}.two-col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:17px}.explainer{height:max-content;position:sticky;top:92px}.explainer ol{padding-left:22px;color:#9fb3a4}.formula{padding:14px;border:1px solid #285438;border-radius:12px;background:#0d2616;color:#8ce1a5;text-align:center;font-weight:800}.result-section{margin-top:20px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.metric-grid.wide{grid-template-columns:repeat(3,1fr)}.metric,.metric-card{border:1px solid #1f442e;border-radius:15px;background:#0a1a10;padding:18px}.metric small,.metric-card small{display:block;color:#779180;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.metric b,.metric-card b{display:block;font-size:25px;margin-top:7px}.metric-card span{display:block;color:#87a28f;font-size:12px;margin-top:5px}.metric-card.good{border-color:#2e6c43}.metric-card.warn{border-color:#735e2a}.metric-card.bad{border-color:#713637}.table-wrap{overflow:auto;border:1px solid #1f442e;border-radius:16px;background:#08160d}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:12px 13px;border-bottom:1px solid #173723;text-align:right;white-space:nowrap}th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#799682;background:#0b1d12;position:sticky;top:0}th:first-child,td:first-child{text-align:left}td{color:#bdd0c1;font-variant-numeric:tabular-nums}.accent{color:#74e59a;font-weight:800}.accent2{color:#87baff;font-weight:800}.alert,.coach-note,.quiz-feedback{display:flex;flex-direction:column;gap:4px;padding:15px 17px;border-radius:13px;border:1px solid #275139;background:#0d2516;margin:14px 0}.alert.good,.quiz-feedback.good{border-color:#2e6c43}.alert.warn{border-color:#725f2a;background:#211c0d}.alert.bad,.quiz-feedback.bad{border-color:#713637;background:#241011}.alert span{color:#9eb2a2}.coach-note ul{margin:8px 0;padding-left:20px;color:#a9beae}.coach-note p{color:#a9beae}.capacity-list{display:grid;gap:8px;margin:15px 0}.capacity-list>div{display:grid;grid-template-columns:190px 1fr 90px;gap:13px;align-items:center;padding:11px 13px;border:1px solid #1c3e29;border-radius:12px;background:#09170e}.capacity-list span small{display:block;color:#738f7b}.bar{height:8px;background:#10271a;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#358e56,#5adb82);border-radius:99px}.capacity-list em{font-size:9px;font-style:normal;letter-spacing:.08em;text-align:right}.bad-text{color:#ff8888}.stage-rows{display:grid;gap:9px}.stage-row{display:grid;grid-template-columns:35px 1.3fr .7fr 40px 35px;gap:8px;align-items:center}.stage-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#123820;color:#78dd97;font-size:12px}.remove-stage{border:0;background:transparent;color:#a57f7f;font-size:22px}.score-box{border:1px solid #295239;border-radius:14px;padding:9px 15px;text-align:center}.score-box b{display:block;font-size:22px}.score-box span{font-size:10px;color:#7e9986}.quiz-card{max-width:850px;margin:0 auto;border:1px solid #214a31;border-radius:24px;background:linear-gradient(145deg,#0d2316,#08140c);padding:32px}.quiz-card>small{color:#69d78b;letter-spacing:.12em}.quiz-card h2{font-size:clamp(24px,4vw,38px);line-height:1.2;margin:16px 0 25px}.quiz-options{display:grid;gap:10px}.quiz-options button{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid #285038;border-radius:13px;background:#0a1a10;color:#e6f6ea;padding:13px}.quiz-options button:hover:not(:disabled){border-color:#57bc75;background:#10281a}.quiz-options button span{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#153923;font-weight:900}.quiz-options button.correct{border-color:#3d995d;background:#102d1c}.quiz-options button.wrong{border-color:#9d4448;background:#2a1113}.history-list{display:grid;gap:9px}.history-row{display:grid;grid-template-columns:46px 1fr auto 34px;gap:13px;align-items:center;border:1px solid #1c402a;border-radius:14px;background:#09180f;padding:13px}.history-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#102d1b}.history-row p{margin:2px 0 0;color:#819a87;font-size:12px}.history-row time{color:#67816f;font-size:11px}.delete-history{border:0;background:transparent;color:#997a7a;font-size:22px}.empty{padding:34px;border:1px dashed #2a5138;border-radius:16px;text-align:center;color:#8fa596}.empty.small{padding:15px}.fineprint,.muted{color:#6f8a77;font-size:11px}.narrow{max-width:760px}.check{flex-direction:row!important;align-items:center!important}.check input{width:auto}.panel hr{border:0;border-top:1px solid #1e402b;margin:26px 0}.modal{position:fixed;inset:0;background:#000a;z-index:100;display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-card{width:min(520px,100%);max-height:90vh;overflow:auto;background:#0b1b11;border:1px solid #2c5a3e;border-radius:20px;padding:25px;position:relative}.close{position:absolute;right:10px;top:7px;border:0;background:transparent;color:#abc1b0;font-size:30px}.toast{position:fixed;right:20px;bottom:20px;z-index:120;background:#123c24;border:1px solid #3b8454;color:#e2ffeb;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(9px);transition:.2s}.toast.show{opacity:1;transform:none}.compact main{padding-top:20px}.compact .panel,.compact .tool-card{padding:16px}
@media(max-width:1050px){.tool-grid{grid-template-columns:repeat(2,1fr)}.form-grid.four{grid-template-columns:repeat(2,1fr)}.metric-grid.wide{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.shell{grid-template-columns:1fr}#sidebar{display:none;position:fixed;left:0;top:72px;bottom:0;width:280px;height:auto;z-index:45}#sidebar.open{display:flex}.mobile-only{display:block}.hero{padding:30px}.hero-visual{display:none}.two-col{grid-template-columns:1fr}.explainer{position:static}.metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){main{padding:18px 14px}.topbar{padding:0 14px}.save-state{display:none}.hero{padding:27px 22px;min-height:320px}.hero h1{font-size:43px}.tool-grid,.form-grid.two,.form-grid.three,.form-grid.four,.metric-grid,.metric-grid.wide{grid-template-columns:1fr}.section-head,.page-head{align-items:flex-start;flex-direction:column}.stage-row{grid-template-columns:30px 1fr 90px 28px}.stage-row>span:nth-of-type(2){display:none}.history-row{grid-template-columns:42px 1fr 28px}.history-row time{display:none}.capacity-list>div{grid-template-columns:1fr}.capacity-list em{text-align:left}.quiz-card{padding:22px}.actions-row{width:100%}.actions-row>*{flex:1}.brand small{font-size:8px}}


/* Account Edition */
.account-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);border-radius:999px;padding:9px 13px;font-weight:700;cursor:pointer;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-gate{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 25% 10%,rgba(70,210,130,.14),transparent 35%),#06100b;display:grid;place-items:center;padding:24px;overflow:auto}.auth-gate.hidden{display:none}.auth-card{width:min(460px,100%);background:#0c1912;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.45);border-radius:26px;padding:28px}.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.auth-brand>span{font-size:32px}.auth-brand div{display:flex;flex-direction:column}.auth-brand small{letter-spacing:.16em;color:var(--muted);font-size:10px}.auth-card h1{margin:0 0 8px}.auth-card>p{color:var(--muted);margin:0 0 20px}.auth-card form{display:grid;gap:13px}.auth-card .link-btn{display:block;width:100%;border:0;background:transparent;color:#8ce8b4;font-weight:700;padding:14px;cursor:pointer}.auth-error{margin-top:12px;padding:12px;border-radius:12px;background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.25);color:#ffb0b0}.full{width:100%}
@media(max-width:620px){.save-state{display:none}.account-btn{max-width:120px}.auth-card{padding:22px;border-radius:20px}}

/* RC3 — Print & operational logistics */
.emph{font-weight:850;color:#dfffe8}
@media print{
  @page{size:auto;margin:12mm}
  html,body{background:#fff!important;color:#111!important}
  .topbar,#sidebar,.auth-gate,.toast,.modal,.actions-row,button,form,.page-head button{display:none!important}
  .shell{display:block!important}.shell main,main{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
  #view,.result-section,.panel,.metric,.metric-card,.table-wrap,.coach-note,.alert{background:#fff!important;color:#111!important;border-color:#bbb!important;box-shadow:none!important}
  .metric small,.metric-card small,.metric-card span,.muted,.fineprint,.coach-note p,.coach-note li,.alert span,td,th{color:#222!important}
  th{background:#eee!important;position:static!important} table{min-width:0!important;font-size:10pt}.table-wrap{overflow:visible!important}
  .bar{border:1px solid #777!important;background:#eee!important}.bar i{background:#777!important}
  body.print-target-mode #view>*{display:none!important}
  body.print-target-mode #view .print-target{display:block!important}
  body.print-target-mode #view .print-target *{visibility:visible!important}
  .print-target{page-break-inside:auto!important}
}


/* RC4 — Professional profile */
.profile-hero{display:flex;align-items:center;gap:22px;padding:24px 26px;margin-bottom:18px;border:1px solid #244a33;border-radius:20px;background:linear-gradient(135deg,#0b1d12,#0b1720)}
.profile-avatar{width:76px;height:76px;flex:0 0 76px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:900;background:linear-gradient(145deg,#6e55d7,#382679);box-shadow:0 12px 30px #0005}
.profile-welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%}.profile-welcome h1{margin:8px 0 3px;font-size:30px}.profile-welcome p{margin:0;color:#8fa796}.profile-metrics{grid-template-columns:repeat(4,1fr)}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:17px 0}.profile-section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.profile-section-head small{color:#69d78b;letter-spacing:.1em}.profile-section-head h2{margin:3px 0 0}.professional-history{display:grid;gap:8px}.professional-history>div{display:grid;grid-template-columns:44px 1fr;gap:11px;align-items:center;padding:10px;border:1px solid #1b3b28;border-radius:12px;background:#08170e}.professional-history small{display:block;color:#718a78;margin-top:2px}.profile-bars{display:grid;gap:15px}.profile-bars>div>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.profile-bars em{font-style:normal;color:#8ea596}.resume-card{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:17px 0}.resume-card h2{margin:4px 0}.resume-card p{margin:0;color:#91a796}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.quick-actions button{display:flex;gap:10px;align-items:center;border:1px solid #204630;background:#0a1a10;color:#e7f8eb;border-radius:13px;padding:14px;text-align:left}.quick-actions button:hover{border-color:#54ba75;background:#10271a}.quick-actions span{font-size:20px}
@media(max-width:1050px){.profile-metrics,.quick-actions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.profile-welcome{align-items:flex-start;flex-direction:column}.resume-card{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.profile-hero{align-items:flex-start}.profile-avatar{width:58px;height:58px;flex-basis:58px;font-size:26px}.profile-welcome h1{font-size:24px}.profile-metrics,.quick-actions{grid-template-columns:1fr}}

/* RC5 — dashboard professionale fedele al mockup */
.dashboard-profile-head{display:flex;align-items:center;gap:18px;margin-bottom:18px;padding:10px 4px}.dashboard-profile-copy{min-width:0;flex:1}.dashboard-name-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dashboard-name-line h1{margin:0;font-size:31px;letter-spacing:-.025em}.dashboard-profile-copy p{margin:7px 0 0;color:#91a796}.dashboard-profile-copy i{font-style:normal;color:#52715d;margin:0 5px}.role-badge{display:inline-flex;align-items:center;border:1px solid #5b468c;background:#2b2144;color:#d6c6ff;border-radius:99px;padding:3px 8px;font-size:11px}.dashboard-settings{margin-left:auto}
.dashboard-top-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;margin-bottom:14px}.dashboard-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.dash-metric{min-height:106px;border:1px solid #243a31;border-radius:13px;background:linear-gradient(145deg,#111921,#0a1310);padding:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}.dash-metric small{display:block;color:#a1afa8;font-size:11px}.dash-metric b{display:block;font-size:26px;margin-top:8px;color:#f3fff6}.dash-metric>span{font-size:26px;opacity:.85}.dashboard-objective{border:1px solid #2b3d38;border-radius:13px;background:linear-gradient(145deg,#151d25,#0e151b);color:#edf7f0;padding:18px;text-align:left;display:flex;justify-content:space-between;gap:16px}.dashboard-objective:hover{border-color:#47705b}.dashboard-objective small{color:#91a29a;letter-spacing:.05em}.dashboard-objective h3{margin:8px 0 4px}.dashboard-objective p{margin:0;color:#a9b7b0;font-size:13px}.dashboard-objective span{display:inline-block;margin-top:12px;color:#63d48b;font-size:12px}.dashboard-objective>b{font-size:38px;opacity:.55}
.dashboard-body-grid{display:grid;grid-template-columns:.9fr 1.35fr 1.05fr;gap:14px}.dash-section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.dash-section-title small{color:#6dd58e;letter-spacing:.09em}.dash-section-title h2{margin:2px 0 0;font-size:18px}.activity-feed{display:grid;gap:6px}.activity-feed>button{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;border:0;border-bottom:1px solid #20352b;background:transparent;color:#edf6ef;text-align:left;padding:9px 2px}.activity-feed>button:hover{background:#0e1d16}.activity-feed>button>span{width:32px;height:32px;border-radius:8px;background:#173623;display:grid;place-items:center}.activity-feed b{font-size:13px}.activity-feed small{display:block;color:#789082;margin-top:1px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-feed time{font-size:10px;color:#73877c;white-space:nowrap}.dashboard-table{border-radius:10px}.dashboard-table table{min-width:600px}.dashboard-table th,.dashboard-table td{text-align:left;padding:9px 10px}.dashboard-table td:first-child small{display:block;color:#728a7c;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-actions{white-space:nowrap}.mini-action{width:31px;height:31px;border:1px solid #2a4d38;background:#0b1b12;color:#8ee3aa;border-radius:8px;margin-right:4px}.mini-action:hover{background:#123120}
.month-chip{font-size:10px;padding:5px 8px;border:1px solid #34463f;border-radius:8px;color:#a7b5ae;text-transform:capitalize}.month-layout{display:grid;grid-template-columns:145px 1fr;gap:18px;align-items:center;padding:10px 0}.dashboard-donut{width:140px;height:140px;border-radius:50%;display:grid;place-items:center}.dashboard-donut>div{width:92px;height:92px;border-radius:50%;background:#10191c;display:grid;place-items:center;align-content:center;text-align:center}.dashboard-donut b{font-size:27px}.dashboard-donut span{font-size:10px;color:#8fa098}.empty-donut{background:#26352f}.month-legend{display:grid;gap:8px}.month-legend>div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;font-size:11px}.month-legend em{font-style:normal;color:#8b9d94}.legend-dot{width:8px;height:8px;border-radius:50%}.dot-0{background:#2f70da}.dot-1{background:#62a9cf}.dot-2{background:#d99b32}.dot-3{background:#77a839}.dot-4{background:#8159c9}.dot-5{background:#bf554c}.dot-6{background:#5d7770}.month-summary{border-top:1px solid #22362d;margin-top:10px;padding-top:12px;display:flex;gap:8px;align-items:baseline}.month-summary b{font-size:20px}.month-summary span{font-size:10px;color:#7e9187}.good-text{color:#51d879}
.dashboard-quick{margin-top:14px}.dashboard-quick-grid{display:grid;grid-template-columns:repeat(8,minmax(135px,1fr));gap:9px;overflow:auto}.dashboard-quick-grid button{min-width:145px;border:1px solid #273c34;border-radius:10px;background:linear-gradient(145deg,#151d23,#0d1517);color:#edf7f0;padding:13px;display:flex;gap:10px;align-items:center;text-align:left}.dashboard-quick-grid button:hover{border-color:#3d7956;background:#12221a}.dashboard-quick-grid button>span{font-size:25px}.dashboard-quick-grid b,.dashboard-quick-grid small{display:block}.dashboard-quick-grid small{color:#7c9086;font-size:9px;margin-top:2px}
.history-detail h2{margin:12px 0 4px}.history-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:18px 0}.history-detail-grid>div{border:1px solid #274335;border-radius:10px;background:#0a1710;padding:11px}.history-detail-grid small{display:block;color:#779080;text-transform:capitalize}.history-detail-grid b{display:block;margin-top:4px;word-break:break-word}
@media(max-width:1180px){.dashboard-top-grid{grid-template-columns:1fr}.dashboard-body-grid{grid-template-columns:1fr 1fr}.dashboard-month{grid-column:1/-1}.dashboard-metrics{grid-template-columns:repeat(5,1fr)}}
@media(max-width:900px){.dashboard-metrics{grid-template-columns:repeat(2,1fr)}.dashboard-body-grid{grid-template-columns:1fr}.dashboard-month{grid-column:auto}.dashboard-profile-head{align-items:flex-start}.dashboard-settings{margin-left:0}.dashboard-profile-head{flex-wrap:wrap}}
@media(max-width:620px){.dashboard-profile-head{padding:0}.dashboard-name-line h1{font-size:24px}.dashboard-profile-copy p{font-size:11px}.dashboard-metrics{grid-template-columns:1fr 1fr}.dash-metric{min-height:90px}.dashboard-top-grid{gap:10px}.dashboard-body-grid{gap:10px}.month-layout{grid-template-columns:1fr}.dashboard-donut{margin:auto}.history-detail-grid{grid-template-columns:1fr}.dashboard-settings{width:100%}}

/* V2: menu esteso */
#sidebar{overflow-y:auto;overflow-x:hidden}
#mainNav{flex:0 0 auto}


/* DIENGFLOW V3.1 — brand + responsive refinement */
.brand{min-width:0}.brand-copy{display:block;min-width:0}.brand-mark{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border:1px solid #2f6846;border-radius:13px;background:linear-gradient(145deg,#0f2d1c,#07140c);box-shadow:inset 0 0 22px #4bd67a12}.brand-mark svg{width:28px;height:28px;fill:none;stroke:#70df96;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.brand b{font-size:20px;letter-spacing:.02em}.brand small{font-size:8.5px;letter-spacing:.12em;white-space:nowrap;color:#79dc98}.auth-mark{width:46px!important;height:46px!important}.auth-brand small{line-height:1.35}.hero .pill{font-weight:800;letter-spacing:.03em}
@media(max-width:900px){
  .topbar{height:66px;padding:0 12px;gap:8px}.shell{min-height:calc(100vh - 66px)}#sidebar{top:66px}
  .brand{gap:8px}.brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:11px}.brand-mark svg{width:23px;height:23px}.brand b{font-size:16px}.brand small{font-size:6.8px;letter-spacing:.075em;max-width:190px;overflow:hidden;text-overflow:ellipsis}
  .top-actions{gap:5px}.icon-btn{width:38px;height:38px}.account-btn{max-width:112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main{width:100%;max-width:100%;overflow:hidden}.page-head h1,.section-head h2{overflow-wrap:anywhere}.panel,.hero,.tool-card{max-width:100%}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:620px){
  body{overflow-x:hidden}.topbar{padding:0 10px}.brand{max-width:58vw}.brand small{white-space:normal;line-height:1.15;max-width:150px}.brand-mark{width:32px;height:32px;flex-basis:32px}.brand b{font-size:15px}.brand small{font-size:6.2px}
  #printPageBtn{display:none}.account-btn{max-width:86px;padding-inline:10px}.icon-btn{width:36px;height:36px}
  main{padding:16px 12px}.hero{min-height:auto;padding:24px 18px;border-radius:20px}.hero h1{font-size:38px}.hero p{font-size:15px}.page-head{margin:22px 0 14px}.page-head h1{font-size:30px;line-height:1.08}.page-head p{font-size:14px}
  .panel{padding:17px;border-radius:16px}.form-panel textarea{min-height:88px!important}.form-panel input,.form-panel textarea,.form-panel select{font-size:16px;padding:11px 12px}.form-panel label{margin-bottom:13px}
  .tool-grid,.metric-grid,.metric-grid.wide{grid-template-columns:1fr 1fr}.tool-card{min-height:150px;padding:16px}.tool-card p{min-height:0;font-size:13px}.tool-card b{font-size:16px}.tool-card .tool-icon{font-size:24px;margin-bottom:10px}
  .actions-row{display:grid;grid-template-columns:1fr 1fr}.actions-row>*{width:100%}.profile-metrics{grid-template-columns:1fr 1fr!important}
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important}.quick-actions>*{min-width:0!important}
}
@media(max-width:390px){.brand small{max-width:125px}.account-btn{max-width:72px}.tool-grid,.metric-grid,.metric-grid.wide{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr!important}}


/* DIENGFLOW V4 — Tech Warehouse Intelligence UI */
:root{--df-neon:#49e37d;--df-cyan:#43c9c7;--df-grid:#1d56362b;--df-panel:#091911;--df-line:#26523a}
body{background:
 radial-gradient(circle at 78% 6%,rgba(48,210,110,.08),transparent 28%),
 radial-gradient(circle at 20% 78%,rgba(37,139,112,.06),transparent 32%),#031009}
main{background-image:linear-gradient(rgba(42,108,67,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(42,108,67,.035) 1px,transparent 1px);background-size:38px 38px}
.topbar{backdrop-filter:blur(14px);background:linear-gradient(90deg,rgba(3,18,10,.97),rgba(3,26,14,.93));border-bottom:1px solid #1e4d32;box-shadow:0 10px 32px #0006}
.brand-mark{position:relative;box-shadow:0 0 24px rgba(73,227,125,.1),inset 0 0 18px rgba(73,227,125,.05)}
.brand-mark:after{content:'';position:absolute;inset:5px;border:1px dashed rgba(73,227,125,.2);border-radius:9px}
#sidebar{background:linear-gradient(180deg,#04150c,#031109 72%,#06170e);border-right:1px solid #153d27}
#mainNav button.active{box-shadow:inset 3px 0 0 var(--df-neon),0 0 18px rgba(52,200,105,.08)}
.panel,.tool-card,.result-section,.knowledge-panel{box-shadow:0 16px 42px rgba(0,0,0,.18)}
.tool-card{position:relative;overflow:hidden}.tool-card:after{content:'';position:absolute;right:-28px;bottom:-28px;width:92px;height:92px;border:1px solid rgba(79,223,126,.08);border-radius:16px;transform:rotate(45deg)}
.hero{position:relative;overflow:hidden}.hero:before{content:'WAREHOUSE • FLOW • DATA • DECISION';position:absolute;right:22px;top:18px;font-size:8px;letter-spacing:.22em;color:#7be7a33b}
.hero-visual:after{content:'▦  ▥  ▤';display:block;margin-top:10px;color:#4dcf7c55;letter-spacing:8px;font-size:18px}
.knowledge-panel{margin-top:18px;border:1px solid #2a5a3d;border-radius:18px;padding:20px;background:linear-gradient(145deg,rgba(8,29,18,.96),rgba(5,20,13,.98));position:relative;overflow:hidden}
.knowledge-panel:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 49.7%,rgba(74,227,125,.035) 50%,transparent 50.3%),linear-gradient(transparent 0 49.7%,rgba(74,227,125,.025) 50%,transparent 50.3%);background-size:48px 48px}
.knowledge-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.knowledge-head small{color:#5ee38b;letter-spacing:.13em}.knowledge-head h2{margin:4px 0 0;font-size:20px}.knowledge-head>span{font-size:10px;border:1px solid #316e49;border-radius:99px;padding:6px 9px;color:#91e7ad;white-space:nowrap}
.knowledge-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.knowledge-grid>div{border:1px solid #1f4630;border-radius:12px;padding:13px;background:rgba(4,21,12,.72)}.knowledge-grid b{color:#eaffef}.knowledge-grid p{margin:5px 0 0;color:#9cb2a4;font-size:12px;line-height:1.55}
.knowledge-result{position:relative;margin-top:12px;border-left:3px solid var(--df-cyan);padding:11px 13px;background:#071d16;border-radius:0 10px 10px 0}.knowledge-result b{color:#8de7d9}.knowledge-result p{margin:5px 0 0;color:#abc0b4;line-height:1.55}
.result-reading{margin-top:16px;border-top:1px solid #255139;padding-top:16px}.result-reading>div{display:flex;gap:11px;align-items:flex-start}.result-reading>div>span{font-size:24px}.result-reading b{color:#cffff0}.result-reading p{margin:4px 0 8px;color:#a6baae;line-height:1.6}.result-reading small{display:block;color:#728d7c;border-left:2px solid #6c8b77;padding-left:10px;line-height:1.5}
.form-panel label{position:relative}.form-panel label:focus-within{color:#a7f4bd}.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus{box-shadow:0 0 0 3px rgba(73,227,125,.08),0 0 28px rgba(73,227,125,.06)}
.result-section{border:1px solid #28583c;background:linear-gradient(145deg,#071b11,#06140d)}
.metric.good{box-shadow:inset 0 0 26px rgba(55,210,104,.04)}.metric.bad{box-shadow:inset 0 0 26px rgba(220,75,68,.045)}
@media(max-width:1100px){.knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.knowledge-panel{padding:15px}.knowledge-head{flex-direction:column}.knowledge-grid{grid-template-columns:1fr}.knowledge-head>span{white-space:normal}.hero:before{display:none}}

/* DIENGFLOW V4.1 — mobile readability + professional result guidance */
.result-reading{margin-top:18px;padding:18px;border:1px solid #24533a;border-radius:16px;background:linear-gradient(145deg,rgba(9,31,19,.96),rgba(5,22,13,.94))}
.result-reading-head{display:flex;gap:12px;align-items:flex-start}.result-reading-head>span{font-size:22px}.result-reading-head p,.result-caveat p{margin:5px 0 0;line-height:1.6;color:#b9cfc0}
.result-next{margin-top:16px;display:grid;gap:9px}.result-next>b{color:#85e6a4}.result-next>div{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start}.result-next>div>span{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#123b24;color:#82e6a3;font-size:12px;font-weight:800}.result-next p{margin:2px 0;color:#d4e2d7;line-height:1.45}
.result-caveat{margin-top:15px;padding-top:13px;border-top:1px dashed #2b5940}.result-caveat b{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#8ccfa2}
.decision-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.decision-strip>div{padding:14px;border:1px solid #244e37;border-radius:14px;background:#081b11}.decision-strip b{display:block;color:#7de49e;margin-bottom:5px}.decision-strip span{font-size:12px;line-height:1.45;color:#b8cdbf}
.form-panel label small{display:block;margin-top:5px;color:#7f9c8a;font-size:11px;line-height:1.35;font-weight:500}
@media(max-width:900px){.decision-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .dashboard-metrics{grid-template-columns:1fr!important}.dash-metric{min-height:auto;padding:14px 16px}.dash-metric strong{font-size:28px}
  .dashboard-quick-grid{grid-template-columns:1fr!important}.dashboard-quick-grid button{min-height:66px}
  .dashboard-profile-head{gap:12px}.dashboard-profile-copy{min-width:0;width:100%}.dashboard-name-line{display:block}.dashboard-name-line h1{font-size:23px}.dashboard-profile-copy p{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
  .result-section{padding:15px}.result-reading{padding:15px}.decision-strip{grid-template-columns:1fr}.metric-grid.wide{grid-template-columns:1fr!important}
  .knowledge-grid{gap:8px}.knowledge-grid>div{padding:12px}.knowledge-grid p{font-size:13px;line-height:1.5}
  .form-panel label small{font-size:12px}.table-wrap table{min-width:680px}.topbar .brand small{max-width:138px}
}

/* V4.2 — grafici professionali per ogni analisi */
.result-chart-card{margin-top:22px;padding:20px;border:1px solid rgba(64,227,164,.2);border-radius:20px;background:linear-gradient(180deg,rgba(10,33,27,.96),rgba(7,24,20,.96));box-shadow:0 18px 45px rgba(0,0,0,.18)}
.chart-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.chart-head small{font-size:.72rem;letter-spacing:.12em;color:#65e8b1;font-weight:800}.chart-head h3{margin:4px 0 6px;font-size:1.15rem}.chart-head p{margin:0;color:var(--muted);max-width:760px}.chart-badge{white-space:nowrap;border:1px solid rgba(75,230,177,.25);background:rgba(75,230,177,.08);padding:7px 10px;border-radius:999px;font-size:.72rem;color:#8ef0c8}.chart-legend{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0 8px;font-size:.78rem;color:#cfe8df}.chart-legend span{display:flex;align-items:center;gap:7px}.chart-legend-swatch{display:inline-block;width:18px;height:4px;border-radius:99px}.chart-scroll{overflow-x:auto;padding-bottom:4px}.result-chart{width:100%;min-width:620px;height:auto;display:block}.chart-grid{stroke:rgba(180,224,210,.10);stroke-width:1}.chart-axis{stroke:rgba(210,240,230,.35);stroke-width:1}.chart-tick,.chart-x,.chart-axis-label{fill:#95b8ac;font-family:Inter,system-ui,sans-serif;font-size:11px}.chart-axis-label{fill:#bdd7cf;font-size:12px;font-weight:700}.chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-dot{stroke:#061914;stroke-width:2}.chart-bar{opacity:.88}.chart-line.s0,.chart-dot.s0,.chart-bar.s0,.chart-legend-swatch.s0{stroke:#48e0a7;fill:#48e0a7;background:#48e0a7}.chart-line.s1,.chart-dot.s1,.chart-bar.s1,.chart-legend-swatch.s1{stroke:#49a9ff;fill:#49a9ff;background:#49a9ff}.chart-line.s2,.chart-dot.s2,.chart-bar.s2,.chart-legend-swatch.s2{stroke:#f5c451;fill:#f5c451;background:#f5c451}.chart-line.s3,.chart-dot.s3,.chart-bar.s3,.chart-legend-swatch.s3{stroke:#d88cff;fill:#d88cff;background:#d88cff}.chart-axis-help,.chart-explanation{margin-top:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}.chart-axis-help b,.chart-explanation b{display:block;margin-bottom:4px;color:#d9f6eb}.chart-axis-help p,.chart-explanation p{margin:0;color:#a9c8bd;line-height:1.55}.chart-explanation{background:linear-gradient(90deg,rgba(72,224,167,.07),rgba(73,169,255,.04))}
@media(max-width:700px){.result-chart-card{padding:15px;margin-top:16px}.chart-head{display:block}.chart-badge{display:inline-block;margin-top:10px}.result-chart{min-width:560px}.chart-axis-help,.chart-explanation{padding:12px}.chart-head h3{font-size:1.04rem}}
@media print{.result-chart-card{break-inside:avoid;box-shadow:none}.chart-scroll{overflow:visible}.result-chart{min-width:0}.chart-grid{stroke:#d9e3df}.chart-axis{stroke:#879a93}.chart-tick,.chart-x,.chart-axis-label{fill:#32443d}.chart-axis-help p,.chart-explanation p,.chart-head p{color:#374b44}}

/* DIENGFLOW V4.3 — professional logistics cockpit */
:root{--df-neon:#59f18a;--df-cyan:#45d9ff;--df-blue:#2e7df6;--df-amber:#f5bd4f;--df-violet:#a978ff;--df-panel:#07141b;--df-line:#1d4450}
body{background:radial-gradient(circle at 82% 4%,rgba(69,217,255,.09),transparent 30%),radial-gradient(circle at 14% 82%,rgba(89,241,138,.07),transparent 34%),linear-gradient(180deg,#020a0f,#03110d 58%,#020a0d)}
main{background-image:linear-gradient(rgba(69,217,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(89,241,138,.022) 1px,transparent 1px);background-size:44px 44px}
.topbar{background:linear-gradient(90deg,rgba(2,10,15,.97),rgba(3,22,20,.95));border-bottom:1px solid #174453;box-shadow:0 10px 34px rgba(0,0,0,.46)}
#sidebar{background:linear-gradient(180deg,#031017,#03130f 58%,#020b0f);border-right:1px solid #17414a}
#mainNav button.active{background:linear-gradient(90deg,rgba(69,217,255,.11),rgba(89,241,138,.07));box-shadow:inset 3px 0 0 var(--df-cyan),0 0 20px rgba(69,217,255,.06)}
.panel,.tool-card,.result-section,.knowledge-panel,.analysis-context,.calculation-trace{border-color:#1b4550;background:linear-gradient(145deg,rgba(7,24,29,.97),rgba(5,20,17,.98));box-shadow:0 18px 48px rgba(0,0,0,.22)}
.tool-card:hover{border-color:#2e8794;background:linear-gradient(145deg,#0a252d,#09231a)}
.pill{border-color:#276272;color:#9beaff;background:rgba(14,61,70,.42)}
.cta,.coach-btn{background:linear-gradient(135deg,#5cf18b,#43d6ff);color:#021009;box-shadow:0 10px 26px rgba(69,217,255,.08)}
.cta:hover,.coach-btn:hover{background:linear-gradient(135deg,#73f39b,#65dfff)}
.metric,.metric-card{background:linear-gradient(145deg,rgba(7,27,31,.98),rgba(5,21,17,.98));border-color:#1d4650}.metric b,.metric-card b{font-variant-numeric:tabular-nums}

.analysis-context{margin:0 0 18px;padding:18px 20px;position:relative;overflow:hidden}
.analysis-context:before{content:'SKU  •  FLOW  •  SCENARIO';position:absolute;right:18px;bottom:10px;color:rgba(69,217,255,.08);font-size:10px;letter-spacing:.2em;pointer-events:none}
.context-title{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}.context-title small{color:#65e5ff;letter-spacing:.13em;font-weight:800}.context-title h3{margin:3px 0 0;font-size:18px}.context-title>span{font-size:10px;color:#83a8ad;border:1px solid #28535d;padding:5px 8px;border-radius:999px}.analysis-context label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#a9c2c2}.analysis-context input{background:#04141a;border-color:#28505a}.context-help{margin:0;color:#718f91;font-size:11px;line-height:1.5}
.result-context-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 16px}.result-context-strip>div{padding:11px 13px;border-radius:12px;border:1px solid #24505d;background:linear-gradient(135deg,rgba(69,217,255,.06),rgba(89,241,138,.035))}.result-context-strip small{display:block;color:#6f9da7;font-size:9px;text-transform:uppercase;letter-spacing:.09em}.result-context-strip b{display:block;margin-top:4px;color:#e6fbff;overflow-wrap:anywhere}

.result-chart-card{border-color:rgba(69,217,255,.25);background:linear-gradient(180deg,rgba(5,25,32,.98),rgba(4,18,20,.98));box-shadow:0 22px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)}
.chart-suite{display:grid;gap:16px}.chart-suite .result-chart-card{margin-top:0}.secondary-chart-card{border-color:rgba(245,189,79,.22);background:linear-gradient(180deg,rgba(9,27,31,.98),rgba(7,22,22,.98))}.secondary-chart-card .chart-head small{color:#f5ca70}
.chart-tools{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}.chart-tools label{font-size:10px;color:#7da6ad;text-transform:uppercase;letter-spacing:.07em}.chart-tools select{margin-top:5px;min-width:128px;padding:7px 9px;border-radius:9px;background:#07171d;border-color:#2b5a65;color:#e1f8fb}.chart-badge{border-color:rgba(89,241,138,.24);color:#9af5ba;background:rgba(89,241,138,.07)}
.chart-grid{stroke:rgba(150,225,235,.105)}.chart-axis{stroke:rgba(202,246,248,.36)}.chart-tick,.chart-x,.chart-axis-label{fill:#8db4b8}.chart-axis-label{fill:#c2e6e9}
.chart-line.s0,.chart-dot.s0,.chart-bar.s0,.chart-legend-swatch.s0{stroke:#59f18a;fill:#59f18a;background:#59f18a}.chart-line.s1,.chart-dot.s1,.chart-bar.s1,.chart-legend-swatch.s1{stroke:#45d9ff;fill:#45d9ff;background:#45d9ff}.chart-line.s2,.chart-dot.s2,.chart-bar.s2,.chart-legend-swatch.s2{stroke:#f5bd4f;fill:#f5bd4f;background:#f5bd4f}.chart-line.s3,.chart-dot.s3,.chart-bar.s3,.chart-legend-swatch.s3{stroke:#a978ff;fill:#a978ff;background:#a978ff}
.chart-line.s4,.chart-dot.s4,.chart-bar.s4,.chart-legend-swatch.s4{stroke:#ff728f;fill:#ff728f;background:#ff728f}.chart-line.s5,.chart-dot.s5,.chart-bar.s5,.chart-legend-swatch.s5{stroke:#93a8ff;fill:#93a8ff;background:#93a8ff}.chart-line.s6,.chart-dot.s6,.chart-bar.s6,.chart-legend-swatch.s6{stroke:#ff9f59;fill:#ff9f59;background:#ff9f59}
.chart-area{opacity:.12;stroke:none}.chart-area.s0{fill:#59f18a}.chart-area.s1{fill:#45d9ff}.chart-area.s2{fill:#f5bd4f}.chart-area.s3{fill:#a978ff}
.chart-professional-note{margin-top:10px;padding:12px 14px;border-radius:13px;border:1px solid rgba(69,217,255,.10);background:rgba(69,217,255,.035)}.chart-professional-note b{display:block;color:#bdefff;margin-bottom:3px}.chart-professional-note p{margin:0;color:#90afb3;font-size:12px;line-height:1.5}

.calculation-trace{margin-top:18px;padding:18px;border-radius:18px}.calc-trace-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.calc-trace-head small{color:#f5bd4f;letter-spacing:.12em;font-weight:800}.calc-trace-head h3{margin:3px 0 0}.calc-trace-head>span{font-size:10px;color:#d6c791;border:1px solid #64572c;border-radius:999px;padding:5px 8px}.calc-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.calc-steps>div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid #21434a;border-radius:12px;background:rgba(3,16,20,.62)}.calc-steps em{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:rgba(245,189,79,.12);color:#f5cf7c;font-style:normal;font-weight:800}.calc-steps p{margin:2px 0;color:#bdd1d2;font-size:12px;line-height:1.55}.calc-note{margin:11px 0 0;color:#718c8f;font-size:10px;line-height:1.5}
.history-context{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.history-context span{min-width:140px;padding:9px 11px;border:1px solid #244a53;border-radius:10px;background:#06171c}.history-context small{display:block;color:#759ca3;font-size:9px;text-transform:uppercase}.history-context b{display:block;margin-top:2px;color:#def6f7;font-size:12px}

@media(max-width:760px){.context-title,.calc-trace-head{display:block}.context-title>span,.calc-trace-head>span{display:inline-block;margin-top:8px}.analysis-context .form-grid.three{grid-template-columns:1fr}.result-context-strip{grid-template-columns:1fr}.calc-steps{grid-template-columns:1fr}.chart-tools{justify-content:flex-start;margin-top:12px}.chart-tools label{width:100%}.chart-tools select{width:100%;min-height:42px}.result-chart{min-width:620px}.result-chart-card{padding:14px}.chart-head{display:block}.chart-legend{gap:10px}.chart-axis-help,.chart-explanation,.chart-professional-note{font-size:12px}}
@media(max-width:390px){.analysis-context,.calculation-trace{padding:14px}.result-chart{min-width:580px}}

/* =========================================================
   DIENGFLOW V5 — Product shell, profiles, command palette,
   scenarios, import center and mobile bottom navigation
   ========================================================= */
:root{
  --df-bg:#06151f;
  --df-bg2:#0a1f2a;
  --df-panel:#0d2631;
  --df-panel2:#102f3b;
  --df-line:rgba(80,220,196,.18);
  --df-green:#39e6ad;
  --df-cyan:#5bd6ff;
  --df-amber:#ffc857;
}
body{background:
  radial-gradient(circle at 82% 8%,rgba(91,214,255,.08),transparent 30%),
  linear-gradient(rgba(57,230,173,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(57,230,173,.025) 1px,transparent 1px),
  var(--df-bg);background-size:auto,32px 32px,32px 32px,auto}
.profile-hidden{display:none!important}
.profile-switch-wrap{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border:1px solid var(--df-line);border-radius:12px;background:rgba(9,31,40,.8);font-size:12px;color:#dffaf2}
.profile-switch-wrap select{border:0;background:#0b2430;color:#eafdf8;padding:6px 28px 6px 8px;border-radius:8px;min-width:108px}
.search-tools{font-size:22px;color:var(--df-cyan)}
.mobile-bottom-nav{display:none}
.command-palette{min-width:min(720px,88vw)}
.command-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.command-head small{color:var(--df-cyan);letter-spacing:.12em}.command-head h2{margin:.25rem 0 0}
.command-head kbd{border:1px solid var(--df-line);background:#071b24;border-radius:8px;padding:5px 8px;color:#a8c9d1;font-size:11px}
.command-search{width:100%;font-size:18px;padding:14px 16px;border-radius:13px;border:1px solid rgba(91,214,255,.32)!important;background:#071b24!important;color:#fff!important;margin-bottom:12px}
.command-results{display:grid;gap:7px;max-height:54vh;overflow:auto}
.command-results button{display:grid;grid-template-columns:40px 1fr;gap:10px;text-align:left;align-items:center;padding:11px 12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);border-radius:12px;color:#fff}
.command-results button:hover{border-color:rgba(91,214,255,.35);background:rgba(91,214,255,.07)}
.command-results button>span{font-size:20px}.command-results b{display:block}.command-results small{display:block;color:#9fb6be;margin-top:2px;line-height:1.35}
.result-product-actions{margin-top:18px;padding:16px;border:1px solid rgba(91,214,255,.22);border-radius:14px;background:linear-gradient(135deg,rgba(91,214,255,.06),rgba(57,230,173,.04));display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.result-product-actions small{display:block;color:var(--df-cyan);letter-spacing:.11em;font-size:10px}.result-product-actions>b,.result-product-actions div>b{display:block;margin-top:4px}
.scenario-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.scenario-card{position:relative;overflow:hidden}.scenario-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--df-cyan),var(--df-green))}.scenario-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.scenario-top time{font-size:11px;color:#8ca6af}.scenario-card h3{margin:14px 0 10px;font-size:18px}.scenario-context{display:flex;gap:8px;flex-wrap:wrap}.scenario-context span{font-size:11px;border:1px solid var(--df-line);border-radius:999px;padding:5px 8px;color:#9fb7c0}.scenario-context b{color:#e9fffa}
.import-panel{max-width:960px}.import-help{margin:14px 0 18px;padding:14px;border-left:3px solid var(--df-cyan);background:rgba(91,214,255,.055);border-radius:0 10px 10px 0}.import-help p{margin:.4rem 0 0;color:#aec1c8;line-height:1.55}

@media(max-width:760px){
  body{padding-bottom:74px}
  .profile-switch-wrap{padding:4px 6px}.profile-switch-wrap span{display:none}.profile-switch-wrap select{min-width:90px;padding:6px 22px 6px 7px;font-size:11px}
  .top-actions #printPageBtn,.top-actions #helpBtn,.top-actions #menuBtn{display:none!important}
  .save-state{display:none!important}.search-tools{display:none!important}
  #sidebar{bottom:70px!important;max-height:calc(100dvh - 128px)!important;width:min(88vw,330px)!important}
  .mobile-bottom-nav{position:fixed;z-index:80;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:68px;padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));background:rgba(5,20,28,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(91,214,255,.16);box-shadow:0 -8px 28px rgba(0,0,0,.28)}
  .mobile-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:#91aab3;border-radius:10px;min-width:0}.mobile-bottom-nav button b{font-size:18px;line-height:1}.mobile-bottom-nav button span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobile-bottom-nav button.active{color:var(--df-green);background:rgba(57,230,173,.07)}
  .scenario-grid{grid-template-columns:1fr}
  .result-product-actions{display:block}.result-product-actions .actions-row{margin-top:12px;display:grid;grid-template-columns:1fr 1fr}.result-product-actions .actions-row button{width:100%}
  .command-palette{min-width:0}.command-results{max-height:60vh}
}

/* V5.1 product hardening */
.favorite-history{border:0;background:transparent;color:#f4cf69;font-size:20px;cursor:pointer;padding:6px}.series-input{font-variant-numeric:tabular-nums}.input-error{outline:2px solid rgba(248,113,113,.8)!important}.scenario-compare-picker{margin-bottom:18px}.scenario-compare-result{margin-top:18px}.scenario-compare-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.scenario-compare-head small{color:var(--muted);letter-spacing:.1em}.scenario-compare-head h2 span{color:var(--muted);font-weight:400}.compare-table-wrap{overflow:auto;margin:18px 0}.delta-up{color:#6ee7b7;font-weight:700}.delta-down{color:#fca5a5;font-weight:700}.compact-tools{margin-top:14px}.print-report-header{display:none}
@media(max-width:700px){.scenario-compare-head{display:block}.scenario-compare-picker .form-grid.two{grid-template-columns:1fr}.series-input{min-height:48px;font-size:16px}.history-row{grid-template-columns:auto 1fr auto}.history-row time{grid-column:2}.favorite-history{grid-column:3;grid-row:1}.delete-history{grid-column:3;grid-row:2}.compare-table-wrap table{min-width:620px}}
@media print{.print-report-header{display:flex!important;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding:0 0 14px;margin:0 0 18px;color:#111!important}.print-report-header>div{display:flex;flex-direction:column}.print-report-header b{font-size:22px;letter-spacing:.06em}.print-report-header span,.print-report-header small{font-size:10px;color:#555!important}.print-report-header strong{font-size:15px}.result-product-actions,.chart-type-picker{display:none!important}}

/* V5.2 — profile modes + DIENGFLOW Academy */
.profile-settings-link{gap:.45rem}.profile-settings-link small{font-size:10px;opacity:.55}.usage-settings{margin-bottom:18px}.usage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.usage-card{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--border,#263544);border-radius:16px;background:rgba(255,255,255,.025);cursor:pointer}.usage-card input{margin-top:4px}.usage-card.selected{border-color:rgba(73,218,164,.65);box-shadow:0 0 0 1px rgba(73,218,164,.12) inset}.usage-icon{font-size:24px}.usage-card span:last-child{display:flex;flex-direction:column;gap:4px}.usage-card small,.show-all-check small{display:block;color:var(--muted,#8ba0ad);font-weight:400;line-height:1.35}.show-all-check{margin:14px 0;padding:12px;border-radius:12px;background:rgba(255,255,255,.025)}
.academy-path{display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:center;gap:14px;padding:18px;margin:0 0 18px;border:1px solid var(--border,#263544);border-radius:18px;background:rgba(255,255,255,.02)}.academy-path div{display:flex;flex-direction:column}.academy-path span{font-size:12px;color:var(--muted,#8ba0ad)}.academy-path i{opacity:.4}.academy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}.academy-card{padding:20px;border:1px solid var(--border,#263544);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015))}.academy-card-head{display:flex;gap:12px;align-items:center}.academy-card-head>span{font-size:28px}.academy-card h2{margin:2px 0}.academy-card p{color:var(--muted,#a7b5bd);line-height:1.6}.academy-formula{padding:12px 14px;margin:14px 0;border-left:3px solid #49daa4;background:rgba(73,218,164,.07);border-radius:10px}.academy-formula small{display:block;font-size:10px;letter-spacing:.08em;opacity:.65}.academy-formula b{display:block;margin-top:4px}.academy-card details{border-top:1px solid var(--border,#263544);padding:11px 0}.academy-card summary{font-weight:700}.academy-card ol{padding-left:20px}.academy-card li{margin:6px 0;color:var(--muted,#a7b5bd)}.academy-glossary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.academy-glossary p{margin:0;padding:10px;border-radius:10px;background:rgba(255,255,255,.025)}
@media(max-width:900px){.usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.academy-grid{grid-template-columns:1fr}.academy-path{grid-template-columns:1fr}.academy-path i{transform:rotate(90deg);justify-self:center}.academy-glossary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.usage-grid{grid-template-columns:1fr}.academy-glossary{grid-template-columns:1fr}.academy-card{padding:15px}.academy-path{padding:14px}.profile-settings-link small{display:none}}

/* DIENGFLOW V5.3 — visual intelligence + brand refinement */
:root{
  --df-bg:#041019;--df-bg-2:#061722;--df-panel:#081923;--df-panel-2:#0b2028;
  --df-line:#1d4250;--df-line-soft:#16333d;--df-text:#edf9f6;--df-muted:#8ba6a8;
  --df-green:#4af28b;--df-cyan:#35cce7;--df-lime:#9af55a;--df-amber:#f6be57;
}
html,:root{background:var(--df-bg);color:var(--df-text)}
body{background:
  radial-gradient(circle at 82% 4%,rgba(53,204,231,.105),transparent 27%),
  radial-gradient(circle at 12% 18%,rgba(74,242,139,.075),transparent 24%),
  linear-gradient(rgba(61,143,160,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(61,143,160,.035) 1px,transparent 1px),
  linear-gradient(180deg,#041019 0%,#031017 60%,#020b10 100%);
  background-size:auto,auto,44px 44px,44px 44px,auto;background-attachment:fixed}
.topbar{background:linear-gradient(90deg,rgba(3,15,22,.97),rgba(5,29,31,.95));border-bottom:1px solid #1d4a52;box-shadow:0 12px 34px rgba(0,0,0,.35)}
#sidebar{background:linear-gradient(180deg,rgba(4,18,25,.98),rgba(3,13,19,.99));border-right:1px solid #143843}
nav button,.subtle-btn{color:#8ea6a8}nav button:hover,nav button.active,.subtle-btn:hover,.subtle-btn.active{background:linear-gradient(90deg,rgba(37,95,84,.45),rgba(24,67,78,.35));color:#effffb;box-shadow:inset 3px 0 0 var(--df-cyan)}
.coach-btn,.cta{background:linear-gradient(90deg,var(--df-green),var(--df-cyan));color:#031215;box-shadow:0 7px 24px rgba(53,204,231,.12)}
.coach-btn:hover,.cta:hover{filter:brightness(1.06)}
.panel,.tool-card,.metric,.metric-card{background:linear-gradient(145deg,rgba(8,26,35,.96),rgba(6,21,27,.98));border-color:#1a3e49;box-shadow:0 16px 42px rgba(0,0,0,.12)}
.tool-card:hover{background:linear-gradient(145deg,rgba(10,35,42,.98),rgba(7,24,31,.98));border-color:#2b7280;box-shadow:0 14px 36px rgba(22,105,118,.13)}
input,textarea,select{background:#061820;border-color:#28505c;color:#effdfa}input:focus,textarea:focus,select:focus{border-color:var(--df-cyan);box-shadow:0 0 0 3px rgba(53,204,231,.12)}
.pill{border-color:#2e6873;background:rgba(6,35,41,.9);color:#9cebd9}
.brand-mark{border-color:#28616a;background:linear-gradient(145deg,#082932,#06161f)}.brand-mark img{width:29px;height:29px;display:block}.brand b{color:#f6fffd}.brand small{color:#79d6c1}
.profile-switch-wrap{border-color:#275261;background:rgba(6,27,36,.92);box-shadow:inset 0 0 0 1px rgba(74,242,139,.03)}.profile-switch-wrap select{background:#09232d;border:1px solid #21505b;color:#f2fffc;font-weight:750}

.hero-v53{position:relative;min-height:390px;border-color:#2b6671;background:
 linear-gradient(120deg,rgba(8,48,44,.88),rgba(5,28,39,.93) 56%,rgba(4,18,27,.96)),
 radial-gradient(circle at 75% 50%,rgba(53,204,231,.13),transparent 28%);box-shadow:0 25px 80px rgba(0,0,0,.34),inset 0 0 80px rgba(74,242,139,.025)}
.hero-v53:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 48%,rgba(53,204,231,.04) 48% 49%,transparent 49% 100%)}
.hero-copy{position:relative;z-index:2;max-width:660px}.hero-flowline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px;color:#b0c6c6;font-size:12px}.hero-flowline span{padding:6px 10px;border:1px solid #24505b;border-radius:99px;background:#061b24}.hero-flowline i{font-style:normal;color:var(--df-green)}
.hero-brand-visual{position:relative;z-index:2;min-width:330px;display:grid;justify-items:center;gap:17px}.hero-orbit{width:235px;height:235px;border:1px solid rgba(65,205,206,.38);border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:0 0 0 34px rgba(53,204,231,.025),0 0 0 68px rgba(74,242,139,.018)}.hero-orbit:before,.hero-orbit:after{content:'';position:absolute;inset:24px;border:1px dashed rgba(74,242,139,.25);border-radius:50%}.hero-orbit:after{inset:65px;border-style:solid;border-color:rgba(53,204,231,.2)}
.supply-cube{width:105px;height:105px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,#12383a,#09242d);border:1px solid #37716f;box-shadow:0 18px 35px rgba(0,0,0,.3),inset 0 0 25px rgba(74,242,139,.07)}.supply-cube span{font-size:62px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.orbit-node{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#071c24;border:1px solid #2d6c75;box-shadow:0 8px 22px rgba(0,0,0,.25)}.orbit-node.n1{left:3px;top:47px}.orbit-node.n2{right:0;top:59px}.orbit-node.n3{bottom:7px;left:96px}
.hero-brand-lockup{display:flex;align-items:center;gap:12px;text-align:left}.hero-brand-lockup img{width:58px;height:58px}.hero-brand-lockup strong{display:block;font-size:28px;letter-spacing:.08em}.hero-brand-lockup small{display:block;margin-top:4px;color:#77d5c4;letter-spacing:.12em;font-size:8px}.hero-brand-visual>em{font-style:normal;letter-spacing:.19em;font-size:9px;color:#6e9aa0}

.dashboard-brand-strip{display:grid;grid-template-columns:1fr auto 82px;gap:18px;align-items:center;margin-bottom:20px;padding:16px 18px;border:1px solid #1d5059;border-radius:18px;background:linear-gradient(110deg,rgba(8,45,41,.85),rgba(6,29,39,.92));overflow:hidden;position:relative}.dashboard-brand-strip:after{content:'SUPPLY • FLOW • VISIBILITY • DECISION';position:absolute;right:105px;bottom:8px;color:rgba(105,205,191,.18);font-size:8px;letter-spacing:.19em}.dashboard-brand-lockup{display:flex;align-items:center;gap:13px}.dashboard-brand-lockup img{width:48px;height:48px}.dashboard-brand-lockup small{display:block;color:#77ccbd;font-size:8px;letter-spacing:.14em}.dashboard-brand-lockup b{display:block;margin-top:4px;font-size:17px}.dashboard-brand-mode{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid #285a63;border-radius:12px;background:rgba(5,25,33,.65)}.dashboard-brand-mode>span{font-size:25px}.dashboard-brand-mode small{display:block;color:#7d9fa2;font-size:8px;letter-spacing:.1em}.dashboard-brand-mode b{display:block}.dashboard-brand-box{font-size:48px;filter:drop-shadow(0 10px 13px rgba(0,0,0,.25))}
.dashboard-visual-grid{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:14px;margin-top:14px}.insight-chart,.graph-guide-card{min-height:310px}.chart-context-badge{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#8bdccf;border:1px solid #255a63;border-radius:99px;padding:5px 8px}.dash-mini-svg{width:100%;height:150px;overflow:visible}.dash-mini-svg line{stroke:#284953;stroke-width:1}.dash-mini-svg polyline{fill:none;stroke:var(--df-cyan);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(53,204,231,.25))}.dash-mini-svg circle{fill:var(--df-green);stroke:#092029;stroke-width:3}.dash-mini-svg text{fill:#76969b;font-size:10px}.dash-mini-bars{display:grid;gap:10px;padding:8px 0}.dash-mini-bars>div>span{display:flex;justify-content:space-between;gap:12px;font-size:11px}.dash-mini-bars em{font-style:normal;color:#8ab0b1}.dash-mini-bars i{height:8px;display:block;margin-top:5px;background:#0c2630;border-radius:99px;overflow:hidden}.dash-mini-bars u{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--df-green),var(--df-cyan));text-decoration:none}.dash-chart-empty{height:145px;border:1px dashed #28505a;border-radius:13px;display:grid;place-items:center;align-content:center;text-align:center;color:#7b9b9d;padding:18px}.dash-chart-empty b{color:#b6cfcd}.dash-chart-empty span{font-size:11px;margin-top:4px}.graph-reading{margin-top:8px;padding:11px 12px;border-left:3px solid var(--df-cyan);background:rgba(8,39,45,.55);border-radius:8px}.graph-reading b{font-size:11px;color:#9cf0de}.graph-reading p{margin:4px 0 0;color:#93acad;font-size:11px}.graph-guide-card small{color:#6dd6c6;letter-spacing:.12em}.graph-guide-card h2{margin:6px 0 8px}.graph-guide-card>p{color:#91aaac}.graph-guide-steps{display:grid;gap:8px;margin-top:17px}.graph-guide-steps span{display:flex;align-items:center;gap:9px;padding:8px 9px;background:#071a22;border:1px solid #1e414b;border-radius:9px;font-size:11px;color:#afc4c5}.graph-guide-steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--df-green),var(--df-cyan));color:#041417;font-size:10px}
.result-chart-card{border-color:#245762;background:linear-gradient(145deg,#071923,#06141b)}.chart-axis-help{border-left:3px solid var(--df-cyan)}.chart-explanation{border-left:3px solid var(--df-green)}.chart-professional-note{border-left:3px solid var(--df-amber)}

/* Responsive: switch to mobile navigation earlier, including phones requesting a desktop-like viewport */
@media(max-width:1100px){
  .shell{grid-template-columns:1fr}.mobile-only{display:block}#sidebar{display:none;position:fixed;left:0;top:66px;bottom:72px;width:min(320px,88vw);height:auto;z-index:70;box-shadow:20px 0 60px rgba(0,0,0,.5)}#sidebar.open{display:flex}.mobile-bottom-nav{display:grid!important}
  main{padding-bottom:92px}.hero-v53{min-height:auto}.hero-brand-visual{min-width:270px}.dashboard-visual-grid{grid-template-columns:1fr 1fr}.graph-guide-card{grid-column:1/-1;min-height:auto}.dashboard-brand-strip{grid-template-columns:1fr auto}.dashboard-brand-box{display:none}
}
@media(max-width:760px){
  .topbar{height:64px}.brand-copy small{display:none}.brand{max-width:none}.profile-switch-wrap span{display:none}.profile-switch-wrap select{min-width:105px}.search-tools{display:none}.save-state{display:none}.account-btn{max-width:88px}.hero-v53{padding:24px 19px;display:grid;gap:25px}.hero-copy{max-width:none}.hero-v53 h1{font-size:42px}.hero-brand-visual{min-width:0}.hero-orbit{width:180px;height:180px}.supply-cube{width:82px;height:82px}.supply-cube span{font-size:48px}.orbit-node{width:36px;height:36px}.orbit-node.n3{left:72px}.hero-brand-lockup img{width:48px;height:48px}.hero-brand-lockup strong{font-size:22px}.dashboard-brand-strip{grid-template-columns:1fr}.dashboard-brand-mode{justify-self:start}.dashboard-brand-strip:after{display:none}.dashboard-visual-grid{grid-template-columns:1fr}.graph-guide-card{grid-column:auto}.insight-chart,.graph-guide-card{min-height:auto}.dashboard-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.dashboard-quick-grid button{min-width:0}.dashboard-profile-head{margin-top:8px}
}
@media(max-width:430px){.profile-switch-wrap select{min-width:92px;font-size:10px}.hero-v53 h1{font-size:36px}.hero-flowline{gap:5px}.hero-flowline span{font-size:10px;padding:5px 7px}.hero-brand-lockup strong{font-size:19px}.dashboard-quick-grid{grid-template-columns:1fr 1fr}.dashboard-brand-lockup b{font-size:14px}.dashboard-brand-lockup small{font-size:7px}}


/* DIENGFLOW V5.4 — cockpit dashboard inspired by the approved reference */
main{width:min(1540px,100%);padding:18px 20px 36px}
.shell{grid-template-columns:220px minmax(0,1fr)}
#sidebar{padding:12px 10px 16px}
#mainNav{gap:2px}
#mainNav button,.subtle-btn{padding:8px 10px;border-radius:9px;font-size:12px}
.nav-group-label{padding:10px 10px 4px;color:#50d980;font-weight:900;font-size:8px;letter-spacing:.13em}
.nav-group-label.profile-hidden{display:none}
.side-bottom{gap:3px}
.coach-btn{padding:10px 11px}
.topbar{padding:0 18px;height:64px}
.shell{min-height:calc(100vh - 64px)}
#sidebar{top:64px;height:calc(100vh - 64px)}
.brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:10px}
.brand-mark img{width:25px;height:25px}
.brand b{font-size:17px}
.brand small{font-size:7px}
.top-actions{flex:1;justify-content:flex-end}
.top-search{height:38px;width:min(370px,32vw);margin-right:auto;margin-left:34px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #285766;border-radius:13px;background:#061a25;color:#9ab6bc;text-align:left}
.top-search b{font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-search kbd{border:1px solid #365a64;border-radius:6px;padding:2px 6px;font-size:9px;color:#7598a0;background:#08212b}
.profile-switch-wrap{display:flex;align-items:center;gap:7px;min-height:38px;padding:3px 5px 3px 10px;border:1px solid #275261;border-radius:12px}
.profile-switch-wrap #profileLabel{font-size:11px;font-weight:800;white-space:nowrap}
.profile-switch-wrap select{width:112px;padding:6px 24px 6px 9px;border-radius:9px;font-size:11px}
.save-state{display:none}

/* Hero */
.df54-hero{position:relative;min-height:255px;border:1px solid #246077;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:minmax(430px,.9fr) 1.25fr;align-items:stretch;background:#061722;box-shadow:0 18px 55px rgba(0,0,0,.26)}
.df54-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,18,28,.98) 0%,rgba(4,27,39,.93) 34%,rgba(3,19,29,.28) 67%,rgba(2,13,21,.08) 100%),url('/diengflow-hero-supply.webp') right center/auto 100% no-repeat}
.df54-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(67,189,211,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(67,189,211,.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.df54-hero-copy{position:relative;z-index:2;padding:34px 38px;align-self:center}
.df54-kicker{display:inline-flex;border:1px solid #2a6975;border-radius:99px;padding:5px 10px;color:#8de6d7;font-size:9px;letter-spacing:.08em;background:rgba(4,29,38,.74)}
.df54-hero h1{font-size:38px;line-height:1.03;letter-spacing:-.035em;margin:13px 0 10px;max-width:580px}.df54-hero h1 span{color:#42ef7f}
.df54-hero p{max-width:560px;margin:0;color:#b1c7c9;font-size:14px}
.df54-hero-actions{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}.df54-hero-actions button{padding:10px 15px}
.df54-flow{display:flex;gap:7px;align-items:center;margin-top:16px;color:#83a3a8;font-size:10px}.df54-flow b{font-weight:700}.df54-flow i{font-style:normal;color:#56dc9b}
.df54-hero-brand{position:relative;z-index:2;align-self:center;justify-self:end;margin-right:36px;display:grid;justify-items:center;text-align:center;max-width:260px;text-shadow:0 2px 20px #001}
.df54-hero-brand img{width:66px;height:66px;filter:drop-shadow(0 0 16px rgba(74,242,139,.25))}
.df54-hero-brand strong{font-size:28px;letter-spacing:.07em;margin-top:7px}.df54-hero-brand small{color:#58f384;font-size:8px;letter-spacing:.12em}.df54-hero-brand em{font-style:normal;color:#7ce2e8;font-size:11px;margin-top:7px}

/* Metrics */
.df54-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
.df54-metric{min-height:84px;border:1px solid #1d4654;border-radius:13px;background:linear-gradient(145deg,#071d28,#061720);color:#edf9f6;display:flex;gap:13px;align-items:center;text-align:left;padding:14px;box-shadow:0 12px 34px rgba(0,0,0,.12)}
.df54-metric:hover{border-color:#2d7484;background:#092531}.df54-metric>span{font-size:27px}.df54-metric small{display:block;color:#829fa4;font-size:9px;text-transform:uppercase;letter-spacing:.06em}.df54-metric b{display:block;font-size:24px;margin-top:3px}

/* Dashboard cockpit */
.df54-main-grid{display:grid;grid-template-columns:1.1fr 1.08fr .9fr .9fr;gap:10px;align-items:stretch}
.df54-main-grid>.panel{padding:16px;border-radius:14px;min-height:330px}
.dash-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.dash-section-title small{color:#55d9c3;font-size:8px;letter-spacing:.12em}.dash-section-title h2{font-size:16px;margin:3px 0 0}
.df54-activity-list{display:grid;gap:7px;margin-top:13px}.df54-activity-list button{display:grid;grid-template-columns:55px 1fr auto;gap:8px;align-items:center;padding:8px 9px;border:1px solid #183c48;border-radius:9px;background:#071821;color:#d7e9e8;text-align:left}.df54-activity-list .tag{font-size:9px;font-weight:850;color:#52dffd}.df54-activity-list b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.df54-activity-list small{font-size:9px;color:#78969b}
.df54-objective{width:100%;margin-top:11px;padding:10px;border:1px solid #24535c;border-radius:10px;background:linear-gradient(90deg,rgba(15,60,55,.45),rgba(8,31,41,.55));color:#eaf8f5;display:flex;gap:10px;text-align:left}.df54-objective>span{font-size:22px}.df54-objective small{display:block;color:#61d6bd;font-size:8px}.df54-objective b{font-size:11px}.df54-objective p{font-size:9px;margin:2px 0 0;color:#8eaaad}
.df54-chart-card{overflow:hidden}.df54-legend{display:flex;gap:12px;font-size:9px;margin:10px 0 2px}.df54-legend .poh{color:#54f28a}.df54-legend .gross{color:#ff706c}.df54-legend .receipt{color:#39bdf0}
.df54-mrp-svg{width:100%;height:175px;overflow:visible}.df54-mrp-svg line{stroke:#294650}.df54-mrp-svg rect{fill:#1678a2;opacity:.55}.df54-mrp-svg .poh{fill:none;stroke:#50f18c;stroke-width:3}.df54-mrp-svg .gross{fill:none;stroke:#ff6a65;stroke-width:3}.df54-mrp-svg text{fill:#78969c;font-size:9px}
.df54-rings{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:16px 0}.df54-ring{text-align:center}.df54-ring>div{width:76px;height:76px;margin:0 auto 7px;border-radius:50%;padding:6px;background:conic-gradient(#45ed7d 0 72%,#17323c 72%);display:grid;place-items:center}.df54-ring>div:before{content:"";grid-area:1/1;width:61px;height:61px;border-radius:50%;background:#071923}.df54-ring b{grid-area:1/1;z-index:1;font-size:16px}.df54-ring strong{display:block;font-size:10px}.df54-ring small{display:block;color:#7d999e;font-size:8px}
.df54-coach{border-color:#245c68!important;background:linear-gradient(160deg,rgba(5,30,39,.98),rgba(5,21,28,.98))!important}.df54-coach-head{display:flex;gap:9px;align-items:center}.df54-coach-head img{width:37px;height:37px}.df54-coach-head small{color:#51ef83;font-size:8px}.df54-coach-head h2{font-size:16px;margin:2px 0}.df54-coach-intro{font-size:10px;color:#9fb7b9}.df54-coach .coach-note{font-size:10px;padding:10px;margin:10px 0}.df54-coach .coach-note p{font-size:10px}.df54-coach .coach-note ul{padding-left:15px}.df54-empty-coach{padding:18px 2px;color:#98afb1}.df54-empty-coach p{font-size:10px}
.df54-empty-visual{min-height:190px;display:grid;place-items:center;align-content:center;text-align:center;border:1px dashed #25505c;border-radius:12px;margin-top:12px;padding:18px;color:#86a0a4}.df54-empty-visual>div{font-size:33px}.df54-empty-visual b{color:#d8e9e8;font-size:11px}.df54-empty-visual span{font-size:9px;max-width:250px}.df54-empty-visual.compact{min-height:120px}

/* Quick actions */
.df54-quick{margin-top:10px;padding:15px}.df54-quick>div:last-child{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin-top:10px}.df54-quick>div:last-child button{min-height:68px;border:1px solid #204956;border-radius:10px;background:#0a2230;color:#dff4f1;display:grid;place-items:center;gap:3px;padding:8px}.df54-quick button:hover{border-color:#3b8390;background:#0c2b39}.df54-quick button span{font-size:22px}.df54-quick button b{font-size:9px}
.df54-lower-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px}.df54-lower-card{padding:16px}.df54-flow-stages{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px;margin:25px 0}.df54-flow-stages span{text-align:center;padding:13px 8px;border-radius:11px;background:#081e29;border:1px solid #214b58}.df54-flow-stages b{display:block;font-size:21px}.df54-flow-stages small{color:#80a1a6;font-size:8px}.df54-flow-stages i{font-style:normal;color:#45e57d}
.df54-cap-bars{display:grid;gap:14px;margin:20px 0}.df54-cap-bars span{display:flex;justify-content:space-between;font-size:10px}.df54-cap-bars i{height:13px;background:#0b2632;border-radius:99px;overflow:hidden;display:block;margin-top:5px}.df54-cap-bars u{display:block;height:100%;background:linear-gradient(90deg,#168cff,#23b9e6);border-radius:99px;text-decoration:none}.df54-cap-bars u.capacity{background:linear-gradient(90deg,#31d56a,#5ff59b)}
.df54-report-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.df54-report-actions button{border:1px solid #244b57;border-radius:10px;background:#08202b;color:#d8eceb;padding:12px 8px;font-size:10px}
.graph-reading{padding:9px 10px}.graph-reading b{font-size:10px}.graph-reading p{font-size:9px;line-height:1.45}
.dashboard-visual-grid{margin-top:10px}.dashboard-visual-grid .panel{padding:16px}.insight-chart,.graph-guide-card{min-height:280px}

/* Make profile switch visible and compact like the reference */
.profile-switch-wrap{order:2}.top-search{order:1}.search-tools{display:flex}.account-btn{order:5}.icon-btn{order:4}.profile-switch-wrap+button{order:3}

/* Result graph polish */
.result-chart-card{box-shadow:0 18px 55px rgba(0,0,0,.18)}.result-chart-card svg{filter:drop-shadow(0 8px 14px rgba(0,0,0,.14))}
.chart-axis-help,.chart-explanation,.chart-professional-note{background:#071b24;border-radius:10px;padding:12px 14px}

/* Desktop density */
@media(min-width:1250px){
  .dashboard-visual-grid{grid-template-columns:1.15fr 1fr .8fr}
}
@media(max-width:1250px){
  .top-search{display:none}
  .df54-main-grid{grid-template-columns:1fr 1fr}.df54-coach{grid-column:2}.df54-metrics{grid-template-columns:repeat(3,1fr)}
  .df54-quick>div:last-child{grid-template-columns:repeat(5,1fr)}.df54-lower-grid{grid-template-columns:1fr 1fr}.df54-lower-grid>:last-child{grid-column:1/-1}
}
@media(max-width:1100px){
  main{padding:14px 12px 94px}.df54-hero{grid-template-columns:1fr;min-height:330px}.df54-hero:before{background:linear-gradient(180deg,rgba(2,18,28,.95),rgba(2,18,28,.62)),url('/diengflow-hero-supply.webp') center bottom/cover no-repeat}.df54-hero-copy{padding:28px 24px 170px}.df54-hero-brand{position:absolute;right:15px;bottom:15px;margin:0;transform:scale(.83);transform-origin:right bottom}
  .nav-group-label{display:none}
}
@media(max-width:760px){
  .df54-hero{min-height:320px}.df54-hero h1{font-size:34px}.df54-hero-copy{padding:24px 18px 155px}.df54-hero p{font-size:12px}.df54-hero-brand strong{font-size:22px}.df54-hero-brand img{width:52px;height:52px}
  .df54-metrics{grid-template-columns:1fr 1fr;gap:7px}.df54-metric{min-height:70px;padding:10px}.df54-metric b{font-size:19px}
  .df54-main-grid{grid-template-columns:1fr}.df54-coach{grid-column:auto}.df54-main-grid>.panel{min-height:auto}
  .df54-quick>div:last-child{grid-template-columns:repeat(3,1fr)}.df54-lower-grid{grid-template-columns:1fr}.df54-lower-grid>:last-child{grid-column:auto}
  .profile-switch-wrap{max-width:145px}.profile-switch-wrap #profileLabel{display:none}.profile-switch-wrap select{width:105px}
}
@media(max-width:430px){
  .df54-hero h1{font-size:29px}.df54-hero-copy{padding-bottom:150px}.df54-flow{font-size:8px}.df54-hero-brand{transform:scale(.72)}
  .df54-metrics{grid-template-columns:1fr 1fr}.df54-quick>div:last-child{grid-template-columns:1fr 1fr 1fr}.df54-rings{grid-template-columns:1fr 1fr}
}


/* DIENGFLOW V5.5 — mobile-first repair, refined access screen, visible logout */
.hidden{display:none!important}
.top-logout{order:6;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 11px;border:1px solid rgba(255,115,115,.32);border-radius:11px;background:rgba(101,27,34,.18);color:#ffc0c0;font-weight:800;font-size:11px;white-space:nowrap}
.top-logout:hover{background:rgba(149,37,48,.25);border-color:rgba(255,135,135,.48)}

/* Access / registration */
.auth-gate{background:radial-gradient(circle at 16% 10%,rgba(53,204,231,.14),transparent 28%),radial-gradient(circle at 86% 82%,rgba(74,242,139,.10),transparent 28%),linear-gradient(135deg,#020c13,#041722 56%,#031017);padding:24px}
.auth-shell{width:min(1040px,100%);min-height:620px;display:grid;grid-template-columns:1.05fr .95fr;border:1px solid rgba(84,213,223,.22);border-radius:28px;overflow:hidden;background:#04151e;box-shadow:0 38px 110px rgba(0,0,0,.56)}
.auth-visual{position:relative;overflow:hidden;min-height:620px;background:linear-gradient(135deg,rgba(3,22,31,.80),rgba(3,18,24,.38)),url('/diengflow-hero-supply.webp') center/cover no-repeat;border-right:1px solid rgba(84,213,223,.16)}
.auth-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(2,11,17,.92) 100%)}
.auth-visual-grid{position:absolute;inset:0;background:linear-gradient(rgba(67,189,211,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(67,189,211,.055) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.auth-visual-content{position:absolute;z-index:2;left:36px;right:36px;bottom:34px}
.auth-lockup{display:flex;align-items:center;gap:11px;margin-bottom:22px}.auth-lockup img{width:46px;height:46px;filter:drop-shadow(0 0 18px rgba(74,242,139,.3))}.auth-lockup div{display:grid}.auth-lockup b{font-size:20px;letter-spacing:.07em}.auth-lockup small{color:#6ae8cd;font-size:8px;letter-spacing:.12em}
.auth-eyebrow{display:inline-block;color:#65e5da;font-size:9px;letter-spacing:.16em;font-weight:900;margin-bottom:10px}.auth-visual h2{max-width:490px;margin:0;font-size:43px;line-height:1.03;letter-spacing:-.04em}.auth-visual h2 span{color:#4af28b}.auth-visual p{max-width:470px;color:#b6cccf;font-size:13px;line-height:1.55;margin:14px 0 16px}.auth-benefits{display:flex;gap:7px;flex-wrap:wrap}.auth-benefits span{padding:7px 9px;border:1px solid rgba(102,217,226,.18);border-radius:999px;background:rgba(3,20,28,.72);font-size:9px;color:#d8efef}
.auth-card.auth-card-v55{width:auto;max-width:none;border:0;border-radius:0;background:linear-gradient(180deg,#071c26,#05151e);box-shadow:none;padding:38px 36px;display:flex;flex-direction:column;justify-content:center}.auth-card-v55 .auth-brand{margin-bottom:18px}.auth-card-v55 .auth-brand b{letter-spacing:.05em}.auth-card-v55 .auth-brand small{color:#6be2c9}.auth-mode-badge{align-self:flex-start;padding:5px 8px;border-radius:999px;border:1px solid rgba(74,242,139,.22);background:rgba(74,242,139,.06);color:#76f4a2;font-size:8px;letter-spacing:.13em;font-weight:900}.auth-card-v55 h1{font-size:30px;letter-spacing:-.03em;margin:10px 0 7px}.auth-card-v55>p{font-size:12px;line-height:1.55;color:#93adb2;margin-bottom:18px}.auth-card-v55 form label{font-size:11px;color:#bed0d2}.auth-card-v55 input,.auth-card-v55 select{min-height:45px;border-color:#204650;background:#061923}.auth-primary{min-height:46px;margin-top:3px}.auth-switch{padding:11px!important;font-size:11px}.auth-divider{display:flex;align-items:center;gap:9px;color:#68858b;font-size:9px;margin:2px 0 10px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#183944;flex:1}.guest-access{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;text-align:left;padding:11px 12px;border:1px solid #24525f;border-radius:13px;background:linear-gradient(90deg,rgba(20,66,75,.32),rgba(13,46,56,.22));color:#eaf8f7}.guest-access>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(53,204,231,.10)}.guest-access b{display:block;font-size:11px}.guest-access small{display:block;color:#7f9ea4;font-size:9px;margin-top:1px}.guest-access i{font-style:normal;color:#52e58c;font-size:19px}.guest-access:hover{border-color:#368091;background:linear-gradient(90deg,rgba(24,89,94,.38),rgba(17,59,69,.3))}.auth-trust{margin:12px 0 0!important;font-size:9px!important;color:#68858b!important}

/* Critical mobile fix: V5.4 desktop shell rule was overriding the earlier mobile grid. */
@media(max-width:1100px){
  .shell{display:block!important;grid-template-columns:1fr!important;width:100%!important;min-width:0!important}
  main,#view{grid-column:1/-1!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
  #sidebar{display:none;position:fixed;left:0;top:64px;bottom:68px;width:min(330px,88vw)!important;height:auto;z-index:90;overflow-y:auto}
  #sidebar.open{display:flex!important}
  .mobile-only{display:block}
  .mobile-bottom-nav{display:grid!important}
}
@media(max-width:760px){
  html,body,#app{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-bottom:72px}
  .topbar{height:60px!important;padding:0 9px!important;gap:6px;width:100%}
  .brand{gap:7px;min-width:0}.brand-mark{width:30px!important;height:30px!important;flex-basis:30px!important}.brand-copy b{font-size:13px}.brand-copy small{display:none!important}
  .top-actions{gap:5px;min-width:0;margin-left:auto}.profile-switch-wrap{padding:3px 4px!important;max-width:105px!important}.profile-switch-wrap select{width:94px!important;min-width:0!important;font-size:10px!important;padding:6px 20px 6px 6px!important}
  .account-btn{display:none!important}.top-logout{height:34px;padding:0 8px;font-size:10px}.top-logout span{display:inline}
  #sidebar{top:60px!important;bottom:68px!important}
  main{padding:12px 10px 84px!important}
  .page-head{margin:10px 0 12px!important}.page-head h1{font-size:25px!important}.page-head p{font-size:12px;line-height:1.5}
  .df54-hero{width:100%;min-width:0;min-height:0!important;border-radius:17px}.df54-hero-copy{padding:22px 17px 145px!important}.df54-hero h1{font-size:32px!important}.df54-hero p{font-size:12px!important;line-height:1.5}.df54-hero-brand{right:10px!important;bottom:9px!important}.df54-hero-brand strong{font-size:20px!important}
  .df54-metrics,.df54-main-grid,.df54-lower-grid,.dashboard-visual-grid{width:100%;min-width:0}.df54-metrics{grid-template-columns:1fr 1fr!important}.df54-main-grid{grid-template-columns:1fr!important}.df54-coach{grid-column:auto!important}.df54-quick>div:last-child{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .panel,.form-panel,.analysis-context,.knowledge-panel,.result-section,.result-chart-card{min-width:0;max-width:100%}
  .form-grid.two,.form-grid.three,.form-grid.four,.two-col{grid-template-columns:1fr!important}.explainer{position:static!important}
  .form-panel label{font-size:12px}.form-panel input,.form-panel textarea,.form-panel select{font-size:16px;min-width:0}
  .analysis-context{padding:14px!important}.analysis-context .form-grid.three{grid-template-columns:1fr!important}
  .knowledge-grid,.academy-grid,.usage-grid{grid-template-columns:1fr!important}
  .result-chart{min-width:520px!important}.chart-scroll,.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:640px}
  .auth-gate{padding:0;align-items:stretch}.auth-shell{min-height:100dvh;width:100%;border:0;border-radius:0;display:block;overflow:auto;background:#04151e}.auth-visual{min-height:245px;border:0;border-bottom:1px solid rgba(84,213,223,.16);background-position:center 43%}.auth-visual-content{left:20px;right:20px;bottom:18px}.auth-lockup{margin-bottom:9px}.auth-lockup img{width:34px;height:34px}.auth-lockup b{font-size:16px}.auth-lockup small{font-size:6px}.auth-eyebrow{font-size:7px;margin-bottom:6px}.auth-visual h2{font-size:29px;max-width:330px}.auth-visual p{font-size:10px;margin:8px 0 0;max-width:330px}.auth-benefits{display:none}.auth-card.auth-card-v55{padding:22px 18px 30px;min-height:calc(100dvh - 245px);justify-content:flex-start}.auth-card-v55 .auth-brand{display:none}.auth-card-v55 h1{font-size:26px}.auth-card-v55>p{font-size:11px;margin-bottom:14px}.auth-card-v55 form{gap:10px}.auth-card-v55 input,.auth-card-v55 select{font-size:16px}.guest-access{padding:11px}.auth-trust{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(max-width:420px){
  .brand-copy b{font-size:12px}.profile-switch-wrap{max-width:88px!important}.profile-switch-wrap select{width:84px!important;font-size:9px!important}.top-logout span{display:none}.top-logout{width:34px;padding:0}
  main{padding-left:8px!important;padding-right:8px!important}.df54-hero h1{font-size:29px!important}.df54-hero-copy{padding-left:15px!important;padding-right:15px!important}.df54-metrics{gap:6px}.df54-metric{padding:9px!important}.df54-metric small{font-size:8px}.df54-quick>div:last-child{grid-template-columns:1fr 1fr!important}
  .auth-visual{min-height:225px}.auth-card.auth-card-v55{min-height:calc(100dvh - 225px)}.auth-visual h2{font-size:27px}.auth-card-v55 h1{font-size:24px}
}

/* DIENGFLOW V5.6 — Daylight workspace: bright, calm, readable for work and study */
:root{
  --df-bg:#f4f9f8;--df-bg-soft:#edf7f5;--df-surface:#ffffff;--df-surface-2:#f7fbfa;
  --df-ink:#10242b;--df-muted:#62777d;--df-line:#d7e8e4;--df-green:#16b979;--df-cyan:#17a9c7;
  --df-navy:#12313a;--df-shadow:0 12px 34px rgba(27,78,76,.08)
}
html{background:var(--df-bg)!important;color:var(--df-ink)!important}
body{color:var(--df-ink)!important;background:
  radial-gradient(circle at 8% 4%,rgba(71,214,173,.14),transparent 27%),
  radial-gradient(circle at 92% 13%,rgba(80,190,224,.13),transparent 30%),
  radial-gradient(circle at 72% 92%,rgba(171,230,208,.18),transparent 26%),
  linear-gradient(rgba(31,129,126,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(31,129,126,.035) 1px,transparent 1px),
  #f4f9f8!important;background-size:auto,auto,auto,42px 42px,42px 42px,auto!important}
.topbar{background:rgba(255,255,255,.88)!important;border-bottom:1px solid var(--df-line)!important;box-shadow:0 7px 24px rgba(35,90,87,.055)!important}
.brand{color:var(--df-navy)!important}.brand small{color:#318c7d!important}.save-state{color:#70868b!important}
.icon-btn,.account-btn{background:#fff!important;color:#24444c!important;border-color:#d4e6e2!important;box-shadow:0 4px 12px rgba(32,83,80,.045)!important}
.profile-switch-wrap{background:#f4faf8!important;border-color:#d3e7e2!important;color:#24444c!important}.profile-switch-wrap select{background:#fff!important;color:#18373f!important;border-color:#d3e7e2!important}
.top-logout{background:#fff7f7!important;color:#a33b45!important;border-color:#f0ced1!important}
#sidebar{background:rgba(249,253,252,.94)!important;border-right:1px solid var(--df-line)!important;box-shadow:8px 0 28px rgba(35,90,87,.035)!important}
nav button,.subtle-btn{color:#60777c!important}nav button:hover,.subtle-btn:hover{background:#e9f7f3!important;color:#174b4f!important}nav button.active,.subtle-btn.active{background:linear-gradient(90deg,#dff8ed,#e6f7fb)!important;color:#0f6159!important;box-shadow:inset 3px 0 #1ec48a!important}
.nav-group-label{color:#5e9d90!important}.side-bottom{border-color:#dbe9e6!important}.coach-btn,.cta{background:linear-gradient(100deg,#38dc91,#42c7df)!important;color:#062a2b!important;box-shadow:0 8px 20px rgba(40,185,155,.15)!important}.secondary,.ghost{background:#fff!important;color:#27474e!important;border-color:#d4e7e3!important}.secondary:hover,.ghost:hover{background:#eef8f6!important}
main{color:var(--df-ink)!important}
.page-head h1,.section-head h2{color:#15353d!important}.page-head p,.muted,.fineprint{color:var(--df-muted)!important}.section-head small{color:#168b74!important}
.panel,.tool-card,.metric,.metric-card,.knowledge-panel,.academy-card,.usage-card,.scenario-card,.graph-guide-card,.result-chart-card,.history-row,.dashboard-brand-strip,.df54-metric,.df54-chart-card,.df54-lower-card,.df54-coach,.df54-main-grid>.panel,.df54-quick,.df54-objective{
  background:rgba(255,255,255,.91)!important;border-color:var(--df-line)!important;color:var(--df-ink)!important;box-shadow:var(--df-shadow)!important
}
.tool-card:hover{background:#fff!important;border-color:#83cfc0!important;box-shadow:0 14px 34px rgba(28,111,105,.12)!important}.tool-card p,.metric-card span,.history-row p,.history-row time,.academy-card p,.academy-card li,.usage-card small{color:var(--df-muted)!important}
input,textarea,select{background:#fff!important;color:#17373e!important;border-color:#ccdfdb!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}input::placeholder,textarea::placeholder{color:#91a4a8!important}input:focus,textarea:focus,select:focus{border-color:#48bfa8!important;box-shadow:0 0 0 3px rgba(55,194,164,.14)!important}.form-panel label{color:#3e5b61!important}.form-panel label small{color:#819499!important}
.analysis-context,.formula,.academy-formula,.graph-reading,.graph-guide-steps,.coach-note,.alert,.quiz-feedback,.empty,.df54-empty-visual,.df54-empty-coach{background:#f4faf8!important;color:#294a50!important;border-color:#d5e9e4!important}.formula,.academy-formula{color:#147960!important}.alert.warn{background:#fff9e9!important;border-color:#ecdba2!important}.alert.bad,.quiz-feedback.bad{background:#fff4f4!important;border-color:#efcaca!important}
.table-wrap{background:#fff!important;border-color:var(--df-line)!important;box-shadow:var(--df-shadow)!important}th{background:#eff8f6!important;color:#557277!important;border-bottom-color:#d9e8e5!important}td{color:#334f55!important;border-bottom-color:#e5efed!important}.accent{color:#12855f!important}.accent2{color:#177fa3!important}
.bar{background:#e4efec!important}.capacity-list>div{background:#fff!important;border-color:#dbe9e6!important}.capacity-list span small{color:#728b90!important}.stage-num,.history-icon{background:#e4f7ef!important;color:#14805f!important}
.quiz-card{background:linear-gradient(145deg,#ffffff,#f3faf8)!important;border-color:#d5e8e4!important;box-shadow:var(--df-shadow)!important}.quiz-options button{background:#fff!important;color:#213f46!important;border-color:#d7e7e4!important}.quiz-options button:hover:not(:disabled){background:#edf9f5!important;border-color:#79c9b9!important}.quiz-options button span{background:#e8f7f2!important;color:#167b64!important}
.modal{background:rgba(28,55,60,.24)!important;backdrop-filter:blur(8px)}.modal-card{background:#fff!important;color:#17363d!important;border-color:#d5e7e3!important;box-shadow:0 24px 70px rgba(31,72,72,.19)!important}.close{color:#6f858a!important}

/* V5.4 dashboard in a brighter work/study palette */
.df54-hero{border-color:#cfe7e2!important;background:
  linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(244,252,249,.92) 52%,rgba(231,248,249,.72) 100%),
  url('/diengflow-hero-supply.webp') right center/48% auto no-repeat!important;box-shadow:0 18px 48px rgba(35,99,94,.10)!important}
.df54-hero:after{background:linear-gradient(90deg,rgba(255,255,255,0) 48%,rgba(239,250,248,.28) 100%)!important}.df54-kicker{color:#12856d!important}.df54-hero h1{color:#15343c!important}.df54-hero h1 span{color:#16ad72!important}.df54-hero p{color:#557078!important}.df54-flow{color:#55777c!important}.df54-hero-brand{background:rgba(255,255,255,.78)!important;border-color:#d0e8e3!important;box-shadow:0 14px 38px rgba(30,102,94,.10)!important}.df54-hero-brand strong{color:#16353d!important}.df54-hero-brand small{color:#328c7f!important}.df54-metric small,.df54-chart-card small,.df54-lower-card small{color:#70898e!important}.df54-metric b,.df54-chart-card h3,.df54-lower-card h3,.df54-coach h3{color:#17363e!important}.df54-activity-list li{border-color:#e1ecea!important}.df54-objective{background:linear-gradient(135deg,#f0fbf6,#eef9fb)!important}.df54-coach{background:linear-gradient(155deg,#f2fbf7,#f3fbfc)!important}.df54-coach-intro{color:#60787e!important}.df54-ring{background:#fff!important;border-color:#d6e9e5!important}.df54-ring b{color:#183940!important}.df54-quick button{background:#f5faf9!important;border-color:#d8e8e5!important;color:#24444b!important}.df54-quick button:hover{background:#e9f8f4!important;border-color:#93d6c8!important}.df54-legend,.graph-reading{color:#55747a!important}
.df54-mrp-svg text,.dash-mini-svg text,.result-chart text{fill:#5c7479!important}.df54-mrp-svg .grid,.dash-mini-svg .grid,.result-chart .grid{stroke:#d9e8e5!important}
.dashboard-brand-mode{background:#eaf8f4!important;color:#17735f!important;border-color:#cce8e0!important}.dashboard-brand-lockup b{color:#16343b!important}.dashboard-brand-lockup small{color:#668187!important}

/* Access screens: welcoming daylight rather than a night cockpit */
.auth-gate{background:radial-gradient(circle at 12% 8%,rgba(68,213,173,.20),transparent 31%),radial-gradient(circle at 88% 90%,rgba(77,186,222,.16),transparent 30%),#eef8f6!important}
.auth-shell{background:#fff!important;border-color:#d1e7e2!important;box-shadow:0 30px 80px rgba(34,91,86,.16)!important}.auth-visual{border-right-color:rgba(255,255,255,.4)!important}.auth-card.auth-card-v55{background:linear-gradient(180deg,#ffffff,#f6fbfa)!important;color:#17363d!important}.auth-card-v55 .auth-brand b,.auth-card-v55 h1{color:#17363d!important}.auth-card-v55 .auth-brand small{color:#298b78!important}.auth-card-v55>p,.auth-trust{color:#6c8388!important}.auth-card-v55 form label{color:#456168!important}.auth-mode-badge{background:#e8f9f1!important;border-color:#cbeadd!important;color:#11765b!important}.auth-divider{color:#84999d!important}.auth-divider:before,.auth-divider:after{background:#dce9e7!important}.guest-access{background:linear-gradient(90deg,#effaf7,#eef8fb)!important;color:#1e4248!important;border-color:#d3e8e4!important}.guest-access>span{background:#e2f6f3!important}.guest-access small{color:#71898e!important}.guest-access:hover{background:linear-gradient(90deg,#e5f7f1,#e7f6fa)!important;border-color:#9ed7cd!important}

/* Bottom mobile navigation stays visible but airy */
.mobile-bottom-nav{background:rgba(255,255,255,.94)!important;border-top-color:#d8e8e5!important;box-shadow:0 -10px 30px rgba(31,76,74,.08)!important}.mobile-bottom-nav button{color:#5d777c!important}.mobile-bottom-nav button.active{color:#0e896b!important;background:#eaf8f4!important}

@media(max-width:760px){
  body{background:radial-gradient(circle at 5% 0,rgba(80,218,178,.15),transparent 26%),radial-gradient(circle at 100% 22%,rgba(80,190,222,.12),transparent 30%),#f4f9f8!important}
  .topbar{background:rgba(255,255,255,.95)!important}
  .df54-hero{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(238,250,247,.92)),url('/diengflow-hero-supply.webp') center bottom/cover no-repeat!important}
  .auth-shell{background:#fff!important}.auth-card.auth-card-v55{background:#fff!important}
}

/* DIENGFLOW V5.7 — Mobile UX / installed-app feel
   Frontend-only refinement: responsive shell, drawer, Academy, auth, touch targets, mobile dashboard. */
html,body{overscroll-behavior-y:none}
button,a,input,select,textarea{touch-action:manipulation}
button{-webkit-tap-highlight-color:transparent}
.sidebar-backdrop{display:none}

@media(max-width:1180px){
  html,body,#app{width:100%;max-width:100%;overflow-x:hidden}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom));background-attachment:fixed!important}
  .shell{display:block!important;grid-template-columns:1fr!important;width:100%!important;min-width:0!important}
  main,#view{grid-column:1/-1!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:18px 14px calc(92px + env(safe-area-inset-bottom))!important}

  /* App bar */
  .topbar{position:sticky!important;top:0!important;z-index:120!important;height:62px!important;padding:0 12px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px) saturate(1.25)!important;box-shadow:0 7px 24px rgba(33,82,80,.07)!important}
  .brand{min-width:0!important;max-width:210px!important}.brand-mark{width:34px!important;height:34px!important;flex-basis:34px!important}.brand-copy b{font-size:13px!important}.brand-copy small{display:none!important}
  .top-actions{margin-left:auto!important;gap:6px!important;min-width:0!important}.save-state,.search-tools{display:none!important}
  .profile-switch-wrap{max-width:126px!important;min-height:40px!important;padding:3px 5px!important}.profile-switch-wrap #profileLabel{display:none!important}.profile-switch-wrap select{width:116px!important;min-width:0!important;font-size:11px!important;padding:7px 24px 7px 8px!important}
  .icon-btn,.top-logout{min-width:40px!important;height:40px!important;border-radius:13px!important}.account-btn{height:40px!important}

  /* Real mobile/tablet drawer */
  #sidebar{display:none!important;position:fixed!important;left:0!important;top:62px!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;width:min(360px,86vw)!important;height:auto!important;z-index:150!important;padding:14px 11px 22px!important;overflow-y:auto!important;background:rgba(250,253,252,.985)!important;box-shadow:22px 0 60px rgba(18,55,58,.18)!important;border-right:1px solid #d8e8e5!important}
  #sidebar.open{display:flex!important;animation:dfDrawerIn .2s ease-out}
  #sidebar nav button,#sidebar .side-bottom button{min-height:45px!important;font-size:13px!important;padding:10px 12px!important}
  .sidebar-backdrop{position:fixed!important;inset:62px 0 calc(74px + env(safe-area-inset-bottom)) 0!important;z-index:140!important;border:0!important;background:rgba(19,47,52,.26)!important;backdrop-filter:blur(2px)!important}
  body.drawer-open .sidebar-backdrop{display:block!important}
  body.drawer-open{overflow:hidden!important}
  @keyframes dfDrawerIn{from{transform:translateX(-18px);opacity:.4}to{transform:none;opacity:1}}

  /* Bottom app navigation: always horizontal up to tablet / desktop-mode phone widths */
  .mobile-bottom-nav{position:fixed!important;z-index:160!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;flex-direction:unset!important;left:0!important;right:0!important;bottom:0!important;height:calc(72px + env(safe-area-inset-bottom))!important;padding:6px max(7px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(20px) saturate(1.25)!important;border-top:1px solid #d4e6e2!important;box-shadow:0 -10px 30px rgba(31,76,74,.10)!important}
  .mobile-bottom-nav button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:0!important;min-height:54px!important;padding:4px 2px!important;border:0!important;border-radius:14px!important;background:transparent!important;color:#60777c!important;text-align:center!important}
  .mobile-bottom-nav button b{font-size:20px!important;line-height:1!important}.mobile-bottom-nav button span{font-size:10px!important;font-weight:750!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
  .mobile-bottom-nav button.active{color:#0b896a!important;background:#e8f8f3!important}
  .mobile-only{display:block!important}

  /* Dashboard: readable, touchable, no tiny desktop cards */
  .df54-hero{min-height:0!important;border-radius:22px!important}.df54-hero-copy{padding:28px 24px 170px!important}.df54-hero h1{font-size:clamp(34px,7vw,52px)!important;line-height:1.02!important}.df54-hero p{font-size:14px!important;line-height:1.55!important}.df54-hero-actions button{min-height:46px!important;padding:11px 15px!important}
  .df54-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.df54-metric{min-height:112px!important;padding:15px!important}
  .df54-main-grid,.df54-lower-grid,.dashboard-visual-grid{grid-template-columns:1fr!important}.df54-main-grid>.panel,.df54-chart-card,.df54-lower-card,.df54-coach{min-height:auto!important}
  .df54-quick>div:last-child,.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.df54-quick button,.quick-actions button{min-height:68px!important;padding:10px!important}
  .graph-guide-steps{gap:7px!important}.graph-guide-steps>div{min-height:45px!important;display:flex!important;align-items:center!important}

  /* Academy becomes a genuine lesson feed */
  .academy-grid{grid-template-columns:1fr!important;gap:14px!important}.academy-card{padding:19px!important;border-radius:20px!important;box-shadow:0 8px 24px rgba(31,80,77,.06)!important}.academy-card-head>span{font-size:31px!important}.academy-card h2{font-size:22px!important}.academy-card p,.academy-card li{font-size:14px!important;line-height:1.6!important}.academy-formula{padding:13px 14px!important}.academy-card details{padding:13px 0!important}.academy-card summary{min-height:42px!important;display:flex!important;align-items:center!important;font-size:14px!important}.academy-card .actions-row{display:grid!important;grid-template-columns:1fr auto!important;gap:9px!important}.academy-card .actions-row button{min-height:46px!important;padding:10px 14px!important}
  .academy-path{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;overflow-x:auto!important;padding:13px!important}.academy-path i{display:none!important}.academy-path>div{min-width:120px!important;padding:10px 8px!important;border-radius:12px!important;background:#f2faf7!important}.academy-path b{font-size:12px!important}.academy-path span{font-size:10px!important}.academy-glossary{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Forms and module screens */
  .page-head h1{font-size:30px!important;line-height:1.08!important}.page-head p{font-size:14px!important}.panel,.form-panel,.analysis-context,.knowledge-panel{border-radius:19px!important;padding:18px!important}.form-grid.two,.form-grid.three,.form-grid.four,.two-col{grid-template-columns:1fr!important}.form-panel label{font-size:13px!important}.form-panel input,.form-panel textarea,.form-panel select{min-height:46px!important;font-size:16px!important;padding:11px 12px!important}.cta,.secondary,.ghost,.danger{min-height:45px!important}
  .knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.knowledge-panel{min-height:0!important}

  /* Auth: image above, form below even when phone browser reports a desktop-like width */
  .auth-gate{padding:0!important;align-items:stretch!important;overflow:auto!important;background:#f1f9f7!important}.auth-shell{width:100%!important;min-height:100dvh!important;border:0!important;border-radius:0!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important;overflow:visible!important;background:#fff!important;box-shadow:none!important}
  .auth-visual{min-height:260px!important;border:0!important;border-bottom:1px solid #d8e8e5!important;background-position:center 48%!important}.auth-visual-content{left:24px!important;right:24px!important;bottom:22px!important}.auth-lockup{margin-bottom:10px!important}.auth-lockup img{width:36px!important;height:36px!important}.auth-lockup b{font-size:16px!important}.auth-visual h2{font-size:32px!important;max-width:420px!important}.auth-visual p{font-size:12px!important;max-width:460px!important}.auth-benefits{display:none!important}
  .auth-card.auth-card-v55{width:min(620px,100%)!important;justify-self:center!important;min-height:0!important;padding:28px 22px calc(34px + env(safe-area-inset-bottom))!important;background:#fff!important}.auth-card-v55 .auth-brand{display:none!important}.auth-card-v55 h1{font-size:28px!important}.auth-card-v55>p{font-size:13px!important}.auth-card-v55 input,.auth-card-v55 select{min-height:48px!important;font-size:16px!important}.auth-primary{min-height:50px!important}.guest-access{min-height:58px!important;padding:12px!important}
}

@media(max-width:700px){
  main,#view{padding:12px 9px calc(88px + env(safe-area-inset-bottom))!important}
  .topbar{height:58px!important;padding:0 8px!important}.brand{max-width:48px!important}.brand-copy{display:none!important}.brand-mark{width:36px!important;height:36px!important;flex-basis:36px!important}.profile-switch-wrap{max-width:104px!important}.profile-switch-wrap select{width:98px!important;font-size:10px!important}
  #printPageBtn,#helpBtn{display:none!important}.account-btn{max-width:78px!important;padding:0 9px!important;font-size:11px!important}.top-logout{min-width:38px!important;padding:0 8px!important}.top-logout span{display:none!important}
  #sidebar{top:58px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;width:min(88vw,340px)!important}.sidebar-backdrop{inset:58px 0 calc(72px + env(safe-area-inset-bottom)) 0!important}
  .df54-hero{border-radius:18px!important}.df54-hero-copy{padding:23px 17px 145px!important}.df54-hero h1{font-size:34px!important}.df54-hero p{font-size:13px!important}.df54-hero-brand{transform:scale(.82)!important;transform-origin:right bottom!important}
  .df54-metrics{gap:7px!important}.df54-metric{min-height:100px!important;padding:12px!important}.df54-metric b{font-size:24px!important}
  .page-head h1{font-size:27px!important}.panel,.form-panel,.analysis-context,.knowledge-panel{padding:15px!important}
  .knowledge-grid{grid-template-columns:1fr!important}.academy-glossary{grid-template-columns:1fr!important}.academy-card{padding:16px!important}.academy-card h2{font-size:20px!important}.academy-card .actions-row{grid-template-columns:1fr!important}.academy-card .actions-row button{width:100%!important}.academy-path{display:flex!important;gap:8px!important;scroll-snap-type:x proximity}.academy-path>div{flex:0 0 72%!important;scroll-snap-align:start!important}
  .auth-visual{min-height:220px!important}.auth-visual-content{left:18px!important;right:18px!important;bottom:16px!important}.auth-lockup{display:none!important}.auth-eyebrow{font-size:8px!important}.auth-visual h2{font-size:28px!important}.auth-visual p{font-size:11px!important;margin:8px 0 0!important}.auth-card.auth-card-v55{padding:23px 17px calc(28px + env(safe-area-inset-bottom))!important}.auth-card-v55 h1{font-size:25px!important}
}

@media(display-mode:standalone){
  body{user-select:none;-webkit-user-select:none}
  input,textarea{user-select:text;-webkit-user-select:text}
  .topbar{padding-top:env(safe-area-inset-top)!important;height:calc(62px + env(safe-area-inset-top))!important}
  @media(max-width:700px){.topbar{height:calc(58px + env(safe-area-inset-top))!important}}
}

/* ========================================================================
   DIENGFLOW V5.8 — GLASS FLOW UI
   Visual-only refinement inspired by the approved mockup.
   Keeps Daylight readability, adds transparent neutral tech depth and
   a large DIENGFLOW symbol motif behind every workspace page.
   ======================================================================== */
:root{
  --df8-ink:#12323b;
  --df8-muted:#617d84;
  --df8-line:rgba(255,255,255,.72);
  --df8-glass:rgba(255,255,255,.52);
  --df8-glass-strong:rgba(255,255,255,.72);
  --df8-cyan:#25bddd;
  --df8-green:#20d486;
  --df8-teal:#0d897f;
  --df8-shadow:0 22px 65px rgba(23,92,101,.13),inset 0 1px 0 rgba(255,255,255,.82);
}
html{background:#e9f5f5!important}
body{
  position:relative;
  color:var(--df8-ink)!important;
  background:
    radial-gradient(circle at 12% 7%,rgba(56,211,168,.24),transparent 26%),
    radial-gradient(circle at 88% 12%,rgba(53,180,229,.24),transparent 30%),
    radial-gradient(circle at 72% 86%,rgba(91,214,193,.22),transparent 30%),
    linear-gradient(135deg,#edf7f6 0%,#e7f5f6 42%,#edf8f5 100%)!important;
  background-attachment:fixed!important;
}
body:before{
  content:"";
  position:fixed;
  z-index:-3;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 30%,rgba(255,255,255,.75) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 20%,rgba(21,174,198,.18) 0 4px,transparent 5px),
    radial-gradient(circle at 78% 72%,rgba(23,203,133,.17) 0 5px,transparent 6px),
    linear-gradient(112deg,transparent 0 18%,rgba(34,180,198,.09) 18.15% 18.35%,transparent 18.5% 100%),
    linear-gradient(28deg,transparent 0 74%,rgba(35,208,142,.08) 74.15% 74.35%,transparent 74.5% 100%);
  opacity:.95;
}
body:after{
  content:"";
  position:fixed;
  z-index:-2;
  pointer-events:none;
  width:min(64vw,720px);
  aspect-ratio:1;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  background:url('/diengflow-mark.svg') center/38% no-repeat,
             radial-gradient(circle,rgba(255,255,255,.46) 0 27%,rgba(74,213,202,.10) 28% 41%,transparent 42%),
             repeating-radial-gradient(circle,rgba(29,166,183,.09) 0 1px,transparent 2px 35px);
  opacity:.24;
  filter:drop-shadow(0 0 45px rgba(28,203,158,.25));
}
#app{isolation:isolate}
#view{position:relative}
#view:after{
  content:"";
  position:fixed;
  z-index:-1;
  right:4vw;
  top:22vh;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.8),rgba(66,196,219,.16) 35%,rgba(36,214,144,.08) 57%,transparent 70%);
  filter:blur(2px);
  opacity:.7;
  pointer-events:none;
}

/* Glass shell */
.topbar{
  background:rgba(244,252,252,.63)!important;
  border-bottom:1px solid rgba(255,255,255,.8)!important;
  box-shadow:0 12px 36px rgba(27,92,100,.10)!important;
  backdrop-filter:blur(22px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.35)!important;
}
.brand,.brand-copy b{color:#0c2f39!important}
.brand-mark{filter:drop-shadow(0 6px 14px rgba(10,155,135,.22))}
.icon-btn,.account-btn,.profile-switch-wrap,.top-search{
  background:rgba(255,255,255,.60)!important;
  border-color:rgba(255,255,255,.86)!important;
  box-shadow:0 8px 25px rgba(32,105,111,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:blur(15px)!important;
}
.profile-switch-wrap select{background:rgba(255,255,255,.60)!important}
#sidebar{
  background:rgba(247,253,252,.70)!important;
  border-right:1px solid rgba(255,255,255,.78)!important;
  box-shadow:14px 0 42px rgba(26,85,91,.07)!important;
  backdrop-filter:blur(24px) saturate(1.25)!important;
}
nav button.active,.subtle-btn.active{background:linear-gradient(90deg,rgba(44,222,153,.18),rgba(56,194,224,.15))!important;border:1px solid rgba(255,255,255,.66)!important;box-shadow:inset 3px 0 #18bd8c,0 8px 20px rgba(42,144,136,.07)!important}

/* Every content surface becomes translucent instead of plain white */
.panel,.tool-card,.metric,.metric-card,.knowledge-panel,.academy-card,.usage-card,.scenario-card,
.graph-guide-card,.result-chart-card,.history-row,.dashboard-brand-strip,.df54-metric,.df54-chart-card,
.df54-lower-card,.df54-coach,.df54-main-grid>.panel,.df54-quick,.df54-objective,.analysis-context,
.form-panel,.quiz-card,.table-wrap,.calculation-trace,.result-section{
  background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(245,252,251,.47))!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:var(--df8-shadow)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}
.tool-card:hover,.academy-card:hover{
  background:rgba(255,255,255,.79)!important;
  border-color:rgba(105,222,205,.70)!important;
  transform:translateY(-2px);
}
input,textarea,select{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(171,211,207,.72)!important;
  color:#173740!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 16px rgba(35,99,103,.04)!important;
}
input:focus,textarea:focus,select:focus{background:rgba(255,255,255,.90)!important;border-color:#48c7b3!important;box-shadow:0 0 0 4px rgba(43,203,171,.11)!important}
.analysis-context,.formula,.academy-formula,.graph-reading,.graph-guide-steps,.coach-note,.alert,.quiz-feedback,.empty,.df54-empty-visual,.df54-empty-coach{
  background:rgba(236,249,247,.58)!important;
  border-color:rgba(255,255,255,.76)!important;
}

/* Home hero: light glass + floating DIENGFLOW symbol, not a cardboard box */
.df54-hero{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 42%,rgba(64,220,187,.22),transparent 22%),
    radial-gradient(circle at 92% 15%,rgba(64,178,224,.20),transparent 24%),
    linear-gradient(135deg,rgba(255,255,255,.72),rgba(222,246,247,.45))!important;
  border:1px solid rgba(255,255,255,.86)!important;
  box-shadow:0 28px 75px rgba(26,103,112,.16),inset 0 1px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:blur(20px) saturate(1.24)!important;
}
.df54-hero:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(105deg,transparent 0 64%,rgba(255,255,255,.22) 64.2% 64.5%,transparent 64.7%),
    radial-gradient(circle at 81% 45%,transparent 0 72px,rgba(47,190,200,.13) 73px 74px,transparent 75px 107px,rgba(31,214,151,.11) 108px 109px,transparent 110px)!important;
  pointer-events:none!important;
}
.df54-hero:after{
  content:""!important;
  position:absolute!important;
  width:min(30vw,270px)!important;
  aspect-ratio:1!important;
  right:6%!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  background:url('/diengflow-mark.svg') center/60% no-repeat,
             radial-gradient(circle,rgba(255,255,255,.76),rgba(57,207,196,.15) 46%,transparent 68%)!important;
  border-radius:50%!important;
  filter:drop-shadow(0 17px 24px rgba(19,157,145,.22))!important;
  opacity:.96!important;
  pointer-events:none!important;
}
.df54-hero-copy{position:relative!important;z-index:3!important;max-width:66%!important}
.df54-hero-brand{display:none!important}
.df54-hero h1{color:#10313b!important;text-shadow:0 1px 0 rgba(255,255,255,.7)!important}
.df54-hero p,.df54-flow{color:#4d6c75!important}
.df54-kicker{background:rgba(255,255,255,.48)!important;border:1px solid rgba(255,255,255,.72)!important;padding:6px 11px!important;border-radius:999px!important;display:inline-flex!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}
.cta{background:linear-gradient(100deg,#26db8d,#24bfe1)!important;color:#07303a!important;border:1px solid rgba(255,255,255,.65)!important;box-shadow:0 12px 25px rgba(25,185,158,.18)!important}
.secondary,.ghost{background:rgba(255,255,255,.65)!important;border-color:rgba(255,255,255,.85)!important;box-shadow:0 8px 22px rgba(39,96,101,.07)!important}

/* Page titles float over the technology background */
.page-head,.section-head{position:relative;z-index:1}
.page-head .pill,.section-head .pill{background:rgba(13,93,98,.86)!important;color:#eaffff!important;border-color:rgba(255,255,255,.5)!important;box-shadow:0 7px 18px rgba(24,101,104,.12)!important}

/* Bottom nav: floating translucent app dock */
.mobile-bottom-nav{
  left:10px!important;right:10px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  height:calc(66px + env(safe-area-inset-bottom))!important;
  border:1px solid rgba(255,255,255,.80)!important;
  border-radius:24px!important;
  background:rgba(237,249,249,.66)!important;
  box-shadow:0 16px 44px rgba(24,80,88,.17),inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(24px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.35)!important;
}
.mobile-bottom-nav button.active{background:linear-gradient(135deg,rgba(35,220,145,.34),rgba(36,185,223,.28))!important;color:#075f5b!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}

/* Login / guest: same glass language, no giant blank white gap */
.auth-gate{
  background:
    radial-gradient(circle at 15% 8%,rgba(41,216,153,.24),transparent 27%),
    radial-gradient(circle at 88% 16%,rgba(47,177,226,.24),transparent 30%),
    radial-gradient(circle at 50% 78%,rgba(255,255,255,.72),transparent 45%),
    #e9f6f5!important;
}
.auth-gate:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;
  background:url('/diengflow-mark.svg') center 24%/300px no-repeat,repeating-radial-gradient(circle at 50% 32%,rgba(37,166,183,.14) 0 1px,transparent 2px 36px);
}
.auth-shell{
  background:rgba(255,255,255,.47)!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 30px 90px rgba(20,85,94,.16)!important;
  backdrop-filter:blur(24px) saturate(1.25)!important;
}
.auth-card.auth-card-v55{background:rgba(255,255,255,.60)!important}
.guest-access{background:rgba(239,249,249,.58)!important;border-color:rgba(255,255,255,.84)!important}

@media(max-width:1180px){
  #sidebar{background:rgba(247,253,252,.84)!important;backdrop-filter:blur(28px) saturate(1.25)!important}
  .sidebar-backdrop{background:rgba(27,70,76,.18)!important;backdrop-filter:blur(7px)!important}
}
@media(max-width:700px){
  body:after{width:520px;top:46%;opacity:.20}
  #view:after{display:none}
  main,#view{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  .df54-hero{min-height:390px!important}
  .df54-hero-copy{max-width:100%!important;padding:24px 18px 188px!important}
  .df54-hero:after{width:185px!important;right:50%!important;top:auto!important;bottom:8px!important;transform:translateX(50%)!important;background:url('/diengflow-mark.svg') center/61% no-repeat,radial-gradient(circle,rgba(255,255,255,.80),rgba(57,207,196,.17) 45%,transparent 70%)!important}
  .df54-hero:before{background:radial-gradient(circle at 50% 78%,transparent 0 65px,rgba(38,195,198,.13) 66px 67px,transparent 68px 92px,rgba(32,210,153,.11) 93px 94px,transparent 95px)!important}
  .panel,.tool-card,.academy-card,.form-panel,.analysis-context,.knowledge-panel{background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(242,251,250,.51))!important}
  .mobile-bottom-nav{left:7px!important;right:7px!important;bottom:max(6px,env(safe-area-inset-bottom))!important;border-radius:20px!important}
  .auth-gate{padding:12px 10px calc(18px + env(safe-area-inset-bottom))!important;align-items:flex-start!important}
  .auth-shell{width:100%!important;min-height:auto!important;margin-top:10px!important;border-radius:26px!important;overflow:hidden!important;display:block!important}
  .auth-visual{min-height:220px!important;background:linear-gradient(180deg,rgba(230,248,248,.10),rgba(10,54,64,.42)),url('/diengflow-hero-supply.webp') center/cover no-repeat!important}
  .auth-card.auth-card-v55{width:100%!important;padding:24px 18px 25px!important;background:rgba(255,255,255,.68)!important}
}
@media(max-width:430px){
  .df54-hero{min-height:375px!important}.df54-hero h1{font-size:31px!important}.df54-hero-copy{padding-bottom:175px!important}
  .df54-hero:after{width:165px!important}
}

/* ============================================================
   DIENGFLOW V5.9 — FLOW GLASS BACKGROUND
   Visual-only release: keep calculators, D1 and Auth untouched.
   ============================================================ */
:root{
  --df9-deep:#0b3440;
  --df9-ink:#123944;
  --df9-mint:#22d79a;
  --df9-cyan:#24bfe1;
  --df9-glass:rgba(255,255,255,.60);
  --df9-line:rgba(255,255,255,.80);
}
html{background:#dff1f2!important}
body{
  background:
    radial-gradient(circle at 9% 12%,rgba(32,215,154,.25),transparent 23%),
    radial-gradient(circle at 91% 16%,rgba(36,191,225,.27),transparent 27%),
    radial-gradient(circle at 20% 78%,rgba(67,214,204,.19),transparent 27%),
    radial-gradient(circle at 86% 82%,rgba(28,168,205,.17),transparent 26%),
    linear-gradient(135deg,#dff2f2 0%,#edf8f7 47%,#dceff1 100%)!important;
  background-attachment:fixed!important;
}
body:before{
  background:
    linear-gradient(117deg,transparent 0 14%,rgba(255,255,255,.38) 14.2% 14.6%,transparent 14.8% 100%),
    linear-gradient(31deg,transparent 0 78%,rgba(36,191,225,.13) 78.15% 78.35%,transparent 78.5% 100%),
    radial-gradient(circle at 8% 30%,rgba(255,255,255,.62) 0 5px,rgba(32,215,154,.20) 6px 12px,transparent 13px),
    radial-gradient(circle at 92% 37%,rgba(255,255,255,.60) 0 6px,rgba(36,191,225,.20) 7px 14px,transparent 15px),
    radial-gradient(circle at 13% 84%,rgba(255,255,255,.55) 0 4px,rgba(36,191,225,.18) 5px 11px,transparent 12px),
    radial-gradient(circle at 87% 72%,rgba(255,255,255,.55) 0 4px,rgba(32,215,154,.18) 5px 11px,transparent 12px)!important;
  opacity:1!important;
}
/* One restrained, fixed DIENGFLOW watermark across every app page. */
body:after{
  width:min(58vw,680px)!important;
  top:52%!important;
  background:url('/diengflow-mark.svg') center/48% no-repeat,
             radial-gradient(circle,rgba(255,255,255,.46) 0 22%,rgba(42,207,191,.13) 23% 35%,transparent 36%),
             repeating-radial-gradient(circle,rgba(22,154,178,.10) 0 1px,transparent 2px 38px)!important;
  opacity:.18!important;
  filter:drop-shadow(0 0 54px rgba(24,190,169,.25))!important;
}
#view:after{display:none!important}

/* Keep the real UI readable: glass, not white sheets. */
.panel,.tool-card,.metric,.metric-card,.knowledge-panel,.academy-card,.usage-card,.scenario-card,
.graph-guide-card,.result-chart-card,.history-row,.dashboard-brand-strip,.df54-metric,.df54-chart-card,
.df54-lower-card,.df54-coach,.df54-main-grid>.panel,.df54-quick,.df54-objective,.analysis-context,
.form-panel,.quiz-card,.table-wrap,.calculation-trace,.result-section{
  background:linear-gradient(145deg,rgba(255,255,255,.67),rgba(240,250,249,.43))!important;
  border-color:rgba(255,255,255,.83)!important;
  box-shadow:0 18px 48px rgba(27,92,101,.11),inset 0 1px 0 rgba(255,255,255,.88)!important;
  backdrop-filter:blur(20px) saturate(1.20)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.20)!important;
}

/* Home: preserve the current content and colors, but make it feel like the chosen glass app. */
.df54-hero{
  background:
    radial-gradient(circle at 81% 43%,rgba(37,213,169,.25),transparent 25%),
    radial-gradient(circle at 93% 13%,rgba(36,191,225,.23),transparent 27%),
    linear-gradient(135deg,rgba(244,253,252,.70),rgba(215,242,244,.47))!important;
  min-height:330px!important;
}
.df54-hero:after{opacity:.92!important}

/* Prevent desktop shell from covering page content: header stays at top. */
@media(min-width:1181px){
  .topbar{position:sticky!important;top:0!important;z-index:80!important}
  #sidebar{top:var(--topbar-h,72px)!important;height:calc(100dvh - var(--topbar-h,72px))!important}
}

/* Phone/tablet: richer background but calmer density. */
@media(max-width:700px){
  body{
    background:
      radial-gradient(circle at 7% 9%,rgba(32,215,154,.24),transparent 22%),
      radial-gradient(circle at 93% 14%,rgba(36,191,225,.25),transparent 25%),
      radial-gradient(circle at 18% 82%,rgba(69,211,201,.17),transparent 28%),
      linear-gradient(145deg,#dff1f1 0%,#eef8f7 48%,#dceef0 100%)!important;
  }
  body:after{width:430px!important;top:51%!important;opacity:.14!important}
  .df54-hero{min-height:390px!important}
  .panel,.tool-card,.academy-card,.form-panel,.analysis-context,.knowledge-panel{
    background:linear-gradient(145deg,rgba(255,255,255,.70),rgba(239,249,248,.48))!important;
  }
}

/* ============================================================
   DIENGFLOW V5.9.1 — REAL SITE VISUAL FIX
   Stronger Flow Glass background. No generated background image.
   ============================================================ */
:root{--df-flow-bg:#d7edef;--df-flow-glass:rgba(248,255,254,.56);--df-flow-edge:rgba(255,255,255,.86)}
html,body{min-height:100%;background-color:var(--df-flow-bg)!important}
body{
  background-image:
    radial-gradient(circle at 8% 10%,rgba(24,222,157,.34) 0,rgba(24,222,157,.14) 16%,transparent 34%),
    radial-gradient(circle at 92% 14%,rgba(26,185,230,.34) 0,rgba(26,185,230,.13) 18%,transparent 38%),
    radial-gradient(circle at 82% 84%,rgba(29,211,183,.23) 0,transparent 34%),
    radial-gradient(circle at 18% 78%,rgba(42,171,218,.20) 0,transparent 30%),
    linear-gradient(145deg,#d4ecee 0%,#edf8f7 42%,#d9eef0 100%)!important;
  background-attachment:fixed!important;
}
/* technology network drawn with CSS only */
body:before{
  content:""!important;position:fixed!important;inset:0!important;z-index:-3!important;pointer-events:none!important;
  background-image:
    linear-gradient(118deg,transparent 0 17%,rgba(255,255,255,.42) 17.08% 17.22%,transparent 17.34%),
    linear-gradient(31deg,transparent 0 74%,rgba(10,170,190,.13) 74.08% 74.22%,transparent 74.34%),
    linear-gradient(152deg,transparent 0 62%,rgba(25,208,154,.10) 62.08% 62.22%,transparent 62.34%),
    radial-gradient(circle at 10% 28%,rgba(255,255,255,.95) 0 4px,rgba(23,203,157,.42) 5px 9px,transparent 10px),
    radial-gradient(circle at 88% 24%,rgba(255,255,255,.95) 0 4px,rgba(25,181,224,.42) 5px 10px,transparent 11px),
    radial-gradient(circle at 24% 72%,rgba(255,255,255,.9) 0 3px,rgba(25,181,224,.34) 4px 8px,transparent 9px),
    radial-gradient(circle at 76% 67%,rgba(255,255,255,.9) 0 3px,rgba(23,203,157,.34) 4px 8px,transparent 9px)!important;
  opacity:1!important;
}
/* watermark is now a quiet right-side background element, never behind titles */
body:after{
  content:""!important;position:fixed!important;z-index:-2!important;pointer-events:none!important;
  width:min(42vw,560px)!important;aspect-ratio:1!important;left:auto!important;right:3vw!important;top:52%!important;
  transform:translateY(-50%)!important;
  background:url('/diengflow-mark.svg') center/45% no-repeat,
    repeating-radial-gradient(circle,rgba(16,157,180,.12) 0 1px,transparent 2px 42px)!important;
  opacity:.10!important;filter:drop-shadow(0 0 55px rgba(18,194,168,.22))!important;
}
#view:after{display:none!important}

/* noticeably translucent surfaces */
.panel,.tool-card,.metric,.metric-card,.knowledge-panel,.academy-card,.usage-card,.scenario-card,
.graph-guide-card,.result-chart-card,.history-row,.dashboard-brand-strip,.df54-metric,.df54-chart-card,
.df54-lower-card,.df54-coach,.df54-main-grid>.panel,.df54-quick,.df54-objective,.analysis-context,
.form-panel,.quiz-card,.table-wrap,.calculation-trace,.result-section{
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(232,249,247,.40))!important;
  border:1px solid var(--df-flow-edge)!important;
  box-shadow:0 18px 52px rgba(18,84,96,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(22px) saturate(1.28)!important;-webkit-backdrop-filter:blur(22px) saturate(1.28)!important;
}
/* hero: remove the accidental central watermark overlap and place brand visual on the right */
.df54-hero{position:relative!important;overflow:hidden!important;isolation:isolate!important;min-height:360px!important;
  background:
    radial-gradient(circle at 78% 48%,rgba(32,218,174,.30),transparent 25%),
    radial-gradient(circle at 94% 8%,rgba(31,184,229,.28),transparent 31%),
    linear-gradient(130deg,rgba(248,255,254,.73),rgba(213,243,244,.49))!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:0 24px 70px rgba(20,91,101,.13)!important;
}
.df54-hero-copy{position:relative!important;z-index:4!important;max-width:52%!important;padding-right:18px!important}
.df54-hero:before{z-index:1!important;opacity:.85!important}
.df54-hero:after{z-index:2!important;width:min(31vw,330px)!important;right:7%!important;left:auto!important;top:50%!important;
  transform:translateY(-50%)!important;opacity:.88!important;background:url('/diengflow-mark.svg') center/62% no-repeat,
  radial-gradient(circle,rgba(255,255,255,.72),rgba(31,206,190,.18) 45%,transparent 70%)!important}
.df54-hero h1{font-size:clamp(40px,4.1vw,66px)!important;line-height:.96!important;letter-spacing:-.045em!important}
.df54-hero h1 span{background:linear-gradient(95deg,#13b978,#17b8d8);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.df54-hero p{font-size:15px!important;line-height:1.55!important;max-width:560px!important}

.topbar{background:rgba(239,251,251,.70)!important;border-bottom:1px solid rgba(255,255,255,.92)!important;backdrop-filter:blur(26px) saturate(1.3)!important}
#sidebar{background:rgba(241,252,251,.67)!important;border-right:1px solid rgba(255,255,255,.88)!important;backdrop-filter:blur(26px) saturate(1.25)!important}

/* Auth keeps same palette; remove flat pale sheet feeling */
.auth-gate{background:
 radial-gradient(circle at 10% 12%,rgba(26,218,158,.28),transparent 30%),
 radial-gradient(circle at 90% 18%,rgba(30,184,229,.29),transparent 34%),
 linear-gradient(145deg,#d7edef,#edf8f7 48%,#d8edef)!important}
.auth-gate:before{opacity:.09!important;background:url('/diengflow-mark.svg') 86% 28%/360px no-repeat,repeating-radial-gradient(circle at 84% 30%,rgba(18,160,183,.15) 0 1px,transparent 2px 42px)!important}
.auth-shell{background:rgba(248,255,254,.55)!important;border-color:rgba(255,255,255,.9)!important;backdrop-filter:blur(26px) saturate(1.25)!important}
.auth-card.auth-card-v55{background:rgba(248,255,254,.66)!important}

@media(max-width:1180px){
  body:after{right:-110px!important;width:520px!important;opacity:.08!important}
  .df54-hero-copy{max-width:58%!important}
}
@media(max-width:700px){
  body:after{right:-180px!important;width:440px!important;top:48%!important;opacity:.07!important}
  .df54-hero{min-height:520px!important}
  .df54-hero-copy{max-width:100%!important;padding:26px 19px 220px!important}
  .df54-hero h1{font-size:40px!important;line-height:1!important}
  .df54-hero:after{width:210px!important;right:50%!important;top:auto!important;bottom:8px!important;transform:translateX(50%)!important;opacity:.90!important}
  .panel,.tool-card,.academy-card,.form-panel,.analysis-context,.knowledge-panel{background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(232,249,247,.42))!important}
}


/* DIENGFLOW V5.9.2 — Guest / Demo Access */
.profile-switch-wrap select:disabled{opacity:1;cursor:default;background:rgba(255,255,255,.72)!important;color:#16383e!important;font-weight:800}
.guest-demo-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px;padding:14px 16px;border:1px solid rgba(47,214,184,.34);border-radius:18px;background:linear-gradient(115deg,rgba(255,255,255,.72),rgba(218,255,246,.62),rgba(211,245,255,.58));box-shadow:0 12px 30px rgba(18,91,96,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.guest-demo-banner>div{display:grid;gap:4px;min-width:0}.guest-demo-banner b{font-size:14px;color:#14383f}.guest-demo-banner small{font-size:11px;line-height:1.45;color:#55777d;max-width:760px}.guest-demo-banner .pill{width:max-content}.guest-demo-banner .cta{white-space:nowrap;margin:0}
@media(max-width:720px){.guest-demo-banner{align-items:stretch;flex-direction:column;padding:12px}.guest-demo-banner .cta{width:100%}}

/* DIENGFLOW V6.0 — Decision Intelligence */
.planning-flow{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:10px 12px;border:1px solid rgba(31,180,177,.24);border-radius:18px;background:rgba(255,255,255,.48);backdrop-filter:blur(18px);overflow-x:auto}
.planning-flow button{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:8px 10px;border-radius:12px;color:#527277;white-space:nowrap;cursor:pointer}.planning-flow button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(20,171,157,.10);font-size:11px;font-weight:900}.planning-flow button b{font-size:12px}.planning-flow button.active{background:rgba(20,184,166,.13);color:#123f45}.planning-flow button.active span{background:#16b89f;color:white}.planning-flow i{font-style:normal;color:#83aaa9;font-size:13px}
.input-quality{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:11px 14px;border-radius:14px;font-size:12px}.input-quality b{white-space:nowrap}.input-quality.good{background:rgba(23,178,128,.09);border:1px solid rgba(23,178,128,.20);color:#24685a}.input-quality.warn{background:rgba(231,164,52,.11);border:1px solid rgba(231,164,52,.24);color:#72551f}
.decision-panel{margin:16px 0;border-radius:18px;padding:16px;border:1px solid rgba(31,180,177,.22);background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(225,249,246,.55));box-shadow:0 14px 36px rgba(18,84,96,.08)}.decision-panel.warn{border-color:rgba(230,164,52,.26)}.decision-panel.bad{border-color:rgba(218,92,92,.28)}.decision-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.decision-head>span{font-size:20px}.decision-head div{display:grid;gap:2px}.decision-head small,.decision-grid small{font-size:9px;font-weight:900;letter-spacing:.11em;color:#6d8b8e}.decision-head b{font-size:15px;color:#173f45}.decision-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px}.decision-grid>div{padding:12px;border-radius:14px;background:rgba(255,255,255,.48)}.decision-grid p,.decision-grid ul{margin:6px 0 0;font-size:12px;line-height:1.55;color:#47686d}.decision-grid ul{padding-left:17px}.decision-grid li+li{margin-top:5px}
@media(max-width:760px){.planning-flow{margin-inline:-2px}.planning-flow i{display:none}.decision-grid{grid-template-columns:1fr}.input-quality{align-items:flex-start;flex-direction:column;gap:3px}}

/* DIENGFLOW V6.1 — Decision Intelligence Complete */
.scenario-verdict{margin:14px 0;padding:14px 16px;border-radius:16px;border:1px solid rgba(31,180,177,.2);background:rgba(255,255,255,.56)}
.scenario-verdict.good{border-color:rgba(23,178,128,.28);background:rgba(23,178,128,.08)}
.scenario-verdict.warn{border-color:rgba(231,164,52,.28);background:rgba(231,164,52,.09)}
.scenario-verdict b{display:block;color:#173f45;margin-bottom:4px}.scenario-verdict p{margin:0;color:#527277;font-size:12px;line-height:1.55}
.form-panel input.input-error,.form-panel textarea.input-error,.form-panel select.input-error{border-color:rgba(210,70,70,.72)!important;box-shadow:0 0 0 3px rgba(210,70,70,.09)!important}
.series-input{font-variant-numeric:tabular-nums}


/* DIENGFLOW V6.2 — Compact Decision Workflow */
/* V6.3 mantiene il layout compatto e aggiunge Operational Intelligence. */
.next-module-strip{margin-top:12px;padding:11px 13px;border:1px solid rgba(36,137,126,.18);border-radius:14px;background:rgba(247,253,251,.72);display:flex;align-items:center;justify-content:space-between;gap:12px}.next-module-strip>b{font-size:11px;color:#315c60;white-space:nowrap}.next-module-strip>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.next-module-strip button{min-height:34px;padding:7px 10px;font-size:10px}
/* Riduce la lunghezza verticale dei moduli senza nascondere risultati essenziali. */
.result-section{padding:14px!important}.result-section>.metric-grid{margin-bottom:10px!important}.decision-panel{margin:10px 0!important;padding:12px!important;border-radius:14px!important}.decision-head{margin-bottom:8px!important}.decision-grid{gap:9px!important}.decision-grid>div{padding:9px!important}.decision-grid p,.decision-grid ul{font-size:10px!important;line-height:1.42!important}.table-wrap{margin-top:10px!important;margin-bottom:8px!important}.result-section table th,.result-section table td{padding-top:7px!important;padding-bottom:7px!important}.result-chart-card{margin-top:12px!important;padding:13px!important}.result-chart-card .chart-head p{margin:3px 0!important;font-size:10px!important}.result-chart{height:260px!important;max-height:260px!important}.chart-axis-help,.chart-explanation,.chart-professional-note{padding:8px 10px!important;margin-top:6px!important}.chart-axis-help p,.chart-explanation p,.chart-professional-note p{font-size:9px!important;line-height:1.35!important}.calculation-trace{margin-top:10px!important;padding:12px!important}.calc-steps{gap:7px!important}.calc-steps>div{padding:8px!important}.result-reading{margin-top:10px!important;padding:12px!important}.result-next{gap:6px!important}.result-next>div{padding:7px 9px!important}.knowledge-panel{margin-top:12px!important;padding:14px!important}.knowledge-grid{gap:8px!important}.knowledge-grid>div{padding:9px!important}.coach-note{padding:10px!important;margin:8px 0!important}.actions-row{margin-top:9px!important;gap:7px!important}.actions-row button{min-height:34px!important;padding:7px 10px!important}.page-head{margin-bottom:10px!important}.planning-flow{margin-bottom:10px!important}.analysis-context{margin-bottom:10px!important;padding:12px!important}.form-panel{padding:14px!important}.form-panel textarea{min-height:54px}.form-panel .form-grid{gap:9px!important}
@media(max-width:760px){.result-chart{height:230px!important;max-height:230px!important}.next-module-strip{align-items:flex-start;flex-direction:column}.next-module-strip>div{justify-content:flex-start}.decision-grid{grid-template-columns:1fr!important}.decision-grid>div{padding:8px!important}}

/* V6.3 Operational Intelligence */
.operational-focus{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(150px,1fr) minmax(160px,1fr) minmax(230px,1.5fr) auto;gap:8px;align-items:stretch;margin:8px 0;padding:8px;border:1px solid rgba(12,99,91,.13);border-radius:16px;background:rgba(255,255,255,.42);backdrop-filter:blur(10px)}
.operational-focus>div{min-width:0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.42)}
.operational-focus small{display:block;margin-bottom:3px;font-size:9px;font-weight:800;letter-spacing:.08em;color:#4d7875}
.operational-focus b{font-size:12px;line-height:1.25;color:#103b3a}
.operational-focus span{display:block;font-size:11px;line-height:1.35;color:#345f5d}
.operational-focus-title{border-left:3px solid rgba(20,184,166,.55)}
.operational-focus.warn .operational-focus-title{border-left-color:#e8a431}.operational-focus.bad .operational-focus-title{border-left-color:#e35f5f}
.operational-handoff{display:flex!important;align-items:center;justify-content:center;padding:4px!important;background:transparent!important}
.compact-action{white-space:normal!important;line-height:1.2!important;padding:8px 10px!important;font-size:11px!important;min-height:36px}
@media(max-width:1100px){.operational-focus{grid-template-columns:repeat(2,minmax(0,1fr))}.operational-handoff{grid-column:1/-1}.operational-focus-title{grid-column:1/-1}}
@media(max-width:650px){.operational-focus{grid-template-columns:1fr;padding:7px}.operational-focus-title,.operational-handoff{grid-column:auto}.operational-focus>div{padding:7px 8px}.operational-focus b{font-size:11.5px}.operational-focus span{font-size:10.5px}}


/* V6.4 Product Consolidation — progressive pages + unified flow */
.product-flow-nav{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(19,93,93,.13);border-radius:16px;background:rgba(255,255,255,.48);backdrop-filter:blur(14px);display:flex;align-items:center;gap:14px;overflow:hidden}
.product-flow-head{min-width:145px;display:flex;flex-direction:column;gap:2px}.product-flow-head small{font-size:9px;letter-spacing:.12em;color:#188f86}.product-flow-head b{font-size:12px;color:#12363a}
.product-flow-stages{display:flex;align-items:center;gap:7px;min-width:0;flex:1;overflow-x:auto;padding:2px}.product-flow-stages>button{min-width:104px;border:1px solid rgba(19,93,93,.12);background:rgba(255,255,255,.58);border-radius:12px;padding:7px 8px;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;text-align:left;column-gap:6px;cursor:pointer;color:#20484b}.product-flow-stages>button>span{grid-row:1/3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,151,.13);font-size:10px;font-weight:800}.product-flow-stages>button>b{font-size:10px;white-space:nowrap}.product-flow-stages>button>small{font-size:8px;opacity:.65}.product-flow-stages>button.active{border-color:rgba(20,184,166,.45);background:rgba(213,255,245,.76);box-shadow:0 5px 16px rgba(10,100,90,.08)}.product-flow-stages>button.done>span{background:rgba(34,197,151,.22)}.product-flow-stages>i{font-style:normal;opacity:.35;font-size:11px}
.progressive-block{margin-top:10px;border:1px solid rgba(19,93,93,.13);border-radius:14px;background:rgba(255,255,255,.45);overflow:hidden}.progressive-block>summary{list-style:none;cursor:pointer;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:#163f42}.progressive-block>summary::-webkit-details-marker{display:none}.progressive-block>summary:before{content:'＋';font-size:13px;color:#119889;margin-right:6px}.progressive-block[open]>summary:before{content:'−'}.progressive-block>summary span{flex:1;font-size:12px}.progressive-block>summary small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;opacity:.55}.progressive-body{padding:0 9px 9px}.progressive-body>.result-chart-card,.progressive-body>.result-reading,.progressive-body>.calculation-trace,.progressive-body>.module-guide{margin-top:0}
.result-section>.decision-panel,.result-section>.operational-focus,.result-section>.result-product-actions,.result-section>.next-module-strip{margin-top:9px}
@media(max-width:760px){.product-flow-nav{align-items:flex-start;flex-direction:column;gap:7px;padding:9px}.product-flow-head{min-width:0}.product-flow-stages{width:100%;gap:5px}.product-flow-stages>button{min-width:96px;padding:6px}.product-flow-stages>i{display:none}.progressive-block>summary{padding:9px 10px}}

/* V6.5 Unified Scenario */
.unified-scenario-shell{margin:10px 0 14px;padding:14px 16px;border:1px solid rgba(14,165,164,.2);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(225,251,247,.72));box-shadow:0 10px 28px rgba(15,118,110,.07);backdrop-filter:blur(18px)}
.unified-scenario-shell.inactive{display:flex;align-items:center;justify-content:space-between;gap:14px}
.unified-scenario-shell.inactive>div{display:grid;gap:3px}.unified-scenario-shell small{font-size:.7rem;letter-spacing:.09em;color:var(--muted)}.unified-scenario-shell b{color:var(--text)}.unified-scenario-shell span{font-size:.84rem;color:var(--muted)}
.unified-scenario-head,.unified-scenario-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.unified-scenario-head>div:first-child{display:grid;gap:2px}.unified-scenario-head strong{color:var(--text)}
.unified-scenario-progress{display:grid;grid-template-columns:repeat(11,minmax(0,auto));align-items:center;gap:6px;margin:12px 0 9px;overflow-x:auto;padding-bottom:3px}.unified-scenario-progress>button{min-width:112px;border:1px solid rgba(100,116,139,.18);background:rgba(255,255,255,.66);border-radius:14px;padding:8px 9px;text-align:left;display:grid;grid-template-columns:24px 1fr;column-gap:6px;align-items:center;color:var(--text);cursor:pointer}.unified-scenario-progress>button span{grid-row:1/3;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(148,163,184,.15);font-size:.72rem;font-weight:800}.unified-scenario-progress>button b{font-size:.78rem}.unified-scenario-progress>button small{font-size:.66rem;letter-spacing:0;color:var(--muted)}.unified-scenario-progress>button.done{border-color:rgba(16,185,129,.28);background:rgba(236,253,245,.76)}.unified-scenario-progress>button.done span{background:rgba(16,185,129,.16)}.unified-scenario-progress>button.active{border-color:rgba(6,182,212,.38);box-shadow:inset 0 0 0 1px rgba(6,182,212,.08);background:rgba(236,254,255,.9)}.unified-scenario-progress>i{font-style:normal;color:var(--muted);font-size:.75rem}.unified-scenario-foot{padding-top:4px;border-top:1px solid rgba(148,163,184,.12)}
@media(max-width:760px){.unified-scenario-shell{padding:12px}.unified-scenario-shell.inactive,.unified-scenario-head,.unified-scenario-foot{align-items:flex-start;flex-direction:column}.unified-scenario-head .actions-row{width:100%;justify-content:flex-start}.unified-scenario-progress{grid-template-columns:1fr;overflow:visible}.unified-scenario-progress>button{width:100%;min-width:0}.unified-scenario-progress>i{display:none}.unified-scenario-foot .secondary{width:100%}}

/* ============================================================
   DIENGFLOW V6.6 — Mobile Workspace
   Mobile-only refinement: density, legibility, touch navigation.
   Desktop, engines, Unified Scenario and backend remain unchanged.
   ============================================================ */
@media(max-width:700px){
  :root{--mobile-nav-h:64px}
  body{font-size:14px!important}
  main,#view{padding:10px 8px calc(var(--mobile-nav-h) + 22px + env(safe-area-inset-bottom))!important}
  .topbar{height:54px!important;min-height:54px!important;padding:0 7px!important;gap:5px!important}
  .brand{max-width:112px!important}.brand-mark{width:30px!important;height:30px!important;flex-basis:30px!important}.brand-copy{display:block!important}.brand-copy strong{font-size:10px!important}.brand-copy small{display:none!important}
  .profile-switch-wrap{max-width:92px!important}.profile-switch-wrap select{width:88px!important;min-height:34px!important;padding:5px 20px 5px 7px!important;font-size:10px!important}
  .top-actions{gap:4px!important}.top-actions>button,.top-actions>.icon-btn{min-width:34px!important;width:34px!important;height:34px!important;padding:0!important}.top-actions .user-chip{max-width:78px!important;min-height:34px!important;padding:5px 8px!important;font-size:10px!important}
  .page-head{gap:7px!important;margin-bottom:8px!important}.page-head h1{font-size:23px!important;line-height:1.05!important}.page-head p{font-size:11px!important;line-height:1.4!important;margin-top:4px!important}.page-head .pill{font-size:9px!important}
  .panel,.form-panel,.analysis-context,.result-section,.knowledge-panel{border-radius:15px!important;padding:11px!important}
  .form-grid,.form-grid.two,.form-grid.three{grid-template-columns:1fr!important;gap:7px!important}
  label{font-size:10.5px!important;gap:4px!important}input,select,textarea{font-size:16px!important;min-height:43px!important;padding:9px 10px!important;border-radius:10px!important}textarea{min-height:64px!important}
  button,.cta,.secondary,.ghost{min-height:40px}.actions-row{gap:6px!important;flex-wrap:wrap!important}.actions-row button{min-height:38px!important}
  .analysis-context{margin-bottom:8px!important}.analysis-context .context-title{margin-bottom:7px!important}.analysis-context .context-title h3{font-size:16px!important}.context-help{font-size:9px!important;line-height:1.35!important;margin:5px 0 0!important}
  .product-flow-nav{padding:7px 8px!important;margin-bottom:8px!important;gap:5px!important}.product-flow-head{display:none!important}.product-flow-stages{gap:4px!important}.product-flow-stages>button{min-width:78px!important;padding:5px 6px!important;grid-template-columns:19px 1fr!important}.product-flow-stages>button>span{width:19px!important;height:19px!important;font-size:9px!important}.product-flow-stages>button>b{font-size:9px!important}.product-flow-stages>button>small{font-size:7px!important}
  .unified-scenario-shell{padding:9px!important;margin:7px 0 9px!important;border-radius:15px!important}.unified-scenario-head{gap:7px!important}.unified-scenario-head>div:first-child{gap:1px!important}.unified-scenario-shell small{font-size:8px!important}.unified-scenario-shell span{font-size:10px!important}.unified-scenario-head strong,.unified-scenario-head b{font-size:12px!important}.unified-scenario-head .actions-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.unified-scenario-head .actions-row button{width:100%!important;font-size:9px!important;padding:6px!important}
  .unified-scenario-progress{display:flex!important;grid-template-columns:none!important;gap:4px!important;overflow-x:auto!important;scroll-snap-type:x proximity;padding:3px 0 5px!important;margin:7px 0 6px!important}.unified-scenario-progress>button{width:auto!important;min-width:86px!important;padding:6px!important;grid-template-columns:19px 1fr!important;scroll-snap-align:start}.unified-scenario-progress>button span{width:19px!important;height:19px!important;font-size:9px!important}.unified-scenario-progress>button b{font-size:9px!important}.unified-scenario-progress>button small{font-size:7.5px!important}.unified-scenario-progress>i{display:none!important}.unified-scenario-foot{display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important}.unified-scenario-foot span{flex:1}.unified-scenario-foot .secondary{width:auto!important;min-height:34px!important;font-size:9px!important;padding:6px 8px!important}
  .df54-hero{min-height:300px!important;border-radius:16px!important}.df54-hero-copy{max-width:68%!important;padding:19px 12px 18px!important}.df54-hero h1{font-size:31px!important;line-height:.96!important}.df54-hero p{font-size:11px!important;line-height:1.4!important;max-width:300px!important}.df54-hero-actions{gap:6px!important}.df54-hero-actions button{min-height:39px!important;padding:8px 10px!important;font-size:10px!important}.df54-hero:after{width:150px!important;right:3%!important;left:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}.df54-flow{font-size:8px!important}
  .df54-metrics{gap:6px!important}.df54-metric{min-height:78px!important;padding:10px!important}.df54-metric small{font-size:8px!important}.df54-metric strong{font-size:20px!important}
  .df54-main-grid,.df54-lower-grid,.dashboard-visual-grid{gap:7px!important}.df54-main-grid>.panel,.df54-lower-card,.df54-coach{padding:11px!important}.dash-section-title h2{font-size:15px!important}.dash-section-title small{font-size:8px!important}
  .df54-quick>div:last-child,.dashboard-quick-grid{gap:6px!important}.df54-quick button,.dashboard-quick-grid button{min-height:50px!important;padding:7px!important}
  .result-section{padding:10px!important}.metric-grid{gap:6px!important}.metric{padding:8px!important}.metric b{font-size:17px!important}.metric small{font-size:8px!important}.decision-panel,.operational-focus{padding:8px!important;margin:7px 0!important}.decision-grid{gap:6px!important}.decision-grid>div{padding:7px!important}.decision-grid p,.decision-grid ul{font-size:9.5px!important}.result-chart{height:210px!important;max-height:210px!important}.progressive-block{margin-top:7px!important}.progressive-block>summary{padding:8px 9px!important}.progressive-block>summary span{font-size:10.5px!important}
  .mobile-bottom-nav{height:var(--mobile-nav-h)!important;left:6px!important;right:6px!important;bottom:max(5px,env(safe-area-inset-bottom))!important;padding:4px 5px!important;border-radius:17px!important;box-shadow:0 -5px 22px rgba(22,89,88,.10)!important}.mobile-bottom-nav button{min-height:50px!important;padding:3px 1px!important;border-radius:12px!important}.mobile-bottom-nav button b{font-size:17px!important}.mobile-bottom-nav button span{font-size:8.5px!important}
  .auth-gate{min-height:100dvh!important;padding:0!important;display:block!important;overflow:auto!important}.auth-shell{display:flex!important;flex-direction:column!important;width:100%!important;min-height:100dvh!important;margin:0!important;border:0!important;border-radius:0!important;overflow:visible!important}.auth-visual{flex:0 0 180px!important;min-height:180px!important;height:180px!important}.auth-visual-content{left:16px!important;right:16px!important;bottom:14px!important}.auth-visual h2{font-size:25px!important;line-height:1!important}.auth-visual p{font-size:10px!important;margin-top:5px!important}.auth-card.auth-card-v55{flex:0 0 auto!important;width:100%!important;min-height:0!important;margin:0!important;padding:20px 16px calc(22px + env(safe-area-inset-bottom))!important;justify-content:flex-start!important}.auth-card-v55 h1{font-size:23px!important;margin-bottom:4px!important}.auth-card-v55>p{font-size:11px!important;margin-bottom:12px!important}.auth-card-v55 input,.auth-card-v55 select{min-height:44px!important}.auth-primary{min-height:45px!important}.guest-access{min-height:52px!important;padding:9px!important}
}
@media(max-width:430px){
  .brand-copy{display:none!important}.df54-hero{min-height:280px!important}.df54-hero-copy{max-width:70%!important;padding:17px 10px!important}.df54-hero h1{font-size:27px!important}.df54-hero:after{width:132px!important;right:1%!important}.unified-scenario-progress>button{min-width:80px!important}.page-head h1{font-size:21px!important}
}

/* ============================================================
   DIENGFLOW V6.6.1 — Mobile Access Fix
   Fixes mobile auth density, blank account space and auth backdrop.
   No engine, Unified Scenario, D1, session or backend changes.
   ============================================================ */
.guest-account-page{max-width:760px;margin:0 auto}
.guest-account-card{display:grid;gap:12px;align-items:start}
.guest-account-card p{margin:5px 0 0;color:var(--muted)}
.guest-account-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(24,208,153,.17),rgba(35,183,220,.15));font-size:21px}
body.auth-open:after{display:none!important}
body.auth-open{overflow:auto!important}
.auth-gate{overscroll-behavior:contain}

@media(max-width:700px){
  .guest-account-page{max-width:none!important;margin:0!important}
  .guest-account-page .page-head{margin-top:2px!important;margin-bottom:8px!important}
  .guest-account-card{padding:14px!important;gap:9px!important}
  .guest-account-card p{font-size:11px!important;line-height:1.4!important}

  /* The auth gate is a compact mobile sheet: hero + form, no viewport-sized spacer. */
  .auth-gate{
    min-height:100dvh!important;
    height:100dvh!important;
    padding:0!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 12% 5%,rgba(35,215,155,.22),transparent 27%),
      radial-gradient(circle at 92% 7%,rgba(35,185,225,.20),transparent 29%),
      #eaf7f6!important;
  }
  .auth-gate:before{display:none!important}
  .auth-shell{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .auth-visual{
    display:block!important;
    height:138px!important;
    min-height:138px!important;
    max-height:138px!important;
    flex:0 0 138px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.72)!important;
    background:
      linear-gradient(180deg,rgba(5,35,47,.20),rgba(3,34,44,.62)),
      url('/diengflow-hero-supply.webp') center 49%/cover no-repeat!important;
  }
  .auth-visual-grid{display:none!important}
  .auth-visual-content{left:14px!important;right:14px!important;bottom:11px!important}
  .auth-lockup{display:flex!important;margin:0 0 5px!important}
  .auth-lockup img{width:27px!important;height:27px!important}
  .auth-lockup b{font-size:12px!important;color:#fff!important}
  .auth-lockup small{display:none!important}
  .auth-eyebrow{display:none!important}
  .auth-visual h2{font-size:20px!important;line-height:1.02!important;max-width:290px!important;margin:0!important;color:#fff!important}
  .auth-visual p{font-size:8.5px!important;line-height:1.3!important;max-width:320px!important;margin:4px 0 0!important;color:rgba(255,255,255,.88)!important}
  .auth-benefits{display:none!important}
  .auth-card.auth-card-v55{
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:14px 14px calc(16px + env(safe-area-inset-bottom))!important;
    background:rgba(250,255,254,.90)!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .auth-card-v55 .auth-brand{display:none!important}
  .auth-mode-badge{font-size:7px!important;padding:4px 7px!important}
  .auth-card-v55 h1{font-size:21px!important;line-height:1.05!important;margin:7px 0 3px!important}
  .auth-card-v55>p{font-size:10.5px!important;line-height:1.35!important;margin:0 0 10px!important}
  .auth-card-v55 form{gap:8px!important}
  .auth-card-v55 form label{font-size:9.5px!important;gap:3px!important}
  .auth-card-v55 input,.auth-card-v55 select{min-height:42px!important;height:42px!important;padding:8px 10px!important;font-size:16px!important}
  .auth-primary{min-height:43px!important;height:43px!important;margin-top:1px!important}
  .auth-switch{min-height:34px!important;padding:7px!important;font-size:9.5px!important}
  .auth-divider{margin:0 0 6px!important;font-size:8px!important}
  .guest-access{min-height:48px!important;padding:7px 9px!important;grid-template-columns:30px 1fr auto!important}
  .guest-access>span{width:28px!important;height:28px!important}
  .guest-access b{font-size:9.5px!important}.guest-access small{font-size:8px!important}
  .auth-trust{margin:8px 0 0!important;font-size:8px!important;line-height:1.35!important;padding-bottom:0!important}
  .auth-error{margin-top:7px!important;padding:8px!important;font-size:10px!important}
}

@media(max-width:430px){
  .auth-visual{height:122px!important;min-height:122px!important;max-height:122px!important;flex-basis:122px!important}
  .auth-visual h2{font-size:18px!important}
  .auth-visual p{font-size:8px!important}
  .auth-card.auth-card-v55{padding:12px 12px calc(14px + env(safe-area-inset-bottom))!important}
}

/* ============================================================
   DIENGFLOW V6.6.2 — Mobile Blank Screen Hotfix
   Critical: the V6.6.1 mobile rule used display:block!important on
   .auth-gate, which overrode .auth-gate.hidden{display:none} and left
   an empty full-screen auth overlay above the application.
   Keep hidden auth gate truly hidden on every viewport.
   ============================================================ */
.auth-gate.hidden{display:none!important}


/* ============================================================
   DIENGFLOW V6.6.3 — Mobile Scroll Recovery Hotfix
   Prevents stale auth/drawer body locks from freezing page scroll.
   ============================================================ */
@media(max-width:1180px){
  html,body{min-height:100%;height:auto!important;overflow-y:auto!important;overscroll-behavior-y:auto!important}
  body.auth-open{overflow-y:auto!important}
  body:not(.drawer-open){overflow-y:auto!important}
  #app{min-height:100dvh!important;height:auto!important;overflow:visible!important}
  .shell{height:auto!important;min-height:calc(100dvh - 54px)!important;overflow:visible!important}
  main,#view{height:auto!important;min-height:0!important;overflow:visible!important}
}

/* ============================================================
   DIENGFLOW V6.7 — Product Readiness
   Onboarding, decision-first dashboard, accessibility and sync UX.
   ============================================================ */
.skip-link{position:fixed;left:12px;top:-60px;z-index:99999;padding:10px 14px;border-radius:10px;background:#073b44;color:#fff;font-weight:800;text-decoration:none}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid rgba(0,154,168,.65)!important;outline-offset:3px!important}
button,input,select,textarea,a{scroll-margin:90px}
.input-error,[aria-invalid="true"]{border-color:#b42318!important;box-shadow:0 0 0 3px rgba(180,35,24,.12)!important}
.attention-now{margin:14px 0;padding:15px;border:1px solid rgba(18,125,128,.18);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(228,250,246,.76));box-shadow:0 12px 34px rgba(25,89,91,.08)}
.attention-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}.attention-head small{font-weight:900;letter-spacing:.12em;color:#147b79}.attention-head h2{margin:3px 0 0;font-size:20px}.attention-head>span{font-size:11px;font-weight:800;color:#557173}
.attention-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.attention-item{min-height:74px;border:1px solid rgba(17,112,116,.14);border-radius:15px;background:rgba(255,255,255,.8);padding:10px;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;text-align:left;color:inherit}.attention-item>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#e5f8f4}.attention-item b,.attention-item small{display:block}.attention-item small{margin-top:3px;line-height:1.35;color:#607477}.attention-item i{font-style:normal;font-size:18px}.attention-item.warn{border-color:rgba(196,125,24,.28)}.attention-item.good{border-color:rgba(20,139,103,.22)}
.onboarding-steps{display:grid;gap:9px;margin:16px 0}.onboarding-steps>div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:10px;border-radius:14px;background:rgba(229,249,246,.7)}.onboarding-steps>div>b{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#0b8f8c;color:#fff}.onboarding-steps strong,.onboarding-steps small{display:block}.onboarding-steps small{margin-top:3px;color:#62777a}
.conflict-actions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}
@media(max-width:760px){.attention-now{margin:9px 0;padding:11px;border-radius:16px}.attention-head{align-items:start}.attention-head h2{font-size:16px}.attention-list{grid-template-columns:1fr}.attention-item{min-height:62px;padding:8px}.attention-item small{font-size:10px}.onboarding-steps>div{padding:8px}.modal-card .actions-row{align-items:stretch}.modal-card .actions-row>button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(prefers-contrast:more){.panel,.attention-now,.attention-item{border-width:2px!important}body{color:#092f36}}


/* ============================================================
   DIENGFLOW V6.8 — UX & Trust Release
   Clear planning/process hierarchy, stronger contrast, smart empty
   states, persistent context and lighter mobile visual effects.
   ============================================================ */
.df54-hero h1 span{color:#08765f!important;text-shadow:none!important}
.planning-flow-shell{margin:0 0 14px;padding:12px 14px;border:1px solid #cfe4df;border-radius:18px;background:#f8fcfb;box-shadow:0 8px 24px rgba(28,78,76,.05)}
.planning-flow-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}.planning-flow-label small{font-size:10px;font-weight:900;letter-spacing:.12em;color:#0c7666}.planning-flow-label b{font-size:11px;color:#526f73;font-weight:750}
.process-flow-nav{border-style:dashed!important;background:rgba(246,250,249,.82)!important}.process-flow-nav .product-flow-head small{color:#61787c!important}.process-flow-nav .product-flow-head b{font-weight:750!important}
.active-context-bar{position:sticky;top:72px;z-index:55;display:flex;align-items:center;gap:10px;margin:8px 0;padding:9px 12px;border:1px solid #b9ddd5;border-radius:13px;background:rgba(244,252,250,.97);box-shadow:0 7px 20px rgba(28,79,76,.07);backdrop-filter:blur(5px)}.active-context-bar small{font-size:9px;font-weight:900;letter-spacing:.11em;color:#147b70}.active-context-bar b{font-size:12px;color:#173d42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.active-context-bar>span{margin-left:auto;padding:4px 8px;border-radius:999px;background:#e1f7f1;color:#08705f;font-size:9px;font-weight:900;white-space:nowrap}.sku-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px;padding:4px;border-radius:14px;background:#e9f5f2;border:1px solid #cbe4df}.sku-mode-switch button{min-height:42px;border:0;border-radius:10px;background:transparent;color:#45676c;font-weight:850;cursor:pointer}.sku-mode-switch button.active{color:#062c2e;background:linear-gradient(110deg,#3ae09a,#35cdec);box-shadow:0 5px 16px rgba(34,185,163,.18)}.sku-single-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:end;margin-bottom:12px}.sku-single-row label,.sku-multi-select{display:flex;flex-direction:column;gap:6px}.sku-single-row select,.sku-single-row input,.sku-multi-select select{width:100%;min-height:44px}.sku-single-row>button{min-width:46px;height:44px;padding:0}.sku-single-row>button:disabled{opacity:.35;cursor:not-allowed}.sku-multi-select{margin-bottom:12px}.sku-multi-select select{min-height:92px;padding:6px}.sku-multi-select option{padding:8px;border-radius:8px}.sku-multi-select option:checked{background:linear-gradient(110deg,#3ae09a,#35cdec);color:#062c2e}.sku-multi-select small{color:#607d80}.context-secondary{margin-top:4px}
.smart-empty .compact-action{margin-top:10px;align-self:center}
.status-loading,.status-error,.status-empty{padding:12px 14px;border-radius:14px;border:1px solid #d5e8e4;background:#f7fbfa;color:#35565b}.status-error{border-color:#efcaca;background:#fff6f6;color:#7b2929}.status-loading[aria-busy="true"]:before{content:' ';display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid #b9dcd5;border-top-color:#0b816c;border-radius:50%;vertical-align:-2px;animation:df68spin .8s linear infinite}@keyframes df68spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
  .topbar{backdrop-filter:blur(8px)!important}
  .mobile-bottom-nav{backdrop-filter:blur(8px)!important}
  .modal{backdrop-filter:blur(4px)!important}
  .df54-hero h1 span{color:#066b57!important}
  .planning-flow-shell{padding:10px;margin-bottom:10px;overflow:hidden}.planning-flow-label{display:block}.planning-flow-label b{display:block;margin-top:3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.planning-flow{overflow-x:auto;scrollbar-width:none;padding-bottom:3px}.planning-flow::-webkit-scrollbar{display:none}.planning-flow button{min-width:72px}
  .product-flow-nav{overflow:hidden}.product-flow-stages{overflow-x:auto;scrollbar-width:none}.product-flow-stages::-webkit-scrollbar{display:none}
  .active-context-bar{top:64px;margin-left:0;margin-right:0;padding:8px 10px}.active-context-bar b{font-size:11px}
  .sku-mode-switch button{min-height:46px}.sku-single-row{grid-template-columns:44px minmax(0,1fr) 44px}.sku-single-row>button{min-width:44px}.sku-multi-select select{min-height:132px}.active-context-bar>span{font-size:8px}
  .profile-switch-wrap{min-width:0!important}.profile-switch-wrap select{max-width:100%!important}
}
@media(max-width:420px){.topbar{gap:5px!important}.top-actions{gap:4px!important}.profile-switch-wrap{max-width:96px!important}.profile-switch-wrap select{width:92px!important}.planning-flow button{min-width:66px!important}}


/* ============================================================
   DIENGFLOW V6.9 — Professional Workflow
   Guided scenario, decision summary and layout/mobile polish.
   ============================================================ */
.professional-workflow{border-color:#afdcd2!important;background:linear-gradient(135deg,rgba(249,253,252,.96),rgba(226,249,244,.82))!important}
.unified-scenario-progress .decision-step{border-color:#b5dcd4;background:#f6fbfa;color:#1c4a50}.unified-scenario-progress .decision-step.ready{border-color:#27b995;background:#e5f8f2;color:#0b6154}
.scenario-decision>h2{margin:12px 0 2px;font-size:28px}.scenario-decision-context{margin:0 0 12px;color:#527177}.scenario-decision-progress{display:flex;align-items:baseline;gap:8px;padding:10px 12px;border:1px solid #cfe6e1;border-radius:13px;background:#f6fbfa}.scenario-decision-progress b{font-size:22px;color:#08765f}.scenario-decision-progress span{font-size:11px;color:#60787d}
.scenario-decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}.scenario-decision-grid article{padding:12px;border:1px solid #d0e5e0;border-radius:14px;background:#fbfefd}.scenario-decision-grid small{display:block;font-size:9px;font-weight:900;letter-spacing:.1em;color:#16816f}.scenario-decision-grid b{display:block;margin-top:5px;font-size:13px;color:#183e44;line-height:1.4}.scenario-decision-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.scenario-decision-columns section{padding:13px;border:1px solid #d5e7e3;border-radius:14px;background:#f8fcfb}.scenario-decision-columns small{font-weight:900;letter-spacing:.1em;color:#5b7479}.scenario-decision-columns ul,.scenario-decision-columns ol{padding-left:20px;margin:8px 0}.scenario-decision-columns li,.scenario-decision-columns p{font-size:12px;line-height:1.45;color:#3e5d62}
@media(min-width:761px){.two-col{align-items:start}.analysis-context+.unified-scenario-shell{margin-bottom:16px}}
@media(max-width:760px){.scenario-decision-grid{grid-template-columns:1fr 1fr}.scenario-decision-columns{grid-template-columns:1fr}.professional-workflow .unified-scenario-foot{align-items:stretch}.professional-workflow .unified-scenario-foot .actions-row{margin-top:8px}.professional-workflow .unified-scenario-foot .actions-row button{min-height:42px}}
@media(max-width:420px){.profile-switch-wrap{max-width:118px!important}.profile-switch-wrap select{width:114px!important;font-size:11px!important;padding-left:8px!important}.scenario-decision-grid{grid-template-columns:1fr}}

/* V6.10 Supply Chain Academy */
.academy-overview{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px}.academy-overview small,.academy-module-no{font-size:10px;letter-spacing:.11em;font-weight:800;color:#178a76}.academy-overview h2{margin:5px 0}.academy-levels{display:flex;gap:8px;flex-wrap:wrap}.academy-levels span{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #cfe8e2;border-radius:999px;background:rgba(255,255,255,.68);font-size:12px;font-weight:700}.academy-levels b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#dff7f0;color:#117661}.academy-expanded .academy-card{position:relative}.academy-module-no{margin-bottom:10px}.academy-case{margin-top:4px}.academy-case>small{letter-spacing:.12em;color:#178a76;font-weight:800}.academy-case h2{margin:6px 0 8px}
@media(max-width:700px){.academy-overview{align-items:flex-start;flex-direction:column}.academy-levels{width:100%}.academy-levels span{flex:1 1 30%;justify-content:center}.academy-head h1{font-size:30px!important;line-height:1.05!important}}

/* V6.10.1 Academy Content Expansion */
.academy-definition-list{display:grid;gap:10px;margin:12px 0}
.academy-definition{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.42)}
.academy-definition b{display:block;margin-bottom:4px;color:var(--text)}
.academy-definition p{margin:0;line-height:1.55;color:var(--muted)}
.academy-checklist{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.academy-checklist ol{margin-bottom:0}
@media(max-width:700px){.academy-definition{padding:11px 12px}.academy-definition p{font-size:13px;line-height:1.5}}

/* ============================================================
   DIENGFLOW V6.11 — Excel Smart Organizer
   Browser-only file organization with manual + local instruction mode.
   ============================================================ */
.excel-settings-panel{margin-top:16px}.excel-settings-list{display:grid;gap:9px}.excel-setting-row{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.58);text-align:left;color:inherit}.excel-setting-row>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#e7f8f4;font-size:20px}.excel-setting-row b,.excel-setting-row small{display:block}.excel-setting-row small{margin-top:3px;color:var(--muted);line-height:1.35}.excel-setting-row i{font-style:normal;font-weight:900;color:#18836f}.excel-setting-row.featured{border-color:#9fd9cc;background:linear-gradient(135deg,#f8fffd,#e8f9f4)}.excel-setting-row.static{cursor:default}
.excel-drop-panel{text-align:center;padding:34px 22px}.excel-drop-icon{font-size:46px}.excel-drop-panel h2{margin:10px 0 5px}.excel-file-label{display:inline-flex!important;align-items:center;justify-content:center;margin:14px auto 8px;padding:11px 16px;border-radius:12px;background:#0b8f79;color:white;font-weight:800;cursor:pointer}.excel-file-label input{position:absolute;opacity:0;pointer-events:none}.excel-file-summary{display:flex;align-items:center;justify-content:space-between;gap:14px}.excel-file-summary h2{margin:9px 0 4px}.excel-file-summary p{margin:0;color:var(--muted)}
.excel-instruction-panel textarea{width:100%;margin-top:10px}.excel-organizer-grid{align-items:start}.excel-section-head,.excel-preview-head{display:flex;align-items:end;justify-content:space-between;gap:12px}.excel-section-head small,.excel-preview-head small{color:var(--muted)}.excel-column-list{display:grid;gap:8px;margin-top:12px}.excel-column-item{display:grid;grid-template-columns:22px 58px 1fr auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.6)}.excel-column-item.dragging{opacity:.5}.excel-drag{cursor:grab;color:#74908f;font-weight:900;letter-spacing:-3px}.excel-keep{display:flex!important;align-items:center;gap:5px;font-size:11px}.excel-column-item>div small{display:block;margin-bottom:3px;color:var(--muted);font-size:9px}.excel-column-item input[type="text"],.excel-column-item input:not([type]){min-height:36px}.excel-column-item [data-excel-rename]{width:100%;min-height:36px}.excel-move-actions{display:flex;gap:4px}.excel-move-actions button{min-width:34px;padding:7px}.excel-option-list{display:grid;gap:8px;margin:12px 0}.excel-template-panel{margin-top:14px}.excel-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.excel-preview-block{min-width:0;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.46)}.excel-preview-head{align-items:baseline;margin-bottom:8px}.excel-preview-table{max-height:340px;overflow:auto}.excel-preview-table table{font-size:11px;white-space:nowrap}.excel-preview-table th{position:sticky;top:0;background:#eff9f6;z-index:1}.excel-export-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}.excel-export-panel p{max-width:700px}.excel-export-panel .actions-row{justify-content:flex-end}.excel-organizer-grid label select{width:100%}
@media(max-width:760px){.excel-file-summary,.excel-export-panel{align-items:flex-start;flex-direction:column}.excel-preview-grid{grid-template-columns:1fr}.excel-column-item{grid-template-columns:18px 52px minmax(0,1fr)}.excel-move-actions{grid-column:3;justify-content:flex-end}.excel-section-head{align-items:flex-start}.excel-export-panel .actions-row{width:100%;align-items:stretch}.excel-export-panel .actions-row button{flex:1 1 100%}}

/* DIENGFLOW V6.11.1 — Excel & Data Hub UX Hotfix */
.excel-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}.excel-hub-card{appearance:none;width:100%;text-align:left;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;min-height:245px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.excel-hub-card:hover{transform:translateY(-2px);border-color:#8ed7c7;box-shadow:0 14px 30px rgba(19,91,83,.09)}.excel-hub-card.featured{background:linear-gradient(145deg,rgba(247,255,252,.92),rgba(222,248,241,.84));border-color:#9fd9cc}.excel-hub-card small{color:#18836f;font-weight:900;letter-spacing:.08em}.excel-hub-card h2{margin:8px 0}.excel-hub-card p{color:var(--muted);line-height:1.55;flex:1}.excel-hub-card>b{color:#137a68;margin-top:12px}.excel-hub-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#e5f7f2;font-size:23px;margin-bottom:14px}.excel-hub-note{display:flex;align-items:center;justify-content:space-between;gap:18px}.excel-hub-note p{color:var(--muted);margin-bottom:0}.excel-hub-flow{white-space:nowrap;padding:11px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.55);font-size:12px;font-weight:800}.excel-hub-flow span{color:#16947c;margin:0 5px}@media(max-width:900px){.excel-hub-grid{grid-template-columns:1fr}.excel-hub-card{min-height:0}.excel-hub-note{align-items:flex-start;flex-direction:column}.excel-hub-flow{white-space:normal;width:100%}}

/* V6.11.2 — Hero visual refinement + clearer analytical graphics */
.df54-hero:before{background:linear-gradient(90deg,rgba(238,251,250,.98) 0%,rgba(236,250,249,.93) 43%,rgba(104,228,211,.22) 100%),radial-gradient(circle at 82% 35%,rgba(33,218,143,.22),transparent 28%),radial-gradient(circle at 92% 70%,rgba(41,179,238,.22),transparent 32%)!important}
.df54-hero:after{background:linear-gradient(rgba(26,139,145,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(26,139,145,.055) 1px,transparent 1px)!important;background-size:32px 32px!important}
.df54-hero-copy{color:#082b35}.df54-kicker{color:#177b72;background:rgba(255,255,255,.58);border-color:#a8ded5}.df54-hero p{color:#496b70!important}.df54-flow{color:#52777b!important}
.df54-hero-brand{width:min(420px,92%);max-width:none!important;margin-right:5%!important;align-self:stretch!important;display:grid!important;place-items:center!important}
.df6112-glass-cube{position:relative;width:250px;height:205px;display:grid;place-items:center;border:2px solid rgba(26,220,162,.42);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(91,224,215,.07));backdrop-filter:blur(3px);box-shadow:inset 0 0 38px rgba(62,236,184,.09),0 20px 60px rgba(16,121,129,.12);transform:perspective(700px) rotateY(-7deg)}
.df6112-glass-cube:before,.df6112-glass-cube:after{content:"";position:absolute;inset:18px;border:1px solid rgba(28,193,219,.26);border-radius:26px;transform:rotate(7deg)}.df6112-glass-cube:after{inset:42px;border-color:rgba(30,223,143,.22);transform:rotate(-9deg)}
.df6112-glass-cube img{position:relative;z-index:3;width:138px!important;height:138px!important;opacity:.9;filter:drop-shadow(0 12px 25px rgba(8,83,92,.18))!important}
.df6112-node{position:absolute;z-index:4;width:34px;height:34px;border:1px solid rgba(21,150,152,.25);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.68);color:#138a7d;font-size:15px;box-shadow:0 8px 20px rgba(22,106,113,.10)}.df6112-node.n1{left:-18px;top:32px}.df6112-node.n2{right:-16px;top:22px}.df6112-node.n3{left:18px;bottom:-16px}.df6112-node.n4{right:8px;bottom:-14px}
.df6112-data-flow{position:absolute;inset:auto 2% 17px 2%;height:34px;display:flex;align-items:flex-end;justify-content:center;gap:8px;opacity:.55}.df6112-data-flow i{display:block;width:34px;border-radius:8px 8px 2px 2px;background:linear-gradient(#24d997,#22aee8)}.df6112-data-flow i:nth-child(1){height:9px}.df6112-data-flow i:nth-child(2){height:16px}.df6112-data-flow i:nth-child(3){height:26px}.df6112-data-flow i:nth-child(4){height:19px}.df6112-data-flow i:nth-child(5){height:31px}
/* analytical charts: brighter, readable and shape-distinct */
.df54-mrp-svg rect{fill:#31b8df!important;opacity:.68!important}.df54-mrp-svg .poh{stroke:#12a96b!important;stroke-width:3.5!important}.df54-mrp-svg .gross{stroke:#e85d55!important;stroke-width:3!important;stroke-dasharray:7 4}.df54-mrp-svg line{stroke:#b8d8d7!important}.df54-mrp-svg text{fill:#54777a!important}.df54-legend .poh{color:#0b9a61!important}.df54-legend .gross{color:#d74f49!important}.df54-legend .receipt{color:#178db7!important}
.df54-ring>div{box-shadow:inset 0 0 0 1px rgba(15,83,87,.08),0 8px 18px rgba(23,112,116,.08)}.df54-ring:nth-child(1)>div{background:conic-gradient(#10aa69 0 72%,#dceceb 72%)!important}.df54-ring:nth-child(2)>div{background:conic-gradient(#168fcb 0 64%,#dceceb 64%)!important}.df54-ring:nth-child(3)>div{background:conic-gradient(#e59b26 0 36%,#dceceb 36%)!important}.df54-ring:nth-child(4)>div{background:conic-gradient(#7457c8 0 78%,#dceceb 78%)!important}.df54-ring>div:before{background:rgba(249,253,252,.96)!important}.df54-ring b{color:#123e45!important}
.academy-study-extra{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.academy-study-extra>div{padding:11px 12px;border:1px solid #cfe8e2;border-radius:13px;background:rgba(255,255,255,.48)}.academy-study-extra small{font-size:9px;letter-spacing:.08em;font-weight:850;color:#178a76}.academy-study-extra p{margin:5px 0 0!important;font-size:12px!important;line-height:1.45!important}
@media(max-width:700px){.df54-hero{grid-template-columns:1fr!important}.df54-hero-brand{width:100%;margin:0!important;padding:0 0 25px}.df6112-glass-cube{width:210px;height:170px}.df6112-glass-cube img{width:112px!important;height:112px!important}.academy-study-extra{grid-template-columns:1fr}}


/* V6.11.3 — Hero scene hotfix: approved composition, implemented in the real UI (no raster mockup) */
.df54-hero{min-height:360px!important;grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr)!important;gap:10px!important}
.df54-hero:before{background:linear-gradient(90deg,rgba(245,253,252,.98) 0%,rgba(238,251,249,.95) 41%,rgba(91,223,205,.16) 100%),radial-gradient(circle at 77% 34%,rgba(24,230,151,.32),transparent 27%),radial-gradient(circle at 93% 63%,rgba(31,174,239,.32),transparent 35%)!important}
.df54-hero:after{display:none!important}
.df54-hero-copy{max-width:none!important;padding:34px 12px 34px 34px!important}
.df6113-hero-scene{position:relative!important;width:100%!important;min-width:390px!important;height:330px!important;margin:0!important;align-self:center!important;display:block!important;overflow:hidden;border-radius:30px;background:radial-gradient(circle at 55% 48%,rgba(5,79,91,.92) 0 16%,rgba(7,116,111,.72) 17% 27%,rgba(24,210,151,.22) 28% 43%,transparent 61%),radial-gradient(circle at 76% 20%,rgba(29,224,154,.38),transparent 25%),radial-gradient(circle at 82% 76%,rgba(31,170,236,.35),transparent 31%)}
.df6113-hero-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent,black 30%,black);opacity:.7}
.df6113-globe{position:absolute;left:50%;top:50%;width:214px;height:214px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 37% 28%,rgba(107,255,192,.72),transparent 8%),radial-gradient(ellipse at 38% 48%,rgba(42,225,145,.78) 0 8%,transparent 9%),radial-gradient(ellipse at 64% 36%,rgba(40,218,158,.68) 0 11%,transparent 12%),radial-gradient(ellipse at 57% 69%,rgba(25,190,154,.72) 0 9%,transparent 10%),radial-gradient(circle at 43% 40%,#0a6572,#063849 65%,#052d3c);box-shadow:0 0 32px rgba(57,255,176,.65),0 0 85px rgba(27,195,224,.38),inset -22px -18px 38px rgba(0,16,35,.48);z-index:2}
.df6113-globe:before,.df6113-globe:after{content:"";position:absolute;inset:18px;border:1px solid rgba(104,255,212,.25);border-radius:50%;transform:rotate(27deg)}.df6113-globe:after{inset:42px -8px;transform:rotate(-18deg)}
.df6113-globe span{position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(84,238,213,.10) 29px 30px);transform:rotate(15deg)}
.df6113-cube-frame{position:absolute;left:50%;top:50%;width:245px;height:245px;transform:translate(-50%,-50%) rotate(30deg);border:2px solid rgba(100,255,203,.88);box-shadow:0 0 18px rgba(77,255,195,.7),inset 0 0 22px rgba(41,218,232,.18);z-index:3}.df6113-cube-frame:before,.df6113-cube-frame:after{content:"";position:absolute;inset:27px;border:1px solid rgba(85,214,255,.58)}.df6113-cube-frame:after{inset:55px;border-color:rgba(95,255,188,.62)}
.df6113-mark{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%)!important;width:124px!important;height:124px!important;z-index:5!important;filter:drop-shadow(0 0 18px rgba(55,255,188,.45))!important}
.df6113-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(74,231,220,.38);border-radius:50%;z-index:1}.df6113-orbit.orbit-a{width:390px;height:132px;transform:translate(-50%,-50%) rotate(-12deg);box-shadow:0 0 15px rgba(54,211,239,.2)}.df6113-orbit.orbit-b{width:335px;height:180px;transform:translate(-50%,-50%) rotate(20deg);border-color:rgba(87,255,170,.33)}
.df6113-node{position:absolute;z-index:7;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(160,255,232,.72);border-radius:50%;background:linear-gradient(145deg,rgba(17,139,111,.9),rgba(16,103,154,.86));color:white;font-size:19px;box-shadow:0 0 18px rgba(63,255,183,.36),inset 0 1px 0 rgba(255,255,255,.4)}.df6113-node.n1{left:16%;top:15%}.df6113-node.n2{right:10%;top:13%}.df6113-node.n3{left:10%;bottom:17%}.df6113-node.n4{right:8%;bottom:15%}.df6113-node.n5{right:25%;bottom:4%}
.df6113-data-flow{position:absolute;z-index:6;left:22%;right:10%;bottom:6px;height:62px;display:flex;align-items:flex-end;gap:8px}.df6113-data-flow i{width:25px;border-radius:5px 5px 0 0;background:linear-gradient(#57f0ad,#1caee6);box-shadow:0 0 12px rgba(51,223,190,.25)}.df6113-data-flow i:nth-child(1){height:12px}.df6113-data-flow i:nth-child(2){height:20px}.df6113-data-flow i:nth-child(3){height:31px}.df6113-data-flow i:nth-child(4){height:24px}.df6113-data-flow i:nth-child(5){height:43px}.df6113-data-flow i:nth-child(6){height:35px}.df6113-data-flow b{position:absolute;left:0;right:0;bottom:21px;height:2px;background:linear-gradient(90deg,transparent,#71ffbd 12%,#39c7f0 78%,transparent);transform:rotate(-8deg);transform-origin:left}
@media(max-width:900px){.df54-hero{grid-template-columns:1fr!important}.df6113-hero-scene{min-width:0!important;width:100%!important;height:285px!important}.df54-hero-copy{padding:28px 24px 12px!important}.df6113-globe{width:180px;height:180px}.df6113-cube-frame{width:205px;height:205px}.df6113-mark{width:105px!important;height:105px!important}}
@media(max-width:700px){.df54-hero{min-height:auto!important}.df54-hero-copy{padding:24px 19px 8px!important}.df6113-hero-scene{height:245px!important;padding:0!important}.df6113-node{width:38px;height:38px;font-size:15px}.df6113-globe{width:150px;height:150px}.df6113-cube-frame{width:174px;height:174px}.df6113-mark{width:88px!important;height:88px!important}.df6113-orbit.orbit-a{width:290px}.df6113-orbit.orbit-b{width:255px}}

/* V6.12 — Product Simplification & i18n */
#mainNav button[data-view="abc"],#mainNav button[data-view="bottleneck"],#mainNav button[data-view="materialhandling"],#mainNav button[data-view="yarddock"],#mainNav button[data-view="tms"],#mainNav button[data-view="returns"],#mainNav button[data-view="people"],#mainNav button[data-view="lean"]{padding-left:28px;font-size:.93em;opacity:.9}
#mainNav button[data-view="abc"] span:after,#mainNav button[data-view="bottleneck"] span:after,#mainNav button[data-view="materialhandling"] span:after,#mainNav button[data-view="yarddock"] span:after,#mainNav button[data-view="tms"] span:after,#mainNav button[data-view="returns"] span:after,#mainNav button[data-view="people"] span:after,#mainNav button[data-view="lean"] span:after{content:' ·';opacity:.35}
@media(max-width:1180px){#mainNav button[data-view]{min-height:44px} .usage-settings select[name="language"]{min-height:46px;font-size:16px}}

/* ============================================================
   DIENGFLOW V6.12.1 — UI Regression Fix
   Desktop/mobile visual stabilization only. No engine/D1 changes.
   ============================================================ */

/* Accessibility: the skip-link must never remain visible unless keyboard-focused. */
.skip-link{top:-100px!important;transform:none!important;opacity:0!important;pointer-events:none!important}
.skip-link:focus,.skip-link:focus-visible{top:10px!important;opacity:1!important;pointer-events:auto!important}

/* Settings: restore clear vertical rhythm and prevent merged labels. */
.usage-settings #settingsForm{display:grid!important;gap:14px!important}
.usage-settings #settingsForm>label{margin:0!important;display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0!important}
.usage-settings #settingsForm>.check{flex-direction:row!important;align-items:flex-start!important;gap:9px!important}
.usage-settings #settingsForm>.check input{flex:0 0 auto!important;margin-top:3px!important}
.usage-settings .settings-label{display:block!important;font-weight:750!important;color:var(--text)!important;line-height:1.3!important}
.usage-settings .settings-field select,.usage-settings .settings-field input{display:block!important;width:100%!important;margin:0!important}
.usage-settings .settings-field small{display:block!important;margin-top:1px!important;line-height:1.45!important}
.usage-settings .settings-compact-row{padding-top:2px!important}

/* Planning rail: one clean stage per column on desktop, horizontal rail on mobile. */
@media(min-width:901px){
  .planning-flow-shell{overflow:hidden!important}
  .planning-flow{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important;padding:4px!important}
  .planning-flow>i{display:none!important}
  .planning-flow>button{min-width:0!important;width:100%!important;display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;align-items:center!important;padding:8px 9px!important;overflow:hidden!important}
  .planning-flow>button>b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* Professional workflow: eliminate stage/text collisions. */
@media(min-width:901px){
  .unified-scenario-progress{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important}
  .unified-scenario-progress>i{display:none!important}
  .unified-scenario-progress>button{min-width:0!important;width:100%!important;grid-template-columns:24px minmax(0,1fr)!important;padding:8px!important;overflow:hidden!important}
  .unified-scenario-progress>button b,.unified-scenario-progress>button small{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}

/* Product/process rail: no overlapping compact cards on wider screens. */
@media(min-width:901px){
  .product-flow-nav{align-items:stretch!important}
  .product-flow-stages{display:grid!important;grid-template-columns:repeat(5,minmax(104px,1fr))!important;gap:7px!important;overflow-x:auto!important}
  .product-flow-stages>i{display:none!important}
  .product-flow-stages>button{min-width:0!important;width:100%!important;overflow:hidden!important}
  .product-flow-stages>button>b,.product-flow-stages>button>small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* Keep sticky elements from visually colliding with the header. */
:root{--df6121-topbar:72px}
.topbar{z-index:120!important}
.active-context-bar{top:calc(var(--df6121-topbar) + 8px)!important;z-index:60!important}
.explainer{top:calc(var(--df6121-topbar) + 18px)!important}
main{scroll-margin-top:calc(var(--df6121-topbar) + 12px)!important}

/* Dashboard: preserve compact KPI hierarchy after V6.12 navigation/i18n changes. */
.df54-metrics .df54-metric{min-width:0!important;overflow:hidden!important}
.df54-metrics .df54-metric>div{min-width:0!important}
.df54-metrics .df54-metric small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.df54-metrics .df54-metric b{font-size:clamp(18px,1.8vw,24px)!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.df54-quick button b{line-height:1.25!important;text-align:center!important;overflow-wrap:anywhere!important}
.df54-main-grid,.df54-lower-grid,.dashboard-visual-grid{min-width:0!important}
.df54-main-grid>*{min-width:0!important}

/* Sidebar group labels: hide empty groups for the active profile. */
#mainNav .nav-group-label.nav-group-empty{display:none!important}

/* Mobile: retain scrollable rails and safe header spacing. */
@media(max-width:900px){
  :root{--df6121-topbar:62px}
  .planning-flow{display:flex!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none!important}
  .planning-flow::-webkit-scrollbar{display:none!important}
  .planning-flow>button{min-width:84px!important;flex:0 0 auto!important}
  .planning-flow>i{display:none!important}
  .unified-scenario-progress{display:flex!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none!important}
  .unified-scenario-progress::-webkit-scrollbar{display:none!important}
  .unified-scenario-progress>button{min-width:104px!important;flex:0 0 auto!important}
  .unified-scenario-progress>i{display:none!important}
  .product-flow-stages{display:flex!important;overflow-x:auto!important;gap:6px!important}
  .product-flow-stages>button{min-width:100px!important;flex:0 0 auto!important}
  .usage-settings #settingsForm{gap:12px!important}
}
@media(max-width:700px){:root{--df6121-topbar:58px}.usage-settings .usage-grid{grid-template-columns:1fr!important}}

/* ============================================================
   DIENGFLOW V7.0 — Commercial Candidate / Code Freeze
   Structural UI stabilization for desktop + mobile.
   No engine, D1, auth or cloud-state schema changes.
   ============================================================ */
:root{--df7-header:72px;--df7-border:#cfe7e2;--df7-ink:#153f45;--df7-muted:#607b80;--df7-accent:#16a985;--df7-blue:#20a9d9}

/* Final workflow components: isolated from legacy generic button/span rules. */
.df7-planning .planning-flow{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;backdrop-filter:none!important}
.df7-planning .planning-flow>button{min-width:0!important;width:100%!important;display:flex!important;align-items:center!important;gap:9px!important;padding:10px 11px!important;border:1px solid var(--df7-border)!important;border-radius:12px!important;background:rgba(255,255,255,.72)!important;color:var(--df7-ink)!important;overflow:hidden!important;box-shadow:none!important}
.df7-planning .planning-flow>button>em{font-style:normal!important;display:grid!important;place-items:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;border-radius:9px!important;background:#edf8f5!important;color:#4f7577!important;font-size:10px!important;font-weight:900!important}
.df7-planning .planning-flow>button>b{display:block!important;min-width:0!important;font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.1!important}
.df7-planning .planning-flow>button.active{border-color:#50cdb5!important;background:#e7faf5!important;box-shadow:inset 0 0 0 1px rgba(22,169,133,.1)!important}
.df7-planning .planning-flow>button.active>em{background:var(--df7-accent)!important;color:white!important}
.df7-planning .planning-flow>i{display:none!important}

.df7-process.product-flow-nav{display:grid!important;grid-template-columns:190px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;padding:11px 13px!important;overflow:hidden!important}
.df7-process .product-flow-head{min-width:0!important}
.df7-process .product-flow-head small,.df7-process .product-flow-head b{display:block!important;white-space:normal!important}
.df7-process .product-flow-stages{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;padding:0!important;width:100%!important}
.df7-process .product-flow-stages>button{min-width:0!important;width:100%!important;display:flex!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;border:1px solid var(--df7-border)!important;border-radius:12px!important;background:rgba(255,255,255,.72)!important;color:var(--df7-ink)!important;overflow:hidden!important}
.df7-process .product-flow-stages>button>em{font-style:normal!important;flex:0 0 28px!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#edf8f5!important;font-size:14px!important}
.df7-process .product-flow-stages>button>div{min-width:0!important;display:block!important}
.df7-process .product-flow-stages>button b,.df7-process .product-flow-stages>button small{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.2!important}
.df7-process .product-flow-stages>button b{font-size:10px!important}.df7-process .product-flow-stages>button small{font-size:8px!important;color:#6f8688!important;margin-top:2px!important}
.df7-process .product-flow-stages>button.active{border-color:#43c9ae!important;background:#e6faf4!important}.df7-process .product-flow-stages>button.done{background:#f2fbf8!important}
.df7-process .product-flow-stages>i{display:none!important}

.df7-workflow.unified-scenario-progress{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;padding:0!important;margin:12px 0 10px!important}
.df7-workflow.unified-scenario-progress>button{min-width:0!important;width:100%!important;display:flex!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;border-radius:12px!important;overflow:hidden!important;text-align:left!important}
.df7-workflow.unified-scenario-progress>button>em{font-style:normal!important;flex:0 0 28px!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#eef5f4!important;color:#547174!important;font-size:9px!important;font-weight:900!important}
.df7-workflow.unified-scenario-progress>button>div{min-width:0!important;display:block!important}
.df7-workflow.unified-scenario-progress>button b,.df7-workflow.unified-scenario-progress>button small{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.2!important}
.df7-workflow.unified-scenario-progress>button b{font-size:10px!important}.df7-workflow.unified-scenario-progress>button small{font-size:8px!important;margin-top:2px!important}
.df7-workflow.unified-scenario-progress>button.done>em{background:#dff6ee!important;color:#0f7f67!important}.df7-workflow.unified-scenario-progress>button.active>em{background:#dff6fb!important;color:#08789b!important}.df7-workflow.unified-scenario-progress>button.decision-step.ready>em{background:#d9f5e8!important;color:#0d765e!important}
.df7-workflow.unified-scenario-progress>i{display:none!important}

/* Business-first dashboard: no Academy/training duplicate score cards in the executive strip. */
.df7-business-metrics{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important}
.df7-business-metrics .df54-metric{min-height:86px!important;padding:12px 13px!important;border:1px solid #d1e8e3!important;background:rgba(255,255,255,.74)!important}
.df7-business-metrics .df54-metric>span{font-size:20px!important}.df7-business-metrics .df54-metric small{font-size:9px!important;color:#688286!important}.df7-business-metrics .df54-metric b{font-size:21px!important;color:#153f45!important}

/* Commercial polish and robust overflow rules. */
.page-head,.analysis-context,.unified-scenario-shell,.form-panel,.panel{min-width:0!important}
.page-head h1,.dash-section-title h2{overflow-wrap:anywhere!important}
.topbar{top:0!important;z-index:500!important;background:rgba(244,252,250,.95)!important;backdrop-filter:blur(16px)!important}
#sidebar{z-index:90!important}.shell{isolation:isolate}
.df54-main-grid,.df54-lower-grid,.dashboard-visual-grid,.df54-quick>div{min-width:0!important}
.df54-main-grid>*{overflow:hidden!important}

@media(max-width:1100px){
  .df7-process.product-flow-nav{grid-template-columns:1fr!important}.df7-process .product-flow-head{display:block!important}
  .df7-business-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  :root{--df7-header:62px}
  .df7-planning .planning-flow,.df7-process .product-flow-stages,.df7-workflow.unified-scenario-progress{display:flex!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;scroll-snap-type:x proximity!important;gap:7px!important;padding-bottom:4px!important;scrollbar-width:none!important}
  .df7-planning .planning-flow::-webkit-scrollbar,.df7-process .product-flow-stages::-webkit-scrollbar,.df7-workflow.unified-scenario-progress::-webkit-scrollbar{display:none!important}
  .df7-planning .planning-flow>button{flex:0 0 120px!important;width:120px!important;scroll-snap-align:start!important}
  .df7-process .product-flow-stages>button{flex:0 0 132px!important;width:132px!important;scroll-snap-align:start!important}
  .df7-workflow.unified-scenario-progress>button{flex:0 0 126px!important;width:126px!important;scroll-snap-align:start!important}
  .df7-business-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .planning-flow-shell{padding:10px!important}.planning-flow-label b{font-size:9px!important}
  .df7-process.product-flow-nav{padding:10px!important}.df7-process .product-flow-head b{font-size:11px!important}
  .df7-business-metrics{grid-template-columns:1fr 1fr!important;gap:7px!important}.df7-business-metrics .df54-metric{min-height:76px!important}
  .unified-scenario-head .actions-row{grid-template-columns:1fr 1fr!important}
}

/* ============================================================
   DIENGFLOW V7.0.2 — Mobile Drawer & Navigation Stability
   Fixes the real-phone overlay/sidebar stacking regression.
   ============================================================ */
@media(max-width:1180px){
  /* Explicit final stacking order: content < backdrop < drawer < topbar/bottom nav. */
  .sidebar-backdrop{
    z-index:640!important;
    background:rgba(22,63,68,.16)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #sidebar{
    z-index:650!important;
    background:rgba(248,253,252,.985)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .topbar{z-index:700!important}
  .mobile-bottom-nav{z-index:710!important}
  body.drawer-open .sidebar-backdrop{display:block!important}
  body:not(.drawer-open) .sidebar-backdrop{display:none!important}

  /* Mobile profile switch: readable labels without swallowing the header. */
  .brand{max-width:160px!important}
  .profile-switch-wrap{max-width:134px!important;width:134px!important}
  .profile-switch-wrap select{width:124px!important;max-width:124px!important;font-size:12px!important}
}
@media(max-width:420px){
  .topbar{padding-left:9px!important;padding-right:8px!important;gap:5px!important}
  .brand{max-width:146px!important}
  .brand-copy b{font-size:12px!important}
  .profile-switch-wrap{max-width:126px!important;width:126px!important}
  .profile-switch-wrap select{width:116px!important;max-width:116px!important;font-size:11px!important}
}

/* DIENGFLOW V7.1 — BOM Explosion & Integrated Component MRP */
.mrp-integrated-form{display:grid;gap:16px}.bom-editor{overflow:hidden}.bom-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.bom-head h2{margin:6px 0 4px}.bom-head p{margin:0;max-width:760px}.bom-table-wrap{overflow-x:auto;padding-bottom:6px}.bom-input-table{min-width:1250px;width:100%;border-collapse:separate;border-spacing:0 7px}.bom-input-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:0 6px;white-space:nowrap}.bom-input-table td{padding:0 5px;vertical-align:middle}.bom-input-table input,.bom-input-table select{min-width:78px;width:100%;padding:10px 9px}.bom-input-table td:nth-child(2) input{min-width:150px}.bom-input-table td:nth-child(8) input{min-width:170px}.bom-input-table td:nth-child(10) input{min-width:130px}.bom-lot{display:grid;grid-template-columns:80px 74px;gap:5px}.bom-driver{margin-top:12px;display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:16px;align-items:end}.bom-driver label{margin:0}.mrp-calc-all{margin-top:0}.bom-results{margin-top:16px}.bom-component-grid{display:grid;gap:12px}.bom-component-card{border:1px solid rgba(15,118,110,.18);border-radius:18px;background:rgba(255,255,255,.55);overflow:hidden}.bom-component-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px}.bom-component-card>summary::-webkit-details-marker{display:none}.bom-component-card>summary>div:first-child{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center}.bom-component-card summary em{grid-row:1/3;font-style:normal;font-weight:800;background:rgba(16,185,129,.13);padding:7px 9px;border-radius:10px}.bom-component-card summary small{grid-column:2;color:var(--muted)}.bom-summary-metrics{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.bom-summary-metrics span{background:rgba(255,255,255,.72);padding:7px 10px;border-radius:10px;font-size:.78rem;white-space:nowrap}.bom-component-body{padding:0 18px 18px}.bom-component-body .table-wrap{margin-top:12px}.bom-component-card[open]>summary{border-bottom:1px solid rgba(15,118,110,.12)}
@media(max-width:820px){.bom-head{flex-direction:column}.bom-head .secondary{width:100%}.bom-driver{grid-template-columns:1fr}.bom-input-table{min-width:1120px}.bom-component-card>summary{align-items:flex-start;flex-direction:column}.bom-summary-metrics{justify-content:flex-start;width:100%}.bom-summary-metrics span{flex:1 1 30%;text-align:center}.bom-component-body{padding:0 12px 14px}.bom-results{padding-left:12px;padding-right:12px}.mrp-integrated-form .two-col{grid-template-columns:1fr}.mrp-calc-all{min-height:52px;font-size:1rem}}


/* V7.2 — Commercial Readiness & Security */
.data-provenance-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(29,189,141,.25);border-radius:14px;background:rgba(29,189,141,.06);font-size:12px;color:var(--muted)}
.data-provenance-banner span{display:inline-flex;align-items:center;gap:6px}.data-provenance-banner b{font-size:10px;letter-spacing:.08em;color:var(--green)}.data-provenance-banner i{font-style:normal;color:var(--green)}.data-provenance-banner small{margin-left:auto;max-width:520px}
@media(max-width:760px){.data-provenance-banner{display:grid;grid-template-columns:1fr;gap:6px}.data-provenance-banner i{display:none}.data-provenance-banner small{margin-left:0;max-width:none;line-height:1.45}}

/* V7.3 Product Polish */
.quality-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.quality-actions small{opacity:.78}
#mrpForm [data-lot-field] input:disabled,#mrpForm [data-lot-field] textarea:disabled,.bom-lot input:disabled{opacity:.48;background:rgba(20,60,62,.06);cursor:not-allowed}
.mrp-inline-guide{margin:14px 0;padding:12px 14px;border:1px solid rgba(36,108,108,.18);border-radius:14px;background:rgba(232,247,244,.55)}.mrp-inline-guide summary{cursor:pointer;font-weight:800}.mrp-inline-guide p{margin:10px 0 0;line-height:1.55}
.mrp-bom-chart{margin:18px 0}.mrp-bom-chart .chart-head label{min-width:210px}.mrp-bom-chart .chart-head select{width:100%}
.scenario-full-report header small{display:block;margin-top:8px}
@media(max-width:700px){.quality-actions{align-items:stretch}.quality-actions button{width:100%}.mrp-bom-chart .chart-head{align-items:stretch}.mrp-bom-chart .chart-head label{width:100%}}
#mrpForm input[readonly][aria-disabled="true"],#mrpForm textarea[readonly][aria-disabled="true"]{opacity:.48;background:rgba(20,60,62,.06);cursor:not-allowed}


/* DIENGFLOW V8 — Company Workspace & Role Governance */
.workspace-card{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;padding:15px 16px;margin:8px 0;border:1px solid var(--line,#d9e8e5);background:rgba(255,255,255,.76);border-radius:16px;cursor:pointer}.workspace-card>span{font-size:24px}.workspace-card div{display:flex;flex-direction:column;gap:3px}.workspace-card small,.member-row small,.audit-row small,.integration-row small{color:var(--muted,#607779)}
.workspace-load-error{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px;border:1px solid rgba(190,70,70,.2);border-radius:14px;background:rgba(190,70,70,.06)}.workspace-load-error b{color:#9d3540}.workspace-load-error span{color:var(--muted);flex:1 1 240px}.workspace-load-error button{margin-left:auto}
.company-create-row{display:flex;gap:10px;align-items:center}.company-create-row input{flex:1}.company-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.workspace-role-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:rgba(16,185,129,.1);font-weight:800}.member-row,.audit-row,.integration-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid rgba(15,70,70,.1)}.member-row>div,.audit-row>div,.integration-row>div{display:flex;flex-direction:column;gap:2px}.member-row>span{font-weight:800}.integration-row{grid-template-columns:auto minmax(0,1fr) auto}.integration-row em{font-size:11px;font-style:normal;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(245,158,11,.12)}
@media(max-width:820px){.company-status-grid{grid-template-columns:1fr}.company-create-row{flex-direction:column;align-items:stretch}.member-row,.audit-row{grid-template-columns:1fr auto}.member-row button{grid-column:1/-1}.page-head .page-actions{width:100%;display:flex;justify-content:space-between;gap:8px}}

/* V8.0.1 Role Navigation */
.role-visibility-note{display:flex;flex-direction:column;gap:4px;padding:12px 14px;margin:12px 0;border:1px solid var(--df-border,#cfe8e3);border-radius:12px;background:rgba(45,199,154,.06)}
.role-visibility-note small{opacity:.72}
#mainNav button.profile-hidden,.side-bottom button.profile-hidden{display:none!important}

/* ============================================================
   DIENGFLOW V8.0.2 — Mobile Altro Drawer Reliability
   Static bottom-nav button must always expose the role-filtered drawer.
   ============================================================ */
@media(max-width:1180px){
  .mobile-drawer-account{display:flex!important;position:sticky;top:0;z-index:3;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 12px;padding:10px 10px 13px;background:rgba(250,253,252,.98);border-bottom:1px solid #d8e8e5}.mobile-drawer-account>div{min-width:0}.mobile-drawer-account small{display:block;color:#71898d;font-size:9px;letter-spacing:.1em}.mobile-drawer-account b{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#153d42;font-size:12px}.mobile-logout{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 14px;border:1px solid #efc9cd;border-radius:13px;background:#fff4f5;color:#a33340;font-weight:850}.mobile-logout.hidden{display:none!important}
  #sidebar.open{display:flex!important;visibility:visible!important;pointer-events:auto!important;transform:translateX(0)!important}
  body.drawer-open #sidebar{display:flex!important;visibility:visible!important;pointer-events:auto!important}
  #mobileMore{touch-action:manipulation!important;pointer-events:auto!important}
}
.import-source-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch;margin:16px 0}.import-source-grid>label{margin:0}.import-or{display:grid;place-items:center}.import-or span{background:var(--panel-2,#eef4f1);border-radius:999px;padding:8px;color:var(--muted)}.import-validation{margin-top:18px;border:1px solid var(--border);border-radius:18px;padding:18px;background:var(--panel)}.import-validation.good{border-color:#44a878}.import-validation.bad{border-color:#d26a6a}.import-validation-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.import-validation-head h2{margin:3px 0 12px}.import-errors{color:#b43d3d}.import-warnings{color:#8b6500}.import-validation .table-wrap{margin:14px 0;max-height:280px}@media(max-width:760px){.import-source-grid{grid-template-columns:1fr}.import-or{min-height:28px}.import-validation-head{display:block}}
/* V9 Product Map: operational data, decisions and simulations */
.business-empty,.business-source,.action-summary{display:flex;align-items:center;gap:18px;justify-content:space-between}.business-empty>span{font-size:2rem}.business-dashboard{margin:18px 0;padding:20px;border:1px solid rgba(22,184,166,.26);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(200,250,241,.58));box-shadow:0 15px 40px rgba(15,69,72,.08)}.business-source small,.business-source b{display:block}.business-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:18px 0}.business-kpis article,.whatif-result article{padding:14px;border:1px solid rgba(16,101,107,.14);border-radius:16px;background:rgba(255,255,255,.72)}.business-kpis article span,.business-kpis article small,.whatif-result small{display:block}.business-kpis article b,.whatif-result b{font-size:1.4rem}.business-dashboard-actions{display:flex;gap:10px;flex-wrap:wrap}.operational-import-review{margin-top:22px}.mapping-sheet-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.mapping-sheet{padding:16px;border:1px solid rgba(16,101,107,.18);border-radius:18px;background:rgba(255,255,255,.65)}.mapping-sheet.unmapped{opacity:.7}.mapping-sheet header{display:flex;justify-content:space-between;gap:12px}.mapping-sheet header small,.mapping-sheet header b{display:block}.mapping-pairs{display:grid;gap:6px;margin:12px 0}.mapping-pairs>div{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:7px 9px;border-radius:10px;background:rgba(16,101,107,.06)}.mapping-pairs .missing{opacity:.5}.mapping-warning{color:#9b5416}.action-summary{padding:18px 22px;margin-bottom:14px;border-radius:18px;background:rgba(255,255,255,.72)}.action-summary>b{font-size:2rem}.action-center-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.action-card{padding:20px;border:1px solid rgba(238,154,40,.3);border-left:5px solid #efa12d;border-radius:18px;background:rgba(255,255,255,.78)}.action-card.bad{border-left-color:#d94c5e}.action-card.done{opacity:.58}.action-severity{font-size:.72rem;font-weight:900;letter-spacing:.1em}.whatif-result{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.whatif-result .bad{border-color:#d94c5e}.whatif-result .good{border-color:#16a085}.business-coach{margin-bottom:18px}
@media(max-width:900px){.business-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mapping-sheet-list,.action-center-list{grid-template-columns:1fr}.whatif-result{grid-template-columns:repeat(2,minmax(0,1fr))}.business-empty,.business-source{align-items:flex-start;flex-direction:column}}

/* V9.1 Decision & Action Intelligence */
.action-summary>div{display:flex;align-items:baseline;gap:8px}.action-summary>div b{font-size:1.8rem}.action-summary>div span{color:var(--muted,#5d7377)}.decision-guardrail{display:flex;gap:12px;align-items:center;margin:0 0 16px;padding:13px 16px;border-left:4px solid #22b8d6;border-radius:12px;background:rgba(34,184,214,.09)}.action-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.action-status{padding:6px 9px;border-radius:999px;background:rgba(17,52,58,.08);font-size:.78rem;font-weight:800}.action-evidence,.action-cause,.action-recommendation{display:grid;gap:5px;margin:12px 0;padding:13px;border-radius:13px}.action-evidence{background:rgba(34,184,214,.08)}.action-evidence small,.action-cause small,.action-recommendation small{font-size:.7rem;font-weight:900;letter-spacing:.08em}.action-evidence span{font-size:.86rem}.action-cause.supported{border-left:4px solid #16a085;background:rgba(22,160,133,.08)}.action-cause.unknown{border-left:4px solid #f4a62a;background:rgba(244,166,42,.09)}.action-cause p,.action-recommendation p{margin:2px 0}.action-cause>span{font-size:.8rem;color:var(--muted,#5d7377)}.action-recommendation{background:rgba(22,184,166,.09)}.action-ownership{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.action-ownership>span{padding:9px;border:1px solid rgba(17,52,58,.1);border-radius:10px}.action-ownership small,.action-ownership b{display:block}.local-draft,.action-outcome{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(22,160,133,.1)}
@media(max-width:700px){.action-summary{align-items:flex-start;flex-direction:column}.action-ownership{grid-template-columns:1fr}.decision-guardrail{align-items:flex-start;flex-direction:column}.action-card .actions-row button{width:100%}}