/* ==========================================
   KAKKY Design System
   Approved design: kakky-design-proposal
   ========================================== */

:root {
    --main: #E86A24;
    --main-dark: #c94f14;
    --navy: #142536;
    --navy-2: #1f3548;
    --paper: #fffaf6;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --line: #dfe6eb;
    --muted: #4a5568;
    --green: #2e8b67;
    --yellow: #f2b84b;
    --red: #d94d40;
    --shadow: 0 14px 32px rgba(20, 37, 54, .12);
    --shadow-sm: 0 10px 26px rgba(20, 37, 54, .06);
    --radius: 8px;
    font-family: "Inter", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;

    --fs-2xs: 14px;
    --fs-xs: 15px;
    --fs-sm: 16px;
    --fs-base: 17px;
    --fs-md: 18px;
    --fs-lg: 19px;
    --fs-xl: 22px;
    --fs-2xl: 26px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--navy);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: var(--main); text-decoration: none; }
a:hover { color: var(--main-dark); }

/* ==========================================
   App Shell
   ========================================== */

.screen {
    min-height: 100vh;
    min-height: 100dvh;
    background: #f9fbfc;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: var(--shadow);
}

.screen.ops {
    background: #f7fafb;
}

.screen.dark {
    background: var(--navy);
    color: #fff;
}

.content {
    padding: 0 24px 24px;
}

/* ==========================================
   App Top (header + title wrapper)
   ========================================== */

.app-top {
    background: transparent;
}

/* ==========================================
   App Header
   ========================================== */

.app-header {
    position: relative;
    min-height: 38px;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    padding: 8px 16px;
    background: #eef2f5;
}

.app-header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.app-logo {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 7px;
    font-weight: 900;
    letter-spacing: 0;
    font-size: var(--fs-md);
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.app-logo img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    object-fit: cover;
    background: #fff;
}

.app-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.app-title {
    color: var(--navy);
    font-size: var(--fs-md);
    font-weight: 900;
    white-space: nowrap;
    text-align: center;
    display: block;
    width: 100%;
    padding: 6px 16px 4px;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-weight: 900;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.icon-btn:hover {
    border-color: var(--main);
    color: var(--main);
}

/* ==========================================
   Buttons
   ========================================== */

.btn {
    min-height: 38px;
    border: 0;
    border-radius: var(--radius);
    background: var(--main);
    color: #fff;
    font-weight: 900;
    font-size: var(--fs-base);
    padding: 0 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease;
    width: 100%;
}

.btn:hover { opacity: .9; }

.btn.secondary {
    color: var(--navy);
    background: #edf2f5;
}

.btn.secondary:hover {
    background: #e0e6ea;
}

.btn.ghost {
    color: var(--main);
    border: 1px solid rgba(232, 106, 36, .35);
    background: #fff6ef;
}

.btn.ghost:hover {
    background: #ffede0;
}

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

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

.field {
    min-height: 39px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: left;
    width: 100%;
}

.field:focus-within {
    border-color: var(--main);
    box-shadow: 0 0 0 2px rgba(232, 106, 36, .1);
}

.field input,
.field select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: var(--fs-base);
    color: var(--navy);
    padding: 10px 0;
}

.field input::placeholder {
    color: var(--muted);
}

.form-stack {
    display: grid;
    gap: 8px;
}

.form-label {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.message-box {
    min-height: 94px;
    align-items: flex-start;
    padding-top: 10px;
    border-radius: var(--radius);
}

.message-box textarea {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    min-height: 74px;
    font-size: var(--fs-base);
    color: var(--navy);
    resize: vertical;
}

/* ==========================================
   Login
   ========================================== */

.login-panel {
    margin-top: auto;
    margin-bottom: auto;
    display: grid;
    gap: 10px;
    text-align: center;
}

.login-symbol {
    width: 82px;
    height: 82px;
    margin: 0 auto 8px;
    border-radius: 18px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 10px 22px rgba(20, 37, 54, .08);
}

.login-logo-name {
    font-size: var(--fs-xl);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: .5px;
}

.login-title {
    font-size: var(--fs-md);
    font-weight: 900;
    color: var(--navy);
    margin-bottom: 8px;
}

/* ==========================================
   Home - Hero Logo
   ========================================== */

.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px 10px;
}

