:root{
    --bg:#090d16;
    --bg2:#0c1220;
    --panel:#0f1728;
    --panel2:#131e33;
    --panel3:#18263f;
    --line:#22324c;
    --text:#edf4ff;
    --muted:#8fa3bf;
    --soft:#6b7d99;
    --brand:#f5a623;
    --brand-soft:rgba(245,166,35,.14);
    --green:#47d18c;
    --green-soft:rgba(71,209,140,.14);
    --blue:#6cb7ff;
    --blue-soft:rgba(108,183,255,.12);
    --amber:#ffc766;
    --amber-soft:rgba(255,199,102,.13);
    --red:#ff8d8d;
    --red-soft:rgba(255,141,141,.12);
    --purple:#a78bfa;
    --purple-soft:rgba(167,139,250,.13);
    --white:#ffffff;
    --shadow:0 14px 42px rgba(0,0,0,.34);
    --shadow-soft:0 8px 24px rgba(0,0,0,.22);
}

[data-theme="light"]{
    --bg:#f4f7fd;
    --bg2:#eef2f9;
    --panel:#ffffff;
    --panel2:#f8faff;
    --panel3:#eef2f8;
    --line:#dce3ed;
    --text:#0f1926;
    --muted:#64748b;
    --soft:#94a3b8;
    --brand:#d48a1a;
    --brand-soft:rgba(212,138,26,.10);
    --green:#16a34a;
    --green-soft:rgba(22,163,74,.10);
    --blue:#2563eb;
    --blue-soft:rgba(37,99,235,.08);
    --amber:#b8860b;
    --amber-soft:rgba(184,134,11,.09);
    --red:#dc2626;
    --red-soft:rgba(220,38,38,.08);
    --purple:#7c3aed;
    --purple-soft:rgba(124,58,237,.10);
    --white:#ffffff;
    --shadow:0 14px 42px rgba(0,0,0,.08);
    --shadow-soft:0 8px 24px rgba(0,0,0,.06);
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,
body{
    margin:0;
    padding:0;
    background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body{
    min-height:100vh;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

.app{
    max-width:440px;
    min-height:100vh;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at top right, rgba(245,166,35,.08), transparent 30%),
        radial-gradient(circle at top left, rgba(108,183,255,.06), transparent 26%),
        linear-gradient(180deg,#090d16 0%,#0c1220 100%);
}

.ef-main{
    flex:1;
}

.topbar{
    padding:18px 20px 14px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.eyebrow{
    color:var(--brand);
    font-size:10px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:900;
}

.title{
    margin:8px 0 4px;
    font-size:26px;
    line-height:1.05;
    font-weight:900;
}

.subtitle{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.icon-badge{
    width:40px;
    height:40px;
    border-radius:14px;
    background:var(--panel);
    border:1px solid var(--line);
    display:grid;
    place-items:center;
    color:var(--text);
    box-shadow:var(--shadow-soft);
    flex:0 0 auto;
}

.section{
    padding:0 18px 16px;
}

.stack{
    display:grid;
    gap:12px;
}

.card{
    background:linear-gradient(180deg,var(--panel) 0%,#10192b 100%);
    border:1px solid var(--line);
    border-radius:24px;
    padding:16px;
    box-shadow:var(--shadow-soft);
}

.card-title{
    margin:0 0 4px;
    font-size:17px;
    font-weight:900;
}

.card-sub{
    margin:0;
    font-size:13px;
    color:var(--muted);
    line-height:1.45;
}

.hero{
    margin:0 18px 16px;
    border-radius:30px;
    padding:22px;
    background:
        radial-gradient(circle at top right, rgba(245,166,35,.18), transparent 34%),
        linear-gradient(135deg,#111929 0%,#18233a 55%,#131d31 100%);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:var(--shadow);
}

.hero-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.hero-copy{
    min-width:0;
}

.hero h2{
    margin:10px 0 10px;
    font-size:30px;
    line-height:1.02;
}

.hero p{
    margin:0;
    color:#cad7e9;
    font-size:14px;
    line-height:1.58;
}

.hero-stat{
    margin-top:16px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#e7eef8;
    font-size:13px;
    font-weight:700;
}

.hero-glow{
    width:92px;
    height:92px;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(245,166,35,.24), rgba(108,183,255,.14));
    border:1px solid rgba(255,255,255,.08);
    display:grid;
    place-items:center;
    font-size:40px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 34px rgba(0,0,0,.2);
    flex:0 0 auto;
}

.search-row{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}

.search,
.input{
    width:100%;
    height:50px;
    border-radius:18px;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--line);
    padding:0 16px;
    box-shadow:var(--shadow-soft);
}

.input,
select.input,
textarea.input{
    height:auto;
    min-height:50px;
    padding:13px 16px;
}

.search::placeholder,
.input::placeholder{
    color:var(--soft);
}

.round-btn{
    width:50px;
    height:50px;
    border:none;
    border-radius:18px;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.chips{
    display:flex;
    gap:8px;
    overflow:auto;
    padding-bottom:2px;
    margin-bottom:14px;
}

.chips::-webkit-scrollbar,
.owner-top-tabs::-webkit-scrollbar{
    display:none;
}

.chip{
    white-space:nowrap;
    padding:10px 14px;
    border:none;
    border-radius:999px;
    background:var(--panel);
    color:var(--muted);
    border:1px solid var(--line);
    font-weight:800;
    font-size:13px;
    box-shadow:var(--shadow-soft);
}

.chip.active{
    background:var(--white);
    color:#09111d;
    border-color:var(--white);
}

.menu-list{
    display:grid;
    gap:12px;
}

.meal{
    display:grid;
    grid-template-columns:74px 1fr;
    gap:14px;
    align-items:start;
}

.meal-icon{
    width:74px;
    height:74px;
    border-radius:22px;
    display:grid;
    place-items:center;
    font-size:34px;
    background:linear-gradient(135deg,#1f2d44 0%,#172236 100%);
    border:1px solid #2a3a57;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.meal-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.meal-copy{
    min-width:0;
}

.meal-name{
    margin:0;
    font-size:17px;
    font-weight:900;
    line-height:1.15;
}

.meal-note{
    margin-top:4px;
    font-size:13px;
    color:var(--muted);
}

.price{
    padding:7px 11px;
    border-radius:999px;
    background:var(--brand-soft);
    border:1px solid rgba(245,166,35,.22);
    color:var(--amber);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    height:max-content;
}

.price.muted{
    background:rgba(255,255,255,.05);
    border-color:var(--line);
    color:var(--soft);
}

.meal-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:14px;
}

.meta{
    font-size:13px;
    color:var(--muted);
}

.action-btn,
.primary-full,
.owner-tab{
    border:none;
    outline:none;
    cursor:pointer;
}

.action-btn{
    padding:11px 14px;
    border-radius:16px;
    background:var(--white);
    color:#0a111e;
    font-weight:900;
    font-size:13px;
    box-shadow:0 6px 18px rgba(255,255,255,.08);
}

.action-btn.ghost{
    background:var(--panel3);
    color:var(--soft);
    border:1px solid var(--line);
    box-shadow:none;
}

.primary-full{
    width:100%;
    padding:15px 16px;
    border-radius:18px;
    background:var(--white);
    color:#08111d;
    font-weight:900;
    font-size:15px;
}

.owner-top-tabs{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    overflow:auto;
    padding-bottom:2px;
}

.owner-tab{
    white-space:nowrap;
    padding:10px 8px;
    border-radius:14px;
    background:var(--panel);
    color:var(--muted);
    border:1px solid var(--line);
    font-size:11px;
    font-weight:900;
}

.owner-tab.active{
    background:var(--white);
    color:#08111d;
    border-color:var(--white);
}

.bottom-nav{
    position:sticky;
    bottom:0;
    z-index:20;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    padding:10px 14px 14px;
    border-top:1px solid var(--line);
    background:rgba(9,13,22,.92);
    backdrop-filter:blur(18px);
}

.nav-btn{
    position:relative;
    min-height:58px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:var(--muted);
    background:transparent;
    font-size:12px;
    font-weight:900;
    transition:background-color .2s ease,color .2s ease,transform .2s ease;
}

.nav-btn.active{
    background:var(--white);
    color:#08111d;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.nav-btn.inactive:hover{
    transform:translateY(-1px);
}

.nav-btn.disabled{
    opacity:.56;
}

.nav-icon{
    font-size:18px;
    line-height:1;
}

.nav-label{
    line-height:1;
}

.nav-badge{
    position:absolute;
    top:7px;
    right:12px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:var(--brand);
    color:#08111d;
    font-size:10px;
    font-weight:900;
}

.table{
    width:100%;
    font-size:13px;
}

.table td,
.table th{
    padding:8px;
    border-bottom:1px solid var(--line);
    text-align:left;
}

.flash-banner{
    margin:18px 18px 0;
    padding:14px 16px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(71,209,140,.12), rgba(71,209,140,.06));
    border:1px solid rgba(71,209,140,.2);
    color:#d7f7e8;
    box-shadow:var(--shadow-soft);
}

.empty-state{
    padding:22px 18px;
    text-align:center;
    color:var(--muted);
}

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.fulfill{
    padding:14px;
    border-radius:18px;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--text);
    font-weight:900;
    text-align:center;
    cursor:pointer;
    outline:none;
}

.fulfill.active{
    background:var(--white);
    color:#08111d;
    border-color:var(--white);
}

.cart-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    background:var(--panel2);
    border:1px solid rgba(255,255,255,.04);
    border-radius:18px;
    padding:13px;
}

[data-theme="light"] .cart-item{
    border:1px solid var(--line);
}

.cart-name{
    font-size:15px;
    font-weight:800;
    margin:0;
}

.cart-note{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.qty{
    display:flex;
    align-items:center;
    gap:10px;
}

.qty-btn{
    width:34px;
    height:34px;
    border-radius:999px;
    background:var(--panel3);
    color:var(--text);
    border:1px solid var(--line);
    font-size:18px;
    cursor:pointer;
    outline:none;
    display:grid;
    place-items:center;
}

.divider{
    height:1px;
    background:var(--line);
    margin:16px 0;
}

.totals{
    display:grid;
    gap:9px;
}

.totals-row{
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:14px;
}

.totals-row strong{
    color:var(--text);
}

.totals-row.total{
    font-size:15px;
    font-weight:900;
    color:var(--text);
}

.network-list{
    display:grid;
    gap:10px;
}

.network{
    width:100%;
    text-align:left;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--text);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:900;
    cursor:pointer;
    outline:none;
}

.network.active{
    outline:2px solid var(--white);
}

[data-theme="light"] .network.active{
    outline:2px solid var(--text);
}

.network.mtn{
    background:linear-gradient(180deg, rgba(245,166,35,.12), rgba(245,166,35,.08));
    color:var(--amber);
}

.network.telecel{
    background:linear-gradient(180deg, rgba(255,141,141,.11), rgba(255,141,141,.08));
    color:var(--red);
}

.network.at{
    background:linear-gradient(180deg, rgba(108,183,255,.11), rgba(108,183,255,.08));
    color:var(--blue);
}

.track-hero{
    border-radius:26px;
    padding:18px;
    background:linear-gradient(135deg,#0f2a20 0%, #123223 100%);
    border:1px solid rgba(71,209,140,.16);
    box-shadow:var(--shadow-soft);
}

[data-theme="light"] .track-hero{
    background:linear-gradient(135deg,#e8f5e9 0%, #f1f8e9 100%);
    border:1px solid rgba(22,163,74,.2);
}

.track-tag{
    font-size:10px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:900;
    color:var(--green);
}

.track-title{
    font-size:26px;
    font-weight:900;
    margin:8px 0 4px;
}

.track-sub{
    font-size:13px;
    color:#b7e6cf;
    margin:0;
}

[data-theme="light"] .track-sub{
    color:#4a7c5f;
}

.progress-bar{
    height:10px;
    border-radius:999px;
    background:var(--panel3);
    overflow:hidden;
    margin:16px 0 18px;
    border:1px solid rgba(255,255,255,.03);
}

[data-theme="light"] .progress-bar{
    border:1px solid var(--line);
}

.progress-bar span{
    display:block;
    height:100%;
    background:var(--white);
    border-radius:999px;
    transition:width .4s ease;
}

.steps{
    display:grid;
    gap:14px;
}

.step{
    display:flex;
    gap:12px;
    align-items:center;
}

.dot{
    width:44px;
    height:44px;
    border-radius:999px;
    background:var(--panel3);
    border:1px solid var(--line);
    display:grid;
    place-items:center;
    font-weight:900;
    color:var(--muted);
    flex:0 0 auto;
}

.dot.active{
    background:var(--white);
    color:#08111d;
    border-color:var(--white);
}

.step-title{
    font-size:14px;
    font-weight:900;
    margin:0;
}

.step-note{
    font-size:12px;
    color:var(--muted);
    margin-top:3px;
}

.account-head{
    display:flex;
    gap:14px;
    align-items:center;
}

.avatar{
    width:66px;
    height:66px;
    border-radius:22px;
    display:grid;
    place-items:center;
    font-size:28px;
    background:linear-gradient(135deg, rgba(245,166,35,.18), rgba(108,183,255,.14));
    border:1px solid rgba(255,255,255,.08);
}

[data-theme="light"] .avatar{
    border:1px solid var(--line);
}

.stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.stat{
    border-radius:20px;
    padding:14px;
    border:1px solid var(--line);
    background:var(--panel);
    box-shadow:var(--shadow-soft);
}

.stat.blue{
    background:linear-gradient(180deg, rgba(108,183,255,.12), rgba(108,183,255,.06));
}

.stat.green{
    background:linear-gradient(180deg, rgba(71,209,140,.12), rgba(71,209,140,.06));
}

.stat.amber{
    background:linear-gradient(180deg, rgba(245,166,35,.13), rgba(245,166,35,.06));
}

.stat.purple{
    background:linear-gradient(180deg, rgba(167,139,250,.13), rgba(167,139,250,.06));
}

.stat-label{
    font-size:12px;
    color:var(--muted);
}

.stat-value{
    font-size:23px;
    font-weight:900;
    margin-top:8px;
    line-height:1.1;
}

.owner-banner{
    border-radius:22px;
    padding:18px;
    background:radial-gradient(circle at top right, rgba(245,166,35,.18), transparent 30%), linear-gradient(135deg,#111a2a 0%, #19253b 100%);
    border:1px solid rgba(255,255,255,.06);
}

[data-theme="light"] .owner-banner{
    background:radial-gradient(circle at top right, rgba(212,138,26,.10), transparent 30%), linear-gradient(135deg,#f0f4fe 0%, #e8edf6 100%);
    border:1px solid var(--line);
}

.info-list{
    display:grid;
    gap:10px;
}

.info-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:14px;
    color:var(--muted);
}

.info-row strong{
    color:var(--text);
    font-size:14px;
}

.order-card{
    display:grid;
    gap:12px;
}

.order-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
}

.order-name{
    font-size:16px;
    font-weight:900;
    margin:0;
}

.order-note{
    font-size:13px;
    color:var(--muted);
    margin-top:4px;
}

.badge{
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    white-space:nowrap;
}

.badge.pending{
    background:var(--amber-soft);
    color:var(--amber);
}

.badge.cooking{
    background:rgba(255,166,0,.1);
    color:#ffb74f;
}

.badge.ready{
    background:var(--green-soft);
    color:var(--green);
}

.badge.done{
    background:var(--blue-soft);
    color:var(--blue);
}

.order-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.order-btn{
    padding:10px 8px;
    border-radius:14px;
    background:var(--panel2);
    border:1px solid var(--line);
    color:var(--text);
    font-weight:800;
    font-size:12px;
    cursor:pointer;
    outline:none;
    text-align:center;
}

.order-btn.primary{
    background:var(--white);
    border-color:var(--white);
    color:#08111d;
}

.pill-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.pill{
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
}

.pill.live{
    background:var(--green-soft);
    color:var(--green);
}

.pill.top{
    background:var(--brand-soft);
    color:var(--amber);
}

.pill.sold{
    background:var(--panel3);
    color:var(--soft);
    border:1px solid var(--line);
}

.mini-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.report-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.report-box{
    border-radius:18px;
    padding:14px;
    background:var(--panel2);
    border:1px solid rgba(255,255,255,.04);
}

[data-theme="light"] .report-box{
    border:1px solid var(--line);
}

.report-label{
    font-size:12px;
    color:var(--muted);
}

.report-value{
    font-size:22px;
    font-weight:900;
    margin-top:6px;
}

.bars{
    display:grid;
    gap:12px;
}

.bar-row{
    display:grid;
    grid-template-columns:80px 1fr 42px;
    gap:8px;
    align-items:center;
}

.bar{
    height:10px;
    border-radius:999px;
    background:var(--panel3);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.03);
}

[data-theme="light"] .bar{
    border:1px solid var(--line);
}

.bar span{
    display:block;
    height:100%;
    background:var(--white);
    border-radius:999px;
}

.setting-list{
    display:grid;
    gap:10px;
}

.setting-item{
    border-radius:18px;
    padding:14px;
    background:var(--panel2);
    border:1px solid rgba(255,255,255,.04);
}

[data-theme="light"] .setting-item{
    border:1px solid var(--line);
}

.setting-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.setting-name{
    font-size:15px;
    font-weight:800;
    margin:0;
}

.setting-note{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.switch{
    width:48px;
    height:28px;
    border-radius:999px;
    background:#334863;
    position:relative;
    flex:0 0 auto;
    cursor:pointer;
    border:none;
    outline:none;
}

[data-theme="light"] .switch{
    background:#cbd5e1;
}

.switch::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    transition:.2s;
}

.switch.on{
    background:#dfe8f6;
}

[data-theme="light"] .switch.on{
    background:#1e293b;
}

.switch.on::after{
    left:23px;
    background:#08111d;
}

[data-theme="light"] .switch.on::after{
    background:#ffffff;
}

.hidden{
    display:none !important;
}

@media (max-width:380px){
    .hero-row{
        align-items:flex-start;
    }

    .hero-glow{
        width:78px;
        height:78px;
        border-radius:24px;
        font-size:34px;
    }

    .hero h2{
        font-size:27px;
    }
}

/* ========================================
   Phase 1 — EstherFoods Premium Public Shell
   ======================================== */

/* --- Header --- */
.ef-header{
    position:sticky;
    top:0;
    z-index:999;
    width:100%;
    background:rgba(13,10,8,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 4px 24px rgba(0,0,0,.3);
}

.ef-header-inner{
    max-width:440px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 18px;
}

.ef-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text);
}

.ef-logo-mark{
    width:32px;
    height:32px;
    border-radius:10px;
    background:linear-gradient(135deg, var(--brand), #d48a1a);
    color:#0a0a0a;
    display:grid;
    place-items:center;
    font-size:16px;
    font-weight:900;
}

.ef-logo-text{
    font-size:16px;
    font-weight:900;
    letter-spacing:-.02em;
}

.ef-nav{
    display:flex;
    align-items:center;
    gap:6px;
}

.ef-nav-link{
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    text-decoration:none;
    transition:all .2s;
}

.ef-nav-link.active,
.ef-nav-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.06);
}

.ef-nav-cart{
    position:relative;
    width:38px;
    height:38px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    display:grid;
    place-items:center;
    color:var(--text);
    text-decoration:none;
    transition:all .2s;
}

.ef-nav-cart:hover{
    background:rgba(255,255,255,.1);
}

.ef-cart-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--brand);
    color:#0a0a0a;
    font-size:10px;
    font-weight:900;
    display:grid;
    place-items:center;
    line-height:1;
}

