:root {
    --nu-blue:#003da5;
    --nu-blue-dark:#002b73;
    --nu-blue-soft:#eaf1ff;
    --nu-gold:#f5b800;
    --nu-gold-light:#fff5cf;
    --ink:#14213d;
    --muted:#64748b;
    --bg:#f5f8fd;
    --white:#fff;
    --border:#dbe4f0;
    --danger:#dc2626;
    --success:#16a34a
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--ink)
}
a {
    color:var(--nu-blue);
    text-decoration:none
}
a:hover {
    color:var(--nu-blue-dark)
}
/* Shared buttons */ .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:10px;
    padding:11px 17px;
    cursor:pointer;
    font-weight:800;
    text-decoration:none;
    transition:.18s ease
}
.btn:hover {
    transform:translateY(-1px)
}
.primary {
    background:var(--nu-blue);
    color:#fff
}
.primary:hover {
    background:var(--nu-blue-dark);
    color:#fff
}
.gold {
    background:var(--nu-gold);
    color:#17213a
}
.gold:hover {
    background:#e7ab00;
    color:#17213a
}
.outline {
    background:transparent;
    color:#fff;
    border:1px solid #ffffff66
}
.outline:hover {
    background:#ffffff12;
    color:#fff
}
.secondary {
    background:#e7edf7;
    color:var(--ink)
}
.danger {
    background:var(--danger);
    color:#fff
}
.success-btn {
    background:var(--success);
    color:#fff
}
.full {
    width:100%;
    margin-top:20px
}
.small {
    padding:8px 12px;
    font-size:13px
}
/* Landing */ .landing-page {
    min-height:100vh;
    background:linear-gradient(180deg,#f6f9ff 0%,#fff 62%,#f8fafc 100%)
}
.landing-nav {
    height:76px;
    padding:0 max(24px,calc((100% - 1180px)/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:10
}
.brand {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--nu-blue);
    font-size:22px;
    font-weight:900
}
.brand span span {
    color:var(--nu-gold)
}
.brand-mark {
    font-size:23px
}
.landing-nav-actions {
    display:flex;
    align-items:center;
    gap:18px
}
.nav-login {
    font-weight:800
}
.nav-logout {
    font-weight:700;
    color:var(--muted)
}
.welcome-mini {
    font-size:14px;
    color:var(--muted)
}
.landing-main {
    max-width:1180px;
    margin:0 auto;
    padding:0 20px
}
.hero-section {
    min-height:510px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:45px;
    align-items:center;
    padding:64px 10px 54px
}
.eyebrow {
    font-size:12px;
    font-weight:900;
    letter-spacing:1.8px;
    color:var(--nu-blue)
}
.hero-copy h1 {
    font-size:clamp(48px,7vw,78px);
    line-height:.98;
    margin:15px 0 20px;
    letter-spacing:-3px
}
.hero-copy h1 span {
    color:var(--nu-blue)
}
.hero-copy>p {
    font-size:19px;
    line-height:1.65;
    color:#52627a;
    max-width:600px
}
.hero-actions {
    display:flex;
    gap:12px;
    margin-top:28px
}
.hero-btn {
    min-width:145px
}
.hero-visual {
    height:330px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center
}
.hero-visual:before {
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:var(--nu-blue);
    box-shadow:0 25px 60px #003da533
}
.hero-visual:after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:var(--nu-gold);
    right:8%;
    top:2%;
    box-shadow:0 18px 40px #f5b80045
}
.hero-card {
    position:relative;
    z-index:2
}
.hero-card-main {
    width:280px;
    background:#fff;
    border:1px solid #fff;
    border-radius:20px;
    padding:20px;
    display:flex;
    gap:14px;
    align-items:center;
    box-shadow:0 20px 50px #001d4a33
}
.hero-card-icon {
    width:56px;
    height:56px;
    border-radius:15px;
    display:grid;
    place-items:center;
    background:var(--nu-gold-light);
    font-size:29px
}
.hero-card-main b {
    display:block;
    font-size:18px
}
.hero-card-main small {
    display:block;
    color:var(--muted);
    margin-top:5px
}
.hero-badge {
    position:absolute;
    z-index:3;
    left:5%;
    bottom:15%;
    background:var(--nu-gold);
    color:#1b2740;
    border-radius:12px;
    padding:10px 13px;
    font-weight:900;
    font-size:11px;
    box-shadow:0 10px 25px #001d4a25
}
.hero-badge span {
    font-size:8px;
    letter-spacing:1px
}
.hero-orbit {
    position:absolute;
    border:1px solid #ffffff66;
    border-radius:50%;
    z-index:1
}
.orbit-one {
    width:330px;
    height:330px
}
.orbit-two {
    width:390px;
    height:190px;
    transform:rotate(-20deg)
}
.role-section {
    padding:20px 10px 70px
}
.section-heading {
    text-align:center;
    max-width:700px;
    margin:0 auto 28px
}
.section-heading h2 {
    font-size:34px;
    margin:9px 0
}
.section-heading p {
    color:var(--muted);
    margin:0
}
.role-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    max-width:1000px;
    margin:auto
}
.role-card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    padding:23px;
    display:flex;
    gap:16px;
    min-height:160px;
    box-shadow:0 8px 30px #001d4a0a;
    transition:.18s ease
}
.role-card:hover {
    transform:translateY(-4px);
    border-color:#b8cbe8;
    box-shadow:0 14px 35px #001d4a18
}
.role-icon {
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:25px
}
.customer-icon {
    background:var(--nu-blue-soft)
}
.owner-icon {
    background:var(--nu-gold-light)
}
.admin-icon {
    background:#edf0f6
}
.role-card h3 {
    margin:2px 0 7px;
    font-size:19px;
    color:var(--ink)
}
.role-card p {
    margin:0 0 13px;
    color:var(--muted);
    font-size:14px;
    line-height:1.5
}
.role-link {
    font-weight:800;
    font-size:13px;
    color:var(--nu-blue)
}
.landing-footer {
    text-align:center;
    color:#718096;
    font-size:13px;
    padding:22px;
    border-top:1px solid var(--border);
    background:#fff
}
.landing-footer b {
    color:var(--nu-blue)
}
/* Auth */ .auth-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:28px;
    background:radial-gradient(circle at 15% 15%,#eaf1ff 0,transparent 32%),radial-gradient(circle at 90% 80%,#fff5cf 0,transparent 28%),var(--bg)
}
.auth-card {
    width:min(430px,100%);
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:32px;
    box-shadow:0 18px 55px #001d4a17
}
.logo {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:23px;
    font-weight:900;
    color:var(--nu-blue);
    margin-bottom:19px
}
.logo span {
    font-size:22px
}
.auth-role-pill {
    display:inline-block;
    background:var(--nu-gold-light);
    color:#745600;
    border:1px solid #f2d77b;
    border-radius:999px;
    padding:5px 9px;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.1px;
    margin-bottom:12px
}
.auth-card h1 {
    margin:0 0 8px;
    font-size:30px
}
.muted {
    color:var(--muted)
}
.center {
    text-align:center
}
.auth-card label {
    display:block;
    font-weight:800;
    margin:18px 0 0
}
.auth-card input,.auth-card select,.auth-card textarea {
    width:100%;
    padding:12px;
    margin-top:7px;
    border:1px solid #c8d5e7;
    border-radius:9px;
    font:inherit;
    outline:none;
    background:#fff
}
.auth-card input:focus,.auth-card textarea:focus,.auth-card select:focus {
    border-color:var(--nu-blue);
    box-shadow:0 0 0 3px #003da51a
}
.alert {
    padding:11px 13px;
    border-radius:9px;
    margin-top:15px
}
.alert.error {
    background:#fee2e2;
    color:#991b1b
}
.alert.success {
    background:#dcfce7;
    color:#166534
}
.hidden {
    display:none
}
.role-links {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
    margin-top:20px;
    border:1px solid var(--border);
    border-radius:11px;
    overflow:hidden;
    background:#f8fafc
}
.role-links a {
    flex:1;
    text-align:center;
    padding:10px 7px;
    font-size:12px;
    font-weight:800;
    color:#52627a;
    border-right:1px solid var(--border)
}
.role-links a:last-child {
    border-right:0
}
.role-links a.active {
    background:var(--nu-blue);
    color:#fff
}
.back-landing {
    text-align:center;
    margin:17px 0 0;
    font-size:13px;
    font-weight:700
}
/* App dashboards */ .top {
    background:var(--nu-blue);
    color:#fff;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 3px 12px #001d4a25
}
.top .brand {
    font-size:20px;
    color:#fff
}
.top .brand span span {
    color:var(--nu-gold)
}
.top nav {
    display:flex;
    align-items:center;
    gap:14px
}
.top nav a {
    color:#e7efff
}
.top nav a:hover {
    color:#fff
}
.top nav .active {
    color:var(--nu-gold);
    font-weight:800
}
.page {
    max-width:1180px;
    margin:28px auto;
    padding:0 18px
}
.page-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:22px
}
.page-head h1 {
    margin:0
}
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:16px
}
.card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:18px
}
.stat {
    font-size:28px;
    font-weight:800;
    margin-top:8px;
    color:var(--nu-blue)
}
.store-card {
    transition:.15s
}
.store-card:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px #001d4a12;
    border-color:#b9cbea
}
.store-card h3 {
    margin:0 0 8px
}
.item-img {
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:10px;
    background:#e2e8f0
}
.price {
    font-weight:800;
    font-size:18px;
    color:var(--nu-blue)
}
.row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px
}
.table-wrap {
    overflow:auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px
}
.table {
    width:100%;
    border-collapse:collapse
}
.table th,.table td {
    padding:12px;
    border-bottom:1px solid #e5eaf2;
    text-align:left;
    white-space:nowrap
}
.table th {
    background:#f5f8fd;
    color:#40506a
}
.badge {
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    background:#e2e8f0
}
.badge.open,.badge.completed,.badge.ready {
    background:#dcfce7;
    color:#166534
}
.badge.pending {
    background:#fff5cf;
    color:#795800
}
.badge.preparing {
    background:#dbeafe;
    color:#1d4ed8
}
.badge.cancelled,.badge.failed {
    background:#fee2e2;
    color:#991b1b
}
.badge.paid {
    background:#dcfce7;
    color:#166534
}
.badge.unpaid {
    background:#f1f5f9;
    color:#475569
}
.badge.refunded {
    background:#ede9fe;
    color:#6d28d9
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}
.form-grid label {
    font-weight:700
}
.form-grid input,.form-grid textarea {
    width:100%;
    padding:10px;
    margin-top:6px;
    border:1px solid #cbd5e1;
    border-radius:8px
}
.form-grid .wide {
    grid-column:1/-1
}
.modal {
    position:fixed;
    inset:0;
    background:#0008;
    display:none;
    place-items:center;
    padding:18px
}
.modal.show {
    display:grid
}
.modal .card {
    width:min(560px,100%);
    max-height:90vh;
    overflow:auto
}
.cart {
    position:sticky;
    top:15px
}
.qty {
    display:flex;
    align-items:center;
    gap:8px
}
.small {
    padding:7px 10px
}
.notice {
    padding:14px;
    border-radius:10px;
    background:#eff6ff;
    color:#1e40af
}
.tabs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px
}
.top .btn.gold {
    color:#17213a
}
@media(max-width:800px) {
    .hero-section {
        grid-template-columns:1fr;
        text-align:center;
        padding-top:45px
    }
    .hero-copy>p {
        margin-left:auto;
        margin-right:auto
    }
    .hero-actions {
        justify-content:center
    }
    .hero-visual {
        height:270px
    }
    .role-grid {
        grid-template-columns:1fr;
        max-width:520px
    }
    .landing-nav {
        padding:0 16px
    }
    .welcome-mini {
        display:none
    }
}
@media(max-width:650px) {
    .form-grid {
        grid-template-columns:1fr
    }
    .top {
        padding:12px 15px
    }
    .top nav {
        gap:8px;
        flex-wrap:wrap
    }
    .page-head {
        align-items:flex-start;
        flex-direction:column
    }
    .auth-card {
        padding:25px
    }
    .hero-copy h1 {
        letter-spacing:-2px
    }
    .landing-nav-actions {
        gap:10px
    }
    .nav-login {
        font-size:14px
    }
}
/* Refined customer and owner dashboards */ .main-nav {
    display:flex;
    align-items:center;
    gap:18px
}
.nav-user {
    font-size:13px;
    color:#dbe7fb;
    padding-left:4px
}
.nav-exit {
    opacity:.9
}
.dashboard-hero {
    border-radius:22px;
    padding:34px 38px;
    margin-bottom:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    background:linear-gradient(135deg,#003da5 0%,#0754c9 68%,#0a64d8 100%);
    color:#fff;
    box-shadow:0 18px 45px rgba(0,61,165,.18)
}
.dashboard-hero .eyebrow {
    color:#f5c62f
}
.dashboard-hero h1 {
    margin:8px 0 10px;
    font-size:36px;
    letter-spacing:-1px
}
.dashboard-hero p {
    margin:0;
    max-width:700px;
    color:#e4edff;
    line-height:1.6
}
.clean-hero {
    min-height:185px
}
.owner-hero {
    min-height:185px
}
.hero-order-btn {
    white-space:nowrap
}
.quick-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-bottom:34px
}
.owner-stats {
    grid-template-columns:repeat(4,1fr)
}
.quick-card {
    display:block;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    box-shadow:0 8px 28px rgba(0,29,74,.06);
    transition:.18s ease
}
.quick-card:hover {
    transform:translateY(-2px);
    border-color:#b8cbe8;
    box-shadow:0 12px 32px rgba(0,29,74,.1)
}
.quick-label {
    display:block;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px
}
.quick-card strong {
    display:block;
    color:var(--nu-blue);
    font-size:30px;
    margin:7px 0
}
.quick-card small {
    display:block;
    color:#64748b;
    line-height:1.45;
    min-height:38px
}
.quick-arrow {
    display:block;
    margin-top:13px;
    color:var(--nu-blue);
    font-size:13px;
    font-weight:800
}
.dashboard-section {
    margin-top:34px
}
.section-title-row {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px
}
.section-title-row h2 {
    margin:5px 0 5px
}
.section-title-row p {
    margin:0
}
.store-grid {
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))
}
.store-card-large {
    padding:0;
    overflow:hidden
}
.store-cover {
    height:165px;
    position:relative;
    background:#eaf0f9;
    overflow:hidden
}
.store-cover img {
    width:100%;
    height:100%;
    object-fit:cover
}
.store-status {
    position:absolute;
    right:14px;
    top:14px;
    background:#fff;
    color:#166534;
    border:1px solid #d8f0df;
    border-radius:999px;
    padding:6px 10px;
    font-size:11px;
    font-weight:900
}
.store-card-content {
    padding:18px
}
.store-card-content h3 {
    margin:0 0 3px;
    font-size:20px
}
.store-owner {
    font-size:12px;
    margin:0
}
.store-count {
    font-size:11px;
    font-weight:800;
    color:#53657d;
    background:#f1f5f9;
    border-radius:999px;
    padding:6px 9px
}
.store-description {
    color:#53657d;
    line-height:1.5;
    min-height:42px
}
.store-meta {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:12px 0
}
.store-meta span {
    font-size:11px;
    color:#52627a;
    background:#f6f8fc;
    border:1px solid #e4eaf2;
    border-radius:8px;
    padding:6px 8px
}
.store-action {
    border-top:1px solid #edf1f6;
    padding-top:13px;
    color:var(--nu-blue);
    font-weight:900;
    font-size:13px;
    display:flex;
    justify-content:space-between
}
.empty-state {
    grid-column:1/-1;
    text-align:center;
    padding:50px
}
.store-profile-header {
    display:grid;
    grid-template-columns:112px 1fr auto;
    align-items:center;
    gap:22px;
    margin-bottom:28px;
    padding:22px
}
.store-profile-photo {
    width:112px;
    height:112px;
    border-radius:18px;
    overflow:hidden;
    background:#edf2fa;
    border:1px solid #dbe4f0
}
.store-profile-photo.large {
    width:92px;
    height:92px;
    border-radius:16px
}
.store-profile-photo img {
    width:100%;
    height:100%;
    object-fit:cover
}
.store-profile-info h1 {
    margin:5px 0 7px
}
.store-profile-info p {
    margin:0;
    color:#596a81;
    line-height:1.5
}
.store-profile-meta {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px
}
.store-profile-meta span {
    font-size:11px;
    background:#f5f7fb;
    border:1px solid #e3e9f2;
    padding:6px 8px;
    border-radius:8px;
    color:#53657d
}
.profile-cart {
    white-space:nowrap
}
.profile-editor {
    display:grid;
    grid-template-columns:260px 1fr;
    gap:25px;
    align-items:start
}
.profile-preview {
    background:#f7f9fc;
    border:1px solid #e4eaf2;
    border-radius:14px;
    padding:20px
}
.profile-preview h3 {
    margin:15px 0 4px
}
.menu-heading {
    margin-top:10px
}
.product-admin-grid {
    grid-template-columns:repeat(auto-fit,minmax(245px,1fr))
}
.admin-product {
    overflow:hidden
}
.admin-product-image {
    height:165px;
    margin:-18px -18px 16px;
    background:#edf2f8
}
.admin-product-image img {
    width:100%;
    height:100%;
    object-fit:cover
}
.product-placeholder,.store-placeholder {
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#edf2f8,#dce6f5);
    color:#49627f;
    font-weight:900;
    letter-spacing:1px
}
.store-placeholder span {
    width:58px;
    height:58px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:var(--nu-blue);
    color:#fff;
    font-size:22px
}
.product-placeholder {
    font-size:12px
}
.product-image-wrap {
    height:180px;
    background:#edf2f8;
    overflow:hidden
}
.product-image-wrap .item-img {
    height:100%;
    border-radius:0
}
.broken-image {
    object-fit:contain;
    padding:25px
}
.check-line {
    display:flex!important;
    align-items:center;
    gap:8px
}
.check-line input {
    width:auto!important;
    margin:0!important
}
.checkout-card {
    max-width:600px
}
.choice {
    display:flex;
    gap:11px;
    align-items:flex-start;
    padding:12px;
    border:1px solid #e0e7f0;
    border-radius:10px;
    margin:9px 0;
    background:#fbfcfe
}
.choice input {
    margin-top:4px
}
.choice span {
    display:flex;
    flex-direction:column;
    gap:3px
}
.choice small {
    color:#66768d
}
.delivery-box {
    padding:12px;
    border:1px solid #e0e7f0;
    border-radius:10px;
    margin:9px 0 14px;
    background:#fbfcfe
}
.delivery-box label {
    display:flex;
    flex-direction:column;
    gap:7px
}
.delivery-box input {
    width:100%
}
.cart-line {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid #e7edf4
}
.cart-line:last-child {
    border-bottom:0
}
@media(max-width:900px) {
    .owner-stats {
        grid-template-columns:repeat(2,1fr)
    }
    .profile-editor {
        grid-template-columns:1fr
    }
    .store-profile-header {
        grid-template-columns:90px 1fr
    }
    .profile-cart {
        grid-column:1/-1;
        width:100%
    }
    .store-profile-photo {
        width:90px;
        height:90px
    }
    .main-nav {
        gap:10px
    }
}
@media(max-width:700px) {
    .quick-grid,.owner-stats {
        grid-template-columns:1fr
    }
    .dashboard-hero {
        padding:27px 23px;
        align-items:flex-start;
        flex-direction:column
    }
    .dashboard-hero h1 {
        font-size:29px
    }
    .hero-order-btn {
        width:100%
    }
    .section-title-row {
        align-items:flex-start;
        flex-direction:column
    }
    .section-title-row .btn {
        width:100%
    }
    .store-profile-header {
        grid-template-columns:1fr;
        text-align:center
    }
    .store-profile-photo {
        margin:auto
    }
    .store-profile-meta {
        justify-content:center
    }
    .main-nav .nav-user {
        display:none
    }
}

