/* ============================================================
   点餐系统 — 美团风格 · 多店铺
   ============================================================ */

/* ----- CSS 变量 ----- */
:root {
    --primary: #a0522d;
    --primary-dark: #8b4513;
    --secondary: #deb887;
    --accent: #f5deb3;
    --bg: #fdf8f3;
    --bg-warm: #fdf8f3;
    --shadow-primary: rgba(160,82,45,.35);
    --card: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --text-lighter: #94a3b8;
    --border: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.03);
    --shadow: 0 2px 12px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: 0.2s cubic-bezier(.4,0,.2,1);
    --safe-bottom: env(safe-area-inset-bottom, 16px);
    --sidebar-width: 85px;
}

/* ----- 颜色预设 ----- */
[data-theme="blue"] {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #93c5fd;
    --accent: #dbeafe;
    --bg: #eff6ff;
    --bg-warm: #eff6ff;
    --shadow-primary: rgba(59,130,246,.35);
}
[data-theme="purple"] {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --secondary: #c4b5fd;
    --accent: #ede9fe;
    --bg: #f5f3ff;
    --bg-warm: #f5f3ff;
    --shadow-primary: rgba(139,92,246,.35);
}
[data-theme="pink"] {
    --primary: #f472b6;
    --primary-dark: #ec4899;
    --secondary: #fbcfe8;
    --accent: #fce7f3;
    --bg: #fdf2f8;
    --bg-warm: #fdf2f8;
    --shadow-primary: rgba(244,114,182,.35);
}
[data-theme="mint"] {
    --primary: #14b8a6;
    --primary-dark: #0d9488;
    --secondary: #99f6e4;
    --accent: #ccfbf1;
    --bg: #f0fdfa;
    --bg-warm: #f0fdfa;
    --shadow-primary: rgba(20,184,166,.35);
}

/* ----- Reset ----- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

/* ============================================================
   Home Page — 萝卜点餐
   ============================================================ */
.home-page {
    min-height: 100dvh;
    background: linear-gradient(160deg, var(--bg-warm) 0%, #fff 40%, var(--bg-warm) 100%);
}
.home-container { max-width: 500px; margin: 0 auto; padding: 60px 20px 40px; }

/* Brand */
.brand { text-align: center; margin-bottom: 40px; }
.brand-logo {
    font-size: 4.5rem;
    margin-bottom: 12px;
    animation: toastBounce .8s ease;
}
.brand-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.brand-greet {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 8px;
    min-height: 1.5rem;
}
.brand-sub { font-size: .82rem; color: var(--text-lighter); margin-top: 4px; }

/* Recent */
.recent-title { font-size: .85rem; font-weight: 600; color: var(--text-light); margin-bottom: 12px; padding-left: 4px; }
.recent-list { display: flex; flex-direction: column; gap: 8px; }

.recent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}
.recent-card:active { transform: scale(.98); }
.recent-card-emoji { font-size: 1.8rem; flex-shrink: 0; }
.recent-card-name { flex: 1; font-size: .92rem; font-weight: 600; }
.recent-card-time { font-size: .73rem; color: var(--text-lighter); }

/* Welcome (no history) */
.welcome-card {
    text-align: center;
    padding: 40px 20px;
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.welcome-emoji { font-size: 3rem; margin-bottom: 12px; }
.welcome-text { font-size: .9rem; color: var(--text-light); margin-bottom: 4px; }
.welcome-brand { font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.welcome-hint { font-size: .78rem; color: var(--text-lighter); margin-top: 12px; }

/* ============================================================
   Auth Gate
   ============================================================ */
.auth-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.auth-card {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    max-width: 300px; width: 90%;
}
.auth-emoji { font-size: 3rem; margin-bottom: 8px; }
.auth-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.auth-sub { font-size: .82rem; color: var(--text-light); margin-bottom: 20px; }
.auth-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    text-align: center;
    outline: none;
    transition: border-color var(--transition);
    margin-bottom: 12px;
}
.auth-input:focus { border-color: var(--primary); }
.auth-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 50px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
}
.auth-btn:active { transform: scale(.97); }
.auth-btn:disabled { opacity: .5; }
.auth-error { margin-top: 10px; font-size: .82rem; color: var(--primary); }

/* ============================================================
   Announcement Bar
   ============================================================ */
.announce-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--accent), var(--bg-warm));
    border-bottom: 1px solid var(--accent);
    font-size: .82rem;
    color: #6b3a2a;
}
.announce-text { flex: 1; text-align: center; }
.announce-close {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: none; border-radius: 50%;
    background: rgba(0,0,0,.08);
    color: #999; font-size: .9rem;
    cursor: pointer; line-height: 1;
}