/* --- Hero --- */
.ef-hero{
    position:relative;
    margin:0 18px 20px;
    border-radius:28px;
    padding:32px 24px;
    overflow:hidden;
    background:linear-gradient(135deg, #111111 0%, #1a1a1a 50%, #0d0d0d 100%);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 20px 48px rgba(0,0,0,.4);
}

.ef-hero-bg{
    position:absolute;
    top:-40%;
    right:-20%;
    width:240px;
    height:240px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(245,166,35,.12), transparent 70%);
    pointer-events:none;
}

.ef-hero-content{
    position:relative;
    z-index:1;
}

.ef-hero-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(245,166,35,.12);
    border:1px solid rgba(245,166,35,.2);
    color:var(--amber);
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    margin-bottom:16px;
}

.ef-hero-title{
    font-size:32px;
    line-height:1.08;
    font-weight:900;
    margin:0 0 14px;
    letter-spacing:-.03em;
}

.ef-hero-em{
    color:var(--brand);
}

.ef-hero-sub{
    font-size:15px;
    line-height:1.55;
    color:var(--muted);
    margin:0 0 24px;
}

.ef-hero-actions{
    display:flex;
    gap:10px;
}

/* --- Buttons --- */
.ef-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:none;
    outline:none;
    cursor:pointer;
    font-weight:700;
    text-decoration:none;
    transition:all .2s;
    border-radius:999px;
    font-size:14px;
    padding:13px 24px;
}

