/* ==========================================
   Plum Box - Plum Design System (console register)
   ==========================================
   Tokens below come from the Plum design system (claude.ai/design
   "Plum Box"): a cool paper→ink neutral scale, Pretendard, tight console
   radii and two soft shadows. The Box UI is strictly monochrome, so the
   wine accent is neutralised to ink/paper — selection, hover and primary
   actions read black-and-white. Semantic status colors and file-type
   tints stay chromatic.

   The legacy variable names (--bg-primary, --text-secondary, …) are kept
   and re-pointed at the DS primitives so the ~11k lines of existing rules
   below keep working untouched. New rules should prefer the primitives
   (--ink, --muted, --faint, --line, --surface) because they are
   unambiguous; note the legacy --text-muted is the *faintest* tone
   (= --faint), not the DS "muted".
   ========================================== */

@font-face {
    font-family: "Pretendard Variable";
    src: url("../fonts/PretendardVariable.woff2?v=1") format("woff2-variations");
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
}

/* Hangul for mono stacks. Mono fonts carry no Hangul, so Korean inside mono
   data ("47분 전", "연결 끊김") fell back to a wide CJK monospace. This alias
   covers Hangul only: Latin and digits still fall through to the mono font. */
@font-face {
    font-family: "Plum Mono Hangul";
    src: url("../fonts/PretendardVariable.woff2?v=1") format("woff2-variations");
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
}

/* Base Variables (Default to Dark) */
:root {
    color-scheme: light dark;

    /* ---- DS type ---- */
    --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR",
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Menlo", Consolas, "Plum Mono Hangul", monospace;
    --w-light: 340;
    --w-regular: 440;
    --w-medium: 520;
    --w-semibold: 620;
    --w-bold: 720;
    --track-tight: -0.018em;
    --track-eyebrow: 0.1em;

    /* ---- DS radii (console, tight) ---- */
    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-pill: 999px;

    /* ---- DS effects ---- */
    --shadow: 0 1px 2px rgba(16, 16, 18, .04), 0 8px 28px -12px rgba(16, 16, 18, .12);
    --shadow-lift: 0 2px 6px rgba(16, 16, 18, .05), 0 20px 48px -20px rgba(16, 16, 18, .18);
    --ease-out-soft: cubic-bezier(0.32, 0.72, 0, 1);

    /* ---- DS neutral scale (dark is the default register) ---- */
    --paper: #0A0A0B;
    --surface: #151517;
    --surface-2: #1C1C1F;
    --ink: #F4F4F5;
    --ink-soft: #C8C8CE;
    --muted: #97979F;
    --faint: #6A6A72;
    --line: #26262A;
    --line-strong: #34343A;

    /* ---- DS semantic status ---- */
    --status-live: #5FBE92;
    --status-review: #D2A05E;
    --status-rejected: #DE8686;
    --status-draft: #90909A;

    /* ---- DS semantic aliases (monochrome console accent) ---- */
    --bg: var(--paper);
    --bg-band: var(--surface-2);
    --text: var(--ink);
    --text-faint: var(--faint);
    --border: var(--line);
    --border-strong: var(--line-strong);
    --accent: var(--ink);
    --on-accent: var(--paper);
    --accent-wash: color-mix(in srgb, var(--ink) 7%, transparent);
    --focus-ring: var(--ink);
    --ring-focus: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);

    /* ---- Legacy names, re-pointed at the DS scale ---- */
    --bg-primary: var(--paper);
    --bg-secondary: var(--surface);
    --bg-tertiary: var(--surface-2);
    --bg-hover: var(--accent-wash);
    --border-color: var(--line);
    --border-light: var(--line-strong);

    --text-primary: var(--ink);
    --text-secondary: var(--muted);
    --text-muted: var(--faint);

    --accent-color: var(--ink);
    /* Monochrome Accent */
    --accent-hover: var(--ink-soft);

    --success: var(--status-live);
    --error: var(--status-rejected);
    --warning: var(--status-review);

    /* Spacing */
    --sidebar-width: 236px;
    --header-height: 56px;
    --mobile-header-height: 50px;
    --mobile-tab-height: 50px;

    /* Animation */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;

    /* Overlay */
    --overlay-bg: rgba(91, 112, 131, 0.4);
    --photo-viewer-bg: rgba(0, 0, 0, 0.95);
    --gradient-overlay: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

    /* Scrollbar */
    --scrollbar-track: transparent;
    --scrollbar-thumb: #333333;

    /* Download Section */
    --download-card-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --download-card-shadow-hover: 0 4px 16px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
    --download-active-gradient: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(59,130,246,0.02));
    --download-active-border: rgba(59,130,246,0.2);
    --progress-height: 6px;
    --blue: #3b82f6;

    /* Settings */
    --toggle-thumb: var(--surface);
}

/* ------------------------------------------------------------------
   Theme registers. Only the DS primitives flip; every legacy alias
   above (and every new rule that uses --ink/--line/--surface) follows
   automatically, so a theme is ~14 declarations instead of 14 × N.
   ------------------------------------------------------------------ */

/* Light Mode Override */
@media (prefers-color-scheme: light) {
    :root {
        --paper: #FCFCFC;
        --surface: #FFFFFF;
        --surface-2: #F6F6F7;
        --ink: #101012;
        --ink-soft: #3A3A40;
        --muted: #6E6E76;
        --faint: #9A9AA1;
        --line: #ECECEE;
        --line-strong: #DEDEE1;

        --status-live: #2E7D5B;
        --status-review: #A9741F;
        --status-rejected: #A83A3A;
        --status-draft: #85858C;

        --scrollbar-thumb: #d8d8dc;
        --photo-viewer-bg: rgba(255, 255, 255, 0.95);
        /* Keep the dark gradient for text readability on images */
        --gradient-overlay: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    }
}

/* Manual Theme Override - Dark */
[data-theme="dark"] {
    /* Native widgets (scrollbars, <select> popups, checkboxes, date pickers)
       are drawn by the browser from color-scheme, NOT from our variables. The
       :root default is "light dark", which follows the OS — so picking Dark in
       the app while the OS is Light rendered a white scrollbar band down the
       right edge of every scroll area. Pin it to the chosen theme. */
    color-scheme: dark;

    --paper: #0A0A0B;
    --surface: #151517;
    --surface-2: #1C1C1F;
    --ink: #F4F4F5;
    --ink-soft: #C8C8CE;
    --muted: #97979F;
    --faint: #6A6A72;
    --line: #26262A;
    --line-strong: #34343A;

    --status-live: #5FBE92;
    --status-review: #D2A05E;
    --status-rejected: #DE8686;
    --status-draft: #90909A;

    --scrollbar-thumb: #34343A;
    --photo-viewer-bg: rgba(0, 0, 0, 0.95);
    --gradient-overlay: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* Manual Theme Override - Light */
[data-theme="light"] {
    color-scheme: light;

    --paper: #FCFCFC;
    --surface: #FFFFFF;
    --surface-2: #F6F6F7;
    --ink: #101012;
    --ink-soft: #3A3A40;
    --muted: #6E6E76;
    --faint: #9A9AA1;
    --line: #ECECEE;
    --line-strong: #DEDEE1;

    --status-live: #2E7D5B;
    --status-review: #A9741F;
    --status-rejected: #A83A3A;
    --status-draft: #85858C;

    --scrollbar-thumb: #d8d8dc;
    --photo-viewer-bg: rgba(255, 255, 255, 0.95);
    --gradient-overlay: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    font-weight: var(--w-regular);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Korean copy wraps at 어절 boundaries, never mid-word (DS base). */
:lang(ko),
body {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ... (Keep minimal changes to Desktop layout for now, focus on variables applying correctly) ... */
/* Desktop Sidebar / Header styles reuse the variables defined above */

/* ==========================================
   Layout
   ========================================== */

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ... (Existing Desktop styles remain broadly valid due to variable usage) ... */

/* Mobile PWA Layout */
@media (max-width: 640px) {

    /* Hide Desktop Elements */
    .header,
    .drive-sidebar,
    .download-sidebar,
    .section-header,
    /* We will create custom mobile headers if needed or reuse logic */
    .drive-header,
    .download-header,
    .nav,
    .header .search-box,
    .user-btn,
    #new-menu,
    #user-menu,
    #download-add-menu {
        display: none !important;
    }

    /* Core Layout */
    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }

    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: 0;
    }

    .app {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        background: var(--bg-primary);
        position: relative;
    }

    /* Keep simple for PWA */

    .main-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        /* Padding top accommodates Header + Chip Nav (if present) */
        padding-top: var(--mobile-header-height);
        padding-bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom));
        overflow: hidden;
        background: var(--bg-primary);
    }

    .toast-container {
        padding: 16px 16px calc(var(--mobile-tab-height) + env(safe-area-inset-bottom) + 12px);
        align-items: stretch;
    }

    .toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    /* Sections */
    .section {
        display: none !important;
        flex: 1;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-primary);
    }

    .section.active {
        display: flex !important;
    }

    .section-content,
    .drive-content,
    .download-content {
        flex: 1;
        padding: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    /* --- Mobile Header --- */
    .mobile-header {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--mobile-header-height);
        padding-top: env(safe-area-inset-top);
        align-items: center;
        justify-content: space-between;
        padding: env(safe-area-inset-top) 12px 0 12px;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        z-index: 100;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        gap: 12px;
    }

    .mobile-header.hidden {
        justify-content: center !important;
        height: 50px !important;
    }

    .mobile-header.hidden .mobile-search-container,
    .mobile-header.hidden .mobile-profile {
        display: none !important;
    }

    .mobile-header.hidden::after {
        content: 'More';
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-header.hidden-shared {
        display: none !important;
    }

    /* Simple backdrop hack if needed: can just use opacities if we defined RGB components. 
       For "X.com style", solid or high-blur is fine. */

    /* Mobile Search Container */
    .mobile-search-container {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        background: var(--bg-tertiary);
        border-radius: 20px;
        padding: 8px 16px;
        gap: 8px;
    }

    .search-icon {
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .mobile-search-input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: var(--text-primary);
        font-size: 16px;
        font-family: inherit;
    }

    .mobile-search-input::placeholder {
        color: var(--text-secondary);
    }

    /* Mobile Profile */
    .mobile-profile-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-fast);
    }

    .mobile-profile-btn:hover,
    .mobile-profile-btn:active {
        background: var(--bg-hover);
    }

    .profile-avatar-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        text-transform: uppercase;
    }

    /* Mobile Folder Header */
    .mobile-folder-header {
        display: none !important;
    }

    .mobile-folder-nav {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-back-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        transition: all var(--transition-fast);
    }

    .mobile-back-btn:hover,
    .mobile-back-btn:active {
        background: var(--bg-hover);
    }

    .mobile-folder-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Drive Navigation Chips (New) --- */
    .mobile-drive-chips {
        display: flex !important;
        overflow-x: auto;
        padding: 8px 12px;
        gap: 8px;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        scrollbar-width: none;
        /* Hide scrollbar */
    }

    .mobile-drive-chips::-webkit-scrollbar {
        display: none;
    }

    .drive-chip {
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .drive-chip.active {
        background: var(--text-primary);
        /* Invert colors for active state */
        color: var(--bg-primary);
        border-color: var(--text-primary);
        font-weight: 600;
    }

    /* --- Mobile Controls Container --- */
    .mobile-controls-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        background: var(--bg-primary);
    }

    .mobile-controls-left {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }

    /* Hide drive header border on mobile */
    .drive-header {
        border-bottom: none;
    }

    .mobile-sort-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 20px;
        transition: background-color 0.2s ease;
    }

    .mobile-drive-back-btn {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-primary);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease;
        flex-shrink: 0;
    }

    .mobile-drive-back-btn:active,
    .mobile-drive-back-btn:hover {
        background: var(--bg-hover);
    }

    .mobile-drive-back-btn[hidden] {
        display: none !important;
    }

    .mobile-sort-btn:active {
        background: var(--bg-hover);
    }

    .sort-direction {
        margin-left: 4px;
        color: var(--text-secondary);
        font-size: 14px;
        line-height: 1;
        display: inline-block;
        vertical-align: text-top;
        position: relative;
        top: 0px;
        border: none !important;
        border-top: none !important;
    }

    /* Rotation handled above */

    /* Legacy support for existing active class */
    .mobile-sort-btn.active .sort-direction {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* --- Mobile Sort Popup --- */
    .mobile-sort-popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        display: none;
        align-items: flex-end;
        justify-content: center;
        padding: 16px;
        padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
    }

    .mobile-sort-popup.active {
        display: flex !important;
    }

    .sort-popup-content {
        background: var(--bg-primary);
        border-radius: 20px;
        max-width: 400px;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        animation: slideUpScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sort-popup-header {
        padding: 20px 20px 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .sort-popup-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .sort-options,
    .sort-direction-section {
        padding: 8px 0;
    }

    .sort-direction-section {
        border-top: 1px solid var(--border-color);
    }

    .sort-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 20px;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 16px;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .sort-option:active {
        background: var(--bg-hover);
    }

    .sort-option .check-icon {
        color: var(--accent-color);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .sort-option.active .check-icon {
        opacity: 1;
    }

    /* --- File Grid & List --- */
    .file-container {
        padding: 2px;
    }

    .file-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding-bottom: 20px;
    }

    .file-item {
        background: var(--bg-tertiary);
        /* Card-like background */
        border: 1px solid var(--border-color);
        /* Subtle border */
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .file-item:active {
        background: var(--bg-hover);
        transform: scale(0.98);
        transition: transform 0.1s;
    }

    .file-icon {
        width: 48px;
        height: 48px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

    .file-icon svg {
        width: 32px;
        height: 32px;
        color: var(--text-primary);
    }

    .file-icon .file-emoji {
        font-size: 28px;
        line-height: 1;
    }

    .file-icon.folder svg {
        fill: var(--text-primary);
        /* Solid folder icon */
    }

    .file-icon.icon-image,
    .file-icon.icon-video,
    .file-icon.icon-document,
    .file-icon.icon-spreadsheet,
    .file-icon.icon-presentation,
    .file-icon.icon-code,
    .file-icon.icon-audio,
    .file-icon.icon-archive,
    .file-icon.icon-default {
        background: var(--bg-tertiary);
        border-radius: 12px;
    }

    .file-name {
        font-size: 13px;
        color: var(--text-primary);
        font-weight: 500;
        line-height: 1.3;
        width: 100%;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .file-meta {
        font-size: 11px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    .file-star {
        display: block;
        /* Show star if wanted, or keep hidden for minimalism */
        position: absolute;
        top: 8px;
        right: 8px;
        opacity: 0;
    }

    .file-item.starred .file-star {
        opacity: 1;
    }

    .file-star svg {
        width: 14px;
        height: 14px;
        fill: var(--warning);
        color: var(--warning);
    }

    /* List View Overrides */
    .file-list .file-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        padding: 12px 0;
    }

    .file-list .file-icon {
        width: 40px;
        height: 40px;
        margin: 0 12px 0 0;
        background: var(--bg-tertiary);
        border-radius: 8px;
    }

    .file-list .file-name {
        font-size: 14px;
        margin-bottom: 2px;
    }

    /* Mobile file layout - horizontal */
    .mobile-file-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex: 1;
    }

    /* --- Photos Section --- */
    /* Outer container stays block: month sections stack vertically. The
       justified rows live on the inner .photo-date-group-grid (base rules);
       cell sizes are inline px from JS, so mobile only restyles chrome —
       the smaller target row height comes from the width breakpoint in
       photoTargetRowHeight (app.js), not from CSS overrides. */
    .photo-grid {
        display: block !important;
        background: var(--bg-primary);
        padding: 0 !important;
    }

    .photo-item {
        background: var(--bg-tertiary);
        border-radius: 0;
        border: none;
        position: relative;
    }

    /* --- Download Section --- */
    .download-list {
        display: flex;
        flex-direction: column;
    }

    .download-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-primary);
    }

    .download-icon {
        width: 40px;
        height: 40px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        color: var(--text-primary);
    }

    .download-info {
        flex: 1;
        min-width: 0;
    }

    .download-filename {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .download-status {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 12px;
        background: var(--bg-tertiary);
        color: var(--text-secondary);
        border: none;
    }

    /* --- Tab Bar --- */
    .mobile-tab-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        z-index: 1000;
        /* Simple backdrop filter for some translucency if supported */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .tab-item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-secondary);
        /* Inactive color */
        cursor: pointer;
        padding-top: 4px;
    }

    .tab-item svg {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        stroke-width: 2;
    }

    .tab-item span {
        font-size: 10px;
        font-weight: 500;
    }

    .tab-item.active {
        color: var(--text-primary);
        /* Active Color (White/Black) */
    }

    .tab-item.active svg {
        stroke-width: 2.5;
        fill: var(--text-primary);
        /* Fill icon for X.com style bold active state */
        stroke: var(--text-primary);
    }

    /* SVG paths usually are stroke-based, so fill might cover everything. 
       Let's stick to stroke or ensure icons are designed for fill. 
       For standard Lucide/Feather icons, filling usually works if paths are closed, 
       but stroke-width increase is safer for "bold" look. 
    */
    .tab-item.active svg {
        fill: none;
        /* Revert fill attempt */
        stroke: var(--text-primary);
        stroke-width: 3;
    }

    /* --- FAB --- */
    .fab {
        display: flex !important;
        position: fixed;
        right: 16px;
        bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom) + 16px);
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background: var(--accent-color);
        /* Monochrome accent */
        color: var(--bg-primary);
        /* Invert text color on FAB */
        border: none;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1001;
    }

    .fab svg {
        width: 28px;
        height: 28px;
        stroke-width: 2.5;
    }

    /* --- Tab FAB Button Animation --- */
    .tab-fab {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        width: 48px;
        height: 48px;
        border-radius: 24px;
        background: var(--accent-color);
        color: var(--bg-primary);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        margin: 0 4px;
        flex-shrink: 0;
    }

    .tab-fab.active {
        background: var(--accent-color);
        transform: rotate(45deg);
        opacity: 0.8;
    }

    .tab-fab.active svg {
        color: var(--bg-primary);
    }

    .tab-fab svg {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tab-fab:active {
        transform: scale(0.95);
    }

    .tab-fab.active:active {
        transform: rotate(45deg) scale(0.95);
    }

    .tab-fab svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.5;
    }

    /* Hide tab bar and header on auth screens */
    body.auth-mode .mobile-tab-bar,
    body.auth-mode .mobile-header {
        display: none !important;
    }

    /* --- Auth & Modals --- */
    .auth-screen {
        background: var(--bg-primary) !important;
    }

    .auth-box {
        background: transparent;
        border: none;
    }

    .auth-box input,
    .modal-input {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    .modal-content {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    .dropdown-menu {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
    }

    .dropdown-item {
        color: var(--text-primary);
    }

    .dropdown-item:active {
        background: var(--bg-hover);
    }

    /* 탭 하이라이트 제거 */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    /* 오버레이 스크롤바 - 스크롤 시에만 표시, 공간 차지 안함 */
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
    }

    *::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background: transparent;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, 0.4);
        border-radius: 4px;
    }

    *::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 128, 128, 0.6);
    }

    /* 스크롤바가 콘텐츠 위에 오버레이 되도록 */
    body,
    .section,
    .photos-content,
    .drive-content,
    .file-list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Hide mobile elements on desktop */
@media (min-width: 641px) {

    .mobile-header,
    .mobile-tab-bar,
    .mobile-drive-chips,
    .mobile-action-sheet,
    .mobile-context-menu,
    .mobile-controls-container {
        display: none !important;
    }
}

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

.header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-right {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.5px;
    cursor: pointer;
}

.logo-icon {
    color: var(--text-primary);
}

.logo-inner {
    fill: var(--bg-primary);
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item svg {
    opacity: 0.7;
}

.nav-item.active svg,
.nav-item:hover svg {
    opacity: 1;
}

/* Search Box */
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    width: 320px;
    transition: all var(--transition-fast);
}

.search-box:focus-within {
    background: var(--bg-primary);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.search-box svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-advanced-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -8px -4px 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.search-advanced-btn:hover,
.search-advanced-btn.is-active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.search-advanced-btn[hidden] {
    display: none !important;
}

.drive-adv-search {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: min(420px, 100%);
}

.drive-adv-search-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drive-adv-search-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.drive-adv-search-row input,
.drive-adv-search-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.drive-adv-location {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drive-adv-location-value {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drive-adv-location .btn {
    flex-shrink: 0;
}

.theme-toggle {
    position: relative;
    width: 102px;
    height: 38px;
    margin-left: 12px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 1px 2px rgba(0, 0, 0, 0.08);
    color: #7e8697;
    cursor: pointer;
    transition: background var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}

.theme-toggle:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 3px 8px rgba(0, 0, 0, 0.12);
}

.theme-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    font-size: 9px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform var(--transition-normal), color var(--transition-normal), opacity var(--transition-normal);
}

.theme-toggle-title,
.theme-toggle-subtitle {
    display: block;
}

.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #eef1f6 100%);
    color: #c7cdd8;
    box-shadow:
        0 2px 6px rgba(84, 94, 116, 0.32),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
    transition: transform var(--transition-normal), background var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
}

.theme-icon {
    position: absolute;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.theme-icon-light {
    opacity: 0;
    transform: scale(0.85);
}

.theme-icon-dark {
    opacity: 1;
    transform: scale(1);
}

[data-resolved-theme="light"] .theme-toggle {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: #8d94a4;
}

[data-resolved-theme="light"] .theme-toggle-copy {
    margin-left: 36px;
    color: #8d94a4;
}

[data-resolved-theme="light"] .theme-toggle-knob {
    transform: translateX(0);
    background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
    color: #d5d9e1;
}

[data-resolved-theme="light"] .theme-icon-light {
    opacity: 1;
    transform: scale(1);
}

[data-resolved-theme="light"] .theme-icon-dark {
    opacity: 0;
    transform: scale(0.85);
}

[data-resolved-theme="dark"] .theme-toggle {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: #7f879d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-resolved-theme="dark"] .theme-toggle-copy {
    margin-left: 10px;
    color: #7f879d;
}

[data-resolved-theme="dark"] .theme-toggle-knob {
    transform: translateX(66px);
    background: linear-gradient(180deg, #8991a7 0%, #727a91 100%);
    color: #f2f5fb;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.36),
        inset 0 1px 1px rgba(255, 255, 255, 0.22);
}

[data-resolved-theme="dark"] .theme-icon-light {
    opacity: 0;
    transform: scale(0.85);
}

[data-resolved-theme="dark"] .theme-icon-dark {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================
   Main Body
   ========================================== */

.main-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.section {
    display: none;
    flex: 1;
    min-width: 0;
}

.section.active {
    display: flex;
}

.section-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

/* ==========================================
   Drive Sidebar
   ========================================== */

.drive-sidebar {
    width: clamp(156px, 22vw, var(--sidebar-width));
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow-y: auto;
    flex: 0 1 clamp(156px, 22vw, var(--sidebar-width));
    min-width: 156px;
    max-width: var(--sidebar-width);
}

.new-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.new-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: var(--bg-tertiary);
}

.drive-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-divider {
    height: 12px;
}

.drive-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-fast);
    min-width: 0;
}

.new-btn span,
.drive-nav-item span,
.storage-header span,
.storage-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drive-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.drive-nav-item.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.drive-nav-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.drive-nav-item.active svg {
    opacity: 1;
}

/* Storage Section */
.storage-section {
    margin-top: auto;
    padding: 16px 14px;
    border-top: 1px solid var(--border-color);
}

.storage-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.storage-header svg {
    opacity: 0.7;
}

.storage-bar-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.storage-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.storage-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    transition: width var(--transition-normal);
}

.storage-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================
   Drive Content
   ========================================== */

.drive-content {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.drive-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    /* 제목 아래 구분선은 두지 않는다 — 아래 도구 줄과 파일 목록이 이미
       같은 면이라 선이 하나 더 그어지면 화면이 두 조각으로 읽힌다. */
    min-width: 0;
    overflow: visible;
    position: relative;
    z-index: 6;
}

/* Toolbar row under the header: hosts the filter chips normally, and the
   selection bar swaps into the SAME slot while items are selected. The row
   keeps one fixed height so the file list never jumps on mode changes. */
.drive-toolbar-row {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 6px 24px;
    position: relative;
    z-index: 5;
}
.drive-toolbar-row[hidden] { display: none; }

.drive-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.drive-filter-bar[hidden] { display: none; }
/* How many items the current view actually shows — right-aligned mono, the
   quiet counterweight to the filter chips (design §2). */
.drive-item-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.drive-filter-chip-wrap { position: relative; }
.drive-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.drive-filter-chip:hover { background: var(--bg-hover); }
.drive-filter-chip.is-active {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
}
.drive-filter-chip svg { color: var(--text-secondary); }
.drive-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 170px;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 30;
}
.drive-filter-menu[hidden] { display: none; }
.drive-filter-option {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.drive-filter-option:hover { background: var(--bg-hover); }
.drive-filter-option.is-selected {
    color: var(--accent-color);
    font-weight: 600;
}
.drive-filter-clear {
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 8px;
}
.drive-filter-clear:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Multi-select bar (Google Drive style): a rounded accent-tinted strip that
   takes the filter bar's place while a selection exists. */
.drive-selection-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-primary));
}
.drive-selection-bar[hidden] { display: none; }
.drive-sel-close,
.drive-sel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}
/* Author display:inline-flex above beats the UA [hidden] rule — without this,
   Trash still shows Share/Download/Move and My Drive shows a phantom Restore. */