/* ============================================================
   Carousel
   ============================================================ */
.carousel {
    position: relative;
    overflow: hidden;
    background: #eee;
}
.carousel-track {
    display: flex;
    transition: transform .4s ease;
}
.carousel-slide {
    min-width: 100%;
    aspect-ratio: 2.5 / 1;
}
.carousel-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.carousel-dots {
    position: absolute;
    bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center;
    gap: 6px;
}
.carousel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
    transition: all var(--transition);
}
.carousel-dot.active { background: #fff; width: 18px; border-radius: 3px; }

/* Shop page: fixed viewport layout */
.shop-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================================
   Header
   ============================================================ */
.header {
    flex-shrink: 0; z-index: 100;
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 11px 16px;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
}
.header-back {
    font-size: .82rem; color: var(--text-light); text-decoration: none;
}
.header-logo { font-size: 1.1rem; font-weight: 700; }
.header-user { position: relative; }
.header-greet {
    font-size: .92rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.user-dropdown {
    display: none;
    position: absolute;
    top: 100%; right: 0;
    margin-top: 8px;
    background: var(--card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 100px;
    z-index: 300;
    overflow: hidden;
}
.user-dropdown.show { display: block; }
.user-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition);
}
.user-dropdown-item:hover { background: var(--bg); }
.header-admin { width: 40px; }

/* ============================================================
   Main Layout — 左侧栏 + 右侧内容
   ============================================================ */
body.has-main-layout {
    height: 100dvh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
body.has-main-layout .main-layout {
    flex: 1; display: flex; overflow: hidden; min-height: 0;
}

.main-layout { flex:1; display:flex; overflow:hidden; min-height:0; }

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: #f8f8f8;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--border);
}
.sidebar-list { list-style: none; padding: 4px 0; }
.sidebar-item {
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-light);
    line-height: 1.3;
    word-break: break-all;
}
.sidebar-item:active { background: rgba(0,0,0,.04); }
.sidebar-item.active {
    color: var(--primary); font-weight: 700;
    background: var(--card);
}
.sidebar-item.active::before {
    content: '';
    position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.content-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card);
    padding: 0 12px;
}

/* ============================================================
   Menu Sections
   ============================================================ */
.menu-section { margin-bottom: 4px; }
.menu-section-title {
    font-size: .95rem; font-weight: 700;
    padding: 16px 4px 10px;
    position: sticky; top: 0;
    background: var(--card); z-index: 10;
}
.menu-list { display:flex; flex-direction:column; gap:8px; }

/* ============================================================
   Product List Item
   ============================================================ */
.menu-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); padding: 8px 0;
    animation: fadeInUp .35s ease both;
}
.menu-item:nth-child(1) { animation-delay: .02s; }
.menu-item:nth-child(2) { animation-delay: .05s; }
.menu-item:nth-child(3) { animation-delay: .08s; }
.menu-item:nth-child(4) { animation-delay: .11s; }
.menu-item:nth-child(5) { animation-delay: .14s; }
.menu-item:nth-child(6) { animation-delay: .17s; }
.menu-item:nth-child(7) { animation-delay: .20s; }
.menu-item:nth-child(8) { animation-delay: .23s; }

