:root{--sidebar:#111827;--sidebar-muted:#9ca3af;--brand:#2563eb;--canvas:#f3f6fb;--ink:#172033;--border:#e5e9f2}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--sidebar);color:#fff;padding:20px 16px;display:flex;flex-direction:column;z-index:1030;transition:.2s}.sidebar-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:6px 8px 22px}.sidebar-brand small{display:block;color:var(--sidebar-muted);font-weight:400;font-size:11px;margin-top:2px}.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;font-weight:800;box-shadow:0 8px 22px #1d4ed84d}.brand-mark.small{width:38px;height:38px;border-radius:11px}.sidebar-nav{display:flex;flex-direction:column;gap:5px}.nav-section{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#64748b;padding:20px 12px 7px}.sidebar .nav-link{color:#cbd5e1;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;text-decoration:none}.sidebar .nav-link:hover,.sidebar .nav-link.active{background:#1f2937;color:#fff}.sidebar .nav-link.active{box-shadow:inset 3px 0 #60a5fa}.sidebar .nav-link.disabled{opacity:.48}.sidebar-footer{margin-top:auto;color:#9ca3af;font-size:12px;padding:12px}.status-dot{display:inline-block;width:8px;height:8px;background:#22c55e;border-radius:99px;margin-right:6px}.app-main{margin-left:260px;width:calc(100% - 260px)}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--border);padding:13px 28px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:1020}.topbar h2{font-size:20px;margin:0;font-weight:750}.topbar p{font-size:12px;color:#7c879b;margin:2px 0 0}.sidebar-toggle{display:none}.user-menu{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:#fff}.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-weight:800}.content-wrap{min-height:calc(100vh - 82px)}.panel,.metric-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 5px 20px rgba(30,41,59,.04)}.panel h3{font-size:17px;margin-bottom:16px}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.panel-header h3,.panel-header p{margin:0}.panel-header p{color:#7c879b;font-size:13px}.metric-card span{font-size:13px;color:#718096}.metric-card strong{font-size:31px;display:block;margin:7px 0 2px}.metric-card small{color:#9aa4b5}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.check-grid>div{padding:12px;border-radius:10px;background:#f8fafc;border:1px solid #edf0f5}.command-box{display:block;background:#111827;color:#d1fae5;padding:14px;border-radius:10px;white-space:normal}.permission-group{border:1px solid var(--border);border-radius:12px;padding:14px;height:100%}.permission-title{font-weight:750;margin-bottom:10px;text-transform:capitalize}.permission-group .form-check{margin-bottom:7px}.guest-body{min-height:100vh;background:radial-gradient(circle at top right,#dbeafe,transparent 35%),#f5f7fb;display:grid;place-items:center;padding:24px}.auth-shell{width:min(440px,100%)}.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}.auth-brand h1{font-size:22px;margin:0}.auth-brand p{margin:2px 0 0;color:#7c879b;font-size:13px}.auth-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:0 22px 60px rgba(30,64,175,.12)}.auth-card h2{font-size:24px;font-weight:800}.table>:not(caption)>*>*{padding:.85rem .7rem;border-color:#edf0f5}@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.app-main{margin-left:0;width:100%}.sidebar-toggle{display:inline-flex}.check-grid{grid-template-columns:1fr}.topbar{padding:12px 16px}}

/* Step 2: purchase, supplier and stock modules */
.selector-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;color:#64748b}.selector-scroll{height:230px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:8px;background:#fafcff}.check-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13px}.check-row:hover{background:#eef4ff}.size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.purchase-grid-wrap{max-height:460px;overflow:auto}.purchase-grid thead th{position:sticky;top:0;z-index:2;background:#f8fafc;white-space:nowrap}.purchase-grid input{min-width:92px}.summary-panel .summary-row{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px dashed #e2e8f0}.summary-panel .summary-row.grand{margin-top:5px;padding:17px 14px;border:0;border-radius:12px;background:#eaf2ff;color:#1746a2;font-size:19px}.invoice-meta{display:grid;gap:12px}.invoice-meta>div{display:flex;justify-content:space-between;gap:20px;padding-bottom:9px;border-bottom:1px solid #edf0f5}.invoice-meta span,.detail-label{color:#7c879b;font-size:12px}.stock-pill{display:inline-block;min-width:64px;padding:5px 9px;border-radius:999px;text-align:center;font-weight:800}.stock-pill.ok{background:#dcfce7;color:#166534}.stock-pill.low{background:#fef3c7;color:#92400e}.stock-pill.out{background:#fee2e2;color:#991b1b}@media(max-width:767.98px){.size-grid{grid-template-columns:1fr}.purchase-grid-wrap{max-height:none}}

/* Step 3: product catalogue and warehouse transfers */
.master-form-card{border:1px solid var(--border);border-radius:14px;padding:18px;background:#f8fafc}.nav-tabs .nav-link{color:#526079;font-weight:700}.nav-tabs .nav-link.active{color:#1d4ed8}.transfer-status{padding:.45rem .65rem;text-transform:capitalize}.status-draft{background:#e2e8f0;color:#334155}.status-processing,.status-dispatched{background:#dbeafe;color:#1d4ed8}.status-completed,.status-received{background:#dcfce7;color:#166534}.status-cancelled,.status-failed{background:#fee2e2;color:#991b1b}.transfer-stock-results{max-height:560px;overflow:auto}.transfer-stock-card{border:1px solid var(--border);border-radius:12px;padding:13px;margin-bottom:10px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:8px}.transfer-stock-card .input-group{grid-column:1/-1}.timeline{position:relative;padding-left:22px}.timeline:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:#dbe3ef}.timeline-item{position:relative;padding:0 0 22px 12px}.timeline-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:#2563eb;left:-20px;top:5px;border:2px solid #fff;box-shadow:0 0 0 2px #bfdbfe}

/* Step 4 unified professional template and synchronization */
:root{--primary:#3157d5;--primary-dark:#203ca3;--primary-soft:#edf1ff;--success:#159a68;--danger:#d94b58;--warning:#d99a18;--sidebar:#0d1730;--sidebar-2:#111f3f;--canvas:#f2f5fa;--ink:#18233b;--muted:#73809a;--border:#e2e7f0;--radius:16px;--shadow:0 14px 40px rgba(30,47,82,.07)}
body{background:var(--canvas);color:var(--ink)}.page-container{padding:28px 30px 36px}.sidebar{width:278px;padding:22px 16px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));box-shadow:10px 0 35px rgba(9,20,45,.14)}.app-main{margin-left:278px;width:calc(100% - 278px)}.sidebar-brand{padding:4px 8px 17px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-brand strong{font-size:15px;letter-spacing:.01em}.sidebar-node{display:flex;align-items:center;gap:10px;margin:15px 7px 4px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035)}.sidebar-node small{display:block;color:#8290ad;font-size:9px;letter-spacing:.14em}.sidebar-node b{display:block;color:#dce6ff;font-size:11px;margin-top:2px}.sidebar-nav{overflow-y:auto;padding-right:3px}.sidebar .nav-link{justify-content:flex-start;align-items:center;gap:11px;padding:9px 11px;font-size:13px}.sidebar .nav-link.active{background:linear-gradient(90deg,rgba(71,104,226,.33),rgba(71,104,226,.09));box-shadow:inset 3px 0 #6c8cff}.nav-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.07);font-size:10px;font-weight:900;color:#aebde0}.sidebar .nav-link.active .nav-icon{background:#4b6be0;color:#fff}.sidebar-footer{border-top:1px solid rgba(255,255,255,.08);padding-top:14px;display:flex;flex-direction:column}.sidebar-footer span{color:#d3def7;font-weight:700}.sidebar-footer small{color:#7e8ba5}.topbar{height:88px;padding:12px 30px;border-bottom:1px solid rgba(220,226,238,.9);box-shadow:0 4px 20px rgba(30,47,82,.025)}.topbar-breadcrumb{font-size:9px;letter-spacing:.13em;color:#8794ad;margin-bottom:2px}.topbar h2{font-size:21px}.node-badge{align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--border);border-radius:12px;background:#fbfcff}.node-badge b,.node-badge small{display:block}.node-badge b{font-size:11px}.node-badge small{font-size:8px;color:#8794ad;letter-spacing:.1em}.user-menu{padding:5px 8px;border-radius:12px}.user-menu:after{margin-left:8px}.user-meta{text-align:left;line-height:1.15}.user-meta b,.user-meta small{display:block}.user-meta b{font-size:12px}.user-meta small{font-size:9px;color:#8994a7;margin-top:3px}.avatar{width:35px;height:35px;background:linear-gradient(135deg,#dfe6ff,#c8d5ff);color:#2848b8}.panel,.metric-card{border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(224,229,239,.94)}.metric-card{position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;right:-22px;top:-28px;width:90px;height:90px;border-radius:50%;background:var(--primary-soft)}.metric-card strong,.metric-card span,.metric-card small{position:relative;z-index:1}.panel-header h3{font-weight:780}.btn{border-radius:10px;font-weight:680}.btn-primary{background:linear-gradient(135deg,var(--primary),#4669e4);border-color:var(--primary)}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-color:var(--primary-dark)}.btn-success{background:#159a68;border-color:#159a68}.form-control,.form-select{border-color:#dce2ed;border-radius:10px;min-height:42px}.form-control:focus,.form-select:focus{border-color:#7890e8;box-shadow:0 0 0 .2rem rgba(49,87,213,.11)}.table thead th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#79859a;background:#f8faff;white-space:nowrap}.table tbody td{font-size:13px}.badge{border-radius:8px;padding:.48em .65em;letter-spacing:.02em}.bg-soft-primary{background:#e8eeff;color:#3157d5}.empty-state{text-align:center!important;color:#8b96aa!important;padding:42px 15px!important}.app-footer{padding:17px 30px;border-top:1px solid var(--border);display:flex;justify-content:space-between;color:#8b96aa;font-size:11px;background:#fff}.sidebar-backdrop{display:none}

/* Authentication */
.guest-body{display:block;padding:0;background:#eef2f8}.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)}.auth-showcase{position:relative;overflow:hidden;display:flex;align-items:center;padding:8vw;background:linear-gradient(145deg,#0b1734,#18326a 58%,#2449a6);color:#fff}.auth-showcase-content{position:relative;z-index:2;max-width:690px}.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:76px}.auth-logo span,.auth-mobile-brand span{width:42px;height:42px;border-radius:13px;background:#fff;color:#294ab4;display:grid;place-items:center;font-weight:900;box-shadow:0 14px 35px rgba(0,0,0,.18)}.auth-logo strong{font-size:18px}.auth-kicker,.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:800;color:#a9beff}.auth-showcase h1{font-size:clamp(34px,4vw,62px);line-height:1.08;letter-spacing:-.04em;font-weight:820;margin:18px 0 22px}.auth-showcase>div>p{font-size:16px;color:#cbd7f3;max-width:600px;line-height:1.7}.auth-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}.auth-feature-grid>div{padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(5px)}.auth-feature-grid b,.auth-feature-grid small{display:block}.auth-feature-grid b{font-size:13px}.auth-feature-grid small{color:#b9c7e6;font-size:11px;line-height:1.45;margin-top:5px}.auth-glow{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35}.auth-glow-one{width:420px;height:420px;background:#5a7df2;right:-160px;top:-110px}.auth-glow-two{width:300px;height:300px;background:#28b49a;left:-140px;bottom:-120px}.auth-form-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;background:#f7f9fd}.auth-card{width:min(460px,100%);padding:42px;border-radius:22px;box-shadow:0 28px 80px rgba(30,47,82,.12)}.auth-heading h2{font-size:31px;letter-spacing:-.03em;margin:7px 0 6px}.auth-heading p{color:#7c879b;margin-bottom:30px}.auth-form .form-label{font-size:12px;font-weight:750;color:#44506a}.auth-form a{font-size:11px;text-decoration:none;font-weight:700}.auth-submit{height:54px}.secure-caption{font-size:10px;color:#8894a8}.auth-mobile-brand{display:none}.auth-copyright{font-size:10px;color:#8b96a8;margin-top:20px}

/* Sync and receiving */
.sync-flow{display:flex;align-items:center;gap:9px;margin-top:20px}.sync-flow>div{flex:1;padding:14px 12px;border:1px solid var(--border);border-radius:13px;background:#fafbfe}.sync-flow>div>span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-weight:900;font-size:10px;margin-bottom:10px}.sync-flow b,.sync-flow small{display:block}.sync-flow b{font-size:12px}.sync-flow small{font-size:9px;color:#8390a6;margin-top:3px;line-height:1.4}.sync-flow i{width:18px;height:2px;background:#ccd4e4}.mapping-list{display:grid;gap:10px;max-height:500px;overflow:auto}.mapping-row{display:grid;grid-template-columns:1fr 145px;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fafbfe}.mapping-row b,.mapping-row small{display:block}.mapping-row b{font-size:12px}.mapping-row small{font-size:9px;color:#8994a7;margin-top:3px}.config-checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}.config-checklist li{padding:10px 12px;border-radius:10px;font-size:12px;font-weight:700}.config-checklist li:before{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:9px;font-size:10px}.config-checklist .ok{background:#ebfaf4;color:#13734f}.config-checklist .ok:before{content:"✓";background:#c9f1e2}.config-checklist .bad{background:#fff1f2;color:#a52d39}.config-checklist .bad:before{content:"!";background:#ffd8dc}.receive-confirm{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 22px;background:#eaf8f3;border:1px solid #cbeadf;border-radius:15px}.receive-confirm b{font-size:15px}.receive-confirm p{margin:3px 0 0;color:#668076;font-size:11px}.sticky-summary{position:sticky;top:110px}.summary-list>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border)}.summary-list span{color:#7f8ba0;font-size:11px}.summary-list b{font-size:11px;text-align:right}

@media(max-width:1100px){.auth-layout{grid-template-columns:1fr}.auth-showcase{display:none}.auth-form-side{min-height:100vh}.auth-mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}.sync-flow{display:grid;grid-template-columns:1fr 1fr}.sync-flow i{display:none}}
@media(max-width:991.98px){.sidebar{width:278px}.app-main{margin-left:0;width:100%}.sidebar-backdrop{position:fixed;inset:0;background:rgba(9,16,33,.55);z-index:1025}.sidebar.open+.sidebar-backdrop{display:block}.sidebar-toggle{display:inline-flex;flex-direction:column;gap:4px;width:40px;height:40px;justify-content:center;align-items:center}.sidebar-toggle span{width:18px;height:2px;background:#25314b}.page-container{padding:22px 16px}.topbar{padding:11px 16px}.app-footer{padding:15px 16px}}
@media(max-width:600px){.auth-form-side{padding:24px}.auth-card{padding:27px 22px}.auth-feature-grid,.sync-flow{grid-template-columns:1fr}.mapping-row{grid-template-columns:1fr}.receive-confirm{align-items:stretch;flex-direction:column}.receive-confirm .btn{width:100%}.app-footer{display:block}.app-footer span{display:block;margin:3px 0}}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --navy: #0b1425;
    --navy-light: #172b4d;
    --text: #111827;
    --muted: #697386;
    --border: #dce3ed;
    --surface: #ffffff;
    --background: #f4f7fb;
    --danger: #dc2626;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;
}

.guest-body {
    min-height: 100vh;
    color: var(--text);
    background: var(--background);
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.auth-page {
    display: grid;
    grid-template-columns: minmax(610px, 1.13fr) minmax(470px, 0.87fr);
    min-height: 100vh;
}

/* Left side */

.auth-visual {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            #081222 0%,
            #101f38 50%,
            #173766 100%
        );
}

.visual-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding: 42px clamp(44px, 5vw, 84px) 30px;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 13px;
}

.auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    color: var(--primary);
    background: #ffffff;
    font-size: 21px;
    font-weight: 800;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.auth-brand-name {
    font-size: 18px;
    font-weight: 750;
}

.visual-main {
    display: grid;
    grid-template-columns: minmax(250px, 0.78fr) minmax(390px, 1.22fr);
    align-items: center;
    gap: 24px;
    flex: 1;
    padding: 38px 0 18px;
}

.visual-copy {
    position: relative;
    z-index: 3;
    max-width: 410px;
}

.visual-label {
    display: block;
    margin-bottom: 18px;
    color: #7db7ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.visual-copy h1 {
    margin: 0;
    max-width: 400px;
    font-size: clamp(42px, 4.4vw, 67px);
    font-weight: 760;
    line-height: 1.03;
    letter-spacing: -0.05em;
}

.visual-copy p {
    max-width: 390px;
    margin: 22px 0 0;
    color: #bdcbe0;
    font-size: 16px;
    line-height: 1.7;
}

.warehouse-illustration {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 470px;
    padding: 25px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 35px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.warehouse-svg {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
}

.warehouse-status {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(7, 18, 35, 0.58);
    font-size: 11px;
    font-weight: 650;
    backdrop-filter: blur(10px);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.13);
}

.floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 155px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    color: #ffffff;
    background: rgba(10, 23, 43, 0.82);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
}

.floating-card-left {
    left: -14px;
    bottom: 55px;
}

.floating-card-right {
    right: -12px;
    top: 93px;
}

.floating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    color: #ffffff;
    background: var(--primary);
}

.floating-icon svg {
    width: 21px;
    height: 21px;
}

.floating-card b {
    display: block;
    font-size: 12px;
}

.floating-card small {
    display: block;
    margin-top: 2px;
    color: #aebed3;
    font-size: 10px;
}

.visual-features {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 4px;
}

.visual-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #91c3ff;
    background: rgba(59, 130, 246, 0.16);
}