.drive-sel-close[hidden],
.drive-sel-btn[hidden] {
    display: none !important;
}
.drive-sel-close:hover,
.drive-sel-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
}
.drive-sel-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.drive-sel-btn.danger:hover:not(:disabled) { color: #ef4444; }
.drive-sel-btn.is-active { color: var(--accent-color); }
.drive-sel-btn.is-starred,
.drive-sel-btn.is-starred svg {
    color: var(--warning, #f59e0b);
    fill: currentColor;
}
.drive-sel-count {
    margin: 0 10px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.drive-sel-divider {
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: color-mix(in srgb, var(--text-secondary) 30%, transparent);
}

.drive-folder-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.drive-folder-picker-path {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}
.drive-folder-picker-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
}
.drive-folder-picker-back:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.drive-folder-picker-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.drive-folder-picker-header {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}
.drive-folder-picker-row {
    display: grid;
    grid-template-columns: 1fr auto 120px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}
.drive-folder-picker-row:last-child { border-bottom: 0; }
.drive-folder-picker-row:hover { background: var(--bg-hover); }
.drive-folder-picker-row.is-selected {
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.drive-folder-picker-row.is-file {
    color: var(--text-muted);
    cursor: default;
    opacity: 0.55;
}
.drive-folder-picker-row.is-file:hover {
    background: transparent;
}
.drive-folder-picker-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drive-folder-picker-date {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}
.drive-folder-picker-select {
    display: none;
    padding: 4px 12px;
    border: none;
    border-radius: 999px;
    background: var(--accent-color, #1a73e8);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.drive-folder-picker-row:hover .drive-folder-picker-select,
.drive-folder-picker-row.is-selected .drive-folder-picker-select {
    display: inline-flex;
}
.drive-folder-picker-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.drive-folder-picker-enter:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.drive-folder-picker-row.mode-move {
    display: flex;
    grid-template-columns: unset;
}
.drive-folder-picker-row.mode-move .drive-folder-picker-name {
    flex: 1;
}
.drive-folder-picker-row.mode-move .drive-folder-picker-enter {
    margin-left: auto;
}

.open-with-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.open-with-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}
.open-with-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

/* Selected rows/cards: accent tint, like the reference. Selection uses
   click/shift/ctrl, so row text must not highlight on shift-click. */
#drive-files .file-item {
    user-select: none;
    -webkit-user-select: none;
}
#drive-files .file-item.selected,
#drive-files .file-item.selected:hover {
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.drive-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.drive-back-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.drive-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.drive-back-btn[hidden] {
    display: none !important;
}

.drive-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    min-width: max-content;
}

.drive-empty-trash-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--danger-color, #dc2626) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger-color, #dc2626) 10%, transparent);
    color: var(--danger-color, #dc2626);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.drive-empty-trash-btn:hover {
    background: color-mix(in srgb, var(--danger-color, #dc2626) 18%, transparent);
    border-color: color-mix(in srgb, var(--danger-color, #dc2626) 60%, transparent);
}

.drive-empty-trash-btn[hidden] {
    display: none;
}

.sort-dropdown {
    position: relative;
    flex-shrink: 0;
    z-index: 12;
}

.sort-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sort-dropdown-btn:hover {
    background: var(--bg-hover);
}

.desktop-sort-label {
    white-space: nowrap;
}

.desktop-sort-indicator {
    color: var(--text-secondary);
    min-width: 10px;
    text-align: center;
}

.sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    padding: 8px 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 30;
    pointer-events: none;
}

.sort-dropdown.open .sort-dropdown-menu,
.sort-dropdown:focus-within .sort-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sort-dropdown.open .sort-dropdown-btn {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

.sort-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.sort-dropdown-item:hover {
    background: var(--bg-hover);
}

.sort-dropdown-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--border-color);
}

.sort-dropdown-check {
    opacity: 0;
    color: var(--accent-color);
}

.sort-dropdown-item.active .sort-dropdown-check {
    opacity: 1;
}

.drive-title h2 {
    font-size: 18px;
    font-weight: 500;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.breadcrumb-item {
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.breadcrumb-item:last-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.breadcrumb-separator {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    flex-shrink: 0;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-btn:hover {
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.view-btn[data-view="list"] svg {
    transform: translateX(-2px);
}

/* File Container */
.file-container {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
    position: relative;
    transition: all 0.2s ease;
}

/* Drag and Drop Styles */
.file-container.drag-over {
    background: var(--bg-tertiary);
    border: 2px dashed var(--accent-color);
    border-radius: 12px;
    opacity: 0.8;
}

.drag-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    padding: 32px 48px;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 2px dashed var(--accent-color);
    pointer-events: none;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
    .drag-overlay {
        background: rgba(22, 24, 28, 0.95);
        color: var(--text-primary);
    }
}

/* ==========================================
   File Grid
   ========================================== */

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.file-grid .file-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.file-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

.file-item.selected {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--accent-color);
}

.file-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 10px;
}

.file-icon svg {
    width: 28px;
    height: 28px;
    color: var(--text-primary);
}

.file-icon.drive-file-icon,
.bottom-sheet-file-icon.drive-file-icon {
    background: transparent;
}

.file-icon.drive-file-icon svg {
    width: 32px;
    height: 32px;
    color: initial;
}

.file-icon .file-emoji {
    font-size: 28px;
    line-height: 1;
}

.file-icon.folder svg {
    color: var(--text-primary);
    fill: var(--text-primary);
}

.file-icon.icon-image {
    background: rgba(168, 85, 247, 0.12);
}

.file-icon.icon-video {
    background: rgba(239, 68, 68, 0.12);
}

.file-icon.icon-document {
    background: rgba(59, 130, 246, 0.12);
}

.file-icon.icon-spreadsheet {
    background: rgba(34, 197, 94, 0.14);
}

.file-icon.icon-presentation {
    background: rgba(249, 115, 22, 0.14);
}

.file-icon.icon-code {
    background: rgba(99, 102, 241, 0.14);
}

.file-icon.icon-audio {
    background: rgba(236, 72, 153, 0.12);
}

.file-icon.icon-archive {
    background: rgba(234, 179, 8, 0.12);
}

.file-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.file-card-body {
    padding: 12px 14px 14px;
    text-align: left;
}

.file-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1.25 / 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.1));
    overflow: hidden;
}

.file-preview-generic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-generic .file-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 0;
}

.file-preview-image,
.file-preview-video,
.file-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    background: var(--bg-tertiary);
}

.file-preview-video {
    pointer-events: none;
}

.file-preview-frame {
    pointer-events: none;
}

.file-preview-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    z-index: 2;
}

.file-preview-badge svg {
    width: 16px;
    height: 16px;
}

.file-preview-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    z-index: 2;
    backdrop-filter: blur(6px);
}

.file-preview-play svg {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.file-preview-doc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-preview-doc-paper {
    position: relative;
    width: min(112px, 56%);
    height: min(142px, 78%);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.file-preview-doc-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: rgba(15, 23, 42, 0.08);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.file-preview-doc-ext {
    padding: 18px 16px 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.file-preview-doc-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}

.file-preview-doc-lines span {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
}

.file-preview-doc-lines span:nth-child(1) {
    width: 72%;
}

.file-preview-doc-lines span:nth-child(2) {
    width: 84%;
}

.file-preview-doc-lines span:nth-child(3) {
    width: 58%;
}

.file-preview-doc.document {
    background: linear-gradient(180deg, rgba(66, 133, 244, 0.12), rgba(66, 133, 244, 0.04));
}

.file-preview-doc.document .file-preview-doc-ext {
    color: #4285F4;
}

.file-preview-doc.spreadsheet {
    background: linear-gradient(180deg, rgba(52, 168, 83, 0.12), rgba(52, 168, 83, 0.04));
}

.file-preview-doc.spreadsheet .file-preview-doc-ext {
    color: #34A853;
}

.file-preview-doc.presentation {
    background: linear-gradient(180deg, rgba(251, 188, 5, 0.16), rgba(251, 188, 5, 0.05));
}

.file-preview-doc.presentation .file-preview-doc-ext {
    color: #F9AB00;
}

.file-preview-doc.code {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04));
}

.file-preview-doc.code .file-preview-doc-ext {
    color: #6366F1;
}

.file-star {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 3;
    padding: 4px;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    /* The list-view star is a <button>: strip the UA default border/outline so
       hovering it doesn't draw a black circular ring around the star. */
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.file-star:hover,
.file-star:focus,
.file-star:focus-visible,
.file-star:active {
    outline: none;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Star is a hover-only affordance now: it appears when the row/card is hovered
   (filled yellow if already starred, outline if not). It no longer stays
   permanently visible on starred items — the Starred view is the at-a-glance
   list. */
.file-item:hover .file-star {
    opacity: 1;
}

.file-star svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.file-item.starred .file-star svg {
    color: var(--warning);
    fill: var(--warning);
}

.file-list .file-star {
    padding: 4px;
    background: transparent;
    box-shadow: none;
    position: static;
    opacity: 0;
    flex-shrink: 0;
}

.file-list .file-item:hover .file-star {
    opacity: 1;
}

/* File List View */
.file-list {
    display: flex;
    flex-direction: column;
}

.file-list .file-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.file-list .file-item:first-child {
    border-radius: 8px 8px 0 0;
}

.file-list .file-item:last-child {
    border-radius: 0 0 8px 8px;
}

.file-list .file-icon {
    margin-bottom: 0;
    width: 36px;
    height: 36px;
}

.file-list .file-info {
    flex: 1;
    min-width: 0;
}

.file-list .file-date {
    font-size: 12px;
    color: var(--text-muted);
    width: 120px;
    text-align: right;
}

.file-list .file-size {
    font-size: 12px;
    color: var(--text-muted);
    width: 80px;
    text-align: right;
}

/* Mobile File List Layout - TEMPORARILY DISABLED */

.file-options-btn {
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.file-options-btn:hover {
    background: var(--bg-hover) !important;
}

.file-options-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    opacity: 0.2;
}

.empty-state h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.empty-state p {
    font-size: 13px;
}

/* ==========================================
   Dropdown Menu
   ========================================== */

.dropdown-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100;
    display: none;
}

.dropdown-menu.active {
    display: block;
    animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item svg {
    color: var(--text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* ==========================================
   Context Menu
   ========================================== */

.context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 200;
    display: none;
}

.context-menu.active {
    display: block;
    animation: dropdownFadeIn 0.1s ease;
}

.context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.context-item[hidden] {
    display: none !important;
}

.context-item:hover {
    background: var(--bg-hover);
}

.context-item svg {
    color: var(--text-secondary);
}

.context-item.danger {
    color: var(--error);
}

.context-item.danger svg {
    color: var(--error);
}

.context-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.btn-primary {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.actions {
    display: flex;
    gap: 12px;
}

/* ==========================================
   Section Header
   ========================================== */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-header h2 {
    font-size: 20px;
    font-weight: 600;
}

/* ==========================================
   Photos Section Layout (Sidebar + Content)
   ========================================== */

#photos-section {
    height: 100%;
    position: relative;
}

#photos-section.active {
    display: flex;
}

/* Photos Sidebar */
.photos-sidebar {
    width: clamp(156px, 22vw, var(--sidebar-width));
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow-y: auto;
    flex: 0 1 clamp(156px, 22vw, var(--sidebar-width));
    min-width: 156px;
    max-width: var(--sidebar-width);
}

.photos-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.photos-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.photos-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.photos-nav-item.active {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.photos-nav-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.photos-nav-item.active svg {
    opacity: 1;
}

/* Sub-item styling for albums */
.photos-nav-item.sub-item {
    padding-left: 32px;
    font-size: 12px;
}

/* Nav group for collapsible albums section */
.photos-nav-group {
    display: flex;
    flex-direction: column;
}

.photos-nav-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 24px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.photos-nav-group-header:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.photos-nav-group-header .expand-icon {
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.photos-nav-group-header.expanded .expand-icon {
    transform: rotate(180deg);
}

.photos-nav-group-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 8px;
}

.photos-nav-group-items.expanded {
    display: flex;
}

/* Album item with thumbnail */
.photos-nav-item.album-item {
    gap: 10px;
}

.album-preview-box {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    display: grid;
}

.album-preview-box.single,
.album-preview-box.empty {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.album-preview-box.empty {
    place-items: center;
    color: var(--text-muted);
}

.album-preview-tile {
    position: relative;
    background: var(--bg-tertiary);
}

.album-preview-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.album-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

/* Photos Content Area */
.photos-content {
    flex: 1;
    padding: 24px 96px 24px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* The timeline compensates scrollTop itself when an above-viewport month's
       estimated height is corrected (Google Photos technique); the browser's
       native scroll anchoring would double-compensate. */
    overflow-anchor: none;
    /* The date rail is the ONLY scroll indicator (Google Photos style) — the
       native scrollbar would sit next to it as a second, always-on slider.
       Hiding it also keeps the measured layout width identical whether or not
       the content is tall enough to scroll. */
    scrollbar-width: none;
}

.photos-content::-webkit-scrollbar {
    display: none;
}

.photos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.photos-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.photos-title h2 {
    font-size: 20px;
    font-weight: 600;
}

.photos-select-btn,
.photos-selection-action,
.photos-selection-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.photos-select-btn:hover,
.photos-selection-action:hover,
.photos-selection-cancel:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.photos-select-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

.photos-select-btn[hidden] {
    display: none !important;
}

.photos-notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.photos-notice[hidden] {
    display: none !important;
}

.photos-notice.success {
    border-color: var(--success);
}

.photos-notice.error {
    border-color: var(--error);
}

.photos-notice.info {
    border-color: var(--accent, var(--border-color));
}

.photos-selection-toolbar {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.photos-selection-toolbar[hidden] {
    display: none !important;
}

.photos-album-composer {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.photos-album-composer[hidden] {
    display: none !important;
}

.photos-album-composer-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.photos-album-composer-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.photos-album-composer-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.photos-album-composer-input {
    min-width: min(320px, 100%);
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
}

.photos-album-composer-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.photos-album-composer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.photos-selection-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.photos-selection-cancel {
    width: 38px;
    min-width: 38px;
    padding: 0;
}

.photos-selection-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.photos-selection-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.photos-selection-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.photos-selection-action.primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

.photos-selection-action.primary:hover {
    filter: brightness(0.98);
}

.photos-selection-action.is-disabled,
.photos-selection-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.album-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.album-share-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.album-share-btn svg {
    flex-shrink: 0;
}

.album-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--danger-color, #e5484d);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.album-delete-btn:hover {
    background: var(--danger-color, #e5484d);
    border-color: var(--danger-color, #e5484d);
    color: #fff;
}

.album-delete-btn svg {
    flex-shrink: 0;
}

.photos-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.photos-upload-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Video indicator on photo items */
.photo-item.video::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    z-index: 2;
}

.photo-item.video::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 10px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 3;
}

/* Star indicator on photo items */
.photo-item .photo-star {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
    cursor: pointer;
    z-index: 4;
}

.photo-item:hover .photo-star,
.photo-item.starred .photo-star {
    opacity: 1;
}

.photos-content.selection-mode .photo-item {
    cursor: pointer;
}

.photos-content.selection-mode .photo-item .photo-star {
    display: none;
}

.photos-content.selection-mode .photo-item:hover {
    filter: none;
}

.photos-content.selection-mode .photo-item img {
    transition: filter var(--transition-fast);
}

.photos-content.selection-mode .photo-item.selected {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.photos-content.selection-mode .photo-item.selected img {
    filter: brightness(0.72);
}

.photos-content.selection-mode .photo-item.selected:hover img {
    filter: brightness(0.68);
}

.photo-selection-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    background: rgba(0, 0, 0, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    z-index: 5;
}

.photos-content.selection-mode .photo-selection-check {
    opacity: 1;
    transform: scale(1);
}

.photo-item.selected .photo-selection-check {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-primary);
}

.photo-item.selected .photo-selection-check svg {
    opacity: 1;
}

.photo-selection-check svg {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.photo-item.starred .photo-star svg {
    fill: #ffd700;
    stroke: #ffd700;
}

/* ==========================================
   Photo Grid
   ========================================== */

.photo-grid {
    display: block;
}

.photo-date-group {
    margin-bottom: 24px;
}

/* Month heading — the original sticky PILL (frosted, rounded, hugging the
   text), not a full-width bar: it stays pinned at the top while its month
   scrolls by, then the next month's heading pushes it out. Typography is the
   updated one: bold, text-primary, deliberately smaller than the page's
   "Photos" title (20px). The negative left margin cancels the pill's own
   horizontal padding so the TEXT stays flush with the day labels below. */
.photo-date-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px -12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    backdrop-filter: blur(8px);
    /* Elevation appears only while pinned (.stuck below). The transparent
       border reserves its 1px so nothing shifts when it fades in. */
    border: 1px solid transparent;
    box-shadow: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

/* Pinned over scrolling photos → gentle lift; resting in flow → flat.
   Tight blur radius (no wide spread), but enough opacity to actually read
   as elevation. The .stuck class is driven by the photos scroll handler
   (updatePhotoHeadingStuckState) — CSS has no native :stuck selector. */
.photo-date-heading.stuck {
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* Justified layout (Google Photos style). JS computes rows from each photo's
   aspect ratio (ThumbHash-derived) against a target row height, then sets
   explicit px width/height inline per cell — see computeJustifiedRows in
   app.js. The grid body is a plain block of .photo-row flex rows; unloaded
   timeline months show an empty-tile texture (inline repeating-gradient) at
   an ESTIMATED height that is corrected when the month's metadata arrives. */
.photo-date-group-grid {
    display: block;
}

.photo-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
}

.photo-row + .photo-row {
    margin-top: 4px;
}

/* Day sub-groups inside a month (Google Photos style): a month body is a
   stack of "bands"; short days sit side by side in one band, a multi-row day
   takes a full-width band. Gap/margin values are mirrored in app.js
   (PHOTO_DAY_SEG_GAP / PHOTO_DAY_BAND_GAP) for exact height math. */
.photo-day-band {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    overflow: hidden;
}

.photo-day-band + .photo-day-band {
    margin-top: 20px;
}

.photo-day-seg {
    flex: 0 0 auto;
    min-width: 0;
}

.photo-day-seg-full {
    flex: 1 1 100%;
    width: 100%;
}

.photo-day-heading {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.photo-item {
    flex: 0 0 auto;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--bg-secondary);
    transition: all var(--transition-fast);
}

.photo-item:hover {
    filter: brightness(0.9);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal), filter 0.25s ease, opacity 0.25s ease;
}

.photo-item img.photo-grid-placeholder {
    filter: blur(12px);
    transform: scale(1.05);
}

.photo-item:hover img.photo-grid-placeholder {
    transform: scale(1.08);
}

.photo-item:hover img {
    transform: scale(1.03);
}

/* Unloaded tiles are a plain quiet rectangle (Google Photos style): an <img>
   with no src yet would render its alt text + broken-image glyph, so keep it
   invisible until a source (ThumbHash placeholder or thumbnail) is assigned —
   the .photo-item background provides the gray box. */
.photo-item img:not([src]) {
    opacity: 0;
}

.photos-date-rail {
    position: absolute;
    top: 88px;
    right: 6px;
    bottom: 24px;
    width: 56px;
    display: none;
    z-index: 5;
    pointer-events: none;
}

.photos-date-rail.active {
    display: block;
}

.photos-date-rail-track {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
}

/* Year tick labels, absolutely positioned along the rail by scroll fraction. */
.photos-date-rail-label {
    position: absolute;
    right: 18px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.18s ease, color 0.18s ease;
    user-select: none;
}

.photos-date-rail-label.active {
    color: var(--text-primary);
}

.photos-date-rail.hovering .photos-date-rail-label,
.photos-date-rail.dragging .photos-date-rail-label,
.photos-date-rail.scrolling .photos-date-rail-label {
    opacity: 0.85;
}

.photos-date-rail.hovering .photos-date-rail-label.active,
.photos-date-rail.dragging .photos-date-rail-label.active,
.photos-date-rail.scrolling .photos-date-rail-label.active {
    opacity: 1;
}

/* Draggable thumb that tracks the scroll offset. */
.photos-date-rail-thumb {
    position: absolute;
    right: 4px;
    width: 8px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 55%, transparent);
    opacity: 0;
    transition: opacity 0.18s ease, background-color 0.15s ease, width 0.15s ease;
    pointer-events: none;
}

.photos-date-rail.hovering .photos-date-rail-thumb,
.photos-date-rail.dragging .photos-date-rail-thumb,
.photos-date-rail.scrolling .photos-date-rail-thumb {
    opacity: 1;
}

.photos-date-rail.hovering .photos-date-rail-thumb,
.photos-date-rail.dragging .photos-date-rail-thumb {
    background: var(--accent-color);
    width: 10px;
}

/* Floating month/year bubble shown while scrubbing or scrolling. */
.photos-date-rail-bubble {
    position: absolute;
    right: 22px;
    transform: translateY(-50%);
    padding: 7px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(10px);
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
}

.photos-date-rail.dragging .photos-date-rail-bubble,
.photos-date-rail.hovering .photos-date-rail-bubble,
.photos-date-rail.scrolling .photos-date-rail-bubble {
    opacity: 1;
    visibility: visible;
}

/* Download Keyframe Animations */
@keyframes downloadPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes progressStripe {
    0% { background-position: 0 0; }
    100% { background-position: 24px 0; }
}

@keyframes progressGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(59,130,246,0.3); }
    50% { box-shadow: 0 0 10px rgba(59,130,246,0.5); }
}

@keyframes checkPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes floatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ==========================================
   Download Section
   ========================================== */

.download-layout {
    display: flex;
    height: 100%;
    flex: 1;
    min-width: 0;
}

/* --- Download Sidebar --- */
.download-sidebar {
    width: clamp(156px, 22vw, var(--sidebar-width));
    background: var(--bg-secondary);
    padding: 12px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0 1 clamp(156px, 22vw, var(--sidebar-width));
    min-width: 156px;
    max-width: var(--sidebar-width);
    overflow-y: auto;
}

.download-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.download-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.download-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.download-nav-item.active {
    background: var(--accent-color);
    color: var(--bg-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.download-nav-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0 6px;
}

.download-nav-item.active .download-nav-count {
    background: rgba(255,255,255,0.2);
    color: var(--bg-primary);
}

/* --- Download Stats Sidebar Card --- */
.download-stats {
    margin-top: auto;
    padding: 14px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.stat-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-label svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat-value.speed-value {
    color: var(--blue);
}

/* --- Download Content Area --- */
.download-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.download-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.download-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.download-actions {
    display: flex;
    gap: 4px;
}

.download-actions .btn {
    padding: 8px;
}

.download-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* --- Download Item Card --- */
.download-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--download-card-shadow);
    transition: all var(--transition-normal);
    animation: fadeInUp 0.3s ease both;
    animation-delay: calc(var(--item-index, 0) * 0.04s);
    max-width: 700px;
    width: 100%;
    align-self: center;
}

.download-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--download-card-shadow-hover);
}

.download-item.is-downloading {
    background: var(--download-active-gradient);
    border-color: var(--download-active-border);
}

/* --- File Type Icons --- */
.download-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.download-item:hover .download-icon {
    transform: scale(1.05);
}

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