.ef-btn-primary{
    background:var(--white);
    color:#0a0a0a;
    box-shadow:0 6px 20px rgba(255,255,255,.1);
}

.ef-btn-primary:hover{
    background:#e8e8e8;
    transform:translateY(-1px);
}

.ef-btn-ghost{
    background:rgba(255,255,255,.06);
    color:var(--text);
    border:1px solid rgba(255,255,255,.1);
}

.ef-btn-ghost:hover{
    background:rgba(255,255,255,.1);
}

.ef-btn-small{
    padding:8px 16px;
    font-size:12px;
}

.ef-btn-large{
    padding:16px 28px;
    font-size:16px;
}

.ef-btn-block{
    width:100%;
    display:flex;
}

.ef-btn-sm{
    padding:8px 14px;
    font-size:12px;
}

.ef-btn-search{
    padding:13px 18px;
    flex:0 0 auto;
}

.ef-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
    transform:none !important;
}

/* --- Sections --- */
.ef-section{
    padding:0 18px 24px;
}

.ef-section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.ef-section-title{
    font-size:20px;
    font-weight:900;
    margin:0;
    letter-spacing:-.02em;
}

.ef-section-centered{
    text-align:center;
    margin-bottom:20px;
}

.ef-section-link{
    font-size:13px;
    font-weight:700;
    color:var(--brand);
    text-decoration:none;
}

