:root{--navy:#0b1e35;--navy2:#123452;--blue:#1677c8;--teal:#0c9b86;--pale:#edf3f8;--line:#d3dfe9;--text:#10233a;--muted:#60748a;--danger:#c4424d;--shadow:0 16px 44px rgba(13,39,66,.1);--tech-cyan:#29d3c2;--tech-blue:#2d8fe8;--tech-orange:#ff7138}
html{background:#eaf1f7}body{color:var(--text);background-color:#eef4f8;background-image:linear-gradient(rgba(26,91,133,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,91,133,.035) 1px,transparent 1px),radial-gradient(circle at 75% -15%,rgba(41,211,194,.12),transparent 34%);background-size:30px 30px,30px 30px,auto}
.app-shell{grid-template-columns:236px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#081a30 0%,#0c2945 55%,#091e34 100%);border-right:1px solid rgba(72,205,197,.22);padding:22px 15px;box-shadow:10px 0 38px rgba(8,29,51,.12);overflow:auto;scrollbar-width:thin;scrollbar-color:#22516b transparent}
.brand{position:relative;padding:2px 8px 25px}.brand:after{content:"";position:absolute;left:8px;right:8px;bottom:10px;height:1px;background:linear-gradient(90deg,var(--tech-cyan),transparent)}.brand-mark{border:1px solid rgba(73,224,211,.75);background:linear-gradient(145deg,rgba(38,142,185,.28),rgba(15,55,82,.4));border-radius:9px;box-shadow:0 0 20px rgba(32,208,194,.14)}.brand strong{letter-spacing:.05em}.brand small{color:#87a4bb}
.sidebar nav{gap:3px}.nav-item{position:relative;color:#b8cada;border:1px solid transparent;border-radius:9px;padding:9px 10px;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.nav-item span{border-color:rgba(109,166,197,.38);background:rgba(9,36,58,.48);color:#c5e6ef}.nav-item:hover{color:#fff;background:rgba(44,137,176,.14);border-color:rgba(68,204,194,.2);transform:translateX(2px)}.nav-item.active{color:#fff;background:linear-gradient(100deg,rgba(20,154,142,.34),rgba(34,112,170,.3));border-color:rgba(53,217,200,.45);box-shadow:inset 3px 0 0 var(--tech-cyan),0 7px 20px rgba(0,0,0,.14)}.nav-item.active span{color:#061f31;background:var(--tech-cyan);border-color:var(--tech-cyan);box-shadow:0 0 14px rgba(41,211,194,.28)}.sidebar-note{border-color:rgba(50,208,195,.4)!important;background:linear-gradient(135deg,rgba(22,100,125,.28),rgba(18,57,83,.4))!important;border-radius:10px!important}
.main-area{min-width:0}.topbar{position:sticky;top:0;z-index:35;height:76px;border-bottom:1px solid rgba(124,153,176,.25);background:rgba(248,251,253,.86);backdrop-filter:blur(15px);box-shadow:0 8px 24px rgba(14,47,75,.045);padding:0 28px}.topbar h1{font-size:23px;letter-spacing:-.02em}.topbar small{color:#5f7890}.top-actions{align-items:center;flex-wrap:wrap}.top-actions a,.top-actions button{border-color:#c9d8e4!important;background:rgba(255,255,255,.84)!important;color:#17344f!important;border-radius:8px!important;transition:border-color .18s,box-shadow .18s,transform .18s}.top-actions a:hover,.top-actions button:hover{border-color:#54c9bd!important;box-shadow:0 7px 20px rgba(17,93,121,.1);transform:translateY(-1px)}.account-pill{background:linear-gradient(90deg,#e7f8f5,#eaf4fb)!important;border:1px solid #b9e3dc!important;color:#0d6d64!important;border-radius:999px!important;padding:7px 12px!important}
.content{padding:27px 30px 48px}.stack{gap:22px}.panel,.paper,.quote-results{border:1px solid rgba(171,193,210,.62);background:rgba(255,255,255,.93);border-radius:14px;box-shadow:0 14px 42px rgba(12,44,73,.075);backdrop-filter:blur(8px)}.panel{padding:22px}.panel-head{margin-bottom:18px}.panel-head h3,.section-title h2{letter-spacing:-.02em}.eyebrow{color:#0d7ba9;letter-spacing:.11em}.primary{background:linear-gradient(135deg,#0ca18b,#087b91)!important;border-color:#098d89!important;color:#fff!important;box-shadow:0 7px 18px rgba(8,139,129,.17);transition:filter .18s,transform .18s,box-shadow .18s}.primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 24px rgba(8,139,129,.24)}
.hero{position:relative;overflow:hidden;border:1px solid rgba(56,184,184,.28);border-radius:16px;background:linear-gradient(125deg,#0a223d 0%,#113654 58%,#0a273e 100%);box-shadow:0 20px 52px rgba(6,32,57,.2);padding:38px 40px}.hero:before{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(69,223,209,.14);border-radius:50%;right:-90px;top:-185px;box-shadow:0 0 0 40px rgba(55,184,197,.04),0 0 0 85px rgba(55,184,197,.025)}.hero>*{position:relative;z-index:1}.hero .eyebrow{color:#5be1d1}.hero h2{font-size:33px;letter-spacing:-.025em}.hero p{color:#b8cddd}.hero-check{border-color:rgba(126,188,207,.35)}.hero-check span:before{color:#4ce0cc}.hero-actions button:not(.primary){background:rgba(255,255,255,.04);border-color:#5f8099;color:#e7f0f7}.hero-actions button:not(.primary):hover{border-color:#49cabc;background:rgba(65,197,185,.1)}
.stats{gap:15px}.stats article{position:relative;overflow:hidden;border:1px solid #d4e1ea;border-radius:13px;background:linear-gradient(145deg,#fff,#f6fafc);box-shadow:0 10px 28px rgba(15,52,82,.055);padding:20px 21px}.stats article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--tech-cyan),var(--tech-blue))}.stats article strong{color:#102a45;font-size:31px}.stats article small{color:#6f8294}
.quick-grid{gap:14px}.quick-card{position:relative;border:1px solid #d4e1eb!important;border-radius:11px!important;background:linear-gradient(150deg,#fff,#f6f9fb)!important;padding:20px!important;transition:transform .18s,border-color .18s,box-shadow .18s}.quick-card:hover{transform:translateY(-3px);border-color:#77cbc4!important;box-shadow:0 14px 34px rgba(13,80,105,.11)}.quick-card i{color:#087f95}.social-row a{border-color:#ccdbe6;border-radius:8px;background:rgba(255,255,255,.84);transition:all .18s}.social-row a:hover{border-color:#47bfb4;color:#087269;transform:translateY(-1px)}
input,select,textarea{border-color:#c6d6e2!important;border-radius:8px!important;background-color:#fbfdfe!important;transition:border-color .18s,box-shadow .18s,background .18s}input:focus,select:focus,textarea:focus{outline:0!important;border-color:#20a899!important;box-shadow:0 0 0 3px rgba(32,168,153,.12)!important;background:#fff!important}button{transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}button:not(:disabled):active{transform:translateY(1px)}
.table-wrap,.supplier-table-wrap,.buyer-directory-table-wrap,.document-history-table,.cost-refund-table-wrap{border:1px solid #d3dfe8!important;border-radius:11px!important;overflow:auto}.customer-table thead,.supplier-table thead,.buyer-directory-table thead,.document-history-table thead{background:linear-gradient(90deg,#102c47,#174260)!important;color:#eef8fb}.customer-table th,.supplier-table th,.buyer-directory-table th,.document-history-table th{color:inherit!important}.customer-table tbody tr:hover,.supplier-table tbody tr:hover,.buyer-directory-table tbody tr:hover,.document-history-table tbody tr:hover{background:#f0faf8!important}
.flow-hero,.supplier-hero,.business-tools-hero,.buyer-directory-intro{border-radius:14px!important;background:linear-gradient(125deg,#0a223d,#123b58)!important;border:1px solid rgba(66,200,190,.25)!important;box-shadow:0 18px 44px rgba(10,39,65,.15)!important}.flow-stage-strip button,.business-tool-tabs button,.document-kind-tabs button{border-radius:9px!important}.flow-stage-strip button.active,.business-tool-tabs button.active,.document-kind-tabs button.active{background:linear-gradient(120deg,#0d334e,#0b807b)!important;color:#fff!important}
.floating-contact{border:1px solid #cbd9e4;border-top:3px solid var(--tech-cyan);border-radius:14px;box-shadow:0 20px 50px rgba(9,34,57,.2);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}.floating-contact-phone{background:linear-gradient(100deg,#0c9c86,#087e91)}
.modal-backdrop{background:rgba(4,17,30,.64);backdrop-filter:blur(5px)}.modal{border:1px solid rgba(97,190,190,.35);border-radius:16px;box-shadow:0 30px 80px rgba(3,20,35,.3)}
.access-gate{background-color:#07182b;background-image:linear-gradient(rgba(43,180,180,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,180,180,.05) 1px,transparent 1px),radial-gradient(circle at 20% 20%,rgba(25,149,184,.24),transparent 34%),radial-gradient(circle at 80% 75%,rgba(22,178,150,.18),transparent 32%);background-size:36px 36px,36px 36px,auto,auto}.access-card{border:1px solid rgba(119,198,201,.35);background:rgba(247,251,253,.96);border-radius:18px;box-shadow:0 28px 80px rgba(0,15,29,.38)}.access-mark{background:linear-gradient(145deg,#0d3555,#0c8f88);border:1px solid rgba(76,231,216,.5);box-shadow:0 0 28px rgba(23,175,161,.22)}.login-community-card{background:linear-gradient(150deg,#102f4d,#0b263e)!important;border:1px solid rgba(63,205,194,.25)!important;border-radius:14px!important;box-shadow:0 22px 52px rgba(0,17,32,.28)!important}
.admin-page{background-color:#edf4f8;background-image:linear-gradient(rgba(31,110,142,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(31,110,142,.035) 1px,transparent 1px);background-size:30px 30px}.admin-header{border-radius:15px;background:linear-gradient(125deg,#09233e,#123f5e);border:1px solid rgba(59,205,194,.25);box-shadow:0 18px 48px rgba(8,39,64,.17)}.admin-stats article{border:1px solid #d1e0e9;border-top:0;border-left:4px solid var(--teal);border-radius:12px;box-shadow:0 10px 28px rgba(15,52,82,.07)}.admin-account{border-radius:11px!important;box-shadow:0 5px 16px rgba(13,48,76,.045)}.admin-account.primary-admin{background:linear-gradient(120deg,#e8f8f4,#edf7fc)!important;border-color:#a9ddd3!important}
.knowledge-header{background:linear-gradient(125deg,#09233d,#12435f)!important;border:1px solid rgba(63,208,195,.25)!important;box-shadow:0 18px 45px rgba(9,39,65,.15)}.knowledge-editor,.knowledge-list-panel,.knowledge-managers,.knowledge-viewer{border-radius:14px!important;box-shadow:0 14px 38px rgba(17,52,80,.075)!important}.knowledge-table th{background:linear-gradient(90deg,#102d48,#174461)!important;color:#eef6fa!important}.knowledge-title-button{color:#087c84!important}
.supplier-wide,.supplier-editor,.smart-pack-panel,.cargo-form,.tool-form-panel,.tool-result-panel{border-radius:13px!important}.supplier-whatsapp{background:linear-gradient(120deg,#079b72,#087f8e)!important;box-shadow:0 7px 16px rgba(9,135,121,.15)}
@media(width<=1100px){.app-shell{grid-template-columns:200px minmax(0,1fr)}.content{padding:22px}.hero{padding:30px}.topbar{padding:0 20px}}
@media(width<=760px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto;box-shadow:none}.sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-item:hover{transform:none}.topbar{position:relative;height:auto;min-height:72px;padding:14px;align-items:flex-start}.content{padding:15px 12px 34px}.hero{padding:24px 20px;border-radius:13px}.hero h2{font-size:25px}.stats{grid-template-columns:repeat(2,1fr)}.panel{padding:16px}.floating-contact{right:8px}.admin-page{padding:16px}}
@media(prefers-reduced-motion:no-preference){.hero,.stats article,.panel{animation:tech-in .35s ease both}@keyframes tech-in{from{opacity:.82;transform:translateY(5px)}to{opacity:1;transform:none}}}