.home-hero-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 6px 16px rgba(20, 37, 54, .08);
}

.home-hero-name {
    font-size: 18px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: .5px;
}

/* ==========================================
   Home - Stats
   ========================================== */

.home-date {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 800;
    margin-bottom: 10px;
}

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

.stat {
    min-height: 62px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 9px;
    text-align: center;
}

.stat small {
    display: block;
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 800;
}

.stat b {
    display: block;
    margin-top: 6px;
    font-size: 18px;
    line-height: 1;
}

.stat .alert-text {
    color: var(--red);
    font-size: var(--fs-2xs);
    font-weight: 900;
}

/* ==========================================
   Home - Navigation Links
   ========================================== */

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

.home-link-list {
    display: grid;
    gap: 8px;
}

.home-link {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}

.home-link:hover {
    border-color: var(--main);
    color: inherit;
}

.home-link-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--main);
    font-size: var(--fs-md);
    font-weight: 900;
}

.home-link-name {
    font-size: var(--fs-base);
    font-weight: 900;
}

.home-link-sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-2xs);
    line-height: 1.35;
}

.home-link-arrow {
    color: var(--main);
    font-size: 14px;
    font-weight: 900;
}

/* ==========================================
   Chips / Tabs
   ========================================== */

.chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 12px;
}

.chip {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    padding: 0 10px;
    font-size: var(--fs-xs);
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}

.chip:hover {
    border-color: var(--main);
    color: var(--main);
}

.chip.active {
    color: #fff;
    border-color: var(--main);
    background: var(--main);
}

/* ==========================================
   List Rows
   ========================================== */

.list {
    display: grid;
    gap: 8px;
}

.row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 8px;
}

.row.slim {
    grid-template-columns: 1fr auto;
    min-height: 48px;
}

.thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 52% 46%, #fff0cf 0 22%, transparent 23%),
        radial-gradient(circle at 39% 42%, var(--main) 0 7%, transparent 8%),
        radial-gradient(circle at 63% 52%, var(--green) 0 5%, transparent 6%),
        linear-gradient(135deg, #ffe4cf, #fff7ee);
    flex-shrink: 0;
    overflow: hidden;
}

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

.row-title {
    font-size: var(--fs-sm);
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-meta {
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--fs-2xs);
}

.price,
.status {
    color: var(--main);
    font-size: var(--fs-sm);
    font-weight: 900;
    white-space: nowrap;
}

.status.green { color: var(--green); }
.status.yellow { color: #b57900; }
.status.red { color: var(--red); }

/* ==========================================
   Order Card
   ========================================== */

.order-card {
    display: grid;
    gap: 8px;
    border-left: 5px solid var(--main);
    border-radius: var(--radius);
    background: #fff;
    color: var(--navy);
    padding: 10px;
}

.order-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 900;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 7px;
    color: #fff;
    background: var(--main);
    font-size: var(--fs-2xs);
    font-weight: 900;
    white-space: nowrap;
}

.badge.green { background: var(--green); }
.badge.yellow { background: var(--yellow); color: var(--navy); }
.badge.red { background: var(--red); }

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

/* ==========================================
   Table
   ========================================== */

.table {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.table-row {
    display: grid;
    grid-template-columns: 1fr .7fr .7fr;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-2xs);
}

.table-row:last-child { border-bottom: 0; }
.table-row > div { padding: 7px; }
.table-row.head { color: #fff; background: var(--navy); font-weight: 900; }

/* ==========================================
   Chart
   ========================================== */

.chart {
    height: 112px;
    display: flex;
    align-items: end;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 12px 10px 6px;
}

.bar {
    flex: 1;
    min-height: 24px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #ff9a58, var(--main));
}

/* ==========================================
   Calendar
   ========================================== */

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

.day {
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 5px;
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    transition: all .15s ease;
}

.day:hover {
    border-color: var(--main);
}

.day.active {
    color: #fff;
    border-color: var(--main);
    background: var(--main);
}

.day.set {
    background: #f0f0f0;
    border-color: #ddd;
}

.day.disabled {
    color: #bcc6ce;
    cursor: default;
    opacity: .5;
}

.day.disabled:hover {
    border-color: var(--line);
}

/* ==========================================
   Section Label
   ========================================== */

.section-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-base);
    font-weight: 900;
}