/* --- Featured meals scroll --- */
.ef-featured-scroll{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding-bottom:4px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.ef-featured-scroll::-webkit-scrollbar{
    display:none;
}

.ef-featured-card{
    min-width:200px;
    max-width:220px;
    border-radius:20px;
    background:linear-gradient(180deg, var(--panel) 0%, #10192b 100%);
    border:1px solid var(--line);
    overflow:hidden;
    scroll-snap-align:start;
    box-shadow:var(--shadow-soft);
}

.ef-featured-image{
    width:100%;
    height:120px;
    display:grid;
    place-items:center;
    font-size:48px;
    background:linear-gradient(135deg, #1f2d44 0%, #172236 100%);
    border-bottom:1px solid var(--line);
}

.ef-featured-body{
    padding:14px;
}

.ef-featured-name{
    font-size:15px;
    font-weight:900;
    margin:0 0 4px;
}

.ef-featured-meta{
    display:flex;
    gap:8px;
    font-size:12px;
    color:var(--muted);
    margin-bottom:10px;
}

.ef-featured-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ef-featured-price{
    font-size:16px;
    font-weight:900;
    color:var(--brand);
}

.ef-featured-time{
    font-size:12px;
    color:var(--muted);
}

.ef-featured-category{
    font-size:12px;
    color:var(--soft);
}

/* --- How it works --- */
.ef-how-it-works{
    padding-top:8px;
}

.ef-steps{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.ef-step{
    padding:18px;
    border-radius:20px;
    background:linear-gradient(180deg, var(--panel) 0%, #10192b 100%);
    border:1px solid var(--line);
    text-align:center;
    box-shadow:var(--shadow-soft);
}

.ef-step-icon{
    font-size:32px;
    margin-bottom:10px;
}

.ef-step-title{
    font-size:14px;
    font-weight:900;
    margin:0 0 6px;
}

.ef-step-text{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
    margin:0;
}

/* --- Payment section --- */
.ef-payment-section{
    padding-top:8px;
}

.ef-payment-grid{
    display:grid;
    gap:12px;
}

.ef-payment-card{
    padding:16px;
    border-radius:18px;
    background:linear-gradient(180deg, var(--panel) 0%, #10192b 100%);
    border:1px solid var(--line);
    text-align:center;
    box-shadow:var(--shadow-soft);
}

.ef-payment-icon{
    font-size:28px;
    margin-bottom:8px;
}

.ef-payment-name{
    font-size:15px;
    font-weight:900;
    margin:0 0 4px;
}

.ef-payment-text{
    font-size:12px;
    color:var(--muted);
    margin:0;
}

/* --- CTA section --- */
.ef-cta-section{
    padding-top:8px;
}

.ef-cta-card{
    padding:32px 24px;
    border-radius:24px;
    background:linear-gradient(135deg, #111111 0%, #1a1a1a 50%);
    border:1px solid rgba(255,255,255,.06);
    text-align:center;
    box-shadow:0 14px 42px rgba(0,0,0,.3);
}

.ef-cta-title{
    font-size:24px;
    font-weight:900;
    margin:0 0 10px;
}

.ef-cta-text{
    font-size:14px;
    color:var(--muted);
    margin:0 0 20px;
    line-height:1.5;
}

/* --- Page head --- */
.ef-page-head{
    padding:20px 18px 16px;
}

.ef-page-title{
    font-size:26px;
    font-weight:900;
    margin:0 0 6px;
    letter-spacing:-.02em;
}

.ef-page-sub{
    font-size:14px;
    color:var(--muted);
    margin:0;
    line-height:1.5;
}

/* --- Inputs --- */
.ef-input{
    width:100%;
    height:50px;
    border-radius:14px;
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--line);
    padding:0 16px;
    font-size:14px;
    outline:none;
    transition:border-color .2s;
}

.ef-input:focus{
    border-color:var(--brand);
}

.ef-textarea{
    height:auto;
    min-height:50px;
    padding:13px 16px;
    resize:vertical;
}

.ef-input::placeholder{
    color:var(--soft);
}

select.ef-input{
    cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fa3bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
}

/* --- Cards --- */
.ef-card{
    border-radius:20px;
    padding:20px;
    background:linear-gradient(180deg, var(--panel) 0%, #10192b 100%);
    border:1px solid var(--line);
    margin-bottom:16px;
    box-shadow:var(--shadow-soft);
}

.ef-card-title{
    font-size:17px;
    font-weight:900;
    margin:0 0 16px;
}

/* --- Fields --- */
.ef-field-group{
    margin-bottom:14px;
}

.ef-field-group:last-child{
    margin-bottom:0;
}

.ef-label{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:6px;
    color:var(--text);
}

.ef-optional{
    color:var(--soft);
    font-weight:400;
}

/* --- Search form --- */
.ef-search-form{
    margin-bottom:20px;
}

.ef-search-row{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}

.ef-search-input{
    flex:1;
}

.ef-category-chips{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
}

.ef-category-chips::-webkit-scrollbar{
    display:none;
}

.ef-chip{
    white-space:nowrap;
    padding:9px 16px;
    border-radius:999px;
    background:var(--panel);
    color:var(--muted);
    border:1px solid var(--line);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:all .2s;
}

.ef-chip.active{
    background:var(--white);
    color:#0a0a0a;
    border-color:var(--white);
}

/* --- Meal grid --- */
.ef-meal-grid{
    display:grid;
    gap:14px;
}

.ef-meal-card{
    display:flex;
    gap:14px;
    padding:14px;
    border-radius:20px;
    background:linear-gradient(180deg, var(--panel) 0%, #10192b 100%);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
}

.ef-meal-image{
    width:76px;
    height:76px;
    border-radius:18px;
    display:grid;
    place-items:center;
    font-size:34px;
    background:linear-gradient(135deg, #1f2d44 0%, #172236 100%);
    border:1px solid #2a3a57;
    flex:0 0 auto;
}

.ef-meal-body{
    flex:1;
    min-width:0;
}

.ef-meal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:4px;
}

.ef-meal-name{
    font-size:16px;
    font-weight:900;
    margin:0;
}

.ef-meal-price{
    font-size:14px;
    font-weight:900;
    color:var(--brand);
    white-space:nowrap;
}

.ef-meal-desc{
    font-size:12px;
    color:var(--muted);
    margin:0 0 10px;
    line-height:1.4;
}

.ef-meal-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ef-meal-time{
    font-size:12px;
    color:var(--soft);
}

/* --- Badges --- */
.ef-badge{
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.ef-badge-sold{
    background:var(--panel3);
    color:var(--soft);
    border:1px solid var(--line);
}

/* --- Empty state --- */
.ef-empty{
    padding:32px 18px;
    text-align:center;
    color:var(--muted);
    font-size:14px;
}

/* --- Fulfillment options --- */
.ef-fulfillment-options{
    display:grid;
    gap:10px;
    margin-bottom:14px;
}

.ef-fulfill-option,
.ef-pay-option{
    display:block;
    cursor:pointer;
}

.ef-fulfill-option input,
.ef-pay-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ef-fulfill-content,
.ef-pay-content{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius:16px;
    background:var(--panel2);
    border:1px solid var(--line);
    transition:all .2s;
}

.ef-fulfill-option input:checked + .ef-fulfill-content,
.ef-pay-option input:checked + .ef-pay-content{
    background:var(--white);
    color:#0a0a0a;
    border-color:var(--white);
}

.ef-fulfill-icon,
.ef-pay-icon{
    font-size:22px;
    flex:0 0 auto;
}

.ef-fulfill-label,
.ef-pay-label{
    display:block;
    font-size:14px;
    font-weight:800;
    margin-bottom:2px;
}

.ef-fulfill-desc,
.ef-pay-desc{
    display:block;
    font-size:12px;
    color:var(--muted);
}

.ef-fulfill-option input:checked + .ef-fulfill-content .ef-fulfill-desc,
.ef-pay-option input:checked + .ef-pay-content .ef-pay-desc{
    color:rgba(0,0,0,.5);
}

/* --- Payment options --- */
.ef-payment-options{
    display:grid;
    gap:10px;
    margin-bottom:14px;
}

/* --- MoMo fields --- */
.ef-momo-fields{
    margin-top:14px;
}

.ef-momo-number-display{
    padding:16px;
    border-radius:14px;
    background:var(--brand-soft);
    border:1px solid rgba(245,166,35,.2);
    text-align:center;
    margin-bottom:16px;
}

.ef-momo-number-label{
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
}

.ef-momo-number-name{
    font-size:16px;
    font-weight:700;
    color:var(--text);
    margin-bottom:4px;
}

.ef-momo-number-value{
    font-size:22px;
    font-weight:900;
    color:var(--brand);
    letter-spacing:.04em;
}

.ef-momo-number-hint{
    font-size:12px;
    color:var(--muted);
    margin-top:8px;
    line-height:1.4;
}

.ef-field-hint{
    display:block;
    font-size:11px;
    color:var(--soft);
    margin-top:4px;
}

.ef-momo-instructions{
    margin-top:14px;
    padding:14px;
    border-radius:14px;
    background:rgba(245,166,35,.06);
    border:1px solid rgba(245,166,35,.12);
    font-size:13px;
    line-height:1.6;
    color:var(--muted);
}

.ef-momo-instructions strong{
    color:var(--text);
}

.ef-momo-instructions ol{
    margin:8px 0 0;
    padding-left:18px;
}

.ef-momo-instructions li{
    margin-bottom:4px;
}

/* --- Order summary --- */
.ef-summary-item{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    font-size:14px;
}

.ef-summary-name{
    color:var(--muted);
}

.ef-summary-price{
    font-weight:700;
}

.ef-summary-divider{
    height:1px;
    background:var(--line);
    margin:8px 0;
}

.ef-summary-row{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    padding:4px 0;
    color:var(--muted);
}

.ef-summary-total{
    font-size:17px;
    font-weight:900;
    color:var(--text);
}

.ef-empty-cart{
    text-align:center;
    padding:16px;
    color:var(--muted);
    font-size:14px;
}

.ef-empty-cart a{
    color:var(--brand);
    text-decoration:underline;
}

/* --- Error states --- */
.ef-card-error{
    border-color:rgba(255,141,141,.25) !important;
    background:linear-gradient(180deg, rgba(255,141,141,.06) 0%, rgba(255,141,141,.03) 100%) !important;
}

.ef-card-error .ef-card-title{
    color:var(--red);
    font-size:14px;
    margin-bottom:10px;
}

.ef-error-list{
    margin:0;
    padding:0 0 0 18px;
    font-size:13px;
    color:var(--red);
    line-height:1.6;
}

.ef-input-error{
    border-color:var(--red) !important;
}

.ef-field-error{
    display:block;
    font-size:12px;
    color:var(--red);
    margin-top:4px;
}

/* --- Customer info --- */
.ef-customer-info{
    display:grid;
    gap:10px;
}

.ef-customer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:var(--muted);
}

.ef-customer-row strong{
    color:var(--text);
    font-weight:700;
    text-align:right;
    max-width:60%;
}

/* --- Cancelled card --- */
.ef-card-cancelled{
    border-color:rgba(255,141,141,.2);
    background:linear-gradient(180deg, rgba(255,141,141,.06) 0%, rgba(255,141,141,.03) 100%);
}

.ef-card-cancelled p{
    color:var(--muted);
    font-size:14px;
    margin:0;
    line-height:1.5;
}

.ef-order-status-tag.cancelled{
    background:var(--red-soft);
    color:var(--red);
}

/* --- Delivery fee row in summary --- */
.ef-summary-delivery{
    font-size:13px;
    color:var(--soft);
}

/* --- Payment total --- */
.ef-payment-total{
    padding-top:8px;
    border-top:1px solid var(--line);
    font-size:16px;
    font-weight:800;
    color:var(--text);
}

/* --- Delivery address --- */
.ef-delivery-address{
    margin-top:14px;
}

/* --- Track page --- */
.ef-track-card{
    padding:24px;
    border-radius:22px;
    background:linear-gradient(180deg, var(--panel) 0%, #10192b 100%);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
}

.ef-track-form{
    display:grid;
    gap:14px;
}

.ef-track-error{
    margin-top:16px;
    padding:12px 16px;
    border-radius:14px;
    background:var(--red-soft);
    border:1px solid rgba(255,141,141,.2);
    color:var(--red);
    font-size:13px;
}

.ef-track-error p{
    margin:0;
}

.ef-track-help{
    margin-top:16px;
    text-align:center;
    font-size:13px;
    color:var(--muted);
}

.ef-track-help a{
    color:var(--brand);
    text-decoration:underline;
}

.ef-track-info{
    margin-top:20px;
    padding:14px;
    border-radius:14px;
    background:rgba(108,183,255,.06);
    border:1px solid rgba(108,183,255,.12);
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:12px;
    color:var(--muted);
    line-height:1.5;
}

.ef-track-info-icon{
    font-size:16px;
    flex:0 0 auto;
    margin-top:1px;
}

.ef-track-info p{
    margin:0;
}

/* --- Order status card --- */
.ef-order-status-card{
    padding:20px;
    border-radius:22px;
    background:linear-gradient(135deg, #0f2a20 0%, #123223 100%);
    border:1px solid rgba(71,209,140,.16);
    margin-bottom:16px;
    box-shadow:var(--shadow-soft);
}

.ef-order-status-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.ef-order-current-status{
    margin-bottom:12px;
}

.ef-status-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
}

.ef-status-badge.new{
    background:var(--blue-soft);
    color:var(--blue);
}

.ef-status-badge.accepted{
    background:var(--amber-soft);
    color:var(--amber);
}

.ef-status-badge.preparing{
    background:var(--amber-soft);
    color:var(--amber);
}

.ef-status-badge.ready{
    background:var(--green-soft);
    color:var(--green);
}

.ef-status-badge.out_for_delivery{
    background:var(--purple-soft);
    color:var(--purple);
}

.ef-status-badge.completed{
    background:var(--green-soft);
    color:var(--green);
}

.ef-status-badge.cancelled{
    background:var(--red-soft);
    color:var(--red);
}

.ef-order-status-tag{
    padding:5px 10px;
    border-radius:999px;
    background:var(--green-soft);
    color:var(--green);
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.ef-order-number{
    font-size:22px;
    font-weight:900;
    letter-spacing:-.02em;
}

.ef-order-items{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:12px;
}

.ef-order-item{
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    font-size:12px;
    font-weight:600;
}

.ef-order-meta{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:rgba(255,255,255,.6);
}

/* --- Progress tracker --- */
.ef-progress-track{
    display:flex;
    flex-direction:column;
    gap:0;
}

.ef-progress-step{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 0;
    opacity:.5;
}

.ef-progress-step.active{
    opacity:1;
}

.ef-progress-step.current .ef-progress-title{
    color:var(--brand);
}

.ef-progress-dot{
    width:40px;
    height:40px;
    border-radius:999px;
    background:var(--panel3);
    border:1px solid var(--line);
    display:grid;
    place-items:center;
    font-size:16px;
    flex:0 0 auto;
}

.ef-progress-step.active .ef-progress-dot{
    background:var(--white);
    border-color:var(--white);
}

.ef-progress-body{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.ef-progress-title{
    font-size:14px;
    font-weight:800;
}

.ef-progress-note{
    font-size:12px;
    color:var(--muted);
}

.ef-progress-line{
    width:1px;
    height:24px;
    background:var(--line);
    margin-left:19.5px;
}

.ef-progress-line.active{
    background:var(--white);
}

/* --- Payment info --- */
.ef-payment-info{
    display:grid;
    gap:12px;
}

.ef-payment-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
}

.ef-payment-row strong{
    font-weight:800;
}

.ef-payment-status{
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.ef-payment-status.pending{
    background:var(--amber-soft);
    color:var(--amber);
}

.ef-payment-status.verified,
.ef-payment-status.submitted{
    background:var(--green-soft);
    color:var(--green);
}

/* --- Footer --- */
.ef-footer{
    margin-top:12px;
    padding:28px 18px 24px;
    border-top:1px solid var(--line);
    background:rgba(0,0,0,.2);
}

.ef-footer-inner{
    max-width:440px;
    margin:0 auto;
    display:grid;
    gap:20px;
}

.ef-footer-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.ef-footer-name{
    font-size:15px;
    font-weight:900;
}

.ef-footer-tagline{
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}

.ef-footer-links{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.ef-footer-link{
    color:var(--muted);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:color .2s;
}

.ef-footer-link:hover{
    color:var(--text);
}

.ef-footer-payments{
    display:grid;
    gap:10px;
}

.ef-footer-pay-label{
    font-size:12px;
    font-weight:700;
    color:var(--soft);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ef-footer-pay-icons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ef-pay-badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    background:var(--panel2);
    border:1px solid var(--line);
    color:var(--muted);
}

.ef-pay-badge.momo{
    background:rgba(245,166,35,.1);
    border-color:rgba(245,166,35,.2);
    color:var(--amber);
}

.ef-pay-badge.telecel{
    background:rgba(255,141,141,.1);
    border-color:rgba(255,141,141,.2);
    color:var(--red);
}

.ef-pay-badge.airteltigo{
    background:rgba(108,183,255,.1);
    border-color:rgba(108,183,255,.2);
    color:var(--blue);
}

.ef-pay-badge.cash{
    background:var(--green-soft);
    border-color:rgba(71,209,140,.2);
    color:var(--green);
}

.ef-footer-bottom{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--soft);
    padding-top:16px;
    border-top:1px solid var(--line);
}

.ef-footer-location{
    text-align:right;
}

/* --- Flash banner --- */
.flash-banner.error{
    background:var(--red-soft);
    border-color:rgba(255,141,141,.2);
    color:var(--red);
}

/* --- Responsive tweaks --- */
@media (max-width:380px){
    .ef-hero-title{
        font-size:26px;
    }

    .ef-steps{
        gap:10px;
    }

    .ef-featured-card{
        min-width:170px;
    }
}

@media (min-width:441px){
    .app{
        border-left:1px solid var(--line);
        border-right:1px solid var(--line);
        box-shadow:0 0 60px rgba(0,0,0,.3);
    }
}

/* --- Hero glow --- */
.ef-hero-glow{
    position:absolute;
    top:-30%;
    left:50%;
    transform:translateX(-50%);
    width:300px;
    height:300px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(245,166,35,.08), transparent 60%);
    pointer-events:none;
}

/* --- Cart page --- */
.ef-cart-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px;
    background:var(--panel);
    border-radius:14px;
    border:1px solid var(--line);
    margin-bottom:10px;
}

.ef-cart-info{
    flex:1;
    min-width:0;
}

.ef-cart-name{
    font-size:15px;
    font-weight:700;
    color:var(--text);
}

.ef-cart-price{
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}

.ef-cart-controls{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}

.ef-cart-qty-form{
    margin:0;
    padding:0;
    display:inline;
}

.ef-qty-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--text);
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .15s;
    padding:0;
    line-height:1;
}

.ef-qty-btn:hover{
    background:var(--brand-soft);
    border-color:var(--brand);
    color:var(--brand);
}

.ef-qty-value{
    font-size:15px;
    font-weight:700;
    min-width:20px;
    text-align:center;
    color:var(--text);
}

.ef-cart-remove-form{
    margin:0 0 0 4px;
    padding:0;
    display:inline;
}

.ef-cart-remove{
    background:none;
    border:none;
    color:var(--muted);
    font-size:20px;
    cursor:pointer;
    padding:4px 6px;
    border-radius:8px;
    transition:all .15s;
    line-height:1;
}

.ef-cart-remove:hover{
    color:var(--red);
    background:var(--red-soft);
}

.ef-empty-state{
    text-align:center;
    padding:48px 20px;
}

.ef-empty-state p{
    color:var(--muted);
    margin-bottom:16px;
    font-size:15px;
}

.ef-totals{
    padding:4px 0;
}

.ef-totals-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 0;
    font-size:14px;
    color:var(--muted);
}

.ef-totals-row strong{
    color:var(--text);
}

.ef-totals-divider{
    height:1px;
    background:var(--line);
    margin:8px 0;
}

.ef-totals-total{
    font-size:17px;
    font-weight:700;
}

.ef-totals-total strong{
    color:var(--brand);
    font-size:19px;
}

.ef-fulfillment-toggle{
    display:flex;
    gap:8px;
    margin-top:14px;
}

.ef-fulfill-btn{
    flex:1;
    padding:10px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    text-align:center;
}

.ef-fulfill-btn.active{
    background:var(--brand-soft);
    border-color:var(--brand);
    color:var(--brand);
}

.ef-fulfill-btn:hover{
    border-color:var(--brand);
}

.ef-cart-actions{
    margin-top:20px;
    display:grid;
    gap:10px;
}

/* --- Admin Dashboard --- */
.admin-wrap{
    min-height:100vh;
    background:var(--bg);
}

.admin-header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--panel);
    border-bottom:1px solid var(--line);
}

.admin-header-inner{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.admin-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.admin-logo-mark{
    width:32px;
    height:32px;
    border-radius:10px;
    background:var(--brand);
    color:#090d16;
    display:grid;
    place-items:center;
    font-size:16px;
    font-weight:900;
}

.admin-logo-text{
    font-size:16px;
    font-weight:800;
    color:var(--text);
}

.admin-nav{
    display:flex;
    gap:4px;
}

.admin-nav-link{
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    text-decoration:none;
    transition:all .15s;
    white-space:nowrap;
}

.admin-nav-link:hover{
    color:var(--text);
    background:var(--panel2);
}

.admin-nav-link.active{
    color:var(--brand);
    background:var(--brand-soft);
}

@media (max-width:900px){
    .admin-header-inner{
        padding:0 14px;
    }
    .admin-main{
        padding:16px 14px 40px;
    }
    .admin-metrics{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:10px;
    }
    .admin-grid-2{
        grid-template-columns:1fr;
    }
    .admin-card{
        padding:16px;
    }
    .rp-summary{
        grid-template-columns:repeat(2,1fr);
    }
    .rp-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .admin-header-inner{
        padding:0 10px;
        height:auto;
        min-height:48px;
    }
    .admin-nav{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        flex:1;
        gap:2px;
        padding:6px 0;
    }
    .admin-nav::-webkit-scrollbar{
        display:none;
    }
    .admin-nav-link{
        padding:6px 10px;
        font-size:12px;
        flex:0 0 auto;
    }
    .admin-main{
        padding:12px 10px 32px;
    }
    .admin-head{
        margin-bottom:16px;
    }
    .admin-head-title{
        font-size:20px;
    }
    .admin-metrics{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }
    .admin-metric{
        padding:12px;
        gap:10px;
    }
    .admin-metric-icon{
        width:36px;
        height:36px;
        font-size:16px;
    }
    .admin-metric-value{
        font-size:16px;
    }
    .admin-metric-label{
        font-size:10px;
    }
    .admin-card{
        padding:14px;
        border-radius:14px;
    }
    .admin-card-title{
        font-size:15px;
    }
}

@media (max-width:420px){
    .admin-metrics{
        grid-template-columns:1fr;
    }
    .admin-metric{
        padding:10px 12px;
    }
    .admin-card{
        padding:12px;
    }
    .admin-checklist-item{
        font-size:12px;
    }
    .rp-summary{
        grid-template-columns:1fr;
    }
}

.admin-main{
    max-width:1100px;
    margin:0 auto;
    padding:24px 20px 60px;
}

.admin-flash{
    padding:12px 16px;
    border-radius:12px;
    background:var(--green-soft);
    border:1px solid rgba(71,209,140,.2);
    color:var(--green);
    font-size:13px;
    font-weight:600;
    margin-bottom:16px;
}

.admin-flash.error{
    background:var(--red-soft);
    border-color:rgba(255,141,141,.2);
    color:var(--red);
}

.admin-head{
    margin-bottom:24px;
}

.admin-head-title{
    font-size:24px;
    font-weight:900;
    margin:0;
    color:var(--text);
}

.admin-head-sub{
    font-size:14px;
    color:var(--muted);
    margin:4px 0 0;
}

.admin-metrics{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:12px;
    margin-bottom:24px;
}

.admin-metric{
    padding:16px;
    border-radius:16px;
    background:var(--panel);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-metric-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:20px;
    flex:0 0 auto;
}

.admin-metric-icon.blue{background:var(--blue-soft);}
.admin-metric-icon.amber{background:var(--amber-soft);}
.admin-metric-icon.orange{background:rgba(245,166,35,.14);}
.admin-metric-icon.green{background:var(--green-soft);}
.admin-metric-icon.gold{background:var(--brand-soft);}
.admin-metric-icon.red{background:var(--red-soft);}

.admin-metric-body{
    min-width:0;
}

.admin-metric-value{
    font-size:20px;
    font-weight:900;
    color:var(--text);
    line-height:1.2;
}

.admin-metric-label{
    font-size:11px;
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.admin-card{
    padding:20px;
    border-radius:16px;
    background:var(--panel);
    border:1px solid var(--line);
    margin-bottom:16px;
}

.admin-card-link-block{
    display:block;
    text-decoration:none;
    transition:border-color .15s;
}

.admin-card-link-block:hover{
    border-color:var(--brand);
}

.admin-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.admin-card-title{
    font-size:16px;
    font-weight:900;
    margin:0;
    color:var(--text);
}

.admin-card-link{
    font-size:13px;
    font-weight:700;
    color:var(--brand);
    text-decoration:none;
}

.admin-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:8px 0;
    text-decoration:none;
}

.admin-row-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.admin-row-primary{
    font-size:14px;
    font-weight:800;
    color:var(--text);
}

.admin-row-secondary{
    font-size:12px;
    color:var(--muted);
}

.admin-row-end{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.admin-row-meta{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--soft);
    margin-top:4px;
}

.admin-row-time{
    font-size:11px;
    color:var(--soft);
    white-space:nowrap;
}

.admin-divider{
    height:1px;
    background:var(--line);
    margin:0;
}

.admin-empty{
    text-align:center;
    padding:24px;
    color:var(--muted);
    font-size:14px;
}

.admin-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:capitalize;
}

.admin-badge.new{background:var(--blue-soft);color:var(--blue);}
.admin-badge.accepted{background:var(--amber-soft);color:var(--amber);}
.admin-badge.preparing{background:var(--brand-soft);color:var(--brand);}
.admin-badge.ready{background:var(--green-soft);color:var(--green);}
.admin-badge.out_for_delivery{background:var(--purple-soft);color:var(--purple);}
.admin-badge.completed{background:var(--green-soft);color:var(--green);}
.admin-badge.cancelled{background:var(--red-soft);color:var(--red);}

.admin-pay-badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    text-transform:capitalize;
}

.admin-pay-badge.pending{background:var(--amber-soft);color:var(--amber);}
.admin-pay-badge.submitted{background:var(--blue-soft);color:var(--blue);}
.admin-pay-badge.verified{background:var(--green-soft);color:var(--green);}
.admin-pay-badge.failed{background:var(--red-soft);color:var(--red);}
.admin-pay-badge.refunded{background:var(--purple-soft);color:var(--purple);}

/* --- Admin filters --- */
.admin-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:flex-end;
}

@media (max-width:640px){
    .admin-filters{
        flex-direction:column;
    }
    .admin-filters .admin-input{
        width:100%;
    }
    .admin-input-sm{
        min-width:0;
        width:100%;
    }
}

.admin-input{
    height:42px;
    border-radius:10px;
    background:var(--bg2);
    color:var(--text);
    border:1px solid var(--line);
    padding:0 12px;
    font-size:13px;
    outline:none;
    transition:border-color .15s;
    min-width:0;
}

.admin-input:focus{
    border-color:var(--brand);
}

.admin-input-sm{
    flex:1;
    min-width:120px;
}

.admin-textarea{
    height:auto;
    min-height:80px;
    padding:10px 12px;
    resize:vertical;
}

.admin-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:42px;
    padding:0 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--text);
    cursor:pointer;
    text-decoration:none;
    transition:all .15s;
    white-space:nowrap;
}