/* Customer order page refresh */
.orders-page {
    max-width: 1320px;
    padding-bottom: 50px;
}
.orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 10px 0 24px;
}
.orders-title {
    display: flex;
    align-items: center;
    gap: 18px;
}
.orders-title h1 {
    margin: 4px 0 5px;
    font-size: 38px;
    letter-spacing: -1px;
}
.orders-title p {
    margin: 0;
}
.orders-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--nu-gold), #e9aa00);
    box-shadow: 0 10px 25px #f5b80035;
    font-size: 25px;
}
.orders-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 35px #001d4a0a;
}
.orders-table-head,
.order-row {
    display: grid;
    grid-template-columns: 72px minmax(190px, 1.35fr) minmax(120px, .8fr) minmax(150px, 1fr) minmax(120px, .8fr) minmax(155px, 1fr) minmax(180px, 1.15fr);
    align-items: center;
    gap: 18px;
    padding: 0 28px;
}
.orders-table-head {
    min-height: 58px;
    background: #f5f8fd;
    color: #40506a;
    font-weight: 900;
    border-bottom: 1px solid var(--border);
}
.order-row {
    min-height: 168px;
    border-bottom: 1px solid #e8edf4;
}
.order-row:last-child {
    border-bottom: 0;
}
.order-number {
    color: var(--ink);
    font-weight: 900;
    font-size: 18px;
}
.order-store {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    min-width: 0;
}
.order-store-image {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #dfe7f1;
    background: #f8fafc;
    box-shadow: 0 5px 16px #001d4a0d;
}
.order-store-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 6px;
}
.order-store-image .store-placeholder {
    width: 100%;
    height: 100%;
}
.order-store strong {
    max-width: 180px;
    line-height: 1.25;
}
.order-total {
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.status-pending {
    color: #9a6700;
    background: #fff1c7;
}
.status-preparing {
    color: #1d4ed8;
    background: #dbeafe;
}
.status-ready,
.status-completed {
    color: #166534;
    background: #dcfce7;
}
.status-cancelled,
.status-failed {
    color: #991b1b;
    background: #fee2e2;
}
.payment-unpaid {
    color: #dc2626;
    background: #fee2e2;
}
.payment-paid {
    color: #166534;
    background: #dcfce7;
}
.payment-refunded {
    color: #6d28d9;
    background: #ede9fe;
}
.order-method {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.method-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--nu-blue-soft);
    font-size: 16px;
}
.order-method strong,
.order-method small {
    display: block;
}
.order-method small {
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.3;
}
.order-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #53657d;
    font-size: 13px;
    white-space: nowrap;
}
.calendar-icon {
    color: var(--nu-blue);
    font-size: 16px;
}
.orders-empty {
    text-align: center;
    padding: 70px 25px;
}
.orders-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--nu-gold-light);
    font-size: 25px;
}
.orders-empty h3 {
    margin: 0 0 7px;
}
.orders-empty p {
    margin: 0 0 18px;
}

