:root{color-scheme:dark;--bg:#08090c;--surface:#111318;--surface-2:#17191f;--line:#272a31;--line-soft:#1e2127;--text:#f4f5f7;--muted:#969ba5;--accent:#ff7618;--accent-2:#ff9a3d;--success:#42d68a;--danger:#ff6b61;--warning:#ffc067;--radius:16px;--container:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 85% -10%,rgba(255,118,24,.08),transparent 28%),var(--bg);color:var(--text);font-family:"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.site-header{position:sticky;top:0;z-index:50;height:66px;border-bottom:1px solid var(--line-soft);background:rgba(8,9,12,.92);backdrop-filter:blur(16px)}.header-inner{width:min(var(--container),calc(100% - 32px));height:100%;margin:auto;display:flex;align-items:center;gap:26px}.site-brand{display:flex;align-items:center;gap:10px;min-width:max-content}.brand-logo{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border:1px solid #ffffff12;border-radius:11px;background:#15171c}.brand-logo img{width:100%;height:100%;object-fit:cover}.brand-fallback{color:var(--accent);font-size:22.1px}.brand-copy{display:grid;line-height:1.15}.brand-copy small{color:#777d87;font-size:13px;letter-spacing:.04em}.brand-copy strong{font-size:18.2px}.desktop-nav{display:flex;align-items:center;gap:5px;margin-inline-end:auto}.desktop-nav a{padding:7px 11px;border-radius:9px;color:#aeb2b9;font-size:16.9px;font-weight:600}.desktop-nav a:hover,.desktop-nav a.active{background:#ffffff08;color:#fff}.desktop-nav a.active{box-shadow:inset 0 -2px var(--accent)}.header-actions{display:flex;align-items:center;gap:8px}.icon-action,.account-action{height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:#121419;color:#d9dce1}.icon-action{width:38px}.icon-action svg,.account-action svg{width:19px;height:19px}.account-action{gap:7px;padding:0 12px;font-size:15.6px;font-weight:700}.login-action{height:38px;display:flex;align-items:center;padding:0 15px;border-radius:10px;background:var(--accent);color:#17100a;font-size:15.6px;font-weight:900}.header-balance{display:grid;padding:2px 11px;border-inline-start:1px solid var(--line)}.header-balance span{color:#858a94;font-size:11.7px}.header-balance strong{font-size:16.9px}.page-shell{width:min(var(--container),calc(100% - 32px));min-height:calc(100vh - 124px);margin:auto;padding:24px 0 54px}.site-footer{border-top:1px solid var(--line-soft);color:#777c85;font-size:15.6px}.site-footer>div{width:min(var(--container),calc(100% - 32px));min-height:58px;margin:auto;display:flex;align-items:center;justify-content:space-between}.site-footer a:hover{color:#fff}.mobile-bottom-nav{display:none}.auth-card,.shell{width:min(460px,100%);margin:32px auto;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 22px 60px #0007}.auth-card.wide{width:min(700px,100%)}.auth-card h1{margin:5px 0 20px;font-size:35.1px}.auth-card>p,.shell p{color:var(--muted)}.eyebrow,.hero-kicker{margin:0;color:var(--accent)!important;font-size:14.3px;font-weight:800;letter-spacing:.1em}label{display:block;margin:13px 0;color:#d9dce1;font-size:16.9px}input,select,textarea{width:100%;min-height:46px;margin-top:6px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#0b0c10;color:#fff;outline:none}textarea{padding:12px}input:focus,select:focus,textarea:focus{border-color:#ff761880;box-shadow:0 0 0 3px #ff761812}button,.button-link{min-height:46px;border:0;border-radius:11px;background:var(--accent);color:#181008;font-weight:900;cursor:pointer}.button-link{display:inline-flex;align-items:center;justify-content:center;padding:0 18px}.auth-card button{width:100%}.alert{margin:10px 0;padding:11px 13px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff08;font-size:16.9px}.alert.error,.error{border-color:#ff6b6133;background:#ff6b6112;color:#ffaaa4}.alert.success,.success{border-color:#42d68a33;background:#42d68a12;color:#91e5b8}.links,.switch{text-align:center;margin-top:16px!important}.links{display:flex;justify-content:space-between}.logout{margin-top:20px}.logout button{background:#ffffff0b;color:#fff;border:1px solid var(--line)}dl{display:grid;gap:8px}dl div{display:flex;justify-content:space-between;padding:11px;border-bottom:1px solid var(--line-soft)}dt{color:var(--muted)}dd{margin:0}.shell{text-align:center}
@media(max-width:820px){.desktop-nav{display:none}.header-inner{width:min(100% - 24px,var(--container))}.brand-copy small{display:none}.header-actions{margin-inline-start:auto}.header-balance{display:none}.page-shell{width:min(100% - 24px,var(--container));padding-top:18px;padding-bottom:94px}.site-footer{display:none}.mobile-bottom-nav{position:fixed;inset:auto 0 0;z-index:60;height:68px;padding:6px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:rgba(10,11,14,.97);backdrop-filter:blur(18px)}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#747984;font-size:13px;font-weight:700}.mobile-bottom-nav svg{width:20px;height:20px}.mobile-bottom-nav a.active{color:var(--accent)}body{padding-bottom:env(safe-area-inset-bottom)}}@media(max-width:430px){.site-header{height:60px}.brand-logo{width:34px;height:34px}.brand-copy strong{font-size:16.9px}.account-action span{display:none}.account-action{width:38px;padding:0}.login-action{padding:0 11px}.page-shell{width:calc(100% - 20px)}.auth-card,.shell{padding:23px 17px;margin:18px auto}.search-action{display:none}}

/* ===== Admin responsive navigation ===== */

.admin-menu-toggle{
    height:38px;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#15171c;
    color:#f2f3f5;
    font-size:15.6px;
    font-weight:800;
}

.admin-menu-toggle:hover{
    border-color:#ff761866;
    background:#1b1d23;
}

.admin-menu-icon{
    color:var(--accent);
    font-size:23.4px;
    line-height:1;
}

.admin-drawer-overlay{
    position:fixed;
    inset:0;
    z-index:79;
    background:rgba(0,0,0,.62);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
    backdrop-filter:blur(3px);
}

.admin-drawer-overlay.is-open{
    opacity:1;
    visibility:visible;
}

.admin-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:80;
    width:min(340px,88vw);
    padding-bottom:max(18px,env(safe-area-inset-bottom));
    overflow-y:auto;
    border-left:1px solid var(--line);
    background:#0d0f13;
    box-shadow:-20px 0 60px rgba(0,0,0,.55);
    transform:translateX(105%);
    transition:transform .24s ease;
}

.admin-drawer.is-open{
    transform:translateX(0);
}

body.admin-drawer-open{
    overflow:hidden;
}

.admin-drawer-head{
    min-height:72px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid var(--line-soft);
    background:#111318;
}

.admin-drawer-head div{
    display:grid;
    gap:1px;
}

.admin-drawer-head small{
    color:#777d87;
    font-size:13px;
}

.admin-drawer-head strong{
    font-size:20.8px;
}

.admin-drawer-close{
    width:38px;
    height:38px;
    min-height:38px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:#17191f;
    color:#fff;
    font-size:32.5px;
    line-height:1;
}

.admin-drawer-nav{
    display:grid;
    gap:4px;
    padding:12px;
}

.admin-drawer-nav a{
    min-height:45px;
    padding:0 13px;
    display:flex;
    align-items:center;
    border:1px solid transparent;
    border-radius:11px;
    color:#d5d8dd;
    font-size:16.9px;
    font-weight:700;
}

.admin-drawer-nav a:hover{
    border-color:#ffffff12;
    background:#ffffff08;
    color:#fff;
}

.admin-nav-label{
    margin:13px 8px 4px;
    color:#6f747e;
    font-size:13px;
    font-weight:800;
    letter-spacing:.05em;
}

@media(max-width:820px){
    .header-inner{
        gap:10px;
    }

    .admin-menu-toggle{
        margin-inline-start:auto;
    }

    .header-actions{
        gap:5px;
    }
}

@media(max-width:430px){
    .admin-menu-toggle{
        width:38px;
        padding:0;
    }

    .admin-menu-label{
        display:none;
    }

    .site-brand{
        gap:7px;
    }

    .brand-copy strong{
        white-space:nowrap;
    }
}

/* ===== Header cleanup ===== */

.brand-copy{
    display:flex;
    align-items:center;
}

.brand-copy strong{
    font-size:18.2px;
    white-space:nowrap;
}

@media(max-width:820px){

    /* الحساب موجود أصلاً بالشريط السفلي */
    .header-actions .account-action{
        display:none;
    }

    .mobile-bottom-nav{
        grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:430px){

    .site-brand{
        gap:8px;
    }

    .brand-copy strong{
        font-size:15.6px;
    }
}

/* Brand: Tech Line / Activation */
.brand-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    line-height:1.05;
}

.brand-copy strong{
    font-size:19.5px;
    font-weight:800;
    color:#fff;
}

.brand-copy small{
    display:block !important;
    margin-top:3px;
    font-size:13px;
    font-weight:700;
    color:var(--accent);
    letter-spacing:.08em;
}

@media(max-width:430px){
    .brand-copy strong{
        font-size:18.2px;
    }

    .brand-copy small{
        font-size:11.7px;
    }
}

/* Final Tech Line brand */
.brand-copy{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.brand-title{
    color:var(--accent);
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:19.5px;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
}

@media(max-width:430px){
    .brand-title{
        font-size:18.2px;
    }
}


/* =========================================
   Account page
   ========================================= */

.account-page{
    width:min(720px,100%);
    margin:0 auto;
    display:grid;
    gap:16px;
}

.account-profile-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0,rgba(255,118,24,.13),transparent 38%),
        var(--surface);
}

.account-avatar{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:grid;
    place-items:center;
    border:1px solid #ff76183d;
    border-radius:17px;
    background:#ff761812;
    color:var(--accent);
}

.account-avatar svg{
    width:28px;
    height:28px;
}

.account-profile-copy{
    min-width:0;
    flex:1;
}

.account-welcome{
    display:block;
    margin-bottom:2px;
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}

.account-profile-copy h1{
    margin:0;
    font-size:26px;
    line-height:1.35;
}

.account-profile-copy p{
    margin:3px 0 0;
    overflow:hidden;
    color:var(--muted);
    font-size:14.3px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.account-role-badge{
    padding:5px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#ffffff08;
    color:#aaaeb6;
    font-size:13px;
    font-weight:800;
}

.account-role-badge.admin{
    border-color:#ff761833;
    background:#ff761811;
    color:var(--accent);
}


.account-shortcuts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.account-shortcut{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
    transition:.18s ease;
}

.account-shortcut:hover{
    border-color:#ff761844;
    background:#15171d;
    transform:translateY(-1px);
}

.shortcut-icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#ffffff08;
    color:var(--accent);
}

.shortcut-icon svg{
    width:20px;
    height:20px;
}