.admin-btn:hover{
    border-color:var(--brand);
    color:var(--brand);
}

.admin-btn:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.admin-btn-primary{
    background:var(--brand);
    border-color:var(--brand);
    color:#090d16;
}

.admin-btn-primary:hover{
    background:rgba(245,166,35,.85);
    border-color:rgba(245,166,35,.85);
    color:#090d16;
}

.admin-btn-danger{
    border-color:var(--red);
    color:var(--red);
    background:var(--red-soft);
}

.admin-btn-danger:hover{
    background:var(--red);
    color:#fff;
}

.admin-btn-ghost{
    background:transparent;
    border-color:transparent;
    color:var(--muted);
}

.admin-btn-ghost:hover{
    color:var(--text);
    background:var(--panel2);
    border-color:var(--line);
}

.admin-btn-sm{
    height:34px;
    padding:0 12px;
    font-size:12px;
}

/* --- Admin actions bar --- */
.admin-actions-bar{
    margin-bottom:16px;
}

/* --- Admin table --- */
.admin-table-wrap{
    overflow-x:auto;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--panel);
    margin-bottom:16px;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.admin-table th{
    text-align:left;
    padding:14px 16px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--soft);
    border-bottom:1px solid var(--line);
    background:var(--panel2);
}

.admin-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    color:var(--text);
}