/* Keep uploaded store and food images centered and fully visible. */
.store-cover img,
.store-profile-photo img,
.admin-product-image img,
.product-image-wrap .item-img {
    object-fit: contain;
    object-position: center;
    padding: 8px;
    background: #fff;
}
.store-cover,
.admin-product-image,
.product-image-wrap {
    display: grid;
    place-items: center;
}

@media (max-width: 1050px) {
    .orders-table-head,
    .order-row {
        grid-template-columns: 55px minmax(155px, 1.2fr) 110px 135px 110px 145px 165px;
        gap: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 820px) {
    .orders-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .orders-table-head {
        display: none;
    }
    .order-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 17px;
        padding: 22px;
    }
    .order-number {
        grid-column: 1 / -1;
    }
    .order-store {
        grid-column: 1 / -1;
    }
    .order-total,
    .order-row > div:nth-child(4),
    .order-row > div:nth-child(5),
    .order-method,
    .order-date {
        min-width: 0;
    }
}
@media (max-width: 520px) {
    .orders-title h1 {
        font-size: 30px;
    }
    .orders-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }
    .order-row {
        grid-template-columns: 1fr;
    }
    .order-store,
    .order-number {
        grid-column: auto;
    }
    .orders-header .btn {
        width: 100%;
    }
}