.download-icon.icon-video {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.download-icon.icon-image {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.download-icon.icon-archive {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
}

.download-icon.icon-document {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.download-icon.icon-spreadsheet {
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
}

.download-icon.icon-presentation {
    background: rgba(249, 115, 22, 0.14);
    color: #f97316;
}

.download-icon.icon-code {
    background: rgba(99, 102, 241, 0.14);
    color: #6366f1;
}

.download-icon.icon-audio {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.download-icon.icon-package {
    background: rgba(138, 95, 196, 0.14);
    color: #8a5fc4;
}

.download-icon.icon-default {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* --- Download Info --- */
.download-info {
    flex: 1;
    min-width: 0;
}

.download-filename {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.download-url {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.download-item:hover .download-url {
    opacity: 1;
}

/* --- Progress Bar --- */
.download-progress-wrapper {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.download-progress-bar {
    flex: 1;
    height: var(--progress-height);
    background: var(--bg-tertiary);
    border-radius: calc(var(--progress-height) / 2);
    overflow: hidden;
}

.download-progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: calc(var(--progress-height) / 2);
    transition: width var(--transition-fast);
    position: relative;
}

.download-progress-fill.active {
    background-image: linear-gradient(
        -45deg,
        rgba(255,255,255,0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0.15) 75%,
        transparent 75%
    );
    background-size: 24px 24px;
    animation: progressStripe 0.6s linear infinite, progressGlow 2s ease-in-out infinite;
}

.download-progress-percent {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

.download-meta {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Status Badge --- */
.download-status {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 16px;
    font-weight: 500;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
}

.download-status svg {
    width: 12px;
    height: 12px;
}

.download-status.pending {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.download-status.downloading {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    animation: downloadPulse 2s ease-in-out infinite;
}

.download-status.completed {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.download-status.completed svg {
    animation: checkPop 0.4s ease both;
}

.download-status.paused {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.download-status.error,
.download-status.failed {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

/* --- Action Buttons --- */
.download-item-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.download-item:hover .download-item-actions {
    opacity: 1;
}

.download-item-actions button {
    padding: 6px;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.download-item-actions button:hover {
    transform: scale(1.05);
    background: var(--bg-hover);
}

/* --- Empty State --- */
.download-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: radial-gradient(circle at 50% 50%, var(--bg-tertiary) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 12px;
    flex: 1;
    min-height: 300px;
}


.download-empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.download-empty-state p {
    font-size: 13px;
    color: var(--text-muted);
}

/* Mobile: always show action buttons */
@media (max-width: 640px) {
    .download-item-actions {
        opacity: 1;
    }
}

/* ==========================================
   Modal
   ========================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-normal);
    z-index: 1200;
}

.modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    transform: scale(0.95);
    transition: transform var(--transition-normal);
}

.modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.modal-close {
    width: 30px;
    height: 30px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 16px;
}

.modal-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.modal-cancel-btn,
.modal-confirm-btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.modal-cancel-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modal-cancel-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

.modal-confirm-btn {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--bg-primary);
}

.modal-confirm-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.modal-form-group {
    margin-bottom: 16px;
}

.modal-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.modal-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.modal-select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.modal-success-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
}

.modal-url-field {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    user-select: all;
    word-break: break-all;
}

.modal-url-field:focus {
    outline: none;
    border-color: var(--accent-color);
}

.modal-share-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.modal-share-toggle-label {
    margin-bottom: 0;
}

.modal-share-toggle {
    position: relative;
    width: 54px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
}

.modal-share-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.modal-share-toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border-color);
    transition: background var(--transition-fast);
}

.modal-share-toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--toggle-thumb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-fast);
}

.modal-share-toggle input:checked + .modal-share-toggle-slider {
    background: var(--blue);
}

.modal-share-toggle input:checked + .modal-share-toggle-slider::before {
    transform: translateX(22px);
}

.modal-share-password {
    margin-bottom: 0;
}

.modal-share-password .modal-input {
    margin-bottom: 0;
}

/* ==========================================
   Photo Viewer
   ========================================== */

.photo-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-normal);
    z-index: 1100;
}

.photo-viewer.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 상단 헤더 */
.photo-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.26));
    backdrop-filter: blur(14px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.viewer-back-button {
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.viewer-back-button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.24);
}

.viewer-back-button:active {
    transform: translateY(1px);
}

.photo-viewer-back {
    flex-shrink: 0;
}

.photo-viewer-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: min(70vw, 360px);
    text-align: center;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.photo-viewer-date {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.photo-viewer-time {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

.photo-viewer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(70vw, 420px);
    position: relative;
    z-index: 2;
}

.viewer-header-action {
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.viewer-header-action:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.24);
}

.viewer-header-action span {
    display: none;
}

.viewer-header-action.starred {
    background: rgba(255, 214, 10, 0.22);
    border-color: rgba(255, 214, 10, 0.34);
    color: #ffd84a;
}

.viewer-header-action.starred svg {
    fill: currentColor;
}

.viewer-header-action:active {
    transform: translateY(1px);
}

/* 이미지 컨테이너 */
.photo-viewer-container {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
    padding: 40px;
}

.photo-viewer-container.is-video {
    cursor: default;
}

.photo-viewer-container.is-zoomed {
    cursor: grab;
}

.photo-viewer-container.is-dragging {
    cursor: grabbing;
}

.photo-viewer-media-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.photo-viewer-container img,
.photo-viewer-media-stage canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease, filter 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
}

.photo-viewer-container img.photo-viewer-loading {
    filter: blur(6px);
}

.photo-viewer-media-stage canvas {
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.photo-viewer.editing #photo-viewer-img {
    display: none;
}

.photo-viewer.editing .photo-viewer-container {
    cursor: default;
}

.photo-viewer.editing .photo-viewer-container.is-zoomed,
.photo-viewer.editing .photo-viewer-container.is-dragging {
    cursor: default;
}

.photo-viewer-container video {
    /* Out of flex flow so HLS ladder switches (480p → 1080p → native)
       cannot grow the layout box. The stage size is fixed; the picture
       letterboxes or pillarboxes inside it, same as photos. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    background: #000;
    outline: none;
}

.photo-editor-crop-overlay {
    position: absolute;
    pointer-events: auto;
}

.photo-editor-crop-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
    cursor: move;
    backdrop-filter: blur(0.4px);
}

.photo-editor-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.photo-editor-crop-handle.nw {
    top: -7px;
    left: -7px;
    cursor: nwse-resize;
}

.photo-editor-crop-handle.ne {
    top: -7px;
    right: -7px;
    cursor: nesw-resize;
}

.photo-editor-crop-handle.sw {
    bottom: -7px;
    left: -7px;
    cursor: nesw-resize;
}

.photo-editor-crop-handle.se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.photo-editor-panel {
    position: absolute;
    top: 82px;
    right: 20px;
    bottom: 24px;
    width: min(340px, calc(100vw - 40px));
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 24px;
    background: rgba(12, 14, 18, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(20px);
    z-index: 14;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    display: none;
}

.photo-viewer.editing .photo-editor-panel {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.photo-editor-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.photo-editor-panel-eyebrow {
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.005em;
}

.photo-editor-panel-title {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin-top: 4px;
}

.photo-editor-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.photo-editor-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.photo-editor-tab {
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.photo-editor-tab.active {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.96);
    color: #111827;
}

.photo-editor-tab-panels {
    flex: 1;
    min-height: 0;
}

.photo-editor-tab-panel {
    height: 100%;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.photo-editor-section-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.photo-editor-section-copy {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.5;
}

.photo-editor-stat {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
}

.photo-editor-range-label {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
}

.photo-editor-range {
    margin-top: 14px;
    width: 100%;
    accent-color: #fff;
}

.photo-editor-tone-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.photo-editor-tone-option {
    min-height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.photo-editor-tone-option.active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
}

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

.photo-editor-action {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.photo-editor-action.primary {
    background: #ffffff;
    border-color: #ffffff;
    color: #111827;
}

.photo-editor-action.ghost {
    background: transparent;
}

.photo-editor-action:disabled,
.photo-editor-close:disabled,
.photo-editor-tab:disabled,
.photo-editor-tone-option:disabled {
    opacity: 0.5;
    cursor: wait;
}

.photo-viewer-minimap {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 168px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 13;
}

.photo-viewer-minimap.active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.photo-viewer-minimap-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.photo-viewer-minimap-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
}

.photo-viewer-minimap-focus {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid rgba(255, 255, 255, 0.96);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    pointer-events: none;
}

/* UI 숨김 상태 */
.photo-viewer.ui-hidden .photo-viewer-header,
.photo-viewer.ui-hidden .photo-viewer-info,
.photo-viewer.ui-hidden .photo-editor-panel,
.photo-viewer.ui-hidden .photo-viewer-nav {
    opacity: 0;
    pointer-events: none;
}

.photo-viewer.ui-hidden .photo-viewer-header {
    transform: translateY(-100%);
}

.photo-viewer.ui-hidden .photo-viewer-info {
    transform: translate(-50%, calc(-50% - 16px));
}

.photo-viewer.ui-hidden .photo-editor-panel {
    transform: translateX(12px);
}

.photo-viewer.editing .photo-viewer-nav,
.photo-viewer.editing .photo-viewer-minimap {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Video mode: compact side nav pills sit mid-screen, clear of native controls. */
.photo-viewer.video-mode .photo-viewer-nav {
    z-index: 20;
}

.photo-viewer.video-mode .photo-viewer-nav-btn .photo-viewer-nav-pill {
    opacity: 0.92;
    transform: scale(1);
}

/* Never hide side nav while a video is playing — needed for photo/video switching. */
.photo-viewer.video-mode.ui-hidden .photo-viewer-nav {
    opacity: 1;
    pointer-events: auto;
}

.photo-viewer.video-mode .photo-viewer-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* 데스크톱용 네비게이션 */
.photo-viewer-nav {
    position: absolute;
    inset: 0;
    z-index: 15;
    transition: opacity 0.32s ease;
    pointer-events: none;
}

.photo-viewer-nav-btn {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
}

.photo-viewer-nav-btn.prev {
    left: clamp(28px, 4vw, 48px);
}

.photo-viewer-nav-btn.next {
    right: clamp(28px, 4vw, 48px);
}

.photo-viewer-nav-pill {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: scale(0.92);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.22s ease, opacity 0.22s ease;
}

.photo-viewer:not(.ui-hidden) .photo-viewer-nav-btn:hover .photo-viewer-nav-pill,
.photo-viewer:not(.ui-hidden) .photo-viewer-nav-btn:focus-visible .photo-viewer-nav-pill {
    opacity: 1;
    transform: scale(1);
}

.photo-viewer-nav-btn:hover .photo-viewer-nav-pill {
    background: rgba(0, 0, 0, 0.48);
    border-color: rgba(255, 255, 255, 0.3);
}

.photo-viewer-nav-btn:active .photo-viewer-nav-pill {
    transform: scale(0.96);
}

/* 모바일에서 하단 툴바 위에 네비게이션 유지 */
@media (max-width: 640px) {
    .photo-viewer-header,
    .photo-viewer-actions {
        display: flex;
    }

    .photo-viewer-header {
        padding: 12px;
    }

    .photo-viewer-actions {
        gap: 6px;
        max-width: min(72vw, 320px);
    }

    .viewer-header-action,
    .viewer-back-button {
        width: 38px;
        height: 38px;
    }

    .photo-viewer-minimap {
        display: none;
    }

    .photo-editor-panel {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(48vh, 420px);
        border-radius: 22px;
    }

    .photo-editor-tab-panel {
        overflow: auto;
    }

    .photo-viewer.editing .photo-viewer-container {
        padding-bottom: min(52vh, 440px);
        padding-right: 12px;
        padding-left: 12px;
    }

    .photo-viewer-nav {
        display: block;
    }

    .photo-viewer-nav-btn {
        width: 42px;
        height: 42px;
    }

    .photo-viewer-nav-pill {
        width: 100%;
        height: 100%;
    }

    .photos-date-rail {
        display: none !important;
    }
}

/* 데스크톱에서도 헤더/툴바/네비게이션 모두 표시 */
@media (min-width: 641px) {
    .photo-viewer-nav {
        display: block;
    }

    .photo-viewer-minimap {
        display: block;
    }

    .photo-viewer-container {
        padding: 40px;
    }

    .photo-viewer-container img {
        border-radius: 8px;
    }

    .photo-viewer.editing .photo-viewer-container {
        padding-right: clamp(360px, 36vw, 420px);
    }
}

/* ==========================================
   PDF Viewer
   ========================================== */

.pdf-viewer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1100;
}

.pdf-viewer.active {
    opacity: 1;
    visibility: visible;
}

.pdf-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 12px;
}

.pdf-viewer-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 12px;
}

.pdf-viewer-back {
    color: var(--text-primary);
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.pdf-viewer-back:hover {
    opacity: 1;
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.pdf-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-download-btn {
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-download-btn:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.pdf-viewer-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
}

.pdf-viewer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background: var(--bg-secondary);
}

.pdf-thumbnails {
    width: 148px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    padding: 12px 10px;
}

.pdf-thumbnails[hidden] {
    display: none !important;
}

.pdf-thumbnails-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
}

.pdf-thumb-canvas-wrap {
    width: 112px;
    min-height: 80px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pdf-thumb canvas {
    display: block;
    width: 100%;
    height: auto;
}

.pdf-thumb-label {
    font-size: 11px;
    line-height: 1;
}

.pdf-thumb:hover .pdf-thumb-canvas-wrap,
.pdf-thumb.active .pdf-thumb-canvas-wrap {
    border-color: var(--accent-color, #3b82f6);
}

.pdf-thumb.active {
    color: var(--text-primary);
}

.toolbar-btn.active {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
}

/* PDF Toolbar */
.pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 8px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-btn:hover:not(:disabled) {
    background: var(--bg-hover);
}

.toolbar-btn:active:not(:disabled) {
    background: var(--bg-tertiary);
}

.toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    font-size: 13px;
}

.page-input {
    width: 48px;
    height: 28px;
    padding: 0 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    text-align: center;
    -moz-appearance: textfield;
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-input:focus {
    outline: none;
    border-color: var(--text-secondary);
}

.page-separator {
    color: var(--text-secondary);
}

.page-total {
    min-width: 24px;
}

.zoom-level {
    min-width: 48px;
    text-align: center;
    font-size: 13px;
    color: var(--text-primary);
}

/* PDF Canvas Container */
.pdf-canvas-container {
    flex: 1;
    min-width: 0;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 16px;
    background: var(--bg-tertiary);
    touch-action: manipulation;
}

.pdf-pages-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 100%;
}

/* PDF Status (Loading/Error) */
.pdf-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
}

.pdf-status.pdf-error {
    color: #dc3545;
}

.pdf-status.pdf-too-large {
    pointer-events: auto;
    max-width: min(420px, calc(100% - 32px));
    text-align: center;
    color: var(--text-secondary);
    gap: 12px;
}

.pdf-too-large-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.pdf-too-large-detail {
    line-height: 1.45;
    font-size: 13px;
}

.pdf-too-large-download {
    margin-top: 4px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: var(--text-primary);
    color: var(--bg-primary, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pdf-too-large-download:hover {
    opacity: 0.9;
}

.pdf-status .spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-color);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: pdf-spin 0.8s linear infinite;
}

@keyframes pdf-spin {
    to { transform: rotate(360deg); }
}

/* PDF Pages */
.pdf-page {
    position: relative;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.pdf-page--placeholder {
    background: #f3f3f3;
}

.pdf-page canvas {
    display: block;
}

/* Text Layer */
.pdf-page .text-layer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0.3;
    line-height: 1;
}

.pdf-page .text-layer span {
    position: absolute;
    color: transparent;
    white-space: pre;
    cursor: text;
}

.pdf-page .text-layer span::selection {
    background: rgba(0, 100, 255, 0.3);
}

/* PDF Viewer Mobile */
@media (max-width: 640px) {
    .pdf-viewer-header {
        padding: 8px 12px;
        padding-top: calc(8px + env(safe-area-inset-top));
    }

    .pdf-viewer-title {
        font-size: 13px;
    }

    .pdf-toolbar {
        padding: 6px 12px;
        gap: 4px;
    }

    .toolbar-divider {
        margin: 0 4px;
    }

    .toolbar-btn {
        width: 36px;
        height: 36px;
    }

    .page-input {
        width: 40px;
        height: 32px;
    }

    .zoom-level {
        min-width: 40px;
        font-size: 12px;
    }

    .pdf-thumbnails {
        width: 104px;
        padding: 8px 6px;
    }

    .pdf-thumb-canvas-wrap {
        width: 80px;
    }

    .pdf-canvas-container {
        padding: 16px 12px;
        gap: 12px;
    }
}

/* ==========================================
   App Preview Viewer (Plum Store apps)
   ========================================== */

.app-preview-viewer {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1100;
}

.app-preview-viewer.active {
    opacity: 1;
    visibility: visible;
}

.app-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.app-preview-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-preview-back {
    color: var(--text-primary);
    flex-shrink: 0;
}

.app-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-preview-action-btn {
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-preview-action-btn:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.app-preview-body {
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--bg-secondary);
}

.app-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.app-preview-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

/* An author `display` beats the UA's [hidden] rule, so without this the
   message layer stays a full-bleed transparent sheet over the app frame and
   swallows every click — the app looks alive and answers nothing. Harmless
   while this frame only ever showed read-only previews; fatal once a real
   app runs in it. */
.app-preview-message[hidden] {
    display: none;
}

.app-preview-message:has(.office-builtin-preview) {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: var(--bg-primary, #fff);
}

.app-preview-loading,
.app-preview-unavailable {
    max-width: 420px;
    text-align: center;
    color: var(--text-secondary);
}

.office-builtin-preview {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

.office-builtin-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
    background: var(--bg-secondary, #f7f7f8);
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.office-builtin-banner strong {
    color: var(--text-primary, #111);
}

.office-builtin-content {
    flex: 1;
    padding: 20px 24px 40px;
    overflow: auto;
    color: var(--text-primary, #111);
    line-height: 1.55;
}

.office-builtin-content table {
    border-collapse: collapse;
    width: max-content;
    max-width: 100%;
    font-size: 13px;
}

.office-builtin-content td,
.office-builtin-content th {
    border: 1px solid var(--border-color, #ddd);
    padding: 6px 10px;
    vertical-align: top;
}

.office-sheet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.office-sheet-tab {
    padding: 6px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 999px;
    background: var(--bg-secondary, #f5f5f5);
    cursor: pointer;
    font-size: 12px;
}

.office-sheet-tab.active {
    background: var(--accent-color, #111);
    border-color: var(--accent-color, #111);
    /* The accent is ink, so in dark mode it is near-white — a hard-coded #fff
       label disappeared on it. Use the paired on-accent token. */
    color: var(--on-accent, #fff);
}

.office-sheet-panel {
    display: none;
    overflow: auto;
}

.office-sheet-panel.active {
    display: block;
}

.office-slides {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.office-slide-card {
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary, #fafafa);
}

.office-slide-card header {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color, #e5e5e5);
    color: var(--text-secondary, #666);
}

.office-slide-body {
    padding: 14px 16px;
    background: var(--bg-primary, #fff);
}

.office-slide-body p {
    margin: 0 0 8px;
}

.office-muted {
    color: var(--text-secondary, #999);
}

.app-preview-unavailable h3 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: 18px;
}

.app-preview-unavailable p {
    margin: 0 0 20px;
    line-height: 1.5;
}

.app-preview-store-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: 0;
    background: var(--accent-color);
    color: var(--bg-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.app-preview-store-btn:hover {
    opacity: 0.9;
}

/* ==========================================
   Text Viewer
   ========================================== */

.text-viewer {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1100;
}

.text-viewer.active {
    opacity: 1;
    visibility: visible;
}

.text-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.text-viewer-back {
    color: var(--text-primary);
    flex-shrink: 0;
}

.text-viewer-back:hover {
    opacity: 0.75;
}

.text-viewer-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-download-btn {
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-download-btn:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.text-viewer-container {
    flex: 1;
    overflow: auto;
    padding: 24px 20px 40px;
    background: var(--bg-primary);
}

.text-viewer.editing #text-share,
.text-viewer.editing #text-download,
.text-viewer.editing #text-edit,
.text-viewer.editing #text-viewer-trash {
    display: none;
}

.text-viewer.editing #text-save-copy,
.text-viewer.editing #text-save-as {
    display: inline-flex;
}

.text-viewer.editing .text-viewer-content {
    display: none;
}

.text-viewer:not(.editing) .text-viewer-editor {
    display: none;
}

.text-viewer.editing .text-viewer-editor {
    display: block;
}

.text-viewer-toolbar {
    display: flex;
    justify-content: center;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.text-toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 12px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.text-toolbar-btn:hover {
    background: var(--bg-hover);
}

.text-toolbar-btn svg {
    width: 24px;
    height: 24px;
}

.text-toolbar-btn span {
    font-size: 12px;
}

.text-toolbar-btn.danger {
    color: #ef4444;
}

.text-viewer-content {
    margin: 0 auto;
    max-width: 920px;
    min-height: 100%;
    color: var(--text-primary);
}

.text-viewer-content.plain {
    font-family: "D2Coding", "SF Mono", "Noto Sans Mono CJK KR", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.text-viewer-content.markdown {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    white-space: normal;
}

.text-viewer-content.markdown h1,
.text-viewer-content.markdown h2,
.text-viewer-content.markdown h3,
.text-viewer-content.markdown h4 {
    margin: 0 0 16px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--text-primary);
}

.text-viewer-content.markdown h1 {
    font-size: 2rem;
}

.text-viewer-content.markdown h2 {
    font-size: 1.65rem;
}

.text-viewer-content.markdown h3 {
    font-size: 1.35rem;
}

.text-viewer-content.markdown h4 {
    font-size: 1.1rem;
}

.text-viewer-content.markdown p,
.text-viewer-content.markdown ul,
.text-viewer-content.markdown ol,
.text-viewer-content.markdown blockquote,
.text-viewer-content.markdown pre,
.text-viewer-content.markdown hr {
    margin: 0 0 16px;
}

.text-viewer-content.markdown ul,
.text-viewer-content.markdown ol {
    padding-left: 24px;
}

.text-viewer-content.markdown blockquote {
    padding-left: 16px;
    border-left: 3px solid var(--border-color);
    color: var(--text-secondary);
}

.text-viewer-content.markdown code {
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.92em;
}

.text-viewer-content.markdown pre {
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: auto;
}

.text-viewer-content.markdown pre code {
    padding: 0;
    background: transparent;
    border: none;
}

.text-viewer-content.markdown a {
    color: #1d9bf0;
}

.text-viewer-content.markdown hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    opacity: 0.9;
}

.text-viewer.office-preview #text-edit {
    display: none;
}

.text-viewer-content.office-preview {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    white-space: normal;
}

.office-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 240px;
    color: var(--text-secondary);
}

.office-preview-notice {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 14px;
}

.office-preview-error {
    max-width: 560px;
    margin: 48px auto;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    text-align: center;
}

.office-preview-error h3 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

.office-preview-error p {
    margin: 0 0 12px;
    color: var(--text-secondary);
}

.office-preview-error-detail {
    font-size: 14px;
}

.office-preview-error-hint {
    margin-bottom: 0 !important;
    font-size: 14px;
}

.office-preview-document {
    max-width: 920px;
}

.office-preview-document p,
.office-preview-document h1,
.office-preview-document h2,
.office-preview-document h3,
.office-preview-document ul,
.office-preview-document ol,
.office-preview-document table {
    margin: 0 0 16px;
}

.office-preview-document table {
    width: 100%;
    border-collapse: collapse;
}

.office-preview-document th,
.office-preview-document td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.office-preview-spreadsheet {
    max-width: none;
}

.office-preview-sheet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.office-preview-sheet-tab {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
}

.office-preview-sheet-tab.active {
    border-color: var(--accent-color, #6366f1);
    background: color-mix(in srgb, var(--accent-color, #6366f1) 12%, transparent);
    color: var(--text-primary);
}

.office-preview-sheet-panel {
    display: none;
    overflow: auto;
}

.office-preview-sheet-panel.active {
    display: block;
}

.office-preview-sheet-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.office-preview-sheet-panel th,
.office-preview-sheet-panel td {
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.office-preview-presentation {
    display: grid;
    gap: 16px;
}

.office-preview-slide {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.office-preview-slide header {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--text-secondary);
}

.office-preview-slide-body p,
.office-preview-slide p {
    margin: 0 0 10px;
}

.office-preview-slide-body p:last-child,
.office-preview-slide p:last-child {
    margin-bottom: 0;
}

.office-preview-slide-empty {
    color: var(--text-secondary);
    font-style: italic;
}

.text-viewer-editor {
    display: block;
    width: 100%;
    max-width: 920px;
    min-height: calc(100vh - 220px);
    margin: 0 auto;
    padding: 20px 22px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    font-family: "D2Coding", "SF Mono", "Noto Sans Mono CJK KR", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.text-viewer-editor:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ==========================================
   Archive Viewer
   ========================================== */

.archive-viewer {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1100;
}

.archive-viewer.active {
    opacity: 1;
    visibility: visible;
}

.archive-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.archive-viewer-back {
    color: var(--text-primary);
    flex-shrink: 0;
}

.archive-viewer-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.archive-viewer-note {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.archive-viewer-list {
    flex: 1;
    overflow: auto;
    padding: 8px 0 24px;
}

.archive-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px calc(20px + (var(--archive-depth, 0) * 18px));
    border-bottom: 1px solid var(--border-color);
    cursor: default;
    user-select: none;
}

.archive-entry-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-tertiary);
    flex-shrink: 0;
}

.archive-entry-icon svg {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

.archive-entry-icon .file-emoji {
    font-size: 22px;
    line-height: 1;
}

.archive-entry-info {
    min-width: 0;
    flex: 1;
}

.archive-entry-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-entry-path {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-entry-meta {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.archive-empty-state {
    text-align: center;
    padding: 56px 20px;
}

.archive-empty-state h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.archive-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==========================================
   Scrollbar
   ========================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* ==========================================
   Loading Spinner
   ========================================== */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================
   Toast Notifications
   ========================================== */

.toast-container {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    padding: 24px;
    pointer-events: none;
    box-sizing: border-box;
}

.toast {
    pointer-events: auto;
    background: var(--surface-2, var(--bg-secondary));
    color: var(--ink, var(--text-primary));
    border: 1px solid var(--line-strong, var(--border-color));
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: min(360px, calc(100vw - 48px));
    box-shadow: var(--shadow-lift, 0 8px 24px rgba(0, 0, 0, 0.28));
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.toast-in {
    opacity: 1;
    transform: none;
}

.toast.toast-out {
    opacity: 0;
    transform: translateY(8px);
}

.toast.success {
    border-color: var(--success);
}

.toast.error {
    border-color: var(--error);
}

.toast.info {
    border-color: var(--accent, var(--border-color));
}

.toast-message {
    flex: 1;
    font-size: 13px;
    color: inherit;
}

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

/* Desktop/Mobile visibility classes */
@media (max-width: 640px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .mobile-file-left.mobile-only {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

@media (min-width: 641px) {
    .desktop-only {
        display: block !important;
    }

    .file-icon.desktop-only {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .mobile-only {
        display: none !important;
    }
}

/* ==========================================
   Auth Screens
   ========================================== */

.auth-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-box {
    width: 100%;
    max-width: 360px;
    padding: 40px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo .logo-icon {
    margin-bottom: 16px;
}

.auth-logo h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.auth-logo p {
    color: var(--text-secondary);
    font-size: 14px;
}

.auth-screen form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-screen input {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.auth-screen input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.auth-status-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.auth-error {
    color: var(--error);
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    min-height: 20px;
}

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 14px;
    margin-top: 8px;
}

/* ==========================================
   User Button & Menu
   ========================================== */

.user-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 12px;
    transition: all var(--transition-fast);
}

.user-btn:hover {
    background: var(--bg-hover);
}

#user-avatar {
    text-transform: uppercase;
}

.dropdown-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#user-menu-name {
    font-weight: 500;
    font-size: 14px;
}

.user-role {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    color: var(--text-secondary);
}

/* ==========================================
   공유 문서함 (Shared View)
   ========================================== */

.shared-view {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    padding-top: 10px;
}

.shared-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.shared-section-title svg {
    color: var(--text-secondary);
}

.shared-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
}

.shared-empty svg {
    color: var(--text-muted);
    margin-bottom: 12px;
    opacity: 0.5;
}

.shared-empty p {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.shared-empty span {
    font-size: 13px;
    color: var(--text-muted);
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.share-item .file-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.share-file {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.share-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 10px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.share-details {
    flex: 1;
    min-width: 0;
}

.share-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.share-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.share-meta span + span::before {
    content: "\00b7";
    margin-right: 6px;
    font-weight: 700;
}

.share-views {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

.share-views::before {
    content: none !important;
}

.share-actions {
    display: flex;
    gap: 8px;
}

.copy-link-btn {
    padding: 6px 12px;
    font-size: 12px;
}

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

@media (max-width: 960px) and (min-width: 641px) {

    .drive-header {
        padding: 14px 16px;
        gap: 12px;
    }

    .drive-title {
        gap: 12px;
    }

    .sort-dropdown-btn {
        padding: 0 10px;
    }

    .desktop-sort-label {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 768px) {

    .sort-dropdown {
        display: none;
    }

    .drive-sidebar,
    .download-sidebar {
        width: clamp(144px, 24vw, 180px);
        flex-basis: clamp(144px, 24vw, 180px);
        min-width: 144px;
        max-width: 180px;
    }

    .search-box {
        width: 200px;
    }

    .theme-toggle {
        width: 94px;
        margin-left: 8px;
    }

    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Mobile PWA Layout */
/* Duplicate section removed - mobile CSS consolidated above */

/* Hide mobile elements on desktop */
.mobile-header,
.mobile-tab-bar,
.fab,
.mobile-action-sheet,
.mobile-context-menu {
    display: none;
}

/* Mobile Action Sheet & Context Menu */
@media (max-width: 640px) {
    /* Hide photos sidebar on mobile */
    .photos-sidebar {
        display: none !important;
    }

    .photos-content {
        padding: 12px;
    }

    .photos-header {
        display: none;
    }

    .mobile-action-sheet {
        display: none;
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
        left: 16px;
        right: 16px;
        z-index: 1500;
        max-width: 320px;
        margin: 0 auto;
    }

    .mobile-action-sheet.active {
        display: block;
    }

    /* Bottom Sheet Context Menu */
    .mobile-context-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
    }

    .mobile-context-menu.active {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .bottom-sheet-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .bottom-sheet-content {
        position: relative;
        background: #f8f9fa;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }

    [data-theme="dark"] .bottom-sheet-content {
        background: #1e1e1e;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    .bottom-sheet-handle {
        width: 32px;
        height: 4px;
        background: #dadce0;
        border-radius: 2px;
        margin: 12px auto;
    }

    [data-theme="dark"] .bottom-sheet-handle {
        background: #5f6368;
    }

    .bottom-sheet-header {
        display: flex;
        align-items: center;
        padding: 8px 24px 16px;
        gap: 16px;
    }

    .bottom-sheet-file-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e8eaed;
        border-radius: 8px;
        flex-shrink: 0;
    }

    [data-theme="dark"] .bottom-sheet-file-icon {
        background: #3c4043;
    }

    .bottom-sheet-file-icon svg {
        width: 24px;
        height: 24px;
        color: #5f6368;
    }

    .bottom-sheet-file-icon.drive-file-icon svg {
        width: 28px;
        height: 28px;
        color: initial;
    }

    .bottom-sheet-file-icon .file-emoji {
        font-size: 22px;
        line-height: 1;
    }

    [data-theme="dark"] .bottom-sheet-file-icon svg {
        color: #9aa0a6;
    }

    .bottom-sheet-file-icon.folder svg {
        color: #5f6368;
    }

    .bottom-sheet-file-icon.icon-image {
        background: rgba(168, 85, 247, 0.18);
    }

    .bottom-sheet-file-icon.icon-video {
        background: rgba(239, 68, 68, 0.18);
    }

    .bottom-sheet-file-icon.icon-document {
        background: rgba(59, 130, 246, 0.18);
    }

    .bottom-sheet-file-icon.icon-spreadsheet {
        background: rgba(34, 197, 94, 0.18);
    }

    .bottom-sheet-file-icon.icon-presentation {
        background: rgba(249, 115, 22, 0.18);
    }

    .bottom-sheet-file-icon.icon-code {
        background: rgba(99, 102, 241, 0.18);
    }

    .bottom-sheet-file-icon.icon-audio {
        background: rgba(236, 72, 153, 0.18);
    }

    .bottom-sheet-file-icon.icon-archive {
        background: rgba(234, 179, 8, 0.18);
    }

    .bottom-sheet-filename {
        font-size: 16px;
        font-weight: 500;
        color: #202124;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [data-theme="dark"] .bottom-sheet-filename {
        color: #e8eaed;
    }

    .bottom-sheet-menu {
        padding: 0 0 8px;
    }

    .bottom-sheet-divider {
        height: 1px;
        background: #e0e0e0;
        margin: 8px 0;
    }

    [data-theme="dark"] .bottom-sheet-divider {
        background: #3c4043;
    }

    .bottom-sheet-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        gap: 16px;
        transition: background-color 0.15s ease;
    }
    .bottom-sheet-item[hidden] {
        display: none !important;
    }

    .bottom-sheet-item:active {
        background: rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] .bottom-sheet-item:active {
        background: rgba(255, 255, 255, 0.1);
    }

    .bottom-sheet-item svg {
        width: 24px;
        height: 24px;
        color: #5f6368;
        flex-shrink: 0;
    }

    [data-theme="dark"] .bottom-sheet-item svg {
        color: #9aa0a6;
    }

    .bottom-sheet-item span {
        font-size: 14px;
        color: #202124;
    }

    [data-theme="dark"] .bottom-sheet-item span {
        color: #e8eaed;
    }

    .bottom-sheet-item.danger svg {
        color: #d93025;
    }

    .bottom-sheet-item.danger span {
        color: #d93025;
    }

    /* Share Settings & Result Bottom Sheets */
    .share-settings-sheet,
    .share-result-sheet {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
    }

    .share-settings-sheet.active,
    .share-result-sheet.active {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
    }

    .share-settings-header,
    .share-result-header {
        padding: 16px 24px;
        text-align: center;
    }

    .share-settings-header h3,
    .share-result-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #202124;
    }

    [data-theme="dark"] .share-settings-header h3,
    [data-theme="dark"] .share-result-header h3 {
        color: #e8eaed;
    }

    .share-settings-body {
        padding: 0 24px 16px;
    }

    .share-option {
        margin-bottom: 16px;
    }

    .share-option > label:not(.share-toggle) {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #5f6368;
        margin-bottom: 8px;
    }

    [data-theme="dark"] .share-option > label:not(.share-toggle) {
        color: #9aa0a6;
    }

    .share-option select {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid #dadce0;
        background: #fff;
        color: #202124;
        font-size: 16px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
    }

    [data-theme="dark"] .share-option select {
        border-color: #3c4043;
        background-color: #292a2d;
        color: #e8eaed;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }

    /* Toggle Switch */
    .share-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        color: #202124;
    }

    [data-theme="dark"] .share-toggle {
        color: #e8eaed;
    }

    .toggle-switch {
        position: relative;
        width: 52px;
        height: 32px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #dadce0;
        transition: 0.3s;
        border-radius: 32px;
    }

    [data-theme="dark"] .toggle-slider {
        background-color: #5f6368;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .toggle-switch input:checked + .toggle-slider {
        background-color: #1a73e8;
    }

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

    /* Password Input */
    .share-password-input {
        display: none;
        margin-top: 12px;
    }

    .share-password-input.show {
        display: block;
    }

    .share-password-input input {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid #dadce0;
        background: #fff;
        color: #202124;
        font-size: 16px;
    }

    [data-theme="dark"] .share-password-input input {
        border-color: #3c4043;
        background-color: #292a2d;
        color: #e8eaed;
    }

    .share-password-input input::placeholder {
        color: #9aa0a6;
    }

    /* Share Actions */
    .share-settings-actions {
        display: flex;
        gap: 12px;
        padding: 16px 24px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid #e0e0e0;
    }

    [data-theme="dark"] .share-settings-actions {
        border-top-color: #3c4043;
    }

    .share-btn-cancel,
    .share-btn-confirm {
        flex: 1;
        padding: 14px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .share-btn-cancel {
        background: #f1f3f4;
        color: #5f6368;
    }

    [data-theme="dark"] .share-btn-cancel {
        background: #3c4043;
        color: #e8eaed;
    }

    .share-btn-confirm {
        background: #1a73e8;
        color: white;
    }

    .share-btn-confirm:active {
        background: #1557b0;
    }

    /* Share Result */
    .share-result-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 24px 16px;
    }

    .share-result-icon {
        width: 56px;
        height: 56px;
        background: #34c759;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

    .share-result-icon svg {
        color: white;
    }

    .share-result-body {
        padding: 0 24px 16px;
    }

    .share-link-preview {
        padding: 14px 16px;
        background: #f1f3f4;
        border-radius: 12px;
        font-size: 13px;
        color: #5f6368;
        word-break: break-all;
        text-align: center;
    }

    [data-theme="dark"] .share-link-preview {
        background: #292a2d;
        color: #9aa0a6;
    }

    .share-result-actions {
        display: flex;
        gap: 12px;
        padding: 0 24px 16px;
    }

    .share-action-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px;
        background: #f1f3f4;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    [data-theme="dark"] .share-action-btn {
        background: #3c4043;
    }

    .share-action-btn:active {
        background: #e0e0e0;
    }

    [data-theme="dark"] .share-action-btn:active {
        background: #5f6368;
    }

    .share-action-btn svg {
        color: #1a73e8;
    }

    .share-action-btn span {
        font-size: 14px;
        font-weight: 500;
        color: #202124;
    }

    [data-theme="dark"] .share-action-btn span {
        color: #e8eaed;
    }

    .share-done-btn {
        width: calc(100% - 48px);
        margin: 0 24px 16px;
        margin-bottom: calc(16px + env(safe-area-inset-bottom));
        padding: 14px;
        background: #1a73e8;
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .share-done-btn:active {
        background: #1557b0;
    }

    /* More Section Styles */
    #more-section {
        display: none;
        padding-top: 8px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
        background: var(--bg-primary);
    }

    #more-section.active {
        display: block;
    }

    .more-content {
        padding: 8px 16px 16px 16px;
    }

    /* Storage Card */
    .more-storage-card {
        background: #f1f3f4;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 24px;
    }

    [data-theme="dark"] .more-storage-card {
        background: #161616;
        border: 1px solid #2f2f2f;
    }

    .more-storage-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        font-size: 15px;
        font-weight: 600;
        color: #202124;
    }

    [data-theme="dark"] .more-storage-header {
        color: #e7e9ea;
    }

    .more-storage-header svg {
        color: #5f6368;
    }

    [data-theme="dark"] .more-storage-header svg {
        color: #9aa0a6;
    }

    .more-storage-bar {
        display: flex;
        height: 6px;
        background: #dadce0;
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    [data-theme="dark"] .more-storage-bar {
        background: #3c4043;
    }

    .more-storage-fill {
        height: 100%;
        transition: width 0.3s ease;
    }

    .more-storage-fill.drive {
        background: #1a73e8;
        border-radius: 3px 0 0 3px;
    }

    .more-storage-fill.photos {
        background: #34a853;
        border-radius: 0 3px 3px 0;
    }

    .more-storage-text {
        font-size: 13px;
        color: #5f6368;
    }

    /* Storage Breakdown */
    .more-storage-breakdown {
        display: flex;
        gap: 20px;
        margin-top: 14px;
    }

    .storage-legend {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #5f6368;
    }

    [data-theme="dark"] .storage-legend {
        color: #9aa0a6;
    }

    .storage-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .storage-dot.drive {
        background: #1a73e8;
    }

    .storage-dot.photos {
        background: #34a853;
    }

    .storage-size {
        margin-left: auto;
        font-weight: 500;
        color: #202124;
    }

    [data-theme="dark"] .storage-size {
        color: #e7e9ea;
    }

    [data-theme="dark"] .more-storage-text {
        color: #9aa0a6;
    }

    /* Menu Groups */
    .more-menu-group {
        background: #f8f9fa;
        border-radius: 16px;
        margin-bottom: 16px;
        overflow: hidden;
    }

    [data-theme="dark"] .more-menu-group {
        background: #161616;
        border: 1px solid #2f2f2f;
    }

    .more-menu-row {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 16px 20px;
        background: transparent;
        border: none;
        border-bottom: 1px solid #e8eaed;
        cursor: pointer;
        gap: 14px;
        text-align: left;
        transition: background-color 0.15s ease;
    }

    [data-theme="dark"] .more-menu-row {
        border-bottom-color: #2f2f2f;
    }

    .more-menu-row:last-child {
        border-bottom: none;
    }

    .more-menu-row:active {
        background: rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] .more-menu-row:active {
        background: rgba(255, 255, 255, 0.05);
    }

    .more-menu-row > svg:first-child {
        color: #5f6368;
        flex-shrink: 0;
    }

    [data-theme="dark"] .more-menu-row > svg:first-child {
        color: #9aa0a6;
    }

    .more-menu-row > span {
        flex: 1;
        font-size: 16px;
        color: #202124;
    }

    [data-theme="dark"] .more-menu-row > span {
        color: #e7e9ea;
    }

    .more-menu-badge {
        background: #1a73e8;
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        display: none;
    }

    .more-menu-badge:not(:empty) {
        display: inline-block;
    }

    .more-menu-chevron {
        color: #9aa0a6;
        flex-shrink: 0;
    }

    [data-theme="dark"] .more-menu-chevron {
        color: #5f6368;
    }

    /* About Section */
    .more-about {
        text-align: center;
        padding: 40px 16px;
        margin-top: 16px;
    }

    .more-about-logo {
        display: inline-block;
        margin-bottom: 12px;
    }

    .more-about-title {
        font-size: 18px;
        font-weight: 600;
        color: #202124;
        margin-bottom: 4px;
    }

    [data-theme="dark"] .more-about-title {
        color: #e7e9ea;
    }

    .more-about-version {
        font-size: 13px;
        color: #9aa0a6;
    }

    /* Shared Section Styles */
    #shared-section {
        display: none;
        margin-top: -50px;
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    #shared-section.active {
        display: block;
    }

    .shared-mobile-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .shared-back-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        color: var(--text-primary);
    }

    .shared-back-btn:active {
        background: var(--hover-bg);
    }

    .shared-mobile-header h1 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .shared-mobile-content {
        padding: 24px 16px 16px;
    }

    /* Shared Item (Mobile) */
    .shared-item-mobile {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
    }

    [data-theme="dark"] .shared-item-mobile {
        background: #161616;
        border: 1px solid #2f2f2f;
    }

    .shared-item-info {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .shared-item-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e8f0fe;
        border-radius: 10px;
        flex-shrink: 0;
    }

    [data-theme="dark"] .shared-item-icon {
        background: #1e3a5f;
    }

    .shared-item-icon svg {
        width: 24px;
        height: 24px;
        color: #1a73e8;
    }

    .shared-item-icon.folder svg {
        color: #5f6368;
    }

    [data-theme="dark"] .shared-item-icon svg {
        color: #8ab4f8;
    }

    .shared-item-details {
        flex: 1;
        min-width: 0;
    }

    .shared-item-name {
        font-size: 15px;
        font-weight: 500;
        color: #202124;
        margin-bottom: 4px;
        word-break: break-word;
    }

    [data-theme="dark"] .shared-item-name {
        color: #e7e9ea;
    }

    .shared-item-meta {
        font-size: 12px;
        color: #5f6368;
        line-height: 1.4;
    }

    [data-theme="dark"] .shared-item-meta {
        color: #9aa0a6;
    }

    .shared-item-actions {
        display: flex;
        gap: 8px;
        margin-top: 14px;
    }

    .shared-copy-btn,
    .shared-delete-btn {
        flex: 1;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .shared-copy-btn {
        background: #1a73e8;
        color: white;
        border: none;
    }

    .shared-copy-btn:active {
        background: #1557b0;
    }

    .shared-delete-btn {
        background: transparent;
        color: #d93025;
        border: 1px solid #d93025;
    }

    .shared-delete-btn:active {
        background: rgba(217, 48, 37, 0.1);
    }

    /* Empty state for shared */
    .shared-empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #5f6368;
    }

    [data-theme="dark"] .shared-empty-state {
        color: #9aa0a6;
    }

    .shared-empty-state svg {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .shared-empty-state p {
        font-size: 15px;
    }

    /* ==========================================
       Settings Section Styles
       ========================================== */
    #settings-section {
        display: none;
        margin-top: -50px;
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    #settings-section.active {
        display: block;
    }

    .settings-mobile-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .settings-back-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        cursor: pointer;
    }

    .settings-back-btn:active {
        background: var(--bg-hover);
    }

    .settings-mobile-header h1 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .settings-content {
        padding: 16px;
    }

    /* Settings Menu List */
    .settings-menu-group {
        background: var(--bg-secondary);
        border-radius: 12px;
        overflow: hidden;
    }

    .settings-menu-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 16px;
        text-align: left;
        cursor: pointer;
    }

    .settings-menu-row:last-child {
        border-bottom: none;
    }

    .settings-menu-row:active {
        background: var(--bg-hover);
    }

    .settings-menu-row svg:first-child {
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .settings-menu-row span {
        flex: 1;
    }

    .settings-menu-chevron {
        color: var(--text-secondary);
        opacity: 0.6;
    }

    /* Settings Sub-sections */
    #settings-photos-section,
    #settings-appearance-section,
    #settings-storage-section,
    #settings-about-section,
    #settings-account-section {
        display: none;
        margin-top: -50px;
        padding-top: env(safe-area-inset-top);
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    #settings-photos-section.active,
    #settings-appearance-section.active,
    #settings-storage-section.active,
    #settings-about-section.active,
    #settings-account-section.active {
        display: block;
    }

    .settings-sub-back-btn {
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        cursor: pointer;
    }

    .settings-sub-back-btn:active {
        background: var(--bg-hover);
    }

    /* Settings About Card */
    .settings-about-card {
    text-align: center;
    padding: 28px 20px 24px;
        margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

    /* Product image styles */
    .settings-about-product-image {
        display: flex;
        justify-content: center;
    margin-bottom: 18px;
    }

    .settings-about-product-image img {
    width: 108px;
        height: auto;
    border-radius: 18px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
    }

    /* Device name styles */
    .settings-about-device-name {
    font-size: 24px;
    font-weight: 700;
        color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

    /* Rename button styles */
    .settings-about-rename-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 22px;
    background: var(--text-primary);
    border: 1px solid var(--text-primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-primary);
    cursor: pointer;
    transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    }

    .settings-about-rename-btn:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.settings-about-rename-btn:active {
    transform: translateY(0);
    }

#settings-about-section #rename-device-btn,
.settings-main #rename-device-btn {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    border: 1px solid var(--text-primary) !important;
    border-radius: 9999px !important;
    box-shadow: none;
    text-decoration: none;
}

    /* Rename modal input */
    .rename-input {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-primary);
        color: var(--text-primary);
        margin-bottom: 16px;
        box-sizing: border-box;
    }

    /* Software Update Header */
    .settings-update-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .settings-update-header-info {
        display: flex;
        flex-direction: column;
    }

    .settings-update-header-name {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .settings-update-header-version {
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* Update Rows */
    .settings-update-row {
        padding: 16px 0;
    }

    .settings-update-row:first-child {
        padding-top: 0;
    }

    .settings-update-row:last-child {
        padding-bottom: 0;
    }

    .settings-update-row-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .settings-update-row-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

    .settings-update-row-desc {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .settings-update-row-link {
        font-size: 14px;
        color: var(--text-primary);
        text-decoration: underline;
    }

    .settings-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0;
    }

    .settings-group {
        background: var(--bg-secondary);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .settings-group-title {
        font-size: 11px;
        font-weight: 650;
        color: var(--text-secondary);
        letter-spacing: 0.005em;
        margin-bottom: 12px;
    }

    .settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .settings-item:last-of-type {
        border-bottom: none;
    }

    .settings-label {
        font-size: 15px;
        color: var(--text-primary);
    }

    .settings-value {
        font-size: 15px;
        color: var(--text-secondary);
    }

    /* Toggle Switch */
    .settings-toggle {
        position: relative;
        width: 51px;
        height: 31px;
        display: inline-block;
    }

    .settings-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--border-color);
        transition: 0.3s;
        border-radius: 31px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 27px;
        width: 27px;
        left: 2px;
        bottom: 2px;
        background-color: var(--toggle-thumb);
        transition: 0.3s;
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--border-color), 0 2px 4px rgba(0,0,0,0.2);
    }

    .settings-toggle input:checked + .toggle-slider {
        background-color: var(--accent-color);
    }

    .settings-toggle input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

    /* Select dropdown */
    .settings-item select {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 14px;
        color: var(--text-primary);
        cursor: pointer;
        min-width: 100px;
    }

    /* Buttons */
    .settings-btn-logout {
        width: 100%;
        padding: 14px;
        background: transparent;
        border: 1px solid var(--error);
        border-radius: 10px;
        color: var(--error);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 8px;
    }

    .settings-btn-logout:active,
    .settings-btn-logout:hover {
        background: rgba(244, 33, 46, 0.1);
    }

    .settings-btn-secondary {
        width: 100%;
        padding: 14px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
    }

    .settings-btn-secondary:active {
        background: var(--bg-hover);
    }

    .settings-btn-destructive {
        width: 100%;
        padding: 14px;
        background: rgba(244, 33, 46, 0.1);
        border: 1px solid rgba(244, 33, 46, 0.25);
        border-radius: 10px;
        color: #f4212e;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .settings-btn-destructive:active { background: rgba(244, 33, 46, 0.18); }
    .settings-btn-destructive:disabled { opacity: 0.4; cursor: not-allowed; }

    /* External SSD device cards inside Settings → Storage. Lives in the
       mobile-first block; the desktop overrides below match the rest of
       the .settings-main rules. */
    .settings-storage-devices { display: flex; flex-direction: column; gap: 10px; }
    .settings-storage-empty {
        font-size: 14px;
        color: var(--text-secondary);
        padding: 8px 2px 10px;
    }
    .settings-storage-device {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .settings-storage-device-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .settings-storage-device-label {
        font-weight: 600;
        font-size: 15px;
        color: var(--text-primary);
    }
    .settings-storage-device-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
        color: var(--text-secondary);
    }
    .settings-storage-uuid { font-family: monospace; }
    .settings-storage-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 999px;
    }
    .settings-storage-badge-ok    { background: rgba(48, 209, 88, 0.15);  color: #18a558; }
    .settings-storage-badge-warn  { background: rgba(244, 33, 46, 0.12);  color: #f4212e; }
    .settings-storage-badge-muted { background: var(--bg-hover);          color: var(--text-secondary); }
    .settings-storage-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .settings-storage-actions > button { width: auto; flex: 1; }
    .settings-storage-hotplug-note {
        margin-top: 4px;
        font-size: 12px;
        color: var(--text-secondary);
    }

    /* Modal action row + destructive variant for the format-confirm dialog. */
    .modal-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
    }
    .modal-btn-secondary, .modal-btn-destructive {
        flex: 1;
        padding: 12px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .modal-btn-secondary {
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
    }
    .modal-btn-destructive {
        background: #f4212e;
        border: 1px solid #f4212e;
        color: #fff;
    }
    .modal-btn-destructive:disabled { opacity: 0.4; cursor: not-allowed; }
    #storage-format-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: monospace;
        font-size: 15px;
        letter-spacing: 0.05em;
    }

    .settings-btn-primary {
        width: 100%;
        padding: 14px;
        background: var(--accent-color);
        border: none;
        border-radius: 10px;
        color: var(--bg-primary);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 8px;
    }

    .settings-btn-primary:hover {
        background: var(--accent-hover);
    }

    .settings-btn-primary:disabled {
        background: var(--border-color);
        color: var(--text-secondary);
        cursor: not-allowed;
    }

    /* Legacy action sheet styles for other menus */
    .action-sheet-content {
        background: var(--bg-primary);
        border-radius: 16px;
        padding: 0;
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .action-sheet-item {
        display: flex;
        align-items: center;
        padding: 14px 16px;
        background: none;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        width: 100%;
        text-align: left;
    }

    .action-sheet-item svg {
        margin-right: 12px;
    }
}

/* ==========================================
   Settings - Shared (both breakpoints)
   ========================================== */


.settings-item-help {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0 0;
    line-height: 1.4;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.settings-text-input,
.settings-select,
.settings-textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

.settings-text-input:focus,
.settings-select:focus,
.settings-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.settings-textarea {
    min-height: 110px;
    resize: vertical;
}

.settings-list-empty {
    color: var(--text-secondary);
    font-size: 14px;
}

.settings-inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-btn-small {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
}

.settings-btn-small.danger {
    border-color: var(--error);
    color: var(--error);
}

.settings-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
}

.settings-user-chip.owner {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.settings-user-chip.disabled {
    color: var(--warning);
    border-color: var(--warning);
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-btn-inline {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.settings-profile-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.settings-profile-avatar,
.settings-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 0 0 auto;
}

.settings-profile-meta {
    flex: 1;
}

.settings-profile-email-line {
    margin-top: 4px;
}

.settings-profile-email,
.settings-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-profile-subtext,
.settings-user-email-line,
.settings-user-last-login,
.settings-session-table-last-active {
    font-size: 13px;
    color: var(--text-secondary);
}

.settings-user-row,
.settings-invite-row,
.settings-session-table-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.settings-user-row:first-child,
.settings-invite-row:first-child,
.settings-session-table-row:first-child {
    border-top: none;
}

.settings-user-row {
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(180px, 1.2fr) minmax(110px, .8fr) auto;
}

.settings-user-row.is-disabled {
    opacity: 0.5;
}

.settings-user-main {
    min-width: 0;
}

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

.settings-user-usage-button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.settings-user-usage-text {
    font-size: 13px;
    color: var(--text-primary);
}

.settings-user-progress {
    width: 180px;
    max-width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border-color);
}

.settings-user-progress-fill {
    height: 100%;
    border-radius: 999px;
}

.settings-user-progress-fill.normal { background: var(--text-primary); }
.settings-user-progress-fill.warning { background: var(--warning); }
.settings-user-progress-fill.critical { background: var(--error); }

.settings-user-menu-button {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

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

.settings-invite-main {
    min-width: 0;
}

.settings-invite-main .settings-user-name,
.settings-invite-main .settings-user-email-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-invite-actions {
    margin-top: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.settings-sessions-table {
    display: grid;
}

.settings-session-table-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
}

.settings-session-table-device {
    font-size: 14px;
    color: var(--text-primary);
}

.settings-action-list .action-sheet-item {
    border-radius: 10px;
}

.settings-quota-row {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 8px;
}

@media (max-width: 900px) {
    .settings-user-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .settings-user-usage-button,
    .settings-user-last-login {
        grid-column: 2 / -1;
    }

    .settings-session-table-row {
        grid-template-columns: 1fr;
    }
}

.settings-update-dot {
    width: 8px;
    height: 8px;
    background: var(--warning);
    border-radius: 50%;
}

.update-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.update-progress-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    width: 0;
    transition: width 0.3s ease;
}

.dev-version-item {
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.dev-version-item:first-child {
    border-top: none;
}

.dev-version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.dev-version-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.dev-version-date {
    font-size: 13px;
    color: var(--text-secondary);
}

.dev-version-notes {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.dev-version-install-btn {
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.dev-version-install-btn:hover {
    background: var(--bg-hover);
}

.settings-update-row-clickable {
    cursor: pointer;
    border-radius: 8px;
    margin: -8px;
    padding: 16px 8px;
    transition: background var(--transition-fast);
}

.settings-update-row-clickable:hover {
    background: var(--bg-hover);
}

.settings-update-overview-card {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 16px;
}

.settings-update-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    margin-bottom: 18px;
    background: transparent;
    border: 0;
}

.settings-update-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-update-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.settings-update-status-badge.is-ok {
    background: rgba(0, 186, 124, 0.12);
    border-color: rgba(0, 186, 124, 0.24);
    color: var(--success);
}

.settings-update-status-badge.is-available {
    background: rgba(255, 212, 0, 0.14);
    border-color: rgba(255, 212, 0, 0.3);
    color: #b98c00;
}

.settings-update-status-badge.is-busy {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: #3b82f6;
}

.settings-update-status-badge.is-error {
    background: rgba(244, 33, 46, 0.12);
    border-color: rgba(244, 33, 46, 0.24);
    color: var(--error);
}

.settings-update-version-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.settings-update-version-card {
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
}

.settings-update-version-label {
    font-size: 11px;
    font-weight: 650;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.005em;
}

.settings-update-version-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-update-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-update-check-btn {
    flex-shrink: 0;
    min-width: 170px;
}

.settings-update-status-copy {
    min-width: 0;
}

.settings-update-status-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.settings-update-status-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

.settings-update-available-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.settings-update-card,
.settings-update-progress-card,
.settings-update-reboot-card,
.settings-update-dev-card {
    border: 1px solid var(--border-color);
}

.settings-update-card-header {
    margin-bottom: 10px;
}

.settings-update-card-eyebrow {
    font-size: 11px;
    font-weight: 650;
    color: var(--text-secondary);
    letter-spacing: 0.005em;
    margin-bottom: 4px;
}

.settings-update-card-version {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.settings-update-card-notes {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 14px;
    min-height: 44px;
    white-space: pre-wrap;
}

.settings-update-row {
    padding: 0;
    border-bottom: none;
}

.settings-update-reboot-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.settings-update-section-header {
    margin-bottom: 10px;
}

.settings-update-section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.dev-version-item {
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
}

.dev-version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.dev-version-notes {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .settings-update-header,
    .settings-update-actions,
    .settings-update-reboot-card {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-update-version-grid {
        grid-template-columns: 1fr;
    }

    .settings-update-check-btn {
        width: 100%;
        min-width: 0;
    }

    .settings-update-status-badge {
        align-self: flex-start;
    }
}

/* ==========================================
   Settings - Desktop (min-width: 641px)
   ========================================== */

@media (min-width: 641px) {
    /* Desktop Settings: sidebar (left) + scrollable content panel (right),
       modeled after Drive/Photos. Sub-sections' .settings-content is
       teleported into #settings-main via JS. */
    #settings-section.active {
        display: flex !important;
        flex: 1 1 0%;
        flex-direction: row;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    /* Hide the mobile header on desktop (no "Settings" bar at top) */
    #settings-section > .settings-mobile-header {
        display: none;
    }

    /* Outer .settings-content becomes the flex row container on desktop */
    #settings-section > .settings-content {
        display: flex;
        flex-direction: row;
        flex: 1 1 0%;
        min-width: 0;
        min-height: 0;
        gap: 0;
    }

    /* Hide sub-section wrappers on desktop (their content is moved into #settings-main) */
    #settings-photos-section,
    #settings-appearance-section,
    #settings-storage-section,
    #settings-update-section,
    #settings-about-section,
    #settings-account-section,
    #settings-apps-section {
        display: none !important;
    }

    /* ----- Sidebar (matches .drive-sidebar / .drive-nav-item) ----- */
    #settings-section > .settings-content > .settings-menu-group {
        flex: 0 0 clamp(156px, 22vw, var(--sidebar-width));
        width: clamp(156px, 22vw, var(--sidebar-width));
        min-width: 156px;
        max-width: var(--sidebar-width);
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        padding: 12px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        border-radius: 0;
    }

    #settings-section .settings-menu-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        border-radius: 24px;
        transition: all var(--transition-fast);
        min-width: 0;
    }

    #settings-section .settings-menu-row > span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #settings-section .settings-menu-row svg:first-child {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.8;
    }

    #settings-section .settings-menu-row:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    #settings-section .settings-menu-row.active {
        background: var(--accent-color);
        color: var(--bg-primary);
    }

    #settings-section .settings-menu-row.active svg:first-child {
        opacity: 1;
    }

    #settings-section .settings-menu-row > span {
        flex: 1;
    }

    #settings-section .settings-menu-chevron {
        display: none;
    }

    /* ----- Right panel ----- */
    .settings-main {
        flex: 1 1 0%;
        min-width: 0;
        padding: 56px 64px 80px;
        overflow-y: auto;
    }

    .settings-main:empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
    }

    .settings-panel-title {
        font-size: 30px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 32px;
        letter-spacing: -0.02em;
        max-width: 640px;
    }

    .settings-main .settings-content {
        display: flex;
        flex-direction: column;
        gap: 36px;
        max-width: 640px;
    }

    /* No-card section style */
    .settings-main .settings-group {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .settings-main .settings-group-title {
        font-size: 11px;
        font-weight: 650;
        color: var(--text-secondary);
        letter-spacing: 0.005em;
        margin: 0 0 12px;
    }

    /* Items as a continuous list inside a group */
    .settings-main .settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid var(--border-color);
        gap: 16px;
        min-height: 48px;
    }

    .settings-main .settings-group > .settings-item:first-of-type {
        border-top: 1px solid var(--border-color);
    }

    .settings-main .settings-item:last-of-type {
        border-bottom: 1px solid var(--border-color);
    }

    .settings-main .settings-label {
        font-size: 14px;
        color: var(--text-primary);
        font-weight: 400;
    }

    .settings-main .settings-value {
        font-size: 14px;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    .settings-main .settings-item-help {
        font-size: 12.5px;
        color: var(--text-secondary);
        padding: 8px 0 0;
        line-height: 1.5;
    }

    /* Form controls */
    .settings-main .settings-item select,
    .settings-main .settings-item input[type="text"] {
        padding: 6px 12px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 13.5px;
        cursor: pointer;
        transition: border-color var(--transition-fast);
    }

    .settings-main .settings-item select:hover,
    .settings-main .settings-item input[type="text"]:hover {
        border-color: var(--text-secondary);
    }

    .settings-main .settings-item select:focus,
    .settings-main .settings-item input[type="text"]:focus {
        outline: none;
        border-color: var(--accent-color);
    }

    /* Toggle */
    .settings-toggle {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 22px;
        flex-shrink: 0;
    }

    .settings-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .settings-toggle .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--border-color);
        border-radius: 11px;
        transition: 0.18s ease;
    }

    .settings-toggle .toggle-slider::before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        top: 2px;
        background: var(--toggle-thumb);
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25);
        transition: 0.18s ease;
    }

    .settings-toggle input:checked + .toggle-slider {
        background: var(--accent-color);
    }

    .settings-toggle input:checked + .toggle-slider::before {
        transform: translateX(14px);
    }

    .settings-main .settings-divider {
        display: none;
    }

    /* ----- Software Update specific ----- */
    .settings-main .settings-update-header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 0 28px;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        margin-bottom: 8px;
    }

    .settings-main .settings-update-header-icon {
        width: 44px;
        height: 44px;
    }

    .settings-update-header-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .settings-main .settings-update-header-name {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .settings-main .settings-update-header-version {
        font-size: 13px;
        color: var(--text-secondary);
    }

    .settings-main .settings-update-row {
        padding: 14px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .settings-main .settings-update-row:last-child {
        border-bottom: none;
    }

    .settings-main .settings-group > .settings-update-row:first-child {
        border-top: 1px solid var(--border-color);
    }

    .settings-main .settings-update-row-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .settings-main .settings-update-row-subtitle {
        font-size: 13px;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

    .settings-main .settings-update-row-desc {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
    }

    .settings-main .settings-update-row-clickable {
        cursor: pointer;
        margin: 0 -12px;
        padding: 14px 12px;
        border-radius: 6px;
        border-bottom: 1px solid var(--border-color);
    }

    .settings-main .settings-update-row-clickable:hover {
        background: var(--bg-hover);
    }

    .settings-update-overview-card {
        background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
        border: 1px solid var(--border-color);
        border-radius: 18px;
        padding: 20px;
        margin-bottom: 16px;
    }

    .settings-update-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 0;
        margin-bottom: 18px;
        background: transparent;
        border: 0;
    }

    .settings-update-header-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .settings-update-header-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .settings-update-header-name {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .settings-update-header-version {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .settings-update-status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--border-color);
        background: var(--bg-primary);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .settings-update-status-badge.is-ok {
        background: rgba(0, 186, 124, 0.12);
        border-color: rgba(0, 186, 124, 0.24);
        color: var(--success);
    }

    .settings-update-status-badge.is-available {
        background: rgba(255, 212, 0, 0.14);
        border-color: rgba(255, 212, 0, 0.3);
        color: #b98c00;
    }

    .settings-update-status-badge.is-busy {
        background: rgba(59, 130, 246, 0.12);
        border-color: rgba(59, 130, 246, 0.28);
        color: #3b82f6;
    }

    .settings-update-status-badge.is-error {
        background: rgba(244, 33, 46, 0.12);
        border-color: rgba(244, 33, 46, 0.24);
        color: var(--error);
    }

    .settings-update-version-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 18px;
    }

    .settings-update-version-card {
        padding: 14px 16px;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background: var(--bg-primary);
    }

    .settings-update-version-label {
        font-size: 11px;
        font-weight: 650;
        color: var(--text-secondary);
        margin-bottom: 6px;
        letter-spacing: 0.005em;
    }

    .settings-update-version-value {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .settings-update-actions {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .settings-update-check-btn {
        flex-shrink: 0;
        min-width: 170px;
    }

    .settings-update-status-copy {
        min-width: 0;
    }

    .settings-update-status-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .settings-update-status-desc {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .settings-update-available-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 16px;
    }

    .settings-update-card,
    .settings-update-progress-card,
    .settings-update-reboot-card,
    .settings-update-dev-card {
        border: 1px solid var(--border-color);
    }

    .settings-update-card-header {
        margin-bottom: 10px;
    }

    .settings-update-card-eyebrow {
        font-size: 11px;
        font-weight: 650;
        color: var(--text-secondary);
        letter-spacing: 0.005em;
        margin-bottom: 4px;
    }

    .settings-update-card-version {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .settings-update-card-notes {
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-secondary);
        margin-bottom: 14px;
        min-height: 44px;
        white-space: pre-wrap;
    }

    .settings-update-row {
        padding: 0;
        border-bottom: none;
    }

    .settings-update-reboot-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .settings-update-section-header {
        margin-bottom: 10px;
    }

    .settings-update-section-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    .dev-version-item {
        padding: 14px 0;
        border-top: 1px solid var(--border-color);
    }

    .dev-version-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 6px;
    }

    .dev-version-notes {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 10px;
        white-space: pre-wrap;
    }

    @media (max-width: 640px) {
        .settings-update-header,
        .settings-update-actions,
        .settings-update-reboot-card {
            flex-direction: column;
            align-items: stretch;
        }

        .settings-update-version-grid {
            grid-template-columns: 1fr;
        }

        .settings-update-check-btn {
            width: 100%;
            min-width: 0;
        }

        .settings-update-status-badge {
            align-self: flex-start;
        }
    }

    /* ----- About specific ----- */
    .settings-main .settings-about-card {
        text-align: center;
        padding: 20px 24px 28px;
        margin: 0 0 8px;
        border-radius: 24px;
    }

    .settings-main .settings-about-product-image {
        margin-bottom: 22px;
    }

    .settings-main .settings-about-product-image img {
        width: 156px;
    }

    .settings-main .settings-about-device-name {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: -0.01em;
    }

    .settings-main .settings-about-rename-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 22px;
        font-size: 13px;
        font-weight: 600;
        background: var(--text-primary);
        color: var(--bg-primary);
        border: 1px solid var(--text-primary);
        border-radius: 999px;
        cursor: pointer;
        transition: transform var(--transition-fast), opacity var(--transition-fast);
    }

    .settings-main .settings-about-rename-btn:hover {
        transform: translateY(-1px);
        opacity: 0.92;
    }

    .settings-main .settings-about-rename-btn:active {
        transform: translateY(0);
    }

    /* ----- Buttons ----- */
    .settings-main .settings-btn-primary {
        width: auto;
        align-self: flex-start;
        padding: 8px 18px;
        background: var(--accent-color);
        border: none;
        border-radius: 6px;
        color: var(--bg-primary);
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 16px;
        transition: background var(--transition-fast);
    }

    .settings-main .settings-btn-primary:hover {
        background: var(--accent-hover);
    }

    .settings-main .settings-btn-primary:disabled {
        background: var(--border-color);
        color: var(--text-secondary);
        cursor: not-allowed;
    }

    .settings-main .settings-btn-secondary {
        width: auto;
        padding: 7px 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        margin-top: 16px;
        align-self: flex-start;
        transition: background var(--transition-fast);
    }

    .settings-main .settings-btn-secondary:hover {
        background: var(--bg-hover);
    }

    /* Match the destructive button to the secondary's desktop dimensions so
       Rename / Format / Eject form one even row (only the colour differs). */
    .settings-main .settings-btn-destructive {
        width: auto;
        padding: 7px 16px;
        border-radius: 6px;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 16px;
        align-self: flex-start;
        background: rgba(244, 33, 46, 0.1);
        border: 1px solid rgba(244, 33, 46, 0.25);
        color: #f4212e;
        transition: background var(--transition-fast);
    }
    .settings-main .settings-btn-destructive:hover { background: rgba(244, 33, 46, 0.18); }

    /* In the action row the buttons are flex siblings — drop the standalone
       margin/self-align so they line up flush and equal-width. */
    .settings-main .settings-storage-actions { margin-top: 14px; }
    .settings-main .settings-storage-actions > button {
        margin-top: 0;
        align-self: auto;
        flex: 1;
    }

    .settings-main .settings-btn-logout {
        width: auto;
        align-self: flex-start;
        padding: 8px 20px;
        margin-top: 0;
    }

    .settings-main .update-progress-bar {
        margin-top: 14px;
    }
}

/* ==========================================
   Torrent Settings Modal
   ========================================== */

.torrent-info {
    margin-bottom: 16px;
}

.torrent-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
    margin-bottom: 4px;
}

.torrent-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.torrent-file-list {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 0;
    margin-top: 8px;
}

.torrent-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.torrent-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

.torrent-file-size {
    flex-shrink: 0;
    color: var(--text-muted);
}

.torrent-file-more {
    color: var(--text-muted);
    font-style: italic;
    justify-content: center;
}

.torrent-dest-section {
    margin-bottom: 16px;
}

.torrent-dest-label {
    font-size: 11px;
    font-weight: 650;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.005em;
}

.folder-tree {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.folder-tree-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--transition-fast);
    user-select: none;
}

.folder-tree-item:hover {
    background: var(--bg-hover);
}

.folder-tree-item.selected {
    background: rgba(59, 130, 246, 0.15);
}

.folder-tree-toggle {
    width: 20px;
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: center;
}

.folder-icon {
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 16px;
}

.folder-tree-name {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-tree-children {
    padding-left: 20px;
}

.folder-tree-loading,
.folder-tree-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* ==========================================
   Help & Support
   ========================================== */

.support-action-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.support-action-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.support-action-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.support-history-row {
    align-items: center;
}

.support-history-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    overflow: hidden;
}

.support-history-subject {
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-history-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.support-field-help {
    font-size: 12px;
    color: var(--text-muted);
}

.support-input,
.support-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
}

.support-textarea {
    line-height: 1.5;
    resize: vertical;
}

.support-input::placeholder,
.support-textarea::placeholder {
    color: var(--text-muted);
}

.support-input:focus,
.support-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.support-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.support-attachments {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.support-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.support-attach-btn:hover {
    background: var(--bg-hover);
}

.support-attach-help {
    font-size: 12px;
    color: var(--text-muted);
}

.support-attach-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-attach-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.support-attach-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}

.support-attach-icon {
    font-size: 18px;
    width: 32px;
    text-align: center;
}

.support-attach-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-attach-size {
    font-size: 12px;
    color: var(--text-muted);
}

.support-attach-remove {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.support-attach-remove:hover {
    color: var(--text-primary);
}

.support-meta-details {
    font-size: 12px;
    color: var(--text-secondary);
}

.support-meta-details summary {
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}

.support-meta-preview {
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.support-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.support-detail-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.support-detail-subject {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.support-detail-body {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}

.support-detail-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.support-detail-thumb {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

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

.support-detail-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
}

.support-detail-file-size {
    color: var(--text-muted);
    font-size: 12px;
}

#support-clear-history-btn {
    display: block;
    width: max-content;
    margin-left: auto;
    margin-top: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

#support-clear-history-btn:hover,
#support-clear-history-btn:active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* ==========================================
   Privacy / Malware Scan
   ========================================== */

.privacy-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.privacy-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.privacy-stat-label {
    color: var(--text-secondary);
}

.privacy-stat-value {
    color: var(--text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.privacy-scan-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.privacy-scan-progress {
    font-size: 12px;
    color: var(--text-secondary);
}

.privacy-detection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.privacy-detection-item:last-child {
    border-bottom: none;
}

.privacy-detection-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.privacy-detection-path {
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.privacy-detection-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.privacy-detection-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.privacy-detection-ignore,
.privacy-detection-delete {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.privacy-detection-ignore {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.privacy-detection-ignore:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.privacy-detection-delete {
    border: 1px solid var(--error);
    color: var(--error);
}

.privacy-detection-delete:hover {
    background: rgba(244, 33, 46, 0.1);
}
/* ==========================================
   Upload Panel (bottom-right, Google-Drive style)
   ========================================== */

.upload-panel {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 300ms ease;
}

.upload-panel[hidden] { display: none; }
.upload-panel.upload-panel-fading { opacity: 0; pointer-events: none; }

.upload-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-tertiary);
}

.upload-panel-title-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upload-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-panel-summary {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-panel-actions { display: flex; gap: 4px; flex-shrink: 0; }
.upload-panel-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.upload-panel-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.upload-panel-collapse svg { transition: transform var(--transition-fast); }
.upload-panel-collapse.rotated svg { transform: rotate(180deg); }

.upload-panel-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.upload-panel.upload-panel-collapsed .upload-panel-list { display: none; }

.upload-panel-row {
    display: grid;
    grid-template-columns: 32px 1fr 28px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    transition: background var(--transition-fast);
}
.upload-panel-row:hover { background: var(--bg-hover); }

.upload-panel-row-icon {
    width: 28px;
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.upload-row-progress {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: rotate(-90deg);
}
.upload-row-track {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 3;
}
.upload-row-bar {
    fill: none;
    stroke: var(--blue);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 200ms linear;
}
.upload-row-check, .upload-row-alert { display: none; }

.upload-panel-row.is-success .upload-row-progress { display: none; }
.upload-panel-row.is-success .upload-row-check { display: block; color: var(--success); }
.upload-panel-row.is-error .upload-row-progress,
.upload-panel-row.is-canceled .upload-row-progress { display: none; }
.upload-panel-row.is-error .upload-row-alert { display: block; color: var(--error); }
.upload-panel-row.is-canceled .upload-row-alert { display: block; color: var(--text-muted); }

.upload-panel-row-body { min-width: 0; }
.upload-panel-row-name {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.upload-panel-row-status {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.upload-panel-row-cancel {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.upload-panel-row:hover .upload-panel-row-cancel,
.upload-panel-row:focus-within .upload-panel-row-cancel { opacity: 1; }
.upload-panel-row-cancel:hover { background: var(--bg-hover); color: var(--text-primary); }

.upload-panel-row.is-success .upload-panel-row-cancel,
.upload-panel-row.is-canceled .upload-panel-row-cancel { display: none; }

@media (max-width: 600px) {
    .upload-panel { width: calc(100vw - 16px); right: 8px; bottom: 8px; }
}

.upload-panel-row.is-retrying .upload-row-bar { stroke: var(--warning); }
.upload-panel-row.is-retrying .upload-panel-row-status { color: var(--warning); }

/* Where the room is when this box is full (a Plum Box that combines space):
   wraps, unlike the one-line status above it. */
.upload-panel-row-hint {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.upload-panel-row-hint[hidden] { display: none; }

/* ==========================================
   Upload Resume Modal — shown on page reload when there are
   interrupted upload sessions the server still acknowledges.
   ========================================== */

.upload-resume-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.upload-resume-modal {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    width: min(440px, 100%);
    padding: 24px;
}

.upload-resume-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.upload-resume-body {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.upload-resume-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.upload-resume-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.upload-resume-list li:last-child { border-bottom: none; }
.upload-resume-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.upload-resume-pct {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.upload-resume-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.upload-resume-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.upload-resume-btn:hover { background: var(--bg-hover); }
.upload-resume-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}
.upload-resume-primary:hover {
    filter: brightness(1.08);
}

/* ============================
   Plum Store (Apps section)
   ============================ */

.apps-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: 24px;
}
.apps-header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: nowrap;
    margin-bottom: 24px;
}
.apps-title {
    flex: 0 0 auto;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
}
.apps-search-box {
    flex: 0 1 340px;
    width: 340px;
    max-width: 100%;
}
.apps-pane-store {
    flex: 1;
    width: 100%;
    min-width: 0;
    position: relative;
}
.apps-store-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 72px 24px;
    color: var(--text-secondary);
    font-size: 14px;
}
.apps-store-loading-text {
    color: var(--text-secondary);
}
.apps-tabs { display: flex; gap: 8px; flex: 1; }
.apps-tab {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.apps-tab.active {
    background: var(--accent-color);
    color: var(--accent-on);
    border-color: var(--accent-color);
}
.apps-upload-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.apps-upload-btn:hover { background: var(--hover-bg); }

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    align-items: stretch;
    width: 100%;
}
.apps-empty {
    padding: 72px 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    grid-column: 1 / -1;
}

.app-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    transition: border-color var(--transition-fast);
}
.app-card:hover {
    border-color: var(--text-secondary);
}

.app-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.app-card-icon {
    width: 56px; height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    object-fit: cover;
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border: 1px solid var(--border-color);
}
.app-card-icon-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.app-card-headtext { flex: 1; min-width: 0; }
.app-card-namerow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-card-version {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.app-card-body { flex: 1; }
.app-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-card-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}
.app-card-perm {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.app-card-actions {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    gap: 8px;
}
.app-card-btn {
    flex: 1;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.app-card-btn:not(.app-card-btn-primary):not(.app-card-btn-danger):hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.app-card-btn-primary {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}
.app-card-btn-primary:hover:not(:disabled) {
    background: var(--bg-primary);
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.app-card-btn-danger {
    flex: 0 0 auto;
    background: transparent;
    color: var(--error, #e5484d);
    border-color: color-mix(in srgb, var(--error, #e5484d) 45%, transparent);
}
.app-card-btn-danger:hover { background: var(--error, #e5484d); color: #fff; border-color: var(--error, #e5484d); }
.app-card-btn:disabled { opacity: 0.55; cursor: default; }

.app-card-installed-badge {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--success, #00ba7c);
    background: color-mix(in srgb, var(--success, #00ba7c) 16%, transparent);
}

/* Dark theme: accent is white, so pin Install/Update to black-on-white / white-on-black invert */
[data-theme="dark"] .app-card-btn-primary {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
[data-theme="dark"] .app-card-btn-primary:hover:not(:disabled) {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-card-btn-primary {
        background: #000000;
        color: #ffffff;
        border-color: #000000;
    }
    :root:not([data-theme="light"]) .app-card-btn-primary:hover:not(:disabled) {
        background: #ffffff;
        color: #000000;
        border-color: #ffffff;
    }
}

/* Settings > Application 관리 — drag-reorder home bar UI.
   Rows piggy-back on the existing .settings-item visual language so the
   page matches the rest of Settings (account, advanced, storage). Only
   the grip + drag affordance + divider line are bespoke. */
.nav-prefs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.nav-prefs-search-box {
    width: 100%;
    margin: 16px 0;
}
.nav-prefs-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
    user-select: none;
}
.nav-prefs-item:last-child { border-bottom: none; }
.nav-prefs-item.is-dragging { opacity: 0.4; }
.nav-prefs-item.is-hidden .nav-prefs-name,
.nav-prefs-item.is-hidden .nav-prefs-icon { opacity: 0.6; }
.nav-prefs-item.drag-over-above::before,
.nav-prefs-item.drag-over-below::after,
.nav-prefs-divider.drag-over-above::before,
.nav-prefs-divider.drag-over-below::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
    border-radius: 2px;
}
.nav-prefs-item.drag-over-above::before,
.nav-prefs-divider.drag-over-above::before { top: -1px; }
.nav-prefs-item.drag-over-below::after,
.nav-prefs-divider.drag-over-below::after { bottom: -1px; }
.nav-prefs-grip {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: grab;
    flex-shrink: 0;
}
.nav-prefs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-primary);
    flex-shrink: 0;
}
.nav-prefs-icon img { width: 20px; height: 20px; object-fit: contain; }
.nav-prefs-name {
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-prefs-uninstall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-prefs-uninstall:hover { background: var(--hover-bg); color: #e25555; }
.nav-prefs-uninstall.is-disabled { opacity: 0.3; cursor: default; }
.nav-prefs-uninstall.is-disabled:hover { background: transparent; color: var(--text-secondary); }
.nav-prefs-uninstall:disabled { opacity: 0.4; cursor: default; }

.nav-prefs-divider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 10px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.005em;
    user-select: none;
}
.nav-prefs-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.nav-prefs-divider-label { white-space: nowrap; }

/* Mobile (the .settings-main override flattens groups). Keep the row
   metrics matching .settings-item there too — only the gap shrinks. */
@media (max-width: 768px) {
    .nav-prefs-item { padding: 14px 0; min-height: 48px; }
}

/* ----- Launchpad: full-viewport app grid overlay ----- */
/* Settings > 애플리케이션 — per-app info dashboard (replaced the old
   home-bar management list; the bar is arranged directly now). */
.apps-manage-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.apps-manage-subhead {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 650;
    color: var(--text-secondary);
    letter-spacing: 0.005em;
}
.apps-manage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background var(--transition-fast);
}
.apps-manage-row:hover { background: var(--bg-hover); }
.apps-manage-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.apps-manage-icon img { width: 22px; height: 22px; object-fit: contain; }
.apps-manage-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.apps-manage-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.apps-manage-sub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.apps-manage-usage {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.apps-manage-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}
.apps-manage-btn {
    padding: 6px 12px;
    font-size: 12px;
}
.apps-manage-btn-danger { color: var(--error); }
.apps-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.apps-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.apps-badge.is-running {
    color: #22c55e;
    background: color-mix(in srgb, #22c55e 12%, transparent);
}
.apps-manage-empty {
    padding: 18px 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.apps-manage-confirm-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Shared confirm-dialog body copy (showConfirmModal) — used by the Drive
   trash/restore/empty confirms and any future native-confirm replacement. */
.confirm-modal-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}
@media (max-width: 640px) {
    .apps-manage-usage { display: none; }
}

/* Home bar direct manipulation: pinned icons drag-to-reorder with the same
   FLIP pattern as the launchpad (see setupHomeBarArrange). */
#top-nav-items .nav-item {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}
#top-nav-items .nav-item.shifting {
    transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#top-nav-items .nav-item.dragging {
    z-index: 20;
    transition: none;
    background: var(--bg-hover);
}
#top-nav-items.is-arranging .nav-item {
    cursor: grabbing;
}

/* While a home-bar icon is airborne, the launchpad (Apps) button becomes the
   remove drop target: its grid icon swaps to an ✕ and it tints red; hovering
   the dragged icon over it goes solid. Same-size icons, so the button's rect
   (measured once at drag start) stays valid. */
.launchpad-btn-remove-icon { display: none; }
#launchpad-btn.is-remove-target .launchpad-btn-grid-icon { display: none; }
#launchpad-btn.is-remove-target .launchpad-btn-remove-icon { display: block; }
#launchpad-btn.is-remove-target {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ef4444 55%, transparent);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
#launchpad-btn.is-remove-target.is-over {
    color: #fff;
    background: #ef4444;
    transform: scale(1.15);
}

/* The launchpad button piggybacks on .nav-item so it sits inline with
   the pinned-app buttons. .nav-divider-inline draws a hairline before
   it so users see "your pins | all apps" as two visual zones. */
.nav-items {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-divider-inline {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 6px;
    flex-shrink: 0;
}
.nav-item-launchpad {
    background: transparent;
    border: 0;
    cursor: pointer;
}
body.launchpad-open .nav-item-launchpad {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
body.launchpad-open .nav-item-launchpad svg { opacity: 1; }

.launchpad-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
}
.launchpad-overlay[hidden] { display: none; }
.launchpad-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
[data-resolved-theme="light"] .launchpad-backdrop {
    background: rgba(255, 255, 255, 0.7);
}
.launchpad-panel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 80px 40px 60px;
    overflow-y: auto;
    z-index: 1;
}
.launchpad-search-wrap {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(420px, 100%);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 48px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.launchpad-search-wrap svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}
#launchpad-search {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: 15px;
}
.launchpad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 32px 24px;
    width: min(960px, 100%);
    margin: 0 auto;
}
.launchpad-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 6px;
    background: transparent;
    border: 0;
    border-radius: 16px;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
    /* Drag-to-arrange: the browser must not turn a touch-drag into a scroll
       (long-press picks the tile up), and nothing inside a tile should be
       selectable or natively draggable — that's what used to highlight the
       icon/name mid-drag. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* iOS: no long-press callout mid-pickup */
}
.launchpad-tile:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.08);
}
[data-resolved-theme="light"] .launchpad-tile:hover {
    background: rgba(15, 23, 42, 0.06);
}
/* While a drag is in flight every tile's position is JS-owned (inline FLIP
   transforms); the hover scale would fight them. */
.launchpad-grid.is-dragging .launchpad-tile:hover {
    transform: none;
    background: transparent;
}
.launchpad-tile.shifting {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.launchpad-tile.dragging {
    z-index: 20;
    transition: none;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    cursor: grabbing;
}
[data-resolved-theme="light"] .launchpad-tile.dragging {
    background: rgba(15, 23, 42, 0.08);
}
.launchpad-grid.is-dragging .launchpad-tile {
    cursor: grabbing;
}
.launchpad-tile-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.launchpad-tile-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    -webkit-user-drag: none;
    pointer-events: none;
}
.launchpad-tile-icon svg { width: 32px; height: 32px; }
.launchpad-tile-name {
    font-size: 13px;
    text-align: center;
    color: var(--text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Drop zones (Android home-screen model): appear at the top of the panel
   only while a tile is airborne. Drop on one to pin/unpin or uninstall;
   dropping anywhere else is just a reorder. Reveal is opacity-only so the
   hit-test rects measured at drag start stay valid. */
.launchpad-dropzones {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 3;
    opacity: 0;
    pointer-events: none; /* pointer stays with the dragged tile */
    transition: opacity 0.18s ease;
}
.launchpad-dropzones[hidden] { display: none; }
.launchpad-dropzones.active { opacity: 1; }
.launchpad-dropzone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    border: 1.5px dashed var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.launchpad-dropzone svg { flex-shrink: 0; }
/* Hovering the dragged tile over a zone: it inflates and goes solid. */
.launchpad-dropzone.is-over {
    transform: scale(1.08);
    border-style: solid;
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: #fff;
}
.launchpad-dropzone-danger.is-over {
    border-color: #ef4444;
    background: #ef4444;
}
.launchpad-empty {
    margin-top: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* In-overlay confirm dialog — same design language as the global modal
   (card on --bg-secondary, .modal-actions buttons), but scoped inside the
   launchpad because the global #modal stacks below it. */
.launchpad-confirm {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.launchpad-confirm[hidden] { display: none; }
.launchpad-confirm-card {
    width: min(380px, calc(100% - 48px));
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: fadeInUp 0.18s ease;
}
.launchpad-confirm-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.launchpad-confirm-card p {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-line;
}

@media (max-width: 640px) {
    .launchpad-panel { padding: 64px 16px 40px; }
    .launchpad-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 24px 16px;
    }
    .launchpad-tile-icon { width: 56px; height: 56px; border-radius: 14px; }
    .launchpad-tile-icon svg { width: 28px; height: 28px; }

    /* Plum Store: keep title + search on one row; search fills remaining width */
    .apps-layout { padding: 16px; }
    .apps-header { gap: 12px; min-width: 0; }
    .apps-title { font-size: 20px; }
    .apps-search-box {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
    .nav-prefs-search-box { width: 100%; }
    .apps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.password-strength {
    margin: -4px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
}
.password-strength-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color, rgba(255,255,255,0.12));
    overflow: hidden;
    position: relative;
}
.password-strength-bar::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--pw-strength-width, 0%);
    background: var(--pw-strength-color, #888);
    transition: width 0.15s ease, background 0.15s ease;
}
.password-strength-label {
    font-size: 12px;
    color: var(--text-muted, #888);
    min-width: 48px;
}
.password-strength.weak { --pw-strength-color: #e74c3c; }
.password-strength.fair { --pw-strength-color: #f39c12; }
.password-strength.good { --pw-strength-color: #3498db; }
.password-strength.strong { --pw-strength-color: #27ae60; }
.auth-link-row {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
}
.auth-link-row a {
    color: var(--accent-color, #7c6cff);
    text-decoration: none;
}
.settings-recovery-codes {
    margin: 12px 0;
    padding: 12px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.6;
    border-radius: 8px;
    background: var(--surface-elevated, rgba(255,255,255,0.04));
    white-space: pre-wrap;
    word-break: break-all;
}
.settings-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 12px;
    font-size: 14px;
}
.settings-activity-row,
.settings-login-history-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    font-size: 13px;
}
.settings-activity-row:last-child,
.settings-login-history-row:last-child {
    border-bottom: none;
}
.settings-activity-action {
    font-weight: 500;
}
.settings-activity-meta,
.settings-login-history-meta {
    color: var(--text-muted, #888);
    font-size: 12px;
}


/* ── Device Status (Settings) ─────────────────────────────────────────
   Gauge-style live metrics. Uses the theme tokens so light/dark both
   work; bars animate width on refresh for the "live" feel. */
/* The "Live" badge and its pulse were removed with the design update. */
.devstat-card {
    background: var(--bg-secondary, rgba(127,127,127,0.06));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 4px 16px;
}
.devstat-item {
    padding: 13px 0;
}
.devstat-item + .devstat-item {
    border-top: 1px solid var(--border-color);
}
.devstat-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.devstat-label {
    font-size: 14px;
    color: var(--text-secondary);
}
.devstat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.devstat-sub {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.devstat-hint {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--warning);
}
.devstat-bar {
    margin-top: 9px;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
}
.devstat-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--success);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}
.devstat-fill.warn { background: var(--warning); }
.devstat-fill.bad  { background: var(--error); }
/* WiFi signal segments — phone-status-bar style, heights ascending. */
.devstat-sig {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 14px;
}
.devstat-sig i {
    width: 4px;
    border-radius: 1.5px;
    background: var(--border-light);
    transition: background-color 0.4s ease;
}
.devstat-sig i:nth-child(1) { height: 5px; }
.devstat-sig i:nth-child(2) { height: 8px; }
.devstat-sig i:nth-child(3) { height: 11px; }
.devstat-sig i:nth-child(4) { height: 14px; }
.devstat-sig i.on      { background: var(--success); }
.devstat-sig.weak i.on { background: var(--warning); }

/* ── Software Update polish ───────────────────────────────────────────── */
.settings-update-checked-at {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
/* Step indicator: download → install → done. */
.update-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.update-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.update-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.update-step-label {
    font-size: 12.5px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.update-step.active .update-step-dot {
    background: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.18);
    animation: devstat-pulse 1.6s ease-in-out infinite;
}
.update-step.active .update-step-label { color: var(--text-primary); font-weight: 600; }
.update-step.done .update-step-dot { background: var(--success); animation: none; }
.update-step.done .update-step-label { color: var(--text-secondary); }
.update-step-line {
    flex: 1;
    height: 1.5px;
    min-width: 18px;
    background: var(--border-color);
}
/* Indeterminate shimmer while a phase has no byte-level progress. */
.update-progress-fill.indeterminate {
    width: 40% !important;
    animation: update-indeterminate 1.4s ease-in-out infinite;
}
@keyframes update-indeterminate {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ==========================================
   Drive info panel (details + version history)
   ========================================== */
.drive-info-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 100vw;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
    z-index: 190; /* under the context menu (200) and modal */
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.drive-info-panel.active {
    transform: translateX(0);
}

.drive-info-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.drive-info-file-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.drive-info-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drive-info-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
}

.drive-info-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.drive-info-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.drive-info-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 8px;
    cursor: pointer;
}

.drive-info-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-color);
}

.drive-info-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
}

.drive-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
}

.drive-info-label {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.drive-info-value {
    color: var(--text-primary);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.drive-info-empty {
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    padding: 18px 0;
}

.drive-version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
}

.drive-version-row:last-child {
    border-bottom: none;
}

.drive-version-row.current .drive-version-title {
    color: var(--accent-color);
}

.drive-version-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.drive-version-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.drive-version-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.drive-version-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.drive-version-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px 7px;
    display: flex;
    align-items: center;
}

.drive-version-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

@media (max-width: 768px) {
    .drive-info-panel {
        width: 100vw;
        top: auto;
        max-height: 75vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .drive-info-panel.active {
        transform: translateY(0);
    }
}

/* Upload panel: "v2/v3" badge on rows that replaced an existing file */
.upload-panel-row-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.upload-panel-row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-row-version-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* ==========================================================================
   Plum Design System — component layer
   ==========================================================================
   Reskins the existing chrome to the "Plum Box" design system (Claude Design
   project 7f48e7c1). This layer only restyles: no element is hidden, no
   handler-bearing class is renamed, and every interactive affordance that
   existed before (home-bar drag/arrange + remove, launchpad, sort, filters,
   multi-select, …) keeps its markup and behaviour.

   Deliberately last in the file so it wins at equal specificity. Desktop
   chrome lives inside the min-width query so the mobile blocks above stay
   authoritative on phones.
   ========================================================================== */

/* ---- House icon spec: 24px box, 1.2px stroke, round caps/joins ----
   Presentation attributes (stroke-width="2" in the markup) lose to CSS, so
   this re-weights every inline icon at once without touching the HTML. */
#main-app svg,
.modal svg,
.bottom-sheet svg,
.launchpad svg,
.context-menu svg,
.auth-container svg,
.login-container svg {
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icons that read as marks/fills, not line art, keep their own weight. */
#main-app .logo-icon,
#main-app .file-star svg,
#main-app .drive-file-icon svg {
    stroke-width: 0;
}

#main-app .file-star svg {
    stroke-width: 1.4;
}

/* ---- Scrollbars ----
   Deliberately NOT styled app-wide. Touching ::-webkit-scrollbar (or the
   standard scrollbar-width/scrollbar-color pair) opts the whole app out of
   the browser's auto-hiding overlay scrollbars and forces classic, always-
   visible ones — which read as a shaded strip down the right edge of Drive
   and Photos and steal layout width. Before this reskin the desktop had no
   scrollbar rules at all, so the browser default applied; keep it that way.

   The theme match is handled by color-scheme on [data-theme] instead, which
   tints whatever scrollbar the browser decides to draw. Mobile keeps its own
   overlay-scrollbar rules in the max-width:640px block, and .photos-content
   keeps hiding its scrollbar in favour of the date rail. */

/* ==========================================================================
   File-type icons — line art on a tinted square (DS "file chip")
   ========================================================================== */

.file-icon {
    border-radius: var(--radius-sm);
    background: var(--bg-band);
}

.file-icon svg {
    color: var(--text);
}

/* getDriveItemIcon() now emits line art for every type, so the old Google
   Drive-style flat icons no longer need their transparent-chip exception. */
.file-icon.drive-file-icon,
.bottom-sheet-file-icon.drive-file-icon {
    background: var(--bg-band);
}

.file-icon.folder svg {
    fill: none;
    color: var(--text);
}

.file-icon.icon-image svg { color: #a855f7; }
.file-icon.icon-video svg { color: #ef4444; }
.file-icon.icon-document svg { color: #3b82f6; }
.file-icon.icon-spreadsheet svg { color: #22c55e; }
.file-icon.icon-presentation svg { color: #f97316; }
.file-icon.icon-code svg { color: #6366f1; }
.file-icon.icon-audio svg { color: #ec4899; }
.file-icon.icon-archive svg { color: #eab308; }
.file-icon.icon-package svg { color: #8a5fc4; }
.file-icon.icon-default svg { color: var(--muted); }

.file-icon.icon-image { background: rgba(168, 85, 247, .14); }
.file-icon.icon-video { background: rgba(239, 68, 68, .13); }
.file-icon.icon-document { background: rgba(59, 130, 246, .14); }
.file-icon.icon-spreadsheet { background: rgba(34, 197, 94, .14); }
.file-icon.icon-presentation { background: rgba(249, 115, 22, .14); }
.file-icon.icon-code { background: rgba(99, 102, 241, .14); }
.file-icon.icon-audio { background: rgba(236, 72, 153, .13); }
.file-icon.icon-archive { background: rgba(234, 179, 8, .13); }
.file-icon.icon-package { background: rgba(138, 95, 196, .14); }

/* The type label under a file name in list rows (added by renderListView). */
.file-sub {
    font-size: 11.5px;
    color: var(--faint);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Desktop chrome
   ========================================================================== */
@media (min-width: 641px) {

    /* ---- Header ---- */
    .header {
        height: var(--header-height);
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        padding: 0 16px;
    }

    .header-left {
        gap: 20px;
    }

    .header-right {
        gap: 10px;
    }

    /* The mark sits in a bordered 40px tile (DS app-chip), so the SVG drops
       its own filled plate and draws just the hexagon. */
    .header .logo {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg-band);
        box-shadow: var(--shadow);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text);
        gap: 0;
        transition: border-color var(--transition-fast);
    }

    .header .logo:hover {
        border-color: var(--border-strong);
    }

    .header .logo .logo-icon {
        width: 29px;
        height: 29px;
        color: currentColor;
    }

    .header .logo .logo-icon > rect {
        fill: none;
    }

    .header .logo .logo-inner {
        fill: currentColor;
    }

    /* ---- Home bar (top nav). Drag-to-arrange and drop-on-launchpad-to-remove
       are wired in nav-prefs.js against these classes — colors only here. ---- */
    .nav {
        gap: 4px;
        margin-left: 4px;
    }

    .nav-item {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        color: var(--muted);
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    .nav-item svg {
        opacity: 1;
    }

    .nav-item:hover {
        background: var(--accent-wash);
        color: var(--text);
    }

    .nav-item.active {
        background: var(--accent-wash);
        color: var(--text);
    }

    .nav-divider-inline {
        width: 1px;
        height: 20px;
        background: var(--border);
        margin: 0 6px;
    }

    /* ---- Search ---- */
    .search-box {
        gap: 9px;
        height: 38px;
        padding: 0 15px;
        width: 300px;
        background: var(--bg-band);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
    }

    .search-box:focus-within {
        background: var(--bg-band);
        border-color: var(--border-strong);
        box-shadow: none;
    }

    .search-box svg {
        color: var(--faint);
    }

    .search-box input {
        font-size: 13px;
        letter-spacing: -.006em;
    }

    .search-box input::placeholder {
        color: var(--faint);
    }

    /* ---- Theme toggle: DS pill. The knob keeps its slide animation. ---- */
    .theme-toggle {
        width: 96px;
        height: 38px;
        margin-left: 0;
        padding: 0 12px;
        background: var(--bg-band);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        box-shadow: none;
    }

    .theme-toggle:hover {
        border-color: var(--border-strong);
        box-shadow: none;
    }

    .theme-toggle-copy {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .14em;
    }

    .theme-toggle-knob {
        top: 5px;
        left: 5px;
        width: 26px;
        height: 26px;
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: none;
    }

    [data-resolved-theme="light"] .theme-toggle,
    [data-resolved-theme="dark"] .theme-toggle {
        background: var(--bg-band);
        border-color: var(--border);
        color: var(--muted);
        box-shadow: none;
    }

    [data-resolved-theme="light"] .theme-toggle-copy,
    [data-resolved-theme="dark"] .theme-toggle-copy {
        color: var(--muted);
    }

    [data-resolved-theme="light"] .theme-toggle-knob,
    [data-resolved-theme="dark"] .theme-toggle-knob {
        background: var(--accent);
        color: var(--on-accent);
        box-shadow: none;
    }

    [data-resolved-theme="light"] .theme-toggle-copy {
        margin-left: 34px;
    }

    [data-resolved-theme="dark"] .theme-toggle-copy {
        margin-left: 8px;
    }

    [data-resolved-theme="dark"] .theme-toggle-knob {
        transform: translateX(60px);
    }

    .theme-toggle-title {
        color: var(--faint);
    }

    /* ---- Avatar ---- */
    .user-btn {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--border);
        background: var(--bg-band);
        color: var(--text);
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color var(--transition-fast);
    }

    .user-btn:hover {
        border-color: var(--border-strong);
        background: var(--bg-band);
    }

    /* ---- Sidebars (Drive / Photos / Downloads share the shape) ---- */
    .drive-sidebar,
    .photos-sidebar,
    .download-sidebar {
        background: var(--surface);
        border-right: 1px solid var(--line);
        padding: 16px 12px;
    }

    .new-btn {
        gap: 10px;
        padding: 11px 18px;
        background: var(--bg-band);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text);
        font-size: 14px;
        font-weight: var(--w-semibold);
        letter-spacing: -.01em;
        box-shadow: var(--shadow);
        margin-bottom: 16px;
    }

    .new-btn:hover {
        background: var(--accent-wash);
        box-shadow: var(--shadow-lift);
    }

    .drive-nav-item,
    .photos-nav-item,
    .download-nav-item {
        gap: 12px;
        padding: 10px 14px;
        border-radius: var(--radius-md);
        color: var(--muted);
        font-size: 13.5px;
        font-weight: var(--w-medium);
        letter-spacing: -.008em;
    }

    .drive-nav-item svg,
    .photos-nav-item svg,
    .download-nav-item svg {
        opacity: .9;
    }

    .drive-nav-item:hover,
    .photos-nav-item:hover,
    .download-nav-item:hover {
        background: var(--accent-wash);
        color: var(--text);
    }

    .drive-nav-item.active,
    .photos-nav-item.active,
    .download-nav-item.active {
        background: var(--accent-wash);
        color: var(--text);
        font-weight: var(--w-semibold);
    }

    .storage-section {
        border-top: 1px solid var(--line);
    }

    .storage-header span {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .005em;
        color: var(--faint);
    }

    .storage-text {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--faint);
        letter-spacing: -.01em;
    }

    /* ---- Drive header / toolbar ---- */
    .drive-header {
        padding: 18px 24px 4px;
    }

    .breadcrumb-item {
        font-size: 21px;
        font-weight: 640;
        letter-spacing: -.025em;
        color: var(--text);
    }

    .breadcrumb-item:not(:last-child) {
        color: var(--muted);
    }

    .drive-back-btn {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        color: var(--faint);
    }

    .drive-back-btn:hover {
        background: var(--accent-wash);
        color: var(--text);
    }

    .sort-dropdown-btn,
    .drive-empty-trash-btn {
        height: 34px;
        padding: 0 12px;
        gap: 7px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--muted);
        font-size: 12.5px;
        font-weight: var(--w-medium);
    }

    .sort-dropdown-btn:hover,
    .drive-empty-trash-btn:hover {
        background: var(--accent-wash);
        color: var(--text);
    }

    .view-toggle {
        gap: 3px;
        padding: 3px;
        background: var(--bg-band);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    .view-btn {
        width: 30px;
        height: 28px;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--faint);
        border: 0;
    }

    .view-btn.active {
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow);
    }

    .drive-filter-chip {
        height: 30px;
        padding: 0 12px;
        gap: 6px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        color: var(--muted);
        font-size: 12px;
        font-weight: var(--w-medium);
    }

    .drive-filter-chip:hover,
    .drive-filter-chip.active {
        background: var(--accent-wash);
        color: var(--text);
    }

    /* ---- Menus / popovers ---- */
    .sort-dropdown-menu,
    .drive-filter-menu,
    .context-menu,
    .new-menu,
    .user-menu {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lift);
        padding: 6px;
    }

    .sort-dropdown-item,
    .drive-filter-menu button,
    .context-menu-item {
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: var(--w-medium);
        padding: 8px 11px;
        color: var(--text);
    }

    .sort-dropdown-item:hover,
    .drive-filter-menu button:hover,
    .context-menu-item:hover {
        background: var(--accent-wash);
    }

    .sort-dropdown-divider {
        background: var(--line);
        margin: 5px 6px;
    }

    /* ---- File list ---- */
    .file-container {
        padding: 0 24px 24px;
    }

    .file-list {
        border-top: 1px solid var(--border);
        background: var(--surface);
        border-radius: 0;
    }

    .file-list .file-item {
        gap: 14px;
        padding: 11px 16px;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        transition: background .12s ease;
    }

    .file-list .file-item:first-child {
        border-radius: 0;
        border-top: 0;
    }

    .file-list .file-item:last-child {
        border-radius: 0;
    }

    .file-list .file-item:hover {
        background: var(--accent-wash);
        border-color: var(--line);
    }

    .file-list .file-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
    }

    .file-list .file-icon svg {
        width: 19px;
        height: 19px;
    }

    .file-list .file-name {
        font-size: 14px;
        font-weight: var(--w-medium);
        letter-spacing: -.008em;
        margin-bottom: 1px;
    }

    .file-list .file-date,
    .file-list .file-size {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--faint);
        font-variant-numeric: tabular-nums;
    }

    .file-list .file-date {
        width: 150px;
    }

    .file-list .file-size {
        width: 96px;
    }

    /* ---- File grid ---- */
    .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
        gap: 14px;
    }

    .file-grid .file-item {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
    }

    .file-grid .file-item:hover {
        border-color: var(--border-strong);
        background: var(--accent-wash);
    }

    .file-card-body {
        padding: 12px 14px;
        border-top: 1px solid var(--line);
    }

    .file-grid .file-name {
        font-size: 13.5px;
        font-weight: var(--w-medium);
        letter-spacing: -.008em;
    }

    .file-grid .file-meta {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--faint);
        margin-top: 3px;
    }

    /* Grid card head: a 104px band carrying the file type's own tint, with the
       line icon centred in it (DS card). The inner .file-icon is stretched to
       fill so its per-type tint paints the whole band. */
    .file-grid .file-preview-generic {
        height: 104px;
        aspect-ratio: auto;
        background: var(--bg-band);
        padding: 0;
    }

    .file-grid .file-preview-generic .file-icon {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .file-preview-generic .file-icon svg {
        width: 32px;
        height: 32px;
    }

    #drive-files .file-item.selected,
    #drive-files .file-item.selected:hover {
        background: var(--accent-wash);
        border-color: var(--border-strong);
    }

    /* ---- Photos ---- */
    .photos-header h2,
    .section-header h2 {
        font-size: 21px;
        font-weight: 640;
        letter-spacing: -.025em;
    }

    /* ==========================================================================
       Settings — DS card groups
       ========================================================================== */

    #settings-section > .settings-content > .settings-menu-group {
        flex: 0 0 248px;
        width: 248px;
        min-width: 248px;
        max-width: 248px;
        background: var(--surface);
        border-right: 1px solid var(--line);
        padding: 20px 12px;
    }

    #settings-section .settings-menu-row {
        gap: 12px;
        padding: 10px 14px;
        border-radius: var(--radius-md);
        color: var(--muted);
        font-size: 13.5px;
        font-weight: var(--w-medium);
        letter-spacing: -.008em;
    }

    #settings-section .settings-menu-row:hover {
        background: var(--accent-wash);
        color: var(--text);
    }

    #settings-section .settings-menu-row.active {
        background: var(--accent-wash);
        color: var(--text);
        font-weight: var(--w-semibold);
    }

    .settings-main {
        padding: 30px 38px 44px;
    }

    .settings-main > * {
        max-width: 660px;
        margin-left: auto;
        margin-right: auto;
    }

    .settings-panel-title {
        font-size: 24px;
        font-weight: 640;
        letter-spacing: -.03em;
        /* auto side margins so the title shares the centred 660px column
           with the card groups below it */
        margin: 0 auto 24px;
        max-width: 660px;
    }

    .settings-main .settings-content {
        gap: 26px;
        max-width: 660px;
    }

    /* Eyebrow sits above the card, the rows live inside a bordered group. */
    .settings-main .settings-group-title {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .005em;
        text-transform: none;
        color: var(--faint);
        margin: 0 0 12px;
    }

    .settings-main .settings-group {
        gap: 0;
    }

    .settings-main .settings-item {
        padding: 15px 16px;
        border: 1px solid var(--border);
        border-bottom-width: 0;
        border-radius: 0;
        background: var(--surface);
        min-height: 0;
        gap: 16px;
    }

    .settings-main .settings-group > .settings-item:first-of-type {
        border-top: 1px solid var(--border);
        border-top-left-radius: var(--radius-xl);
        border-top-right-radius: var(--radius-xl);
    }

    .settings-main .settings-group > .settings-item:last-of-type {
        border-bottom-width: 1px;
        border-bottom-left-radius: var(--radius-xl);
        border-bottom-right-radius: var(--radius-xl);
    }

    .settings-main .settings-group > .settings-item + .settings-item {
        border-top-color: var(--line);
    }

    .settings-main .settings-label {
        font-size: 14px;
        font-weight: 560;
        color: var(--text);
    }

    .settings-main .settings-value {
        font-family: var(--font-mono);
        font-size: 12.5px;
        color: var(--muted);
    }

    .settings-main .settings-item-help {
        font-size: 12px;
        color: var(--faint);
        line-height: 1.55;
        padding: 10px 2px 0;
    }

    /* .settings-section-header is a LAYOUT row (eyebrow + blurb + action), not
       an eyebrow itself — styling type on it made the blurb inherit uppercase
       letterspacing. The .settings-group-title inside carries the eyebrow. */

    /* ---- Controls ---- */
    .settings-main select,
    .settings-main input[type="text"],
    .settings-main input[type="password"],
    .settings-main input[type="email"] {
        background: var(--bg-band);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 12.5px;
        font-weight: var(--w-medium);
        padding: 8px 13px;
        outline: none;
    }

    .settings-main select:focus,
    .settings-main input:focus {
        border-color: var(--accent);
        box-shadow: var(--ring-focus);
    }

    .settings-toggle .toggle-slider {
        width: 40px;
        height: 23px;
        border-radius: var(--radius-pill);
        background: var(--bg-band);
        border: 1px solid var(--border);
    }

    .settings-toggle .toggle-slider::before {
        width: 17px;
        height: 17px;
        top: 2px;
        left: 2px;
        background: var(--faint);
        box-shadow: none;
    }

    .settings-toggle input:checked + .toggle-slider {
        background: var(--accent);
        border-color: var(--accent);
    }

    .settings-toggle input:checked + .toggle-slider::before {
        background: var(--surface);
        transform: translateX(17px);
    }

    /* ---- Modals ---- */
    .modal-content {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lift);
    }

    .modal-header h3 {
        font-size: 16px;
        font-weight: 620;
        letter-spacing: -.02em;
    }

    .modal-close {
        width: 30px;
        height: 30px;
        border-radius: var(--radius-sm);
        color: var(--muted);
    }

    .modal-close:hover {
        background: var(--accent-wash);
        color: var(--text);
    }
}

/* ---- Launchpad (shares the DS glass/overlay treatment) ----
   Drag-to-arrange, ✕-to-remove and the FLIP transforms above are untouched;
   only the surface colours move to tokens so the overlay follows the theme. */
.launchpad-backdrop,
[data-resolved-theme="light"] .launchpad-backdrop {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.launchpad-search-wrap {
    gap: 9px;
    padding: 0 15px;
    height: 42px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: none;
    margin-bottom: 40px;
}

.launchpad-search-wrap svg {
    color: var(--faint);
}

#launchpad-search {
    font-size: 14px;
}

.launchpad-tile {
    border-radius: var(--radius-md);
    gap: 10px;
}

.launchpad-tile:hover,
[data-resolved-theme="light"] .launchpad-tile:hover {
    background: var(--accent-wash);
    transform: scale(1.04);
}

.launchpad-tile-name {
    font-size: 12px;
    font-weight: 530;
    letter-spacing: -.01em;
}

.launchpad-tile-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* 앱 아이콘은 정사각 원본이 맞다 — 앱은 꽉 찬 정사각 이미지를 싣고, 둥근
   모양으로 잘라 보여주는 것은 셸의 몫이다(아이폰과 같은 방식). 그래서 여기서
   자른다: 아이콘은 자기 자리를 꽉 채우고, 초타원(superellipse) 마스크로
   모서리가 원호가 아니라 연속곡선이 되게 한다. 마스크를 못 쓰는 환경에서는
   border-radius 가 대신 받는다. */
:root {
    --plum-squircle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M100.0 50.0 L100.0 63.2 L99.9 67.4 L99.9 70.4 L99.8 72.9 L99.7 75.0 L99.5 76.9 L99.4 78.6 L99.2 80.1 L99.0 81.5 L98.7 82.8 L98.4 84.0 L98.1 85.2 L97.8 86.3 L97.5 87.3 L97.1 88.2 L96.7 89.1 L96.2 89.9 L95.7 90.7 L95.2 91.5 L94.7 92.2 L94.1 92.9 L93.5 93.5 L92.9 94.1 L92.2 94.7 L91.5 95.2 L90.7 95.7 L89.9 96.2 L89.1 96.7 L88.2 97.1 L87.3 97.5 L86.3 97.8 L85.2 98.1 L84.0 98.4 L82.8 98.7 L81.5 99.0 L80.1 99.2 L78.6 99.4 L76.9 99.5 L75.0 99.7 L72.9 99.8 L70.4 99.9 L67.4 99.9 L63.2 100.0 L50.0 100.0 L36.8 100.0 L32.6 99.9 L29.6 99.9 L27.1 99.8 L25.0 99.7 L23.1 99.5 L21.4 99.4 L19.9 99.2 L18.5 99.0 L17.2 98.7 L16.0 98.4 L14.8 98.1 L13.7 97.8 L12.7 97.5 L11.8 97.1 L10.9 96.7 L10.1 96.2 L9.3 95.7 L8.5 95.2 L7.8 94.7 L7.1 94.1 L6.5 93.5 L5.9 92.9 L5.3 92.2 L4.8 91.5 L4.3 90.7 L3.8 89.9 L3.3 89.1 L2.9 88.2 L2.5 87.3 L2.2 86.3 L1.9 85.2 L1.6 84.0 L1.3 82.8 L1.0 81.5 L0.8 80.1 L0.6 78.6 L0.5 76.9 L0.3 75.0 L0.2 72.9 L0.1 70.4 L0.1 67.4 L0.0 63.2 L0.0 50.0 L0.0 36.8 L0.1 32.6 L0.1 29.6 L0.2 27.1 L0.3 25.0 L0.5 23.1 L0.6 21.4 L0.8 19.9 L1.0 18.5 L1.3 17.2 L1.6 16.0 L1.9 14.8 L2.2 13.7 L2.5 12.7 L2.9 11.8 L3.3 10.9 L3.8 10.1 L4.3 9.3 L4.8 8.5 L5.3 7.8 L5.9 7.1 L6.5 6.5 L7.1 5.9 L7.8 5.3 L8.5 4.8 L9.3 4.3 L10.1 3.8 L10.9 3.3 L11.8 2.9 L12.7 2.5 L13.7 2.2 L14.8 1.9 L16.0 1.6 L17.2 1.3 L18.5 1.0 L19.9 0.8 L21.4 0.6 L23.1 0.5 L25.0 0.3 L27.1 0.2 L29.6 0.1 L32.6 0.1 L36.8 0.0 L50.0 0.0 L63.2 0.0 L67.4 0.1 L70.4 0.1 L72.9 0.2 L75.0 0.3 L76.9 0.5 L78.6 0.6 L80.1 0.8 L81.5 1.0 L82.8 1.3 L84.0 1.6 L85.2 1.9 L86.3 2.2 L87.3 2.5 L88.2 2.9 L89.1 3.3 L89.9 3.8 L90.7 4.3 L91.5 4.8 L92.2 5.3 L92.9 5.9 L93.5 6.5 L94.1 7.1 L94.7 7.8 L95.2 8.5 L95.7 9.3 L96.2 10.1 L96.7 10.9 L97.1 11.8 L97.5 12.7 L97.8 13.7 L98.1 14.8 L98.4 16.0 L98.7 17.2 L99.0 18.5 L99.2 19.9 L99.4 21.4 L99.5 23.1 L99.7 25.0 L99.8 27.1 L99.9 29.6 L99.9 32.6 L100.0 36.8 L100.0 50.0 Z' fill='%23fff'/></svg>");
}

.plum-app-icon,
.launchpad-tile-icon img,
#top-nav-items .nav-item img,
.nav-item img,
.home-bar-item img {
    object-fit: cover;
    border-radius: 22.37%;
    -webkit-mask-image: var(--plum-squircle);
    mask-image: var(--plum-squircle);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 앱 아이콘이 타일을 꽉 채울 때는 타일 자신의 배경·테두리가 보이면 안 된다 —
   아이콘 둘레에 회색 테가 생긴다. 내장 글리프 타일은 그대로 둔다. */
.launchpad-tile-icon.has-app-icon {
    background: none;
    border: 0;
    box-shadow: none;
}
.launchpad-tile-icon.has-app-icon img {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Settings panels built by app.js (Apps, Store cards)
   ==========================================================================
   These were written before the design system with hard-coded rgba greys.
   Re-pointing them at the tokens is what makes the settings pane read as one
   surface with the card groups above. Layout and behaviour are unchanged. */

/* ---- Application 관리 rows ---- */
.apps-manage-subhead {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--faint);
}

.apps-manage-row {
    padding: 12px 16px;
    border-radius: var(--radius-md);
}

.apps-manage-row:hover {
    background: var(--accent-wash);
}

.apps-manage-name {
    font-size: 14px;
    font-weight: 560;
}

.apps-manage-sub {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
}

/* ---- Store cards ---- */
.app-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.app-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lift);
}

.app-card-name {
    font-size: 14.5px;
    font-weight: var(--w-semibold);
    letter-spacing: -.01em;
}

.app-card-version {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
}

.app-card-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
}

.app-card-btn {
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: var(--w-medium);
}

.app-card-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    font-weight: var(--w-semibold);
}

/* The store's primary button was hard-coded to pure black-on-white for the
   old #000 dark theme; on the DS ink/paper surfaces that rendered a black
   button on a near-black card. Put it back on the accent tokens in both dark
   paths (explicit [data-theme] and the prefers-color-scheme default). */
[data-theme="dark"] .app-card-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

[data-theme="dark"] .app-card-btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: var(--on-accent);
    border-color: var(--accent-hover);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-card-btn-primary {
        background: var(--accent);
        color: var(--on-accent);
        border-color: var(--accent);
    }

    :root:not([data-theme="light"]) .app-card-btn-primary:hover:not(:disabled) {
        background: var(--accent-hover);
        color: var(--on-accent);
        border-color: var(--accent-hover);
    }
}

/* ==========================================================================
   Desktop dialogs — fields and action buttons
   ==========================================================================
   .modal-actions / .modal-btn-* and the format-confirm fields were only ever
   styled inside the max-width:640px block, so on desktop the Storage "Format
   SSD" dialog fell back to native white inputs and grey buttons. Give them the
   DS treatment at desktop widths too (mobile keeps its own rules). */
@media (min-width: 641px) {
    .modal-content input[type="text"],
    .modal-content input[type="password"],
    .modal-content input[type="email"],
    .modal-content input[type="number"],
    .modal-content select,
    .modal-content textarea {
        width: 100%;
        padding: 11px 13px;
        background: var(--bg-band);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 13px;
        outline: none;
    }

    .modal-content input:focus,
    .modal-content select:focus,
    .modal-content textarea:focus {
        border-color: var(--accent);
        box-shadow: var(--ring-focus);
    }

    .modal-content input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--accent);
    }

    .modal-content code {
        font-family: var(--font-mono);
        color: var(--text);
    }

    .modal-actions {
        display: flex;
        gap: 8px;
        margin-top: 18px;
    }

    .modal-btn-secondary,
    .modal-btn-destructive {
        flex: 1;
        height: 38px;
        padding: 0 16px;
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: var(--w-semibold);
        cursor: pointer;
    }

    .modal-btn-secondary {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
        font-weight: var(--w-medium);
    }

    .modal-btn-secondary:hover {
        background: var(--accent-wash);
    }

    .modal-btn-destructive {
        background: var(--status-rejected);
        border: 1px solid var(--status-rejected);
        color: #fff;
    }

    .modal-btn-destructive:hover:not(:disabled) {
        opacity: .9;
    }

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

/* ==========================================================================
   Settings as a modal (desktop)
   ==========================================================================
   The design system renders Settings as a dialog floating over the app, not
   as a full-page section. The markup stays a <section> — mobile still drills
   into it full-screen — and app.js keeps the section underneath active, so
   what shows through this backdrop is the Drive/Photos view you came from.
   z-index sits below .modal (1200) so confirm dialogs opened from inside
   Settings still stack on top. */

/* Mobile drill-in has its own back button in the sticky header. */
.settings-modal-close {
    display: none;
}

@keyframes settingsModalIn {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 641px) {
    #settings-section.section.active {
        position: fixed;
        inset: 0;
        z-index: 1150;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        animation: settingsModalIn .18s var(--ease-out-soft);
    }

    #settings-section.active > .settings-content {
        position: relative;
        width: min(960px, 94%);
        height: 88%;
        max-height: 772px;
        flex: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lift);
        overflow: hidden;
    }

    #settings-section.active > .settings-content > .settings-menu-group {
        border-top-left-radius: var(--radius-xl);
        border-bottom-left-radius: var(--radius-xl);
    }

    .settings-modal-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: var(--radius-sm);
        background: var(--bg-band);
        color: var(--muted);
        cursor: pointer;
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    .settings-modal-close:hover {
        background: var(--accent-wash);
        color: var(--text);
    }
}

/* Settings notifications also sit above child dialogs and remain visible on mobile. */
.settings-toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: min(420px, calc(100% - 32px));
    pointer-events: none;
}

.settings-toast-container .toast {
    min-width: 0;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--text);
    box-shadow: var(--shadow);
    animation: settingsToastIn .18s var(--ease-out-soft);
}

.settings-toast-container .toast-message {
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

@keyframes settingsToastIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sidebar eyebrow: only the desktop modal has it — on mobile the sticky
   header already says "Settings". */
.settings-modal-eyebrow {
    display: none;
}

@media (min-width: 641px) {
    .settings-modal-eyebrow {
        display: block;
        padding: 0 12px;
        margin-bottom: 14px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--faint);
    }
}

/* ==========================================================================
   Drive info panel — don't leak its shadow while it's parked off-screen
   ==========================================================================
   The panel is always in the DOM and hidden by a transform (translateX(100%)
   on desktop, translateY(100%) under 768px where it becomes a sheet). A
   transform does not clip box-shadow, so its 24px blur bled back onto the
   viewport and painted a grey gradient along the edge of EVERY screen —
   right-hand side on desktop, bottom below the breakpoint, which is why it
   appeared to "move down" when the window was narrowed. Paint it only while
   the panel is actually open. */
.drive-info-panel {
    box-shadow: none;
}

.drive-info-panel.active {
    box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
    .drive-info-panel.active {
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
    }
}

/* ==========================================================================
   Settings panels — design-system pass
   ==========================================================================
   The modal shell already matched the design; its contents still used the
   pre-DS button/field/list styling. This brings the panel internals in line:
   accent primary buttons, band-filled fields, bordered card groups with
   hairline rows for every list, mono metadata, and pill badges.

   Markup and ids are untouched — the JS renderers (users, sessions, activity,
   login history, update) keep emitting exactly what they emitted before. */

/* ---- Section headers (Users: title + blurb + right-aligned action) ---- */
.settings-section-header {
    align-items: center;
    margin-bottom: 12px;
}

.settings-section-header .settings-group-title {
    margin-bottom: 4px;
}

.settings-section-header .settings-item-help {
    padding: 0;
}

/* ---- Fields ---- */
.settings-field {
    gap: 6px;
    margin-bottom: 12px;
}

.settings-field .settings-label {
    font-size: 11px;
    font-weight: var(--w-semibold);
    color: var(--muted);
}

.settings-text-input,
.settings-select,
.settings-textarea {
    padding: 11px 13px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}

.settings-text-input:focus,
.settings-select:focus,
.settings-textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--ring-focus);
}

.settings-text-input::placeholder,
.settings-textarea::placeholder {
    color: var(--faint);
}

/* ---- Profile block (Account) ---- */
.settings-profile-card {
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

.settings-profile-avatar {
    width: 56px;
    height: 56px;
    background: var(--accent);
    border: 0;
    color: var(--on-accent);
    font-size: 20px;
    font-weight: var(--w-semibold);
}

.settings-profile-email {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
}

.settings-profile-subtext {
    font-size: 12px;
    color: var(--faint);
    margin-top: 2px;
}

/* ---- Badges / chips ---- */
.settings-user-chip {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--accent-wash);
    color: var(--muted);
    font-size: 10px;
    font-weight: var(--w-semibold);
    letter-spacing: 0;
}

.settings-user-chip.owner {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--status-live) 40%, transparent);
    color: var(--status-live);
}

.settings-user-chip.disabled {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--status-review) 45%, transparent);
    color: var(--status-review);
}

/* ---- Empty states ---- */
.settings-list-empty {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--faint);
    font-size: 13px;
}

@media (min-width: 641px) {

    /* ---- Buttons ---- */
    .settings-main .settings-btn-primary {
        width: auto;
        height: 36px;
        padding: 0 16px;
        margin-top: 14px;
        align-self: flex-start;
        background: var(--accent);
        color: var(--on-accent);
        border: 0;
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: var(--w-semibold);
        cursor: pointer;
    }

    .settings-main .settings-btn-primary:hover {
        background: var(--accent-hover);
    }

    .settings-main .settings-btn-primary:disabled {
        background: var(--bg-band);
        color: var(--faint);
        cursor: not-allowed;
    }

    .settings-main .settings-btn-secondary,
    .settings-main .settings-btn-small {
        width: auto;
        height: 36px;
        padding: 0 15px;
        margin-top: 14px;
        align-self: flex-start;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 12.5px;
        font-weight: var(--w-medium);
        cursor: pointer;
    }

    .settings-main .settings-btn-secondary:hover,
    .settings-main .settings-btn-small:hover {
        background: var(--accent-wash);
    }

    .settings-main .settings-btn-destructive,
    .settings-main .settings-btn-logout,
    .settings-main .settings-btn-small.danger {
        width: auto;
        height: 36px;
        padding: 0 16px;
        border-radius: var(--radius-md);
        background: transparent;
        border: 1px solid color-mix(in srgb, var(--status-rejected) 40%, transparent);
        color: var(--status-rejected);
        font-size: 13px;
        font-weight: var(--w-semibold);
    }

    .settings-main .settings-btn-destructive:hover,
    .settings-main .settings-btn-logout:hover,
    .settings-main .settings-btn-small.danger:hover {
        background: color-mix(in srgb, var(--status-rejected) 8%, transparent);
    }

    /* Buttons sitting in a row share one baseline instead of each adding its
       own top margin. */
    .settings-main .settings-inline-actions {
        gap: 8px;
        margin-top: 12px;
    }

    .settings-main .settings-inline-actions > button {
        margin-top: 0;
    }

    .settings-main .settings-btn-inline {
        margin-top: 0;
    }

    /* ---- Lists: one bordered card, hairline between rows ----
       The containers are populated by JS; when empty they swap to
       .settings-list-empty, which has its own card styling above. */
    .settings-main #settings-users-list:not(.settings-list-empty),
    .settings-main #settings-sessions-list:not(.settings-list-empty),
    .settings-main #settings-activity-list:not(.settings-list-empty),
    .settings-main #settings-login-history-list:not(.settings-list-empty),
    .settings-main #settings-pending-invites-list:not(.settings-list-empty) {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
        overflow: hidden;
    }

    .settings-main .settings-user-row,
    .settings-main .settings-invite-row,
    .settings-main .settings-session-table-row,
    .settings-main .settings-activity-row,
    .settings-main .settings-login-history-row {
        padding: 13px 16px;
        border-top: 1px solid var(--line);
        border-bottom: 0;
        gap: 13px;
    }

    .settings-main .settings-user-row:first-child,
    .settings-main .settings-invite-row:first-child,
    .settings-main .settings-session-table-row:first-child,
    .settings-main .settings-activity-row:first-child,
    .settings-main .settings-login-history-row:first-child {
        border-top: 0;
    }

    .settings-main .settings-invite-row .settings-inline-actions,
    .settings-main .settings-invite-actions {
        margin-top: 0;
        flex-wrap: nowrap;
    }

    .settings-main .settings-invite-row .settings-btn-small {
        margin-top: 0;
        height: 32px;
        padding: 0 12px;
    }

    .settings-main .settings-user-name,
    .settings-main .settings-session-table-device {
        font-size: 14px;
        font-weight: 560;
        letter-spacing: -.008em;
    }

    .settings-main .settings-user-email,
    .settings-main .settings-user-last-login,
    .settings-main .settings-activity-meta,
    .settings-main .settings-login-history-meta,
    .settings-main .settings-session-table-last-active {
        font-family: var(--font-mono);
        font-size: 11.5px;
        color: var(--faint);
    }

    .settings-main .settings-user-avatar {
        width: 36px;
        height: 36px;
        background: var(--bg-band);
        border: 1px solid var(--border);
        font-size: 13px;
        font-weight: var(--w-semibold);
    }

    /* ---- Software Update ---- */
    .settings-main .settings-update-overview-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
        box-shadow: var(--shadow);
        padding: 22px;
    }

    /* The mark was baked with fixed light/dark fills; drive it from tokens so
       it reads on both themes. */
    .settings-main .settings-update-header-icon rect {
        fill: var(--text);
    }

    .settings-main .settings-update-header-icon path {
        fill: var(--bg);
    }

    .settings-main .settings-update-header-name {
        font-size: 15px;
        font-weight: var(--w-semibold);
        letter-spacing: -.02em;
    }

    .settings-main .settings-update-header-version {
        font-size: 12px;
        color: var(--faint);
    }

    .settings-main .settings-update-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 26px;
        padding: 0 12px;
        border-radius: var(--radius-pill);
        border: 1px solid color-mix(in srgb, var(--status-live) 36%, transparent);
        background: color-mix(in srgb, var(--status-live) 12%, transparent);
        color: var(--status-live);
        font-size: 11.5px;
        font-weight: var(--w-semibold);
    }

    .settings-main .settings-update-version-card {
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-band);
    }

    .settings-main .settings-update-version-label {
        font-size: 10px;
        font-weight: 650;
        letter-spacing: .005em;
        color: var(--faint);
        margin-bottom: 6px;
    }

    .settings-main .settings-update-version-value {
        font-family: var(--font-mono);
        font-size: 17px;
        font-weight: var(--w-semibold);
        letter-spacing: -.02em;
        color: var(--text);
    }

    .settings-main .settings-update-status-title {
        font-size: 13.5px;
        font-weight: 560;
    }

    .settings-main .settings-update-status-desc,
    .settings-main .settings-update-checked-at {
        font-size: 12.5px;
        color: var(--faint);
    }

    .settings-main .settings-update-checked-at {
        font-family: var(--font-mono);
    }

    .settings-main .settings-update-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
        padding: 18px;
    }

    .settings-main .settings-update-card-eyebrow {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .005em;
        color: var(--faint);
    }

    .settings-main .settings-update-card-version {
        font-family: var(--font-mono);
        font-size: 16px;
        font-weight: var(--w-semibold);
        letter-spacing: -.02em;
        margin-top: 4px;
    }

    .settings-main .settings-update-card-notes {
        font-size: 12.5px;
        color: var(--muted);
        line-height: 1.55;
    }
}