.menu-item-img {
    width: 72px; height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover; flex-shrink: 0;
    background: #f5f5f5;
}
.menu-item-placeholder {
    width: 72px; height: 72px;
    border-radius: var(--radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--accent), var(--bg-warm));
}
.menu-item-body {
    flex:1; min-width:0;
    display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.menu-item-name {
    font-size: .9rem; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.menu-item-desc {
    font-size: .73rem; color: var(--text-lighter);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.menu-item-price { font-size: 1rem; font-weight: 700; color: var(--primary); }
.menu-item-price::before { content: "¥"; font-size: .68rem; font-weight: 600; }

/* Quantity */
.menu-item-qty { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.qty-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--border); background: var(--card);
    color: var(--text); font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition); line-height: 1;
    user-select: none; -webkit-user-select: none;
}
.qty-btn:active { transform: scale(.88); background: #f5f5f5; }
.qty-btn.minus { color: var(--text-lighter); }
.qty-num { width: 24px; text-align: center; font-size: .82rem; font-weight: 600; }

.empty-state { text-align:center; padding:80px 20px; }
.empty-state-emoji { font-size:4rem; margin-bottom:12px; }
.empty-state-text { color:var(--text-light); font-size:.9rem; }

/* ============================================================
   Cart Bar
   ============================================================ */
.cart-bar {
    flex-shrink: 0; z-index: 200;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    padding-bottom: calc(10px + var(--safe-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.05);
}
.cart-bar-inner { display:flex; align-items:center; gap:12px; }
.cart-bar-info { flex:1; min-width:0; cursor:pointer; }
.cart-bar-total { font-size:1.05rem; font-weight:700; }
.cart-bar-total .price { color:var(--primary); }
.cart-bar-count { font-size:.73rem; color:var(--text-light); }
.cart-bar-btn {
    flex-shrink:0; padding:11px 26px;
    border:none; border-radius:50px;
    font-size:.9rem; font-weight:700; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff;
    box-shadow:0 4px 16px var(--shadow-primary);
    transition:all var(--transition); white-space:nowrap;
}
.cart-bar-btn:active { transform:scale(.95); }
.cart-bar-btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }

/* ============================================================
   Note Sheet
   ============================================================ */
.note-overlay {
    position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,.4);
    opacity:0; pointer-events:none;
    transition:opacity var(--transition);
}
.note-overlay.active { opacity:1; pointer-events:auto; }
.note-sheet {
    position:fixed; bottom:0; left:0; right:0; z-index:301;
    background:var(--card);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    padding:20px 20px calc(20px + var(--safe-bottom));
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    max-width:500px; margin:0 auto;
}
.note-sheet.active { transform:translateY(0); }
.note-sheet-handle { width:36px; height:5px; background:var(--border); border-radius:3px; margin:0 auto 16px; }
.note-sheet-title { font-size:1rem; font-weight:700; margin-bottom:4px; }
.note-sheet-items { margin-bottom:12px; }
.note-sheet-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; font-size:.9rem; border-bottom:1px solid var(--border);
}
.note-sheet-item:last-child { border-bottom:none; }
.note-sheet-item-name { flex:1; }
.note-sheet-item-qty { color:var(--text-light); margin:0 12px; font-size:.8rem; }
.note-sheet-item-sub { font-weight:600; font-size:.85rem; }
.note-sheet-total {
    text-align:right; font-size:1.15rem; font-weight:700;
    color:var(--primary); padding:8px 0 12px; border-top:2px solid var(--text);
}
.note-input {
    width:100%; padding:12px 14px;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-size:.88rem; font-family:inherit; resize:none; outline:none;
    transition:border-color var(--transition); margin-bottom:12px;
}
.note-input:focus { border-color:var(--primary); }
.note-submit-btn {
    width:100%; padding:14px; border:none; border-radius:50px;
    font-size:1rem; font-weight:700; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff; box-shadow:0 4px 16px var(--shadow-primary);
    transition:all var(--transition);
}
.note-submit-btn:active { transform:scale(.97); }
.note-submit-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
    position:fixed; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.8);
    z-index:400;
    background:var(--card); border-radius:var(--radius-lg);
    padding:36px 28px; text-align:center;
    box-shadow:var(--shadow-lg);
    opacity:0; pointer-events:none;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    max-width:290px; width:90%;
}
.toast.active { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.toast-emoji { font-size:3.2rem; margin-bottom:10px; animation:toastBounce .6s ease; }
.toast-title { font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.toast-msg { font-size:.82rem; color:var(--text-light); margin-bottom:16px; }
.toast-close {
    padding:10px 32px; border:none; border-radius:50px;
    font-size:.88rem; font-weight:600; cursor:pointer;
    background:var(--bg); color:var(--text);
    transition:all var(--transition);
}
.toast-close:active { background:var(--border); }

/* ============================================================
   Login
   ============================================================ */
.login-page {
    min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:20px; background:var(--bg-warm);
}
.login-card {
    width:100%; max-width:360px;
    background:var(--card); border-radius:var(--radius-lg);
    padding:40px 28px; box-shadow:var(--shadow); text-align:center;
}
.login-title { font-size:1.4rem; font-weight:800; margin-bottom:4px; }
.login-subtitle { font-size:.85rem; color:var(--text-light); margin-bottom:24px; }
.login-input {
    width:100%; padding:14px 16px;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-size:.95rem; outline:none; text-align:center;
    transition:border-color var(--transition);
}
.login-input:focus { border-color:var(--primary); }
.login-btn {
    width:100%; margin-top:16px;
    padding:14px; border:none; border-radius:50px;
    font-size:1rem; font-weight:600; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:#fff; transition:all var(--transition);
}
.login-btn:active { transform:scale(.97); }
.login-error { margin-top:12px; font-size:.85rem; color:var(--primary); }

/* ============================================================
   Admin
   ============================================================ */
.admin-page { max-width:640px; margin:0 auto; padding:16px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.admin-title { font-size:1.2rem; font-weight:700; }
.admin-logout { font-size:.85rem; color:var(--text-light); text-decoration:none; }

.admin-form-card {
    background:var(--card); border-radius:var(--radius);
    padding:20px; box-shadow:var(--shadow-sm); margin-bottom:16px;
}
.admin-form-row { margin-bottom:12px; }
.admin-form-row:last-child { margin-bottom:0; }
.admin-form-row label { display:block; font-size:.8rem; font-weight:600; color:var(--text-light); margin-bottom:4px; }
.admin-form-row input,
.admin-form-row textarea,
.admin-form-row select {
    width:100%; padding:10px 14px;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-size:.9rem; font-family:inherit; outline:none;
    transition:border-color var(--transition); background:var(--card);
}
.admin-form-row input:focus,
.admin-form-row textarea:focus,
.admin-form-row select:focus { border-color:var(--primary); }
.admin-form-row textarea { resize:vertical; min-height:60px; }
.admin-form-row-inline { display:flex; gap:12px; }
.admin-form-row-inline > * { flex:1; }
.admin-form-file { font-size:.85rem; color:var(--text-light); }
.admin-form-file input[type="file"] { padding:8px 0; border:none; }
.admin-form-actions { display:flex; gap:8px; margin-top:16px; }

.btn {
    padding:10px 24px; border:none; border-radius:50px;
    font-size:.9rem; font-weight:600; cursor:pointer;
    transition:all var(--transition);
}
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; }
.btn-outline { background:var(--bg); color:var(--text); border:1.5px solid var(--border); }

.admin-product-list { display:flex; flex-direction:column; gap:8px; }
.admin-product-item {
    background:var(--card); border-radius:var(--radius);
    padding:12px 16px; box-shadow:var(--shadow-sm);
    display:flex; align-items:center; gap:12px;
}
.admin-product-item.unavailable { opacity:.45; }
.admin-product-item.editing { box-shadow:0 0 0 2px var(--primary); }
.admin-product-img { width:48px; height:48px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; background:var(--bg-warm); }
.admin-product-img-placeholder {
    width:48px; height:48px; border-radius:var(--radius-sm); flex-shrink:0;
    background:var(--bg-warm); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.admin-product-info { flex:1; min-width:0; }
.admin-product-name { font-size:.9rem; font-weight:600; }
.admin-product-meta { font-size:.75rem; color:var(--text-light); }
.admin-product-cat {
    display:inline-block; padding:1px 8px; border-radius:50px;
    background:var(--bg-warm); color:var(--primary); font-size:.7rem; font-weight:600;
}
.admin-product-actions { display:flex; gap:4px; flex-shrink:0; }
.btn-sm {
    padding:6px 14px; border:none; border-radius:50px;
    font-size:.78rem; font-weight:600; cursor:pointer;
    transition:all var(--transition);
}
.btn-sm:active { transform:scale(.95); }
.btn-sm-edit { background:var(--bg); color:var(--text); }
.btn-sm-del { background:var(--bg-warm); color:var(--primary); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(12px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes toastBounce {
    0% { transform:scale(0); }
    60% { transform:scale(1.2); }
    100% { transform:scale(1); }
}
@keyframes badgePulse {
    0%,100% { transform:scale(1); }
    50% { transform:scale(1.25); }
}
.badge-pulse { animation:badgePulse .3s ease; }

/* ============================================================
   Theme Switcher
   ============================================================ */
.theme-btn {
    position: fixed;
    bottom: calc(80px + var(--safe-bottom));
    right: 16px;
    z-index: 250;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--card);
    box-shadow: var(--shadow);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition);
}
.theme-btn:active { transform: scale(.9); }

.theme-panel {
    display: none;
    position: fixed;
    bottom: calc(128px + var(--safe-bottom));
    right: 16px;
    z-index: 251;
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-lg);
}
.theme-panel.show { display: flex; gap: 8px; }

.theme-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}
.theme-dot:active { transform: scale(.9); }
.theme-dot.active { border-color: var(--text); }
.theme-dot.chocolate { background: #a0522d; }
.theme-dot.blue { background: #3b82f6; }
.theme-dot.purple { background: #8b5cf6; }
.theme-dot.pink { background: #f472b6; }
.theme-dot.mint { background: #14b8a6; }