/* =========================================================
   ADMIN + OWNER DASHBOARD CLEAN UI
   ========================================================= */
.admin-dashboard,
.owner-dashboard {
    max-width: 1320px;
    padding-bottom: 60px;
}

.admin-dashboard .page-head {
    margin: 8px 0 26px;
    padding: 26px 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff, #f5f8ff);
    box-shadow: 0 10px 30px rgba(0,29,74,.05);
}

.admin-dashboard .page-head h1 {
    font-size: 34px;
    letter-spacing: -.8px;
}

.admin-dashboard > .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 34px;
}

.admin-dashboard > .grid .card {
    position: relative;
    min-height: 125px;
    padding: 22px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,29,74,.05);
}

.admin-dashboard > .grid .card::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    right: -24px;
    bottom: -28px;
    border-radius: 50%;
    background: var(--nu-blue-soft);
}

.admin-dashboard > .grid .card:nth-child(2)::after,
.admin-dashboard > .grid .card:nth-child(5)::after {
    background: var(--nu-gold-light);
}

.admin-dashboard .stat {
    font-size: 30px;
    position: relative;
    z-index: 1;
}

.admin-dashboard h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 13px;
    font-size: 20px;
    letter-spacing: -.2px;
}

.admin-dashboard h2::before {
    content: "";
    width: 5px;
    height: 22px;
    border-radius: 99px;
    background: var(--nu-gold);
}

