:root{--accent:#1677ff;--page:#f5f7fb;--surface:#fff;--text:#172033;--muted:#6d7585;--line:#dfe4ec;--shadow:0 18px 50px rgba(30,55,90,.1)}html[data-theme=dark]{--page:#0d1118;--surface:#151b24;--text:#f5f7fb;--muted:#9ba5b5;--line:#293241;--shadow:none}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font-family:Arial,sans-serif}a{text-decoration:none;color:inherit}input,select,button{font:inherit}.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(480px,100%);padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-brand{font-weight:900;font-size:24px}.auth-brand strong{color:var(--accent)}.auth-card h1{font-size:44px}.auth-card form{display:grid;gap:15px;margin:24px 0}.auth-card label,.modal-card label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:700}input,select{min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}.primary-button,.secondary-button{border-radius:999px;padding:13px 18px;font-weight:800;cursor:pointer}.primary-button{border:0;background:var(--accent);color:#fff}.secondary-button{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}.alert.error{padding:13px;background:#ffe9eb;color:#c33;border-radius:12px}.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--line)}.app-logo{font-weight:900;font-size:20px}.app-logo strong{color:var(--accent)}.app-header nav{display:flex;gap:16px;flex:1}.header-tools{display:flex;gap:8px}.pill{border:1px solid var(--line);border-radius:999px;padding:9px 12px;background:var(--surface);color:var(--text)}.app-shell{width:min(1180px,100%);margin:auto;padding:40px 18px 120px}.hero-panel{padding:34px;border-radius:24px;background:linear-gradient(135deg,#1677ff,#004ec2);color:#fff}.hero-panel h1,.page-heading h1{font-size:clamp(42px,7vw,78px);margin:0}.eyebrow{letter-spacing:.25em;font-size:10px;font-weight:900}.stats-grid,.quick-grid,.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}.stats-grid article,.quick-grid a,.screen-card{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.stats-grid span,.quick-grid span{display:block;color:var(--muted)}.stats-grid strong{font-size:38px}.quick-grid strong{font-size:28px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.screen-card{display:grid;gap:14px}.screen-preview{display:grid;place-items:center;background:#111;color:#fff;border-radius:15px}.screen-preview.horizontal{aspect-ratio:16/9}.screen-preview.vertical{aspect-ratio:9/16;max-height:220px}.screen-card code{padding:7px 10px;border-radius:8px;background:var(--page)}.modal{position:fixed;inset:0;display:none;place-items:center;padding:20px;background:rgba(0,0,0,.5);z-index:100}.modal.open{display:grid}.modal-card{width:min(500px,100%);display:grid;gap:15px;padding:25px;background:var(--surface);border-radius:22px;position:relative}.modal-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;color:var(--text)}.product-list{display:grid;gap:12px;margin-top:24px}.product-row{display:grid;grid-template-columns:70px 1fr 140px 160px auto;align-items:center;gap:14px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px}.product-thumb{width:65px;height:65px;border-radius:13px;background:var(--page);display:grid;place-items:center;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:contain}.product-copy{display:grid;gap:4px}.product-copy small{color:var(--muted)}.product-row label{display:flex;align-items:center}.product-row label input{width:110px}.inline-form{display:flex;gap:10px;margin-top:20px}.orders-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:25px}.order-card{padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;gap:12px}.order-card strong{font-size:34px}.order-card button{border:0;border-radius:999px;padding:10px;background:var(--accent);color:#fff}@media(max-width:760px){.app-header nav{display:none}.app-logo{flex:1}.stats-grid,.quick-grid,.screen-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.product-row{grid-template-columns:58px 1fr}.product-row label,.product-row select,.product-row button{grid-column:1/-1;width:100%}.inline-form{flex-direction:column}}


.auth-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

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

.language-switcher a{
    min-width:42px;
    height:38px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
    color:var(--text);
    font-size:12px;
    font-weight:900;
    transition:.2s ease;
}

.language-switcher a:hover,
.language-switcher a.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#ffffff;
}

.forgot-link{
    justify-self:end;
    margin-top:-4px;
    color:var(--accent);
    font-size:13px;
    font-weight:800;
}

.forgot-link:hover{
    text-decoration:underline;
}

@media(max-width:520px){
    .auth-top{
        align-items:flex-start;
    }

    .language-switcher a{
        min-width:38px;
        height:36px;
        padding:0 9px;
    }
}


/* =========================================================
   SCREEN + PRODUCT MANAGER
   ========================================================= */

body.modal-open{
    overflow:hidden;
}

.alert{
    margin:18px 0;
    padding:13px 15px;
    border-radius:12px;
    font-weight:700;
}

.alert.success{
    background:#e7f8ee;
    color:#157743;
    border:1px solid #c8eed7;
}

html[data-theme=dark] .alert.success{
    background:rgba(39,170,91,.12);
    color:#72da99;
    border-color:rgba(74,213,126,.22);
}

.page-heading{
    margin-bottom:24px;
}

.page-heading > div{
    min-width:0;
}

.screen-card{
    align-content:start;
}

