@import "tailwindcss";

:root {
  --forest-950: #102d21;
  --forest-900: #163d2c;
  --forest-800: #20523c;
  --forest-100: #dce9df;
  --gold: #d5a13d;
  --gold-dark: #a8751d;
  --gold-pale: #f2e6c7;
  --ink: #183026;
  --muted: #66766e;
  --ivory: #f3efe5;
  --paper: #fbfaf6;
  --line: #dcded6;
  --white: #fff;
}

/* PHP/MySQL shared-hosting edition */
:root{--pd-green:#174f3b;--pd-green-2:#247554;--pd-orange:#ef8c2f;--pd-ink:#16251f;--pd-muted:#66766f;--pd-line:#dce5e0;--pd-soft:#f3f7f4;--pd-white:#fff;--pd-danger:#b83737;--pd-shadow:0 14px 38px rgba(17,63,46,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--pd-ink);background:#f7faf8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}button,input,select,textarea{font:inherit}.brand img{width:174px;height:auto;display:block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;padding:.65rem 1rem;border-radius:10px;border:1px solid transparent;text-decoration:none;font-weight:750;cursor:pointer}.btn.primary{background:var(--pd-green);color:#fff}.btn.ghost{background:#fff;color:var(--pd-green);border-color:var(--pd-line)}.pill,.status{display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:.3rem .65rem;font-size:.75rem;font-weight:800;background:#e8f4ed;color:var(--pd-green)}.status.rejected,.status.suspended,.status.DIBATALKAN,.status.SENGKETA{background:#fdecec;color:#a42e2e}.status.pending,.status.submitted,.status.pending_review,.status.MENUNGGU_KONFIRMASI,.status.MENUNGGU_DP,.status.MENUNGGU_PERSETUJUAN_DP{background:#fff3df;color:#9d5d10}.status.verified,.status.active,.status.LUNAS,.status.DITERIMA,.status.SELESAI,.status.paid{background:#e3f5e9;color:#176b3d}.eyebrow{color:var(--pd-orange);font-size:.73rem;font-weight:850;letter-spacing:.13em;margin:0 0 .55rem}.flash{position:relative;padding:.85rem 1rem;margin:0 0 1rem;border-radius:10px;border:1px solid;transition:.3s}.flash.success{color:#17613a;background:#e9f7ee;border-color:#bce0c8}.flash.error{color:#972e2e;background:#fff0f0;border-color:#edc4c4}.flash.fade{opacity:.35}.notice-card{padding:1rem 1.15rem;border-radius:12px;background:#fff5df;border:1px solid #f1d89f;margin-bottom:1rem}.notice-card p{margin:.35rem 0 0;color:#70562d}
.public-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,5vw,5rem);background:#fff;border-bottom:1px solid var(--pd-line);position:sticky;top:0;z-index:20}.public-header nav{display:flex;align-items:center;gap:1.25rem}.public-header nav>a:not(.btn){text-decoration:none;font-weight:650}.hero-php{min-height:680px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:center;gap:5rem;padding:5rem clamp(1rem,7vw,7rem);background:radial-gradient(circle at 80% 30%,#dfeee4,transparent 34%),linear-gradient(135deg,#f8fbf8,#edf5ef)}.hero-php h1{font-size:clamp(2.5rem,5.5vw,5.2rem);line-height:1.02;letter-spacing:-.055em;max-width:900px;margin:1.1rem 0}.hero-php p{font-size:1.12rem;line-height:1.75;color:var(--pd-muted);max-width:760px}.hero-actions{display:flex;gap:.75rem;margin-top:2rem}.hero-card{min-height:380px;border-radius:32px;background:var(--pd-green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;box-shadow:0 30px 70px rgba(16,68,48,.23)}.hero-card img{width:190px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.18));margin-bottom:1.4rem}.hero-card strong{font-size:1.25rem}.hero-card span{opacity:.75;margin-top:.4rem}.public-section{padding:5rem clamp(1rem,7vw,7rem);max-width:1500px;margin:auto}.public-section.soft{max-width:none;background:#edf4ef}.public-section h2{font-size:clamp(2rem,4vw,3.5rem);max-width:900px;letter-spacing:-.04em}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}.feature-grid article{background:#fff;padding:1.6rem;border-radius:18px;border:1px solid var(--pd-line);box-shadow:0 10px 30px rgba(25,70,53,.05)}.feature-grid article>b{color:var(--pd-orange)}.feature-grid h3{margin:.75rem 0 .4rem}.feature-grid p{color:var(--pd-muted);line-height:1.6}.public-footer{padding:2.5rem clamp(1rem,7vw,7rem);background:#0f3025;color:#d8e6df;display:flex;gap:2.5rem;align-items:flex-start}.public-footer img{width:170px;filter:brightness(0) invert(1)}.public-footer p{margin:0;line-height:1.7}.public-footer a{color:#fff}
.auth-body{min-height:100vh;background:linear-gradient(135deg,#edf5ef,#fff6e9);padding:2rem}.auth-shell{max-width:860px;margin:auto}.auth-brand{display:block;width:max-content;margin:0 auto 1.5rem}.auth-card{background:#fff;padding:clamp(1.25rem,4vw,3rem);border-radius:24px;box-shadow:var(--pd-shadow);border:1px solid var(--pd-line)}.auth-card h1{font-size:clamp(2rem,4vw,3.2rem);margin:.3rem 0}.auth-card>p{color:var(--pd-muted);line-height:1.6}.auth-links{display:flex;justify-content:space-between;margin-top:1.4rem}.auth-links a{color:var(--pd-green);font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.25rem}.form-grid.one{grid-template-columns:1fr}.form-grid label{display:flex;flex-direction:column;gap:.4rem}.form-grid label>span,.filter-bar label>span{font-size:.78rem;font-weight:780;color:#52635b}.form-grid input,.form-grid select,.form-grid textarea,.filter-bar input,.filter-bar select,.mini-form input,.mini-form select{width:100%;border:1px solid #cfdcd5;border-radius:9px;padding:.72rem .8rem;background:#fff;color:var(--pd-ink)}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid rgba(36,117,84,.18);border-color:var(--pd-green-2)}.wide{grid-column:1/-1}.section-form{padding-top:1rem}.compact{padding:1rem;background:var(--pd-soft);border-radius:12px}.mini-form{display:flex;gap:.35rem;flex-wrap:wrap}.mini-form input,.mini-form select{width:auto;min-width:120px;padding:.45rem}.mini-form button,.row-actions button{border:1px solid var(--pd-line);background:#fff;border-radius:7px;padding:.42rem .6rem;cursor:pointer}.link-danger{border:0;background:transparent;color:var(--pd-danger);font-weight:750;padding:.4rem 0;cursor:pointer}
.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#123d2f;color:#fff;padding:1.2rem;display:flex;flex-direction:column;z-index:40}.side-brand{background:#fff;border-radius:12px;padding:.7rem 1rem}.side-brand img{width:160px}.org-card{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem .65rem;border-bottom:1px solid rgba(255,255,255,.12)}.org-card small{opacity:.6;font-size:.68rem;letter-spacing:.12em}.org-card strong{line-height:1.3}.side-nav{display:flex;flex-direction:column;gap:.3rem;margin-top:1rem}.side-nav a{display:grid;grid-template-columns:28px 1fr auto;align-items:center;text-decoration:none;padding:.75rem .7rem;border-radius:9px;color:#d9e7e0}.side-nav a:hover,.side-nav a.active{background:rgba(255,255,255,.13);color:#fff}.side-nav i{font-style:normal}.side-nav b{background:var(--pd-orange);border-radius:999px;min-width:20px;text-align:center;font-size:.7rem;padding:.15rem}.logout-form{margin-top:auto}.logout-form button{width:100%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;padding:.75rem;border-radius:9px;text-align:left;cursor:pointer}.app-main{min-width:0}.app-header{min-height:78px;background:#fff;border-bottom:1px solid var(--pd-line);display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:1rem clamp(1rem,3vw,2.5rem);position:sticky;top:0;z-index:30}.app-header h1{font-size:1.35rem;margin:.1rem 0}.app-header small{font-size:.65rem;letter-spacing:.11em;color:var(--pd-muted);font-weight:800}.header-actions{display:flex;align-items:center;gap:.65rem}.notification-button{position:relative;text-decoration:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--pd-line);border-radius:10px;color:var(--pd-green)}.notification-button b{position:absolute;top:-6px;right:-6px;background:var(--pd-orange);color:#fff;border-radius:999px;font-size:.65rem;min-width:19px;padding:.15rem;text-align:center}.avatar{width:38px;height:38px;border-radius:10px;background:var(--pd-green);color:#fff;display:grid;place-items:center;font-weight:800}.header-logout{border:1px solid var(--pd-line);background:#fff;padding:.55rem .75rem;border-radius:9px;color:var(--pd-danger);font-weight:700;cursor:pointer}.mobile-menu-button{display:none;border:1px solid var(--pd-line);background:#fff;border-radius:9px;padding:.55rem .7rem;font-size:1.1rem}.workspace-content{padding:clamp(1rem,3vw,2.5rem);max-width:1600px;margin:auto}.welcome{background:linear-gradient(120deg,#174f3b,#286e52);color:#fff;border-radius:20px;padding:2rem;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.welcome h2{font-size:2rem;margin:.2rem 0}.welcome p{max-width:650px;opacity:.8}.welcome img{width:140px;opacity:.7}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.stat-grid article{background:#fff;border:1px solid var(--pd-line);border-radius:14px;padding:1.2rem;display:flex;flex-direction:column;gap:.5rem}.stat-grid small{color:var(--pd-muted)}.stat-grid strong{font-size:2rem;color:var(--pd-green)}.panel,.table-panel,.order-card{background:#fff;border:1px solid var(--pd-line);border-radius:16px;padding:1.25rem;margin:1rem 0;box-shadow:0 7px 24px rgba(17,63,46,.035)}.panel h2,.table-panel h2,.order-card h2{margin:.15rem 0 .55rem}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.quick-grid a{display:flex;flex-direction:column;gap:.3rem;padding:1rem;border:1px solid var(--pd-line);border-radius:12px;text-decoration:none}.quick-grid a:hover{border-color:var(--pd-green-2);background:var(--pd-soft)}.quick-grid span{font-size:.86rem;color:var(--pd-muted);line-height:1.45}.filter-bar{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap}.filter-bar label{display:flex;flex-direction:column;gap:.3rem;flex:1 1 180px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.product-card,.opportunity-card{background:#fff;border:1px solid var(--pd-line);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(17,63,46,.04)}.product-card>img,.image-placeholder{width:100%;height:205px;object-fit:cover;background:#dbe9df;display:grid;place-items:center;color:var(--pd-green);font-size:2rem;font-weight:900}.product-card>div,.opportunity-card{padding:1.2rem}.product-card h3,.opportunity-card h3{margin:.35rem 0}.product-card p,.product-card span,.opportunity-card p,.opportunity-card span{display:block;color:var(--pd-muted);font-size:.9rem;line-height:1.5}.product-card strong,.opportunity-card strong{display:block;color:var(--pd-green);margin:.5rem 0}.product-card details,.opportunity-card details{margin-top:1rem}.empty-card{background:#fff;border:1px dashed #b9cbc1;border-radius:16px;padding:3rem;text-align:center;color:var(--pd-muted);grid-column:1/-1}.table-panel{overflow-x:auto}.table-panel table,.document table{width:100%;border-collapse:collapse}.table-panel th,.table-panel td,.document th,.document td{text-align:left;border-bottom:1px solid var(--pd-line);padding:.8rem;vertical-align:top}.table-panel th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pd-muted)}.table-panel td small,.table-panel td b{display:block;margin-top:.2rem}.row-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.offer-list{display:flex;flex-direction:column;gap:.7rem}.offer-list article{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem;border:1px solid var(--pd-line);border-radius:10px}.offer-list article span,.offer-list article small{display:block;color:var(--pd-muted);margin-top:.2rem}.order-card{border-left:4px solid var(--pd-green)}.order-summary{display:flex;gap:1.5rem;flex-wrap:wrap;margin:1rem 0;padding:1rem;background:var(--pd-soft);border-radius:10px}.order-summary span{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--pd-muted)}.order-summary b{color:var(--pd-ink);font-size:1rem}.action-details{display:inline-block;margin:.55rem .4rem .2rem 0}.action-details>summary{list-style:none}.notification-list{display:flex;flex-direction:column}.notification-list a{display:grid;grid-template-columns:12px 1fr;gap:.8rem;padding:1rem .4rem;border-bottom:1px solid var(--pd-line);text-decoration:none}.notification-list a i{width:9px;height:9px;margin-top:.4rem;border-radius:999px;background:#c8d5ce}.notification-list a.unread i{background:var(--pd-orange)}.notification-list a.unread{background:#fffaf1}.notification-list p{margin:.25rem 0;color:var(--pd-muted)}.notification-list small{color:#8a9891}
.document-body{background:#e9eeeb;padding:2rem}.document{max-width:920px;margin:auto;background:#fff;padding:3rem;box-shadow:var(--pd-shadow)}.document>header{display:flex;justify-content:space-between;gap:2rem;border-bottom:2px solid var(--pd-green);padding-bottom:1.5rem}.document>header img{width:190px;object-fit:contain}.document>header div{display:flex;flex-direction:column;max-width:450px;text-align:right;font-size:.8rem;line-height:1.5}.document-title{display:flex;justify-content:space-between;align-items:flex-end;margin:2rem 0}.document-title h1{margin:0}.document-parties{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}.document-parties>div{border:1px solid var(--pd-line);padding:1rem;display:flex;flex-direction:column;gap:.35rem}.document-total{margin:1.5rem 0 1.5rem auto;max-width:360px;display:flex;flex-direction:column;gap:.6rem;text-align:right}.document-total strong{font-size:1.25rem}.document dl{display:grid;grid-template-columns:180px 1fr}.document dt,.document dd{padding:.75rem;border-bottom:1px solid var(--pd-line);margin:0}.document dt{font-weight:700}.document footer{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--pd-line)}.sidebar-backdrop{display:none}
@media(max-width:1100px){.feature-grid,.quick-grid{grid-template-columns:repeat(2,1fr)}.card-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.hero-php{gap:2rem}}
@media(max-width:820px){.public-header nav>a:not(.btn){display:none}.hero-php{grid-template-columns:1fr;padding-top:3rem}.hero-card{min-height:280px}.feature-grid{grid-template-columns:1fr}.public-footer{flex-direction:column}.app-shell{display:block}.sidebar{position:fixed;left:0;top:0;width:min(86vw,310px);transform:translateX(-105%);transition:transform .25s;box-shadow:15px 0 40px rgba(0,0,0,.25)}.menu-open .sidebar{transform:translateX(0)}.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(5,21,15,.5);z-index:35;opacity:0;pointer-events:none;transition:.25s}.menu-open .sidebar-backdrop{opacity:1;pointer-events:auto}.mobile-menu-button{display:block}.app-header{padding:.8rem 1rem}.header-logout{display:none}.workspace-content{padding:1rem}.card-grid{grid-template-columns:1fr}.welcome img{width:90px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.table-panel{padding:.6rem}.offer-list article{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.auth-body{padding:.75rem}.auth-card{border-radius:16px}.hero-php{min-height:auto;padding:3rem 1rem}.hero-php h1{font-size:2.55rem}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.public-section{padding:3rem 1rem}.public-header{padding:0 1rem}.public-header .brand img{width:145px}.public-header nav{gap:.4rem}.public-header nav .btn{padding:.5rem .65rem;font-size:.8rem}.stat-grid{grid-template-columns:1fr 1fr}.stat-grid article{padding:.9rem}.quick-grid{grid-template-columns:1fr}.welcome{padding:1.25rem}.welcome h2{font-size:1.5rem}.welcome img{display:none}.panel-heading,.document-title{flex-direction:column;align-items:flex-start}.filter-bar{align-items:stretch}.filter-bar>*{width:100%}.order-summary{display:grid;grid-template-columns:1fr 1fr}.document-body{padding:0}.document{padding:1.2rem}.document>header,.document footer{flex-direction:column;text-align:left}.document>header div{text-align:left}.document-parties{grid-template-columns:1fr}.document dl{grid-template-columns:1fr}.document dd{padding-top:0}.header-actions{gap:.35rem}.avatar{display:none}}
@media print{.document-body{background:#fff;padding:0}.document{box-shadow:none;max-width:none;padding:0}.document footer button{display:none}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.staging-strip { align-items:center; background:#d5a13d; color:#102d21; display:flex; font-size:10px; gap:14px; justify-content:center; min-height:34px; padding:6px 20px; }
.staging-strip b { background:#102d21; border-radius:3px; color:white; font-size:8px; letter-spacing:1.2px; padding:5px 8px; }.staging-strip a { border-bottom:1px solid currentColor; font-weight:900; margin-left:12px; }

/* Staging UAT */
.uat-page { background:#f3f4ef; min-height:100vh; }
.uat-header { align-items:center; background:white; border-bottom:1px solid #dde1da; display:flex; justify-content:space-between; min-height:88px; padding:0 6vw; }.uat-header > a:first-child { display:flex; }.uat-environment { align-items:center; display:flex; gap:10px; }.uat-environment span { background:var(--gold); border-radius:3px; color:var(--forest-950); font-size:8px; font-weight:900; letter-spacing:1.2px; padding:7px 9px; }.uat-environment b { font-family:Georgia,serif; font-size:18px; font-weight:500; }.uat-home-link { color:var(--forest-800); font-size:10px; font-weight:800; }
.uat-hero { align-items:center; background:var(--forest-950); color:white; display:grid; gap:60px; grid-template-columns:1.25fr .75fr; padding:70px 7vw; }.uat-hero h1 { font-family:Georgia,serif; font-size:clamp(42px,4.7vw,68px); font-weight:500; letter-spacing:-2.7px; line-height:1.02; margin:20px 0; }.uat-hero h1 em { color:var(--gold); font-weight:400; }.uat-hero > div:first-child > p:last-child { color:#afbeb7; font-size:13px; line-height:1.8; max-width:680px; }
.uat-data-state { align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:8px; display:flex; gap:16px; padding:22px; }.uat-data-state > span { align-items:center; background:var(--gold); border-radius:50%; color:var(--forest-950); display:flex; font-size:13px; font-weight:900; height:42px; justify-content:center; width:42px; }.uat-data-state small,.uat-data-state b,.uat-data-state p { display:block; }.uat-data-state small { color:#95a89f; font-size:8px; text-transform:uppercase; }.uat-data-state b { font-family:Georgia,serif; font-size:19px; margin:6px 0; }.uat-data-state p { color:#aebcb5; font-size:9px; margin:0; }
.uat-section { padding:55px 7vw 10px; }.uat-section-head { align-items:end; display:flex; justify-content:space-between; margin-bottom:24px; }.uat-section-head h2 { font-family:Georgia,serif; font-size:30px; font-weight:500; letter-spacing:-1px; margin:10px 0 0; }.uat-section-head > div > p:last-child { color:var(--muted); font-size:10px; }.uat-actions { display:flex; gap:8px; }.uat-actions .button { font-size:9px; min-height:40px; }
.uat-metrics { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); }.uat-metrics article { background:white; border:1px solid #dfe2dc; border-radius:6px; padding:17px; }.uat-metrics b,.uat-metrics span { display:block; }.uat-metrics b { color:var(--forest-900); font-family:Georgia,serif; font-size:25px; }.uat-metrics span { color:var(--muted); font-size:8px; margin-top:6px; }
.uat-personas { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }.uat-personas article { align-items:center; background:white; border:1px solid #dfe2dc; border-radius:7px; display:grid; gap:13px; grid-template-columns:auto 1fr; padding:18px; }.uat-personas h3 { font-family:Georgia,serif; font-size:15px; font-weight:500; margin:0 0 4px; }.uat-personas p { color:var(--muted); font-size:8px; margin:0; }.uat-personas button { background:#f3e6c6; border:0; border-radius:3px; color:#795916; font-size:8px; font-weight:900; grid-column:1/-1; min-height:34px; }.uat-personas button:disabled { cursor:not-allowed; opacity:.45; }
.uat-scenarios { padding-bottom:65px; }.uat-scenarios > div:last-child { background:white; border:1px solid #dfe2dc; border-radius:7px; }.uat-scenarios article { align-items:center; border-top:1px solid #eceee9; display:grid; gap:15px; grid-template-columns:auto 1fr auto; padding:16px 20px; }.uat-scenarios article:first-child { border-top:0; }.uat-scenarios article > span { color:var(--gold-dark); font-size:9px; font-weight:900; }.uat-scenarios b,.uat-scenarios p { display:block; }.uat-scenarios b { font-size:10px; }.uat-scenarios p { color:var(--muted); font-size:8px; margin:4px 0 0; }.uat-scenarios i { background:#dceee2; border-radius:20px; color:#2f6c4b; font-size:7px; font-style:normal; font-weight:900; padding:7px 9px; text-transform:uppercase; }
.uat-footer { background:#0a2118; color:#8fa098; display:flex; font-size:9px; gap:14px; justify-content:center; padding:25px; }.uat-footer b { color:var(--gold); letter-spacing:1px; }
.uat-persona-banner { align-items:center; background:var(--gold); color:var(--forest-950); display:flex; gap:13px; min-height:38px; padding:6px 22px; }.uat-persona-banner > span { background:var(--forest-950); border-radius:3px; color:white; font-size:7px; font-weight:900; letter-spacing:1px; padding:5px 7px; }.uat-persona-banner b { font-size:9px; }.uat-persona-banner small { color:#71571c; font-size:8px; }.uat-persona-banner button { background:transparent; border:0; border-bottom:1px solid currentColor; color:var(--forest-950); font-size:8px; font-weight:900; margin-left:auto; padding:3px 0; }
@media(max-width:1000px){.uat-metrics{grid-template-columns:repeat(4,1fr)}.uat-personas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.staging-strip{align-items:flex-start;flex-wrap:wrap;justify-content:flex-start}.staging-strip a{margin-left:0}.uat-header{align-items:flex-start;flex-direction:column;gap:12px;padding:18px 22px}.uat-home-link{display:none}.uat-hero{gap:30px;grid-template-columns:1fr;padding:55px 22px}.uat-section{padding-left:22px;padding-right:22px}.uat-section-head{align-items:flex-start;flex-direction:column;gap:18px}.uat-actions{width:100%}.uat-actions .button{flex:1}.uat-metrics{grid-template-columns:repeat(2,1fr)}.uat-personas{grid-template-columns:1fr}.uat-persona-banner{align-items:flex-start;flex-wrap:wrap}.uat-persona-banner button{margin-left:0;width:100%;text-align:left}}

.site-header {
  align-items: center; background: rgba(251,250,246,.94); border-bottom: 1px solid rgba(16,45,33,.1);
  display: flex; height: 88px; justify-content: space-between; padding: 0 clamp(24px,5vw,80px); position: relative; z-index: 10;
}
.brand { align-items: center; display: inline-flex; }
.pd-brand { align-items: center; display: inline-flex; gap: 10px; }
.pd-emblem { height: 55px; object-fit: contain; width: 54px; }
.pd-wordmark { color: var(--forest-900); font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -1.1px; line-height: .9; }
.pd-wordmark b { color: var(--forest-900); }.pd-wordmark strong { color: #68a92c; }
.pd-wordmark small { color: var(--gold-dark); display: block; font-size: 6px; font-weight: 800; letter-spacing: 1.25px; margin-top: 8px; text-transform: uppercase; }
.pd-brand-inverse .pd-wordmark b { color: white; }.pd-brand-inverse .pd-wordmark strong { color: #9cc75f; }
.pd-brand-compact .pd-wordmark { font-size: 17px; }.pd-brand-compact .pd-emblem { height: 43px; width: 42px; }
.pd-full-logo { height: auto; object-fit: contain; width: 100%; }
.desktop-nav { align-items: center; display: flex; gap: 38px; }
.desktop-nav a, .text-link { color: #43564c; font-size: 13px; font-weight: 700; }
.desktop-nav a:hover { color: var(--forest-900); }
.header-actions { align-items: center; display: flex; gap: 22px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 4px; display: inline-flex; font-size: 13px; font-weight: 800; gap: 16px; justify-content: center; letter-spacing: .1px; min-height: 52px; padding: 0 24px; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding: 0 18px; }
.button-gold { background: var(--gold); color: var(--forest-950); }
.button-gold:hover { background: #e0b253; }
.button-primary { background: var(--forest-900); color: white; }
.button-primary:hover { background: var(--forest-800); }
.button-light { background: transparent; border-color: #aeb9b1; color: var(--forest-900); }

.hero { background: var(--ivory); display: grid; grid-template-columns: 1.03fr .97fr; min-height: 690px; overflow: hidden; }
.hero-copy { align-self: center; max-width: 735px; padding: 84px 7vw 72px; }
.eyebrow { align-items: center; color: var(--gold-dark); display: flex; font-size: 11px; font-weight: 800; gap: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow span { background: currentColor; display: inline-block; height: 1px; width: 28px; }
.eyebrow.light { color: var(--gold); }
.hero h1 { color: var(--forest-950); font-family: Georgia, serif; font-size: clamp(52px,5.4vw,86px); font-weight: 500; letter-spacing: -4.2px; line-height: .99; margin: 26px 0; max-width: 680px; }
.hero h1 em, .section h2 em { color: var(--gold-dark); font-weight: 400; }
.hero-lead { color: #506158; font-size: 16px; line-height: 1.8; max-width: 610px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.trust-row { display: flex; gap: clamp(25px,4vw,62px); margin-top: 50px; }
.trust-row span { border-left: 1px solid #c8ccc5; padding-left: 16px; }
.trust-row b { color: var(--forest-900); display: block; font-family: Georgia, serif; font-size: 24px; }
.trust-row small { color: var(--muted); display: block; font-size: 10px; margin-top: 5px; }

.hero-visual { background: var(--forest-900); min-height: 690px; overflow: hidden; position: relative; }
.hero-visual:before { border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; height: 660px; left: 4%; position: absolute; top: 2%; width: 660px; }
.orb { border: 1px solid rgba(213,161,61,.22); border-radius: 50%; position: absolute; }
.orb-one { height: 500px; left: 15%; top: 18%; width: 500px; }
.orb-two { height: 340px; left: 28%; top: 30%; width: 340px; }
.procurement-card { background: rgba(255,255,255,.97); border-radius: 8px; box-shadow: 0 26px 70px rgba(4,20,13,.35); left: 13%; padding: 28px; position: absolute; top: 17%; width: min(410px,68%); z-index: 3; }
.card-top { align-items: center; display: flex; justify-content: space-between; }
.product-icon { align-items: center; background: var(--gold-pale); border-radius: 50%; display: flex; font-size: 25px; height: 55px; justify-content: center; width: 55px; }
.live-pill { background: #e0ede3; border-radius: 20px; color: #2c6a49; font-size: 9px; font-weight: 800; padding: 8px 11px; text-transform: uppercase; }
.procurement-card > p { color: var(--muted); font-size: 12px; margin: 30px 0 4px; }
.procurement-card h2 { color: var(--forest-950); font-family: Georgia, serif; font-size: 35px; font-weight: 500; margin: 0 0 25px; }
.card-meta { border-top: 1px solid #e4e5df; display: flex; font-size: 11px; justify-content: space-between; padding: 13px 0; }
.card-meta span { color: #89938d; }
.card-progress { display: grid; gap: 5px; grid-template-columns: repeat(3,1fr); margin: 14px 0 25px; }
.card-progress i { background: var(--gold); border-radius: 3px; height: 4px; }
.card-progress i.muted { background: #e0e2dc; }
.card-bottom { align-items: center; display: flex; justify-content: space-between; }
.card-bottom span { color: var(--muted); font-size: 11px; }
.card-bottom span b { color: var(--forest-900); font-size: 20px; margin-right: 3px; }
.card-bottom button { align-items: center; background: var(--forest-900); border: 0; border-radius: 50%; color: white; display: flex; height: 38px; justify-content: center; width: 38px; }
.supplier-card { align-items: center; background: #f3e7c9; border-radius: 7px; bottom: 17%; box-shadow: 0 18px 45px rgba(4,20,13,.25); display: grid; gap: 11px; grid-template-columns: auto 1fr; padding: 16px 18px; position: absolute; right: 8%; width: 300px; z-index: 4; }
.avatar { align-items: center; background: var(--forest-900); border-radius: 50%; color: white; display: flex; font-size: 11px; font-weight: 800; grid-row: span 2; height: 42px; justify-content: center; width: 42px; }
.supplier-card b, .supplier-card small { display: block; }
.supplier-card b { font-family: Georgia, serif; font-size: 14px; }
.supplier-card small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.supplier-card strong { color: #34734f; font-size: 9px; grid-column: 2; text-transform: uppercase; }
.floating-tag { background: var(--white); border-radius: 5px; color: var(--muted); font-size: 10px; left: 3%; padding: 14px 18px; position: absolute; top: 22%; z-index: 4; }
.floating-tag span { color: #28704b; font-weight: 800; margin-right: 5px; }

.commodity-strip { align-items: center; background: var(--forest-950); color: white; display: flex; justify-content: space-between; padding: 24px 7vw; }
.commodity-strip p { color: #a9b7af; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.commodity-strip div { display: flex; gap: clamp(25px,4vw,65px); }
.commodity-strip span { align-items: center; display: flex; font-family: Georgia, serif; font-size: 14px; gap: 8px; }

.section { padding: 110px 7vw; }
.category-section { background: #edf2ec; }
.category-grid { display: grid; gap: 12px; grid-template-columns: repeat(3,1fr); margin-top: 54px; }
.category-grid article { background: rgba(255,255,255,.72); border: 1px solid #d8e0d7; border-radius: 8px; min-height: 205px; padding: 25px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.category-grid article:hover { border-color: #a8bba9; box-shadow: 0 16px 35px rgba(16,45,33,.08); transform: translateY(-3px); }
.category-grid article > span { align-items: center; background: var(--gold-pale); border-radius: 50%; display: flex; font-size: 24px; height: 48px; justify-content: center; margin-bottom: 20px; width: 48px; }
.category-grid small { color: var(--gold-dark); display: block; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.category-grid h3 { color: var(--forest-950); font-family: Georgia,serif; font-size: 18px; font-weight: 500; line-height: 1.25; margin: 8px 0 9px; }
.category-grid p { color: var(--muted); font-size: 10px; line-height: 1.65; margin: 0; }
.intro { background: var(--paper); }
.section-heading { align-items: end; display: grid; gap: 60px; grid-template-columns: 1.2fr .8fr; }
.section h2 { color: var(--forest-950); font-family: Georgia, serif; font-size: clamp(40px,4.2vw,64px); font-weight: 500; letter-spacing: -2.7px; line-height: 1.05; margin: 22px 0 12px; }
.section-heading > p, .impact > p { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 500px; }
.steps-grid { display: grid; gap: 0; grid-template-columns: repeat(3,1fr); margin-top: 75px; }
.steps-grid article { border-left: 1px solid var(--line); padding: 0 48px 10px; }
.steps-grid article:first-child { padding-left: 0; border-left: 0; }
.steps-grid article > span { color: var(--gold-dark); font-size: 11px; font-weight: 800; }
.steps-grid h3 { color: var(--forest-950); font-family: Georgia, serif; font-size: 23px; font-weight: 500; margin: 30px 0 13px; }
.steps-grid p { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 300px; }

.solutions { display: grid; grid-template-columns: 1fr 1fr; }
.solution { min-height: 610px; padding: 85px 7vw; }
.solution h2 { font-family: Georgia, serif; font-size: clamp(40px,4vw,62px); font-weight: 500; letter-spacing: -2.6px; line-height: 1.05; margin: 27px 0 36px; }
.solution ul { list-style: none; margin: 0 0 44px; padding: 0; }
.solution li { border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; padding: 16px 0; }
.solution li:before { color: var(--gold); content: "✓"; font-weight: 800; margin-right: 12px; }
.solution > a { align-items: center; display: inline-flex; font-size: 12px; font-weight: 800; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.buyer-solution { background: var(--forest-900); color: white; }
.buyer-solution h2 { color: white; }
.seller-solution { background: var(--gold-pale); color: var(--forest-950); }
.seller-solution li { border-color: rgba(16,45,33,.15); }
.seller-solution .eyebrow { color: var(--gold-dark); }

.impact { align-items: end; display: grid; gap: 80px; grid-template-columns: 1.2fr .8fr; }
.cta-section { align-items: center; background: var(--forest-950); color: white; display: flex; justify-content: space-between; padding: 70px 7vw; }
.cta-section h2 { font-family: Georgia, serif; font-size: clamp(34px,4vw,56px); font-weight: 500; letter-spacing: -2px; margin: 16px 0 0; max-width: 760px; }
footer { align-items: center; background: #0a2118; color: #8fa098; display: grid; font-size: 10px; grid-template-columns: 1fr 1fr 1fr; padding: 42px 7vw; }
.footer-brand { width: 115px; }
.footer-company { line-height: 1.65; text-align: center; }
.footer-company b { color: #e4e9e5; display: block; font-size: 11px; margin-bottom: 5px; }
.footer-company address { font-style: normal; margin: 0 auto; max-width: 430px; }
.footer-company a { color: var(--gold); display: inline-block; margin-top: 4px; text-decoration: none; }
.footer-company a:hover { text-decoration: underline; }
footer > span { text-align: right; }

@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-visual { min-height: 630px; }
  .commodity-strip { align-items: flex-start; flex-direction: column; gap: 16px; }
  .commodity-strip div { flex-wrap: wrap; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
  .solution { padding-left: 5vw; padding-right: 5vw; }
}

@media (max-width: 700px) {
  .site-header { height: 76px; padding: 0 18px; }
  .pd-emblem { height: 48px; width: 47px; }
  .pd-wordmark { font-size: 19px; }
  .text-link { display: none; }
  .button-small { font-size: 11px; min-height: 40px; padding: 0 13px; }
  .hero-copy { padding: 60px 22px; }
  .hero h1 { font-size: 52px; letter-spacing: -2.7px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .trust-row { gap: 18px; }
  .trust-row span { padding-left: 10px; }
  .trust-row b { font-size: 18px; }
  .hero-visual { min-height: 530px; }
  .procurement-card { left: 7%; top: 12%; width: 82%; }
  .supplier-card { bottom: 9%; right: 4%; width: 78%; }
  .floating-tag { display: none; }
  .commodity-strip { padding: 24px 22px; }
  .commodity-strip div { gap: 17px 25px; }
  .section { padding: 75px 22px; }
  .category-grid { grid-template-columns: 1fr; margin-top: 35px; }
  .category-grid article { min-height: auto; }
  .section-heading, .impact { align-items: start; gap: 20px; grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .steps-grid article, .steps-grid article:first-child { border-bottom: 1px solid var(--line); border-left: 0; padding: 25px 0; }
  .steps-grid h3 { margin: 15px 0 8px; }
  .solutions { grid-template-columns: 1fr; }
  .solution { min-height: auto; padding: 70px 22px; }
  .cta-section { align-items: flex-start; flex-direction: column; gap: 32px; padding: 60px 22px; }
  footer { gap: 30px; grid-template-columns: 1fr; padding: 40px 22px; }
  .footer-company, footer > span { text-align: left; }
  .footer-company address { margin: 0; }
}

/* Onboarding */
.onboarding-page { background: var(--paper); display: grid; grid-template-columns: minmax(330px, .72fr) 1.28fr; min-height: 100vh; }
.onboarding-page > aside { background: var(--forest-950); color: white; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 55px 5vw; }
.onboarding-logo { display: block; width: 170px; }
.onboarding-page aside > div h1 { font-family: Georgia, serif; font-size: clamp(38px,4vw,62px); font-weight: 500; letter-spacing: -2.5px; line-height: 1.04; margin: 25px 0; max-width: 520px; }
.onboarding-page aside > div > p:last-child { color: #b8c4bd; font-size: 13px; line-height: 1.8; max-width: 450px; }
.onboarding-page aside > small { color: #7f9389; font-size: 10px; line-height: 1.6; max-width: 400px; }
.onboarding-page > section { margin: auto; max-width: 860px; padding: 65px 7vw; width: 100%; }
.onboarding-heading > p { color: var(--gold-dark); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.onboarding-heading h2 { font-family: Georgia, serif; font-size: 40px; font-weight: 500; letter-spacing: -1.5px; margin: 14px 0 8px; }
.onboarding-heading > span { color: var(--muted); font-size: 12px; }
.role-selector { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 35px 0; }
.role-selector button { background: white; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); display: grid; gap: 6px; grid-template-columns: 44px 1fr; padding: 18px; text-align: left; }
.role-selector button.active { border: 2px solid var(--forest-800); box-shadow: 0 0 0 4px rgba(32,82,60,.08); padding: 17px; }
.role-selector button > span { align-items: center; background: var(--gold-pale); border-radius: 50%; display: flex; font-size: 19px; grid-row: span 2; height: 40px; justify-content: center; width: 40px; }
.role-selector b { font-family: Georgia, serif; font-size: 15px; }
.role-selector small { color: var(--muted); font-size: 9px; }
.form-grid, .modal-form { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.form-grid label, .modal-form label { display: flex; flex-direction: column; gap: 8px; }
.form-grid label.wide, .modal-form label.wide { grid-column: 1/-1; }
.form-grid label > span, .modal-form label > span { color: #44564d; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.form-grid input, .form-grid select, .form-grid textarea, .modal-form input, .modal-form select, .modal-form textarea { background: white; border: 1px solid #d3d8d2; border-radius: 5px; color: var(--ink); font: inherit; font-size: 12px; min-height: 46px; padding: 11px 13px; width: 100%; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color: var(--forest-800); outline: 3px solid rgba(32,82,60,.08); }
.form-grid input:disabled { background: #eef0eb; color: #879088; }
.form-grid label small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.submit-button { margin-top: 25px; width: 100%; }
.form-note { color: var(--muted); font-size: 9px; line-height: 1.6; text-align: center; }
.form-error { background: #fbe8e4; border-left: 3px solid #a94232; color: #8f3529; font-size: 11px; grid-column: 1/-1; margin: 0; padding: 12px; }

/* Member and admin workspaces */
.workspace { background: #f3f4ef; color: var(--ink); display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 100vh; }
.workspace-sidebar { background: var(--forest-950); color: white; display: flex; flex-direction: column; min-height: 100vh; padding: 28px 18px 22px; position: sticky; top: 0; height: 100vh; }
.workspace-brand { align-items: center; display: flex; padding: 0 8px 24px; }
.workspace-brand .pd-brand { gap: 8px; }
.workspace-brand .pd-emblem { height: 42px; width: 41px; }
.admin-workspace .workspace-brand > span:not(.pd-brand) { align-items: center; background: transparent url('/pangandesa-emblem.png') center/contain no-repeat; color: transparent; display: flex; height: 43px; justify-content: center; width: 42px; }
.admin-workspace .workspace-brand { gap: 8px; }.admin-workspace .workspace-brand > b { color: white; font-family: Arial,Helvetica,sans-serif; font-size: 16px; }
.sidebar-label { color: #6f887c; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; margin: 24px 10px 11px; text-transform: uppercase; }
.workspace-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.workspace-sidebar nav button { align-items: center; background: transparent; border: 0; border-radius: 5px; color: #aebeb6; display: flex; font-size: 11px; font-weight: 700; gap: 13px; min-height: 44px; padding: 0 13px; text-align: left; }
.workspace-sidebar nav button > span { min-width: 0; }
.workspace-sidebar nav button i { align-items: center; display: flex; font-style: normal; height: 22px; justify-content: center; width: 22px; }
.workspace-sidebar nav button:hover, .workspace-sidebar nav button.active { background: rgba(255,255,255,.08); color: white; }
.workspace-sidebar nav button.active { border-left: 2px solid var(--gold); }
.verification-card { align-items: center; background: rgba(213,161,61,.1); border: 1px solid rgba(213,161,61,.2); border-radius: 6px; display: flex; gap: 11px; margin: auto 4px 18px; padding: 13px; }
.verification-card > span { align-items: center; background: var(--gold); border-radius: 50%; color: var(--forest-950); display: flex; font-size: 9px; height: 26px; justify-content: center; width: 26px; }
.verification-card b, .verification-card small, .sidebar-user b, .sidebar-user small { display: block; }
.verification-card b { color: #dfc378; font-size: 9px; text-transform: capitalize; }
.verification-card small { color: #879c92; font-size: 8px; margin-top: 4px; }
.sidebar-user { align-items: center; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 10px; grid-template-columns: auto 1fr auto; padding: 18px 5px 0; }
.sidebar-user > span { align-items: center; background: #315f4a; border-radius: 50%; display: flex; font-size: 9px; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.sidebar-user b { font-size: 9px; }
.sidebar-user small { color: #7d9288; font-size: 8px; margin-top: 4px; }
.sidebar-user > a { color: #82968d; }
.logout-button { align-items:center; background:transparent; border:1px solid currentColor; border-radius:5px; color:var(--forest-900); display:inline-flex; font-size:9px; font-weight:900; gap:7px; justify-content:center; min-height:38px; padding:0 12px; text-decoration:none; }
.logout-button:hover { background:#f1e5c7; color:var(--forest-950); transform:none; }
.logout-button span { font-size:13px; }
.sidebar-user .logout-button { border:0; color:#a6b6ae; min-height:34px; padding:0 3px; }
.sidebar-user .logout-button b { font-size:0; }
.sidebar-user .logout-button span { font-size:17px; }
.workspace-main { min-width: 0; padding: 0 42px 60px; }
.workspace-header { align-items: center; border-bottom: 1px solid #dce0da; display: flex; justify-content: space-between; min-height: 100px; }
.workspace-header p { color: var(--muted); font-size: 9px; margin: 0 0 5px; }
.workspace-header h1 { font-family: Georgia,serif; font-size: 26px; font-weight: 500; letter-spacing: -.8px; margin: 0; }
.header-tools { align-items: center; display: flex; gap: 9px; }
.icon-button { background: white; border: 1px solid #dce0da; border-radius: 50%; color: var(--ink); height: 39px; position: relative; width: 39px; }
.icon-button i { align-items: center; background: var(--gold); border-radius: 50%; color: var(--forest-950); display: flex; font-size: 7px; font-style: normal; height: 13px; justify-content: center; position: absolute; right: -2px; top: -2px; width: 13px; }
.notification-button[aria-expanded="true"] { background: var(--forest-950); color: white; }
.notification-scrim { background: rgba(13,31,23,.22); border: 0; inset: 0; position: fixed; z-index: 89; }
.notification-panel { background: #fffdf8; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 24px 70px rgba(11,31,22,.23); max-height: min(650px,calc(100vh - 110px)); overflow: hidden; position: fixed; right: 28px; top: 82px; width: min(430px,calc(100vw - 32px)); z-index: 90; }
.notification-panel-head { align-items: flex-start; background: var(--forest-950); color: white; display: flex; justify-content: space-between; padding: 20px 22px; }
.notification-panel-head small { color: var(--gold); font-size: 7px; letter-spacing: .16em; }
.notification-panel-head h2 { font: 22px Georgia,serif; margin: 5px 0 0; }
.notification-panel-head button { background: transparent; border: 0; color: #d8e2dc; font-size: 8px; padding: 5px 0; text-decoration: underline; }
.notification-list { max-height: calc(min(650px,100vh - 110px) - 82px); overflow-y: auto; }
.notification-list>button { align-items: center; background: white; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); display: grid; gap: 11px; grid-template-columns: 8px 1fr 15px; padding: 16px 18px; text-align: left; width: 100%; }
.notification-list>button:hover { background: #f7f4eb; }
.notification-list>button>i { background: #c9cec9; border-radius: 50%; height: 7px; width: 7px; }
.notification-list>button.unread { background: #f3f7f1; }
.notification-list>button.unread>i { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,151,55,.15); }
.notification-list>button span b { display: block; font-size: 10px; margin-bottom: 5px; }
.notification-list>button span p { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 0; }
.notification-list>button span small { color: #87928c; display: block; font-size: 7px; margin-top: 7px; }
.notification-list>button>em { color: var(--gold); font-style: normal; }
.notification-empty { padding: 40px 24px; text-align: center; }
.notification-empty b { font: 18px Georgia,serif; }
.notification-empty p { color: var(--muted); font-size: 9px; line-height: 1.6; }
.workspace-header .button { font-size: 10px; min-height: 40px; padding: 0 16px; }
.mobile-feature-button,.mobile-feature-menu,.mobile-feature-scrim { display:none; }
.notice { align-items: flex-start; background: #f6ebce; border: 1px solid #e6cf96; border-radius: 6px; display: flex; gap: 13px; margin-top: 25px; padding: 15px 18px; }
.notice > span { align-items: center; background: var(--gold); border-radius: 50%; display: flex; font-size: 10px; font-weight: 900; height: 23px; justify-content: center; width: 23px; }
.notice b { font-size: 10px; }
.notice p { color: #776843; font-size: 9px; margin: 5px 0 0; }
.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(3,1fr); margin-top: 28px; }
.metric-grid article { align-items: center; background: white; border: 1px solid #e0e2dd; border-radius: 7px; display: flex; gap: 16px; min-height: 120px; padding: 20px; }
.metric-icon { align-items: center; border-radius: 50%; display: flex; flex: 0 0 auto; font-size: 14px; height: 49px; justify-content: center; width: 49px; }
.metric-icon.gold { background: var(--gold-pale); }.metric-icon.green { background: #dcece1; }.metric-icon.cream { background: #ece9df; }
.metric-grid small, .metric-grid b, .metric-grid em { display: block; }
.metric-grid small { color: var(--muted); font-size: 9px; }
.metric-grid b { font-family: Georgia,serif; font-size: 28px; font-weight: 500; margin: 5px 0; }
.metric-grid b.money { font-size: 18px; }
.metric-grid em { color: #4f7a63; font-size: 8px; font-style: normal; }
.dashboard-grid { display: grid; gap: 15px; grid-template-columns: 1.55fr .75fr; margin-top: 16px; }
.panel { background: white; border: 1px solid #e0e2dd; border-radius: 7px; min-height: 330px; padding: 25px; }
.panel-head { align-items: center; display: flex; justify-content: space-between; }
.panel-head .eyebrow, .data-heading .eyebrow { font-size: 8px; margin: 0; }
.panel-head h2, .data-heading h2 { font-family: Georgia,serif; font-size: 21px; font-weight: 500; margin: 9px 0 0; }
.panel-head > button { background: none; border: 0; color: var(--forest-800); font-size: 9px; font-weight: 800; }
.action-list { margin-top: 20px; }
.action-list article { align-items: center; border-top: 1px solid #eceee9; display: grid; gap: 14px; grid-template-columns: auto 1fr auto; padding: 17px 0; }
.order-flow { background: var(--gold-pale); color: var(--gold-dark); font-size: 7px; font-weight: 900; padding: 6px 8px; }
.action-list b, .action-list small { display: block; }
.action-list b { font-size: 10px; }.action-list small { color: var(--muted); font-size: 8px; margin-top: 5px; }
.status { background: #e8ece8; border-radius: 20px; color: #4a6256; display: inline-flex; font-size: 7px; font-weight: 900; justify-self: start; letter-spacing: .3px; padding: 7px 9px; text-transform: uppercase; }
.status-active, .status-dp_diterima, .status-lunas, .status-selesai, .status-diterima { background: #dceee2; color: #2f6c4b; }
.status-menunggu_konfirmasi, .status-menunggu_dp, .status-pending_review, .status-menunggu_penawaran, .status-menunggu_persetujuan { background: #f4e7c8; color: #8d681c; }
.status-sengketa, .status-rejected { background: #f8dfda; color: #9a3e31; }
.quick-panel > button { align-items: center; background: #f7f7f3; border: 0; border-radius: 6px; display: grid; gap: 11px; grid-template-columns: auto 1fr auto; margin-top: 15px; min-height: 70px; padding: 12px 15px; text-align: left; width: 100%; }
.quick-panel > button > span { align-items: center; background: var(--gold-pale); border-radius: 50%; display: flex; height: 38px; justify-content: center; width: 38px; }.quick-panel > button b { font-size: 10px; }.quick-panel > button i { color: var(--gold-dark); font-style: normal; }
.data-section { padding-top: 35px; }
.data-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 25px; }
.data-heading .button { font-size: 10px; min-height: 40px; }
.data-table { background: white; border: 1px solid #e0e2dd; border-radius: 7px; overflow: hidden; }
.table-row { align-items: center; border-top: 1px solid #eceee9; display: grid; gap: 18px; grid-template-columns: 2fr 1fr 1fr 1fr; min-height: 72px; padding: 13px 20px; }
.table-row:first-child { border-top: 0; }.table-head { background: #f6f7f3; color: #728078; font-size: 8px; font-weight: 900; min-height: 42px; text-transform: uppercase; }
.table-row > span { font-size: 10px; min-width: 0; }.table-row b, .table-row small { display: block; }.table-row small { color: var(--muted); font-size: 8px; margin-top: 5px; }
.empty-state { align-items: center; background: white; border: 1px dashed #cfd5ce; border-radius: 7px; display: flex; flex-direction: column; min-height: 300px; justify-content: center; padding: 40px; text-align: center; }
.empty-state > span { align-items: center; background: var(--gold-pale); border-radius: 50%; display: flex; font-size: 26px; height: 68px; justify-content: center; width: 68px; }.empty-state h3 { font-family: Georgia,serif; font-size: 19px; margin: 18px 0 6px; }.empty-state p { color: var(--muted); font-size: 10px; line-height: 1.7; max-width: 390px; }
.card-grid, .catalog-grid { display: grid; gap: 15px; grid-template-columns: repeat(3,1fr); }
.opportunity-card { background: white; border: 1px solid #e0e2dd; border-top: 3px solid var(--gold); border-radius: 7px; padding: 22px; }.opportunity-card > div:first-child { align-items: center; display: flex; justify-content: space-between; }.opportunity-card > div:first-child small { color: var(--muted); font-size: 8px; }.opportunity-card h3, .catalog-card h3, .request-list h3, .order-list h3 { font-family: Georgia,serif; font-size: 18px; font-weight: 500; margin: 20px 0 8px; }.opportunity-card > p, .catalog-card p { color: var(--muted); font-size: 9px; line-height: 1.7; min-height: 47px; }.opportunity-card dl { border-top: 1px solid #eceee9; margin: 18px 0; padding-top: 8px; }.opportunity-card dl div { display: flex; font-size: 9px; justify-content: space-between; padding: 6px 0; }.opportunity-card dt { color: var(--muted); }.opportunity-card dd { font-weight: 700; margin: 0; max-width: 55%; text-align: right; }.opportunity-card .button { font-size: 9px; min-height: 40px; width: 100%; }
.catalog-card { background: white; border: 1px solid #e0e2dd; border-radius: 7px; overflow: hidden; }.catalog-image { align-items: center; background: linear-gradient(135deg,#e7ebdc,#ccdaba); display: flex; font-size: 52px; height: 150px; justify-content: center; overflow: hidden; position: relative; }.catalog-image > img { height: 100%; object-fit: cover; width: 100%; }.catalog-image .status { position: absolute; right: 12px; top: 12px; }.catalog-content { padding: 19px; }.catalog-content > small { color: var(--muted); display: block; font-size: 8px; }.catalog-content h3 { margin-top: 9px; }.catalog-content > div b { font-family: Georgia,serif; font-size: 17px; }.catalog-content > div span { color: var(--muted); font-size: 8px; }.catalog-content .button { font-size: 9px; margin-top: 17px; min-height: 40px; width: 100%; }
.request-list, .order-list { display: flex; flex-direction: column; gap: 12px; }.request-list > article, .order-list > article { background: white; border: 1px solid #e0e2dd; border-radius: 7px; padding: 22px; }.request-main, .order-title { align-items: start; display: flex; justify-content: space-between; }.request-main small, .order-title small { color: var(--gold-dark); font-size: 8px; font-weight: 800; }.request-main h3, .order-title h3 { margin: 8px 0; }.request-main p, .order-title p { color: var(--muted); font-size: 9px; margin: 0; }.offer-list { border-top: 1px solid #eceee9; margin-top: 18px; padding-top: 15px; }.offer-list > b { font-size: 9px; }.offer-list > div { align-items: center; background: #f7f7f3; display: grid; gap: 15px; grid-template-columns: 1fr auto auto; margin-top: 8px; padding: 12px; }.offer-list > div b, .offer-list > div small { display: block; font-size: 9px; }.offer-list > div small { color: var(--muted); font-size: 8px; margin-top: 4px; }.offer-list strong { font-size: 9px; }.offer-list button, .order-actions button, .admin-actions button { background: var(--forest-900); border: 0; border-radius: 3px; color: white; font-size: 8px; font-weight: 800; min-height: 30px; padding: 0 11px; }
.table-actions-stack { align-items: flex-start; display: flex; flex-direction: column; gap: 7px; }.table-actions-stack button { background: var(--gold-pale); border: 0; border-radius: 3px; color: var(--gold-dark); font-size: 8px; font-weight: 900; min-height: 27px; padding: 0 9px; }
.harvest-calendar { border-top: 1px solid #e7e9e3; display: flex; flex-direction: column; gap: 7px; margin-top: 16px; padding-top: 13px; }.harvest-calendar > b { color: var(--forest-900); font-size: 9px; }.harvest-calendar article { align-items: center; background: #f5f2e8; border-radius: 5px; display: flex; gap: 8px; justify-content: space-between; padding: 9px; }.harvest-calendar article span,.harvest-calendar article strong,.harvest-calendar article small { display: block; }.harvest-calendar article strong { font-size: 8px; }.harvest-calendar article small { margin-top: 4px; }.harvest-calendar article button { background: var(--gold); border: 0; border-radius: 3px; color: var(--forest-950); font-size: 7px; font-weight: 900; min-height: 28px; padding: 0 9px; }
.allocation-note { background: #f3e8c9; border-left: 3px solid var(--gold); border-radius: 4px; color: var(--forest-900); display: flex; flex-direction: column; gap: 5px; margin: 12px 0; padding: 11px; }.allocation-note b { font-size: 9px; }.allocation-note span { color: var(--muted); font-size: 8px; line-height: 1.5; }.allocation-note .status { display: inline-flex; margin-left: 5px; }
.company-payment-identity { margin-bottom: 18px; }
.company-payment-identity a { color: var(--forest-800); font-size: 9px; font-weight: 800; text-decoration: none; }
.company-payment-identity a:hover { text-decoration: underline; }
.request-progress { background: #e8eae5; border-radius: 5px; height: 6px; margin-top: 14px; overflow: hidden; }.request-progress i { background: var(--gold); display: block; height: 100%; min-width: 2px; }
.checkbox-field { align-items: center; display: flex !important; flex-direction: row !important; gap: 9px; }.checkbox-field input { width: auto !important; }.checkbox-field span { margin: 0 !important; }
.form-divider { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); margin: 6px 0; padding: 13px 0; }.form-divider b,.form-divider span { display: block; }.form-divider b { color: var(--forest-900); font-size: 10px; }.form-divider span { color: var(--muted); font-size: 8px; margin-top: 4px; }
.order-summary { align-items: center; border-top: 1px solid #eceee9; display: grid; gap: 25px; grid-template-columns: repeat(3,auto) 1fr; margin-top: 20px; padding-top: 18px; }.order-summary span small, .order-summary span b { display: block; }.order-summary span small { color: var(--muted); font-size: 7px; text-transform: uppercase; }.order-summary span b { font-size: 10px; margin-top: 5px; }.order-actions { display: flex; gap: 7px; justify-content: flex-end; }.order-actions button.danger-link { background: transparent; color: #a4493c; }
.modal-backdrop { align-items: center; background: rgba(6,24,16,.72); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 100; }.modal { background: var(--paper); border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.35); max-height: 90vh; max-width: 680px; overflow: auto; padding: 28px; width: 100%; }.modal-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 22px; padding-bottom: 17px; }.modal-head h2 { font-family: Georgia,serif; font-size: 22px; font-weight: 500; margin: 0; }.modal-head button { background: none; border: 0; color: var(--muted); font-size: 25px; }.modal-form label input[type=file] { padding-top: 13px; }.modal-actions { border-top: 1px solid var(--line); grid-column: 1/-1; margin-top: 5px; padding-top: 18px; text-align: right; }.modal-actions .button { font-size: 10px; min-height: 42px; }.confirm-box p { color: var(--muted); font-size: 12px; line-height: 1.8; }.confirm-box .button { font-size: 10px; margin-top: 12px; }.payment-code { background: var(--forest-950); border-radius: 6px; color: white; grid-column: 1/-1; padding: 18px; }.payment-code small,.payment-code b,.payment-code span { display: block; }.payment-code small { color: #9aaca3; font-size: 8px; text-transform: uppercase; }.payment-code b { color: var(--gold); font-family: Georgia,serif; font-size: 22px; margin: 8px 0; }.payment-code span { font-size: 9px; }.warning-box { background: #f5dfda; border-left: 3px solid #a94232; color: #8b3d31; font-size: 10px; grid-column: 1/-1; padding: 13px; }.toast-error { background: #a94232; bottom: 25px; color: white; font-size: 10px; padding: 13px 18px; position: fixed; right: 25px; z-index: 110; }

/* Admin */
.admin-role { background: var(--forest-900); border-radius: 20px; color: white; font-size: 8px; font-weight: 900; padding: 8px 12px; text-transform: uppercase; }.admin-metrics article:first-child { border-top: 3px solid var(--gold); }.control-note { margin-top: 22px; }.control-note b { font-family: Georgia,serif; font-size: 13px; }.control-note p { border-bottom: 1px solid #eceee9; color: var(--muted); font-size: 9px; line-height: 1.6; margin: 6px 0 14px; padding-bottom: 14px; }.error-notice { background: #f8dfda; border-color: #dfa89e; }.admin-table-section { overflow-x: auto; }.admin-table-section > h2 { font-family: Georgia,serif; font-size: 19px; font-weight: 500; }.admin-table-section .table-row { grid-template-columns: repeat(5,minmax(120px,1fr)); min-width: 800px; }.admin-table-section .table-row > span:first-child { min-width: 160px; }.admin-actions { display: flex; flex-wrap: wrap; gap: 5px; }.admin-actions button.reject { background: transparent; border: 1px solid #c98378; color: #9b4135; }.admin-stack { display: flex; flex-direction: column; gap: 5px; }
.admin-table-section.cols-4 .table-row { grid-template-columns:repeat(4,minmax(140px,1fr)); }
.bank-admin-section .data-heading > div > p:last-child { color:var(--muted); font-size:10px; line-height:1.6; }
.bank-account-grid { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
.bank-account-grid > article,.bank-account-card { background:white; border:1px solid #dce1da; border-radius:8px; padding:22px; }
.bank-account-grid > article.inactive { opacity:.55; }
.bank-account-grid > article > div:first-child,.bank-account-card > div:first-child { align-items:center; display:flex; justify-content:space-between; }
.bank-badge { align-items:center; background:var(--forest-950); border-radius:5px; color:white; display:flex; font-size:9px; font-weight:900; height:36px; justify-content:center; letter-spacing:.8px; width:46px; }
.primary-pill { background:var(--gold-pale); border-radius:20px; color:var(--gold-dark); font-size:7px; letter-spacing:.8px; padding:6px 9px; }
.bank-account-grid small,.bank-account-card small { color:var(--gold-dark); display:block; font-size:8px; font-weight:800; margin-top:17px; text-transform:uppercase; }
.bank-account-grid h3,.bank-account-card h3 { font-family:Georgia,serif; font-size:19px; font-weight:500; margin:8px 0; }
.bank-account-grid strong,.bank-account-card strong { display:block; font-size:17px; letter-spacing:1px; }
.bank-account-grid p,.bank-account-card p { color:var(--muted); font-size:9px; line-height:1.5; margin:8px 0 16px; }
.finance-bank-block { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.bank-account-card button { background:var(--gold-pale); border:0; border-radius:4px; color:var(--gold-dark); font-size:8px; font-weight:900; padding:9px 12px; }
.empty-inline { background:white; border:1px dashed #cdd5cc; border-radius:7px; color:var(--muted); font-size:10px; line-height:1.7; padding:25px; }
.empty-inline b { color:var(--ink); display:block; font-family:Georgia,serif; font-size:17px; font-weight:500; }
.bank-transfer-card { background:#eef3ed; border:1px solid #ced9ce; border-radius:7px; padding:20px; }
.bank-transfer-card small,.bank-transfer-card span,.bank-transfer-card strong { display:block; }
.bank-transfer-card small { color:var(--gold-dark); font-size:8px; font-weight:900; text-transform:uppercase; }
.bank-transfer-card h3 { font-family:Georgia,serif; font-size:20px; font-weight:500; margin:10px 0 4px; }
.bank-transfer-card > b { font-size:22px; letter-spacing:1.4px; }
.bank-transfer-card span,.bank-transfer-card p { color:var(--muted); font-size:9px; margin:7px 0; }
.bank-transfer-card strong { border-top:1px solid #d3dcd2; color:var(--forest-900); margin-top:14px; padding-top:14px; }
.workspace-filters { align-items:end; background:white; border:1px solid #dde2da; border-radius:8px; display:grid; gap:10px; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(130px,1fr)) auto; margin-top:24px; padding:15px; }
.workspace-filters label { display:flex; flex-direction:column; gap:6px; }
.workspace-filters label span { color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.workspace-filters input,.workspace-filters select { background:#fafbf8; border:1px solid #d8ded6; border-radius:5px; color:var(--ink); font-size:10px; min-height:38px; padding:0 10px; width:100%; }
.workspace-filters > button { background:transparent; border:1px solid #b9c4ba; border-radius:5px; color:var(--forest-900); font-size:8px; font-weight:900; min-height:38px; padding:0 12px; }
.workspace-filters.order-filters { grid-template-columns:minmax(240px,1.6fr) minmax(140px,1fr) minmax(140px,1fr) auto; }
.workspace-filters.catalog-category-filter { align-items:end; grid-template-columns:minmax(190px,1.2fr) minmax(150px,1fr) minmax(170px,1fr) minmax(170px,1fr) auto; }
.catalog-category-filter > small { color:var(--muted); font-size:9px; line-height:1.5; }
.catalog-category-filter > small.region-filter-error { color:#9a3e31; }
.catalog-category-filter select:disabled { background:#eef0eb; color:#8a938c; cursor:not-allowed; }
.catalog-content .category-pill { color:var(--gold-dark); font-weight:900; letter-spacing:.35px; margin-bottom:7px; text-transform:uppercase; }
.profile-settings { background:white; border:1px solid #e0e2dd; border-radius:8px; display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:24px; }
.profile-settings label { display:flex; flex-direction:column; gap:7px; }.profile-settings label > span { color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.profile-settings input,.profile-settings textarea { border:1px solid #d8ded6; border-radius:5px; color:var(--ink); font:inherit; font-size:10px; min-height:42px; padding:10px 12px; }.profile-settings input[readonly] { background:#eef1ec; color:#758078; }
.profile-settings label small { color:var(--muted); font-size:8px; line-height:1.5; }.profile-settings .wide { grid-column:1/-1; }
.profile-security { align-items:center; background:#edf3ed; border-left:4px solid var(--forest-800); border-radius:6px; display:flex; gap:24px; justify-content:space-between; margin-top:24px; padding:20px; }.profile-security b { font-family:Georgia,serif; font-size:16px; }.profile-security p,.profile-security small { color:var(--muted); font-size:9px; line-height:1.6; }.profile-security p{margin:7px 0}.password-account-actions{align-items:center;display:flex;flex:0 0 auto;gap:11px}.password-account-actions .button{font-size:9px;min-height:42px;padding:0 15px}.password-recovery-link{color:var(--gold-dark);font-size:9px;font-weight:900;text-decoration:underline}
.mobile-feature-menu-footer{border-top:1px solid var(--line);padding:14px 20px 22px}.mobile-feature-menu-footer .logout-button{min-height:46px;width:100%}

/* Login & account recovery */
.login-page{background:var(--paper);display:grid;grid-template-columns:minmax(340px,.85fr) 1.15fr;min-height:100vh}.login-intro{background:var(--forest-950);color:white;display:flex;flex-direction:column;justify-content:space-between;padding:55px 5vw}.login-intro>a{display:inline-flex;width:max-content}.login-intro>div{max-width:560px}.login-intro h1{font:500 clamp(42px,4.4vw,66px)/1.04 Georgia,serif;letter-spacing:-2.6px;margin:24px 0}.login-intro>div>p:last-child{color:#b8c4bd;font-size:13px;line-height:1.75}.login-intro>small{color:#7f9389;font-size:10px}.login-panel{align-items:center;display:flex;justify-content:center;padding:48px clamp(22px,7vw,110px)}.login-card{background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 55px rgba(16,45,33,.08);max-width:520px;padding:42px;width:100%}.login-card h2{font:500 38px Georgia,serif;letter-spacing:-1.3px;margin:16px 0 10px}.login-card>p:not(.eyebrow):not(.login-help){color:var(--muted);font-size:12px;line-height:1.7}.login-submit{margin-top:25px;width:100%}.login-recovery{align-items:flex-start;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;margin-top:22px;padding-top:18px}.login-recovery a{color:var(--gold-dark);font-size:11px;font-weight:900;text-decoration:underline}.login-recovery small{color:var(--muted);font-size:9px;line-height:1.55}.login-help{color:var(--muted);font-size:10px;margin:22px 0 0;text-align:center}.login-help a{color:var(--forest-900);font-weight:900;text-decoration:underline}
.login-identity{background:#f2f5ef;border:1px solid #d8dfd6;border-radius:7px;display:flex;flex-direction:column;gap:11px;margin-top:24px;padding:18px}.login-identity>small{color:var(--gold-dark);font-size:8px;font-weight:900;letter-spacing:.08em}.login-identity>strong{font-size:13px;overflow-wrap:anywhere}.login-identity>p{color:var(--muted);font-size:10px;line-height:1.6;margin:0}.login-identity .button{font-size:10px;min-height:46px;width:100%}
.document-links,.document-actions { display:flex; flex-wrap:wrap; gap:7px; }.document-links { border-top:1px solid #eceee9; margin-top:15px; padding-top:13px; }
.document-links a,.document-actions a,.transaction-detail a { background:var(--gold-pale); border-radius:4px; color:var(--gold-dark); font-size:8px; font-weight:900; padding:9px 11px; text-decoration:none; }
.transaction-modal { max-width:850px; }.transaction-detail { display:flex; flex-direction:column; gap:22px; }.transaction-detail > section { border-top:1px solid var(--line); padding-top:17px; }.transaction-detail h3 { font-family:Georgia,serif; font-size:16px; font-weight:500; margin:0 0 12px; }
.detail-grid { display:grid; gap:10px; grid-template-columns:repeat(3,1fr); }.detail-grid > div { background:#f4f5f1; border-radius:5px; padding:12px; }.detail-grid small,.detail-grid b { display:block; }.detail-grid small { color:var(--muted); font-size:8px; }.detail-grid b { font-size:10px; margin-top:5px; }
.detail-line { align-items:center; border-bottom:1px solid #edf0eb; display:flex; justify-content:space-between; padding:11px 0; }.detail-line b,.detail-line small,.detail-line span { display:block; }.detail-line small { color:var(--muted); font-size:8px; margin-top:4px; }.detail-line strong { font-size:10px; }
.timeline { display:flex; flex-direction:column; margin-bottom:14px; }.timeline > div { display:grid; gap:10px; grid-template-columns:12px 1fr; min-height:48px; }.timeline i { background:var(--forest-700); border:3px solid #dce9df; border-radius:50%; height:11px; margin-top:2px; position:relative; width:11px; }.timeline i:after { background:#cfd9d0; content:""; height:38px; left:2px; position:absolute; top:9px; width:1px; }.timeline > div:last-child i:after { display:none; }.timeline b,.timeline small { display:block; }.timeline b { font-size:9px; }.timeline small { color:var(--muted); font-size:8px; margin-top:4px; }

@media(max-width:1100px){.workspace-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.workspace-filters .filter-search{grid-column:1/-1}}

@media(max-width:900px){.onboarding-page,.login-page{grid-template-columns:1fr}.onboarding-page>aside,.login-intro{min-height:auto;padding:35px 25px}.onboarding-page aside>div,.onboarding-page aside>small,.login-intro>div,.login-intro>small{display:none}.workspace{grid-template-columns:78px 1fr}.workspace-sidebar{padding:22px 10px}.workspace-brand b,.sidebar-label{display:none}.workspace-sidebar nav button{justify-content:center;padding:0}.workspace-sidebar nav button>span{font-size:0}.verification-card,.sidebar-user div,.sidebar-user>a{display:none}.sidebar-user{display:flex;justify-content:center}.workspace-main{padding:0 22px 50px}.card-grid,.catalog-grid{grid-template-columns:repeat(2,1fr)}.metric-grid{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.commodity-strip div{gap:20px}.profile-security{align-items:flex-start;flex-direction:column}.password-account-actions{align-items:stretch;flex-direction:column;width:100%}.password-account-actions .button{width:100%}}
@media(max-width:900px){.workspace-brand{justify-content:center;padding-left:0;padding-right:0}.workspace-brand .pd-wordmark{display:none}}
@media(max-width:900px){
  .mobile-feature-button{align-items:center;background:var(--forest-950);border:0;border-radius:6px;color:white;display:inline-flex;font-size:10px;font-weight:900;gap:7px;min-height:42px;padding:0 13px}.mobile-feature-button>span{color:var(--gold);font-size:15px}
  .mobile-feature-scrim{background:rgba(6,24,16,.56);border:0;display:block;inset:0;position:fixed;z-index:94}
  .mobile-feature-menu{background:#fffdf8;box-shadow:-24px 0 70px rgba(6,24,16,.28);display:block;height:100dvh;max-width:390px;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;top:0;width:min(88vw,390px);z-index:95}
  .mobile-feature-menu-head{align-items:flex-start;background:var(--forest-950);color:white;display:flex;justify-content:space-between;padding:24px 20px}.mobile-feature-menu-head small{color:var(--gold);font-size:8px;font-weight:900;letter-spacing:1.3px}.mobile-feature-menu-head h2{font:500 23px Georgia,serif;margin:7px 0 0}.mobile-feature-menu-head>button{align-items:center;background:rgba(255,255,255,.1);border:0;border-radius:50%;color:white;display:flex;font-size:25px;height:42px;justify-content:center;width:42px}
  .mobile-feature-menu nav{display:flex;flex-direction:column;padding:10px 14px 22px}.mobile-feature-menu nav>button{align-items:center;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);display:grid;gap:13px;grid-template-columns:44px 1fr auto;min-height:72px;padding:10px 8px;text-align:left;width:100%}.mobile-feature-menu nav>button.active{background:#f0f5ed;border-radius:7px;border-bottom-color:transparent}.mobile-feature-menu nav i{align-items:center;background:var(--gold-pale);border-radius:50%;color:var(--forest-900);display:flex;font-style:normal;height:42px;justify-content:center;width:42px}.mobile-feature-menu nav span b,.mobile-feature-menu nav span small{display:block}.mobile-feature-menu nav span b{font-size:12px}.mobile-feature-menu nav span small{color:var(--muted);font-size:9px;margin-top:5px}.mobile-feature-menu nav em{color:var(--gold-dark);font-style:normal}
}
@media(max-width:600px){
  html{scroll-padding-bottom:86px}
  button,a,input,select,textarea{touch-action:manipulation}
  .staging-strip{font-size:9px;gap:8px;padding:8px 14px}
  .staging-strip b{flex:0 0 auto}.staging-strip span{line-height:1.45}.staging-strip a{width:100%}
  .site-header{height:70px;padding:0 14px}.site-header .pd-emblem{height:42px;width:41px}.site-header .pd-wordmark{font-size:17px}.site-header .pd-wordmark small{display:none}.header-actions{gap:7px}.header-actions .button-small{font-size:10px;gap:7px;min-height:42px;padding:0 11px}
  .hero-copy{padding:46px 18px}.hero h1{font-size:clamp(40px,12vw,52px);line-height:1.02;margin:20px 0}.hero-lead{font-size:14px;line-height:1.7}.hero-actions .button{min-height:50px;width:100%}.trust-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px}.trust-row span{padding-left:8px}.trust-row b{font-size:17px}.trust-row small{font-size:8px;line-height:1.35}
  .hero-visual{min-height:470px}.procurement-card{left:5%;padding:21px;top:10%;width:90%}.procurement-card h2{font-size:30px}.supplier-card{bottom:7%;right:5%;width:85%}.commodity-strip,.section{padding-left:18px;padding-right:18px}.commodity-strip div{display:grid;gap:14px 18px;grid-template-columns:1fr 1fr;width:100%}.section h2,.solution h2{letter-spacing:-1.8px}.solution,.cta-section,footer{padding-left:18px;padding-right:18px}
  .uat-header{padding:16px 18px}.uat-environment{width:100%}.uat-hero{padding:44px 18px}.uat-hero h1{font-size:40px;letter-spacing:-1.7px}.uat-section{padding-left:18px;padding-right:18px}.uat-actions{flex-direction:column}.uat-actions .button{width:100%}.uat-scenarios article{align-items:flex-start;grid-template-columns:auto 1fr;padding:16px}.uat-scenarios article i{grid-column:2;justify-self:start}.uat-footer{align-items:flex-start;flex-direction:column}
  .onboarding-page>aside{padding:22px 20px}.onboarding-logo{width:145px}.onboarding-page>section{padding:36px 18px 48px}.onboarding-heading h2{font-size:32px}.role-selector,.form-grid,.modal-form{grid-template-columns:1fr}.form-grid label.wide,.modal-form label.wide{grid-column:1}.role-selector button{min-height:82px}.form-grid input,.form-grid select,.form-grid textarea,.modal-form input,.modal-form select,.modal-form textarea{font-size:16px;min-height:48px}
  .workspace{display:block}.workspace-sidebar{bottom:0;display:block;height:calc(68px + env(safe-area-inset-bottom));min-height:0;padding:0 0 env(safe-area-inset-bottom);position:fixed;top:auto;width:100%;z-index:50}.workspace-brand,.sidebar-label,.verification-card,.sidebar-user{display:none}.workspace-sidebar nav,.admin-workspace .workspace-sidebar nav{display:flex;height:68px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}.workspace-sidebar nav::-webkit-scrollbar{display:none}.workspace-sidebar nav button,.workspace-sidebar nav button.active,.workspace-sidebar nav button:not(.active){border:0;border-radius:0;display:flex;flex:0 0 64px;flex-direction:column;gap:4px;height:68px;justify-content:center;padding:4px;scroll-snap-align:start}.admin-workspace .workspace-sidebar nav button{flex-basis:72px}.workspace-sidebar nav button>span,.workspace-sidebar nav button.active>span,.workspace-sidebar nav button:not(.active)>span{display:block;font-size:8px;line-height:1.15;overflow:hidden;text-align:center;text-overflow:ellipsis;width:100%}.workspace-sidebar nav button i{font-size:15px;height:21px}.workspace-sidebar nav button.active{background:rgba(255,255,255,.11);box-shadow:inset 0 3px 0 var(--gold)}
  .workspace-main{padding:0 14px calc(96px + env(safe-area-inset-bottom))}.workspace-header{align-items:flex-start;flex-direction:column;gap:10px;min-height:96px;padding:13px 0}.workspace-header>div:first-child{min-width:0}.workspace-header p{font-size:9px}.workspace-header h1{font-size:22px;overflow-wrap:anywhere}.header-tools{display:grid;grid-template-columns:auto 44px 44px 44px;justify-content:start;width:100%}.admin-workspace .header-tools{grid-template-columns:auto 1fr 44px}.header-tools .button{font-size:0;height:44px;margin:0;min-height:44px;padding:0;width:44px}.header-tools .button::before{content:"+";font-size:21px}.header-tools>.logout-button{height:44px;min-height:44px;padding:0;width:44px}.header-tools>.logout-button b{font-size:0}.header-tools>.logout-button span{font-size:17px}.mobile-feature-button{font-size:11px;height:44px}.icon-button{height:44px;width:44px}.admin-role{align-self:center;justify-self:end}
  .notification-panel{border-radius:14px 14px 0 0;bottom:calc(68px + env(safe-area-inset-bottom));left:0;max-height:calc(78dvh - env(safe-area-inset-bottom));right:0;top:auto;width:100%}.notification-list{max-height:calc(78dvh - 84px - env(safe-area-inset-bottom))}.notification-panel-head{padding:18px}.notification-panel-head button{font-size:11px;min-height:36px}.notification-list>button{min-height:82px;padding:15px}.notification-list>button span b{font-size:12px}.notification-list>button span p{font-size:11px}.notification-list>button span small{font-size:9px}
  .mobile-feature-menu{border-radius:16px 16px 0 0;bottom:0;height:auto;max-height:86dvh;max-width:none;right:0;top:auto;width:100%}.mobile-feature-menu-head{padding:20px 18px}.mobile-feature-menu nav{padding-bottom:calc(22px + env(safe-area-inset-bottom))}.mobile-feature-menu nav>button{min-height:68px}
  .notice{padding:14px}.notice b{font-size:12px}.notice p{font-size:11px;line-height:1.55}.metric-grid{grid-template-columns:1fr;margin-top:18px}.metric-grid article{min-height:104px;padding:17px}.metric-grid small{font-size:11px}.metric-grid em{font-size:10px}.panel{min-height:0;padding:18px}.panel-head{align-items:flex-start}.panel-head h2,.data-heading h2{font-size:20px}.action-list article{grid-template-columns:auto 1fr}.action-list article>button,.action-list article>.status{grid-column:2;justify-self:start}.action-list b{font-size:12px}.action-list small{font-size:10px;line-height:1.45}
  .card-grid,.catalog-grid,.bank-account-grid,.finance-bank-block{grid-template-columns:1fr}.catalog-image{height:190px}.catalog-content>small,.catalog-content>div span,.opportunity-card>p{font-size:11px}.catalog-content h3,.opportunity-card h3{font-size:20px}.catalog-content .button,.opportunity-card .button{font-size:11px;min-height:46px}.opportunity-card dl div{font-size:11px}.request-list>article,.order-list>article{padding:17px}.request-main,.order-title{gap:10px}.request-main h3,.order-title h3{font-size:19px}.request-main p,.order-title p{font-size:11px;line-height:1.5}.request-main>.status,.order-title>.status{flex:0 0 auto}.offer-list>div{grid-template-columns:1fr}.offer-list>div b,.offer-list strong{font-size:11px}.offer-list>div small{font-size:10px}.offer-list button,.order-actions button,.admin-actions button,.table-actions-stack button,.harvest-calendar article button{font-size:10px;min-height:40px;padding:0 13px}
  .order-summary{gap:12px;grid-template-columns:repeat(2,1fr)}.order-summary span small{font-size:9px}.order-summary span b{font-size:11px}.order-actions{grid-column:1/-1;justify-content:flex-start}.order-actions button{flex:1}.harvest-calendar article{align-items:flex-start;flex-direction:column}.harvest-calendar article button{width:100%}
  .workspace-filters,.workspace-filters.order-filters,.workspace-filters.catalog-category-filter,.profile-settings,.detail-grid{grid-template-columns:1fr;padding:14px}.workspace-filters .filter-search,.profile-settings .wide{grid-column:1}.workspace-filters input,.workspace-filters select,.profile-settings input,.profile-settings textarea{font-size:16px;min-height:48px}.workspace-filters>button{font-size:11px;min-height:46px}.workspace-filters label span,.profile-settings label>span{font-size:10px}.catalog-category-filter>small{font-size:11px}.data-heading{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:18px}.data-heading .button{font-size:11px;min-height:46px;width:100%}
  .data-table{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.table-row{gap:12px;grid-template-columns:minmax(170px,2fr) minmax(100px,1fr) minmax(100px,1fr) minmax(110px,1fr);min-width:560px;padding:13px 16px}.table-row>span:nth-child(3){display:block}.table-row>span{font-size:11px}.table-row small{font-size:9px;line-height:1.4}.table-head{font-size:9px;position:sticky;top:0}.admin-table-section{overflow:visible}.admin-table-section .data-table{border-radius:7px;overflow-x:auto}.admin-table-section .table-row,.admin-table-section.cols-4 .table-row{min-width:760px}.admin-table-section::after{color:var(--muted);content:"Geser tabel ke samping untuk melihat seluruh data";display:block;font-size:9px;margin-top:8px;text-align:right}.admin-actions{align-items:flex-start}.admin-actions a{font-size:10px;min-height:40px;padding:12px 10px}
  .modal-backdrop{align-items:flex-end;padding:0}.modal{border-radius:16px 16px 0 0;max-height:92dvh;padding:18px 18px calc(22px + env(safe-area-inset-bottom))}.modal-head{position:sticky;top:-18px;z-index:2;background:var(--paper);padding-top:18px}.modal-head h2{font-size:20px;padding-right:12px}.modal-head button{align-items:center;display:flex;height:44px;justify-content:center;width:44px}.modal-actions{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom));background:var(--paper);padding:14px 0 calc(14px + env(safe-area-inset-bottom))}.modal-actions .button{font-size:12px;min-height:48px;width:100%}.detail-line{align-items:flex-start;gap:12px;flex-direction:column}.detail-line>span:last-child{text-align:left}.document-links a,.document-actions a,.transaction-detail a{align-items:center;display:inline-flex;font-size:10px;min-height:42px;padding:10px 12px}.document-actions a{flex:1 1 135px;justify-content:center}.toast-error{bottom:calc(82px + env(safe-area-inset-bottom));left:14px;right:14px;font-size:12px}
}

@media(max-width:380px){
  .site-header .pd-wordmark{display:none}.site-header .pd-emblem{height:46px;width:45px}.trust-row{grid-template-columns:1fr}.trust-row span{border-left:0;border-top:1px solid #c8ccc5;padding:9px 0}.commodity-strip div{grid-template-columns:1fr}.workspace-main{padding-left:10px;padding-right:10px}.workspace-sidebar nav button,.admin-workspace .workspace-sidebar nav button{flex-basis:62px}.workspace-header h1{font-size:20px}.request-main,.order-title{align-items:flex-start;flex-direction:column}.order-summary{grid-template-columns:1fr}.modal{padding-left:14px;padding-right:14px}
}

@media(max-width:600px){.login-intro{padding:22px 18px}.login-panel{padding:34px 16px}.login-card{padding:28px 20px}.login-card h2{font-size:32px}.login-card>p:not(.eyebrow):not(.login-help){font-size:11px}.login-submit{font-size:11px;min-height:50px}.login-recovery a{font-size:12px}.login-recovery small{font-size:10px}.profile-security{padding:17px}.profile-security p,.profile-security small{font-size:10px}.password-recovery-link{font-size:11px;text-align:center}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.button,.category-grid article{transition:none}
}