@media (min-width: 641px) {
    /* Buttons living inside a list row are row-sized and must not inherit the
       standalone button's top margin. */
    .settings-main .settings-user-row button,
    .settings-main .settings-session-table-row button,
    .settings-main .settings-activity-row button {
        height: 30px;
        padding: 0 12px;
        margin-top: 0;
        font-size: 12px;
        border-radius: var(--radius-sm);
    }
}

@media (min-width: 641px) {
    /* Blurb under a section header reads as body copy, not an eyebrow. */
    .settings-main .settings-section-header .settings-item-help {
        font-size: 13.5px;
        color: var(--muted);
        text-transform: none;
        letter-spacing: -.008em;
        padding: 0;
        margin-top: 4px;
    }

    /* Status lines that are the whole content of a section (2FA state, storage
       state) become a card row so the section doesn't read as loose text. */
    .settings-main #settings-totp-status,
    .settings-main #settings-recovery-panel > .settings-item-help:first-child {
        padding: 15px 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        font-weight: 560;
    }
}

/* ---- Appearance: theme preview cards ----
   The <select> stays in the DOM (all existing JS talks to it) but is hidden;
   the cards are the visible control. */
.settings-theme-select-row {
    display: none !important;
}

.settings-theme-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.settings-theme-card {
    flex: 1;
    text-align: left;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.settings-theme-card:hover {
    border-color: var(--border-strong);
}

.settings-theme-card.active {
    border-color: var(--accent);
    background: var(--accent-wash);
}

.settings-theme-preview {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 44px;
    padding: 0 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.settings-theme-preview-dark {
    background: #000;
    border: 1px solid rgba(255, 255, 255, .14);
}

.settings-theme-preview-light {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
}

.settings-theme-preview-system {
    background: linear-gradient(90deg, #000 50%, #fff 50%);
    border: 1px solid var(--border);
}

.settings-theme-preview-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.settings-theme-preview-bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
}

.settings-theme-preview-dark .settings-theme-preview-dot { background: #e7e9ea; }
.settings-theme-preview-dark .settings-theme-preview-bar { background: rgba(255, 255, 255, .22); }
.settings-theme-preview-light .settings-theme-preview-dot { background: #0f1419; }
.settings-theme-preview-light .settings-theme-preview-bar { background: rgba(0, 0, 0, .14); }

.settings-theme-card-label {
    display: block;
    font-size: 12.5px;
    font-weight: 560;
}

/* Sign-in email sat flush against the display-name field. */
.settings-profile-email-line {
    margin-top: 10px;
}

/* ---- Device Status: align the gauges with the design ----
   The design reads monochrome: ink-filled bars and signal segments, mono
   metric values. The warn/bad tints stay coloured — those carry meaning
   (a hot SoC should not look like a normal one). */
.devstat-label {
    font-size: 13px;
    color: var(--text);
}

.devstat-value {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: var(--w-regular);
    color: var(--muted);
}

.devstat-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--faint);
}

.devstat-bar {
    height: 5px;
    margin-top: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-band);
}

.devstat-fill {
    border-radius: var(--radius-pill);
    background: var(--text);
}

.devstat-fill.warn { background: var(--status-review); }
.devstat-fill.bad { background: var(--status-rejected); }

.devstat-sig i.on { background: var(--text); }

@media (min-width: 641px) {

    /* ---- Help & Support action rows ----
       These reuse .settings-menu-row, and once the panel is moved into
       #settings-main they sit inside #settings-section — so they were
       inheriting the sidebar nav styling (muted 13.5px, chevron hidden).
       Give them the design's card treatment instead. */
    #settings-section .settings-main .settings-menu-row {
        gap: 14px;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--surface);
        color: var(--text);
        text-align: left;
    }

    #settings-section .settings-main .settings-menu-row + .settings-menu-row {
        margin-top: 10px;
    }

    #settings-section .settings-main .settings-menu-row:hover {
        background: var(--accent-wash);
    }

    /* Icon sits in a bordered tile like the design's support rows. */
    #settings-section .settings-main .settings-menu-row > svg:first-child {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        padding: 11px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-band);
        color: var(--text);
        opacity: 1;
        box-sizing: border-box;
        overflow: visible;
    }

    #settings-section .settings-main .settings-menu-chevron {
        display: block;
        width: 18px;
        height: 18px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--faint);
        flex-shrink: 0;
    }

    .support-action-label {
        flex: 1;
        min-width: 0;
    }

    .support-action-title {
        display: block;
        font-size: 14px;
        font-weight: 560;
    }

    .support-action-sub {
        display: block;
        font-size: 12.5px;
        color: var(--faint);
        margin-top: 2px;
    }

    /* ---- About ---- */
    .settings-main .settings-about-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 26px;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
    }

    .settings-main .settings-about-product-image {
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--bg-band);
        margin-bottom: 16px;
        overflow: hidden;
    }

    .settings-main .settings-about-product-image img {
        width: 76px;
        height: 76px;
        object-fit: contain;
    }

    .settings-main .settings-about-device-name {
        font-size: 17px;
        font-weight: var(--w-semibold);
        letter-spacing: -.02em;
        margin-bottom: 10px;
    }

    .settings-main .settings-about-rename-btn {
        height: 32px;
        padding: 0 15px;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: 12.5px;
        font-weight: var(--w-medium);
        cursor: pointer;
    }

    .settings-main .settings-about-rename-btn:hover {
        background: var(--accent-wash);
    }

    /* ---- Privacy ---- */
    .settings-main .privacy-stats {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface);
        overflow: hidden;
    }

    .settings-main .privacy-stat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 16px;
        border-top: 1px solid var(--line);
    }

    .settings-main .privacy-stat-row:first-child {
        border-top: 0;
    }

    .settings-main .privacy-stat-label {
        font-size: 13px;
        color: var(--muted);
    }

    .settings-main .privacy-stat-value {
        font-family: var(--font-mono);
        font-size: 12.5px;
        color: var(--text);
    }

    .settings-main .privacy-scan-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 14px;
    }

    .settings-main #privacy-scan-btn {
        height: 38px;
        padding: 0 18px;
        background: var(--accent);
        color: var(--on-accent);
        border: 0;
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: var(--w-semibold);
        cursor: pointer;
    }

    .settings-main #privacy-scan-btn:hover {
        background: var(--accent-hover);
    }

    .settings-main .privacy-scan-progress {
        font-family: var(--font-mono);
        font-size: 12.5px;
        color: var(--faint);
    }

    /* ---- Storage panel (SSD + cache in one) ----
       The two borrowed .settings-content blocks stack, so the second needs the
       same rhythm as a section break rather than butting against the first. */
    .settings-main .settings-content + .settings-content {
        margin-top: 26px;
    }
}