.feature-icon svg {
    width: 21px;
    height: 21px;
}

.visual-feature b {
    display: block;
    font-size: 12px;
}

.visual-feature small {
    display: block;
    margin-top: 3px;
    color: #9fb0c6;
    font-size: 10px;
}

.visual-footer {
    margin: 8px 0 0;
    color: #8194ad;
    font-size: 11px;
}

.visual-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.visual-glow-one {
    top: -210px;
    right: -140px;
    width: 500px;
    height: 500px;
    background: rgba(59, 130, 246, 0.18);
}

.visual-glow-two {
    bottom: -280px;
    left: 80px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
}

/* Right side */

.auth-form-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 100vh;
    padding: 36px;
    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.06),
            transparent 36%
        ),
        var(--background);
}

.mobile-brand {
    display: none;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin-bottom: 24px;
}

.mobile-brand .auth-brand-mark {
    color: #ffffff;
    background: var(--primary);
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 44px;
    border: 1px solid rgba(220, 227, 237, 0.95);
    border-radius: 24px;
    background: var(--surface);
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 0.09),
        0 5px 18px rgba(15, 23, 42, 0.035);
}

.login-heading {
    margin-bottom: 31px;
}

.login-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.login-heading h2 {
    margin: 0;
    color: var(--navy);
    font-size: 36px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.login-heading p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.form-group {
    margin-bottom: 22px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 680;
}

.password-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.forgot-link {
    color: var(--primary);
    font-size: 12px;
    font-weight: 680;
    text-decoration: none;
}

.forgot-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    color: #8d99ab;
    pointer-events: none;
}