.admin-dashboard .table-wrap {
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,29,74,.045);
}

.admin-dashboard .table {
    min-width: 850px;
}

.admin-dashboard .table th {
    padding: 14px 16px;
    background: #f7f9fd;
    color: #52627a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.admin-dashboard .table td {
    padding: 14px 16px;
    vertical-align: middle;
    color: #263650;
}

.admin-dashboard .table tbody tr:hover,
.admin-dashboard .table tr:not(:first-child):hover {
    background: #fbfdff;
}

.admin-store-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
}

.admin-store-thumb {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 13px;
    background: #f7f9fc;
}

.admin-store-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 4px;
    background: #fff;
}

.admin-store-thumb span {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--nu-blue);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
}

.admin-store-cell strong,
.admin-store-cell small {
    display: block;
}

.admin-store-cell strong {
    margin-bottom: 4px;
}

.admin-store-cell small {
    color: var(--muted);
    font-size: 12px;
}

.admin-dashboard .btn.small {
    min-width: 88px;
}

/* Owner dashboard */
.owner-dashboard .dashboard-hero {
    margin-top: 8px;
    border-radius: 22px;
    padding: 32px 36px;
}

.owner-dashboard .dashboard-hero h1 {
    max-width: 760px;
}

.owner-dashboard .quick-grid {
    margin-top: 20px;
}