/* Design update: settings section eyebrows dropped the uppercase micro-caps
   treatment for plain 11px labels. */
@media (min-width: 641px) {
    .settings-main .settings-group-title,
    .settings-main .apps-manage-subhead,
    .settings-main .settings-section-header .settings-group-title,
    .settings-main .settings-update-version-label,
    .settings-main .settings-update-card-eyebrow,
    .settings-main .devstat-section-title {
        font-size: 11px;
        font-weight: 650;
        letter-spacing: .005em;
        text-transform: none;
    }
}

/* ==========================================================================
   Built-in office preview (PR #58) — design system pass
   ==========================================================================
   The feature ships token-based CSS, so it already follows the theme. This
   only aligns the details the design system is opinionated about: console
   radii, the band/surface split, hairline table rules and mono metadata. */
.office-builtin-banner {
    padding: 12px 18px;
    background: var(--bg-band);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
}

.office-builtin-banner strong {
    color: var(--text);
    font-weight: var(--w-semibold);
}

.office-builtin-content td,
.office-builtin-content th {
    border-color: var(--line);
}

.office-builtin-content th {
    background: var(--bg-band);
    font-weight: var(--w-semibold);
    text-align: left;
}

.office-sheet-tab {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: var(--w-medium);
}

.office-sheet-tab:hover {
    background: var(--accent-wash);
    color: var(--text);
}