.admin-table tr:last-child td{
    border-bottom:none;
}

.admin-table-name{
    font-weight:800;
}

.admin-table-actions{
    display:flex;
    gap:6px;
}

/* --- Admin detail --- */
.admin-detail{
    display:grid;
    gap:10px;
}

.admin-detail-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    color:var(--muted);
}

.admin-detail-row strong{
    color:var(--text);
    font-weight:700;
    text-align:right;
}

.admin-text-gold{
    color:var(--brand) !important;
    font-size:16px !important;
}

.admin-text-bold{
    font-weight:800;
}

.admin-mono{
    font-family:monospace;
    font-size:12px;
    background:var(--bg2);
    padding:2px 8px;
    border-radius:4px;
}

/* --- Admin grid --- */
.admin-grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
}

@media (max-width:720px){
    .admin-grid-2{
        grid-template-columns:1fr;
    }
}

/* --- Admin timeline --- */
.admin-timeline{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:16px;
}

.admin-timeline-step{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 0;
    opacity:.45;
}

.admin-timeline-step.active{
    opacity:1;
}

.admin-timeline-step.current .admin-timeline-title{
    color:var(--brand);
    font-weight:900;
}

.admin-timeline-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--line);
    flex:0 0 auto;
}

.admin-timeline-step.active .admin-timeline-dot{
    background:var(--white);
}

.admin-timeline-step.current .admin-timeline-dot{
    background:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft);
}

.admin-timeline-title{
    font-size:13px;
    font-weight:700;
}

.admin-timeline-note{
    font-size:11px;
    color:var(--muted);
}

.admin-timeline-line{
    width:1px;
    height:20px;
    background:var(--line);
    margin-left:5.5px;
}

.admin-timeline-step.active + .admin-timeline-line{
    background:var(--white);
}

/* --- Admin status actions --- */
.admin-status-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
}

/* --- Admin form --- */
.admin-card-form{
    max-width:640px;
}

.admin-field{
    margin-bottom:14px;
}

.admin-field-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

@media (max-width:500px){
    .admin-field-row{
        grid-template-columns:1fr;
    }
}

.admin-label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:5px;
    color:var(--text);
}

.admin-field-error{
    display:block;
    font-size:11px;
    color:var(--red);
    margin-top:3px;
}

.admin-field-checkbox{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:8px;
    padding-bottom:2px;
}

.admin-field-checkbox label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
}

.admin-form-actions{
    display:flex;
    gap:10px;
    margin-top:20px;
}

/* --- Admin pagination --- */
.admin-pagination{
    padding:8px 0;
}

.admin-pagination nav{
    display:flex;
    gap:4px;
}

.admin-pagination .relative{
    display:flex;
    gap:4px;
}

.admin-pagination a, .admin-pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 8px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--muted);
    text-decoration:none;
    transition:all .15s;
}

.admin-pagination a:hover{
    border-color:var(--brand);
    color:var(--brand);
}

.admin-pagination span[aria-current="page"]{
    background:var(--brand);
    border-color:var(--brand);
    color:#090d16;
}

/* ========================================
   Phase 7 — Kitchen Operations Screen
   ======================================== */

.kitchen-body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    margin:0;
    padding:0;
    min-height:100vh;
}

.kitchen-wrap{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.kitchen-header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--panel);
    border-bottom:1px solid var(--line);
}

.kitchen-header-inner{
    max-width:1400px;
    margin:0 auto;
    padding:0 16px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.kitchen-header-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.kitchen-logo{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:var(--text);
}

.kitchen-logo-mark{
    width:28px;
    height:28px;
    border-radius:8px;
    background:var(--brand);
    color:#090d16;
    display:grid;
    place-items:center;
    font-size:14px;
    font-weight:900;
}

.kitchen-logo-text{
    font-size:15px;
    font-weight:800;
}

.kitchen-header-center{
    flex:1;
    text-align:center;
}

.kitchen-title{
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    letter-spacing:.04em;
    text-transform:uppercase;
}

.kitchen-header-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.kitchen-time{
    font-size:14px;
    font-weight:700;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
}

.kitchen-header-link{
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    text-decoration:none;
    padding:6px 10px;
    border-radius:8px;
    transition:all .15s;
}

.kitchen-header-link:hover{
    color:var(--text);
    background:var(--panel2);
}

.kitchen-refresh-btn{
    width:32px;
    height:32px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--muted);
    font-size:16px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:all .15s;
}

.kitchen-refresh-btn:hover{
    color:var(--text);
    border-color:var(--brand);
}

.kitchen-flash{
    max-width:1400px;
    margin:12px auto 0;
    padding:10px 16px;
    border-radius:10px;
    background:var(--green-soft);
    border:1px solid rgba(71,209,140,.2);
    color:var(--green);
    font-size:13px;
    font-weight:600;
}

.kitchen-main{
    flex:1;
    padding:16px;
    max-width:1400px;
    margin:0 auto;
    width:100%;
}

.kitchen-columns{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    min-height:calc(100vh - 80px);
}

@media (max-width:1100px){
    .kitchen-columns{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:640px){
    .kitchen-columns{
        grid-template-columns:1fr;
    }

    .kitchen-main{
        padding:12px;
    }
}

.kitchen-column{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}

.kitchen-column-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:12px;
    background:var(--panel);
    border:1px solid var(--line);
    position:sticky;
    top:64px;
    z-index:10;
}

.kitchen-column-icon{
    font-size:16px;
}

.kitchen-column-label{
    font-size:13px;
    font-weight:800;
    color:var(--text);
    flex:1;
}

.kitchen-column-count{
    font-size:11px;
    font-weight:800;
    padding:3px 9px;
    border-radius:999px;
    background:var(--panel3);
    color:var(--muted);
}

