*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fffbf5;color:#4a3728}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;flex:0 0 260px;min-height:100vh;padding:22px 18px;background:linear-gradient(180deg,#e8d5b7 0%,#d4b896 100%);position:fixed;left:0;top:0;bottom:0;z-index:20;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;color:#6d4c41;margin-bottom:28px}.brand-logo{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:25px;box-shadow:0 4px 14px #8d6e6333}.brand strong{display:block;font-size:21px}.brand small{font-size:12px;color:#8d6e63}.nav-menu{display:flex;flex-direction:column;gap:10px}.nav-menu a,.logout{display:flex;align-items:center;gap:10px;text-decoration:none;color:#5d4037;background:#ffffffdf;border-radius:12px;padding:12px 14px;font-size:14px;transition:.2s}.nav-menu a:hover,.nav-menu a.active{background:#a1887f;color:#fff;box-shadow:0 5px 12px #6d4c4130}.logout{margin-top:auto;background:transparent;color:#8d6e63;font-weight:bold}.main-content{margin-left:260px;width:calc(100% - 260px);min-height:100vh;padding:0 28px 40px}.topbar{height:68px;display:flex;align-items:center;justify-content:flex-end}.menu-toggle{display:none;border:0;background:#fff;border-radius:10px;padding:10px 13px;font-size:20px}.topbar-user{text-align:right}.topbar-user span{display:block;font-weight:bold;color:#6d4c41}.topbar-user small{color:#8d7b6b}.page-title{font-size:32px;margin:10px 0 4px;color:#5d4037}.page-subtitle{margin:0 0 24px;color:#7a6a5a}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:25px}.stat-card,.panel{background:linear-gradient(100deg,#fff8e7,#f5edd8);border-radius:14px;padding:22px;box-shadow:0 5px 14px #6d4c4118;border:1px solid #ffffff}.stat-card h3{font-size:16px;margin:0 0 8px;color:#6d4c41}.stat-card .number{font-size:29px;font-weight:800;color:#8d6e63}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#fff}.panel h2{margin-top:0;color:#6d4c41;font-size:20px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:650px}.table th,.table td{padding:11px 10px;border-bottom:1px solid #e8d9c8;text-align:left}.table th{background:#f5edd8;color:#6d4c41}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:bold;font-size:13px}.field input,.field select,.field textarea{border:1px solid #e0d0bc;border-radius:9px;padding:11px;background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#c9a66b;box-shadow:0 0 0 3px #c9a66b18}.btn{border:0;border-radius:9px;padding:10px 15px;background:#8d6e63;color:#fff;font-weight:bold;cursor:pointer;text-decoration:none;display:inline-block}.btn.secondary{background:#a1887f}.btn.danger{background:#a67c6d}.btn.small{padding:7px 10px;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.alert{padding:12px 15px;border-radius:10px;margin:10px 0 18px}.alert.success{background:#e7f8ee;color:#167247}.alert.error{background:#f8e8e4;color:#8b3a2f}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#bfa47a,#e7dfcc)}.login-card{width:min(430px,92vw);background:#ffffffed;border-radius:22px;padding:35px;box-shadow:0 20px 60px #6d4c4133}.login-brand{text-align:center;margin-bottom:25px}.login-brand .logo{font-size:55px}.login-brand h1{margin:6px 0;color:#5d4037}.login-brand p{color:#7a6a5a}.login-form{display:flex;flex-direction:column;gap:14px}.login-form input{width:100%;padding:13px;border:1px solid #e0d0bc;border-radius:10px}.password-wrap{position:relative}.password-wrap button{position:absolute;right:5px;top:5px;border:0;background:transparent;padding:8px;cursor:pointer}.login-form .btn{width:100%;padding:13px}.muted{text-align:center;color:#8d7b6b;font-size:13px}.badge{display:inline-block;border-radius:20px;padding:4px 9px;font-size:12px;background:#f5e6c8;color:#6d4c41}.calculator-result{font-size:30px;font-weight:800;color:#6d4c41}.mobile-note{font-size:12px;color:#8d7b6b}@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.main-content{margin-left:0;width:100%;padding:0 16px 30px}.topbar{justify-content:space-between}.menu-toggle{display:block}.cards{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.page-title{font-size:26px}}@media(max-width:480px){.login-card{padding:25px}.panel,.stat-card{padding:17px}.page-title{font-size:23px}}