.office-slide-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.office-slide-card header {
    background: var(--bg-band);
    border-bottom: 1px solid var(--line);
    color: var(--faint);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .005em;
}

.office-slide-body {
    background: var(--surface);
}

.office-muted {
    color: var(--faint);
}

.office-preview-notice,
.office-preview-loading {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--faint);
}

/* ==========================================================================
   In-shell .plu apps
   --------------------------------------------------------------------------
   A .plu app talks to the box only through window.plum.*; it cannot fetch or
   read files itself, and its manifest declares permissions the shell has to
   present and honour. So the box visibly owns the frame the app runs in: the
   app starts BELOW the shell header, under a host-owned identity strip, and
   the header carries a chip naming what is running.
   ========================================================================== */

/* ---- Running-app chip (header) ---- */

.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 6px 0 9px;
    margin-left: 2px;
    flex-shrink: 0;
    background: var(--bg-band);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.app-chip[hidden] { display: none; }

.app-chip-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

/* Two lines in a fixed-width column. Without min-width:0 + nowrap the mono
   meta line wraps and bursts the 36px chip. */
.app-chip-labels {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    max-width: 180px;
}

.app-chip-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-chip-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--faint);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-chip-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.app-chip-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ---- Guest boundary + host identity strip ---- */

/* The frame starts under the header, not over it — the shell stays usable. */
.app-preview-viewer {
    top: var(--header-height);
    background: var(--bg-band);
    border-top: 1px solid var(--line);
    z-index: 40;
}