.account-shortcut>span:last-child{
    min-width:0;
    display:grid;
}

.account-shortcut strong{
    font-size:16.9px;
}

.account-shortcut small{
    margin-top:1px;
    color:var(--muted);
    font-size:11.7px;
}

.admin-shortcut{
    border-color:#ff761827;
}


.account-info-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--surface);
}

.account-section-title{
    padding:13px 16px;
    border-bottom:1px solid var(--line-soft);
    background:#ffffff025;
    color:#f2f3f5;
    font-size:15.6px;
    font-weight:800;
}

.account-info-row{
    min-height:52px;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--line-soft);
}

.account-info-row:last-child{
    border-bottom:0;
}

.account-info-row>span{
    color:var(--muted);
    font-size:14.3px;
}

.account-info-row>strong{
    max-width:65%;
    overflow:hidden;
    color:#e6e8eb;
    font-size:15.6px;
    font-weight:700;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.account-email{
    direction:ltr;
}

.account-status{
    display:flex;
    align-items:center;
    gap:6px;
}

.account-status i{
    width:7px;
    height:7px;
    display:block;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 8px rgba(66,214,138,.45);
}


.account-logout{
    margin:1px 0 0;
}

.account-logout button{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid #ff6b6138;
    background:#ff6b610e;
    color:#ff827a;
}

.account-logout button:hover{
    background:#ff6b6118;
}

.account-logout svg{
    width:18px;
    height:18px;
}


@media(max-width:560px){

    .account-page{
        gap:12px;
    }

    .account-profile-card{
        padding:16px 14px;
        border-radius:17px;
    }

    .account-avatar{
        width:50px;
        height:50px;
        flex-basis:50px;
        border-radius:14px;
    }

    .account-avatar svg{
        width:24px;
        height:24px;
    }

    .account-profile-copy h1{
        font-size:22.1px;
    }

    .account-role-badge{
        position:absolute;
        top:10px;
        left:10px;
    }

    .account-shortcuts{
        gap:8px;
    }

    .account-shortcut{
        min-height:69px;
        padding:11px;
    }

    .shortcut-icon{
        width:35px;
        height:35px;
        flex-basis:35px;
    }

    .shortcut-icon svg{
        width:18px;
        height:18px;
    }

    .account-info-row{
        padding:9px 13px;
    }

}

/* ===== Final header controls ===== */

/* حسابي لا نحتاجه في الهيدر */
.header-actions .account-action{
    display:none !important;
}

/* زر الإدارة الجانبي يظهر فقط على الموبايل */
.admin-menu-toggle{
    display:none;
}

/* الرصيد ظاهر دائمًا */
.header-balance{
    display:grid !important;
    padding:2px 11px;
    border-inline-start:1px solid var(--line);
    white-space:nowrap;
}

@media(max-width:820px){

    .admin-menu-toggle{
        display:flex;
    }

    .header-balance{
        display:grid !important;
        padding:2px 8px;
        border-inline-start:0;
    }

    .header-balance span{
        font-size:10.4px;
    }

    .header-balance strong{
        font-size:15.6px;
    }

    .header-actions{
        margin-inline-start:auto;
        gap:6px;
    }
}

@media(max-width:430px){

    .admin-menu-toggle{
        display:flex;
        width:38px;
        min-width:38px;
        padding:0;
    }

    .header-balance{
        padding:0 5px;
    }
}

/* ===== ADMIN DRAWER FINAL FIX ===== */

.admin-drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:9998 !important;
    display:block !important;
    background:rgba(0,0,0,.65) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .2s ease,visibility .2s ease !important;
}

.admin-drawer-overlay.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.admin-drawer{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:9999 !important;

    width:min(340px,88vw) !important;
    height:100dvh !important;

    display:block !important;
    overflow-y:auto !important;

    background:#0d0f13 !important;
    border-left:1px solid var(--line) !important;

    transform:translateX(110%) !important;
    visibility:hidden !important;

    transition:
        transform .22s ease,
        visibility .22s ease !important;
}

.admin-drawer.is-open{
    transform:translateX(0) !important;
    visibility:visible !important;
}

body.admin-drawer-open{
    overflow:hidden !important;
}

/* Desktop */
.admin-menu-toggle{
    display:none !important;
}

/* Mobile */
@media(max-width:820px){

    .admin-menu-toggle{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        position:relative !important;
        z-index:100 !important;
        cursor:pointer !important;
    }

    .header-actions .account-action{
        display:none !important;
    }

    .header-balance{
        display:grid !important;
    }
}


/* =========================================
   Simple Admin Dashboard
   ========================================= */

.simple-admin{
    width:min(920px,100%);
    margin:auto;
    display:grid;
    gap:18px;
}

.simple-admin-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

.simple-admin-head span{
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}

.simple-admin-head h1{
    margin:2px 0 2px;
    font-size:32.5px;
}

.simple-admin-head p{
    margin:0;
    color:var(--muted);
    font-size:14.3px;
}


.simple-admin-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.simple-stat{
    min-height:85px;
    padding:13px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.simple-stat-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#ff761811;
    color:var(--accent);
}

.simple-stat-icon svg{
    width:20px;
    height:20px;
}

.simple-stat>div{
    min-width:0;
    display:grid;
}

.simple-stat strong{
    font-size:23.4px;
    line-height:1.2;
}

.simple-stat>div>span{
    margin-top:3px;
    color:var(--muted);
    font-size:11.7px;
}


.simple-admin-today{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.simple-admin-today>div{
    padding:14px 16px;
    display:grid;
    gap:3px;
    border-inline-end:1px solid var(--line-soft);
}

.simple-admin-today>div:last-child{
    border-inline-end:0;
}

.simple-admin-today span{
    color:var(--muted);
    font-size:13px;
}

.simple-admin-today strong{
    font-size:22.1px;
}

.simple-admin-today .profit{
    color:var(--success);
}


.simple-admin-section{
    display:grid;
    gap:10px;
}

.simple-section-title h2{
    margin:0;
    font-size:18.2px;
}

.simple-admin-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.simple-admin-action{
    min-height:68px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    transition:.15s ease;
}

.simple-admin-action:hover{
    border-color:#ff761844;
    background:#15171d;
}

.simple-admin-action.featured{
    border-color:#ff761838;
    background:
        linear-gradient(90deg,#ff76180b,transparent),
        var(--surface);
}

.action-icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#ffffff07;
    color:var(--accent);
}

.action-icon svg{
    width:20px;
    height:20px;
}

.simple-admin-action>div{
    min-width:0;
    flex:1;
    display:grid;
}

.simple-admin-action strong{
    font-size:15.6px;
}

.simple-admin-action small{
    margin-top:1px;
    color:var(--muted);
    font-size:11.7px;
}

.action-arrow{
    color:#646973;
    font-size:27.3px;
}


.simple-system-check{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid var(--line-soft);
    border-radius:12px;
    background:#ffffff03;
    color:#777c85;
    font-size:13px;
    font-weight:700;
}

.simple-system-check svg{
    width:16px;
    height:16px;
}


@media(max-width:700px){

    .simple-admin{
        gap:14px;
    }

    .simple-admin-head h1{
        font-size:27.3px;
    }

    .simple-admin-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .simple-stat{
        min-height:73px;
        padding:10px;
    }

    .simple-stat-icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .simple-stat strong{
        font-size:19.5px;
    }

    .simple-admin-today>div{
        padding:11px 10px;
    }

    .simple-admin-today strong{
        font-size:18.2px;
    }

    .simple-admin-actions{
        grid-template-columns:1fr;
    }

    .simple-admin-action{
        min-height:64px;
    }
}

@media(max-width:390px){

    .simple-stat-icon{
        display:none;
    }

    .simple-stat{
        min-height:65px;
    }

    .simple-admin-today span{
        font-size:10.4px;
    }

    .simple-admin-today strong{
        font-size:15.6px;
    }
}

/* =========================================
   Admin Orders
   ========================================= */

.orders-admin-page{
    width:min(1000px,100%);
    margin:auto;
    display:grid;
    gap:16px;
}

.orders-admin-head h1{
    margin:2px 0;
    font-size:31.2px;
}

.orders-admin-head p{
    margin:0;
    color:var(--muted);
    font-size:14.3px;
}


.orders-admin-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
}

.orders-admin-stats a{
    min-height:68px;
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--surface);
}

.orders-admin-stats a.active{
    border-color:#ff761855;
    background:#ff76180c;
}

.orders-admin-stats strong{
    font-size:23.4px;
}

.orders-admin-stats span{
    color:var(--muted);
    font-size:11.7px;
}

.orders-admin-stats a.active span{
    color:var(--accent);
}