.section-label span {
    color: var(--main);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

/* ==========================================
   Total / Summary Card
   ========================================== */

.total {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 10px;
}

.total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--fs-base);
    font-weight: 900;
}

/* ==========================================
   Notification Bar
   ========================================== */

.notification-bar {
    background: var(--navy);
    color: #fff;
    padding: 10px 14px;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-bar .notif-icon {
    font-size: 16px;
}

/* ==========================================
   Toggle Switch
   ========================================== */

.toggle {
    width: 36px;
    height: 20px;
    background: var(--main);
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .2s ease;
}

.toggle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    right: 2px;
    transition: all .2s ease;
}

.toggle.off {
    background: #ccc;
}

.toggle.off::after {
    right: auto;
    left: 2px;
}

/* ==========================================
   Footer
   ========================================== */

.app-footer {
    border-top: 1px solid var(--line);
    padding: 16px 0 10px;
    text-align: center;
    margin-top: 16px;
}

.app-footer a {
    display: block;
    font-size: var(--fs-xs);
    color: #aaa;
    text-decoration: none;
    padding: 3px 0;
}

.app-footer a:hover {
    color: var(--main);
}

/* ==========================================
   Menu Card (grid)
   ========================================== */

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

.menu-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.menu-card .thumb {
    width: 100%;
    height: 72px;
    border-radius: 0;
}

.menu-body { padding: 8px; }

.menu-title {
    font-size: var(--fs-sm);
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-meta {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--fs-2xs);
}

/* ==========================================
   Detail Photo
   ========================================== */

.detail-photo {
    height: 144px;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 48%, #fff4d8 0 24%, transparent 25%),
        radial-gradient(circle at 42% 43%, var(--main) 0 7%, transparent 8%),
        radial-gradient(circle at 60% 51%, var(--green) 0 6%, transparent 7%),
        linear-gradient(135deg, #ffe1ca, #fff7eb);
    overflow: hidden;
}

.detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.image-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.image-slot {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--line);
    background: #f5f5f5;
}

.image-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-slot .remove-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: var(--fs-base);
    color: var(--red);
    cursor: pointer;
    background: rgba(255,255,255,.8);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}

.image-add {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    border: 1px dashed #aaa;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #aaa;
    cursor: pointer;
}

.image-add:hover {
    border-color: var(--main);
    color: var(--main);
}

.image-add-cam {
    width: 32px;
    height: 32px;
    font-size: var(--fs-md);
    align-self: flex-end;
}

/* ==========================================
   Month Calendar (full)
   ========================================== */

.month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--fs-md);
    font-weight: 900;
    margin-bottom: 8px;
}

.month-arrows {
    display: flex;
    gap: 14px;
    color: var(--main);
    font-size: 14px;
}

.month-arrows a {
    color: var(--main);
    text-decoration: none;
    font-weight: 900;
}

.month-calendar {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed;
}

.month-calendar th {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 900;
    padding-bottom: 4px;
}

.month-calendar td {
    height: 42px;
    border: 1px solid #f0ded1;
    border-radius: 6px;
    background: #fff;
    color: var(--navy);
    text-align: center;
    vertical-align: middle;
    font-size: var(--fs-base);
    font-weight: 400;
    cursor: pointer;
    transition: all .15s ease;
}

.month-calendar td:hover {
    border-color: var(--main);
}

.month-calendar td.set {
    background: #f5f0eb;
    border-color: #e8d5c5;
}

.month-calendar td.set .cal-qty {
    color: var(--navy);
}

.month-calendar td.selected,
.month-calendar td.set.selected {
    background: var(--main);
    color: #fff;
    border-color: var(--main);
}

.month-calendar td.selected .cal-date,
.month-calendar td.selected .cal-qty {
    color: #fff;
}

.month-calendar td.weekend .cal-date {
    color: #bcc6ce;
}