.owner-dashboard .quick-card {
    min-height: 138px;
    border-radius: 17px;
}

.owner-dashboard .dashboard-section {
    margin-top: 38px;
}

.owner-dashboard .section-title-row {
    padding-bottom: 4px;
}

.owner-dashboard .section-title-row h2 {
    font-size: 23px;
    letter-spacing: -.3px;
}

.owner-dashboard .profile-editor {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0,29,74,.045);
}

.owner-dashboard .profile-preview {
    text-align: center;
    position: sticky;
    top: 20px;
}

.owner-dashboard .profile-preview .store-profile-photo {
    margin: 0 auto;
    width: 150px;
    height: 150px;
    border-radius: 20px;
}

.owner-dashboard .profile-preview .store-profile-photo img {
    object-fit: contain;
    object-position: center;
    padding: 8px;
    background: #fff;
}

.owner-dashboard .profile-preview h3 {
    font-size: 19px;
}

.owner-dashboard .admin-product {
    border-radius: 17px;
    padding: 18px;
    box-shadow: 0 8px 26px rgba(0,29,74,.05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.owner-dashboard .admin-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 13px 32px rgba(0,29,74,.09);
}

.owner-dashboard .admin-product-image {
    height: 190px;
    margin: -18px -18px 16px;
    border-bottom: 1px solid #e8edf4;
}

.owner-dashboard .admin-product-image img {
    object-fit: contain;
    object-position: center;
    padding: 12px;
    background: #fff;
}

.owner-dashboard .admin-product h3 {
    margin: 0;
    font-size: 17px;
}

.owner-dashboard .price {
    font-size: 19px;
}

.owner-dashboard .table-wrap {
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,29,74,.045);
}