.screen-card-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.screen-card-heading h3{
    margin:0 0 5px;
    font-size:20px;
}

.screen-card-heading p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.status-badge{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
}

.status-badge.active{
    background:#e7f8ee;
    color:#157743;
}

.status-badge.paused{
    background:#f1f2f5;
    color:#6d7585;
}

html[data-theme=dark] .status-badge.active{
    background:rgba(39,170,91,.12);
    color:#72da99;
}

html[data-theme=dark] .status-badge.paused{
    background:#232b37;
    color:#aab3c2;
}

.screen-code{
    display:grid;
    gap:6px;
}

.screen-code span{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.screen-card code{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    font-size:13px;
    overflow-wrap:anywhere;
}

.card-actions,
.row-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.card-actions > *,
.row-actions > *{
    flex:1 1 auto;
}

.card-actions .secondary-button,
.card-actions .danger-button,
.row-actions .secondary-button,
.row-actions .danger-button{
    width:100%;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.inline-delete-form{
    margin:0;
}

.danger-button{
    border:1px solid #df5962;
    border-radius:999px;
    padding:12px 16px;
    background:transparent;
    color:#cf3540;
    font-weight:800;
    cursor:pointer;
}

.danger-button:hover{
    background:#cf3540;
    color:#fff;
}

.empty-state{
    min-height:360px;
    margin-top:24px;
    padding:42px 24px;
    display:grid;
    place-items:center;
    align-content:center;
    text-align:center;
    border:1px dashed var(--line);
    border-radius:24px;
    background:var(--surface);
}

.empty-state-icon{
    font-size:54px;
    margin-bottom:8px;
}

.empty-state h2{
    margin:0;
    font-size:28px;
}

.empty-state p{
    max-width:520px;
    margin:8px auto 20px;
    color:var(--muted);
    line-height:1.6;
}

.modal-scroll{
    overflow-y:auto;
    align-items:start;
}

.modal-scroll .modal-card{
    margin:32px 0;
}

.modal-card h2{
    margin:0 36px 6px 0;
    font-size:30px;
}

.product-modal-card{
    width:min(760px,100%);
}

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

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

textarea{
    width:100%;
    resize:vertical;
    min-height:94px;
    padding:12px 13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
}

textarea:focus,
input:focus,
select:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(22,119,255,.11);
}

.toggle-field{
    grid-template-columns:auto 1fr !important;
    align-items:center;
    gap:12px !important;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:14px;
}

.toggle-field input{
    width:20px;
    min-height:20px;
    height:20px;
    margin:0;
}

.toggle-field span{
    display:grid;
    gap:2px;
}

.toggle-field small{
    color:var(--muted);
    font-weight:400;
}

.new-category-fields[hidden]{
    display:none;
}

.file-field small{
    color:var(--muted);
    font-weight:400;
}

.file-field input[type=file]{
    height:auto;
    padding:11px;
}

.current-image{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
}

.current-image[hidden]{
    display:none;
}

.current-image img{
    width:86px;
    height:86px;
    object-fit:contain;
    border-radius:12px;
    background:var(--page);
}

.checkbox-line{
    display:flex !important;
    align-items:center;
    gap:9px !important;
}

.checkbox-line input{
    width:18px;
    min-height:18px;
    height:18px;
}

.money-input{
    position:relative;
}

.money-input b{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    pointer-events:none;
}

.money-input input{
    width:100%;
    padding-left:28px;
}

.product-row{
    grid-template-columns:70px minmax(160px,1fr) minmax(380px,1.5fr) auto;
}

.product-quick-form{
    display:grid;
    grid-template-columns:minmax(120px,.7fr) minmax(150px,1fr) auto;
    gap:10px;
    align-items:end;
}

.compact-field{
    display:grid !important;
    gap:5px !important;
}

.compact-field > span{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.product-quick-form input,
.product-quick-form select{
    width:100%;
    min-width:0;
}

.row-actions{
    flex-direction:column;
    align-items:stretch;
    min-width:92px;
}

.product-thumb span{
    padding:5px;
    font-size:10px;
    color:var(--muted);
    text-align:center;
}

@media(max-width:980px){
    .product-row{
        grid-template-columns:65px 1fr;
    }

    .product-quick-form{
        grid-column:1/-1;
    }

    .row-actions{
        grid-column:1/-1;
        flex-direction:row;
    }
}

@media(max-width:760px){
    .form-grid.two-columns{
        grid-template-columns:1fr;
    }

    .screen-card .card-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .screen-card .card-actions .inline-delete-form{
        grid-column:1/-1;
    }

    .product-row{
        grid-template-columns:58px 1fr !important;
        padding:13px;
    }

    .product-quick-form{
        grid-template-columns:1fr !important;
        width:100%;
    }

    .product-quick-form > *{
        grid-column:1/-1;
        width:100%;
    }

    .row-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .modal{
        padding:10px;
    }

    .modal-scroll .modal-card{
        margin:10px 0;
    }

    .modal-card{
        border-radius:18px;
        padding:20px 16px;
    }
}