.kitchen-column-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}

.kitchen-card{
    padding:14px;
    border-radius:16px;
    background:linear-gradient(180deg,var(--panel) 0%,#10192b 100%);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:border-color .15s,box-shadow .15s;
}

.kitchen-card-new{
    border-color:var(--brand);
    box-shadow:0 0 0 1px var(--brand), var(--shadow),0 0 20px rgba(245,166,35,.2);
    background:linear-gradient(180deg,#1a1520 0%,#13182b 100%);
    animation:kitchen-pulse 0.6s ease-in-out 3;
}

.kitchen-card-new .kitchen-card-number{
    color:var(--brand);
}

.kitchen-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

.kitchen-card-number{
    font-size:17px;
    font-weight:900;
    letter-spacing:-.02em;
}

.kitchen-card-time{
    font-size:11px;
    color:var(--soft);
    white-space:nowrap;
}

.kitchen-card-customer{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.kitchen-customer-name{
    font-size:14px;
    font-weight:800;
}

.kitchen-customer-phone{
    font-size:12px;
    color:var(--brand);
    text-decoration:none;
    font-weight:700;
}

.kitchen-customer-phone:hover{
    text-decoration:underline;
}

.kitchen-card-details{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.kitchen-detail-fulfillment{
    font-size:12px;
    color:var(--muted);
    font-weight:700;
}

.kitchen-detail-address{
    font-size:11px;
    color:var(--soft);
    line-height:1.4;
}

.kitchen-card-items{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
}

.kitchen-item{
    display:flex;
    flex-wrap:wrap;
    gap:2px 6px;
    font-size:13px;
    align-items:baseline;
}

.kitchen-item-qty{
    font-weight:900;
    color:var(--brand);
    min-width:20px;
}

.kitchen-item-name{
    font-weight:700;
}

.kitchen-item-note{
    font-size:11px;
    color:var(--soft);
    width:100%;
    padding-left:26px;
}

.kitchen-card-note{
    font-size:12px;
    color:var(--muted);
    padding:6px 10px;
    border-radius:8px;
    background:rgba(108,183,255,.06);
    border:1px solid rgba(108,183,255,.1);
    line-height:1.4;
}

.kitchen-card-note-kitchen{
    background:rgba(245,166,35,.06);
    border-color:rgba(245,166,35,.12);
    color:var(--amber);
}

.kitchen-card-payment{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    font-size:12px;
}

.kitchen-pay-method{
    font-weight:700;
    color:var(--muted);
}

.kitchen-pay-status{
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}

.kitchen-pay-pending{
    background:var(--amber-soft);
    color:var(--amber);
}

.kitchen-pay-submitted{
    background:var(--blue-soft);
    color:var(--blue);
}

.kitchen-pay-verified{
    background:var(--green-soft);
    color:var(--green);
}

.kitchen-pay-failed{
    background:var(--red-soft);
    color:var(--red);
}

.kitchen-card-total{
    font-size:18px;
    font-weight:900;
    color:var(--brand);
}

.kitchen-card-actions{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-top:6px;
    border-top:1px solid var(--line);
}

.kitchen-action-form{
    margin:0;
    padding:0;
}

.kitchen-btn{
    display:block;
    width:100%;
    border:none;
    outline:none;
    cursor:pointer;
    font-weight:800;
    border-radius:12px;
    text-align:center;
    transition:all .15s;
    -webkit-tap-highlight-color:transparent;
}

.kitchen-btn:hover{
    transform:translateY(-1px);
}

.kitchen-btn:active{
    transform:translateY(0);
}

.kitchen-btn-primary{
    background:var(--white);
    color:#090d16;
}

.kitchen-btn-primary:hover{
    background:#e8e8e8;
}

.kitchen-btn-danger{
    background:transparent;
    color:var(--red);
    border:1px solid rgba(255,141,141,.25);
}

.kitchen-btn-danger:hover{
    background:var(--red-soft);
}

.kitchen-btn-large{
    padding:14px 16px;
    font-size:14px;
}

.kitchen-btn-sm{
    padding:8px 12px;
    font-size:12px;
}

.kitchen-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:32px 16px;
    text-align:center;
    border-radius:12px;
    border:1px dashed var(--line);
    background:rgba(255,255,255,.02);
}

.kitchen-empty-icon{
    font-size:24px;
}

.kitchen-empty-text{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
}

@keyframes kitchen-pulse{
    0%,100%{box-shadow:0 0 0 1px var(--brand),0 0 20px rgba(245,166,35,.2);}
    50%{box-shadow:0 0 0 2px var(--brand),0 0 30px rgba(245,166,35,.35);}
}

.kitchen-toast{
    position:fixed;
    bottom:24px;
    right:24px;
    background:var(--brand);
    color:#0a0a0a;
    font-weight:700;
    font-size:14px;
    padding:14px 22px;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:9999;
    animation:toast-in 0.3s ease-out;
    pointer-events:none;
}

@keyframes toast-in{
    from{opacity:0;transform:translateY(16px) scale(.95);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

.admin-metric-flash{
    animation:metric-flash 0.6s ease-out;
}

@keyframes metric-flash{
    0%{color:var(--brand);transform:scale(1.08);}
    100%{color:inherit;transform:scale(1);}
}

.ef-payment-momo-info{
    padding:16px;
    border-radius:12px;
    background:var(--brand-soft);
    border:1px solid rgba(245,166,35,.2);
    text-align:center;
    margin:12px 0;
}

.ef-payment-momo-name{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    margin-bottom:2px;
}

.ef-payment-momo-number{
    font-size:20px;
    font-weight:900;
    color:var(--brand);
    letter-spacing:.04em;
}

.ef-payment-momo-note{
    font-size:12px;
    color:var(--muted);
    margin-top:8px;
    line-height:1.4;
}

/* ========================================
   Phase 10 — Premium UI Final Pass
   ======================================== */

/* --- Enhanced cards --- */
.ef-card,
.ef-meal-card,
.ef-featured-card,
.ef-step,
.ef-payment-card,
.ef-track-card{
    transition:border-color .2s, box-shadow .2s, transform .2s;
}

.ef-meal-card:hover{
    border-color:rgba(245,166,35,.3);
    box-shadow:0 8px 28px rgba(0,0,0,.3);
    transform:translateY(-2px);
}

.ef-featured-card:hover{
    border-color:rgba(245,166,35,.3);
    box-shadow:0 8px 28px rgba(0,0,0,.3);
}

/* --- Enhanced empty states --- */
.ef-empty-menu,
.ef-empty-cart-state{
    text-align:center;
    padding:48px 20px;
}

.ef-empty-icon{
    font-size:40px;
    display:block;
    margin-bottom:12px;
}

.ef-empty-menu p,
.ef-empty-cart-state p{
    color:var(--muted);
    font-size:15px;
    margin:0;
}

/* --- Track error with icon --- */
.ef-track-error{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:0;
    padding:10px 14px;
    border-radius:14px;
    background:var(--red-soft);
    border:1px solid rgba(255,141,141,.2);
    color:var(--red);
    font-size:13px;
}

.ef-track-error-icon{
    font-size:16px;
    flex:0 0 auto;
}

.ef-track-error p{
    margin:0;
}

/* --- Better button sizes --- */
.ef-btn-large{
    padding:16px 28px;
    font-size:15px;
}

.ef-btn-block{
    width:100%;
}

.ef-btn-sm{
    padding:9px 16px;
    font-size:12px;
}

.ef-btn-small{
    padding:7px 12px;
    font-size:12px;
}

/* --- Better header sticky --- */
.ef-header{
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
}

/* --- Better footer --- */
.ef-footer{
    margin-top:auto;
    padding:32px 18px 24px;
}

/* --- Admin enhancements --- */
.admin-head-date{
    display:block;
    font-size:12px;
    color:var(--soft);
    margin-top:4px;
}

.admin-card-link{
    display:block;
    text-decoration:none;
    transition:border-color .2s, transform .2s;
}

.admin-card-link:hover{
    border-color:var(--brand);
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}

.admin-row-left{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.admin-row-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.admin-row-pay{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    font-size:11px;
}

.admin-pay-alert{
    color:var(--amber);
    font-size:11px;
    font-weight:700;
    background:var(--amber-soft);
    padding:2px 8px;
    border-radius:999px;
}

.admin-meal-emoji{
    font-size:18px;
    margin-right:8px;
    vertical-align:middle;
}

.admin-table-price{
    font-weight:800;
    color:var(--brand);
}

.admin-table-time{
    color:var(--muted);
}

.admin-th-actions{
    text-align:right !important;
}

.admin-table-actions .admin-btn-sm{
    height:30px;
    padding:0 10px;
    font-size:11px;
}

.admin-inline-form{
    display:inline;
}

/* --- Better admin metrics --- */
.admin-metric{
    transition:border-color .2s, transform .2s;
}

.admin-metric:hover{
    border-color:rgba(245,166,35,.3);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.2);
}

/* --- Better admin timeline --- */
.admin-timeline-step{
    transition:opacity .2s;
}

/* --- Better admin status actions --- */
.admin-status-actions{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
}

.admin-status-actions .admin-btn{
    flex:1;
    min-width:0;
}

@media (max-width:380px){
    .admin-metrics{
        grid-template-columns:1fr;
    }
}

/* --- Better form field focus --- */
.ef-input:focus,
.admin-input:focus{
    box-shadow:0 0 0 2px var(--brand-soft);
}

/* --- Kitchen enhancements --- */
.kitchen-card{
    transition:border-color .2s, box-shadow .2s;
}

.kitchen-card:hover{
    border-color:rgba(245,166,35,.25);
}

.kitchen-btn-large{
    min-height:48px;
    font-size:14px;
    padding:12px 20px;
}

.kitchen-btn{
    transition:all .15s;
}

.kitchen-btn:active{
    transform:scale(.97);
}

.kitchen-empty{
    transition:all .2s;
}

/* --- Checkout MoMo section polish --- */
.ef-momo-number-display{
    transition:border-color .2s;
}

.ef-momo-instructions ol{
    max-width:100%;
}

/* --- Checkout delivery address animation --- */
.ef-delivery-address{
    transition:all .3s ease;
}

/* --- Onboarding checklist --- */
.admin-checklist{
    display:grid;
    gap:6px;
    margin-top:12px;
}
.admin-checklist-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--muted);
}
.admin-checklist-item.done{
    color:var(--green);
}
.admin-checklist-icon{
    font-size:14px;
    flex:0 0 auto;
}
.admin-checklist-label{
    font-weight:600;
}

/* --- Meal image styles --- */
.ef-meal-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:18px;
}

.ef-featured-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.admin-meal-thumb{
    width:44px;
    height:44px;
    border-radius:10px;
    object-fit:cover;
    display:block;
}

.admin-table-img{
    width:56px;
    padding:8px 8px 8px 16px !important;
    vertical-align:middle;
}

.admin-image-preview{
    margin-bottom:10px;
}

.admin-image-preview img{
    max-width:180px;
    max-height:120px;
    border-radius:12px;
    border:1px solid var(--line);
    display:block;
}

/* --- PWA install banner --- */
.ef-pwa-banner{
    max-width:440px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    background:var(--panel2);
    border-bottom:1px solid var(--line);
    cursor:pointer;
    transition:background .2s;
    user-select:none;
    -webkit-user-select:none;
}

.ef-pwa-banner:hover{
    background:var(--panel3);
}

.ef-pwa-banner.ef-pwa-ios{
    cursor:default;
}

.ef-pwa-banner.ef-pwa-ios:hover{
    background:var(--panel2);
}

.ef-pwa-icon{
    font-size:18px;
    flex:0 0 auto;
}

.ef-pwa-text{
    flex:1;
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.ef-pwa-close{
    background:none;
    border:none;
    color:var(--muted);
    font-size:18px;
    cursor:pointer;
    padding:2px 4px;
    line-height:1;
    flex:0 0 auto;
    transition:color .15s;
}

.ef-pwa-close:hover{
    color:var(--text);
}

/* ========================================
   Phase 20 — Premium Reports & UI Upgrade
   ======================================== */

/* --- Reports header --- */
.rp-header{
    margin-bottom:24px;
}

.rp-header-body{
    margin-bottom:16px;
}

.rp-title{
    font-size:24px;
    font-weight:900;
    margin:0 0 4px;
    color:var(--text);
}

.rp-subtitle{
    font-size:14px;
    color:var(--muted);
    margin:0;
}

.rp-filters{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
}

.rp-filter-form{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-end;
}

.rp-quick-filters{
    display:flex;
    gap:4px;
}

.rp-qf-btn{
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:var(--muted);
    background:var(--bg2);
    border:1px solid var(--line);
    text-decoration:none;
    transition:all .15s;
}

.rp-qf-btn.active,
.rp-qf-btn:hover{
    background:var(--brand);
    color:#090d16;
    border-color:var(--brand);
}

.rp-date-range{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.rp-date-input{
    height:36px;
    border-radius:10px;
    background:var(--bg2);
    color:var(--text);
    border:1px solid var(--line);
    padding:0 10px;
    font-size:13px;
    outline:none;
}

.rp-date-sep{
    color:var(--muted);
    font-size:13px;
}

.rp-btn{
    height:36px;
    padding:0 14px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--text);
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    transition:all .15s;
}

.rp-btn:hover{
    border-color:var(--brand);
    color:var(--brand);
}

.rp-btn-ghost{
    background:transparent;
    border-color:transparent;
    color:var(--muted);
}

.rp-btn-ghost:hover{
    color:var(--text);
}

/* --- Summary cards --- */
.rp-summary{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:12px;
    margin-bottom:20px;
}

.rp-card{
    padding:16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--panel);
    display:flex;
    align-items:center;
    gap:12px;
    transition:border-color .2s,transform .2s;
}

.rp-card:hover{
    transform:translateY(-2px);
}

.rp-card-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    display:grid;
    place-items:center;
    font-size:18px;
    flex:0 0 auto;
}

.rp-card-revenue .rp-card-icon{background:var(--brand-soft);}
.rp-card-expense .rp-card-icon{background:var(--red-soft);}
.rp-card-profit .rp-card-icon{background:var(--green-soft);}
.rp-card-loss .rp-card-icon{background:var(--red-soft);}
.rp-card-neutral .rp-card-icon{background:var(--blue-soft);}

.rp-card-revenue{border-color:rgba(245,166,35,.2);}
.rp-card-expense{border-color:rgba(255,141,141,.2);}
.rp-card-profit{border-color:rgba(71,209,140,.2);}
.rp-card-loss{border-color:rgba(255,141,141,.2);}
.rp-card-neutral{border-color:var(--line);}

.rp-card-body{
    min-width:0;
}

.rp-card-value{
    font-size:18px;
    font-weight:900;
    color:var(--text);
    line-height:1.2;
}

.rp-card-label{
    font-size:11px;
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-top:2px;
}

/* --- Section cards --- */
.rp-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:16px;
}