.orders-admin-filter{
    display:grid;
    grid-template-columns:minmax(260px,1fr) 180px 90px auto;
    gap:8px;
    align-items:end;
    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.orders-search{
    position:relative;
}

.orders-search svg{
    position:absolute;
    top:50%;
    right:13px;
    width:17px;
    height:17px;
    color:#686d76;
    transform:translateY(-50%);
    pointer-events:none;
}

.orders-search input{
    margin:0;
    padding-right:40px;
}

.orders-admin-filter select{
    margin:0;
}

.orders-admin-filter button{
    min-height:46px;
}

.orders-clear-filter{
    min-height:46px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    font-size:14.3px;
}


.orders-admin-list{
    display:grid;
    gap:9px;
}

.admin-order-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:15px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.admin-order-main{
    min-width:0;
    display:grid;
    gap:12px;
}

.admin-order-title>div{
    display:flex;
    align-items:center;
    gap:8px;
}

.admin-order-number{
    color:var(--accent);
    font-size:14.3px;
    font-weight:800;
}

.admin-order-title h2{
    margin:4px 0 0;
    font-size:18.2px;
    line-height:1.45;
}

.order-status{
    padding:3px 7px;
    border-radius:999px;
    background:#ffffff08;
    color:#a8adb5;
    font-size:11.7px;
    font-weight:800;
}

.status-completed{
    background:#42d68a12;
    color:#72dfa5;
}

.status-processing,
.status-submitted,
.status-pending{
    background:#ffc06712;
    color:#ffc067;
}

.status-failed{
    background:#ff6b6112;
    color:#ff8d86;
}

.status-refunded{
    background:#ffffff0a;
    color:#adb2ba;
}

.status-provider_unknown{
    background:#ff761812;
    color:var(--accent);
}


.admin-order-data{
    display:grid;
    grid-template-columns:1.5fr .6fr 1fr;
    gap:12px;
}

.admin-order-data>div{
    min-width:0;
    display:grid;
}

.admin-order-data span{
    color:#737984;
    font-size:11.7px;
}

.admin-order-data strong{
    overflow:hidden;
    color:#dfe2e6;
    font-size:14.3px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-order-data small{
    overflow:hidden;
    color:#777d86;
    font-size:11.7px;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.admin-order-actions{
    display:flex;
    align-items:center;
}

.admin-order-actions a{
    min-height:40px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#ffffff05;
    color:#dddfe3;
    font-size:13px;
    font-weight:800;
}

.admin-order-actions a:hover{
    border-color:#ff761844;
}

.admin-order-actions svg{
    width:14px;
    height:14px;
}


.orders-empty{
    min-height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px dashed var(--line);
    border-radius:15px;
    color:var(--muted);
}

.orders-empty strong{
    color:#ddd;
    font-size:16.9px;
}

.orders-empty span{
    margin-top:3px;
    font-size:13px;
}


@media(max-width:700px){

    .orders-admin-page{
        gap:12px;
    }

    .orders-admin-head h1{
        font-size:26px;
    }

    .orders-admin-stats{
        grid-template-columns:repeat(3,1fr);
    }

    .orders-admin-stats a{
        min-height:58px;
        padding:7px;
    }

    .orders-admin-stats strong{
        font-size:19.5px;
    }

    .orders-admin-filter{
        grid-template-columns:1fr 1fr;
    }

    .orders-search{
        grid-column:1/-1;
    }

    .orders-admin-filter button{
        width:100%;
    }

    .admin-order-card{
        grid-template-columns:1fr;
        padding:13px;
    }

    .admin-order-data{
        grid-template-columns:1fr 1fr;
    }

    .admin-order-data>div:first-child{
        grid-column:1/-1;
    }

    .admin-order-actions a{
        width:100%;
        min-height:43px;
    }
}

@media(max-width:390px){

    .orders-admin-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .orders-admin-filter{
        grid-template-columns:1fr;
    }

    .orders-search{
        grid-column:auto;
    }

    .admin-order-data{
        grid-template-columns:1fr;
        gap:8px;
    }

    .admin-order-data>div:first-child{
        grid-column:auto;
    }
}

/* ===== Clean Admin Orders ===== */

.clean-orders-page{
    width:min(900px,100%);
    margin:auto;
    display:grid;
    gap:14px;
}

.clean-orders-head span{
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}

.clean-orders-head h1{
    margin:2px 0;
    font-size:29.9px;
}

.clean-orders-head p{
    margin:0;
    color:var(--muted);
    font-size:14.3px;
}

.clean-orders-tools{
    display:grid;
    grid-template-columns:1fr 180px;
    gap:8px;
}

.clean-orders-tools input,
.clean-orders-tools select{
    margin:0;
}

.clean-orders-search{
    position:relative;
}

.clean-orders-search svg{
    position:absolute;
    top:50%;
    right:13px;
    width:17px;
    height:17px;
    color:#6d727b;
    transform:translateY(-50%);
}

.clean-orders-search input{
    padding-right:40px;
}

.clean-orders-list{
    display:grid;
    gap:9px;
}

.clean-order-card{
    padding:14px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.clean-order-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.clean-order-number{
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}

.clean-order-top h2{
    margin:3px 0 0;
    font-size:18.2px;
}

.clean-order-status{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    background:#ffffff09;
    color:#aaa;
    font-size:11.7px;
    font-weight:800;
}

.status-completed{
    background:#42d68a14;
    color:#76dda8;
}

.status-processing,
.status-submitted,
.status-pending{
    background:#ffc06714;
    color:#ffc067;
}

.status-failed{
    background:#ff6b6114;
    color:#ff8a83;
}

.status-provider_unknown{
    background:#ff761814;
    color:var(--accent);
}

.clean-order-info{
    margin-top:12px;
    padding:11px 0;
    display:grid;
    grid-template-columns:1.4fr .6fr 1fr;
    gap:10px;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
}

.clean-order-info div{
    min-width:0;
    display:grid;
}

.clean-order-info span{
    color:#747983;
    font-size:11.7px;
}

.clean-order-info strong{
    overflow:hidden;
    color:#dddfe3;
    font-size:14.3px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.clean-order-details{
    min-height:42px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#eee;
    font-size:14.3px;
    font-weight:800;
}

.clean-order-details svg{
    width:16px;
    height:16px;
    color:var(--accent);
}

.clean-orders-empty,
.clean-orders-no-search{
    padding:35px 15px;
    border:1px dashed var(--line);
    border-radius:14px;
    color:var(--muted);
    text-align:center;
    font-size:14.3px;
}

@media(max-width:600px){

    .clean-orders-tools{
        grid-template-columns:1fr;
    }

    .clean-order-info{
        grid-template-columns:1fr 1fr;
    }

    .clean-order-info div:first-child{
        grid-column:1/-1;
    }

    .clean-order-top h2{
        font-size:16.9px;
    }
}

/* =========================================
   Clean Order Detail
   ========================================= */

.clean-order-detail{
    width:min(900px,100%);
    margin:auto;
    display:grid;
    gap:13px;
}

.detail-topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.detail-back{
    width:max-content;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:4px;
    color:#858a94;
    font-size:13px;
    font-weight:700;
}

.detail-back svg{
    width:14px;
    height:14px;
}

.detail-order-number{
    display:block;
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}

.detail-topbar h1{
    max-width:650px;
    margin:3px 0 0;
    font-size:27.3px;
    line-height:1.4;
}

.clean-detail-status{
    flex:0 0 auto;
    padding:5px 10px;
    border-radius:999px;
    background:#ffffff09;
    color:#aaaeb5;
    font-size:11.7px;
    font-weight:800;
}

.clean-detail-status.status-completed{
    background:#42d68a14;
    color:#78e1aa;
}

.clean-detail-status.status-processing,
.clean-detail-status.status-submitted,
.clean-detail-status.status-pending{
    background:#ffc06714;
    color:#ffc067;
}

.clean-detail-status.status-failed{
    background:#ff6b6114;
    color:#ff8b84;
}

.clean-detail-status.status-provider_unknown{
    background:#ff761814;
    color:var(--accent);
}


/* Summary */

.detail-summary{
    display:grid;
    grid-template-columns:1.4fr .7fr .7fr 1fr;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.detail-summary>div{
    min-width:0;
    padding:12px 14px;
    display:grid;
    gap:2px;
    border-inline-end:1px solid var(--line-soft);
}

.detail-summary>div:last-child{
    border-inline-end:0;
}

.detail-summary span{
    color:#777d86;
    font-size:11.7px;
}

.detail-summary strong{
    overflow:hidden;
    font-size:14.3px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.detail-profit{
    color:var(--success);
}


/* Sections */

.detail-section,
.technical-details{
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
}

.detail-section{
    padding:15px;
}

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

.detail-section-head h2{
    margin:0;
    font-size:16.9px;
}

.detail-section-head p{
    margin:2px 0 0;
    color:var(--muted);
    font-size:11.7px;
}


/* Customer fields */

.detail-fields{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

.detail-field{
    min-width:0;
    padding:11px;
    display:grid;
    gap:3px;
    border:1px solid var(--line-soft);
    border-radius:11px;
    background:#0c0e12;
}

.detail-field>span{
    color:#777d86;
    font-size:11.7px;
}

.detail-field strong{
    overflow-wrap:anywhere;
    font-size:15.6px;
}

.detail-field small{
    color:#7b8089;
    font-size:10.4px;
}

.sensitive-value{
    letter-spacing:.08em;
    color:#aaaeb4;
}


/* Activation result */

.result-section{
    border-color:#42d68a26;
}

.result-section pre{
    max-height:300px;
    margin:0;
    padding:14px;
    overflow:auto;
    border:1px solid #42d68a1f;
    border-radius:11px;
    background:#09100d;
    color:#b4eccd;
    font-family:inherit;
    font-size:15.6px;
    line-height:1.7;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.copy-result-button{
    width:auto;
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--line);
    background:#ffffff06;
    color:#ddd;
    font-size:11.7px;
}


/* Execution */

.execution-status-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.execution-status-grid>div{
    min-width:0;
    padding:10px;
    display:grid;
    gap:3px;
    border:1px solid var(--line-soft);
    border-radius:10px;
    background:#0c0e12;
}

.execution-status-grid span{
    color:#777d86;
    font-size:10.4px;
}

.execution-status-grid strong{
    overflow:hidden;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.detail-primary-action{
    margin-top:11px;
}

.detail-primary-action button{
    width:100%;
    min-height:44px;
}


/* Technical information */

.technical-details{
    overflow:hidden;
}

.technical-details summary{
    padding:13px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    color:#b8bbc1;
    font-size:14.3px;
    font-weight:800;
    list-style:none;
}

.technical-details summary::-webkit-details-marker{
    display:none;
}

.technical-details summary span{
    color:#686e77;
    font-size:10.4px;
    font-weight:600;
}

.technical-details[open] summary{
    border-bottom:1px solid var(--line-soft);
}

.technical-grid{
    padding:12px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.technical-grid>div{
    min-width:0;
    padding:9px;
    display:grid;
    border-radius:9px;
    background:#0c0e12;
}

.technical-grid span,
.provider-safe-message span{
    color:#707681;
    font-size:10.4px;
}

.technical-grid strong,
.provider-safe-message strong{
    overflow-wrap:anywhere;
    font-size:11.7px;
}

.provider-safe-message{
    margin:0 12px 12px;
    padding:10px;
    display:grid;
    gap:3px;
    border-radius:9px;
    background:#ffffff04;
}


/* Reconciliation */

.reconcile-form{
    display:grid;
    gap:10px;
}

.reconcile-confirm{
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.reconcile-confirm input{
    width:18px;
    height:18px;
    min-height:auto;
    margin:0;
}

.reconcile-confirm span{
    font-size:13px;
}

.reconcile-form button{
    width:100%;
}


.detail-empty{
    grid-column:1/-1;
    padding:20px;
    color:var(--muted);
    text-align:center;
    font-size:13px;
}


@media(max-width:700px){

    .detail-topbar h1{
        font-size:23.4px;
    }

    .detail-summary{
        grid-template-columns:repeat(2,1fr);
    }

    .detail-summary>div{
        border-bottom:1px solid var(--line-soft);
    }

    .detail-summary>div:nth-child(2){
        border-inline-end:0;
    }

    .detail-summary>div:nth-last-child(-n+2){
        border-bottom:0;
    }

    .detail-fields{
        grid-template-columns:1fr;
    }

    .execution-status-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .technical-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:400px){

    .detail-topbar{
        display:grid;
    }

    .clean-detail-status{
        width:max-content;
    }

    .detail-summary{
        grid-template-columns:1fr;
    }

    .detail-summary>div{
        border-inline-end:0;
        border-bottom:1px solid var(--line-soft) !important;
    }

    .detail-summary>div:last-child{
        border-bottom:0 !important;
    }

    .execution-status-grid,
    .technical-grid{
        grid-template-columns:1fr;
    }
}

/* ===== Mobile header final order ===== */
@media(max-width:820px){

    .header-actions{
        margin-inline-start:auto !important;
        display:flex !important;
        align-items:center !important;
        gap:7px !important;

        /* menu left - balance right */
        direction:ltr !important;
    }

    .admin-menu-toggle{
        display:flex !important;
        order:1 !important;
        flex:0 0 38px !important;
        width:38px !important;
        min-width:38px !important;
    }

    .header-balance{
        display:grid !important;
        order:2 !important;
        direction:rtl !important;
        text-align:right !important;
        padding:0 6px !important;
        border:0 !important;
    }

    .header-actions .account-action{
        display:none !important;
    }
}

/* ===== Fix mobile header position ===== */
@media(max-width:820px){

    .header-actions{
        display:flex !important;
        align-items:center !important;
        gap:7px !important;

        /* دفع المجموعة كلها لأقصى اليسار */
        margin-right:auto !important;
        margin-left:0 !important;
        margin-inline-start:unset !important;
        margin-inline-end:unset !important;

        /* ترتيب داخلي: القائمة يسار والرصيد يمينها */
        direction:ltr !important;
    }

    .admin-menu-toggle{
        order:1 !important;
        width:38px !important;
        min-width:38px !important;
        flex:0 0 38px !important;
    }

    .header-balance{
        order:2 !important;
        direction:rtl !important;
        text-align:right !important;
        margin:0 !important;
    }
}

/* ===== FINAL MOBILE HEADER POSITION ===== */
@media(max-width:820px){

    .header-inner{
        direction:rtl !important;
    }

    .header-actions{
        display:flex !important;
        align-items:center !important;
        gap:7px !important;

        /* دفع الرصيد والقائمة إلى أقصى اليسار */
        margin:0 !important;
        margin-right:auto !important;
        margin-left:0 !important;

        /* القائمة أقصى اليسار والرصيد على يمينها */
        direction:rtl !important;
        flex-direction:row-reverse !important;
    }

    .admin-menu-toggle{
        order:initial !important;
        width:38px !important;
        min-width:38px !important;
        flex:0 0 38px !important;
        margin:0 !important;
    }

    .header-balance{
        order:initial !important;
        display:grid !important;
        margin:0 !important;
        padding:0 5px !important;
        text-align:right !important;
        direction:rtl !important;
    }
}

/* =========================================
   LIGHT / DARK THEME
   ========================================= */

.theme-toggle{
    width:38px;
    height:38px;
    min-height:38px;
    flex:0 0 38px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
}

.theme-toggle svg{
    width:18px;
    height:18px;
}

.theme-icon-sun{
    display:none;
}

html[data-theme="light"] .theme-icon-moon{
    display:none;
}

html[data-theme="light"] .theme-icon-sun{
    display:block;
}


/* LIGHT VARIABLES */

html[data-theme="light"]{
    color-scheme:light;

    --bg:#f4f6f9;
    --surface:#ffffff;
    --surface-2:#f7f8fa;

    --line:#dfe3e8;
    --line-soft:#e9ecf0;

    --text:#17191d;
    --muted:#747b85;

    --accent:#ff7618;
    --accent-2:#ff8d32;

    --success:#15975a;
    --danger:#d84b43;
    --warning:#b97900;
}


/* MAIN PAGE */

html[data-theme="light"] body{
    background:
        radial-gradient(circle at 85% -10%,rgba(255,118,24,.08),transparent 28%),
        var(--bg);
    color:var(--text);
}

html[data-theme="light"] .site-header{
    border-bottom-color:#e6e9ed;
    background:rgba(255,255,255,.94);
}

html[data-theme="light"] .brand-logo{
    border-color:#e4e7eb;
    background:#fff;
}

html[data-theme="light"] .brand-title{
    color:var(--accent);
}

html[data-theme="light"] .desktop-nav a{
    color:#666d77;
}

html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .desktop-nav a.active{
    background:#f1f3f6;
    color:#111318;
}


/* HEADER BUTTONS */

html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .admin-menu-toggle,
html[data-theme="light"] .account-action{
    border-color:#dfe3e8;
    background:#fff;
    color:#202329;
}

html[data-theme="light"] .header-balance span{
    color:#777e87;
}

html[data-theme="light"] .header-balance strong{
    color:#17191d;
}


/* DRAWER */

html[data-theme="light"] .admin-drawer{
    border-left-color:#dfe3e8 !important;
    background:#ffffff !important;
    color:#17191d;
}

html[data-theme="light"] .admin-drawer-head{
    border-bottom-color:#e7eaee;
    background:#f8f9fb;
}

html[data-theme="light"] .admin-drawer-close{
    border-color:#dfe3e8;
    background:#fff;
    color:#202329;
}

html[data-theme="light"] .admin-drawer-nav a{
    color:#434951;
}

html[data-theme="light"] .admin-drawer-nav a:hover{
    border-color:#e1e5e9;
    background:#f4f6f8;
    color:#111;
}


/* INPUTS */

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
    border-color:#dfe3e8;
    background:#fff;
    color:#17191d;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
    color:#989ea6;
}


/* GENERAL CARDS */

html[data-theme="light"] .auth-card,
html[data-theme="light"] .shell,
html[data-theme="light"] .simple-stat,
html[data-theme="light"] .simple-admin-today,
html[data-theme="light"] .simple-admin-action,
html[data-theme="light"] .account-profile-card,
html[data-theme="light"] .account-shortcut,
html[data-theme="light"] .account-info-card,
html[data-theme="light"] .clean-order-card,
html[data-theme="light"] .detail-section,
html[data-theme="light"] .technical-details{
    border-color:#e0e4e8;
    background:#fff;
    box-shadow:0 5px 18px rgba(20,25,35,.04);
}


/* MOBILE BOTTOM NAV */

html[data-theme="light"] .mobile-bottom-nav{
    border-top-color:#dfe3e8;
    background:rgba(255,255,255,.97);
}

html[data-theme="light"] .mobile-bottom-nav a{
    color:#7b8189;
}

html[data-theme="light"] .mobile-bottom-nav a.active{
    color:var(--accent);
}


/* TEXT */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong{
    color:#17191d;
}


/* STATUS / LOGOUT KEEP THEIR COLORS */

html[data-theme="light"] .account-logout button{
    background:#fff3f2;
}


@media(max-width:820px){

    .header-actions{
        margin-right:auto !important;
        margin-left:0 !important;
        display:flex !important;
        align-items:center !important;
        gap:6px !important;
        flex-direction:row-reverse !important;
    }

    .theme-toggle{
        display:grid !important;
    }

}

/* ===== Drawer Preferences ===== */

.admin-menu-preferences{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line-soft);
}

.admin-pref-title{
    margin:0 8px 8px;
    color:#6f747e;
    font-size:13px;
    font-weight:800;
}

.drawer-theme-toggle{
    width:100%;
    min-height:54px;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    text-align:right;
}

.drawer-pref-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#ff761811;
    color:var(--accent);
}

.drawer-pref-icon svg{
    width:18px;
    height:18px;
}

.drawer-pref-copy{
    display:grid;
    flex:1;
}

.drawer-pref-copy strong{
    font-size:14.3px;
}

.drawer-pref-copy small{
    color:var(--muted);
    font-size:10.4px;
}

.drawer-language{
    margin-top:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
}

.drawer-language-head{
    margin-bottom:9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.drawer-language-head strong{
    font-size:14.3px;
}

.drawer-language-head small{
    color:var(--muted);
    font-size:10.4px;
}

.language-buttons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    direction:ltr;
}

.language-buttons button{
    min-height:34px;
    padding:0;
    border:1px solid var(--line);
    border-radius:9px;
    background:#0c0e12;
    color:#9ca1aa;
    font-size:13px;
    font-weight:800;
}

.language-buttons button.active{
    border-color:#ff761855;
    background:#ff761814;
    color:var(--accent);
}

html[data-theme="light"] .language-buttons button{
    background:#f5f6f8;
}

html[data-theme="light"] .drawer-theme-toggle,
html[data-theme="light"] .drawer-language{
    background:#fff;
    border-color:#dfe3e8;
}


/* ========================================
   CLEAN PREFERENCES
   ======================================== */

.admin-menu-preferences{
    margin-top:15px;
    padding-top:10px;
    border-top:1px solid var(--line-soft);
}

.pref-row{
    width:100%;
    min-height:50px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--text);
}

.pref-row:hover{
    background:#ffffff06;
}

.pref-label{
    font-size:15.6px;
    font-weight:700;
}


/* LIGHT MODE SWITCH */

.theme-switch{
    position:relative;
    width:44px;
    height:24px;
    flex:0 0 44px;
    border-radius:999px;
    background:#30343b;
    transition:.2s ease;
    direction:ltr;
}

.theme-switch i{
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px #0005;
    transition:.2s ease;
}

html[data-theme="light"] .theme-switch{
    background:var(--accent);
}

html[data-theme="light"] .theme-switch i{
    transform:translateX(20px);
}


/* LANGUAGE */

.language-pref{
    position:relative;
}

.language-side{
    display:flex;
    align-items:center;
    gap:6px;
}

.language-side strong{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.language-side svg{
    width:15px;
    height:15px;
    color:#777d86;
    transition:transform .18s ease;
}

.language-toggle[aria-expanded="true"] .language-side svg{
    transform:rotate(180deg);
}


.language-menu{
    margin:0 7px 8px;
    padding:5px;
    display:grid;
    gap:3px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#0b0d11;
}

.language-menu[hidden]{
    display:none !important;
}

.language-menu button{
    width:100%;
    min-height:39px;
    padding:0 10px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#b7bbc2;
    text-align:start;
    font-size:14.3px;
    font-weight:700;
}

.language-menu button:hover{
    background:#ffffff07;
}

.language-menu button.active{
    background:#ff761812;
    color:var(--accent);
}


/* LIGHT */

html[data-theme="light"] .pref-row:hover{
    background:#f3f4f6;
}

html[data-theme="light"] .language-menu{
    border-color:#e1e4e8;
    background:#fff;
}

html[data-theme="light"] .language-menu button{
    color:#4e545d;
}

html[data-theme="light"] .language-menu button.active{
    color:var(--accent);
    background:#fff2e9;
}


/* ===== Account Dark Mode Toggle ===== */

.account-theme-shortcut{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    font:inherit;
    cursor:pointer;
    text-align:right;
}

.account-theme-copy{
    min-width:0;
    display:grid;
    flex:1;
}

.account-theme-switch{
    position:relative;
    width:42px;
    height:24px;
    flex:0 0 42px;
    margin-right:auto;
    border-radius:999px;
    background:#343840;
    transition:.2s ease;
    direction:ltr;
}

.account-theme-switch i{
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.25);
    transition:.2s ease;
}

html[data-theme="dark"] .account-theme-switch{
    background:var(--accent);
}

html[data-theme="dark"] .account-theme-switch i{
    transform:translateX(18px);
}

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

html[data-theme="light"] .account-theme-switch i{
    transform:translateX(0);
}


/* Desktop theme toggle beside balance */

.desktop-theme-toggle{
    width:36px;
    height:36px;
    min-width:36px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    color:#ff7618;
    cursor:pointer;
    transition:.2s ease;
}

.desktop-theme-toggle:hover{
    border-color:rgba(255,118,24,.4);
    background:rgba(255,118,24,.08);
}

.desktop-theme-toggle svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.desktop-theme-moon{
    display:none;
}

html[data-theme="light"] .desktop-theme-sun{
    display:none;
}

html[data-theme="light"] .desktop-theme-moon{
    display:block;
}

@media(max-width:820px){
    .desktop-theme-toggle{
        display:none !important;
    }
}


/* Desktop theme button */

.desktop-theme-button{
    width:34px;
    height:34px;
    min-width:34px;
    flex:0 0 34px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    background:rgba(255,255,255,.045);
    color:#ff7618;
    cursor:pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.desktop-theme-button:hover{
    background:rgba(255,118,24,.1);
    border-color:rgba(255,118,24,.28);
    transform:translateY(-1px);
}

.desktop-theme-button svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.desktop-theme-button .theme-icon-moon{
    display:none;
}

html[data-theme="light"] .desktop-theme-button{
    background:#fff;
    border-color:#e4e6e9;
    box-shadow:0 2px 8px rgba(20,25,35,.06);
}

html[data-theme="light"] .desktop-theme-button .theme-icon-sun{
    display:none;
}

html[data-theme="light"] .desktop-theme-button .theme-icon-moon{
    display:block;
}

@media(max-width:820px){
    .desktop-theme-button{
        display:none !important;
    }
}

/* =========================================================
   Admin Users
   ========================================================= */

.users-admin-page{
    max-width:1180px;
    margin:0 auto;
    padding-bottom:70px;
}

.users-admin-head{
    margin-bottom:18px;
}

.users-admin-head span,
.users-section-title>div>span{
    color:#ff7618;
    font-size:11.7px;
    font-weight:800;
}

.users-admin-head h1,
.user-profile-head h1{
    margin:3px 0;
    font-size:31.2px;
    font-weight:900;
}

.users-admin-head p,
.user-profile-head p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.users-message{
    margin-bottom:14px;
    padding:11px 13px;
    border:1px solid rgba(255,118,24,.25);
    border-radius:11px;
    background:rgba(255,118,24,.07);
    color:#ff8b39;
    font-size:13px;
}

.users-stats{
    margin-bottom:15px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.users-stats>div{
    padding:14px;
    display:grid;
    gap:4px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.users-stats span{
    color:var(--muted);
    font-size:10.4px;
}

.users-stats strong{
    font-size:23.4px;
    font-weight:900;
}

.create-user-panel{
    margin-bottom:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.create-user-panel summary{
    color:#ff7618;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.create-user-panel form{
    margin-top:15px;
}

.user-form-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.user-form-grid.two{
    grid-template-columns:repeat(2,1fr);
}

.users-admin-page label{
    display:grid;
    gap:6px;
    color:var(--muted);
    font-size:11.7px;
}

.users-admin-page input,
.users-admin-page select{
    width:100%;
    min-height:42px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface-2);
    color:var(--text);
    font:inherit;
    outline:none;
}

.users-admin-page input:focus,
.users-admin-page select:focus{
    border-color:rgba(255,118,24,.45);
}

.users-primary,
.users-secondary{
    min-height:39px;
    margin-top:11px;
    padding:0 15px;
    border:0;
    border-radius:9px;
    font:inherit;
    font-size:11.7px;
    font-weight:800;
    cursor:pointer;
}

.users-primary{
    background:#ff7618;
    color:#fff;
}

.users-secondary{
    border:1px solid rgba(255,118,24,.25);
    background:rgba(255,118,24,.08);
    color:#ff7618;
}

.users-filter{
    margin-bottom:12px;
    padding:8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px 150px 70px;
    gap:7px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.users-filter button{
    border:0;
    border-radius:9px;
    background:#ff7618;
    color:#fff;
    font-size:11.7px;
    font-weight:800;
}

.users-list{
    display:grid;
    gap:7px;
}

.user-admin-card{
    min-width:0;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
    transition:.18s ease;
}

.user-admin-card:hover{
    transform:translateY(-1px);
    border-color:rgba(255,118,24,.3);
}

.user-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(255,118,24,.1);
    color:#ff7618;
    font-size:19.5px;
    font-weight:900;
}

.user-avatar.large{
    width:58px;
    height:58px;
    flex-basis:58px;
    border-radius:16px;
    font-size:26px;
}

.user-main{
    min-width:0;
    flex:1;
}

.user-main>span{
    display:block;
    margin-top:2px;
    overflow:hidden;
    color:var(--muted);
    font-size:10.4px;
    text-overflow:ellipsis;
}

.user-name-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.user-name-row strong{
    font-size:14.3px;
}

.user-role,
.user-blocked{
    padding:4px 6px;
    border-radius:999px;
    font-size:9.1px;
    font-weight:800;
}

.user-role{
    background:rgba(120,128,140,.1);
    color:var(--muted);
}

.user-role.admin{
    background:rgba(255,118,24,.11);
    color:#ff7618;
}

.user-blocked{
    background:rgba(235,70,70,.1);
    color:#e65d5d;
}

.user-mini-stats{
    margin-top:8px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.user-mini-stats small{
    color:var(--muted);
    font-size:9.1px;
}

.user-mini-stats b{
    margin-right:3px;
    color:var(--text);
}

.user-open{
    color:#ff7618;
    font-size:22.1px;
}

.users-empty{
    padding:25px;
    border:1px dashed var(--line);
    border-radius:13px;
    color:var(--muted);
    text-align:center;
    font-size:11.7px;
}


/* Detail */

.users-back{
    margin-bottom:13px;
    display:inline-flex;
    color:var(--muted);
    font-size:11.7px;
}

.user-profile-head{
    margin-bottom:14px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:13px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.user-profile-head h1{
    font-size:24.7px;
}

.user-profile-head small{
    color:var(--muted);
    font-size:10.4px;
}

.user-admin-actions{
    margin-bottom:16px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.user-setting-card{
    padding:15px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.user-setting-card h2{
    margin:0 0 13px;
    font-size:16.9px;
}

.user-setting-card form{
    display:grid;
    gap:10px;
}

.users-wallet-link{
    min-height:39px;
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:9px;
    color:var(--text);
    font-size:11.7px;
    font-weight:800;
}

.user-history-section{
    margin-bottom:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.users-section-title{
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:end;
}

.users-section-title h2{
    margin:2px 0 0;
    font-size:18.2px;
}

.users-section-title>strong{
    color:#ff7618;
}

.user-history-list{
    display:grid;
    gap:6px;
}

.user-history-row{
    padding:10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px 145px;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface-2);
    color:var(--text);
    text-decoration:none;
}

.user-history-row>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.user-history-row strong{
    overflow:hidden;
    font-size:11.7px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-history-row span,
.user-history-row time{
    color:var(--muted);
    font-size:9.1px;
}

.user-history-row b{
    color:#ff7618;
    font-size:11.7px;
}

.user-danger-zone{
    padding:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    border:1px solid rgba(225,70,70,.22);
    border-radius:14px;
    background:rgba(225,70,70,.045);
}

.user-danger-zone>div{
    display:grid;
    gap:3px;
}

.user-danger-zone strong{
    color:#e75e5e;
    font-size:13px;
}

.user-danger-zone span{
    color:var(--muted);
    font-size:10.4px;
}

.user-danger-zone button{
    min-height:36px;
    padding:0 13px;
    border:0;
    border-radius:9px;
    background:#c94444;
    color:#fff;
    font-size:10.4px;
    font-weight:800;
    cursor:pointer;
}


@media(max-width:820px){

    .users-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .user-form-grid,
    .user-form-grid.two{
        grid-template-columns:1fr;
    }

    .users-filter{
        grid-template-columns:1fr 1fr;
    }

    .users-filter input{
        grid-column:1/-1;
    }

    .users-filter button{
        min-height:42px;
    }

    .user-admin-actions{
        grid-template-columns:1fr;
    }

    .user-history-row{
        grid-template-columns:minmax(0,1fr) auto;
    }

    .user-history-row time{
        grid-column:1/-1;
    }

    .user-danger-zone{
        align-items:stretch;
        flex-direction:column;
    }

    .user-danger-zone button{
        width:100%;
    }

}

/* ===== Retail accounts + subscribers ===== */

.retail-service-item{
    margin:16px 0;
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
}

.retail-item-head,
.retail-users-head{
    margin-bottom:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.retail-item-head>div,
.retail-users-head>div{
    display:grid;
    gap:3px;
}

.retail-item-head span,
.retail-subtitle span,
.retail-users-head span{
    color:#ff7618;
    font-size:11.7px;
    font-weight:800;
}

.retail-item-head strong{
    font-size:18.2px;
}

.retail-remove-item{
    padding:7px 10px;
    border:1px solid rgba(220,70,70,.25);
    border-radius:8px;
    background:rgba(220,70,70,.06);
    color:#dc6262;
    font-size:10.4px;
    cursor:pointer;
}

.retail-service-fields{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:9px;
}

.retail-account-box,
.retail-users-box{
    margin-top:14px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-2);
}

.retail-subtitle{
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.retail-subtitle small{
    color:var(--muted);
    font-size:10.4px;
}

.retail-account-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.retail-users-head{
    margin-bottom:10px;
}

.retail-users-head strong{
    font-size:11.7px;
}

.retail-users-head strong b{
    color:#ff7618;
    font-size:18.2px;
}

.retail-add-user{
    min-height:34px;
    padding:0 11px;
    border:1px solid rgba(255,118,24,.3);
    border-radius:9px;
    background:rgba(255,118,24,.08);
    color:#ff7618;
    font-size:10.4px;
    font-weight:800;
    cursor:pointer;
}

.retail-add-user:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.retail-users-list{
    display:grid;
    gap:7px;
}

.retail-user-row{
    display:grid;
    grid-template-columns:32px 1.3fr 1fr 1.3fr 32px;
    align-items:end;
    gap:7px;
}

.retail-user-number{
    width:32px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(255,118,24,.09);
    color:#ff7618;
    font-size:13px;
    font-weight:900;
}

.retail-remove-user{
    width:32px;
    height:42px;
    padding:0;
    border:1px solid rgba(220,70,70,.18);
    border-radius:9px;
    background:rgba(220,70,70,.05);
    color:#dc6262;
    cursor:pointer;
}

@media(max-width:820px){

    .retail-service-fields,
    .retail-account-fields{
        grid-template-columns:1fr;
    }

    .retail-user-row{
        padding:10px;
        grid-template-columns:32px 1fr 32px;
        border:1px solid var(--line);
        border-radius:10px;
    }

    .retail-user-row label{
        grid-column:2;
    }

    .retail-user-number{
        grid-column:1;
        grid-row:1;
    }

    .retail-remove-user{
        grid-column:3;
        grid-row:1;
    }

}

/* =========================================================
   PRODUCT ADMIN V2 — CLEAN LAYOUT
   ========================================================= */

.product-admin-page{
    max-width:1400px;
    margin:0 auto;
}

.product-admin-page .page-heading{
    margin-bottom:22px;
}

.product-admin-page .page-heading h1{
    margin:4px 0 6px;
    font-size:36.4px;
}

.product-admin-page .page-heading p{
    margin:0;
    color:var(--muted);
    font-size:18.2px;
}


/* ===== Main layout ===== */

.product-admin-layout{
    display:flex !important;
    flex-direction:column;
    gap:22px;
}


/* ===== Editor ===== */

.product-editor-card{
    position:static !important;
    width:100%;
    padding:24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 8px 28px rgba(0,0,0,.05);
}

.product-editor-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}

.product-editor-title>div:first-child{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.product-editor-title span{
    font-size:16.9px;
    color:var(--muted);
}

.product-editor-title strong{
    font-size:28.6px;
    line-height:1.4;
}

.product-edit-image{
    width:90px;
    height:90px;
    flex:0 0 90px;
    border-radius:16px;
    border:1px solid var(--line);
    background:var(--surface-2);
    overflow:hidden;
    display:grid;
    place-items:center;
}

.product-edit-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:7px;
}

.product-edit-image-empty{
    font-size:16.9px;
    color:var(--muted);
}


/* ===== Form ===== */

.product-editor-form{
    display:grid;
    gap:20px;
}

.editor-section{
    padding:0;
    border:0;
}

.editor-section + .editor-section{
    padding-top:20px;
    border-top:1px solid var(--line);
}

.editor-section>strong{
    display:block;
    margin-bottom:14px;
    font-size:20.8px;
    font-weight:800;
}

.editor-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.editor-wide{
    grid-column:1 / -1;
}

.product-editor-form label{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:var(--text);
    font-size:16.9px;
    font-weight:700;
}

.product-editor-form input,
.product-editor-form select,
.product-editor-form textarea{
    width:100%;
    min-height:48px;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--surface-2);
    color:var(--text);
    font:inherit;
    font-weight:500;
    outline:none;
    transition:.18s ease;
}

.product-editor-form textarea{
    min-height:120px;
    resize:vertical;
}

.product-editor-form input:focus,
.product-editor-form select:focus,
.product-editor-form textarea:focus{
    border-color:#ff7618;
    box-shadow:0 0 0 3px rgba(255,118,24,.08);
}


/* ===== Price area ===== */

.price-editor-section{
    padding:18px !important;
    border:1px solid rgba(255,118,24,.18) !important;
    border-radius:14px;
    background:rgba(255,118,24,.025);
}

.supplier-cost-note{
    margin:0 0 16px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--surface-2);
}

.supplier-cost-note span{
    font-size:16.9px;
    color:var(--muted);
}

.supplier-cost-note b{
    font-size:22.1px;
}

.supplier-cost-note small{
    width:100%;
    font-size:15.6px;
    color:var(--muted);
}

.money-input{
    position:relative;
}

.money-input>span{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:19.5px;
    font-weight:800;
    color:var(--muted);
    z-index:2;
}

.money-input input{
    padding-left:34px;
    direction:ltr;
    text-align:left;
    font-size:20.8px;
    font-weight:800;
}

.vip-price{
    padding:14px;
    border-radius:12px;
    background:rgba(229,166,0,.055);
}

.vip-price input{
    border-color:rgba(229,166,0,.3);
}

.vip-price small{
    font-size:14.3px;
    color:var(--muted);
}


/* ===== Upload ===== */

.product-upload-box{
    min-height:105px;
    padding:20px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    border:2px dashed rgba(255,118,24,.28);
    border-radius:14px;
    background:rgba(255,118,24,.025);
    cursor:pointer;
    transition:.18s ease;
}

.product-upload-box:hover{
    border-color:#ff7618;
    background:rgba(255,118,24,.05);
}

.product-upload-box input{
    display:none;
}

.product-upload-box span{
    font-size:18.2px;
    color:#ff7618;
    font-weight:800;
}

.product-upload-box small{
    font-size:15.6px;
    color:var(--muted);
}


/* ===== Active switch ===== */

.product-active-switch{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:12px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-2);
}

.product-active-switch input{
    width:20px !important;
    height:20px !important;
    min-height:0 !important;
    flex:0 0 20px;
}

.product-active-switch span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.product-active-switch strong{
    font-size:18.2px;
}

.product-active-switch small{
    font-size:15.6px;
    color:var(--muted);
}

.product-save-button{
    min-height:52px;
    width:100%;
    font-size:19.5px;
    font-weight:800;
}


/* ===== Products list ===== */

.product-admin-list{
    width:100%;
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 8px 28px rgba(0,0,0,.04);
}

.product-admin-search{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:10px;
    margin-bottom:20px;
}

.product-admin-search input{
    min-height:48px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--surface-2);
    color:var(--text);
    font-size:18.2px;
    outline:none;
}

.product-admin-search input:focus{
    border-color:#ff7618;
}

.product-admin-search button,
.product-admin-search a{
    min-height:48px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--surface-2);
    color:var(--text);
    text-decoration:none;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.admin-products-count{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:14px;
}

.admin-products-count strong{
    font-size:28.6px;
    color:#ff7618;
}

.admin-products-count span{
    font-size:16.9px;
    color:var(--muted);
}


/* ===== Product row ===== */

.admin-product-cards{
    display:grid;
    gap:10px;
}

.admin-product-card{
    display:grid;
    grid-template-columns:78px minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface-2);
    transition:.18s ease;
}

.admin-product-card:hover{
    border-color:rgba(255,118,24,.28);
    transform:translateY(-1px);
}

.admin-product-card.is-disabled{
    opacity:.6;
}

.admin-product-thumb{
    width:78px;
    height:78px;
    border-radius:12px;
    background:var(--surface);
    overflow:hidden;
    display:grid;
    place-items:center;
}

.admin-product-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:6px;
}

.admin-product-main{
    display:grid;
    gap:12px;
    min-width:0;
}

.admin-product-name{
    display:grid;
    gap:4px;
}

.admin-product-name span{
    font-size:15.6px;
    color:#ff7618;
    font-weight:700;
}

.admin-product-name strong{
    font-size:19.5px;
    white-space:normal;
    overflow:visible;
}

.admin-product-prices{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
}

.admin-product-prices>div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.admin-product-prices span{
    font-size:14.3px;
    color:var(--muted);
}

.admin-product-prices strong{
    font-size:18.2px;
}

.admin-product-prices .vip strong{
    color:#d99b00;
}

.admin-product-actions{
    min-width:95px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:9px;
}

.admin-product-actions .ghost-button{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15.6px;
}

.product-state{
    padding:6px 10px;
    text-align:center;
    border-radius:999px;
    font-size:14.3px;
    font-weight:800;
}

.product-state.active{
    color:#2cac6b;
    background:rgba(44,172,107,.1);
}

.product-state.disabled{
    color:#cf5e5e;
    background:rgba(207,94,94,.1);
}


/* ===== Responsive ===== */

@media(max-width:700px){

    .product-editor-card,
    .product-admin-list{
        padding:15px;
        border-radius:14px;
    }

    .product-editor-title strong{
        font-size:23.4px;
    }

    .product-edit-image{
        width:65px;
        height:65px;
        flex-basis:65px;
    }

    .editor-grid{
        grid-template-columns:1fr;
    }

    .editor-wide{
        grid-column:auto;
    }

    .product-admin-search{
        grid-template-columns:1fr 1fr;
    }

    .product-admin-search input{
        grid-column:1/-1;
    }

    .admin-product-card{
        grid-template-columns:64px minmax(0,1fr);
        gap:12px;
    }

    .admin-product-thumb{
        width:64px;
        height:64px;
    }

    .admin-product-actions{
        grid-column:1/-1;
        flex-direction:row;
        justify-content:flex-end;
        align-items:center;
    }

    .admin-product-actions .ghost-button{
        min-width:90px;
    }

    .admin-product-prices{
        gap:18px;
    }

    .product-admin-page .page-heading h1{
        font-size:29.9px;
    }
}

/* =========================================================
   PRODUCT ADMIN V3 — COMPACT CARDS
   ========================================================= */

.product-admin-page{
    width:100%;
    max-width:1500px;
    margin:0 auto;
}


/* ===== Product list container ===== */

.product-admin-list{
    padding:18px !important;
}


/* ===== Cards grid ===== */

.product-admin-page .admin-product-cards{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
}


/* ===== Product card ===== */

.product-admin-page .admin-product-card{
    min-width:0;
    padding:13px !important;

    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    grid-template-areas:
        "image title"
        "prices prices"
        "actions actions";

    gap:10px 12px !important;

    align-items:center !important;

    border:1px solid var(--line) !important;
    border-radius:14px !important;

    background:var(--surface-2) !important;

    box-shadow:none !important;
    transform:none !important;
}


/* ===== SMALL IMAGE ===== */

.product-admin-page .admin-product-thumb{
    grid-area:image;

    width:46px !important;
    height:46px !important;

    min-width:46px !important;
    min-height:46px !important;

    border-radius:10px !important;

    background:var(--surface) !important;

    overflow:hidden;
}

.product-admin-page .admin-product-thumb img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;

    padding:5px !important;
}


/* ===== Product name ===== */

.product-admin-page .admin-product-main{
    display:contents !important;
}

.product-admin-page .admin-product-name{
    grid-area:title;

    min-width:0;

    display:flex !important;
    flex-direction:column;

    gap:3px !important;
}

.product-admin-page .admin-product-name span{
    font-size:13px !important;
    color:#ff7618;
    font-weight:700;
}

.product-admin-page .admin-product-name strong{
    font-size:16.9px !important;
    line-height:1.45;

    white-space:normal !important;

    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


/* ===== Prices ===== */

.product-admin-page .admin-product-prices{
    grid-area:prices;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:6px !important;

    width:100%;
}

.product-admin-page .admin-product-prices>div{
    min-width:0;

    padding:7px 8px;

    display:flex !important;
    flex-direction:column;

    gap:2px !important;

    border-radius:8px;

    background:var(--surface);
}

.product-admin-page .admin-product-prices span{
    font-size:11.7px !important;
    color:var(--muted);
}

.product-admin-page .admin-product-prices strong{
    font-size:14.3px !important;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.product-admin-page .admin-product-prices .vip{
    background:rgba(229,166,0,.055);
}

.product-admin-page .admin-product-prices .vip strong{
    color:#d79c00;
}


/* ===== Actions ===== */

.product-admin-page .admin-product-actions{
    grid-area:actions;

    width:100%;
    min-width:0 !important;

    display:flex !important;
    flex-direction:row !important;

    justify-content:space-between !important;
    align-items:center !important;

    gap:8px !important;

    padding-top:9px;

    border-top:1px solid var(--line);
}

.product-admin-page .product-state{
    padding:5px 9px !important;

    font-size:11.7px !important;
}

.product-admin-page .admin-product-actions .ghost-button{
    min-height:32px !important;

    padding:0 13px !important;

    font-size:13px !important;
}


/* ===== Editor preview image also smaller ===== */

.product-admin-page .product-edit-image{
    width:58px !important;
    height:58px !important;

    min-width:58px !important;
    flex:0 0 58px !important;

    border-radius:11px !important;
}

.product-admin-page .product-edit-image img{
    padding:5px !important;
}


/* ===== Tablet ===== */

@media(max-width:1050px){

    .product-admin-page .admin-product-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    /*
     * نقلل الفراغ الكبير يمين ويسار الصفحة
     */

    .store-page.product-admin-page{
        width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:5px !important;
        padding-right:5px !important;
    }


    .product-admin-page .page-heading{
        margin-bottom:12px !important;
        padding-left:3px;
        padding-right:3px;
    }

    .product-admin-page .page-heading h1{
        font-size:27.3px !important;
    }

    .product-admin-page .page-heading p{
        font-size:14.3px !important;
    }


    /* Editor */

    .product-editor-card{
        padding:13px !important;
        border-radius:13px !important;
    }

    .product-editor-title{
        margin-bottom:14px !important;
        padding-bottom:12px !important;
    }

    .product-editor-title strong{
        font-size:20.8px !important;
    }

    .product-admin-page .product-edit-image{
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        flex-basis:50px !important;
    }

    .editor-section + .editor-section{
        padding-top:14px !important;
    }

    .editor-section>strong{
        margin-bottom:9px !important;
        font-size:16.9px !important;
    }

    .product-editor-form{
        gap:14px !important;
    }

    .editor-grid{
        gap:9px !important;
    }

    .product-editor-form input,
    .product-editor-form select{
        min-height:43px !important;
    }


    /* Product list */

    .product-admin-list{
        padding:8px !important;
        border-radius:13px !important;
    }


    .product-admin-search{
        gap:6px !important;
        margin-bottom:12px !important;
    }

    .product-admin-search input{
        min-height:42px !important;
    }

    .product-admin-search button,
    .product-admin-search a{
        min-height:38px !important;
        padding:0 12px !important;
        font-size:14.3px;
    }


    /*
     * كرتين جنب بعض على الهاتف
     */

    .product-admin-page .admin-product-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }


    .product-admin-page .admin-product-card{
        padding:9px !important;

        grid-template-columns:38px minmax(0,1fr) !important;

        gap:7px !important;

        border-radius:11px !important;
    }


    /* صورة صغيرة جدًا */

    .product-admin-page .admin-product-thumb{
        width:38px !important;
        height:38px !important;

        min-width:38px !important;
        min-height:38px !important;

        border-radius:8px !important;
    }

    .product-admin-page .admin-product-thumb img{
        padding:4px !important;
    }


    .product-admin-page .admin-product-name span{
        font-size:10.4px !important;
    }

    .product-admin-page .admin-product-name strong{
        font-size:13px !important;
        line-height:1.35;
    }


    /*
     * الأسعار داخل الكرت بشكل عمودي
     * حتى ما يصير ضغط على الشاشة
     */

    .product-admin-page .admin-product-prices{
        grid-template-columns:1fr !important;
        gap:4px !important;
    }

    .product-admin-page .admin-product-prices>div{
        padding:5px 6px !important;

        flex-direction:row !important;

        justify-content:space-between;
        align-items:center;
    }

    .product-admin-page .admin-product-prices span{
        font-size:10.4px !important;
    }

    .product-admin-page .admin-product-prices strong{
        font-size:11.7px !important;
    }


    .product-admin-page .admin-product-actions{
        padding-top:6px !important;
        gap:5px !important;
    }

    .product-admin-page .product-state{
        padding:4px 6px !important;
        font-size:10.4px !important;
    }

    .product-admin-page .admin-product-actions .ghost-button{
        min-height:28px !important;
        padding:0 9px !important;
        font-size:10.4px !important;
    }

}


/* شاشة هاتف ضيقة جدًا */

@media(max-width:360px){

    .product-admin-page .admin-product-cards{
        grid-template-columns:1fr !important;
    }

}

/* =========================================================
   PRODUCT ADMIN MODAL UI
   ========================================================= */

.product-admin-modal-page{
    width:100%;
    max-width:1450px;
    margin:0 auto;
}

.product-admin-top{
    margin-bottom:16px !important;
}

.product-admin-top h1{
    margin-bottom:4px;
}

.product-admin-top p{
    margin:0;
    font-size:15.6px;
    color:var(--muted);
}


/* Toolbar */

.product-list-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.product-modal-search{
    flex:1;
    display:flex;
    gap:7px;
}

.product-modal-search input{
    width:min(420px,100%);
    min-height:42px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    outline:none;
}

.product-modal-search button,
.product-modal-search a{
    min-height:42px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
    font:inherit;
    cursor:pointer;
}

.product-result-count{
    display:flex;
    align-items:baseline;
    gap:5px;
    white-space:nowrap;
}

.product-result-count strong{
    color:#ff7618;
    font-size:23.4px;
}

.product-result-count span{
    color:var(--muted);
    font-size:14.3px;
}


/* Cards */

.product-modal-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
}

.product-mini-card{
    appearance:none;
    width:100%;
    min-width:0;
    padding:10px;

    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:9px;
    align-items:center;

    border:1px solid var(--line);
    border-radius:12px;

    background:var(--surface);
    color:var(--text);

    text-align:right;
    font:inherit;

    cursor:pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.product-mini-card:hover{
    border-color:rgba(255,118,24,.4);
    background:rgba(255,118,24,.025);
}

.product-mini-card.is-disabled{
    opacity:.58;
}


/* tiny image */

.product-mini-image{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:8px;

    background:var(--surface-2);
}

.product-mini-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:4px;
}


/* info */

.product-mini-info{
    min-width:0;
    display:grid;
    gap:2px;
}

.product-mini-info>small{
    color:#ff7618;
    font-size:10.4px;
}

.product-mini-info>strong{
    min-width:0;

    font-size:14.3px;
    line-height:1.4;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.product-mini-prices{
    margin-top:3px;
    display:flex;
    gap:11px;
}

.product-mini-prices>span{
    display:flex;
    align-items:center;
    gap:4px;

    color:var(--muted);
    font-size:10.4px;
}

.product-mini-prices b{
    color:var(--text);
    font-size:11.7px;
}

.product-mini-prices .vip b{
    color:#d59a00;
}


/* side */

.product-mini-side{
    display:grid;
    justify-items:end;
    gap:5px;
}

.product-mini-side .product-state{
    padding:3px 6px !important;
    font-size:9.1px !important;
}

.mini-edit-label{
    color:#ff7618;
    font-size:10.4px;
    font-weight:800;
}


/* ======================================
   DIALOG
   ====================================== */

.product-edit-dialog{
    width:min(610px,calc(100% - 24px));
    max-width:610px;

    max-height:88dvh;

    padding:0;

    border:1px solid var(--line);
    border-radius:17px;

    background:var(--surface);
    color:var(--text);

    box-shadow:
        0 24px 80px rgba(0,0,0,.28);

    overflow:hidden;
}

.product-edit-dialog::backdrop{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(3px);
}

.product-dialog-shell{
    max-height:88dvh;
    overflow:auto;
}

.product-dialog-header{
    position:sticky;
    top:0;
    z-index:3;

    padding:12px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    border-bottom:1px solid var(--line);

    background:var(--surface);
}

.product-dialog-title{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
}


/* image stays VERY small */

.product-dialog-thumb{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:8px;

    background:var(--surface-2);
}

.product-dialog-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:3px;
}

.product-dialog-title>div:last-child{
    min-width:0;
    display:grid;
    gap:1px;
}

.product-dialog-title small{
    color:var(--muted);
    font-size:11.7px;
}

.product-dialog-title strong{
    max-width:420px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:18.2px;
}

.product-dialog-close{
    width:34px;
    height:34px;

    flex:0 0 34px;

    padding:0;

    border:0;
    border-radius:9px;

    background:var(--surface-2);
    color:var(--text);

    font-size:24.7px;
    cursor:pointer;
}


/* form */

.product-dialog-form{
    padding:14px;
}

.product-dialog-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.product-dialog-fields label{
    display:grid;
    gap:5px;

    color:var(--muted);
    font-size:11.7px;
    font-weight:700;
}

.product-dialog-fields .full{
    grid-column:1/-1;
}

.product-dialog-fields input,
.product-dialog-fields select,
.product-dialog-fields textarea{
    width:100%;
    min-height:41px;

    padding:8px 10px;

    border:1px solid var(--line);
    border-radius:9px;

    background:var(--surface-2);
    color:var(--text);

    font:inherit;
    font-size:14.3px;

    outline:none;
}

.product-dialog-fields textarea{
    min-height:82px;
    resize:vertical;
}

.product-dialog-fields input:focus,
.product-dialog-fields select:focus,
.product-dialog-fields textarea:focus{
    border-color:#ff7618;
}


/* money */

.modal-money-input{
    position:relative;
}

.modal-money-input>span{
    position:absolute;
    left:11px;
    top:50%;
    transform:translateY(-50%);

    color:var(--muted);
    font-size:14.3px;
}

.modal-money-input input{
    direction:ltr;
    padding-left:25px;
}


/* supplier cost */

.modal-supplier-cost{
    min-height:58px;
    padding:8px 10px;

    display:grid;
    align-content:center;
    gap:1px;

    border:1px solid var(--line);
    border-radius:9px;

    background:var(--surface-2);
}

.modal-supplier-cost span{
    color:var(--muted);
    font-size:10.4px;
}

.modal-supplier-cost strong{
    font-size:15.6px;
}

.modal-supplier-cost small{
    color:var(--muted);
    font-size:9.1px;
}


/* tiny image chooser */

.product-dialog-image-row{
    margin-top:11px;
    padding:9px;

    display:flex;
    align-items:center;
    gap:9px;

    border:1px solid var(--line);
    border-radius:10px;
}

.dialog-small-preview{
    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border-radius:7px;

    background:var(--surface-2);
}

.dialog-small-preview img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:3px;
}

.dialog-upload-button{
    cursor:pointer;
}

.dialog-upload-button input{
    display:none;
}

.dialog-upload-button span{
    display:inline-flex;
    min-height:32px;
    padding:0 10px;

    align-items:center;

    border:1px solid rgba(255,118,24,.25);
    border-radius:8px;

    color:#ff7618;
    background:rgba(255,118,24,.05);

    font-size:11.7px;
    font-weight:800;
}

.product-dialog-image-row>small{
    margin-right:auto;
    color:var(--muted);
    font-size:10.4px;
}


/* active */

.dialog-active-toggle{
    margin-top:10px;
    padding:9px 10px;

    display:flex;
    align-items:center;
    gap:8px;

    border:1px solid var(--line);
    border-radius:9px;

    font-size:13px;
}

.dialog-active-toggle input{
    width:16px;
    height:16px;
}


/* actions */

.product-dialog-actions{
    position:sticky;
    bottom:0;

    margin:14px -14px -14px;
    padding:10px 14px;

    display:flex;
    justify-content:flex-end;
    gap:7px;

    border-top:1px solid var(--line);

    background:var(--surface);
}

.product-dialog-actions button{
    min-height:38px;
}


/* tablet */

@media(max-width:1000px){

    .product-modal-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* mobile */

@media(max-width:650px){

    .store-page.product-admin-modal-page{
        width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;

        padding-left:4px !important;
        padding-right:4px !important;
    }

    .product-admin-top{
        padding:0 3px;
        margin-bottom:10px !important;
    }

    .product-admin-top h1{
        font-size:26px !important;
    }

    .product-admin-top p{
        font-size:13px;
    }


    .product-list-toolbar{
        padding:0 3px;
        align-items:flex-end;
    }

    .product-modal-search{
        min-width:0;
        flex:1;
        flex-wrap:wrap;
    }

    .product-modal-search input{
        width:100%;
        flex-basis:100%;
        min-height:39px;
    }

    .product-modal-search button,
    .product-modal-search a{
        min-height:34px;
        padding:0 10px;
        font-size:11.7px;
    }


    .product-modal-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;
    }

    .product-mini-card{
        padding:7px;

        grid-template-columns:30px minmax(0,1fr);

        gap:6px;

        border-radius:9px;
    }

    .product-mini-image{
        width:30px;
        height:30px;
    }

    .product-mini-side{
        grid-column:1/-1;

        display:flex;
        align-items:center;
        justify-content:space-between;

        padding-top:4px;

        border-top:1px solid var(--line);
    }

    .product-mini-info>small{
        font-size:9.1px;
    }

    .product-mini-info>strong{
        font-size:11.7px;
    }

    .product-mini-prices{
        display:grid;
        gap:1px;
    }

    .product-mini-prices>span{
        justify-content:space-between;
        font-size:9.1px;
    }

    .product-mini-prices b{
        font-size:10.4px;
    }


    /* modal almost full-width, no giant side spaces */

    .product-edit-dialog{
        width:calc(100% - 8px);
        max-width:none;

        max-height:94dvh;

        border-radius:14px;
    }

    .product-dialog-shell{
        max-height:94dvh;
    }

    .product-dialog-header{
        padding:9px 10px;
    }

    .product-dialog-thumb{
        width:32px;
        height:32px;
        flex-basis:32px;
    }

    .product-dialog-title strong{
        max-width:250px;
        font-size:15.6px;
    }

    .product-dialog-form{
        padding:10px;
    }

    .product-dialog-fields{
        grid-template-columns:1fr 1fr;
        gap:7px;
    }

    .product-dialog-fields input,
    .product-dialog-fields select{
        min-height:38px;
        padding:7px 8px;
        font-size:13px;
    }

    .product-dialog-fields textarea{
        min-height:70px;
    }

    .product-dialog-image-row{
        padding:7px;
    }

    .dialog-small-preview{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    .product-dialog-actions{
        margin:10px -10px -10px;
        padding:8px 10px;
    }
}


/* very narrow phones */

@media(max-width:350px){

    .product-modal-grid{
        grid-template-columns:1fr;
    }

    .product-dialog-fields{
        grid-template-columns:1fr;
    }

    .product-dialog-fields .full{
        grid-column:auto;
    }
}

/* =========================================================
   PRODUCT ADMIN — FINAL MOBILE FIX
   لا يؤثر على اللابتوب
   ========================================================= */

@media (max-width: 700px){

    /* ===== الصفحة نفسها ===== */

    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    .store-page.product-admin-modal-page{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        padding-left:8px !important;
        padding-right:8px !important;
    }


    /* ===== العنوان ===== */

    .product-admin-modal-page .page-heading.product-admin-top{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;

        gap:9px !important;

        margin:0 0 12px !important;
        padding:0 !important;
    }

    .product-admin-modal-page .page-heading h1{
        margin:0 0 3px !important;

        font-size:27.3px !important;
        line-height:1.35 !important;
    }

    .product-admin-modal-page .page-heading p{
        margin:0 !important;

        font-size:14.3px !important;
        line-height:1.6 !important;
    }

    .product-admin-modal-page [data-new-product]{
        width:100% !important;
        min-height:42px !important;

        justify-content:center !important;

        margin:0 !important;
    }


    /* ===== البحث ===== */

    .product-list-toolbar{
        width:100% !important;

        display:block !important;

        margin:0 0 12px !important;
        padding:0 !important;
    }

    .product-modal-search{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr auto auto !important;

        gap:6px !important;
    }

    .product-modal-search input{
        grid-column:1 / -1 !important;

        width:100% !important;
        min-width:0 !important;

        min-height:42px !important;

        margin:0 !important;
    }

    .product-modal-search button,
    .product-modal-search a{
        min-height:36px !important;

        padding:0 13px !important;

        font-size:13px !important;
    }

    .product-result-count{
        margin-top:8px !important;

        justify-content:flex-start !important;
    }


    /* =====================================================
       المنتجات
       كرت واحد فقط بالسطر
       ===================================================== */

    .product-modal-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;

        gap:7px !important;

        margin:0 !important;
        padding:0 !important;
    }


    .product-mini-card{
        width:100% !important;
        min-width:0 !important;

        padding:9px 10px !important;

        display:grid !important;

        grid-template-columns:36px minmax(0,1fr) auto !important;
        grid-template-areas:
            "image info side" !important;

        gap:9px !important;

        align-items:center !important;

        border-radius:11px !important;

        margin:0 !important;
    }


    /* ===== الصورة صغيرة ===== */

    .product-mini-image{
        grid-area:image !important;

        width:36px !important;
        height:36px !important;

        min-width:36px !important;
        min-height:36px !important;

        border-radius:8px !important;
    }

    .product-mini-image img{
        width:100% !important;
        height:100% !important;

        padding:3px !important;

        object-fit:contain !important;
    }


    /* ===== المعلومات ===== */

    .product-mini-info{
        grid-area:info !important;

        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;

        gap:2px !important;
    }

    .product-mini-info > small{
        font-size:10.4px !important;
        line-height:1.2 !important;
    }

    .product-mini-info > strong{
        width:100% !important;

        font-size:14.3px !important;
        line-height:1.4 !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }


    /* ===== الأسعار ===== */

    .product-mini-prices{
        width:100% !important;

        margin-top:3px !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;

        gap:4px 12px !important;
    }

    .product-mini-prices > span{
        width:auto !important;

        display:inline-flex !important;

        justify-content:flex-start !important;
        align-items:center !important;

        gap:3px !important;

        font-size:10.4px !important;
    }

    .product-mini-prices b{
        font-size:11.7px !important;
    }


    /* ===== الحالة + تعديل ===== */

    .product-mini-side{
        grid-area:side !important;

        display:flex !important;
        flex-direction:column !important;

        align-items:flex-end !important;
        justify-content:center !important;

        gap:5px !important;

        padding:0 !important;

        border:0 !important;
    }

    .product-mini-side .product-state{
        padding:3px 6px !important;

        font-size:9.1px !important;

        white-space:nowrap !important;
    }

    .mini-edit-label{
        font-size:10.4px !important;
        white-space:nowrap !important;
    }


    /* =====================================================
       نافذة التعديل
       Bottom Sheet
       ===================================================== */

    .product-edit-dialog{
        position:fixed !important;

        inset:auto 4px 4px 4px !important;

        width:auto !important;
        max-width:none !important;

        height:auto !important;
        max-height:94dvh !important;

        margin:0 !important;

        padding:0 !important;

        border-radius:16px !important;
    }

    .product-edit-dialog::backdrop{
        background:rgba(0,0,0,.65) !important;
    }


    .product-dialog-shell{
        width:100% !important;

        max-height:94dvh !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        overscroll-behavior:contain;
    }


    /* ===== رأس النافذة ===== */

    .product-dialog-header{
        padding:9px 10px !important;
    }

    .product-dialog-title{
        min-width:0 !important;
    }

    .product-dialog-thumb{
        width:32px !important;
        height:32px !important;

        min-width:32px !important;

        flex:0 0 32px !important;
    }

    .product-dialog-thumb img{
        padding:2px !important;
    }

    .product-dialog-title small{
        font-size:10.4px !important;
    }

    .product-dialog-title strong{
        max-width:calc(100vw - 110px) !important;

        font-size:14.3px !important;
    }

    .product-dialog-close{
        width:32px !important;
        height:32px !important;

        flex-basis:32px !important;
    }


    /* =====================================================
       الفورم داخل النافذة
       حقل واحد بالسطر
       ===================================================== */

    .product-dialog-form{
        padding:10px !important;
    }

    .product-dialog-fields{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;

        gap:8px !important;
    }

    .product-dialog-fields .full{
        grid-column:auto !important;
    }

    .product-dialog-fields label{
        width:100% !important;

        gap:4px !important;

        font-size:11.7px !important;
    }

    .product-dialog-fields input,
    .product-dialog-fields select,
    .product-dialog-fields textarea{
        width:100% !important;
        max-width:100% !important;

        min-height:41px !important;

        padding:8px 10px !important;

        font-size:14.3px !important;

        border-radius:8px !important;
    }

    .product-dialog-fields textarea{
        min-height:78px !important;
    }


    /* ===== تكلفة المورد ===== */

    .modal-supplier-cost{
        width:100% !important;

        min-height:51px !important;

        padding:7px 9px !important;
    }


    /* ===== الصورة داخل التعديل تبقى صغيرة جدًا ===== */

    .product-dialog-image-row{
        width:100% !important;

        margin-top:8px !important;
        padding:7px !important;

        display:flex !important;
        align-items:center !important;

        gap:7px !important;
    }

    .dialog-small-preview{
        width:30px !important;
        height:30px !important;

        min-width:30px !important;

        flex:0 0 30px !important;
    }

    .dialog-small-preview img{
        padding:2px !important;
    }

    .dialog-upload-button span{
        min-height:30px !important;

        padding:0 9px !important;

        font-size:10.4px !important;
    }

    .product-dialog-image-row > small{
        font-size:9.1px !important;
    }


    /* ===== نشط ===== */

    .dialog-active-toggle{
        margin-top:8px !important;

        padding:8px !important;

        font-size:13px !important;
    }


    /* ===== أزرار الحفظ ===== */

    .product-dialog-actions{
        position:sticky !important;
        bottom:0 !important;

        width:auto !important;

        margin:10px -10px -10px !important;
        padding:8px 10px !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;

        gap:7px !important;

        background:var(--surface) !important;
    }

    .product-dialog-actions button{
        width:100% !important;

        min-height:41px !important;

        justify-content:center !important;

        margin:0 !important;
    }

}


/* VIP PRICE DISPLAY */
.vip-price-wrap{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.vip-old-price{
    color:var(--muted);
    font-size:.78em;
    font-weight:600;
    opacity:.75;
    text-decoration-thickness:1.5px;
}

.vip-current-price{
    white-space:nowrap;
}

.vip-price-detail .vip-old-price{
    font-size:.9em;
}


/* TECHLINE_FONT_SCALE_130 */
html{
    font-size:130%;
}