.input-icon svg {
    width: 19px;
    height: 19px;
}

.login-form .form-control {
    width: 100%;
    min-height: 55px;
    padding: 13px 16px 13px 48px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text);
    background: #ffffff;
    font-size: 14px;
    outline: none;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.login-form .form-control::placeholder {
    color: #a2abba;
}

.login-form .form-control:hover {
    border-color: #bac5d3;
}

.login-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

.login-form .form-control.is-invalid {
    border-color: var(--danger);
    background-image: none;
}

.password-wrapper .form-control {
    padding-right: 72px;
}

.password-toggle {
    position: absolute;
    right: 15px;
    z-index: 4;
    padding: 5px;
    border: 0;
    color: var(--primary);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--primary-dark);
}

.login-error {
    margin-top: 7px;
    color: var(--danger);
    font-size: 12px;
}

.login-options {
    margin: 0 0 26px;
}

.remember-option {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #596579;
    font-size: 12px;
    cursor: pointer;
}

.remember-option input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primary);
}

.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    padding: 12px 20px;
    border: 1px solid var(--primary);
    border-radius: 13px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #3478ef,
            #2563eb
        );
    font-size: 14px;
    font-weight: 720;
    cursor: pointer;
    box-shadow: 0 13px 27px rgba(37, 99, 235, 0.22);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.login-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28);
}

