@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--bg:#f5f7f6;--ink:#193b34;--muted:#7b8984;--line:#e6ece8;--green:#257b63;--lime:#d4edb7;--orange:#dd9161;--red:#c86b65;--side:#123f35}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}svg{vertical-align:middle;flex-shrink:0}button{transition:background .18s,transform .18s}button:active{transform:translateY(1px)}.shell{display:flex;min-height:100vh}.sidebar{width:228px;position:fixed;inset:0 auto 0 0;background:var(--side);color:#a9c5b9;padding:31px 22px;display:flex;flex-direction:column;z-index:30;overflow:auto}.brand{font:800 27px 'Manrope',sans-serif;color:#fff;letter-spacing:-1.4px;display:flex;align-items:center;gap:9px}.brand svg{color:#d6edb8}.workspace{margin:33px 0 27px;border:1px solid #ffffff20;border-radius:10px;padding:12px 10px;display:flex;align-items:center;gap:10px;color:#f2f9f4;font-size:12px}.work-icon{padding:8px;border-radius:8px;background:#ffffff15}.workspace small{display:block;color:#91b2a5;font-size:10px;margin-top:4px}.nav-label{font-size:9px;letter-spacing:1.8px;color:#7ba391;margin:0 12px 12px;font-weight:600}.nav{display:flex;flex-direction:column;gap:6px}.nav button{border:0;background:none;color:#a8c3b7;display:flex;gap:13px;align-items:center;padding:12px 14px;text-align:left;border-radius:8px;font-size:12px}.nav button:hover{background:#ffffff0b;color:#fff}.nav button.active{background:var(--lime);color:#193f32;font-weight:700}.nav .badge{margin-left:auto;font-size:9px;border-radius:5px;padding:1px 5px;background:#ffffff12}.nav button.active .badge{background:#bad79c}.sidebar-bottom{margin-top:auto;padding-top:30px}.share-card{background:linear-gradient(120deg,#ffffff10,#ffffff03);border:1px solid #ffffff16;border-radius:12px;padding:15px;margin-bottom:20px;color:#d5e4da}.share-card p{font-size:11px;line-height:1.7;color:#95b5a5}.share-card button{background:#ffffff12;border:1px solid #ffffff20;color:#e5f3e9;width:100%;padding:9px;border-radius:6px;font-size:10px}.side-user{display:flex;align-items:center;gap:10px;padding-top:17px;border-top:1px solid #ffffff16;color:white;font-size:11px}.avatar{display:grid;place-items:center;width:34px;height:34px;background:#e1e9d7;color:#365344;border-radius:50%;font-weight:700;font-size:11px}.side-user small{display:block;font-size:9px;color:#92b1a1;margin-top:4px}.main{margin-left:228px;flex:1;min-width:0}.topbar{height:77px;background:#ffffffb0;backdrop-filter:blur(15px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:15px}.breadcrumb{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:12px}.breadcrumb b{font-weight:500;color:#354f44}.top-actions{display:flex;align-items:center;gap:18px}.search-box{display:flex;align-items:center;gap:8px;color:#91a098}.search-box input{background:none;border:0;width:170px;font-size:11px;color:var(--ink)}.search-box kbd{font:9px monospace;padding:3px 5px;border:1px solid var(--line);border-radius:4px}.icon-btn{background:none;border:0;display:inline-grid;place-items:center;padding:6px;position:relative}.notice-dot{position:absolute;width:5px;height:5px;background:#d59970;border-radius:50%;right:8px;top:6px}.divider{height:20px;width:1px;background:var(--line)}.content{padding:29px 36px 35px;max-width:1700px;margin:auto}.eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:9px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head h1{font:750 27px 'Manrope',sans-serif;letter-spacing:-1px;margin:0 0 8px}.page-head p{font-size:11px;color:var(--muted);margin:0;line-height:1.7}.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn{border:1px solid #dce5de;background:#fff;border-radius:7px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;white-space:nowrap}.btn:hover{background:#f0f5f0}.btn.primary{background:#25765e;border-color:#25765e;color:white;box-shadow:0 3px 6px #235e3910}.btn.primary:hover{background:#195b48}.btn.light{background:#ffffff12;color:#e9f4e8;border-color:#ffffff25}.btn.small{padding:7px 10px;font-size:10px}.btn.danger{color:#ba5b52}.hero{border:1px solid #d6e2d3;border-radius:14px;background:radial-gradient(ellipse at 90% 30%,#e3edc8,transparent 55%),linear-gradient(115deg,#eff5e9,#eaf2e7);padding:25px 27px;margin-bottom:22px;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;min-height:143px}.hero .eyebrow{font-size:9px;color:#68816d;letter-spacing:1.5px}.hero h2{font:700 23px 'Manrope',sans-serif;letter-spacing:-.8px;margin:0 0 8px}.hero p{font-size:11px;color:#6d7d6c;margin:0;line-height:1.8}.hero-art{width:200px;height:120px;position:relative;margin-right:20px;flex-shrink:0}.orbit{border:1px solid #74936728;border-radius:50%;position:absolute;width:155px;height:155px;top:-18px;left:24px}.orbit.two{width:210px;height:210px;left:-4px;top:-44px}.mini-glass{position:absolute;backdrop-filter:blur(12px);background:#ffffff82;border:1px solid #ffffffc9;border-radius:11px;box-shadow:0 10px 22px #5269440c;transform:rotate(-7deg);padding:14px;top:12px;left:15px;width:124px}.mini-glass small{display:block;font-size:8px;color:#6e806c;margin-bottom:9px}.mini-glass b{font:800 24px Manrope}.mini-bars{display:flex;align-items:flex-end;gap:5px;height:29px;margin-top:7px}.mini-bars i{width:13px;border-radius:2px 2px 0 0;background:#8db07c}.success-chip{position:absolute;right:-4px;bottom:17px;border:1px solid #fff;background:#ffffffb0;backdrop-filter:blur(15px);border-radius:9px;padding:11px;font-size:9px;transform:rotate(5deg);box-shadow:0 8px 14px #5269440c}.success-chip svg{color:#477c50;margin-right:5px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:23px}.stat{border:1px solid var(--line);border-radius:11px;background:#ffffffa8;padding:18px 18px 15px;position:relative;overflow:hidden;text-align:left}.stat-label{font-size:10px;color:#7c8b81;display:flex;align-items:center;justify-content:space-between}.stat-icon{background:#f0f5ed;color:#5e806a;border-radius:7px;padding:6px}.stat-value{font:750 27px Manrope;letter-spacing:-1px;margin:12px 0 8px;line-height:1.2}.stat-value small{font:500 11px 'DM Sans';color:#8d9a8e;letter-spacing:0}.stat-footer{font-size:9px;color:#8b968c}.stat-footer strong{color:#4d865f;font-weight:500;margin-right:4px}.stat.warn .stat-icon{background:#fbf2e7;color:#c18d58}.stat.warn .stat-footer strong{color:#b68354}.panel{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}.panel-head{padding:20px 21px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-title{font:700 13px Manrope;letter-spacing:-.25px;margin:0}.panel-sub{font-size:10px;color:var(--muted);margin:5px 0 0}.text-btn{border:0;background:none;color:#6a8173;font-size:10px;display:flex;align-items:center;gap:5px;padding:4px}.text-btn:hover{color:var(--green)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:20px;margin-bottom:22px}.project-list{padding:0 20px 5px}.project-item{padding:15px 0;display:flex;align-items:center;gap:12px;border-top:1px solid #edf0ec;cursor:pointer}.project-item:hover .project-name{color:#3d8a65}.project-icon{width:38px;height:40px;border:1px solid #e9eee5;background:#f3f5ec;color:#7e9663;border-radius:9px;display:grid;place-items:center;flex-shrink:0}.project-icon.purple{background:#f2eff7;color:#9b85ac;border-color:#ede9f3}.project-icon.orange{background:#fcf2e8;color:#c69b72;border-color:#f4e9dd}.project-info{flex:1;min-width:0}.project-name{font-size:11px;font-weight:650;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{font-size:9px;color:#92a092;display:flex;align-items:center;gap:8px}.dot{width:3px;height:3px;background:#adb8ab;border-radius:50%}.project-progress{width:110px;margin:0 12px}.progress-meta{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#869580;margin-bottom:8px}.progress-meta b{color:#4a6b50;font-size:10px}.progress-track{height:5px;background:#edf1e9;border-radius:4px;overflow:hidden}.progress-track i{display:block;background:#80a56b;height:100%;border-radius:4px}.status{padding:4px 7px;border-radius:5px;background:#eef5e9;color:#718b5a;font-size:8px;white-space:nowrap;display:inline-block}.status.orange{background:#fcf2e6;color:#bb925c}.status.red{background:#fbedea;color:#bd786e}.status.blue{background:#eaf2f9;color:#6789a2}.status.gray{background:#f0f2f0;color:#859084}.chart-wrap{padding:0 17px 8px}.chart-legend{display:flex;gap:14px;font-size:9px;color:#83907f;margin:0 22px 4px}.chart-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:6px;height:6px;border-radius:2px;background:#6c9561}.legend-dot.light{background:#dfe9d5}.chart{width:100%;height:177px;display:block}.chart text{fill:#9aa797;font:9px 'DM Sans',sans-serif}.chart line{stroke:#edf0e9;stroke-dasharray:3 3}.chart-footer{border-top:1px solid #eff2ec;margin:0 20px;padding:12px 0;display:flex;justify-content:space-between;font-size:9px;color:#95a08e}.chart-footer b{color:#647b57;font-weight:500}.bottom-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:20px}.deadline-row{display:flex;align-items:center;gap:13px;padding:12px 20px;border-top:1px solid #edf0ec}.date-square{width:36px;min-width:36px;padding:5px 3px;border:1px solid #e8ede4;border-radius:7px;text-align:center;background:#f9fbf6}.date-square b{font:700 15px Manrope;display:block;line-height:1.2}.date-square small{font-size:8px;color:#98a28e}.deadline-row .project-name{font-size:10px;margin-bottom:5px}.activity{padding:3px 21px 13px}.activity-item{display:flex;gap:12px;position:relative;padding:8px 0 15px}.activity-item:not(:last-child):before{content:'';position:absolute;left:13px;top:36px;bottom:-1px;width:1px;background:#e8ede5}.activity-avatar{width:27px;height:27px;border-radius:50%;background:#edf2e6;font-size:8px;display:grid;place-items:center;flex-shrink:0;color:#6b835e}.activity-item p{font-size:10px;line-height:1.7;margin:0;color:#7a8977}.activity-item p b{color:#445c41;font-weight:600}.activity-item small{display:block;font-size:8px;color:#a3ad9b;margin-top:4px}.footer{margin-top:24px;display:flex;justify-content:space-between;color:#9aa695;font-size:9px}.demo-pill{display:flex;align-items:center;gap:5px}.demo-pill i{width:5px;height:5px;background:#99af83;border-radius:50%}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px;flex-wrap:wrap}.tabs{display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow:auto}.tabs button{white-space:nowrap;border:0;border-bottom:2px solid transparent;padding:13px 15px;background:none;color:#8b978a;font-size:11px}.tabs button.active{border-color:var(--green);color:var(--green);font-weight:600}.select{border:1px solid var(--line);background:#fff;border-radius:7px;padding:9px 12px;font-size:11px;color:#58705f;max-width:100%}.project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.project-card{padding:22px;position:relative;cursor:pointer;transition:box-shadow .2s,transform .2s}.project-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #143e3509}.project-card h3{font:700 16px Manrope;line-height:1.5;margin:17px 0 8px}.project-card p{font-size:11px;line-height:1.8;color:#8b9689}.project-card-top{display:flex;align-items:center;justify-content:space-between}.project-card .progress-meta{margin-top:24px}.project-card-foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8a9886}.card-budget{font-size:13px;font-weight:650;color:#59714f}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:9px;font-weight:500;letter-spacing:.4px;color:#889684;background:#f9fbf7;padding:13px 20px;border-bottom:1px solid var(--line)}td{padding:17px 20px;border-bottom:1px solid #edf1e9;font-size:11px;color:#6d7e65}td strong{color:#3b5635;font-weight:600}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:#fcfdfb}.positive{color:#498368}.negative{color:#b57e63}.num{text-align:right}.gantt{overflow:auto}.gantt-inner{min-width:850px}.gantt-head,.gantt-row{display:grid;grid-template-columns:240px 1fr}.gantt-head{background:#f8faf5;border-block:1px solid var(--line);font-size:10px;color:#87947e}.gantt-head>div:first-child{padding:15px 22px;border-right:1px solid var(--line)}.gantt-dates{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;align-items:center}.gantt-row{border-bottom:1px solid var(--line);min-height:68px}.gantt-label{padding:15px 22px;border-right:1px solid var(--line)}.gantt-label strong{display:block;font-size:11px;font-weight:600;margin-bottom:5px}.gantt-label small{font-size:9px;color:#8e9b85}.gantt-track{position:relative;display:flex;align-items:center;padding:15px 0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(16.666% - 1px),#eff2ec calc(16.666% - 1px),#eff2ec 16.666%)}.gantt-track:after{content:'';position:absolute;width:1px;height:100%;background:#c29e76;left:var(--today-left,48%);top:0;z-index:0;opacity:.5}.gantt-bar{height:27px;border:1px solid #d2e4c8;background:#e7f0df;border-radius:5px;position:relative;overflow:hidden;display:flex;align-items:center;padding:0 9px;color:#557745;font-size:9px;z-index:1;white-space:nowrap;cursor:pointer}.gantt-bar>i{position:absolute;inset:0 auto 0 0;background:#b8d0a640}.gantt-bar.red{border-color:#edcdc5;background:#fbebe5;color:#b37665}.gantt-bar.blue{border-color:#d1e1eb;background:#e9f1f7;color:#6b8fa2}.empty{padding:50px 25px;text-align:center;color:#8b9c83;font-size:12px;line-height:2}.task-board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.task-col{background:#edf1e9;border-radius:10px;padding:13px;min-height:350px}.task-col h3{font-size:11px;display:flex;justify-content:space-between;font-weight:600;margin:3px 0 18px}.task-card{background:white;border:1px solid #e2e8db;border-radius:8px;padding:15px;margin-bottom:12px;cursor:pointer}.task-card h4{font-size:11px;margin:10px 0;line-height:1.7}.task-card p{font-size:9px;color:#8b9b80}.task-card small{font-size:9px;color:#8e9b84}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo{height:150px;background:#eaf0e3;overflow:hidden;display:grid;place-items:center;color:#93aa80}.photo img{width:100%;height:100%;object-fit:cover}.update-body{padding:18px}.update-body h3{font-size:13px;margin:10px 0}.update-body p{font-size:11px;color:#8a9781;line-height:1.8}.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.file{padding:21px}.file h3{font-size:12px;margin:15px 0 9px;overflow-wrap:anywhere}.file p{font-size:10px;color:#91a183}.file-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.settings-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.padded{padding:24px}.field{display:block;margin:16px 0}.field>span{display:block;font-size:11px;font-weight:500;color:#526c4a;margin-bottom:8px}.field input,.field textarea,.field select{width:100%;padding:11px 12px;border:1px solid #dce4d6;border-radius:7px;background:#fff;color:#34522d;font-size:12px}.field textarea{min-height:85px;resize:vertical}.field small{display:block;font-size:10px;color:#91a081;margin-top:7px;line-height:1.7}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field-grid .field{margin:8px 0}.hint{padding:13px 16px;background:#f2f6ec;border:1px solid #e2ebd9;color:#80916e;border-radius:7px;font-size:10px;line-height:1.8}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);gap:15px}.switch-row b{font-size:11px;font-weight:500}.switch-row small{display:block;font-size:10px;color:#91a083;margin-top:5px}.switch{accent-color:#39805c;width:17px;height:17px}.modal-backdrop{position:fixed;inset:0;z-index:90;background:#0a251d66;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:#fcfdf9;max-width:570px;width:100%;max-height:90vh;overflow:auto;border-radius:16px;box-shadow:0 30px 100px #0b251d30}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:23px 25px 13px}.modal-head h2{font:700 19px Manrope;letter-spacing:-.5px;margin:0}.modal-body{padding:0 25px 25px}.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding-top:15px}.bulk-head{display:grid;grid-template-columns:1fr 96px 28px;gap:8px;font-size:10px;font-weight:600;color:#7b8f6f;margin:20px 0 8px}.bulk-rows{display:flex;flex-direction:column;gap:8px}.bulk-row{display:grid;grid-template-columns:1fr 96px 28px;gap:8px;align-items:center}.bulk-row input{padding:10px 11px;border:1px solid #dce4d6;border-radius:7px;background:#fff;color:#34522d;font-size:12px;width:100%}.bulk-attach{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:2px 0 6px}.bulk-invoice{flex:1;padding:8px 10px;border:1px solid #e3eadd;border-radius:6px;background:#fbfcfa;color:#34522d;font-size:11px}.bulk-file{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:#8a9c7d;cursor:pointer;white-space:nowrap;padding:6px 9px;border:1px dashed #d7e2cf;border-radius:6px}.bulk-file:hover{color:#5f7a52;border-color:#b9cda9}.bulk-file input{display:none}.bulk-file.has-file{color:#257b63;font-weight:600;border-style:solid;border-color:#a8cbb4;background:#f2f8f0}.bulk-row input:focus{border-color:#8fb37b}.bulk-del{color:#b1bda6}.bulk-del:hover{color:#c05a51}.bulk-actions{margin-top:10px}@media(max-width:520px){.bulk-head,.bulk-row{grid-template-columns:1fr 74px 24px}}.modal-foot .btn.danger{background:#c05a51;border-color:#c05a51;color:#fff}.modal-foot .btn.danger:hover{background:#a94a42}.modal p{font-size:11px;color:#859578;line-height:1.8}#toast{position:fixed;bottom:25px;left:calc(50% + 114px);transform:translate(-50%,20px);background:#163f31;color:#eff7e9;padding:13px 20px;border-radius:9px;box-shadow:0 8px 30px #152e2520;font-size:12px;z-index:110;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}.mobile-menu{display:none}.client-body{min-height:100vh;background:radial-gradient(ellipse at top,#e8f0df,transparent 70%),#f7f9f4}.client-top{max-width:1100px;margin:auto;padding:25px;display:flex;justify-content:space-between;align-items:center}.client-top .brand{color:#214935;font-size:25px}.client-top .brand svg{color:#407b50}.client-content{max-width:1000px;margin:auto;padding:20px 25px 60px}.client-hero{text-align:center;padding:30px 0}.client-hero h1{font:750 35px Manrope;letter-spacing:-1.2px;line-height:1.4}.client-hero p{font-size:12px;color:#87957b;line-height:1.8}.pin-card{max-width:410px;margin:60px auto;background:#ffffffb0;backdrop-filter:blur(14px);border:1px solid #fff;border-radius:19px;padding:32px;box-shadow:0 20px 70px #5471430b;text-align:center}.pin-card h1{font:700 24px Manrope;letter-spacing:-.5px}.pin-card p{font-size:12px;line-height:1.9;color:#89977e}.pin-card input{text-align:center;font-size:25px;letter-spacing:10px}.pin-card .btn{width:100%;padding:13px}.error{color:#bd695b;font-size:11px}.report-preview{background:#fff;border:1px solid var(--line);padding:36px;max-width:850px;margin:0 auto}.report-preview h1{font:750 28px Manrope}.report-preview p{font-size:12px;line-height:1.9;color:#7e8e71}.report-logo{font:800 25px Manrope;letter-spacing:-1px;color:#34774c}.report-section{margin:25px 0;padding-top:20px;border-top:1px solid var(--line)}.report-section h3{font:700 14px Manrope}.legend{display:flex;flex-wrap:wrap;gap:18px;padding:15px 21px;font-size:10px;color:#849478}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:3px;background:#d5e4c8}.calendar{display:grid;grid-template-columns:repeat(7,1fr)}.cal-day{min-height:100px;padding:10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;color:#8a997d}.cal-day.header{min-height:35px;text-align:center;background:#f7faf3}.cal-day.today{background:#f0f6e8}.cal-task{display:block;font-size:9px;padding:5px;background:#e9f0dd;margin-top:6px;color:#6a8551;border:0;border-radius:4px;text-align:left;width:100%}.cal-day.empty{background:#fafbf8;padding:10px}.cal-task.red{background:#fae9e4;color:#b47968}.notification{padding:15px 0;border-bottom:1px solid var(--line)}.notification b{font-size:12px}.notification p{margin:5px 0}.detail-progress{padding:22px;background:#eff5e8;border-radius:11px}.detail-progress b{font:750 30px Manrope}.search-result{padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}.search-result b{font-size:12px}.search-result small{display:block;font-size:10px;color:#8c9c7d;margin-top:6px}.board-note{font-size:10px;color:#8d9a83;margin-bottom:16px}.profile-button{border:0;background:none;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1500px){.content{padding:35px 45px}.hero{min-height:165px}.stat{padding:22px}.stat-value{font-size:31px}.project-item{padding:20px 0}.chart{height:210px}.deadline-row{padding-block:16px}.activity-item{padding-bottom:22px}}
@media(max-width:1150px){.sidebar{width:200px;padding:25px 16px}.main{margin-left:200px}.content{padding:25px}.topbar{padding:0 25px}.project-progress{width:75px;margin:0 2px}.project-item .status{display:none}.project-cards,.file-grid{grid-template-columns:repeat(2,1fr)}.stat{padding:15px}.stat-value{font-size:23px}.project-card h3{font-size:14px}.task-board{grid-template-columns:repeat(2,1fr)}#toast{left:calc(50% + 100px)}}
@media(max-width:850px){.sidebar{width:185px}.main{margin-left:185px}.content{padding:22px 18px}.topbar{padding:0 18px}.stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.search-box input{width:110px}.search-box kbd{display:none}.hero-art{width:140px;margin-right:0}.hero h2{font-size:21px}.page-head{align-items:flex-start}.page-head h1{font-size:23px}.page-head>.row{justify-content:flex-end}.photo-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}}
@media(max-width:620px){.sidebar{transform:translateX(-100%);width:228px;transition:transform .2s}.sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vw #11291a55}.main{margin-left:0}.mobile-menu{display:grid}.topbar{height:65px;padding:0 16px}.breadcrumb{font-size:10px;gap:7px}.top-actions{gap:10px}.search-box{display:none}.content{padding:23px 16px}.page-head{flex-wrap:wrap;gap:15px;margin-bottom:19px}.page-head h1{font-size:25px}.page-head>.row{justify-content:flex-start}.hero{padding:23px 20px;min-height:160px}.hero h2{font-size:21px;max-width:220px;line-height:1.45}.hero p{max-width:230px;font-size:10px}.hero-art{display:none}.hero .eyebrow{font-size:8px}.stats{gap:10px;margin-bottom:17px}.stat{padding:15px}.stat-value{font-size:25px}.stat-label{font-size:9px}.stat-footer{font-size:8px}.stat-icon{padding:4px}.stat-icon svg{width:14px;height:14px}.panel-head{padding:18px 17px 14px}.project-list{padding:0 16px 5px}.project-name{font-size:10px}.project-progress{width:72px}.meta{font-size:8px}.project-icon{width:32px;height:34px}.project-item{gap:10px}.dashboard-grid,.bottom-grid{gap:17px}.project-cards,.file-grid,.photo-grid{grid-template-columns:1fr}.project-card{padding:20px}.project-card h3{font-size:16px}.footer{gap:15px;font-size:8px;line-height:1.8}.task-board{grid-template-columns:1fr}.task-col{min-height:auto}.toolbar{gap:13px}.toolbar .row{gap:5px}.tabs button{padding:12px;font-size:10px}.btn{font-size:10px;padding:10px 12px}.field-grid{grid-template-columns:1fr;gap:0}.modal-backdrop{padding:14px}.modal{max-height:92vh}.modal-body{padding:0 20px 20px}.modal-head{padding:20px 20px 10px}.modal-head h2{font-size:17px}.calendar{min-width:630px}.report-preview{padding:22px}.client-hero h1{font-size:26px}.client-content{padding:10px 16px 40px}.client-top{padding:22px 16px}.client-top .row .btn{font-size:9px}.client-top .brand{font-size:22px}.pin-card{margin:30px 12px;padding:27px}.notification b{font-size:11px}#toast{left:50%;width:max-content;max-width:90vw}.gantt-label{padding:15px}.gantt-head,.gantt-row{grid-template-columns:200px 1fr}}
@media(prefers-reduced-motion:no-preference){.content{animation:enter .3s ease-out}@keyframes enter{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sidebar,.topbar,.page-head,.toolbar,.tabs,.footer,#overlay,#toast,.no-print{display:none!important}.main{margin:0}.content{padding:0}.report-preview{border:0;max-width:none;padding:10px}.panel{break-inside:avoid}.report-section{break-inside:avoid}body{background:#fff}.client-top{display:none}.client-content{padding:0}.client-hero{padding-top:0}}

.sidebar{scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}.workspace{min-height:60px}.workspace>div{min-width:0}.workspace>svg{margin-left:auto}.workspace small{white-space:nowrap}.stat-label,.panel-sub,.page-head p{font-size:11px}.project-name{font-size:12px}.meta{font-size:10px}.status{font-size:9px}.nav button{font-size:12px}.stat-footer,.chart-footer,.chart-legend{font-size:10px}.text-btn{font-size:11px}.activity-item p{font-size:11px}.activity-item small{font-size:9px}.deadline-row .project-name{font-size:11px}
@media print{.content:has(#report-document)>:not(#report-document){display:none!important}.report-preview .table-scroll{overflow:visible}table{white-space:normal}th,td{padding:10px 12px}}
/* Client project timeline: read-only, full project range. */
.client-timeline-panel{background:linear-gradient(120deg,#ffffffef,#ffffffb8);backdrop-filter:blur(12px);box-shadow:0 10px 35px #234a2b04}.client-timeline-panel>.panel-head{padding:24px}.client-timeline-panel .panel-title{font-size:17px}.client-timeline-summary{display:flex;flex-wrap:wrap;gap:22px;padding:13px 24px;background:#f5f8f0aa;border-block:1px solid #e5eddf;color:#7b8d71;font-size:11px}.client-timeline-summary>span{display:flex;align-items:center;gap:7px}.client-timeline-summary strong{font-weight:600;color:#4f7050}.client-timeline-summary>span:last-child{margin-left:auto;color:#91a185}.client-timeline-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b8cbb0 #f3f7ef}.client-gantt{min-width:780px}.client-gantt-head,.client-gantt-row{display:grid;grid-template-columns:245px 1fr}.client-gantt-head{height:68px;font-size:9px;color:#8a9b7b;font-weight:600;letter-spacing:1px}.client-gantt-head>div:first-child{padding:29px 23px;border-right:1px solid #e8eee2;background:#fafcf7;position:sticky;left:0;z-index:5}.client-gantt-axis{margin-right:25px;position:relative;margin-left:17px;letter-spacing:0;font-weight:500}.client-gantt-axis>span{position:absolute;top:17px;white-space:nowrap;font-size:10px}.today-chip{position:absolute;top:43px;transform:translateX(-50%);font-size:8px;font-weight:500;padding:4px 7px;border-radius:4px;background:#edf2d9;color:#8a9560;white-space:nowrap;z-index:2}.client-gantt-row{min-height:79px;border-top:1px solid #edf1e8}.client-gantt-label{padding:18px 23px;background:#fff;position:sticky;left:0;z-index:4;border-right:1px solid #e8eee2}.client-gantt-label strong{display:block;font-size:11px;line-height:1.5;color:#3c5b3c;font-weight:600}.client-gantt-label small{display:block;font-size:9px;color:#91a080;margin-top:6px}.client-gantt-track{position:relative;margin-left:17px;margin-right:25px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(16.666% - 1px),#edf1e7 calc(16.666% - 1px),#edf1e7 16.666%)}.client-gantt-track:after{content:'';position:absolute;left:var(--client-today);top:0;bottom:0;border-left:1px dashed #b0ac78;opacity:var(--show-today);z-index:2;pointer-events:none}.client-gantt-bar{position:absolute;top:24px;height:30px;border-radius:6px;background:#e6efdf;border:1px solid #c8debc;color:#55744c;overflow:hidden;z-index:1;min-width:8px}.client-gantt-bar i{position:absolute;inset:0 auto 0 0;background:#a6c79b70}.client-gantt-bar span{position:relative;display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:10px;font-weight:600;white-space:nowrap}.client-gantt-bar.done{background:#d9e9de;border-color:#b7d5c0;color:#4c7a5d}.client-gantt-bar.done i{background:#7da68c55}.client-gantt-bar.planned{background:#eaf1f7;border-color:#d5e2ec;color:#7592a6}.client-gantt-bar.late{background:#faebe6;border-color:#eac6b9;color:#b17d68}.client-gantt-bar.late i{background:#e3b19c50}.client-timeline-legend{border-top:1px solid #e9efe3;padding:17px 24px;gap:18px;font-size:10px}.client-timeline-note{margin-left:auto;color:#9aa88f}.client-task-percent{font:700 12px Manrope;color:#6b8860;min-width:35px}.client-scroll-hint{display:none;font-size:10px;color:#94a088;padding:0 20px}.client-timeline-panel .deadline-row .project-name{white-space:normal}.client-timeline-panel .deadline-row .meta{flex-wrap:wrap;line-height:1.7}
@media(max-width:620px){.client-timeline-panel>.panel-head{padding:20px 16px;flex-wrap:wrap;gap:15px}.client-timeline-panel .panel-title{font-size:16px}.client-timeline-summary{padding:13px 16px;gap:12px 15px;font-size:10px}.client-timeline-summary>span:last-child{margin-left:0}.client-gantt-head,.client-gantt-row{grid-template-columns:180px 1fr}.client-gantt-label{padding:16px}.client-gantt-label strong{font-size:10px}.client-gantt{min-width:730px}.client-gantt-head>div:first-child{padding-left:16px;font-size:8px}.client-scroll-hint{display:block}.client-timeline-legend{padding:15px 16px;gap:12px;font-size:9px}.client-timeline-note{margin-left:0;width:100%}.client-timeline-panel .deadline-row{padding:14px 16px;gap:9px}.client-timeline-panel .deadline-row .status{font-size:8px}}
/* ---------- Portal masuk ---------- */
#auth-gate{position:fixed;inset:0;z-index:200;display:none;overflow:auto;background:#f4f7f3}
#auth-gate.show{display:block}
.gate-shell{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}

/* Panel merek */
.gate-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:44px;padding:52px 56px 46px;color:#e8f2e9;background:radial-gradient(130% 105% at 6% -6%,#1d5f4e 0%,#123f35 44%,#0a2721 100%)}
.gate-brand::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);background-size:58px 58px;-webkit-mask-image:radial-gradient(125% 95% at 18% 4%,#000 24%,transparent 76%);mask-image:radial-gradient(125% 95% at 18% 4%,#000 24%,transparent 76%)}
.gate-brand-top,.gate-brand-mid,.gate-brand-foot{position:relative;z-index:2}
.gate-brand-top{display:flex;align-items:center;gap:11px}
.gate-mark{display:block;flex-shrink:0;filter:drop-shadow(0 4px 10px rgba(6,30,24,.35))}
.gate-wordmark{font:700 21px/1 'Manrope',sans-serif;letter-spacing:-.02em;color:#f2f8f1}
.gate-wordmark i{font-style:normal;color:#c7e2a7}
.gate-brand-mid{max-width:410px}
.gate-brand-mid h2{font:700 clamp(26px,2.5vw,36px)/1.18 'Manrope',sans-serif;letter-spacing:-.025em;margin:0 0 16px;color:#f4faf3}
.gate-brand-mid p{margin:0 0 26px;font-size:13.5px;line-height:1.65;color:#a9c6b7;max-width:340px}
.gate-points{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.gate-points li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#c2d9cb}
.gate-points svg{flex-shrink:0;color:#a9d685}
.gate-brand-foot{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#5f8577}
.gate-bars{position:absolute;inset:auto 0 0 0;height:44%;display:flex;flex-direction:column;justify-content:flex-end;gap:11px;z-index:1;pointer-events:none;opacity:.16}
.gate-bars i{display:block;height:9px;border-radius:99px;background:linear-gradient(90deg,#a9d685,#dff0c6)}

/* Panel formulir */
.gate-panel{display:flex;align-items:center;justify-content:center;padding:44px 32px;background:linear-gradient(160deg,#fbfcfa 0%,#f2f6f0 100%)}
.gate-card{width:100%;max-width:396px;background:#fff;border:1px solid #e5ece1;border-radius:20px;padding:38px 34px 30px;box-shadow:0 1px 2px rgba(18,63,53,.04),0 18px 44px -18px rgba(18,63,53,.22)}
.gate-card>*{animation:gateIn .5s cubic-bezier(.22,1,.36,1) backwards}
.gate-card>:nth-child(1){animation-delay:.02s}
.gate-card>:nth-child(2){animation-delay:.06s}
.gate-card>:nth-child(3){animation-delay:.1s}
.gate-card>:nth-child(4){animation-delay:.14s}
.gate-card>:nth-child(5){animation-delay:.18s}
.gate-card>:nth-child(6){animation-delay:.22s}
@keyframes gateIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gate-eyebrow{margin:0 0 10px;font:600 10.5px/1 'Manrope',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.gate-card h1{font:700 24px/1.22 'Manrope',sans-serif;letter-spacing:-.025em;margin:0 0 9px;color:var(--ink)}
.gate-sub{margin:0 0 26px;font-size:12.5px;line-height:1.6;color:#5b6b62}

#gate-form{display:grid;gap:16px}
.gate-field{display:grid;gap:7px}
.gate-field label{font-size:11.5px;font-weight:600;letter-spacing:.01em;color:#3f5349}
.gate-field input{width:100%;height:46px;padding:0 14px;border:1px solid #dbe4d7;border-radius:10px;background:#fff;color:var(--ink);font-size:13.5px;transition:border-color .16s,box-shadow .16s,background .16s}
.gate-field input::placeholder{color:#8b9a91}
.gate-field input:hover{border-color:#c6d4bf}
.gate-field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3.5px rgba(37,123,99,.13);background:#fff}
.gate-field input:user-invalid{border-color:#c86b65}
.gate-pass{position:relative;display:block}
.gate-pass input{padding-right:48px}
.gate-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#8fa396;transition:color .15s,background .15s}
.gate-eye:hover{color:#4f6459;background:#f1f6ee}
.gate-eye:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.gate-eye .gate-i-eye-off{display:none}
.gate-eye[aria-pressed=true] .gate-i-eye{display:none}
.gate-eye[aria-pressed=true] .gate-i-eye-off{display:block}

.gate-msg{margin:0;min-height:17px;font-size:11.5px;line-height:1.5;color:#9e443c}
.gate-msg.ok{color:#1d6b56}
.gate-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:2px;border:0;border-radius:10px;background:#123f35;color:#fff;font:600 13.5px/1 'DM Sans',sans-serif;letter-spacing:.01em;box-shadow:0 6px 16px -8px rgba(18,63,53,.6);transition:background .16s,box-shadow .16s,transform .12s}
.gate-submit:hover{background:#1a5245;box-shadow:0 10px 22px -10px rgba(18,63,53,.65)}
.gate-submit:active{transform:translateY(1px)}
.gate-submit:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.gate-submit:disabled{opacity:.62;cursor:progress}
.gate-submit svg{transition:transform .18s}
.gate-submit:hover svg{transform:translateX(2px)}
.gate-submit.busy svg{display:none}

.gate-loading{display:none;align-items:center;gap:11px;padding:22px 0 6px;font-size:12.5px;color:#78877f}
#auth-gate.gate-loading .gate-loading{display:flex}
#auth-gate.gate-loading #gate-form{display:none}
.gate-spinner{width:17px;height:17px;border-radius:50%;border:2px solid #dfe8db;border-top-color:var(--green);animation:gateSpin .7s linear infinite}
@keyframes gateSpin{to{transform:rotate(360deg)}}

.gate-foot{margin-top:24px;padding-top:20px;border-top:1px solid #eef2ec;text-align:center}
.gate-toggle{background:none;border:0;padding:2px;font-size:12px;color:#5b6b62;transition:color .15s}
.gate-toggle b{color:var(--green);font-weight:600}
.gate-toggle:hover b{text-decoration:underline}
.gate-toggle:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:5px}
.gate-note{margin:9px 0 0;font-size:10.5px;letter-spacing:.01em;color:#66766d}

@media (max-width:980px){
  .gate-shell{grid-template-columns:1fr}
  .gate-brand{gap:20px;padding:30px 28px 28px}
  .gate-brand-mid h2{font-size:23px;margin-bottom:9px}
  .gate-brand-mid p{display:none}
  .gate-points,.gate-bars{display:none}
  .gate-brand-foot{display:none}
  .gate-panel{padding:30px 20px 44px}
  .gate-card{max-width:420px}
}
@media (max-width:520px){
  .gate-brand{padding:24px 20px 22px}
  .gate-brand-mid h2{font-size:20px}
  .gate-panel{padding:22px 14px 36px}
  .gate-card{padding:30px 22px 24px;border-radius:16px;box-shadow:0 10px 30px -18px rgba(18,63,53,.25)}
  .gate-card h1{font-size:21px}
  .gate-sub{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .gate-card>*{animation:none}
  .gate-spinner{animation-duration:2.4s}
  .gate-submit,.gate-submit svg,.gate-eye,.gate-field input{transition:none}
  .gate-submit:active{transform:none}
  .gate-submit:hover svg{transform:none}
}
@media print{#auth-gate{display:none!important}}

/* ---------- Efek kaca (glassmorphism) ---------- */
#auth-gate{background:#0a2721}
.gate-shell{position:relative;isolation:isolate}

/* Latar mesh di panel formulir supaya kaca punya sesuatu untuk dibiaskan */
.gate-panel{
  position:relative;
  background:
    radial-gradient(58% 52% at 14% 10%, #e4f3cd 0%, rgba(228,243,205,0) 62%),
    radial-gradient(52% 48% at 90% 16%, #cfe9df 0%, rgba(207,233,223,0) 60%),
    radial-gradient(64% 58% at 82% 88%, #d6ecc9 0%, rgba(214,236,201,0) 64%),
    radial-gradient(46% 44% at 8% 92%, #bfe0d3 0%, rgba(191,224,211,0) 66%),
    linear-gradient(158deg, #fbfdfa 0%, #eef5ec 52%, #e8f1e6 100%);
  overflow:hidden;
}
.gate-panel::before{
  content:'';position:absolute;z-index:0;width:340px;height:340px;border-radius:50%;
  top:-96px;right:-72px;filter:blur(6px);
  background:radial-gradient(circle at 32% 30%, rgba(169,214,133,.55), rgba(169,214,133,0) 68%);
  pointer-events:none;
}
.gate-panel::after{
  content:'';position:absolute;z-index:0;width:280px;height:280px;border-radius:50%;
  bottom:-110px;left:-84px;filter:blur(8px);
  background:radial-gradient(circle at 60% 40%, rgba(37,123,99,.28), rgba(37,123,99,0) 70%);
  pointer-events:none;
}

/* Kartu kaca */
.gate-card{
  position:relative;z-index:1;
  background:linear-gradient(152deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.58) 48%, rgba(255,255,255,.46) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,.86);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(18,63,53,.05),
    0 26px 60px -30px rgba(12,52,42,.45),
    0 60px 120px -60px rgba(12,52,42,.32);
}
/* Kilau spekular di sudut kiri atas */
.gate-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 46%);
  opacity:.9;
}
/* Garis tepi tipis di bawah untuk memisahkan dari latar */
.gate-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Field kaca di dalam kartu */
.gate-field input{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-color:rgba(18,63,53,.14);
  box-shadow:inset 0 1px 2px rgba(12,52,42,.05);
}
.gate-field input:hover{border-color:rgba(18,63,53,.24);background:rgba(255,255,255,.8)}
.gate-field input:focus{
  background:rgba(255,255,255,.94);
  border-color:var(--green);
  box-shadow:0 0 0 3.5px rgba(37,123,99,.16), inset 0 1px 2px rgba(12,52,42,.04);
}
.gate-pass .gate-eye{background:rgba(255,255,255,.5);border-radius:8px}
.gate-pass .gate-eye:hover{background:rgba(255,255,255,.92)}

/* Tombol tetap solid agar kontras aksi utama kuat */
.gate-submit{
  background:linear-gradient(180deg,#175244 0%,#0f3b31 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px -10px rgba(12,52,42,.7);
}
.gate-submit:hover{background:linear-gradient(180deg,#1c6150 0%,#124438 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px -12px rgba(12,52,42,.75)}

/* Pemisah & footer menyatu dengan kaca */
.gate-foot{border-top-color:rgba(18,63,53,.1)}

/* Fallback: browser tanpa backdrop-filter tetap terbaca */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .gate-card{background:rgba(255,255,255,.95)}
  .gate-field input{background:#fff}
}

/* Seluler: latar gelap supaya kaca terlihat mewah */
@media (max-width:980px){
  #auth-gate{background:radial-gradient(130% 90% at 12% -8%,#1d5f4e 0%,#123f35 46%,#08211c 100%)}
  .gate-panel{
    background:transparent;
    padding:26px 20px 46px;
  }
  .gate-panel::before,.gate-panel::after{display:none}
  .gate-brand{
    padding:26px 22px 30px;
    background:transparent;
  }
  .gate-brand::after{display:none}
  .gate-brand-mid{display:none}
  .gate-brand-foot{display:none}
  .gate-brand-top{justify-content:center}
  .gate-card{
    background:linear-gradient(158deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 55%, rgba(255,255,255,.78) 100%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    border-color:rgba(255,255,255,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 6px rgba(4,24,20,.18),
      0 30px 64px -28px rgba(4,24,20,.6);
  }
  .gate-shell{min-height:100dvh}
}
@media (max-width:520px){
  .gate-panel{padding:18px 14px 38px}
  .gate-card{border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 22px 48px -24px rgba(4,24,20,.6)}
}

/* ---------- Panel merek: logo kiri atas, teks tengah rata kiri ---------- */
.gate-brand{
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  gap:0;
  padding:56px 56px 56px 56px;
}

/* Logo kembali ke pojok kiri atas */
.gate-brand-top{
  position:absolute;
  top:46px;
  left:52px;
  right:52px;
  transform:none;
  justify-content:flex-start;
  gap:11px;
}
.gate-mark{width:36px;height:36px}
.gate-wordmark{font-size:22px}

/* Blok teks: tengah vertikal, rata kiri */
.gate-brand-mid{
  max-width:470px;
  margin:0;
  text-align:left;
}
.gate-brand-mid h2{
  font-size:clamp(28px,3vw,40px);
  line-height:1.16;
  letter-spacing:-.028em;
  margin:0 0 20px;
  text-wrap:balance;
}
.gate-brand-mid p{
  font-size:14.5px;
  line-height:1.72;
  color:#b3cec0;
  max-width:400px;
  margin:0 0 32px;
  text-wrap:pretty;
}

/* Daftar nilai rata kiri, teks lebih besar */
.gate-points{
  width:auto;
  margin:0;
  gap:15px;
  text-align:left;
}
.gate-points li{
  font-size:13.5px;
  line-height:1.45;
  gap:11px;
  color:#cfe0d6;
}
.gate-points svg{width:16px;height:16px}

/* Kaki panel rata kiri juga */
.gate-brand-foot{
  position:absolute;
  left:52px;
  bottom:44px;
  transform:none;
  font-size:11px;
  letter-spacing:.13em;
  color:#6f978a;
}

.gate-bars{display:none}

@media (max-width:1180px){
  .gate-brand{padding:56px 40px}
  .gate-brand-top{top:40px;left:40px}
  .gate-brand-foot{left:40px}
  .gate-brand-mid{max-width:410px}
  .gate-brand-mid h2{font-size:clamp(25px,3.4vw,32px)}
  .gate-brand-mid p{font-size:13.5px;margin-bottom:26px}
  .gate-points li{font-size:12.5px}
}

@media (max-width:980px){
  .gate-brand{
    padding:96px 24px 40px;
    justify-content:flex-start;
    text-align:center;
    align-items:center;
  }
  .gate-brand-top{top:28px;left:24px;right:24px;justify-content:center;transform:none}
  .gate-mark{width:32px;height:32px}
  .gate-wordmark{font-size:19px}
  .gate-brand-mid{max-width:400px;margin:0 auto;text-align:center}
  .gate-brand-mid h2{font-size:26px;line-height:1.2;margin-bottom:12px}
  .gate-brand-mid p{font-size:13.5px;line-height:1.62;margin:0 auto;max-width:330px}
  .gate-points{display:none}
  .gate-brand-foot{display:none}
}

@media (max-width:520px){
  .gate-brand{padding:86px 20px 32px}
  .gate-brand-mid h2{font-size:24px}
  .gate-brand-mid p{font-size:13px}
}