.app-preview-header {
    gap: 9px;
    padding: 7px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.app-frame-id {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
}

.app-frame-divider {
    width: 1px;
    height: 20px;
    margin: 0 5px;
    flex-shrink: 0;
    background: var(--border);
}

.app-preview-viewer .app-preview-title {
    flex: 0 1 auto;
    font-size: 12.5px;
    font-weight: 530;
    color: var(--text);
}

.app-frame-state {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
    white-space: nowrap;
}

.app-preview-viewer .app-preview-actions {
    margin-left: auto;
    gap: 4px;
}

.app-preview-viewer .app-preview-action-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--faint);
}

.app-preview-viewer .app-preview-action-btn:hover {
    background: var(--bg-hover);
    border-color: transparent;
    color: var(--text);
}

.app-preview-viewer .app-preview-action-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.2;
}

/* Desktop leaves the app through the header chip; the phone layout has no
   chip within reach, so the back button stays there. */
@media (min-width: 769px) {
    .app-preview-viewer .app-preview-back { display: none; }
}

/* ---- Signed-app handoff card ---- */

.app-handoff-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(3px);
}

.app-handoff-backdrop[hidden] { display: none; }

.app-handoff-card {
    width: min(100%, 400px);
    padding: 24px;
    display: grid;
    gap: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    animation: pbxScale .18s ease;
}