.owner-dashboard .table {
    min-width: 900px;
}

.owner-dashboard .table th {
    padding: 14px 16px;
    background: #f7f9fd;
    color: #52627a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.owner-dashboard .table td {
    padding: 15px 16px;
    vertical-align: middle;
}

.owner-dashboard .table tr:not(:first-child):hover {
    background: #fbfdff;
}

.owner-dashboard select {
    min-width: 130px;
    padding: 9px 30px 9px 10px;
    border: 1px solid #cbd7e6;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.owner-dashboard select:focus,
.owner-dashboard input:focus,
.owner-dashboard textarea:focus {
    border-color: var(--nu-blue);
    box-shadow: 0 0 0 3px rgba(0,61,165,.09);
}

.owner-dashboard .modal {
    backdrop-filter: blur(4px);
}

.owner-dashboard .modal .card {
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 25px 70px rgba(0,29,74,.2);
}

@media (max-width: 1050px) {
    .admin-dashboard > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-dashboard > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-dashboard .page-head {
        padding: 22px;
    }
    .admin-dashboard .page-head h1 {
        font-size: 28px;
    }
    .owner-dashboard .dashboard-hero {
        padding: 27px 23px;
    }
    .owner-dashboard .profile-preview {
        position: static;
    }
}

@media (max-width: 480px) {
    .admin-dashboard > .grid {
        grid-template-columns: 1fr;
    }
}

/* Menu category dropdown + category pills */
.menu-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap
}
.menu-filter {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:220px
}
.menu-filter label {
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted)
}
.menu-filter select,.form-grid select {
    width:100%;
    padding:11px 34px 11px 12px;
    border:1px solid #cbd7e6;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:15px;
    font-weight:700;
    outline:none;
    cursor:pointer
}
.form-grid select {
    margin-top:6px;
    font-size:14px
}
.menu-filter select:focus,.form-grid select:focus {
    border-color:var(--nu-blue);
    box-shadow:0 0 0 3px rgba(0,61,165,.12)
}
.category-pill {
    display:inline-block;
    margin:0 0 10px;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    background:var(--nu-blue-soft);
    color:var(--nu-blue)
}
.category-pill.cat-drink {
    background:#e0f7fa;
    color:#00697a
}
.category-pill.cat-dessert {
    background:var(--nu-gold-light);
    color:#8a6500
}
.product-card.hidden {
    display:none !important
}