.month-calendar td.disabled {
    color: #bcc6ce;
    cursor: default;
    opacity: .5;
}

.cal-date {
    display: block;
    color: var(--navy);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 2px;
}

.cal-qty {
    font-size: var(--fs-2xs);
    color: var(--muted);
    font-weight: 700;
}

/* ==========================================
   Order List - dept/name stacking
   ========================================== */

.order-dept-name .dept-line::after {
    content: '\A';
    white-space: pre;
}

@media (min-width: 768px) {
    .order-dept-name .dept-line::after {
        content: ' ';
        white-space: normal;
    }
}

/* ==========================================
   Responsive - Mobile (default)
   ========================================== */

@media (max-width: 480px) {
    .content {
        padding: 0 14px 20px;
    }
    .stat b {
        font-size: 16px;
    }
}

/* ==========================================
   Responsive - Tablet (481px - 767px)
   ========================================== */

@media (min-width: 481px) and (max-width: 767px) {
    body { background: #e8ecf0; }
    .screen { max-width: 600px; }

    :root {
        --fs-2xs: 12px;
        --fs-xs: 13px;
        --fs-sm: 14px;
        --fs-base: 15px;
        --fs-md: 16px;
        --fs-lg: 17px;
        --fs-xl: 19px;
        --fs-2xl: 22px;
    }

    .content { padding: 0 20px 28px; }
    .app-logo { font-size: 14px; }
    .app-title { font-size: 14px; }
    .btn { min-height: 42px; font-size: var(--fs-base); }
    .field { min-height: 42px; }
    .field input, .field select { font-size: var(--fs-base); }
    .stat small { font-size: var(--fs-xs); }
    .stat b { font-size: 20px; }
    .home-hero { padding: 24px 16px 12px; }
    .home-hero-logo { width: 64px; height: 64px; border-radius: 16px; }
    .home-hero-name { font-size: 20px; }
    .home-link-name { font-size: var(--fs-md); }
    .home-link-sub { font-size: var(--fs-xs); }
    .chip { min-height: 32px; font-size: var(--fs-sm); }
    .row-title { font-size: var(--fs-base); }
    .section-label { font-size: var(--fs-md); }
    .month-calendar td { height: 48px; }
    .cal-date { font-size: var(--fs-base); }
    .cal-qty { font-size: var(--fs-xs); }
}

/* ==========================================
   Responsive - PC Desktop (768px+)
   ========================================== */

@media (min-width: 768px) {
    body { background: #e8ecf0; }

    :root {
        --fs-2xs: 13px;
        --fs-xs: 14px;
        --fs-sm: 15px;
        --fs-base: 16px;
        --fs-md: 17px;
        --fs-lg: 18px;
        --fs-xl: 20px;
        --fs-2xl: 26px;
    }

    .screen {
        max-width: 900px;
    }

    /* Header */
    .app-header {
        padding: 10px 32px;
        min-height: 50px;
        grid-template-columns: 60px 1fr 60px;
    }
    .app-header-left { gap: 8px; }
    .app-logo { font-size: var(--fs-lg); gap: 12px; }
    .app-logo img { width: 32px; height: 32px; border-radius: 7px; }
    .icon-btn { width: 40px; height: 40px; font-size: var(--fs-lg); }
    .app-title { font-size: var(--fs-lg); padding: 8px 32px 6px; }

    /* Content area */
    .content { padding: 0 44px 44px; }

    /* Buttons */
    .btn { min-height: 50px; font-size: var(--fs-base); padding: 0 32px; }

    /* Fields */
    .field { min-height: 50px; padding: 0 16px; }
    .field input, .field select { font-size: var(--fs-base); padding: 14px 0; }
    .form-label { font-size: var(--fs-sm); margin-bottom: 6px; }
    .message-box textarea { font-size: var(--fs-base); min-height: 90px; }

    /* Stats */
    .stat { min-height: 90px; padding: 18px; }
    .stat small { font-size: var(--fs-xs); }
    .stat b { font-size: var(--fs-2xl); }
    .stat .alert-text { font-size: var(--fs-xs); }

    /* Home */
    .home-hero { padding: 28px 20px 14px; gap: 8px; }
    .home-hero-logo { width: 72px; height: 72px; border-radius: 18px; }
    .home-hero-name { font-size: 24px; }
    .home-date { font-size: var(--fs-base); margin-bottom: 14px; }
    .home-link { min-height: 84px; padding: 20px 24px; gap: 18px; grid-template-columns: 48px 1fr auto; }
    .home-link-icon { width: 48px; height: 48px; font-size: var(--fs-xl); }
    .home-link-name { font-size: var(--fs-lg); }
    .home-link-sub { font-size: var(--fs-xs); }
    .home-link-arrow { font-size: var(--fs-xl); }

    /* Chips / Tabs */
    .chip { min-height: 40px; font-size: var(--fs-sm); padding: 0 20px; }

    /* List rows */
    .row { min-height: 84px; padding: 16px 24px; gap: 20px; }
    .row.slim { min-height: 64px; }
    .thumb { width: 64px; height: 64px; }
    .row-title { font-size: var(--fs-base); }
    .row-meta { font-size: var(--fs-xs); }
    .price, .status { font-size: var(--fs-base); }

    /* Order card */
    .order-card { padding: 18px; gap: 12px; }
    .order-top { font-size: var(--fs-base); }
    .badge { font-size: var(--fs-sm); padding: 5px 14px; }

    /* Table */
    .table-row { font-size: var(--fs-sm); }
    .table-row > div { padding: 12px 16px; }

    /* Calendar (month) */
    .month-head { font-size: var(--fs-xl); margin-bottom: 14px; }
    .month-arrows { font-size: var(--fs-xl); gap: 20px; }
    .month-calendar { border-spacing: 5px; }
    .month-calendar th { font-size: var(--fs-sm); padding-bottom: 8px; }
    .month-calendar td { height: 64px; font-size: var(--fs-base); }
    .cal-date { font-size: var(--fs-sm); margin-bottom: 3px; }
    .cal-qty { font-size: var(--fs-xs); }

    /* Day (simple calendar) */
    .day { min-height: 64px; font-size: var(--fs-xs); }

    /* Section labels */
    .section-label { font-size: var(--fs-lg); }
    .section-label span { font-size: var(--fs-sm); }

    /* Total / Summary */
    .total { padding: 16px; }
    .total-row { font-size: var(--fs-md); }

    /* Toggle */
    .toggle { width: 48px; height: 26px; border-radius: 13px; }
    .toggle::after { width: 22px; height: 22px; }

    /* Image grid */
    .image-grid { gap: 10px; }
    .image-slot { width: 110px; height: 110px; border-radius: 8px; }
    .image-slot .remove-btn { font-size: var(--fs-base); width: 24px; height: 24px; }
    .image-add { width: 110px; height: 110px; font-size: 28px; border-radius: 8px; }
    .image-add-cam { width: 44px; height: 44px; font-size: 18px; }

    /* Detail photo */
    .detail-photo { height: 240px; }

    /* Chart */
    .chart { height: 180px; padding: 18px 16px 10px; }

    /* Notification bar */
    .notification-bar { font-size: var(--fs-base); padding: 16px 24px; }

    /* Login */
    .login-symbol { width: 110px; height: 110px; border-radius: 24px; }
    .login-title { font-size: var(--fs-xl); margin-bottom: 14px; }
    .login-panel { gap: 16px; max-width: 420px; margin-left: auto; margin-right: auto; width: 100%; }

    /* Form max-width for wide screens */
    .form-stack { max-width: 620px; margin-left: auto; margin-right: auto; }

    /* Footer */
    .app-footer { padding: 24px 0 16px; margin-top: 24px; }
    .app-footer a { font-size: var(--fs-xs); padding: 5px 0; }

    /* Divider */
    .divider { margin: 20px 0; }

    /* Menu cards */
    .menu-card .thumb { height: 120px; }
    .menu-title { font-size: var(--fs-base); }
    .menu-meta { font-size: var(--fs-xs); }
}

/* ==========================================
   Utility
   ========================================== */

.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.mt-auto { margin-top: auto; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.gap-8 { gap: 8px; }
.w-full { width: 100%; }
.hidden { display: none; }