@keyframes pbxScale {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}

.app-handoff-head {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.app-handoff-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-band);
    object-fit: cover;
}

.app-handoff-headtext { min-width: 0; }

.app-handoff-name {
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.02em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-handoff-idline {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-handoff-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-band);
    color: var(--text);
}

.app-handoff-trust-title {
    font-size: 12.5px;
    font-weight: 530;
}

.app-handoff-trust-sub {
    font-size: 11.5px;
    color: var(--faint);
}

.app-handoff-eyebrow {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .005em;
    color: var(--faint);
}

.app-handoff-perms {
    display: grid;
    gap: 11px;
}

.app-handoff-perm {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.app-handoff-perm svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--muted);
}

.app-handoff-perm-label {
    font-size: 13px;
    font-weight: 530;
    color: var(--text);
}

.app-handoff-perm-desc {
    font-size: 11.5px;
    color: var(--faint);
}

.app-handoff-remember {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 11px 13px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--bg-band);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.app-handoff-remember:hover { border-color: var(--border-strong); }

.app-handoff-check {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: transparent;
}

.app-handoff-remember[aria-pressed="true"] .app-handoff-check {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.app-handoff-remember-text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.app-handoff-remember-title {
    font-size: 12.5px;
    font-weight: 530;
    color: var(--text);
}

.app-handoff-remember-sub {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--faint);
}

.app-handoff-actions {
    display: flex;
    gap: 8px;
}

.app-handoff-actions .app-handoff-open { flex: 1; }

/* Focus follows the design system's ink ring, not the browser default. */
.app-handoff-card .btn:focus-visible,
.app-handoff-remember:focus-visible,
.app-chip-btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* ---- Collaborator chips in the identity strip ---- */

.app-frame-peers {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.app-frame-peers:empty { display: none; }

.app-frame-peer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px 0 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-band);
    white-space: nowrap;
}

.app-frame-peer + .app-frame-peer { margin-left: -7px; }

.app-frame-peer-avatar {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--surface);
    border-radius: 50%;
    background: var(--bg-band);
    color: var(--text);
    font-size: 9.5px;
    font-weight: 600;
}

.app-frame-peer-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: var(--muted);
}

/* Said plainly when the box has no relay address yet: the link is local. */
.share-local-warning {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--status-review);
}

/* ==========================================================================
   Local-network permission handoff
   --------------------------------------------------------------------------
   A browser will only raise the local-network prompt while a gated request is
   actually in flight, and it remembers a refusal forever. So this bar is not
   decoration around a system dialog — it is the only chance to give the user
   context before they answer, and the only way back if they answer no.

   It sits between the shell header and the app body and pushes content down.
   Overlaying was rejected: this is an optimisation, and an optimisation must
   never cover the thing the user actually came for.
   ========================================================================== */

.lan-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    background: var(--bg-band);
    border-bottom: 1px solid var(--line);
    animation: pbxFade .24s ease both;
}

.lan-bar[hidden] {
    display: none !important;
}

.lan-bar-glyph {
    display: flex;
    flex-shrink: 0;
    color: var(--text-muted);
}

.lan-bar-glyph.is-warn  { color: var(--status-review); }
.lan-bar-glyph.is-ok    { color: var(--status-live); }

/* One row, always. A long box name clips; it never wraps the bar to two. */
.lan-bar-copy {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lan-bar-sub  { color: var(--text-faint); }
.lan-bar-figs {
    color: var(--text-faint);
    font-family: var(--font-mono);
}

.lan-bar-btn {
    flex-shrink: 0;
    height: 30px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.lan-bar-btn:hover { opacity: .9; }

.lan-bar-btn.is-ghost {
    padding: 0 14px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 500;
}

.lan-bar-btn.is-ghost:hover {
    opacity: 1;
    background: var(--accent-wash);
    border-color: var(--border-strong);
}

.lan-bar-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}

.lan-bar-close:hover {
    background: var(--accent-wash);
    color: var(--text);
}

/* Probing indicator — a dot with an expanding ring. Deliberately not a
   spinner: this waits on a person reading a system dialog, not on bytes. */
.lan-bar-ping {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lan-bar-ping::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--text);
    animation: pbxPing 1.5s ease-out infinite;
}

.lan-bar-ping::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text);
}

@keyframes pbxFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pbxPing {
    0%        { transform: scale(1);   opacity: .5; }
    70%, 100% { transform: scale(2.4); opacity: 0; }
}

/* --- Recovery modal ------------------------------------------------------
   Reached from 허용하는 법 or Settings, never on first ask. After a refusal
   the browser will not prompt again, so without this the user is stranded
   with no route back — the exact hole Plex leaves open. */

.lan-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 88;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(3px);
    animation: pbxScale .16s ease;
}

.lan-guide-backdrop[hidden] { display: none !important; }

.lan-guide {
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lift);
}

.lan-guide-tile {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--status-review) 12%, transparent);
    color: var(--status-review);
}

.lan-guide-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 620;
    letter-spacing: -.02em;
    color: var(--text);
}

.lan-guide-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

.lan-guide-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.lan-guide-tab {
    height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
}

.lan-guide-tab:hover { border-color: var(--border-strong); }

.lan-guide-tab.is-active {
    border-color: var(--accent);
    background: var(--accent-wash);
    color: var(--text);
    font-weight: 600;
}

/* Shows WHERE to click. Prose cannot point at a browser's own chrome. */
.lan-guide-addressbar {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 12px;
    margin-bottom: 14px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.lan-guide-addressbar-lock {
    display: flex;
    flex-shrink: 0;
    color: var(--text);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.lan-guide-addressbar-host {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lan-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.lan-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.lan-guide-step-n {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.lan-guide-step-tx {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

.lan-guide-actions {
    display: flex;
    gap: 8px;
}

.lan-guide-retry {
    flex: 1;
    height: 40px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.lan-guide-retry:hover { opacity: .9; }

.lan-guide-later {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

.lan-guide-later:hover {
    background: var(--accent-wash);
    color: var(--text);
}

/* Nothing is broken — say so, or the amber lock reads as a failure. */
.lan-guide-note {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-faint);
}

.lan-guide-note + .lan-guide-note { margin-top: 8px; }

.lan-guide-note code {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.lan-guide-note[hidden] { display: none !important; }

/* The bar is a single row by design. Below the shell's mobile breakpoint the
   trailing detail is dropped rather than allowed to wrap — the offer, the
   button and the dismiss must stay reachable on one line. */
@media (max-width: 640px) {
    .lan-bar { padding: 8px 12px; gap: 10px; }
    .lan-bar-sub,
    .lan-bar-figs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lan-bar,
    .lan-guide-backdrop { animation: none; }
    .lan-bar-ping::before { animation: none; opacity: .35; }
}

/* Settings → Device Status → Wi-Fi: the route back to the offer. */
.devstat-lan-btn {
    margin-top: 10px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.devstat-lan-btn:hover { background: var(--accent-wash); }
.devstat-lan-btn[hidden] { display: none !important; }

/* ==========================================
   Settings → Language & Region
   ==========================================
   Type/radius values come straight from the handoff spec. Token mapping:
   the spec's --text-muted is the DS muted tone (= --muted here); the
   spec's --text-faint is --faint. (The stylesheet's legacy --text-muted
   is the faintest tone — do not use it below.) Machine-shaped values
   (offsets, meridians, clocks, the preview line) are always mono. */

.lr-lede {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    margin-bottom: 22px;
}

.lr-group-title {
    font-size: 11px;
    font-weight: 650;
    color: var(--faint);
    margin-bottom: 12px;
}

/* Map card (R3, R4) */
.lr-map-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}

.lr-map {
    width: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    min-height: 150px;
}

.lr-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

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

.lr-summary-city {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lr-summary-meta {
    display: block;
    font-size: 11.5px;
    color: var(--faint);
    font-family: var(--font-mono);
    margin-top: 3px;
}

.lr-summary-clock {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* Zone list (R2) */
.lr-zone-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    max-height: 210px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.lr-zone-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
}

.lr-zone-row:hover,
.lr-zone-row.selected {
    background: var(--accent-wash);
}

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

.lr-zone-city {
    display: block;
    font-size: 13.5px;
    font-weight: 530;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lr-zone-meta {
    display: block;
    font-size: 11px;
    color: var(--faint);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.lr-zone-time {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--muted);
    flex-shrink: 0;
}

/* Ink check — shared by zone rows and language cards; shown on selection. */
.lr-zone-check {
    display: none;
    flex-shrink: 0;
    color: var(--text);
}

.lr-zone-row.selected .lr-zone-check,
.lr-lang-card.selected .lr-zone-check {
    display: flex;
}

/* Auto toggle row (R7) */
.lr-auto-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 26px;
}

.lr-setting-title {
    font-size: 14px;
    font-weight: 560;
}

.lr-setting-sub {
    font-size: 12px;
    color: var(--faint);
    margin-top: 2px;
}

/* Language grid (R5) */
.lr-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 26px;
}

.lr-lang-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: all 0.13s;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.lr-lang-card:hover {
    border-color: var(--border-strong);
}

.lr-lang-card.selected {
    border-color: var(--accent);
    background: var(--accent-wash);
}

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

.lr-lang-name {
    display: block;
    font-size: 13.5px;
    font-weight: 560;
}

.lr-lang-en {
    display: block;
    font-size: 11px;
    color: var(--faint);
    margin-top: 2px;
}

/* Formats card (R6) */
.lr-formats-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.lr-format-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
}

.lr-format-row + .lr-format-row {
    border-top: 1px solid var(--line);
}

.lr-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    width: 170px;
    flex-shrink: 0;
}

.lr-seg-btn {
    flex: 1;
    height: 30px;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    color: var(--muted);
}

.lr-seg-btn.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    font-weight: 600;
}

.lr-preview {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    text-align: right;
    flex-shrink: 0;
}

/* Auto mode: the list and grid become a read-out (R7). */
.lr-disabled {
    pointer-events: none;
    opacity: 0.45;
}

/* ── Device Status: 작업 관리자 (devstat-procs) ─────────────────────────── */
.devstat-procs > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.devstat-procs > summary::-webkit-details-marker { display: none; }
.devstat-procs > summary::after {
    content: "▾";
    margin-left: 6px;
    opacity: .55;
    font-size: 11px;
    display: inline-block;
    transition: transform .15s ease;
}
.devstat-procs[open] > summary::after { transform: rotate(180deg); }
.devstat-proc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.devstat-proc-table th {
    text-align: left;
    font-weight: 520;
    color: var(--text-secondary, #888);
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--border-color, rgba(128,128,128,.2));
}
.devstat-proc-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-color, rgba(128,128,128,.12));
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.devstat-proc-table tr:last-child td { border-bottom: none; }
.devstat-proc-table th.num, .devstat-proc-table td.num { text-align: right; }
.devstat-proc-table td.num.hot { color: var(--reject, #d5504e); font-weight: 620; }
.devstat-proc-empty {
    text-align: center;
    color: var(--text-secondary, #888);
    padding: 14px 0 !important;
}

/* ── 개발자 탭 (설정 → Developer) ────────────────────────────────────────────
   About 의 OS 버전을 일곱 번 눌러야 나타나는 화면. 고객 눈에 띄지 않는 곳이라
   장식은 없고, 상태가 한눈에 읽히는 것만 신경 썼다 — 여기서 켜는 것은 박스에
   루트 셸을 여는 일이라 "지금 켜져 있나" 가 가장 중요한 정보다. */
.settings-item-tappable {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

.dev-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* 켜져 있다는 사실은 눈에 걸려야 한다. 그래서 이 화면에서 유일하게 색을 쓴다. */
.dev-pill-on {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    border-color: color-mix(in srgb, #f59e0b 45%, transparent);
    color: #f59e0b;
}

.dev-key-input {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.dev-key-input:focus {
    outline: none;
    border-color: var(--text-secondary);
}

.dev-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 13px;
}

.dev-note {
    margin-top: 8px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.5;
}

/* 한 번만 보여주는 값(1회용 비밀번호) — 놓치면 다시 켜는 수밖에 없다. */
.dev-note-warn {
    border-color: color-mix(in srgb, #f59e0b 45%, transparent);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

.dev-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    word-break: break-all;
    text-align: right;
}

/* 새 레이아웃에서 쓰는 것들 — 접히는 Advanced, 텍스트 입력, 접속 명령 줄. */
.dev-advanced {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.dev-advanced > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    list-style: none;
    padding: 2px 0;
}

.dev-advanced > summary::-webkit-details-marker { display: none; }

.dev-advanced > summary::before {
    content: '\203A';
    display: inline-block;
    width: 14px;
    transition: transform .15s ease;
}

.dev-advanced[open] > summary::before { transform: rotate(90deg); }

.dev-field-label {
    display: block;
    margin: 10px 0 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.dev-text-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 13px;
}

.dev-text-input:focus, .dev-key-input:focus {
    outline: none;
    border-color: var(--text-secondary);
}

/* 붙여넣기 좋게 명령 한 줄과 복사 버튼을 나란히. */
.dev-connect {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.dev-connect code {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-primary);
    word-break: break-all;
}

/* 한 번만 보여주는 값. 눈에 걸려야 하고, 손으로 옮겨 적을 수 있어야 한다. */
.dev-secret {
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--text-primary);
    -webkit-user-select: all;
    user-select: all;
}

/* ══ 소프트웨어 업데이트 (재설계, 2026-09-11) ═══════════════════════════════
   예전 화면(.settings-update-*)의 문제 네 가지를 고친 것:
     1. OS·코어가 따로 서서 존재하지 않는 선택을 만들었다 → 카드 하나
     2. 좌우 2단이 위계를 지웠다 → 카드 하나 + 행 세 개
     3. 400 MB 를 받으면서 "설치 중…" 만 떴다 → 큰 퍼센트 + 바이트 + ETA
     4. 다음에 뭘 눌러야 할지 몰랐다 → 재부팅 버튼이 처음부터 같은 자리
   박스 UI 는 모노크롬이다. 색이 남는 곳은 상태(완료·주의·실패)뿐. */

.upd-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 20px;
    box-shadow: var(--shadow);
    max-width: 620px;
}

.upd-head { display: flex; align-items: flex-start; gap: 14px; }
.upd-head-text { flex: 1; min-width: 0; }

.upd-tile {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, currentColor 13%, transparent);
}
.upd-tile.is-ok    { color: var(--status-live); }
.upd-tile.is-warn  { color: var(--status-review); }
.upd-tile.is-error { color: var(--status-rejected); }

.upd-headline { font-size: 15.5px; font-weight: 620; letter-spacing: -.015em; }
.upd-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* mono 값은 flex 안에서 줄바꿈되면 자리가 흔들린다 — 긴 버전 문자열 주의. */
.upd-size {
    font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--text-faint); flex-shrink: 0; white-space: nowrap;
}

/* ── 진행률 (바이트를 아는 구간) ── */
.upd-prog { margin-top: 20px; }
/* 퍼센트는 본문 크기다. 처음에는 38px 모노로 크게 띄웠는데, 화면에서 가장 큰
   글자가 "42%" 가 되니 정작 무엇을 설치하는지보다 숫자가 더 커 보였다. 애플의
   소프트웨어 업데이트도 진행률을 본문 크기로 한 줄에 적는다.
   숫자는 tabular-nums 로 — 폭이 흔들리면 바 위에서 달달 떨린다. */
.upd-pct-row {
    display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
    font-size: 13px;
}
.upd-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.upd-phase { color: var(--text-muted); }

.upd-bar {
    height: 6px; background: var(--bg-band);
    border-radius: var(--radius-pill); overflow: hidden;
}
.upd-bar > i {
    display: block; height: 100%; width: 0;
    border-radius: var(--radius-pill);
    background: var(--text);
    transition: width .4s ease;
}
.upd-bar > i.upd-bar-indet {
    width: 45%;
    animation: updIndet 1.3s ease-in-out infinite;
    transition: none;
}
@keyframes updIndet { 0% { margin-left: -45%; } 100% { margin-left: 100%; } }

.upd-meta {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 9px;
    font-size: 12px; font-variant-numeric: tabular-nums;
}
.upd-meta > span:first-child { color: var(--text-muted); }
.upd-meta > span:last-child { color: var(--text-faint); white-space: nowrap; }

/* ── 불확정 구간 ── */
.upd-indet { margin-top: 18px; }
.upd-indet-row {
    display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
    font-size: 13px; color: var(--text);
}
.upd-spin {
    width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
    border: 1.5px solid var(--border-strong); border-top-color: var(--text);
    animation: updSpin .9s linear infinite;
}
@keyframes updSpin { to { transform: rotate(360deg); } }
.upd-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 9px; }

/* 멈춘 것처럼 보이지 않게 흐르는 바이지만, 움직임을 싫어하는 사람에겐
   흐르지 않는 편이 낫다. */
@media (prefers-reduced-motion: reduce) {
    .upd-bar > i.upd-bar-indet { animation: none; width: 100%; margin-left: 0; opacity: .45; }
    .upd-spin { animation-duration: 3s; }
    .upd-bar > i { transition: none; }
}

/* ── 릴리스 노트 ── */
.upd-notes {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--line);
}
.upd-note { display: flex; gap: 9px; margin-bottom: 6px; }
.upd-note::before { content: "·"; color: var(--text-faint); flex-shrink: 0; }
.upd-note > span { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

/* ── 안내 스트립: 누르기 전에 알아야 하는 사실 ── */
.upd-notice {
    display: flex; gap: 9px; margin-top: 16px; padding: 11px 13px;
    border-radius: var(--radius-md);
    font-size: 12.5px; line-height: 1.55;
    color: var(--text);
    background: color-mix(in srgb, var(--text) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 26%, transparent);
}
.upd-notice.is-ok {
    color: var(--status-live);
    background: color-mix(in srgb, var(--status-live) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-live) 26%, transparent);
}
.upd-notice.is-warn {
    color: var(--status-review);
    background: color-mix(in srgb, var(--status-review) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-review) 26%, transparent);
}
.upd-notice.is-error {
    color: var(--status-rejected);
    background: color-mix(in srgb, var(--status-rejected) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-rejected) 26%, transparent);
}
.upd-notice-ico { display: flex; flex-shrink: 0; margin-top: 1px; }

/* ── 동작 ── */
.upd-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.upd-btn {
    height: 38px; padding: 0 20px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.upd-btn-primary { background: var(--text); color: var(--surface); border: 0; }
.upd-btn-primary:hover:not(:disabled) { opacity: .88; }
/* 비활성이라도 자리는 지킨다 — 다음에 무엇을 누를지 미리 보여 주는 것이 목적. */
.upd-btn-primary:disabled {
    background: var(--bg-band); color: var(--text-faint);
    border: 1px solid var(--border); cursor: not-allowed;
}
.upd-btn-ghost {
    padding: 0 15px; background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); font-weight: 500;
}
.upd-btn-ghost:hover { color: var(--text); }
.upd-trailing {
    margin-left: auto; font-size: 11.5px;
    color: var(--text-faint); white-space: nowrap;
}

/* 유일하게 mono 로 남는 곳. 박스가 뱉은 오류 원문이라 "손대지 않고 그대로
   옮긴 글자" 라는 뜻이 폰트에 담긴다. 나머지 숫자·버전은 본문 폰트에
   tabular-nums 로 자리만 맞춘다. */
.upd-detail {
    margin-top: 14px; padding: 10px 12px;
    background: var(--bg-band); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
    color: var(--text-muted);
    white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow: auto;
}

/* ── 카드 아래의 행 세 개 ── */
.upd-rows {
    max-width: 620px; margin-top: 22px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); overflow: hidden;
}
.upd-row {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 15px 18px; background: transparent; border: 0;
    border-top: 1px solid var(--line); cursor: pointer; text-align: left;
    color: inherit; font-family: inherit;
}
.upd-rows > .upd-row:first-child { border-top: 0; }
.upd-row:hover { background: var(--bg-band); }
.upd-row-text { flex: 1; min-width: 0; display: block; }
.upd-row-title { display: block; font-size: 14px; font-weight: 560; }
.upd-row-desc { display: block; font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }
.upd-row-value {
    font-size: 12px; font-variant-numeric: tabular-nums;
    color: var(--text-muted); flex-shrink: 0; white-space: nowrap;
}
.upd-chev { flex-shrink: 0; color: var(--text-faint); transition: transform .18s ease; }
.upd-row[aria-expanded="true"] .upd-chev { transform: rotate(90deg); }
.upd-panel { padding: 4px 18px 14px; border-top: 1px solid var(--line); }
.upd-panel .settings-item { padding-left: 0; padding-right: 0; }

.upd-hist { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.upd-rows .upd-panel > .upd-hist:first-child { border-top: 0; }
.upd-hist-v { font-size: 12px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.upd-hist-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-faint); }

/* 패널 안의 행. 예전에는 기존 .settings-item 을 그대로 썼는데 그쪽이 자기
   테두리를 갖고 있어서, 자동/베타 토글을 **한 번 더 감싸는 박스**처럼 보였다.
   구분선은 행 사이에만 둔다. */
.upd-sub-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 11px 0;
    border-top: 1px solid var(--line);
}
.upd-panel > .upd-sub-row:first-child,
.upd-panel > div:first-child > .upd-sub-row:first-child { border-top: 0; }
.upd-panel #upd-mode-block > .upd-sub-row:first-child { border-top: 1px solid var(--line); }

/* 설치 시간대 — 자동 업데이트를 켰을 때만 보인다. */
.upd-window-pick { display: flex; align-items: center; gap: 7px; }
.upd-window-dash { color: var(--text-faint); }
/* 높이를 30px 로 못 박았더니 한글 받침이 잘렸다 — 12px 글자에 line-height 가
   없으면 글자 상자가 30px 안에 다 안 들어간다. 높이를 글자가 정하게 두고
   패딩으로 키운다. */
.upd-select {
    padding: 6px 26px 6px 9px;
    background: var(--bg-band); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
    line-height: 1.5;
    box-sizing: border-box;
    /* 기본 화살표가 들쭉날쭉해서 직접 그린다 — 위 padding-right 가 그 자리다. */
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                      linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
    background-position: right 12px center, right 7px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
#upd-window-hint { padding-top: 2px; }

/* 눌러서 펼치지 않는 행(베타 토글) — 행 모양은 같되 커서·호버는 없다. */
.upd-row-static { cursor: default; }
.upd-row-static:hover { background: transparent; }
.upd-beta-hint { font-size: 12.5px; color: var(--text-faint); }

/* 펼친 목록은 OS 가 그린다 — 어두운 테마에서 흰 바탕에 흰 글자가 되지 않게
   바탕/글자색을 명시한다. */
.upd-select option { background: var(--surface); color: var(--text); }

/* ---- Plum Box: files on a box that isn't connected ----
   Plum CI, console register: the state is said in words, in the status
   colour; surfaces stay flat with hairline borders; machine numbers are
   mono. No dots, no colour bars, no second icon for "offline". */
.raid-status {
    display: inline;
    /* A word, not machine data: the label is Korean in most locales, and
       mono spacing pulls a Korean word apart. */
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: var(--w-medium, 520);
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    color: var(--status-draft);
}
.raid-status.is-rejected { color: var(--status-rejected); }
.raid-status.is-review { color: var(--status-review); }
.raid-num {
    font-family: var(--font-mono);
    font-size: .94em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Drive: an offline entry keeps its place; it just steps back. */
.file-item.is-unavailable .file-name { color: var(--text-faint); }
.file-item.is-unavailable .file-icon,
.file-item.is-unavailable .file-preview { opacity: .5; }

/* Photos: grey tile, the state as a small label in the corner. */
.photo-item.is-unavailable { background: var(--surface-2, var(--surface)); }
.photo-item.is-unavailable .photo-grid-img { opacity: .3; filter: grayscale(1); }
.photo-offline {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 7px;
    border: 1px solid var(--line-strong, var(--border-strong));
    border-radius: var(--radius-xs, 5px);
    background: var(--surface);
    pointer-events: none;
}

/* Banner above Drive and Photos — the CI flash: a sentence on a hairline
   tinted by the state. */
.raid-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 11px 10px 11px 14px;
    border: 1px solid color-mix(in srgb, var(--status-review) 30%, var(--border-strong));
    border-radius: var(--radius-md, 9px);
    background: color-mix(in srgb, var(--status-review) 5%, var(--surface));
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}
.raid-notice.is-rejected {
    border-color: color-mix(in srgb, var(--status-rejected) 30%, var(--border-strong));
    background: color-mix(in srgb, var(--status-rejected) 4%, var(--surface));
}
.raid-notice[hidden] { display: none; }
@media (min-width: 641px) {
    /* Drive's list sits inside .file-container's 24px gutters. */
    #drive-files-raid-notice { margin: 0 24px 12px; }
}
.raid-notice-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.raid-notice-text strong {
    font-size: 13.5px;
    font-weight: var(--w-semibold, 620);
    letter-spacing: -.005em;
}
.raid-notice-text > span { color: var(--text-secondary); }
.raid-notice-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.raid-notice-close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-xs, 5px);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}
.raid-notice-close:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
@media (max-width: 640px) {
    .raid-notice { margin: 0 12px 10px; flex-wrap: wrap; align-items: flex-start; position: relative; padding-right: 40px; }
    .raid-notice-actions { width: 100%; }
    .raid-notice-close { position: absolute; top: 6px; right: 6px; }
}

/* "Box is offline" dialog: what happened, the facts, what to check. */
.raid-dlg { display: flex; flex-direction: column; padding-top: 8px; }
.raid-dlg-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: var(--w-semibold, 620);
    letter-spacing: -.018em;
    line-height: 1.3;
    color: var(--text);
}
.sx-dialog-body .raid-dlg-desc {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.raid-dlg-facts { border: 1px solid var(--border); border-radius: var(--radius-md, 9px); overflow: hidden; }
.raid-dlg-facts .sx-kv { padding: 9px 12px; }
.raid-dlg-facts .sx-kv-v {
    display: block;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.raid-dlg-check { margin-top: 16px; }
.raid-dlg-check-h {
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: var(--w-medium, 520);
    color: var(--text-faint);
}
.raid-dlg-check ol { margin: 0; padding: 0; list-style: none; counter-reset: raidchk; }
.raid-dlg-check li {
    counter-increment: raidchk;
    display: flex;
    gap: 10px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}
.raid-dlg-check li::before {
    content: counter(raidchk);
    width: 12px;
    flex: none;
    padding-top: 1px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-faint);
}

/* Photo viewer: the same state, on the dark stage. */
.photo-viewer-offline {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
    color: #F4F4F5;
    pointer-events: none;
}
.photo-viewer-offline[hidden] { display: none; }
.photo-viewer-offline strong { font-size: 17px; font-weight: 620; letter-spacing: -.018em; }
.photo-viewer-offline p { margin: 0; max-width: 340px; font-size: 13.5px; line-height: 1.6; color: #97979F; }