.pay-form {
    margin-top:6px
}

/* Reviews */
.stars {
    color:var(--nu-gold);
    letter-spacing:2px;
    font-size:18px
}
.order-review {
    padding:14px 28px 18px;
    border-bottom:1px solid #e8edf4;
    background:#fbfdff
}
.order-row:has(+ .order-review) {
    border-bottom:0;
    min-height:150px
}
.review-done {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:8px
}
.review-details summary {
    cursor:pointer;
    font-weight:700;
    color:var(--nu-blue);
    list-style:none
}
.review-details summary::-webkit-details-marker {
    display:none
}
.review-form {
    margin-top:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    max-width:520px
}
.review-form textarea {
    width:100%;
    padding:10px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    font:inherit
}
.star-input {
    display:inline-flex;
    flex-direction:row-reverse
}
.star-input input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px
}
.star-input label {
    font-size:32px;
    line-height:1;
    color:#cbd5e1;
    cursor:pointer;
    padding:0 2px
}
.star-input input:checked ~ label,.star-input label:hover,.star-input label:hover ~ label {
    color:var(--nu-gold)
}
.star-input input:focus-visible + label {
    outline:2px solid var(--nu-blue);
    border-radius:4px
}
.reviews-section {
    margin-top:36px
}
.review-card {
    margin-bottom:12px;
    padding:16px 18px
}
.review-card p {
    margin:8px 0
}

/* Navigation extras + review pages */
.top .brand {
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none
}
.nav-role {
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:999px;
    background:var(--nu-gold);
    color:#3b2b00
}
.main-nav {
    flex-wrap:wrap
}
.review-link {
    display:block;
    margin-top:8px;
    font-size:13px;
    font-weight:700
}
.review-order-card {
    margin-bottom:14px;
    padding:18px 20px
}
.review-order-card p {
    margin:8px 0
}

.filter-bar {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px
}
.filter-bar label {
    font-weight:700;
    color:var(--muted)
}
.filter-bar select {
    padding:9px 32px 9px 12px;
    border:1px solid #cbd7e6;
    border-radius:10px;
    background:#fff;
    font:inherit;
    font-weight:700;
    color:var(--ink)
}