.login-button:disabled {
    cursor: not-allowed;
    opacity: 0.75;
    transform: none;
}

.login-help {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e7ecf2;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.auth-copyright {
    width: 100%;
    max-width: 460px;
    margin: 23px 0 0;
    color: #8d97a6;
    font-size: 11px;
    text-align: center;
}

.auth-card .alert {
    margin-bottom: 24px;
    border-radius: 12px;
    font-size: 12px;
}

/* Medium screens */

@media (max-width: 1250px) {
    .auth-page {
        grid-template-columns: minmax(520px, 1fr) minmax(440px, 0.85fr);
    }

    .visual-content {
        padding-left: 42px;
        padding-right: 42px;
    }

    .visual-main {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .visual-copy {
        max-width: 620px;
    }

    .visual-copy h1 {
        max-width: 620px;
        font-size: 48px;
    }

    .warehouse-illustration {
        min-height: 370px;
    }

    .warehouse-svg {
        max-width: 520px;
    }
}

/* Tablet and mobile */

@media (max-width: 900px) {
    .auth-page {
        display: block;
    }

    .auth-visual {
        display: none;
    }

    .auth-form-section {
        justify-content: center;
        min-height: 100vh;
        padding: 30px 20px;
    }

    .mobile-brand {
        display: flex;
    }
}

@media (max-width: 520px) {
    .auth-form-section {
        justify-content: flex-start;
        padding: 22px 15px;
    }

    .auth-card {
        padding: 31px 23px;
        border-radius: 19px;
    }

    .login-heading h2 {
        font-size: 31px;
    }

    .login-form .form-control,
    .login-button {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Purchase create: searchable product picker and automatic setup */
.product-search-select{position:relative;z-index:20}.product-search-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}.product-search-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:10px 13px;border:1px solid #dce3ed;border-radius:10px;color:#8a96aa;background:#fff;font-size:14px;text-align:left;transition:border-color .18s ease,box-shadow .18s ease}.product-search-trigger:hover{border-color:#b8c4d4}.product-search-trigger:focus,.product-search-select.open .product-search-trigger{border-color:#7890e8;outline:0;box-shadow:0 0 0 .2rem rgba(49,87,213,.11)}.product-search-trigger.has-value{color:#18233b}.product-search-trigger .product-search-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-search-trigger>svg{width:18px;height:18px;flex:0 0 18px;color:#64748b;transition:transform .18s ease}.product-search-select.open .product-search-trigger>svg{transform:rotate(180deg)}.product-search-menu{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:1080;padding:9px;border:1px solid #dce3ed;border-radius:13px;background:#fff;box-shadow:0 20px 45px rgba(24,35,59,.16)}.product-search-menu[hidden]{display:none!important}.product-search-input-wrap{position:relative}.product-search-input-wrap>svg{position:absolute;left:12px;top:50%;width:18px;height:18px;color:#8793a7;transform:translateY(-50%);pointer-events:none}.product-search-input{width:100%;height:42px;padding:8px 12px 8px 38px;border:1px solid #dce3ed;border-radius:9px;color:#18233b;background:#f9fbfe;font-size:13px;outline:0}.product-search-input:focus{border-color:#7890e8;box-shadow:0 0 0 3px rgba(49,87,213,.1)}.product-search-options{max-height:270px;margin-top:8px;overflow:auto}.product-search-option{display:block;width:100%;padding:10px 11px;border:0;border-radius:9px;color:#29354b;background:transparent;text-align:left;cursor:pointer}.product-search-option:hover,.product-search-option:focus{outline:0;background:#eef4ff}.product-search-option.selected{background:#e8efff;color:#2348b7}.product-search-option strong,.product-search-option small{display:block}.product-search-option strong{font-size:13px}.product-search-option small{margin-top:3px;color:#7e8ba0;font-size:10px;line-height:1.35}.product-search-empty{padding:22px 10px;color:#8793a7;font-size:12px;text-align:center}.setup-feedback{display:flex;align-items:center;min-height:42px;padding:10px 12px;border:1px solid transparent;border-radius:10px;font-size:12px;font-weight:650;line-height:1.4}.setup-feedback-warning{border-color:#f1d69c;color:#8a5a09;background:#fff8e8}.setup-feedback-loading{border-color:#c9d7fb;color:#3157b5;background:#eff4ff}.setup-feedback-success{border-color:#bfe5d5;color:#147451;background:#ecfaf4}.setup-feedback-error{border-color:#f1c7cc;color:#a82e3a;background:#fff1f2}.global-price-section{padding-top:15px;border-top:1px solid #e8edf4}.global-price-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.global-price-heading h4,.global-price-heading p{margin:0}.global-price-heading h4{font-size:14px;font-weight:780}.global-price-heading p{margin-top:2px;color:#7c879b;font-size:10px}.auto-badge{display:inline-flex;align-items:center;justify-content:center;min-height:23px;padding:3px 8px;border-radius:999px;color:#166a4c;background:#e3f7ef;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.global-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.global-price-grid .form-label{margin-bottom:5px;font-size:10px}.global-price-grid .form-control{min-width:0;min-height:40px;padding:8px 9px;font-size:12px}.selector-scroll{height:190px}
@media(max-width:1199.98px){.selector-scroll{height:215px}.global-price-grid{grid-template-columns:repeat(3,minmax(100px,1fr))}}
@media(max-width:575.98px){.global-price-grid{grid-template-columns:1fr}.product-search-menu{position:fixed;top:15%;left:16px;right:16px;max-height:70vh}.product-search-options{max-height:48vh}}