:root {
    --navy: #102236;
    --navy-2: #17324d;
    --blue: #1f6feb;
    --blue-soft: #eaf2ff;
    --green: #0f9f6e;
    --green-soft: #e9f8f2;
    --orange: #f59e0b;
    --orange-soft: #fff5df;
    --red: #dc4c4c;
    --red-soft: #fff0f0;
    --purple: #7557d3;
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #172033;
    --muted: #738096;
    --border: #e3e8f0;
    --shadow: 0 10px 30px rgba(16, 34, 54, .07);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100dvh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    background: linear-gradient(180deg, #0c1d2f 0%, #142b43 100%);
    color: #fff;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    z-index: 30;
}
.brand {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 2px 7px 20px;
}
.brand-logo {
    width: 100%;
    height: auto;
    max-height: 66px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(255,255,255,.16);
}
.brand-sub { display:block; color:#9fb1c5; font-size:9px; text-transform:uppercase; letter-spacing:1.25px; font-weight:850; text-align:center; }
.side-nav { display:grid; gap:5px; overflow-y:auto; scrollbar-width:none; padding-right:2px; }
.side-nav::-webkit-scrollbar{display:none;}
.nav-divider{padding:10px 12px 2px;color:#667c94;font-size:8px;font-weight:900;letter-spacing:1.3px;}
.side-nav a {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    color: #9eb0c3;
    padding: 10px 12px;
    font-weight: 700;
    transition: .18s ease;
}
.side-nav a i { width: 20px; text-align:center; }
.side-nav a:hover { color:#fff; background: rgba(255,255,255,.06); }
.side-nav a.active { color:#fff; background: linear-gradient(90deg, rgba(31,111,235,.34), rgba(31,111,235,.08)); box-shadow: inset 3px 0 0 #4c8dff; }
.sidebar-user {
    margin-top: auto;
    padding: 13px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}
.sidebar-user strong, .sidebar-user span { display:block; }
.sidebar-user strong { font-size: 12px; }
.sidebar-user span { margin-top:3px; color:#8fa2b8; font-size:10px; }

.main { margin-left:250px; min-height:100dvh; display:flex; flex-direction:column; }
.topbar {
    position: sticky;
    top:0;
    z-index:20;
    min-height: 78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding: 15px 28px;
    background: rgba(255,255,255,.91);
    backdrop-filter: blur(15px);
    border-bottom:1px solid var(--border);
}
.topbar-left { min-width:0; }
.page-kicker { margin:0 0 3px; color:#8a95a7; font-size:9px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; }
.page-title { margin:0; font-size:23px; letter-spacing:-.5px; }
.shop-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border-radius:999px;
    color:#40516a;
    background:#eef3f8;
    font-weight:700;
    font-size:11px;
    white-space:nowrap;
}
.mobile-logo { display:none; }
.content { padding:24px 28px 38px; flex:1 0 auto; }

.flash-stack { display:grid; gap:8px; margin-bottom:16px; }
.alert { padding: 11px 13px; border-radius: 12px; font-size:12px; font-weight:700; }
.alert-success { background:var(--green-soft); color:#0c7553; border:1px solid #bfe9d8; }
.alert-danger { background:var(--red-soft); color:#a63f3f; border:1px solid #f0c9c9; }
.alert-warning { background:var(--orange-soft); color:#9a6505; border:1px solid #f7dfad; }
.alert-info { background:var(--blue-soft); color:#2c5d9e; border:1px solid #cbdfff; }

.hero {
    border-radius:22px;
    padding:26px;
    color:#fff;
    background:
      radial-gradient(circle at 92% 0%, rgba(94,154,255,.48), transparent 30%),
      linear-gradient(135deg,#102236 0%,#1d3f61 56%,#3265a2 100%);
    box-shadow: 0 22px 50px rgba(16,34,54,.17);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px;
}
.hero h2 { margin:10px 0 7px; max-width:620px; font-size:30px; line-height:1.12; letter-spacing:-.8px; }
.hero p { margin:0; color:#bfd0e2; max-width:650px; line-height:1.6; font-size:12px; }
.hero-badge { display:inline-flex; padding:5px 9px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#dbe8f7; background:rgba(255,255,255,.07); font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }

.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.stat-card { min-height:142px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:17px; box-shadow: var(--shadow); }
.stat-icon { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; margin-bottom:15px; color:var(--blue); background:var(--blue-soft); }
.stat-card.green .stat-icon { color:var(--green); background:var(--green-soft); }
.stat-card.orange .stat-icon { color:#bd7807; background:var(--orange-soft); }
.stat-card.red .stat-icon { color:var(--red); background:var(--red-soft); }
.stat-label { display:block; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.stat-value { display:block; margin-top:5px; font-size:23px; font-weight:850; letter-spacing:-.6px; }
.stat-note { display:block; color:#9ba6b7; margin-top:3px; font-size:10px; }

.grid-2 { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:16px; }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-pad { padding:20px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px 12px; }
.card-head h3 { margin:0; font-size:15px; }
.card-sub { display:block; margin-bottom:4px; color:#8b96a9; font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th, td { padding:13px 16px; border-top:1px solid #edf0f4; text-align:left; vertical-align:middle; }
th { color:#8994a6; background:#fbfcfe; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.7px; white-space:nowrap; }
td { color:#43516a; font-size:11px; }
.table-title { color:#24324a; font-weight:800; }
.table-sub { display:block; margin-top:3px; color:#97a2b4; font-size:9px; }
.amount { color:#1d2c45; font-weight:850; white-space:nowrap; }

.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 8px; font-size:9px; font-weight:850; }
.badge-success { color:#0d7855; background:var(--green-soft); }
.badge-danger { color:#b74444; background:var(--red-soft); }
.badge-warning { color:#a56c08; background:var(--orange-soft); }
.badge-info { color:#2d60a3; background:var(--blue-soft); }
.badge-dark { color:#fff; background:var(--navy-2); }

.btn { border:0; border-radius:11px; padding:10px 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:800; font-size:11px; transition:.16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { color:#fff; background:linear-gradient(135deg,#1f6feb,#4b79e8); box-shadow:0 8px 18px rgba(31,111,235,.18); }
.btn-success { color:#fff; background:linear-gradient(135deg,#0f9f6e,#16af7b); }
.btn-dark { color:#fff; background:var(--navy); }
.btn-danger { color:#fff; background:var(--red); }
.btn-light { color:#526078; background:#edf1f6; }
.btn-outline { color:#4e5e76; background:#fff; border:1px solid #dce3ec; }
.btn-sm { padding:7px 9px; border-radius:8px; font-size:9px; }
.btn-block { width:100%; }

.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; }
.toolbar-left, .toolbar-right { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.search-box { min-width:260px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #dce3ec; border-radius:11px; padding:0 11px; }
.search-box input { border:0; outline:0; width:100%; padding:10px 0; background:transparent; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.form-group { display:grid; gap:6px; }
.form-group.full { grid-column:1/-1; }
label { color:#536078; font-size:10px; font-weight:850; }
.form-control, .form-select, textarea {
    width:100%;
    border:1px solid #d9e0e9;
    border-radius:11px;
    padding:10px 11px;
    outline:0;
    color:#27344b;
    background:#fff;
}
.form-control:focus, .form-select:focus, textarea:focus { border-color:#79a5ef; box-shadow:0 0 0 3px rgba(31,111,235,.09); }
textarea { min-height:90px; resize:vertical; }
.helper { color:#929dad; font-size:9px; line-height:1.5; }

.modal-overlay { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:18px; background:rgba(7,17,29,.62); backdrop-filter:blur(5px); }
.modal-overlay.open { display:grid; }
.modal-card { width:min(620px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:20px; box-shadow:0 30px 90px rgba(0,0,0,.3); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-head h3 { margin:0; font-size:16px; }
.modal-body { padding:20px; }
.close-btn { width:34px; height:34px; border:0; border-radius:9px; background:#edf1f6; color:#65728a; font-size:18px; }

.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.product-card { border:1px solid var(--border); border-radius:15px; padding:15px; background:#fff; box-shadow:0 5px 18px rgba(16,34,54,.04); }
.product-card h4 { margin:0; font-size:13px; }
.product-card .meta { margin-top:4px; color:#8b96a8; font-size:9px; }
.product-actions { display:flex; gap:7px; margin-top:12px; }

.pos-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr); gap:16px; align-items:start; }
.pos-products { min-height:500px; }
.pos-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:15px; }
.pos-product { border:1px solid var(--border); border-radius:14px; padding:13px; background:#fff; text-align:left; }
.pos-product:hover { border-color:#9dbcf3; background:#fbfdff; }
.pos-product-name { display:block; color:#24324a; font-size:11px; font-weight:850; }
.pos-product-meta { display:flex; justify-content:space-between; gap:8px; margin-top:8px; color:#8d98aa; font-size:9px; }
.cart-card { position:sticky; top:94px; }
.cart-empty { padding:38px 20px; text-align:center; color:#8c97a9; }
.cart-empty i { display:block; margin-bottom:10px; font-size:32px; color:#c3cbd7; }
.cart-item { padding:13px 15px; border-top:1px solid #edf0f4; }
.cart-item:first-child { border-top:0; }
.cart-item-head { display:flex; justify-content:space-between; gap:10px; }
.cart-item-name { font-size:11px; font-weight:850; }
.cart-item-meta { color:#8b96a8; font-size:9px; margin-top:2px; }
.cart-controls { display:grid; grid-template-columns:80px 1fr 32px; gap:7px; align-items:end; margin-top:10px; }
.cart-controls input { padding:8px; }
.cart-total { padding:16px 18px; border-top:1px solid var(--border); background:#fbfcfe; }
.total-line { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.total-line span { color:#68758b; font-size:11px; }
.total-line strong { font-size:19px; color:#17243a; }

.mobile-cards { display:none; }
.mobile-record { background:#fff; border:1px solid var(--border); border-radius:15px; padding:14px; box-shadow:0 5px 16px rgba(16,34,54,.04); }
.mobile-record-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.mobile-record h4 { margin:0; font-size:12px; }
.mobile-record .line { display:flex; justify-content:space-between; gap:15px; padding-top:9px; margin-top:9px; border-top:1px solid #eef1f5; color:#78859a; font-size:10px; }
.mobile-record .line strong { color:#34425a; }

.empty-state { padding:38px 20px; text-align:center; color:#8a95a7; }
.empty-state i { font-size:31px; color:#c4ccd7; margin-bottom:9px; }
.empty-state h4 { margin:0 0 5px; color:#526078; font-size:12px; }
.empty-state p { margin:0; font-size:10px; }

.section-title { margin:0 0 15px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.section-title h2 { margin:0; font-size:19px; }

.metric-strip { display:flex; overflow-x:auto; gap:10px; padding-bottom:4px; scrollbar-width:none; }
.metric-strip::-webkit-scrollbar { display:none; }
.metric-pill { min-width:165px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px; }
.metric-pill span { display:block; color:#8894a6; font-size:9px; font-weight:850; text-transform:uppercase; }
.metric-pill strong { display:block; margin-top:5px; font-size:15px; }

.filter-card { padding:14px; margin-bottom:14px; }
.filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:end; }

.quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.quick-link { min-height:116px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.quick-link i { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--blue); background:var(--blue-soft); margin-bottom:12px; }
.quick-link strong { display:block; font-size:12px; }
.quick-link span { display:block; margin-top:4px; color:#8b96a8; font-size:9px; line-height:1.5; }

.mobile-bottom-nav { display:none; }
.mobile-topbar { display:none; }
.footer { margin-top:auto; padding:18px 28px; color:#8d98aa; font-size:9px; text-align:center; flex-shrink:0; }
.footer a { color:#336fc4; font-weight:800; }

@media (max-width: 1100px) {
    .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .grid-2, .pos-layout { grid-template-columns:1fr; }
    .cart-card { position:static; }
    .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    body { padding-bottom:73px; }
    .sidebar, .topbar { display:none; }
    .main { margin-left:0; padding-top:64px; min-height:calc(100dvh - 68px); }
    .mobile-topbar {
        position:fixed;
        inset:0 0 auto 0;
        height:64px;
        z-index:40;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:9px 14px;
        background:rgba(255,255,255,.96);
        border-bottom:1px solid var(--border);
        backdrop-filter:blur(12px);
    }
    .mobile-logo { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; }
    .mobile-logo img { width:128px; height:38px; object-fit:contain; object-position:left center; border-radius:7px; background:#fff; }
    .mobile-logo span { display:block; color:#8d98aa; font-size:8px; margin-top:0; max-width:128px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mobile-user-btn {
        width:42px; height:42px; flex:0 0 42px;
        display:inline-flex; align-items:center; justify-content:center;
        border:0; border-radius:12px; color:#fff; background:var(--navy);
        text-decoration:none; line-height:1; overflow:hidden;
    }
    .mobile-user-btn i, .mobile-user-btn svg { width:18px !important; height:18px !important; display:block; }
    .content { padding:15px 13px 24px; }
    .hero { padding:20px; border-radius:17px; }
    .hero h2 { font-size:23px; }
    .hero p { font-size:10px; }
    .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:12px 0; }
    .stat-card { min-height:120px; padding:13px; border-radius:14px; }
    .stat-icon { width:32px; height:32px; margin-bottom:10px; }
    .stat-value { font-size:18px; }
    .stat-note { font-size:8px; }
    .card { border-radius:15px; }
    .card-pad { padding:15px; }
    .card-head { padding:15px 15px 10px; }
    .desktop-table { display:none; }
    .mobile-cards { display:grid; gap:9px; padding:0 12px 12px; }
    .toolbar { align-items:stretch; }
    .toolbar-left, .toolbar-right { width:100%; }
    .toolbar-right .btn { flex:1; }
    .search-box { width:100%; min-width:0; }
    .form-grid { grid-template-columns:1fr; }
    .product-grid, .pos-product-grid, .quick-links { grid-template-columns:1fr; }
    .pos-product-grid { padding:11px; }
    .pos-products { min-height:0; }
    .cart-controls { grid-template-columns:72px 1fr 32px; }
    .section-title h2 { font-size:17px; }
    .filters { grid-template-columns:1fr 1fr; }
    .filters .full-mobile { grid-column:1/-1; }
    .mobile-bottom-nav {
        position:fixed;
        inset:auto 0 0 0;
        z-index:50;
        height:68px;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        padding:6px 5px max(6px,env(safe-area-inset-bottom));
        background:#fff;
        border-top:1px solid #dde4ed;
        box-shadow:0 -8px 26px rgba(16,34,54,.08);
    }
    .mobile-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#8793a5; font-size:8px; font-weight:800; }
    .mobile-bottom-nav a i { font-size:16px; }
    .mobile-bottom-nav a.active { color:var(--blue); }
    .mobile-bottom-nav .sell-action { width:48px; height:48px; justify-self:center; align-self:center; border-radius:16px; color:#fff; background:linear-gradient(135deg,#1f6feb,#506de1); box-shadow:0 7px 18px rgba(31,111,235,.28); transform:translateY(-8px); }
    .mobile-bottom-nav .sell-action span { display:none; }
    .footer { padding:12px 12px 5px; }
}

@media (max-width: 390px) {
    .stats-grid { grid-template-columns:1fr 1fr; }
    .stat-card { min-height:112px; }
    .filters { grid-template-columns:1fr; }
}


body.modal-open{overflow:hidden;}
.action-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.btn-icon{width:36px;height:36px;padding:0;}
.btn-warning{color:#825400;background:#fff2cc;border:1px solid #f5d986;}
.danger-zone{border:1px solid #f2cccc;background:#fffafa;border-radius:14px;padding:13px;}
.management-note{padding:13px 15px;border-radius:13px;background:#f7f9fc;border:1px solid var(--border);color:#718096;font-size:10px;line-height:1.55;}
.shop-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.shop-card{padding:16px;}
.shop-card .shop-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--blue-soft);color:var(--blue);margin-bottom:12px;}
.shop-card h3{margin:0;font-size:14px;}
.shop-card p{min-height:30px;margin:5px 0 12px;color:#8793a5;font-size:9px;line-height:1.55;}
.live-result-count{font-size:9px;color:#8d98aa;font-weight:800;white-space:nowrap;}
.filter-actions{display:flex;gap:8px;align-items:center;}
.pos-search-tools{display:flex;gap:8px;align-items:center;padding:0 15px 5px;}
.pos-search-tools .search-box{flex:1;}
.pos-product{transition:.16s ease;position:relative;}
.pos-product:active{transform:scale(.985);}
.pos-product.in-cart{border-color:#86acee;background:#f6f9ff;box-shadow:inset 0 0 0 1px #b9d1f7;}
.pos-product.in-cart::after{content:'In cart';position:absolute;right:10px;top:9px;padding:3px 6px;border-radius:999px;background:#e6f0ff;color:#2864bd;font-size:7px;font-weight:900;}
.pos-no-match{display:none;padding:28px 16px;text-align:center;color:#8c97a9;font-size:10px;}
.mobile-cart-jump{display:none;}
.inline-info{display:flex;gap:8px;align-items:flex-start;color:#6f7d91;font-size:9px;line-height:1.5;}
.inline-info i{margin-top:2px;color:#4b79e8;}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px;background:#18a676;}
.status-dot.off{background:#b3bdca;}
@media (max-width:1100px){.shop-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){
    .shop-card-grid{grid-template-columns:1fr;}
    .action-row .btn{flex:1;}
    .pos-search-tools{padding:0 11px 5px;}
    .pos-search-tools .btn{padding:10px;}
    .mobile-cart-jump{display:none;position:sticky;bottom:79px;z-index:15;margin:9px 11px 0;}
    .mobile-cart-jump.show{display:flex;}
    .toolbar .form-select{max-width:none!important;width:100%;}
    .filter-actions{width:100%;}
    .filter-actions .btn{flex:1;}
}

/* Final handover polish */
.password-field{position:relative}.password-field .form-control{padding-right:44px}.password-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:#eef2f6;color:#627086;cursor:pointer}
.flash-stack{position:fixed;top:18px;right:18px;z-index:120;width:min(390px,calc(100vw - 28px));pointer-events:none}.flash-stack .alert{box-shadow:0 14px 38px rgba(16,34,54,.18);border-width:1px;pointer-events:auto;transition:.25s ease}.toast-hide{opacity:0;transform:translateY(-8px)}
.auth-simple{min-height:100vh;display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,#0b1c2d,#173653)}.auth-card{width:min(430px,100%);background:#fff;border-radius:20px;padding:28px;box-shadow:0 28px 70px rgba(0,0,0,.25)}.auth-brand{text-align:center;margin-bottom:22px}.auth-brand i{font-size:28px;color:#1f6feb}.auth-brand h1{font-size:22px;margin:10px 0 4px}.auth-brand p{margin:0;color:#8793a5;font-size:10px}.auth-back{display:block;text-align:center;margin-top:16px;font-size:10px;font-weight:800}.trash-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 15px 15px}
@media(max-width:760px){.flash-stack{top:10px;right:10px;width:calc(100vw - 20px)}.trash-grid{grid-template-columns:1fr;padding:0 11px 11px}.auth-card{padding:22px}}


/* Final additions: invoices + predefined selling price */
.invoice-workspace{display:grid;gap:16px}.invoice-builder-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 10px}.invoice-item-row{border:1px solid #dce5ef;border-radius:14px;padding:13px;margin-bottom:10px;background:#f9fbfd}.invoice-item-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.invoice-item-top .form-select{flex:1}.invoice-live-summary{margin:14px 0 0 auto;max-width:390px;border:1px solid #dce5ef;border-radius:13px;overflow:hidden}.invoice-live-summary>div{display:flex;justify-content:space-between;gap:15px;padding:10px 13px;border-bottom:1px solid #e4ebf2}.invoice-live-summary>div:last-child{border-bottom:0}.invoice-live-summary .grand{background:#eaf3ff;color:#123f76;font-size:1.08rem}.invoice-paid-check{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:12px;border:1px solid #dce5ef;border-radius:12px;background:#fff}.invoice-paid-check input{width:auto!important;margin-top:3px}.invoice-paid-check span{display:flex;flex-direction:column;gap:2px}.invoice-paid-check small{font-weight:500;color:#758397}.invoice-template-preview{border:1px solid #dce5ef;border-radius:16px;padding:20px;text-align:center;background:#fafcff}.invoice-template-preview img{width:130px;height:90px;object-fit:contain;margin-bottom:12px}.invoice-template-preview h2{margin:0 0 10px}.invoice-template-preview p{margin:4px 0;color:#64748b;font-size:.9rem}
@media(max-width:700px){.invoice-builder-head{align-items:flex-start}.invoice-live-summary{max-width:none;width:100%}.invoice-item-row{padding:11px}.invoice-item-top{align-items:stretch}.invoice-setup-grid{grid-template-columns:1fr!important}}

/* Font Awesome SVG-JS offline compatibility */
.side-nav a .svg-inline--fa{width:20px;text-align:center}.cart-empty .svg-inline--fa{display:block;margin:0 auto 10px;font-size:32px;color:#c3cbd7}.empty-state .svg-inline--fa{font-size:31px;color:#c4ccd7;margin-bottom:9px}.quick-link .svg-inline--fa{width:38px;height:38px;padding:10px;border-radius:11px;color:var(--blue);background:var(--blue-soft);margin-bottom:12px}.auth-brand .svg-inline--fa{font-size:28px;color:#1f6feb}@media(max-width:700px){.mobile-bottom-nav a .svg-inline--fa{font-size:16px}}

/* Invoice final usability polish */
.invoice-builder-head>div{display:flex;flex-direction:column;gap:3px}.invoice-add-item-btn{display:flex;width:100%;min-height:48px;justify-content:center;align-items:center;gap:8px;margin:12px 0 4px;font-size:.95rem}.invoice-item-label{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#62748a;white-space:nowrap}.invoice-item-top{background:#fff;border-radius:10px;padding:7px}.invoice-item-row{margin-bottom:14px}.invoice-item-row .form-grid{align-items:end}
@media(max-width:700px){.invoice-item-top{flex-wrap:wrap}.invoice-item-label{width:100%}.invoice-item-top .form-select{min-width:0}.invoice-add-item-btn{min-height:52px}.invoice-workspace .action-row .btn{min-width:0}}

/* Mobile top-right menu: icon only, no dark tile */
@media (max-width: 760px) {
    .mobile-user-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--navy) !important;
        text-decoration: none;
        overflow: visible;
    }
    .mobile-user-btn:hover,
    .mobile-user-btn:focus,
    .mobile-user-btn:active {
        background: transparent !important;
        box-shadow: none !important;
        color: var(--navy) !important;
        transform: none;
    }
    .mobile-user-btn i,
    .mobile-user-btn svg,
    .mobile-user-btn .svg-inline--fa {
        width: 25px !important;
        height: 25px !important;
        font-size: 25px !important;
        display: block;
        margin: 0 !important;
        color: currentColor !important;
    }
}