.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:12px;align-items:end}.filter-actions{display:flex;gap:8px}.status-out{background:#f8e8e4;color:#8b3a2f}.status-low{background:#fff0cf;color:#946200}.status-ok{background:#e3f7ea;color:#167247}.table small{color:#8d7b6b}.full{grid-column:1/-1}@media(max-width:1100px){.filter-grid{grid-template-columns:1fr 1fr}.filter-actions{grid-column:1/-1}}.pricing-box{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px;border:1px solid #e0d0bc;background:#fffbf5;border-radius:12px}.pricing-box small{color:#8d7b6b}@media(max-width:700px){.pricing-box{flex-direction:column;align-items:flex-start}}

.currency-input{font-weight:800;color:#6d4c41}.field-help{font-size:11px;color:#8d7b6b}.field select{cursor:pointer}

/* Ingredient management refinement */
.panel-heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.panel-heading-row h2{margin-bottom:4px}.panel-subtitle{margin:0;color:#8d7b6b;font-size:13px}.search-result-note{margin-top:12px;padding:10px 12px;border-radius:9px;background:#fffbf5;color:#7a6a5a;font-size:13px}.ingredient-table{min-width:1050px}.ingredient-table th,.ingredient-table td{vertical-align:middle}.empty-state{text-align:center!important;padding:24px!important;color:#8d7b6b}.detail-panel{scroll-margin-top:20px}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.detail-grid>div{border:1px solid #e8d9c8;border-radius:10px;padding:13px;background:#fffaf5}.detail-grid span{display:block;font-size:11px;color:#8d7b6b;margin-bottom:5px}.detail-grid strong{display:block;color:#5d4037}.section-title{font-size:16px;color:#6d4c41;margin:20px 0 10px}.panel#edit-ingredient{scroll-margin-top:20px}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr 1fr}.panel-heading-row{flex-direction:column}.ingredient-table{min-width:1000px}}
@media(max-width:520px){.detail-grid{grid-template-columns:1fr}}

/* ============================================================
   BAKING DEMO LOGIN
   Responsive Desktop + Tablet + HP
   ============================================================ */

.login-page-baking,
.login-page-baking * {
    box-sizing: border-box;
}

.login-page-baking {
    margin: 0;
    min-height: 100vh;
    background: #bdb8b8;
    color: #4b3022;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
}

.visual-image-container {
    text-align: center;
    margin: 20px 0; /* Memberi jarak atas dan bawah */
}

.visual-logo {
    max-width: 400px; /* Atur lebar maksimal gambar sesuai kebutuhan */
    height: auto;     /* Menjaga proporsi gambar */
}

/* ============================================================
   DESKTOP
   ============================================================ */

.baking-login {
    width: 100%;
    max-width: 1440px;
    min-height: calc(100vh - 76px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(480px, 1.04fr) minmax(400px, .96fr);
    overflow: hidden;
    background: #fffdf9;
}

/* KIRI / GAMBAR */
.baking-visual {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background-image: url("assets/img/logo.png");
    background-repeat: no-repeat;

    /*
     * Desktop: gambar memenuhi panel kiri.
     * 'cover' menjaga proporsi gambar tanpa distorsi.
     */
    background-size: cover;
    background-position: left center;
    background-color: #f7eee2;
}

.visual-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(255,250,242,.01) 0%,
        rgba(255,250,242,.01) 70%,
        rgba(255,250,242,.13) 100%
    );
}

.visual-content {
    position: relative;
    z-index: 2;
    min-height: 760px;
    height: 100%;
    padding: 52px 50px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.visual-brand {
    width: max-content;
    text-align: center;
}

.visual-brand-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.3vw, 62px);
    line-height: .86;
    font-weight: 700;
    color: #714827;
    text-shadow:
        1px 1px 0 #fff8ed,
        2px 3px 0 rgba(86,49,24,.15);
}

.visual-brand-title span {
    display: inline-block;
    margin-left: 42px;
}

.visual-brand-subtitle {
    margin-top: 14px;
    color: #5e3b29;
    font-size: 14px;
    letter-spacing: .15px;
}

.visual-bottom-label {
    align-self: center;
    padding: 11px 25px;
    border-radius: 999px;
    background: rgba(55,38,28,.91);
    color: #fff8ee;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* KANAN / FORM */
.baking-login-panel {
    min-height: 760px;
    padding: 58px clamp(38px, 5vw, 76px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(255,249,238,.98)
        );
}

.baking-form-box {
    width: 100%;
    max-width: 395px;
}

.mobile-brand {
    display: none;
}

.login-heading {
    margin-bottom: 34px;
}

.login-heading h1 {
    margin: 0;
    color: #553625;
    font-size: clamp(25px, 2.1vw, 30px);
    line-height: 1.25;
    font-weight: 700;
}

.login-heading p {
    margin: 9px 0 0;
    color: #927765;
    font-size: 13px;
}

/* Error */
.baking-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #e8b8b8;
    border-radius: 11px;
    background: #fff1f1;
    color: #963e3e;
    font-size: 13px;
}

.alert-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #b94c4c;
    color: #fff;
    font-weight: 700;
}