@media (max-width:800px){
    .rp-grid{grid-template-columns:1fr;}
    .rp-summary{grid-template-columns:repeat(2,1fr);}
}

.rp-section-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
}

.rp-section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.rp-section-title{
    font-size:16px;
    font-weight:900;
    margin:0;
    color:var(--text);
}

.rp-section-badge{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    padding:4px 10px;
    border-radius:999px;
    background:var(--bg2);
    border:1px solid var(--line);
}

.rp-section-subhead{
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    margin-bottom:10px;
}

/* --- Sales chart --- */
.rp-sales-chart{
    display:grid;
    gap:6px;
}

.rp-sales-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.rp-sales-date{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    min-width:40px;
}

.rp-sales-bar-wrap{
    flex:1;
    height:24px;
    background:var(--bg2);
    border-radius:6px;
    overflow:hidden;
}

.rp-sales-bar{
    height:100%;
    background:linear-gradient(90deg,var(--brand),#d48a1a);
    border-radius:6px;
    display:flex;
    align-items:center;
    padding:0 8px;
    transition:width .4s ease;
    min-width:4px;
}

.rp-sales-bar-val{
    font-size:10px;
    font-weight:800;
    color:#090d16;
    white-space:nowrap;
}

.rp-sales-stat{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    min-width:30px;
    text-align:right;
}

.rp-sales-stat.success{color:var(--green);}
.rp-sales-stat.danger{color:var(--red);}

/* --- Bar rows --- */
.rp-bar-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.rp-bar-label{
    font-size:12px;
    font-weight:700;
    min-width:80px;
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--muted);
}

.rp-bar-track{
    flex:1;
    height:20px;
    background:var(--bg2);
    border-radius:6px;
    overflow:hidden;
}

.rp-bar-fill{
    height:100%;
    border-radius:6px;
    transition:width .4s ease;
    min-width:4px;
}

.rp-bar-gold{background:linear-gradient(90deg,var(--brand),#d48a1a);}
.rp-bar-red{background:var(--red);}
.rp-bar-green{background:var(--green);}
.rp-bar-blue{background:var(--blue);}

.rp-bar-value{
    font-size:12px;
    font-weight:700;
    min-width:60px;
    text-align:right;
    color:var(--text);
    white-space:nowrap;
}

/* --- Profit section --- */
.rp-profit-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.rp-profit-date{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    min-width:40px;
}

.rp-profit-bars{
    flex:1;
    display:grid;
    gap:3px;
}

.rp-profit-bar-wrap{
    height:10px;
    background:var(--bg2);
    border-radius:4px;
    overflow:hidden;
}

.rp-profit-bar{
    height:100%;
    border-radius:4px;
    transition:width .4s ease;
}

.rp-profit-rev{background:var(--brand);}
.rp-profit-exp{background:var(--red);}

.rp-profit-val{
    font-size:13px;
    font-weight:900;
    min-width:70px;
    text-align:right;
}

.rp-profit-summary{
    display:flex;
    gap:16px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
}

.rp-ps-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:var(--muted);
    font-weight:600;
}

.rp-ps-dot{
    width:10px;
    height:10px;
    border-radius:3px;
}

.rp-ps-dot.rev{background:var(--brand);}
.rp-ps-dot.exp{background:var(--red);}

/* --- Stat rows --- */
.rp-stat-row{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:var(--muted);
}

.rp-stat-row strong{
    font-weight:700;
}

.rp-text-green{color:var(--green) !important;}
.rp-text-red{color:var(--red) !important;}
.rp-text-amber{color:var(--amber) !important;}
.rp-text-blue{color:var(--blue) !important;}

/* --- Meal rows --- */
.rp-meal-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.rp-meal-rank{
    font-size:13px;
    font-weight:900;
    color:var(--brand);
    min-width:24px;
}

.rp-meal-body{
    flex:1;
    min-width:0;
}

.rp-meal-name{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--text);
    margin-bottom:4px;
}

.rp-meal-stats{
    text-align:right;
    flex:0 0 auto;
}

.rp-meal-qty{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.rp-meal-rev{
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:2px;
}

/* --- Empty state --- */
.rp-empty{
    text-align:center;
    padding:24px;
    color:var(--muted);
    font-size:14px;
}