/* FORM */
.baking-login-form {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.baking-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.baking-field label {
    color: #493022;
    font-size: 13px;
    font-weight: 700;
}

.baking-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.baking-input-wrap input {
    width: 100%;
    height: 49px;
    padding: 0 46px;
    border: 1px solid #dbc8b8;
    border-radius: 12px;
    outline: none;
    background: #fffdf9;
    color: #493022;
    font-family: inherit;
    font-size: 14px;
    transition: .2s ease;
}

.baking-input-wrap input::placeholder {
    color: #a7978c;
}

.baking-input-wrap input:hover {
    border-color: #cdb09b;
}

.baking-input-wrap input:focus {
    border-color: #c69361;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(198,147,97,.14);
}

/* Ikon user */
.input-icon {
    position: absolute;
    left: 17px;
    color: #a88f7e;
    pointer-events: none;
}

.user-icon {
    width: 9px;
    height: 9px;
    top: 11px;
    left: 20px;
    border: 1.7px solid currentColor;
    border-radius: 50%;
}

.user-icon::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 10px;
    width: 17px;
    height: 9px;
    border: 1.7px solid currentColor;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
}

/* Ikon lock */
.lock-icon {
    width: 14px;
    height: 12px;
    top: 19px;
    left: 17px;
    border: 1.7px solid currentColor;
    border-radius: 2px;
}

.lock-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    top: -9px;
    width: 7px;
    height: 9px;
    border: 1.7px solid currentColor;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

/* Password toggle */
.password-toggle {
    position: absolute;
    right: 7px;
    top: 7px;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a88f7e;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: #f4eadf;
    outline: none;
}

.eye-icon {
    position: relative;
    width: 17px;
    height: 11px;
    border: 1.6px solid currentColor;
    border-radius: 80% 20%;
    transform: rotate(45deg);
}

.eye-icon::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    left: 5px;
    top: 2px;
    border: 1.4px solid currentColor;
    border-radius: 50%;
}

/* Link lupa password */
.baking-forgot {
    margin-top: -8px;
    text-align: right;
}

.baking-forgot a {
    color: #76513d;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Tombol */
.baking-submit {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #e6b95f 0%, #dca849 100%);
    color: #4c301f;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(174,125,44,.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.baking-submit:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
    box-shadow: 0 9px 21px rgba(174,125,44,.27);
}

.baking-submit:active {
    transform: translateY(0);
}

.baking-submit:focus-visible {
    outline: 3px solid rgba(198,147,97,.25);
    outline-offset: 3px;
}

/* Daftar */
.baking-register {
    margin: 27px 0 0;
    text-align: center;
    color: #8b7567;
    font-size: 13px;
}

.baking-register a {
    color: #76513d;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.baking-footer {
    min-height: 76px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f1d9b1;
    color: #634431;
    text-align: center;
    font-size: 12px;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.footer-links a {
    color: #634431;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.copyright {
    margin-top: 6px;
}

/* ============================================================
   TABLET: 901px - 1100px
   ============================================================ */

@media (max-width: 1100px) and (min-width: 901px) {
    .baking-login {
        grid-template-columns: minmax(430px, 1fr) minmax(380px, .9fr);
    }

    .baking-visual {
        min-height: 700px;
        background-position: 28% center;
    }

    .visual-content {
        min-height: 700px;
        padding: 42px 35px 28px;
    }

    .visual-brand-title {
        font-size: 48px;
    }

    .baking-login-panel {
        min-height: 700px;
        padding: 45px 42px;
    }
}

/* ============================================================
   TABLET / MOBILE LANDSCAPE
   <= 900px
   ============================================================ */

@media (max-width: 900px) {
    .login-page-baking {
        background: #fffaf3;
    }

    .baking-login {
        min-height: auto;
        grid-template-columns: 1fr;
        margin: 0;
        box-shadow: none;
    }

    .baking-visual {
        min-height: 410px;
        height: 410px;
        background-size: cover;
        background-position: left center;
    }

    .visual-content {
        min-height: 410px;
        padding: 36px 38px 28px;
    }

    .visual-brand-title {
        font-size: 46px;
    }

    .visual-bottom-label {
        margin-bottom: 0;
    }

    .baking-login-panel {
        min-height: auto;
        padding: 48px 32px 58px;
    }

    .baking-form-box {
        max-width: 440px;
    }

    .baking-footer {
        min-height: 76px;
    }
}

/* ============================================================
   HP
   <= 560px
   ============================================================ */

@media (max-width: 560px) {
    .baking-visual {
        min-height: 255px;
        height: 255px;

        /*
         * HP: bagian kiri gambar diprioritaskan.
         * Chef dan elemen ilustrasi tetap menjadi visual utama.
         */
        background-size: auto 100%;
        background-position: left top;
    }

    .visual-content {
        min-height: 255px;
        padding: 22px;
    }

    /*
     * Branding sudah ada pada gambar sehingga tidak perlu
     * ditumpuk lagi di atasnya.
     */
    .visual-brand,
    .visual-bottom-label {
        display: none;
    }

    .baking-login-panel {
        padding: 31px 21px 39px;
        background: #fffdf9;
    }

    .baking-form-box {
        max-width: none;
    }

    .mobile-brand {
        display: block;
        margin-bottom: 28px;
        text-align: center;
    }

    .mobile-brand-title {
        color: #6d462d;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 34px;
        line-height: 1;
        font-weight: 700;
    }

    .mobile-brand-title span {
        font-weight: 400;
    }

    .mobile-brand-subtitle {
        margin-top: 7px;
        color: #917563;
        font-size: 11px;
    }

    .login-heading {
        margin-bottom: 26px;
    }

    .login-heading h1 {
        font-size: 23px;
    }

    .login-heading p {
        font-size: 12px;
    }

    .baking-login-form {
        gap: 19px;
    }

    .baking-field label {
        font-size: 12px;
    }

    .baking-input-wrap input {
        height: 48px;
        font-size: 14px;
    }

    .baking-submit {
        min-height: 49px;
    }

    .baking-register {
        margin-top: 24px;
    }

    .baking-footer {
        min-height: 78px;
        padding: 15px 12px;
        font-size: 10.5px;
    }
}

/* ============================================================
   HP KECIL
   <= 380px
   ============================================================ */

@media (max-width: 380px) {
    .baking-visual {
        height: 220px;
        min-height: 220px;
    }

    .baking-login-panel {
        padding: 27px 16px 34px;
    }

    .mobile-brand {
        margin-bottom: 24px;
    }

    .mobile-brand-title {
        font-size: 30px;
    }

    .login-heading h1 {
        font-size: 21px;
    }

    .baking-input-wrap input {
        height: 46px;
        padding-left: 43px;
        padding-right: 43px;
        font-size: 13px;
    }

    .baking-submit {
        min-height: 47px;
        font-size: 14px;
    }

    .footer-links {
        gap: 4px;
    }
}

/* ============================================================
   LANDSCAPE HP
   ============================================================ */

@media (max-width: 900px) and (orientation: landscape) {
    .baking-visual {
        height: 300px;
        min-height: 300px;
    }

    .visual-content {
        min-height: 300px;
    }

    .baking-login-panel {
        padding-top: 35px;
        padding-bottom: 40px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .baking-input-wrap input,
    .baking-submit,
    .password-toggle {
        transition: none;
    }
}


/* ============================================================
   BAKING DEMO - ACCESSIBILITY + RESPONSIVE PRODUCT GALLERY
   ============================================================ */
:root{
    --text-main:#2f2119;
    --text-strong:#3b261b;
    --text-muted:#5f5047;
    --brand:#76513d;
    --brand-dark:#563a2d;
    --brand-soft:#ead8bf;
    --surface:#ffffff;
    --surface-soft:#fffaf3;
    --border:#cdb9a5;
    --focus:#a66b35;
}

html{font-size:16px;scroll-behavior:smooth}
body{color:var(--text-main);background:var(--surface-soft);line-height:1.5}
.page-title,.panel h2{color:var(--text-strong)}
.page-subtitle,.panel-subtitle,.table small,.field-help,.mobile-note,.muted{color:var(--text-muted)}
.stat-card h3,.table th{color:var(--brand-dark)}
.stat-card .number,.calculator-result{color:var(--brand-dark)}
.nav-menu a,.logout{color:#3f2d24}
.topbar-user span{color:var(--brand-dark)}
.topbar-user small{color:var(--text-muted)}
.field label{color:var(--text-strong)}
.field input,.field select,.field textarea{color:var(--text-main);border-color:var(--border);font-size:15px;min-height:44px}
.field textarea{min-height:100px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#76675e;opacity:1}
.field input:focus,.field select:focus,.field textarea:focus,.login-form input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(166,107,53,.18)}
.btn{background:#76513d;color:#fff}
.btn:hover{filter:brightness(.95)}
.btn.secondary{background:#6f625b;color:#fff}
.btn.danger{background:#9a493d;color:#fff}
.badge{font-weight:700}
.alert.success{color:#0b633e}
.alert.error{color:#7b2419}

/* Prevent long content from breaking the layout */
.main-content,.panel,.stat-card,.table-wrap{min-width:0}
img{max-width:100%;height:auto}

/* Cake image upload */
.cake-image-preview{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text-muted);font-size:12px}
.cake-image-preview img{width:96px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--border);display:block}
.cake-table-product{display:flex;align-items:center;gap:10px;min-width:180px}
.cake-table-product img,.cake-thumb-placeholder{width:54px;height:54px;flex:0 0 54px;border-radius:10px;object-fit:cover;background:#f4e7d5;display:grid;place-items:center;font-size:25px;border:1px solid #e1cfb9}
.cake-table-product strong{color:var(--text-strong)}

/* Staff Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gallery-card{background:#fff;border:1px solid #e4d6c7;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(70,45,30,.08);min-width:0}
.gallery-image-wrap{width:100%;aspect-ratio:4/3;background:#f5eadc;overflow:hidden}
.gallery-image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.gallery-card:hover .gallery-image{transform:scale(1.02)}
.gallery-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:70px;color:#806b5d}
.gallery-card-body{padding:18px}
.gallery-card-body h2{margin:3px 0 7px;color:var(--text-strong);font-size:21px}
.gallery-card-body p{margin:0 0 12px;color:var(--text-muted);font-size:14px;min-height:42px}
.gallery-meta{font-size:12px;font-weight:700;color:var(--brand)}
.gallery-price{font-size:17px;color:var(--brand-dark)}

/* Better responsive behavior for all modules */
@media (max-width:1200px){
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
    .main-content{padding-left:16px;padding-right:16px}
    .topbar{height:64px}
    .cards,.grid-2,.gallery-grid{grid-template-columns:1fr}
    .panel,.stat-card{padding:18px}
    .page-title{font-size:27px}
    .page-subtitle{font-size:14px}
    .table{min-width:680px}
    .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .form-grid{grid-template-columns:1fr}
    .field.full{grid-column:auto}
    .filter-grid{grid-template-columns:1fr}
    .filter-actions{grid-column:auto}
}
@media (max-width:560px){
    .main-content{padding-left:12px;padding-right:12px;padding-bottom:24px}
    .topbar-user span{font-size:14px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .page-title{font-size:24px;margin-top:7px}
    .panel,.stat-card{padding:15px;border-radius:12px}
    .panel h2{font-size:18px}
    .actions{width:100%}
    .actions .btn,.actions form{width:100%}
    .actions form .btn{width:100%}
    .btn{min-height:44px;display:flex;align-items:center;justify-content:center}
    .cake-table-product{min-width:210px}
    .gallery-card-body{padding:15px}
    .gallery-card-body h2{font-size:19px}
}

/* Landscape tablet/phone */
@media (max-width:900px) and (orientation:landscape){
    .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Safe-area support on modern phones */
@supports (padding:max(0px)){
    .main-content{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .gallery-image{transition:none}
}