/* Cork — warm, personal, themeable UI
   The visual system is intentionally expressed through custom properties so a
   future user theme can override the palette without rewriting components. */

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

:root {
    color-scheme: light;

    /* Core theme tokens */
    --ink: #3b2c26;
    --ink-strong: #2b1f1b;
    --ink-muted: #725f54;
    --ink-faint: #806b60;
    --ink-on-dark: #fff8ec;

    --surface-canvas: #f4ead8;
    --surface-shell: #efe0c9;
    --surface-paper: #fffaf0;
    --surface-paper-strong: #fffdf8;
    --surface-soft: #f7eddd;
    --surface-soft-2: #ead8bf;
    --surface-note: #fff0bf;
    --surface-sage: #e8efe1;
    --surface-rose: #f7e2dd;
    --surface-plum: #eee2eb;
    --surface-danger: #f9e5df;

    --cork-base: #c89258;
    --cork-deep: #b77c46;
    --cork-light: #d6a96d;

    --accent: #a9503b;
    --accent-strong: #843b2e;
    --accent-soft: #f0c9b8;
    --accent-gold: #d4a13d;
    --accent-sage: #58745d;
    --accent-plum: #76506b;
    --accent-red: #a64738;

    --nav-bg: #49362d;
    --nav-bg-hover: #62483a;
    --nav-active: #a9503b;
    --nav-muted: #d9c5b0;

    --border-warm: #d7c2a8;
    --border-strong: #b99c7e;
    --border-soft: #eadcc9;

    --font-body: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-display: "Fredoka", "Nunito", "Trebuchet MS", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radius-xs: 7px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --shadow-soft: 0 2px 10px rgba(77, 52, 39, .10);
    --shadow-card: 0 5px 18px rgba(77, 52, 39, .16), 0 1px 2px rgba(77, 52, 39, .10);
    --shadow-float: 0 18px 52px rgba(52, 34, 26, .24), 0 3px 10px rgba(52, 34, 26, .12);

    /* Compatibility aliases used by existing Cork markup */
    --color-background-primary: var(--surface-paper);
    --color-background-secondary: var(--surface-soft);
    --color-background-tertiary: var(--surface-canvas);
    --color-background-inverse: var(--ink-strong);
    --color-background-ghost: transparent;
    --color-background-info: var(--surface-plum);
    --color-background-danger: var(--surface-danger);
    --color-background-success: var(--surface-sage);
    --color-background-warning: var(--surface-note);
    --color-background-disabled: rgba(255,250,240,.55);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink-muted);
    --color-text-tertiary: var(--ink-faint);
    --color-text-inverse: var(--ink-on-dark);
    --color-text-info: var(--accent-plum);
    --color-text-danger: var(--accent-red);
    --color-text-success: var(--accent-sage);
    --color-text-warning: #7e5f15;
    --color-text-disabled: rgba(59,44,38,.5);
    --color-text-ghost: rgba(114,95,84,.5);
    --color-border-primary: var(--border-strong);
    --color-border-secondary: var(--border-warm);
    --color-border-tertiary: var(--border-soft);
    --color-border-inverse: rgba(255,248,236,.28);
    --color-border-ghost: transparent;
    --color-border-info: var(--accent-plum);
    --color-border-danger: var(--accent-red);
    --color-border-success: var(--accent-sage);
    --color-border-warning: #9c7626;
    --color-ring-primary: rgba(184,95,69,.35);
    --color-ring-secondary: rgba(88,116,93,.3);
    --color-ring-inverse: rgba(255,248,236,.7);
    --color-ring-info: rgba(118,80,107,.32);
    --color-ring-danger: rgba(166,71,56,.32);
    --color-ring-success: rgba(88,116,93,.32);
    --color-ring-warning: rgba(212,161,61,.35);
    --font-sans: var(--font-body);
    --border-radius-xs: var(--radius-xs);
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --border-radius-full: var(--radius-pill);
    --shadow-hairline: 0 1px 2px rgba(77,52,39,.06);
    --shadow-sm: var(--shadow-soft);
    --shadow-md: var(--shadow-card);
    --shadow-lg: var(--shadow-float);
}

html, body { width: 100%; height: 100%; }
body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    background: var(--surface-canvas);
    color: var(--ink);
    height: 100vh;
    overflow: hidden;
    text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink-strong); }
:focus-visible { outline: 3px solid rgba(184,95,69,.42); outline-offset: 2px; }

/* Shared small language */
.eyebrow {
    font-family: var(--font-display);
    color: var(--accent);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.muted-copy { color: var(--ink-muted); }
.panel-note { color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.panel-kicker { color: var(--ink-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.panel-divider, .folder-divider { height: 1px; background: var(--border-soft); margin: 10px 0; }
.status-chip {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: var(--radius-pill);
    border: 1px solid #d7b98e;
    background: #f9e8c8;
    color: #76521f;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}
.status-chip.muted { background: var(--surface-soft); border-color: var(--border-warm); color: var(--ink-muted); }
.status-chip.success { background: var(--surface-sage); border-color: #b9c9ad; color: #36533b; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-danger, .tiny-button, .icon-button, .btn-pill, .btn-login, .send-btn {
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn-primary, .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fffaf2;
    font-weight: 800;
    box-shadow: 0 3px 0 var(--accent-strong);
}
.btn-primary:hover, .btn-login:hover { background: #ad563f; transform: translateY(-1px); }
.btn-primary:active, .btn-login:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-strong); }
.btn-primary.full { width: 100%; margin-top: 8px; }
.btn-secondary, .btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    background: var(--surface-paper-strong);
    border: 1px solid var(--border-warm);
    color: var(--ink);
    font-weight: 750;
    box-shadow: 0 2px 0 #d2b99a;
}
.btn-secondary:hover, .btn-pill:hover { background: #fff3df; border-color: var(--border-strong); transform: translateY(-1px); }
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: #b95543;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 3px 0 #84382d;
}
.btn-danger.strong { background: #9d3d34; }
.tiny-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-warm);
    background: var(--surface-paper-strong);
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 800;
}
.tiny-button:hover { color: var(--ink); background: #fff3df; border-color: var(--border-strong); }
.tiny-button.strong { color: var(--accent-strong); }
.tiny-button.danger { color: var(--accent-red); border-color: #e0b0a8; background: #fff7f3; }
.icon-button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-weight: 800;
}
.icon-button:hover { background: var(--surface-soft); border-color: var(--border-warm); color: var(--ink); }
.icon-button.small { width: 28px; height: 28px; font-size: 12px; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.form-input, .compose-input, .compact-input, .compact-select, .panel-search input {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-warm);
    background: var(--surface-paper-strong);
    color: var(--ink);
    border-radius: var(--radius-pill);
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-input, .compose-input { padding: 9px 13px; font-size: 13.5px; }
.compact-input, .compact-select { height: 32px; padding: 5px 10px; font-size: 11px; }
.compact-input { width: 150px; }
.compact-select { width: 145px; }
.form-input:focus, .compose-input:focus, .compact-input:focus, .compact-select:focus, .panel-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(184,95,69,.13);
    background: #fffdf9;
}
.form-input::placeholder, .compose-input::placeholder, .compact-input::placeholder, .panel-search input::placeholder { color: #806b60; }

/* Root app layout */
.app-layout { display: flex; flex-direction: row; width: 100%; height: 100vh; overflow: hidden; background: var(--surface-canvas); }
.panels { display: flex; flex: 1; min-width: 0; overflow: hidden; }

/* Navigation rail */
.nav-rail {
    position: relative;
    z-index: 900;
    width: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 0 10px;
    background: var(--nav-bg);
    border-right: 1px solid #382820;
    color: var(--nav-muted);
    box-shadow: 2px 0 14px rgba(57,38,29,.12);
}
.nav-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px 14px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    overflow: hidden;
    background: #f0c879;
    color: #4b3326;
    border: 2px solid #fff0d1;
    box-shadow: 2px 3px 0 #2d201a;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
}
.nav-collection-stack { display: flex; flex-direction: column; align-items: center; gap: 5px; max-height: 48vh; overflow-y: auto; scrollbar-width: none; padding: 1px 8px; }
.nav-collection-stack::-webkit-scrollbar { display: none; }
.nav-collection, .nav-icon, .nav-back {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nav-muted);
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-radius .14s ease, transform .14s ease;
}
.nav-collection:hover, .nav-icon:hover, .nav-back:hover { background: var(--nav-bg-hover); color: #fff5e6; transform: translateY(-1px); }
.nav-collection.active, .nav-icon.active {
    background: var(--nav-active);
    color: #fff9ed;
    border-radius: 13px 13px 16px 11px;
    box-shadow: 2px 3px 0 #2d201a;
}
.nav-collection.active::before, .nav-icon.active::before {
    content: "";
    position: absolute;
    left: -12px;
    width: 5px;
    height: 23px;
    border-radius: 0 5px 5px 0;
    background: #f1cf7d;
}
.nav-collection-glyph { font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 900; }
.nav-add-space { border: 1px dashed rgba(255,245,230,.34); font-size: 20px; }
.nav-divider { width: 30px; height: 1px; background: rgba(255,245,230,.16); margin: 1px 0; }
.nav-placeholder { opacity: .48; cursor: default; }
.nav-placeholder:hover { transform: none; background: transparent; color: var(--nav-muted); }
.nav-spacer { flex: 1; }
.nav-back { display: none; }
.nav-tooltip {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%) translateX(-3px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 6px 9px;
    border-radius: 9px;
    background: var(--ink-strong);
    color: #fff8ec;
    box-shadow: var(--shadow-soft);
    font-size: 11px;
    font-weight: 800;
    transition: opacity .12s ease, transform .12s ease;
}
.nav-collection:hover .nav-tooltip, .nav-icon:hover .nav-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Folder and chat list panels */
.panel-folders, .panel-chats, .panel-right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0e1cb;
    color: var(--ink);
}
.panel-folders { min-width: 150px; max-width: 290px; border-right: 1px solid var(--border-warm); }
.panel-chats { min-width: 170px; max-width: 330px; border-right: 1px solid var(--border-warm); background: #f7eddd; }
.panel-search { padding: 11px 10px 8px; }
.panel-search input { padding: 7px 11px; background: rgba(255,250,240,.72); font-size: 12px; }
.folder-list, .chat-list { flex: 1; overflow-y: auto; padding: 5px 5px 12px; }
.folder-item {
    min-height: 38px;
    margin: 2px 4px;
    padding: 8px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #755d50;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.folder-item:hover { background: rgba(255,250,240,.72); color: var(--ink); }
.folder-item.active { background: #fff6e8; color: var(--accent-strong); box-shadow: inset 4px 0 0 var(--accent), var(--shadow-soft); font-weight: 800; }
.folder-icon { width: 18px; text-align: center; color: var(--accent); font-size: 14px; flex-shrink: 0; }
.folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-menu.hamburger { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 18px; height: 18px; flex-shrink: 0; opacity: .62; }
.folder-menu.hamburger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }
.panel-chats-header { padding: 15px 14px 9px; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink-strong); }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 9px 9px; margin: 2px 0; border-radius: 13px; cursor: pointer; transition: background .12s ease, transform .12s ease; }
.chat-item:hover { background: rgba(255,250,240,.82); transform: translateX(1px); }
.chat-item.active { background: #fff4e3; box-shadow: inset 3px 0 0 var(--accent); }
.chat-avatar, .chat-header-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    border-radius: 14px 14px 16px 12px; font-family: var(--font-display); font-weight: 800;
    background: #d8b6d0; color: #4d2d45; border: 1px solid #c398b9;
}
.chat-avatar { width: 42px; height: 42px; font-size: 12px; }
.chat-avatar.group { background: #d8b6d0; color: #4d2d45; }
.chat-avatar.dm { background: #bfd0b8; color: #35523a; }
.chat-meta { flex: 1; min-width: 0; }
.chat-name { font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview { margin-top: 2px; color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { color: var(--ink-faint); font-size: 10px; }
.chat-unread { min-width: 19px; height: 19px; border-radius: 10px; padding: 0 5px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 10px; font-weight: 900; }
.drag-handle { width: 4px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: background .14s ease; z-index: 10; }
.drag-handle:hover, .drag-handle.dragging { background: rgba(184,95,69,.38); }

/* Main chat */
.main-area { flex: 1; min-width: 300px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-paper); }
.chat-header { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 15px; flex-shrink: 0; background: rgba(255,250,240,.94); border-bottom: 1px solid var(--border-soft); box-shadow: 0 2px 10px rgba(77,52,39,.04); }
.chat-header-avatar { width: 38px; height: 38px; font-size: 11px; }
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name { font-family: var(--font-display); color: var(--ink-strong); font-size: 14px; font-weight: 850; }
.chat-header-sub { margin-top: 1px; color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-actions { display: flex; gap: 3px; }
.header-btn, .compose-btn {
    border: 0; background: transparent; color: var(--ink-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease, transform .12s ease;
}
.header-btn { width: 34px; height: 34px; border-radius: 12px; }
.header-btn:hover, .compose-btn:hover { background: var(--surface-soft); color: var(--accent-strong); transform: translateY(-1px); }
.message-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background:
      radial-gradient(circle at 22px 22px, rgba(184,95,69,.035) 1px, transparent 1.4px) 0 0 / 28px 28px,
      var(--surface-paper);
}
.date-sep { align-self: center; margin: 8px 0; padding: 4px 10px; border-radius: var(--radius-pill); background: #f1e3cf; color: var(--ink-faint); font-size: 10.5px; font-weight: 800; }
.msg-group { display: flex; flex-direction: column; gap: 2px; max-width: min(70%, 680px); }
.msg-group.self { align-self: flex-end; align-items: flex-end; }
.msg-group.other { align-self: flex-start; align-items: flex-start; }
.msg-sender { margin: 0 3px 2px; color: var(--accent-plum); font-size: 11px; font-weight: 850; }
.msg-bubble { padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.48; word-break: break-word; box-shadow: 0 1px 1px rgba(77,52,39,.04); }
.msg-bubble.other { background: #f0eadc; color: var(--ink); border: 1px solid #e5d8c5; border-bottom-left-radius: 6px; }
.msg-bubble.self { background: #e7b69f; color: #3a241d; border: 1px solid #da9c82; border-bottom-right-radius: 6px; }
.msg-time { color: var(--ink-faint); font-size: 9.5px; padding: 0 3px; margin-top: 1px; }
.chat-empty { margin: auto; width: min(360px, 80%); padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink-muted); }
.chat-empty strong { font-family: var(--font-display); color: var(--ink); font-size: 18px; }
.chat-empty span { font-size: 12px; line-height: 1.55; }
.compose-bar { display: flex; align-items: center; gap: 7px; padding: 10px 12px 11px; flex-shrink: 0; background: #f7eddd; border-top: 1px solid var(--border-soft); }
.compose-btn { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.compose-bar .compose-input { background: var(--surface-paper-strong); }
.send-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-strong); }
.send-btn:hover { background: #ad563f; transform: translateY(-1px); }

/* Right-side panels */
.panel-right { min-width: 190px; max-width: 290px; border-left: 1px solid var(--border-warm); background: #f6ead8; }
.panel-right-header { min-height: 54px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); color: var(--ink-strong); font-weight: 850; border-bottom: 1px solid var(--border-soft); }
.panel-header-note { font-family: var(--font-body); color: var(--ink-faint); font-size: 9.5px; font-weight: 700; }
.right-panel-body { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.member-row, .persona-row, .session-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 32px; color: var(--ink); }
.member-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sticker-seed { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #efe0cb; color: var(--ink-faint); font-size: 9.5px; border-bottom: 1px solid var(--border-soft); }
.sticker-scroll { flex: 1; overflow-y: auto; padding: 10px; }
.sticker-section { margin-bottom: 15px; }
.sticker-section-title { margin-bottom: 8px; color: var(--ink-faint); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.sticker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sticker-thumb { aspect-ratio: 1; border-radius: 13px; display: flex; align-items: center; justify-content: center; padding: 7px; overflow: hidden; background: var(--surface-paper-strong); border: 1px solid var(--border-soft); cursor: pointer; box-shadow: var(--shadow-hairline); transition: transform .13s ease, background .13s ease; }
.sticker-thumb:hover { transform: rotate(-2deg) scale(1.04); background: #fff1d9; }
.sticker-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sticker-scrim { position: fixed; inset: 0; z-index: 199; background: rgba(58,43,36,.34); backdrop-filter: blur(2px); }

/* Login + invite */
.login-page { min-height: 100vh; padding: 24px; display: flex; align-items: center; justify-content: center; background:
    radial-gradient(circle at 15% 18%, rgba(240,200,121,.42), transparent 29%),
    radial-gradient(circle at 85% 80%, rgba(197,123,96,.26), transparent 26%),
    radial-gradient(circle at 75% 14%, rgba(106,137,103,.18), transparent 24%),
    var(--surface-canvas);
    position: relative;
}
.login-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23; background-image: radial-gradient(rgba(73,54,45,.18) .65px, transparent .7px); background-size: 9px 9px; }
.login-box { position: relative; width: 100%; max-width: 410px; padding: 34px 32px 30px; border-radius: var(--radius-xl); background: rgba(255,250,240,.96); border: 1px solid var(--border-warm); box-shadow: 8px 10px 0 rgba(73,54,45,.12), var(--shadow-card); }
.login-logo { width: 54px; height: 54px; margin: 0 auto 15px; border-radius: 18px 18px 20px 15px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: #f7dec4; border: 1px solid #e8c7a7; transform: rotate(-2deg); }
.login-title { margin: 0 0 8px; text-align: center; font-family: var(--font-display); font-size: 25px; line-height: 1.1; font-weight: 900; color: var(--ink-strong); }
.login-subtitle { margin: 0 0 23px; text-align: center; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
.error-msg { margin-bottom: 16px; padding: 10px 13px; border-radius: 12px; background: var(--surface-danger); border: 1px solid #e4b2a9; color: #873c31; font-size: 12px; }
.btn-login { width: 100%; margin-top: 4px; }
.alt-link { margin-top: 17px; text-align: center; color: var(--ink-faint); font-size: 12px; line-height: 1.5; }
.alt-link a { color: var(--accent-strong); text-decoration-thickness: 1px; }

/* Cork shell */
.cork-shell { background: var(--surface-shell); }
.board-workspace { min-width: 0; flex: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-canvas); }
.board-topbar { min-height: 68px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: rgba(255,250,240,.96); border-bottom: 1px solid var(--border-soft); }
.board-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.board-heading-sticker { width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px 14px 16px 12px; display: flex; align-items: center; justify-content: center; background: #f3d8b8; border: 1px solid #e4bd94; box-shadow: 2px 3px 0 #d1a97e; color: #5a4031; font-family: var(--font-display); font-size: 22px; font-weight: 900; transform: rotate(-2deg); }
.board-heading h1 { margin-top: 2px; max-width: 58vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); color: var(--ink-strong); font-size: 17px; line-height: 1.1; font-weight: 900; }
.board-meta { margin-top: 3px; color: var(--ink-faint); font-size: 10.5px; }
.profile-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.board-toolbar { min-height: 42px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #f1e2cc; border-bottom: 1px solid #d6bea1; }
.board-tabs { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.board-tabs::-webkit-scrollbar { display: none; }
.board-tab { flex-shrink: 0; min-height: 29px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid transparent; color: #765f50; cursor: pointer; font-size: 11px; font-weight: 800; transition: background .12s ease, border .12s ease, transform .12s ease; }
.board-tab:hover { background: rgba(255,250,240,.72); }
.board-tab.active { background: var(--surface-paper-strong); border-color: #d5b996; color: var(--accent-strong); box-shadow: 0 2px 0 #d4b28b; }
.board-toolbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cork { flex: 1; min-height: 0; position: relative; z-index: 0; isolation: isolate; overflow: hidden; cursor: grab; touch-action: none; overscroll-behavior: contain; background-color: var(--cork-base); background-image:
    radial-gradient(circle at 16% 24%, rgba(255,239,190,.12), transparent 26%),
    radial-gradient(circle at 75% 68%, rgba(118,66,34,.13), transparent 34%),
    linear-gradient(103deg, transparent 0 48%, rgba(91,48,25,.035) 49%, transparent 50%),
    linear-gradient(8deg, transparent 0 48%, rgba(255,248,220,.04) 49%, transparent 50%);
    background-size: auto, auto, 7px 7px, 11px 11px;
    box-shadow: inset 0 0 80px rgba(96,51,27,.12);
}
.cork:active { cursor: grabbing; }
.cork-texture { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image:
    repeating-linear-gradient(92deg, rgba(77,42,24,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(181deg, rgba(255,238,201,.035) 0 1px, transparent 1px 9px); }
.cork-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.board-empty-state { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 34px; background:
    radial-gradient(circle at 50% 50%, rgba(200,146,88,.16), transparent 38%), var(--surface-canvas); }
.empty-sticker { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; border-radius: 20px 22px 18px 23px; background: #f3cd7c; color: #6a4930; border: 2px solid #d3a74e; box-shadow: 4px 5px 0 rgba(73,54,45,.14); font-size: 28px; transform: rotate(-4deg); }
.board-empty-state h2 { font-family: var(--font-display); color: var(--ink-strong); font-size: 23px; }
.board-empty-state p { max-width: 440px; margin-top: 7px; color: var(--ink-muted); line-height: 1.55; }
.empty-create { width: min(420px, 100%); display: flex; gap: 8px; margin-top: 18px; }

/* Pins and cards */
.pin-card { position: absolute; cursor: grab; user-select: none; touch-action: none; transform-origin: 0 0; filter: drop-shadow(0 3px 5px rgba(72,43,25,.18)); }
.pin-card.cork-menu-raised,
.envelope-pin.cork-menu-raised { z-index: 1000000 !important; }
/* Note editing needs enough temporary room for the text field and its actions.
   This does not persist a resize: the stored card dimensions return after edit. */
.pin-card[data-edit-owned="true"] { min-width: 180px; min-height: 140px; }
.pin-card[data-edit-owned="true"] > .card-body { min-height: 140px !important; }
.pin-card:active { cursor: grabbing; }
.card-body { background: var(--surface-paper-strong); border-radius: 10px 10px 12px 9px; border: 1px solid rgba(105,75,53,.18); overflow: hidden; font-size: 11px; box-shadow: 1px 2px 0 rgba(255,255,255,.45) inset; }
.card-header { min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 6px 9px 5px; border-bottom: 1px solid rgba(105,75,53,.13); }
.badge, .card-type-badge { border-radius: var(--radius-pill); padding: 2px 6px; font-size: 9px; font-weight: 850; }
.card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 11px; font-weight: 800; }
.card-content { padding: 8px 9px; color: var(--ink); line-height: 1.45; }
.card-footer { display: flex; align-items: center; gap: 4px; padding: 5px 9px; border-top: 1px solid rgba(105,75,53,.13); color: var(--ink-muted); font-size: 9.5px; }
.pin-dot { width: 13px; height: 13px; position: absolute; top: -6px; left: 50%; z-index: 2; transform: translateX(-50%); border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(255,255,255,.5), 0 2px 4px rgba(65,37,22,.42); }
.resize-handle { position: absolute; right: 1px; bottom: 1px; width: 16px; height: 16px; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: se-resize; color: rgba(68,48,38,.48); opacity: .55; }
.resize-handle:hover { opacity: 1; }
.resize-handle svg { pointer-events: none; }
.pin-menu { position: absolute; top: 6px; right: 6px; z-index: 5000; }
.pin-menu > summary { list-style: none; width: 28px; height: 28px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--ink-muted); background: rgba(255,250,240,.94); border: 1px solid rgba(126,94,69,.2); box-shadow: var(--shadow-soft); }
.pin-menu > summary::-webkit-details-marker { display: none; }
.pin-menu > summary span { display: block; width: 13px; height: 2px; border-radius: 2px; background: currentColor; }
@media (hover: hover) and (pointer: fine) {
    .pin-card > .pin-menu,
    .envelope-pin > .pin-menu {
        opacity: 0;
        transition: opacity .12s ease;
    }
    .pin-card:hover > .pin-menu,
    .pin-card:focus-within > .pin-menu,
    .envelope-pin:hover > .pin-menu,
    .envelope-pin:focus-within > .pin-menu,
    .pin-menu[open] {
        opacity: 1;
    }
}
.pin-menu-panel { position: absolute; top: 33px; right: 0; min-width: 112px; padding: 5px; border-radius: 12px; background: var(--surface-paper-strong); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); }
.pin-menu.cork-menu-flip-y > .pin-menu-panel { top: auto; bottom: 33px; }
.pin-menu.cork-menu-flip-x > .pin-menu-panel { right: auto; left: 0; }
.pin-menu-edit, .pin-menu-delete { padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 10.5px; white-space: nowrap; }
.pin-menu-edit { color: var(--ink-muted); }
.pin-menu-edit:hover { background: var(--surface-soft); color: var(--ink); }
.pin-menu-delete { color: var(--accent-red); }
.pin-menu-delete:hover { background: var(--surface-danger); }
.note-card { background: #fff4bf !important; }
.note-card .card-header { background: #f3df78; }
.video-thumb { background: #3e302b; }
.video-bar { background: var(--accent); }

/* Floating access panel */
.floating-panel { position: fixed; right: 18px; top: 82px; z-index: 1100; width: 310px; max-height: calc(100vh - 110px); overflow: auto; padding: 15px; border-radius: var(--radius-lg); background: var(--surface-paper-strong); border: 1px solid var(--border-warm); box-shadow: var(--shadow-float); color: var(--ink); }
.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-title-row > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.panel-title-row strong { font-family: var(--font-display); font-size: 17px; }
.panel-title-row span { color: var(--ink-faint); font-size: 10px; }
.member-list { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }

/* Modal language */
.modal-scrim { position: fixed; inset: 0; z-index: 1500; background: rgba(58,43,36,.42); backdrop-filter: blur(3px); }
.modal-card { position: fixed; z-index: 1501; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(620px, calc(100vw - 28px)); max-height: min(82vh, 760px); overflow: auto; border-radius: var(--radius-xl); background: var(--surface-paper-strong); border: 1px solid var(--border-warm); box-shadow: var(--shadow-float); color: var(--ink); }
.modal-header { padding: 20px 21px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border-soft); }
.modal-header h2 { margin-top: 3px; font-family: var(--font-display); color: var(--ink-strong); font-size: 21px; }
.modal-header p { max-width: 480px; margin-top: 5px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.password-modal { width: min(430px, calc(100vw - 28px)); padding-bottom: 18px; }
.password-modal .form-group { padding: 0 20px; margin-top: 15px; margin-bottom: 0; }
.password-modal .modal-actions { padding: 0 20px; }

/* Collection editor */
.collection-editor { width: min(720px, calc(100vw - 28px)); }
.collection-list { padding: 11px 14px 2px; display: flex; flex-direction: column; gap: 6px; }
.collection-row { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 14px; border: 1px solid var(--border-soft); background: #fffaf1; }
.collection-row-icon { width: 35px; height: 35px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f2ddbf; color: #5a4031; font-family: var(--font-display); font-size: 18px; font-weight: 900; }
.collection-row-copy { min-width: 95px; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.collection-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 13px; }
.collection-row-copy span { color: var(--ink-faint); font-size: 9.5px; }
.collection-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.collection-form { margin: 12px 14px 15px; padding: 14px; border-radius: 17px; background: var(--surface-soft); border: 1px solid var(--border-warm); }
.form-heading { margin-bottom: 10px; font-family: var(--font-display); color: var(--ink); font-weight: 850; }
.icon-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.icon-preset { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-paper-strong); border: 1px solid var(--border-warm); cursor: pointer; font-size: 17px; transition: transform .12s ease; }
.icon-preset:hover { transform: rotate(-3deg) translateY(-1px); }
.form-grid-two { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }

/* Settings */
.settings-shell { background: var(--surface-canvas); }
.settings-panels { background: var(--surface-canvas); }
.settings-sidebar { width: 220px !important; min-width: 220px; max-width: 260px; background: #efe0ca; }
.settings-sidebar-head { padding: 18px 15px 10px; }
.settings-sidebar-head h2 { margin-top: 4px; font-family: var(--font-display); color: var(--ink-strong); font-size: 18px; }
.settings-sidebar-head p { margin-top: 5px; color: var(--ink-muted); font-size: 10.5px; line-height: 1.45; }
.settings-main { background: #f8efe1; }
.settings-header { background: #fff8ed; }
.settings-scroll { flex: 1; overflow-y: auto; padding: 28px clamp(18px, 4vw, 52px) 42px; }
.settings-section { width: min(820px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
.section-heading { margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; }
.section-heading h1 { margin-top: 4px; font-family: var(--font-display); color: var(--ink-strong); font-size: clamp(24px, 3vw, 32px); line-height: 1.08; }
.section-heading p { max-width: 620px; margin-top: 7px; color: var(--ink-muted); line-height: 1.55; }
.settings-card { padding: 15px 16px; border-radius: 17px; background: var(--surface-paper-strong); border: 1px solid var(--border-warm); box-shadow: var(--shadow-hairline); }
.profile-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(105deg, #fff8e9, #f4e7d1); }
.profile-avatar-large { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 20px 20px 22px 17px; background: #d5b6cf; border: 1px solid #c59dbb; color: #503348; font-family: var(--font-display); font-weight: 900; box-shadow: 3px 4px 0 #e3c9a9; }
.profile-card-copy { display: flex; flex-direction: column; gap: 2px; }
.profile-card-copy strong { font-family: var(--font-display); font-size: 16px; }
.profile-card-copy span { color: var(--ink-faint); font-size: 11px; }
.setting-label { margin-bottom: 7px; color: var(--ink-muted); font-size: 10.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.setting-row, .setting-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.setting-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.setting-edit-row .form-input { flex: 1; }
.setting-card-head p, .danger-card p { color: var(--ink-muted); font-size: 11px; line-height: 1.48; }
.persona-list, .session-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 11px; padding: 8px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.session-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-copy strong { color: var(--ink); font-size: 12px; }
.session-copy span { color: var(--ink-faint); font-size: 10.5px; line-height: 1.35; }
.password-dots { color: var(--ink-faint); letter-spacing: .08em; }
.danger-heading .eyebrow { color: var(--accent-red); }
.danger-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff6f1; border-color: #e2b6aa; }
.danger-card .setting-label { color: #8b3c31; }

/* Debug */
.debug-panel { position: fixed; right: 12px; bottom: 12px; z-index: 99999; width: 360px; max-width: calc(100vw - 24px); overflow: hidden; border-radius: 14px; background: #352a26; border: 1px solid #604c42; box-shadow: var(--shadow-float); font-family: var(--font-mono); color: #f7eadd; }
.debug-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; background: #49362f; border-bottom: 1px solid #604c42; font-family: var(--font-body); font-size: 10px; }
.debug-head > div { display: flex; gap: 5px; }
.debug-body { max-height: 190px; overflow: auto; padding: 8px 9px; white-space: pre-wrap; word-break: break-word; font-size: 9.5px; line-height: 1.45; }
.debug-tab { position: fixed; right: 9px; bottom: 9px; z-index: 99999; padding: 4px 7px; border-radius: 8px; background: rgba(73,54,45,.78); color: #f0dfca; border: 1px solid rgba(255,245,230,.24); cursor: pointer; font-size: 8px; opacity: .42; transition: opacity .12s ease; }
.debug-tab:hover { opacity: .9; }

/* Scrollbars */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdb496; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #b69370; background-clip: padding-box; }

/* Accessibility helper */
.sr-only, h2.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 980px) {
    .board-toolbar { align-items: center; flex-direction: row; gap: 6px; }
    .board-toolbar-actions { flex-wrap: nowrap; overflow: visible; padding-bottom: 0; }
    .profile-actions .persona-context-bar > span { display: none; }
    .compact-input { width: 135px; }
    .collection-row { align-items: flex-start; }
    .collection-row-actions { max-width: 300px; }
}

@media (max-width: 768px) {
    body { overflow: hidden; }
    .app-layout { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }

    /* Top navigation strip */
    .nav-rail {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%; height: 58px;
        flex-direction: row;
        align-items: center;
        padding: 0 9px;
        gap: 5px;
        z-index: 1200;
        border-right: 0;
        border-bottom: 1px solid #382820;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    .nav-rail::-webkit-scrollbar { display: none; }
    .nav-avatar { width: 34px; height: 34px; margin: 0 2px 0 0; flex-shrink: 0; }
    .nav-collection-stack { max-height: none; flex-direction: row; gap: 4px; overflow: visible; padding: 0; }
    .nav-collection, .nav-icon, .nav-back { width: 37px; height: 37px; flex-shrink: 0; border-radius: 12px; }
    .nav-collection.active::before, .nav-icon.active::before { left: 50%; top: -11px; width: 22px; height: 4px; transform: translateX(-50%); border-radius: 0 0 5px 5px; }
    .nav-collection-glyph { font-size: 18px; }
    .nav-divider { width: 1px; height: 26px; margin: 0 2px; }
    .nav-spacer { display: none; }
    .nav-tooltip { display: none; }
    .nav-back { display: none; }
    .app-layout.chats .nav-back, .app-layout.main .nav-back { display: flex; }

    /* Sliding chat/settings panes */
    .panels { position: fixed; top: 58px; left: 0; right: 0; bottom: 0; display: block; overflow: hidden; width: 100%; }
    .panel-folders, .panel-chats, .main-area {
        position: absolute; inset: 0;
        width: 100% !important; min-width: unset; max-width: unset;
        border-right: 0; border-left: 0;
        transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .26s cubic-bezier(.4,0,.2,1);
        will-change: transform;
    }
    .panel-folders { transform: translateX(0); z-index: 3; }
    .panel-chats { transform: translateX(100%); z-index: 2; }
    .main-area { transform: translateX(100%); z-index: 1; }
    .app-layout.folders .panel-folders { transform: translateX(0); }
    .app-layout.folders .panel-chats, .app-layout.folders .main-area { transform: translateX(100%); }
    .app-layout.chats .panel-folders { transform: translateX(-100%); }
    .app-layout.chats .panel-chats { transform: translateX(0); }
    .app-layout.chats .main-area { transform: translateX(100%); }
    .app-layout.main .panel-folders, .app-layout.main .panel-chats { transform: translateX(-100%); }
    .app-layout.main .main-area { transform: translateX(0); }
    .drag-handle { display: none; }
    .folder-item { min-height: 46px; padding: 11px 13px; font-size: 14px; }
    .chat-item { padding: 10px 11px; }
    .chat-avatar { width: 45px; height: 45px; }
    .message-area { padding: 12px 11px; }
    .msg-group { max-width: 84%; }
    .msg-bubble { font-size: 14px; padding: 8px 12px; }
    .compose-bar { padding: 8px 9px max(8px, env(safe-area-inset-bottom)); }
    .compose-input { font-size: 15px; }

    /* Right panel becomes a bottom sheet */
    .panel-right {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: 100% !important; max-width: 100%; min-width: 0;
        height: min(62dvh, 390px);
        z-index: 1300;
        border-left: 0;
        border-top: 1px solid var(--border-warm);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 38px rgba(58,43,36,.2);
        padding-top: 14px;
    }
    .panel-right::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 4px; background: #bda58e; }
    .panel-right-header { min-height: 48px; padding-top: 7px; }

    /* Cork remains a direct workspace, not part of sliding panes */
    .cork-shell { padding-top: 58px; }
    .cork-shell .nav-back { display: none; }
    .board-workspace { height: calc(100dvh - 58px); }
    .board-topbar { min-height: 64px; padding: 8px 10px; }
    .board-heading-sticker { width: 38px; height: 38px; font-size: 19px; }
    .board-heading h1 { max-width: 45vw; font-size: 15px; }
    .board-meta { display: none; }
    .profile-actions .btn-secondary, .profile-actions .btn-primary { min-height: 34px; padding: 7px 10px; font-size: 11px; }
    .profile-actions .btn-secondary i, .profile-actions .btn-primary i { display: none; }
    .profile-actions > .btn-secondary[title="Board side chat"] { display: none; }
    .board-toolbar { min-height: 0; padding: 5px 8px; gap: 5px; }
    .board-toolbar-actions { width: auto; gap: 4px; }
    .board-toolbar-actions .tiny-button { min-height: 28px; padding: 5px 7px; font-size: 10.5px; }
    .board-toolbar-actions .compact-input { min-width: 125px; flex: 1; }
    .board-empty-state { padding: 28px 18px; }
    .empty-create { flex-direction: column; }

    /* Settings */
    .settings-sidebar { min-width: 0; max-width: none; width: 100% !important; }
    .settings-sidebar-head { padding: 20px 16px 10px; }
    .settings-scroll { padding: 20px 14px 34px; }
    .settings-card { padding: 14px; }
    .setting-row { align-items: flex-start; }
    .setting-edit-row { flex-direction: column; align-items: stretch; }
    .danger-card { align-items: flex-start; flex-direction: column; }

    /* Modals */
    .modal-card { top: auto; bottom: 0; transform: translateX(-50%); width: 100%; max-height: 86dvh; border-radius: 24px 24px 0 0; border-bottom: 0; }
    .collection-list { padding-left: 10px; padding-right: 10px; }
    .collection-row { flex-wrap: wrap; }
    .collection-row-actions { width: 100%; max-width: none; justify-content: flex-start; padding-left: 45px; }
    .collection-form { margin-left: 10px; margin-right: 10px; }
    .form-grid-two { grid-template-columns: 95px 1fr; }
    .floating-panel { left: 10px; right: 10px; top: 70px; width: auto; max-height: calc(100dvh - 86px); }
    .login-page { padding: 16px; }
    .login-box { padding: 28px 20px 24px; }
}

@media (max-width: 460px) {
    .nav-placeholder { display: none; }
    .board-toolbar { padding-top: 4px; padding-bottom: 4px; }
    .board-toolbar-actions .tiny-button { padding-left: 6px; padding-right: 6px; font-size: 10px; }
    .board-heading .eyebrow { display: none; }
    .board-heading-sticker { width: 34px; height: 34px; }
    .board-heading h1 { max-width: 34vw; font-size: 14px; }
    .profile-actions { gap: 4px; }
    .profile-actions .btn-secondary, .profile-actions .btn-primary { padding-left: 9px; padding-right: 9px; }
    .compact-select { width: 118px; }
    .collection-row-actions { padding-left: 0; }
    .form-grid-two { grid-template-columns: 1fr; }
    .modal-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Public home page — same warm system, with a little more playfulness */
@keyframes cork-home-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(24px,16px) scale(1.05); } }
@keyframes cork-home-wobble { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.home-page { min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--surface-canvas); color: var(--ink); }
.home-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: radial-gradient(rgba(73,54,45,.2) .6px, transparent .7px); background-size: 9px 9px; }
.home-blob { position: fixed; border-radius: 50%; filter: blur(60px); opacity: .42; z-index: 0; animation: cork-home-drift 10s ease-in-out infinite alternate; }
.home-blob-one { width: 420px; height: 420px; background: #f0c879; top: -120px; left: -90px; }
.home-blob-two { width: 330px; height: 330px; background: #e8a892; bottom: -95px; right: -55px; animation-duration: 12s; animation-direction: alternate-reverse; }
.home-blob-three { width: 260px; height: 260px; background: #9eb89b; bottom: 18%; left: 4%; animation-duration: 14s; }
.home-main { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; padding: 24px; }
.home-card { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 42px 34px 32px; text-align: center; border-radius: 30px 27px 32px 25px; background: rgba(255,250,240,.97); border: 2px solid #8d6e5d; box-shadow: 8px 9px 0 #6f5142, var(--shadow-card); }
.home-paws { font-size: 31px; letter-spacing: -.1em; animation: cork-home-wobble 3s ease-in-out infinite; }
.home-card h1 { font-family: var(--font-display); font-size: clamp(42px, 9vw, 54px); line-height: .95; letter-spacing: -.02em; color: var(--accent); font-weight: 900; }
.home-card h1 span { color: var(--accent-sage); }
.home-tagline { font-family: var(--font-display); color: var(--ink-strong); font-size: 18px; font-weight: 850; }
.home-manifesto { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 7px; margin: 3px 0; }
.home-manifesto span { padding: 4px 8px; border-radius: var(--radius-pill); background: var(--surface-soft); border: 1px solid var(--border-soft); color: var(--ink-muted); font-size: 10.5px; }
.home-copy { color: var(--ink-muted); font-size: 12.5px; line-height: 1.55; }
.home-under-construction { margin-top: 3px; padding: 6px 13px; border-radius: var(--radius-pill); background: #f0c879; border: 2px solid #6f5142; box-shadow: 3px 3px 0 #6f5142; color: #4b3326; font-family: var(--font-display); font-size: 12px; font-weight: 850; }
@media (max-width: 480px) { .home-main { padding: 16px; } .home-card { padding: 32px 19px 26px; } }


/* Board move menu — direct collection actions avoid select-state ambiguity. */
.board-move-menu {
    position: relative;
    flex-shrink: 0;
}
.board-move-menu > summary {
    list-style: none;
}
.board-move-menu > summary::-webkit-details-marker {
    display: none;
}
.board-move-menu[open] > summary {
    background: var(--surface-paper-strong);
    box-shadow: 0 2px 0 #d4b28b;
}
.board-move-popover {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1300;
    width: 210px;
    max-height: min(320px, 55vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    background: var(--surface-paper-strong);
    box-shadow: var(--shadow-float);
}
.board-move-label {
    padding: 4px 7px 7px;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.board-move-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}
.board-move-option:hover,
.board-move-option:focus-visible {
    background: var(--surface-canvas);
    outline: none;
}
.board-move-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-paper);
    }
    
    
/* Chat typing presence */
.typing-indicator {
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 15px 5px;
    background: #f7eddd;
    border-top: 1px solid var(--border-soft);
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 750;
}
.typing-dots { display: inline-flex; align-items: center; gap: 3px; height: 12px; }
.typing-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: cork-typing-dot 1.05s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: .12s; }
.typing-dots i:nth-child(3) { animation-delay: .24s; }
@keyframes cork-typing-dot {
    0%, 70%, 100% { transform: translateY(0); opacity: .45; }
    35% { transform: translateY(-3px); opacity: 1; }
}


/* Public boards and consent-first space joining */
.join-key-code { font-family: var(--font-mono); font-size: 11px; word-break: break-all; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--border-soft); }
.space-persona-picker { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.space-persona-choice { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-paper-strong); }
.linked-personas-note { margin-top:3px; color:var(--ink-faint); font-size:9.5px; }
.persona-context-bar { display:flex; align-items:center; gap:6px; padding:5px 12px; border-top:1px solid var(--border-soft); background:var(--surface-soft); font-size:10.5px; color:var(--ink-muted); }
.persona-context-bar .tiny-button { min-height:24px; padding:3px 8px; }
.card-persona-byline { position:absolute; left:8px; bottom:7px; z-index:8; display:flex; align-items:center; gap:5px; max-width:calc(100% - 16px); padding:3px 6px; border-radius:999px; background:rgba(255,250,240,.9); border:1px solid rgba(126,94,69,.18); font-size:9px; color:var(--ink-muted); cursor:pointer; }
.card-persona-byline .persona-avatar { width:18px; height:18px; font-size:9px; }
.public-board-page { width:100vw; height:100vh; display:flex; flex-direction:column; overflow:hidden; background:var(--surface-canvas); color:var(--ink); }
.public-board-header { min-height:78px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 20px; background:var(--surface-paper); border-bottom:1px solid var(--border-warm); }
.public-board-header h1 { margin:3px 0 0; font-family:var(--font-display); font-size:22px; color:var(--ink-strong); }
.public-board-header-actions { display:flex; align-items:center; gap:8px; }
.public-board-zoom-controls { display:flex; align-items:center; gap:4px; }
.public-board-zoom-controls .tiny-button { min-width:30px; height:30px; padding:4px 8px; }
.public-board-zoom-label { min-width:52px !important; font-variant-numeric:tabular-nums; }
.public-board-cork { flex:1; min-height:0; position:relative; overflow:hidden; touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; cursor:grab; background-color:var(--cork-base); background-image:radial-gradient(circle at 16% 24%,rgba(255,239,190,.12),transparent 26%),radial-gradient(circle at 75% 68%,rgba(118,66,34,.13),transparent 34%); }
.public-board-cork.is-panning { cursor:grabbing; }
.public-board-cork .cork-inner { position:absolute; top:0; left:0; min-width:1600px; min-height:1000px; transform-origin:0 0; will-change:transform; }
.public-pin { position:absolute; pointer-events:auto; box-sizing:border-box; }
.public-pin > .card-body { width:100%; height:100%; }
.public-board-footer { flex-shrink:0; padding:7px 14px; text-align:center; background:var(--surface-paper); border-top:1px solid var(--border-soft); color:var(--ink-faint); font-size:10px; }
.public-board-empty { margin:auto; width:min(460px,calc(100% - 30px)); padding:30px; text-align:center; border-radius:var(--radius-xl); background:var(--surface-paper); border:1px solid var(--border-warm); box-shadow:var(--shadow-card); }
.public-board-empty h1 { margin:8px 0; font-family:var(--font-display); }
.public-board-empty p { margin-bottom:16px; color:var(--ink-muted); }
@media(max-width:768px){ .public-board-header{padding:10px 12px}.public-board-header h1{font-size:18px}.public-board-header-actions{gap:5px}.public-board-zoom-controls .tiny-button{min-width:28px;padding:3px 6px}.public-board-zoom-label{min-width:46px!important}.public-board-cork .cork-inner{min-width:1100px;min-height:900px} }


/* Space access panels */
.access-member-list{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.access-member-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-warm)}
.access-member-row:last-child{border-bottom:0}
.access-member-main{flex:1;min-width:0}
.access-member-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.access-role-stack{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.member-actions-menu{position:relative;flex:0 0 auto}
.member-actions-menu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--border-warm);border-radius:999px;background:var(--surface-soft);cursor:pointer;font-weight:800;font-size:18px;line-height:1;color:var(--ink)}
.member-actions-menu>summary::-webkit-details-marker{display:none}
.member-actions-menu[open]>summary{background:var(--surface-note)}
.member-actions-popover{position:absolute;right:0;top:calc(100% + 5px);z-index:25;min-width:164px;padding:5px;background:var(--surface-paper);border:1px solid var(--border-warm);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.member-actions-popover .member-menu-item{display:block;width:100%;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}
.member-actions-popover .member-menu-item:hover{background:var(--surface-soft)}
.member-actions-popover .member-menu-item.danger{color:var(--accent-red)}
.access-sheet-handle{display:none}
.join-key-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.join-key-row{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-paper)}
.join-key-row .join-key-code{display:inline-block;padding:4px 7px}
@media(max-width:720px){
  .board-access-panel{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;max-width:none!important;max-height:78vh!important;overflow-y:auto!important;border-radius:20px 20px 0 0!important;padding-top:10px!important;box-sizing:border-box}
  .access-sheet-handle{display:block;width:42px;height:4px;border-radius:999px;background:var(--border-strong);margin:0 auto 10px}
  .access-member-row{align-items:center}
  .join-key-row{align-items:flex-start;flex-direction:column}
}

/* Card Box mini previews */
.cardbox-preview-row{padding:8px 0;border-bottom:1px solid var(--border-soft)}
.cardbox-preview-row:last-child{border-bottom:0}
.cardbox-preview-wrap{flex:1;min-width:0;max-width:190px}
.cardbox-preview-card{width:100%;max-height:150px;overflow:hidden;border-radius:10px;background:var(--surface-paper-strong);border:1px solid var(--border-warm);box-shadow:var(--shadow-hairline);font-size:10.5px}
.cardbox-preview-card .card-header{min-height:27px;padding:4px 7px}
.cardbox-preview-card .card-content{padding:6px 7px}
.cardbox-preview-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}

/* Extended Cork card family */
.cork-addpin-more{margin-top:4px;padding-top:10px;border-top:1px solid var(--border-soft)}
.cork-addpin-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:2px}
.cork-addpin-choice{min-height:52px;padding:6px 4px;border-radius:9px;background:var(--surface-soft);border:1px solid var(--border-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--ink-muted)}
.cork-addpin-choice i{font-size:18px;line-height:1}
.cork-addpin-icon{font-size:17px!important;line-height:1;font-weight:700!important;color:var(--ink)!important;min-height:18px;display:flex;align-items:center;justify-content:center}
.cork-addpin-choice span:not(.cork-addpin-icon){font-size:9px;font-weight:800;color:var(--ink-muted);white-space:nowrap}
.cork-file-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px;border:1.5px dashed var(--border-warm);border-radius:12px;background:var(--surface-soft);text-align:center;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}
.cork-file-dropzone.compact{padding:12px}
.cork-file-dropzone.is-dragover{background:var(--surface-note);border-color:var(--accent-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-strong) 15%,transparent)}
.cork-file-drop-label{font-size:12px;font-weight:800;color:var(--ink)}
.cork-file-drop-hint{font-size:10.5px;color:var(--ink-muted)}
.cork-addpin-form{display:flex;flex-direction:column;gap:9px}.cork-addpin-form textarea{min-height:90px;border-radius:12px}.cork-code-input{min-height:180px!important;font-family:var(--font-mono)}.cork-document-input{min-height:220px!important}.cork-picker-row{padding:8px 10px;border-radius:10px;background:var(--surface-soft);border:1px solid var(--border-soft);cursor:pointer;font-size:12px;font-weight:800}.cork-picker-row:hover{background:#fff3df}.cork-upload-pending{padding:8px 10px;border-radius:10px;background:var(--surface-note);font-size:10.5px;color:var(--ink-muted)}
.cork-card-placeholder{margin-top:7px;padding:8px;border-radius:9px;background:var(--surface-soft);color:var(--ink-muted);font-size:10px}.cork-card-link{display:inline-flex;margin-top:8px;font-weight:800;color:var(--accent-strong)}
.cork-checklist{display:flex;flex-direction:column;gap:3px}.cork-check-item{display:flex;gap:7px;align-items:flex-start;padding:4px 3px;border-radius:7px;cursor:pointer}.cork-check-item:hover{background:var(--surface-soft)}.cork-check-item .done{text-decoration:line-through;color:var(--ink-faint)}
.cork-code-card{margin:0;max-height:100%;overflow:auto;padding:10px;background:#2f2926;color:#f7eadd;font-family:var(--font-mono);font-size:10px;white-space:pre-wrap}.cork-document-card{white-space:pre-wrap;overflow:auto;max-height:100%}
.pin-card[data-height="0"] .cork-long-text-card,
.pin-card[data-height="0"] .cork-document-card,
.envelope-pin[data-height="0"] .cork-long-text-card,
.envelope-pin[data-height="0"] .cork-document-card{
    max-height:min(55vh,520px);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}
.cork-long-text-card:focus,
.cork-document-card:focus{
    outline:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
    outline-offset:-2px;
}.cork-quote-card blockquote{font-family:var(--font-display);font-size:15px;line-height:1.45}.quote-source{margin-top:8px;color:var(--ink-muted);font-size:10px}.envelope-glyph{font-size:42px;text-align:center;margin:3px 0 8px}.cork-envelope-card{background:#fff3d8}
.cork-envelope-overlay{position:fixed;inset:0;z-index:2300;display:flex;align-items:center;justify-content:center;padding:16px;isolation:isolate;overscroll-behavior:contain}
.cork-envelope-scrim{position:absolute;inset:0;background:rgba(58,43,36,.5);backdrop-filter:blur(4px);z-index:0}
.cork-envelope-modal{position:relative;left:auto;top:auto;transform:none;z-index:1;width:min(1120px,calc(100vw - 32px));height:min(88dvh,860px);max-height:none;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius-xl);background:var(--surface-paper-strong);border:1px solid var(--border-warm);box-shadow:var(--shadow-float)}
.cork-envelope-header{flex:0 0 auto;position:relative;z-index:4;background:var(--surface-paper-strong)}
.cork-envelope-header-actions{display:flex;align-items:center;gap:8px}
.cork-envelope-zoom{display:flex;align-items:center;gap:3px;padding:3px;border-radius:10px;background:var(--surface-soft);border:1px solid var(--border-soft)}
.cork-envelope-zoom button{min-width:30px;height:28px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.cork-envelope-zoom button:hover{background:var(--surface-paper)}
.cork-envelope-board{position:relative;flex:1;min-height:0;overflow:hidden;background-color:var(--cork-base);background-image:radial-gradient(circle at 22px 22px,rgba(255,239,190,.14) 1px,transparent 1.4px);background-size:28px 28px;cursor:grab;touch-action:none;overscroll-behavior:contain}
.cork-envelope-board.is-panning{cursor:grabbing}
.cork-envelope-inner{position:absolute;left:0;top:0;width:2600px;height:1900px;transform-origin:0 0;will-change:transform}
.cork-envelope-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,72vw);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--ink-muted);pointer-events:none}
.cork-envelope-empty strong{font-family:var(--font-display);font-size:18px;color:var(--ink)}
.envelope-pin{position:absolute;min-width:120px;filter:drop-shadow(0 3px 5px rgba(72,43,25,.18));transform-origin:0 0;user-select:none}
.envelope-pin>.card-body{width:100%;height:100%;box-sizing:border-box}
.envelope-pin .card-header{cursor:grab;touch-action:none}
.envelope-pin .card-header:active{cursor:grabbing}
.envelope-card-actions{position:absolute;right:5px;bottom:5px;z-index:20;opacity:0;transition:opacity .12s ease}
.envelope-pin:hover .envelope-card-actions,.envelope-pin:focus-within .envelope-card-actions{opacity:1}
.cork-envelope-box{position:relative;z-index:4;flex:0 0 auto;max-height:190px;overflow:auto;padding:12px 15px;background:var(--surface-soft);border-top:1px solid var(--border-warm)}
.cork-envelope-box-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.cork-envelope-box-row{display:flex;align-items:flex-start;gap:7px}
.cork-envelope-box-row .cardbox-preview-card{flex:1;min-width:0}
@media(max-width:700px){.cork-addpin-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cork-envelope-overlay{padding:6px}.cork-envelope-modal{width:calc(100vw - 12px);height:94dvh}.cork-envelope-header{padding:12px}.cork-envelope-header p{display:none}.cork-envelope-box{max-height:160px}.cork-envelope-inner{width:2200px;height:1700px}}


/* Card interaction model: card contents are interactive; only the top bar drags. */
.pin-card {
    cursor: default;
    touch-action: auto;
}
.pin-card:active {
    cursor: default;
}
.pin-card .card-header {
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.pin-card .card-header:active {
    cursor: grabbing;
}
.pin-card .resize-handle {
    touch-action: none;
}


/* Envelope board interaction + dynamic overlay layering. */
.cork-envelope-overlay{
    z-index:var(--cork-overlay-z,2300);
    pointer-events:auto;
    overscroll-behavior:none;
}
.cork-envelope-scrim{
    pointer-events:auto;
}
.cork-envelope-modal{
    isolation:isolate;
}
.cork-envelope-board{
    overscroll-behavior:none;
    touch-action:none;
}
.cork-envelope-inner{
    touch-action:none;
}
.envelope-pin{
    cursor:default;
    touch-action:auto;
}
.envelope-pin .card-header{
    cursor:grab;
    touch-action:none;
    user-select:none;
}
.envelope-pin .card-header:active{
    cursor:grabbing;
}
.envelope-pin .resize-handle{
    display:flex;
    pointer-events:auto;
    touch-action:none;
    z-index:25;
}
.envelope-pin .pin-menu{
    display:block;
    z-index:35;
}
.envelope-pin .pin-menu-panel{
    z-index:36;
}
.envelope-pin-menu[open]{
    z-index:40;
}
.cork-envelope-board .pin-menu > summary,
.cork-envelope-board .pin-menu-panel,
.cork-envelope-board .resize-handle{
    pointer-events:auto;
}
[data-cork-overlay]{
    z-index:var(--cork-overlay-z) !important;
}


/* Envelope workspace menu + per-envelope drawer. */
.cork-envelope-main-menu{
    position:relative;
    z-index:12;
}
.cork-envelope-main-menu>summary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}
.cork-envelope-main-menu>summary::-webkit-details-marker{display:none}
.cork-envelope-main-menu-panel{
    position:absolute;
    right:0;
    top:calc(100% + 7px);
    width:min(330px,80vw);
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:7px;
    border:1px solid var(--border-warm);
    border-radius:13px;
    background:var(--surface-paper-strong);
    box-shadow:var(--shadow-float);
    z-index:80;
}
.cork-envelope-menu-action{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 11px;
    border-radius:9px;
    cursor:pointer;
    color:var(--ink);
}
.cork-envelope-menu-action:hover{background:var(--surface-soft)}
.cork-envelope-menu-action span{
    color:var(--ink-muted);
    font-size:11px;
    line-height:1.35;
}
.cork-envelope-sidepanel{
    position:absolute;
    right:12px;
    top:76px;
    bottom:12px;
    z-index:70;
    width:min(390px,calc(100% - 24px));
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:auto;
    padding:14px;
    border:1px solid var(--border-warm);
    border-radius:16px;
    background:var(--surface-paper-strong);
    box-shadow:var(--shadow-float);
}
.cork-envelope-sidepanel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.cork-envelope-sidepanel-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.cork-envelope-sidepanel-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
}
.cork-envelope-sidepanel-empty{
    margin:auto 0;
    padding:28px 12px;
    text-align:center;
    color:var(--ink-muted);
}
.envelope-drawer-preview{min-width:0}
.drawer-code-preview{
    max-height:72px;
    overflow:hidden;
    white-space:pre-wrap;
    font:10px/1.35 var(--font-mono,monospace);
}
.envelope-lock-chip{
    position:absolute;
    left:8px;
    top:8px;
    z-index:60;
    pointer-events:none;
}

/* Universal card editor. */
.cork-card-edit-overlay{
    position:fixed;
    inset:0;
    z-index:var(--cork-overlay-z,2500);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    isolation:isolate;
}
.cork-card-edit-scrim{
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(58,43,36,.52);
    backdrop-filter:blur(5px);
}
.cork-card-edit-modal{
    position:relative;
    z-index:1;
    width:min(620px,calc(100vw - 28px));
    max-height:min(86dvh,820px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.cork-card-edit-body{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:0;
    overflow:auto;
    padding:4px 2px 14px;
}
.cork-card-edit-actions{
    flex:0 0 auto;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:12px;
    border-top:1px solid var(--border-soft);
}
.cork-edit-large{min-height:130px;resize:vertical}
.cork-edit-code{
    min-height:220px;
    resize:vertical;
    font-family:var(--font-mono,monospace);
}
.cork-edit-document{min-height:260px;resize:vertical}
.cork-edit-picker{
    max-height:180px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:6px;
    border:1px solid var(--border-soft);
    border-radius:10px;
    background:var(--surface-soft);
}
.cork-addpin-overlay{
    z-index:var(--cork-overlay-z,2400)!important;
}
.privacy-callout{
    padding:12px;
    border:1px solid var(--border-warm);
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--ink-muted);
    font-size:12px;
    line-height:1.45;
}
@media(max-width:700px){
    .cork-envelope-sidepanel{
        top:68px;
        right:6px;
        bottom:6px;
        width:calc(100% - 12px);
    }
    .cork-envelope-header-actions{
        gap:5px;
    }
    .cork-envelope-main-menu>summary{
        padding:7px 8px;
        font-size:11px;
    }
    .cork-card-edit-overlay{padding:6px}
    .cork-card-edit-modal{
        width:calc(100vw - 12px);
        max-height:94dvh;
    }
}


/* Card duplication picker + Settings Card Box management. */
.cork-duplicate-overlay{
    position:fixed;
    inset:0;
    z-index:var(--cork-overlay-z,2600);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    isolation:isolate;
}
.cork-duplicate-scrim{
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(58,43,36,.52);
    backdrop-filter:blur(5px);
}
.cork-duplicate-modal{
    position:relative;
    z-index:1;
    width:min(520px,calc(100vw - 28px));
    max-height:min(82dvh,720px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border-warm);
    border-radius:var(--radius-xl);
    background:var(--surface-paper-strong);
    box-shadow:var(--shadow-float);
}
.cork-duplicate-body{
    min-height:0;
    overflow:auto;
    padding:14px;
}
.cork-duplicate-board-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}
.cork-duplicate-board{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    border:1px solid var(--border-soft);
    border-radius:11px;
    background:var(--surface-soft);
    cursor:pointer;
}
.cork-duplicate-board:hover{background:var(--surface-note)}
.cork-duplicate-board-icon{font-size:17px}
.cork-duplicate-board-copy{display:flex;flex-direction:column;min-width:0}
.cork-duplicate-board-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cork-duplicate-board-copy small{color:var(--ink-muted);font-size:10px}
.settings-cardbox-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:12px;
}
.settings-cardbox-item{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}
.settings-cardbox-preview{min-width:0}
.settings-cardbox-preview .cardbox-preview-card{
    max-width:none;
    max-height:220px;
}
.settings-cardbox-actions{
    display:flex;
    flex-direction:column;
    gap:7px;
    align-items:flex-start;
}
.settings-cardbox-confirm{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
@media(max-width:700px){
    .cork-duplicate-overlay{padding:6px}
    .cork-duplicate-modal{width:calc(100vw - 12px);max-height:92dvh}
    .settings-cardbox-grid{grid-template-columns:1fr}
}


/* Persistent media player controlled from the global navigation rail. */
.cork-player-nav-toggle{
    appearance:none;
    border:0;
    padding:0;
    background:transparent;
    font:inherit;
}
.cork-player-nav-toggle.is-open{
    background:var(--nav-active);
    color:#fff9ed;
    border-radius:13px 13px 16px 11px;
    box-shadow:2px 3px 0 #2d201a;
}
.cork-player-nav-toggle.is-open::before{
    content:"";
    position:absolute;
    left:-12px;
    width:5px;
    height:23px;
    border-radius:0 5px 5px 0;
    background:#f1cf7d;
}
.cork-player-nav-status{
    position:absolute;
    right:5px;
    bottom:5px;
    width:7px;
    height:7px;
    border-radius:999px;
    background:transparent;
    box-shadow:0 0 0 2px var(--nav-bg);
}
.cork-player-nav-status[data-active="true"]{
    background:#7ddc94;
}
.cork-persistent-board-toggle.is-active{
    background:var(--surface-note);
    border-color:var(--accent-strong);
    color:var(--accent-strong);
}
.cork-persistent-media-root{
    position:fixed;
    left:76px;
    bottom:16px;
    z-index:1000;
    width:min(390px,calc(100vw - 92px));
    opacity:0;
    transform:translateY(8px) scale(.985);
    pointer-events:none;
    transition:opacity .12s ease,transform .12s ease;
}
.cork-persistent-media-root.is-open{
    opacity:1;
    transform:translateY(0) scale(1);
}
.cork-persistent-media-shell{
    pointer-events:none;
    overflow:hidden;
    border:1px solid var(--border-warm);
    border-radius:16px;
    background:var(--surface-paper-strong);
    box-shadow:var(--shadow-float);
}
.cork-persistent-media-root.is-open .cork-persistent-media-shell{
    pointer-events:auto;
}
.cork-persistent-media-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 10px;
    border-bottom:1px solid var(--border-soft);
    background:var(--surface-paper);
}
.cork-persistent-media-copy{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.cork-persistent-media-kicker{
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
}
.cork-persistent-media-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}
.cork-persistent-media-hide{
    width:28px;
    height:28px;
    flex:0 0 auto;
    border:1px solid var(--border-soft);
    border-radius:999px;
    background:var(--surface-soft);
    color:var(--ink);
    cursor:pointer;
}
.cork-persistent-media-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    background:#111;
}
.cork-persistent-media-root.is-audio .cork-persistent-media-slot{
    padding:8px;
    background:var(--surface-soft);
}
.cork-persistent-media-element{
    display:block;
    width:100%;
    max-width:100%;
}
.cork-persistent-media-root.is-video .cork-persistent-media-element{
    max-height:min(42vh,300px);
    object-fit:contain;
    background:#111;
}
.cork-persistent-media-empty{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    padding:18px 14px;
    text-align:center;
    background:var(--surface-soft);
    color:var(--ink-muted);
    font-size:11px;
}
.cork-persistent-media-empty strong{
    color:var(--ink);
    font-size:12px;
}
.cork-persistent-source-active{
    outline:2px solid var(--accent-strong);
    outline-offset:2px;
}
@media(max-width:700px){
    .cork-persistent-media-root{
        left:8px;
        right:8px;
        bottom:8px;
        width:auto;
    }
    .cork-persistent-media-root.is-video .cork-persistent-media-element{
        max-height:34vh;
    }
}


/* Sticker packs + channel sticker pane */
.header-btn.active{
    background:var(--surface-soft);
    color:var(--accent-strong);
}
.sticker-panel-pane{
    width:290px;
    min-width:250px;
    max-width:360px;
    border-left:1px solid var(--border-warm);
    background:#f6ead8;
}
.sticker-panel-pane .sticker-scroll{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.sticker-create-pack{
    border:1px solid var(--border-soft);
    border-radius:12px;
    background:rgba(255,250,240,.66);
    padding:8px;
}
.sticker-create-pack>summary{
    list-style:none;
    cursor:pointer;
}
.sticker-create-pack>summary::-webkit-details-marker{display:none}
.sticker-create-pack-body{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:9px;
}
.sticker-setting-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    color:var(--ink-muted);
}
.sticker-pack-card{
    display:flex;
    flex-direction:column;
    gap:9px;
    padding:9px;
    margin-bottom:9px;
    border:1px solid var(--border-soft);
    border-radius:13px;
    background:rgba(255,250,240,.7);
}
.sticker-pack-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}
.sticker-pack-head>div:first-child{
    min-width:0;
}
.sticker-pack-head strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}
.sticker-pack-badges{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    margin-top:4px;
}
.sticker-pack-owner-actions{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.sticker-thumb-wrap{
    position:relative;
}
.sticker-thumb-wrap .sticker-thumb{
    width:100%;
}
.sticker-mini-action{
    position:absolute;
    right:3px;
    top:3px;
    z-index:2;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,250,240,.94);
    border:1px solid var(--border-soft);
    color:var(--accent-strong);
    cursor:pointer;
    font-size:11px;
}
.sticker-thumb{
    position:relative;
}
.sticker-emoji-badge{
    position:absolute;
    left:4px;
    bottom:4px;
    max-width:calc(100% - 8px);
    padding:2px 4px;
    border-radius:999px;
    background:rgba(255,250,240,.92);
    border:1px solid var(--border-soft);
    font-size:10px;
    line-height:1;
}
.sticker-add-button{
    align-self:flex-start;
}
.sticker-add-form{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:4px;
}
.sticker-add-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}
.sticker-emoji-input{
    font-size:15px;
}
.chat-sticker-message{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:180px;
    min-height:56px;
    padding:4px;
    border-radius:12px;
    cursor:pointer;
}
.chat-sticker-message:hover{
    background:var(--surface-soft);
}
.chat-sticker-message img{
    display:block;
    max-width:180px;
    max-height:180px;
    object-fit:contain;
}
.chat-sticker-message.legacy{
    cursor:default;
}
.chat-sticker-emoji{
    position:absolute;
    right:2px;
    bottom:2px;
    padding:2px 4px;
    border-radius:999px;
    background:rgba(255,250,240,.94);
    border:1px solid var(--border-soft);
    font-size:10px;
}
.sticker-pack-preview-modal{
    width:min(620px,calc(100vw - 28px));
}
.sticker-preview-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px 18px 20px;
}
.sticker-preview-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.sticker-preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:10px;
}
.sticker-preview-item{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
    padding:8px;
    border:1px solid var(--border-soft);
    border-radius:13px;
    background:var(--surface-soft);
}
.sticker-preview-image{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
    background:var(--surface-paper-strong);
}
.sticker-preview-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.sticker-preview-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.sticker-preview-meta strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}
@media(max-width:768px){
    .sticker-panel-pane{
        position:fixed;
        right:0;
        top:64px;
        bottom:0;
        z-index:1300;
        width:min(88vw,340px);
        max-width:none;
        min-width:0;
        box-shadow:var(--shadow-float);
    }
    .sticker-preview-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.cork-media-sync-autoplay-blocked{
    outline:2px dashed var(--accent);
    outline-offset:2px;
}

.storage-limit-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.storage-limit-grid label{
    display:grid;
    grid-template-columns:minmax(0,1fr) 84px auto;
    align-items:center;
    gap:7px;
    font-size:11px;
    color:var(--ink-muted);
}
.storage-limit-grid small{font-size:10px;color:var(--ink-faint)}
@media(max-width:700px){
    .storage-limit-grid{grid-template-columns:1fr}
}

.storage-file-list{
    display:flex;
    flex-direction:column;
    margin-top:10px;
    border:1px solid var(--border-soft);
    border-radius:12px;
    overflow:hidden;
}
.storage-file-row{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) minmax(72px,.65fr) minmax(120px,1fr);
    gap:10px;
    align-items:center;
    min-width:0;
    padding:9px 10px;
    border-top:1px solid var(--border-soft);
    font-size:10.5px;
}
.storage-file-row:first-child{border-top:0}
.storage-file-row strong,
.storage-file-row span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.storage-file-row strong{color:var(--ink)}
.storage-file-row span{color:var(--ink-muted)}
.storage-file-header{
    background:var(--surface-soft);
    font-size:9.5px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.storage-file-type{font-family:var(--font-mono,monospace);font-size:9.5px}
@media(max-width:700px){
    .storage-file-header{display:none}
    .storage-file-row{
        grid-template-columns:minmax(0,1fr) auto;
        gap:4px 10px;
    }
    .storage-file-row strong{grid-column:1}
    .storage-file-type{grid-column:1}
    .storage-file-row>span:nth-child(3){grid-column:2;grid-row:1}
    .storage-file-row>span:nth-child(4){grid-column:2;grid-row:2}
}


/* Empty existing board prompt: treat it like a small card at world coordinate 10,10. */
.board-first-pin-card {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    width: 340px;
    max-width: calc(100vw - 120px);
    padding: 18px;
    border-radius: 18px;
    background: var(--surface-paper-strong);
    border: 1px solid var(--border-warm);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    text-align: left;
}
.board-first-pin-card .empty-sticker {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 15px 16px 14px 17px;
    font-size: 21px;
}
.board-first-pin-card h2 {
    font-family: var(--font-display);
    color: var(--ink-strong);
    font-size: 19px;
}
.board-first-pin-card > p {
    margin-top: 6px;
    color: var(--ink-muted);
    line-height: 1.45;
}
.board-first-pin-card .board-first-pin-action {
    margin-top: 12px;
}
.board-first-pin-card .panel-note {
    margin-top: 10px;
    font-size: 10.5px;
}
@media (max-width: 768px) {
    .board-first-pin-card {
        width: 300px;
        max-width: calc(100vw - 86px);
        padding: 15px;
    }
}


/* Cork board toolbar menus */
.cork-toolbar-menu {
    position: relative;
    flex-shrink: 0;
}
.cork-toolbar-menu > summary {
    list-style: none;
}
.cork-toolbar-menu > summary::-webkit-details-marker {
    display: none;
}
.cork-toolbar-menu[open] > summary {
    background: var(--surface-paper-strong);
    box-shadow: 0 2px 0 #d4b28b;
}
.cork-toolbar-popover {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1400;
    width: 230px;
    max-height: min(420px, 68vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-warm);
    border-radius: 14px;
    background: var(--surface-paper-strong);
    box-shadow: var(--shadow-float);
}

.cork-toolbar-menu.cork-menu-flip-y > .cork-toolbar-popover,
.board-move-menu.cork-menu-flip-y > .board-move-popover,
.member-actions-menu.cork-menu-flip-y > .member-actions-popover {
    top: auto;
    bottom: calc(100% + 7px);
}
.cork-toolbar-menu.cork-menu-flip-x > .cork-toolbar-popover,
.board-move-menu.cork-menu-flip-x > .board-move-popover,
.member-actions-menu.cork-menu-flip-x > .member-actions-popover {
    right: auto;
    left: 0;
}

.cork-toolbar-create {
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cork-toolbar-create .compact-input {
    width: 100%;
}
.cork-toolbar-create .btn-primary {
    width: 100%;
}
.cork-toolbar-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
}
.cork-toolbar-menu-item:hover,
.cork-toolbar-menu-item:focus-visible {
    background: var(--surface-soft);
    outline: none;
}
.cork-toolbar-menu-item > span:first-child {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    color: var(--ink-muted);
}
.cork-toolbar-menu-item.danger {
    color: var(--accent-red);
}
.cork-toolbar-menu-divider {
    height: 1px;
    margin: 6px 2px;
    background: var(--border-soft);
}
.board-toolbar-inline-edit {
    display: flex;
    align-items: center;
    gap: 5px;
}
@media (max-width: 768px) {
    .cork-toolbar-popover {
        position: fixed;
        top: auto;
        right: 10px;
        left: 10px;
        bottom: 12px;
        width: auto;
        max-height: 58dvh;
    }
    .board-toolbar-inline-edit {
        width: 100%;
        flex-wrap: wrap;
    }
}


/* Cork search */
.cork-search-scrim {
    position: fixed;
    inset: 0;
    z-index: 1840;
    background: rgba(58,43,36,.24);
    backdrop-filter: blur(2px);
}
.cork-search-panel {
    position: fixed;
    z-index: 1850;
    top: 88px;
    right: 18px;
    width: min(520px, calc(100vw - 36px));
    max-height: min(720px, calc(100dvh - 112px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border-warm);
    border-radius: 20px;
    background: var(--surface-paper-strong);
    box-shadow: var(--shadow-float);
    color: var(--ink);
}
.cork-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cork-search-head h2 {
    margin-top: 2px;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--ink-strong);
}
.cork-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cork-search-form .form-input {
    flex: 1;
}
.cork-search-status {
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 800;
}
.cork-search-results {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cork-search-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 13px;
    background: var(--surface-paper);
    cursor: pointer;
    text-align: left;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.cork-search-result:hover {
    background: #fff3df;
    border-color: var(--border-warm);
    transform: translateY(-1px);
}
.cork-search-result-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--surface-soft);
    font-size: 15px;
}
.cork-search-result-copy {
    min-width: 0;
    flex: 1;
}
.cork-search-result-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--ink);
    font-weight: 850;
    line-height: 1.25;
}
.cork-search-result-meta {
    margin-top: 3px;
    color: var(--ink-faint);
    font-size: 10px;
    font-weight: 800;
    text-transform: lowercase;
}
.cork-search-result-snippet {
    margin-top: 4px;
    color: var(--ink-muted);
    font-size: 11.5px;
    line-height: 1.4;
    word-break: break-word;
}
.cork-search-result-arrow {
    margin-left: auto;
    padding-top: 4px;
    color: var(--ink-faint);
    font-weight: 900;
}
.pin-card.cork-search-focused {
    outline: 4px solid rgba(169,80,59,.42);
    outline-offset: 5px;
    animation: cork-search-focus-pulse 1.2s ease-out 1;
}
@keyframes cork-search-focus-pulse {
    0% { outline-color: rgba(169,80,59,.92); box-shadow: 0 0 0 9px rgba(169,80,59,.16), var(--shadow-card); }
    100% { outline-color: rgba(169,80,59,.42); box-shadow: var(--shadow-card); }
}
@media (max-width: 700px) {
    .cork-search-panel {
        top: 70px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100dvh - 82px);
        padding: 14px;
    }
    .cork-search-form {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Collaborative drawing cards */
.cork-drawing-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cork-drawing-preview-area {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cork-drawing-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background:
        linear-gradient(rgba(126,94,69,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126,94,69,.05) 1px, transparent 1px),
        #fffdf8;
    background-size: 18px 18px;
}
.cork-drawing-preview-bg,
.cork-drawing-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cork-drawing-preview-bg {
    object-fit: contain;
    background: #fff;
}
.cork-drawing-preview {
    z-index: 2;
    pointer-events: none;
}
.cork-drawing-open-button {
    width: 100%;
    justify-content: center;
}
.cork-drawing-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--cork-overlay-z, 2700);
    isolation: isolate;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 14px;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,244,216,.18), transparent 28%),
        rgba(54,39,31,.78);
    backdrop-filter: blur(5px);
}
.cork-drawing-frame {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #b9956c;
    border-radius: 24px 22px 26px 21px;
    background: #f7ead5;
    box-shadow:
        0 24px 70px rgba(37,27,22,.32),
        inset 0 0 0 5px rgba(255,250,240,.45);
}
.cork-drawing-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #d4b997;
    background: rgba(255,248,237,.9);
}
.cork-drawing-title {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.cork-drawing-title .eyebrow {
    width: 100%;
}
.cork-drawing-title h2 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--ink-strong);
    font-size: 20px;
    line-height: 1.1;
}
.cork-drawing-presence {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    max-width: min(68vw, 760px);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}
.cork-drawing-presence > .status-chip,
.cork-drawing-active-personas,
.cork-drawing-active-persona {
    flex: 0 0 auto;
}
.cork-drawing-active-personas {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
}
.cork-drawing-filter-personas {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    white-space: nowrap;
}
.cork-drawing-filter-personas[hidden] {
    display: none;
}
.cork-drawing-filter-persona {
    flex: 0 0 auto;
}
.cork-drawing-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.cork-drawing-error {
    flex: 0 0 auto;
    margin: 8px 14px 0;
}
.cork-drawing-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    overflow-x: auto;
    border-bottom: 1px solid #d4b997;
    background: #efe0c8;
}
.cork-drawing-tool-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
    border-right: 1px solid rgba(126,94,69,.18);
    white-space: nowrap;
}
.cork-drawing-tool-group:last-child {
    border-right: 0;
    padding-right: 0;
}
.cork-drawing-tool-label {
    margin-right: 2px;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cork-drawing-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid rgba(74,53,42,.2);
    border-radius: 50%;
    background: var(--swatch);
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.cork-drawing-tool-button.is-active {
    background: #fff8ed;
    border-color: #8c654c;
    color: var(--ink-strong);
    box-shadow: 0 0 0 1px rgba(140,101,76,.18);
}
.cork-drawing-swatch-light {
    border-color: #9d9187;
    box-shadow: inset 0 0 0 1px rgba(80,66,58,.16);
}
.cork-drawing-done.is-lease-warning {
    animation: cork-drawing-lease-pulse 2.4s ease-in-out infinite;
}
@keyframes cork-drawing-lease-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}
.cork-drawing-clear-confirm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 7px;
    border-radius: 10px;
    background: #fff1eb;
    border: 1px solid #ddb3a7;
    color: #873c31;
    font-size: 10px;
    font-weight: 800;
}
.cork-drawing-swatch.is-active {
    border-color: #4a352a;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.5),
        0 0 0 2px #f7ead5,
        0 0 0 4px #8c654c;
}
.cork-drawing-background-tools {
    margin-left: auto;
}
.cork-drawing-stage {
    position: relative;
    min-height: 0;
    flex: 1 1 auto;
    margin: 12px;
    overflow: hidden;
    display: block;
    border: 1px solid #bfa789;
    border-radius: 16px 14px 18px 13px;
    background: #efe7da;
    box-shadow:
        0 8px 24px rgba(73,54,43,.1),
        inset 0 0 0 5px rgba(255,255,255,.55);
}
.cork-drawing-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #fffdf8;
}
.cork-drawing-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    touch-action: none;
    cursor: crosshair;
}
[data-cork-drawing-tool-active="pan"] .cork-drawing-canvas {
    cursor: grab;
}
[data-cork-drawing-tool-active="pan"] .cork-drawing-canvas:active {
    cursor: grabbing;
}
[data-cork-drawing-tool-active="select"] .cork-drawing-canvas {
    cursor: default;
}
.cork-drawing-zoom-label {
    min-width: 38px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--ink-muted);
}
.cork-drawing-local-notice {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-muted);
    font-size: 10px;
    font-weight: 750;
}
[data-cork-drawing-edit-owned="false"] .cork-drawing-canvas {
    cursor: default;
}
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar button {
    opacity: .58;
}
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-tool="pan"],
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-filter-mode],
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-filter-persona-key],
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-zoom-in],
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-zoom-out],
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-zoom-fit] {
    opacity: 1;
}
[data-cork-drawing-edit-owned="false"] .cork-drawing-toolbar [data-cork-drawing-background-choose] {
    pointer-events: none;
}
.cork-drawing-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 15px 10px;
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 700;
}
@media (max-width: 760px) {
    .cork-drawing-overlay {
        padding: 5px;
    }
    .cork-drawing-frame {
        border-radius: 15px;
    }
    .cork-drawing-header {
        align-items: flex-start;
        padding: 10px;
    }
    .cork-drawing-title h2 {
        font-size: 17px;
    }
    .cork-drawing-toolbar {
        padding: 7px 9px;
    }
    .cork-drawing-stage {
        margin: 7px;
    }
    .cork-drawing-footer {
        display: none;
    }
}


.landing-home-shell{width:100vw;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:#f8efe1}.landing-home-topbar{height:58px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff8ed;border-bottom:1px solid #d6bea1;position:relative;z-index:20}.landing-home-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);color:var(--ink-strong)}.landing-home-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#f3d8b8;border:1px solid #e4bd94;box-shadow:2px 3px 0 #d1a97e;font-weight:900}.landing-home-link{padding:7px 11px;border:1px solid var(--border-warm);border-radius:9px;background:#fffaf1;color:var(--ink);font-size:11px;font-weight:800;cursor:pointer}.landing-home-board{flex:1;min-height:0;position:relative;overflow:auto;touch-action:none;background-color:var(--cork-base);background-image:radial-gradient(circle at 16% 24%,rgba(255,239,190,.12),transparent 26%),radial-gradient(circle at 75% 68%,rgba(118,66,34,.13),transparent 34%),linear-gradient(103deg,transparent 0 48%,rgba(91,48,25,.035) 49%,transparent 50%),linear-gradient(8deg,transparent 0 48%,rgba(255,248,220,.04) 49%,transparent 50%);box-shadow:inset 0 0 80px rgba(96,51,27,.12)}.landing-home-texture{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(92deg,rgba(77,42,24,.035) 0 1px,transparent 1px 7px),repeating-linear-gradient(181deg,rgba(255,238,201,.035) 0 1px,transparent 1px 9px)}.landing-home-card{position:absolute;cursor:grab;user-select:none;touch-action:none;transform-origin:0 0;filter:drop-shadow(0 3px 5px rgba(72,43,25,.18));min-width:120px}.landing-home-card.is-moving{cursor:grabbing;z-index:999!important}.landing-home-card-body{background:var(--surface-paper-strong);border-radius:10px 10px 12px 9px;border:1px solid rgba(105,75,53,.18);overflow:hidden;font-size:11px;box-shadow:1px 2px 0 rgba(255,255,255,.45) inset;min-height:90px}.landing-home-card.has-explicit-height .landing-home-card-body{height:100%;min-height:0}.landing-home-card-head{min-height:32px;display:flex;align-items:center;gap:6px;padding:6px 9px 5px;border-bottom:1px solid rgba(105,75,53,.13)}.landing-home-card-head>span{border-radius:999px;padding:2px 6px;font-size:9px;font-weight:850;background:#efe6d7}.landing-home-card-head>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.landing-home-card-content{padding:8px 9px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.landing-home-card.has-explicit-height .landing-home-card-content{max-height:calc(100% - 33px);overflow:auto}.landing-home-card-content img{display:block;width:100%;max-height:420px;object-fit:contain}.landing-home-card-content pre{margin:0;white-space:pre-wrap;overflow:auto}.landing-home-card-content blockquote{margin:0 0 6px;font-size:14px;font-style:italic}.landing-home-check{display:flex;gap:6px;padding:3px 0}.landing-home-pin{width:13px;height:13px;position:absolute;top:-6px;left:50%;z-index:4;transform:translateX(-50%);border-radius:50%;background:#76506b;box-shadow:inset 1px 1px 2px rgba(255,255,255,.5),0 2px 4px rgba(65,37,22,.42)}.landing-home-resize{position:absolute;right:2px;bottom:2px;z-index:8;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:rgba(255,253,244,.96);border:1px solid rgba(105,75,53,.24);cursor:se-resize}.landing-home-rotate{position:absolute;right:4px;top:5px;z-index:8;width:24px;height:24px;border-radius:7px;background:rgba(255,253,244,.96);border:1px solid rgba(105,75,53,.24);cursor:pointer;color:var(--ink)}.landing-home-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:6px;color:#5f493b}.landing-home-empty span{font-size:12px}.landing-home-drawing{height:180px;display:grid;place-items:center;border-radius:7px;background:#fffdf8;border:1px dashed #ccb99f;color:#806d5e}

.landing-home-board-wrap{position:relative;flex:1;min-height:0;overflow:hidden}
.landing-home-board-wrap>.cork{position:absolute;inset:0;width:100%;height:100%}
.landing-home-shell .cork-inner{min-width:100%;min-height:100%}


/* Unified Cork modal behavior.
   Dialogs stay centered at every breakpoint, scrims fully block the app below,
   and modal text fields use a content-safe radius rather than pill clipping. */
.modal-scrim,
.cork-card-edit-scrim,
.cork-duplicate-scrim{
    position:fixed;
    inset:0;
    pointer-events:auto;
    cursor:default;
}
.modal-scrim{
    z-index:1500;
    background:rgba(58,43,36,.52);
    backdrop-filter:blur(5px);
}
.modal-card{
    position:fixed;
    left:50%;
    top:50%;
    right:auto;
    bottom:auto;
    transform:translate(-50%,-50%);
    width:min(620px,calc(100vw - 28px));
    max-height:min(86dvh,820px);
    overflow:auto;
    border-radius:18px;
    z-index:1501;
}
.modal-card .form-input,
.modal-card .compose-input,
.modal-card .compact-input,
.modal-card .compact-select,
.cork-card-edit-modal .form-input,
.cork-card-edit-modal .compose-input{
    box-sizing:border-box;
    border-radius:10px;
}
.modal-card textarea.form-input,
.modal-card textarea.compose-input,
.cork-card-edit-modal textarea.form-input,
.cork-card-edit-modal textarea.compose-input{
    border-radius:10px;
    padding:10px 12px;
    line-height:1.45;
    overflow:auto;
}
.cork-card-edit-overlay{
    position:fixed;
    inset:0;
    z-index:var(--cork-overlay-z,2500);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    isolation:isolate;
    pointer-events:auto;
}
.cork-card-edit-scrim{
    z-index:0;
    background:rgba(58,43,36,.52);
    backdrop-filter:blur(5px);
}
.cork-card-edit-modal{
    position:relative;
    left:auto;
    top:auto;
    right:auto;
    bottom:auto;
    transform:none;
    z-index:1;
    width:min(620px,calc(100vw - 28px));
    max-height:min(86dvh,820px);
    overflow:hidden;
    border-radius:18px;
}
.cork-card-edit-modal .cork-card-edit-body{
    padding:14px 16px 16px;
}
.cork-card-edit-modal .cork-card-edit-actions{
    padding:12px 16px 16px;
}
@media(max-width:700px){
    .modal-card{
        left:50%;
        top:50%;
        right:auto;
        bottom:auto;
        transform:translate(-50%,-50%);
        width:calc(100vw - 20px);
        max-height:92dvh;
        border-radius:16px;
        border-bottom:1px solid var(--border-warm);
    }
    .cork-card-edit-overlay{padding:10px}
    .cork-card-edit-modal{
        width:calc(100vw - 20px);
        max-height:92dvh;
        border-radius:16px;
    }
}


/* Anonymous Home composition remains local-only. */
.landing-home-shell .cork-addpin-choice-home-unsafe{display:none!important}
.landing-home-shell .cork{isolation:isolate}
.landing-home-shell .cork-texture{z-index:0}
.landing-home-visitor-watermark{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:minmax(80px,1fr);
    gap:34px 18px;
    align-items:center;
    justify-items:center;
    overflow:hidden;
    padding:28px;
    color:rgba(91,59,45,.14);
    font-family:var(--font-display);
    font-size:clamp(11px,1.15vw,16px);
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    user-select:none;
}
.landing-home-visitor-watermark span{
    display:block;
    white-space:nowrap;
    transform:rotate(-18deg);
}
.landing-home-shell .cork-inner{
    position:relative;
    z-index:2;
}
.landing-home-visitor-watermark::before{top:14%}
.landing-home-visitor-watermark::after{bottom:14%}


/* Shared rich-content card appearance. */
.cork-card-rich-source{display:none!important}
.pin-card[data-card-customized="true"] .card-content,
.pin-card[data-card-customized="true"] .card-title,
.pin-card[data-card-customized="true"] .card-footer,
.pin-card[data-card-customized="true"] .panel-note,
.pin-card[data-card-customized="true"] blockquote,
.envelope-pin[data-card-customized="true"] .card-content,
.envelope-pin[data-card-customized="true"] .card-title,
.envelope-pin[data-card-customized="true"] .card-footer,
.envelope-pin[data-card-customized="true"] .panel-note,
.envelope-pin[data-card-customized="true"] blockquote{
    color:var(--cork-card-custom-text,var(--ink))!important;
}
.pin-card[data-card-customized="true"] .card-header,
.envelope-pin[data-card-customized="true"] .card-header{
    border-color:var(--cork-card-custom-accent,rgba(105,75,53,.13))!important;
}
.pin-card[data-card-customized="true"] .badge,
.pin-card[data-card-customized="true"] .card-type-badge,
.envelope-pin[data-card-customized="true"] .badge,
.envelope-pin[data-card-customized="true"] .card-type-badge{
    background:var(--cork-card-custom-accent,var(--surface-soft))!important;
}
.pin-card .card-content,
.envelope-pin .card-content{
    text-align:var(--cork-card-custom-align,left);
}
.cork-rich-content{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    line-height:1.5;
}
.cork-rich-content>*:first-child{margin-top:0}
.cork-rich-content>*:last-child{margin-bottom:0}
.cork-rich-content p{margin:.45em 0}
.cork-rich-content h1,
.cork-rich-content h2,
.cork-rich-content h3{
    margin:.55em 0 .3em;
    font-family:var(--font-display);
    line-height:1.15;
}
.cork-rich-content h1{font-size:1.65em}
.cork-rich-content h2{font-size:1.4em}
.cork-rich-content h3{font-size:1.18em}
.cork-rich-content ul,
.cork-rich-content ol{margin:.5em 0;padding-left:1.5em}
.cork-rich-content li{margin:.2em 0}
.cork-rich-content blockquote{
    margin:.55em 0;
    padding:.45em .7em;
    border-left:3px solid var(--cork-card-custom-accent,rgba(105,75,53,.35));
    background:rgba(255,255,255,.18);
}
.cork-rich-content code{
    padding:.08em .3em;
    border-radius:5px;
    background:rgba(0,0,0,.07);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.cork-rich-content pre{
    overflow:auto;
    padding:.7em;
    border-radius:8px;
    background:rgba(0,0,0,.08);
    white-space:pre-wrap;
}
.cork-rich-content pre code{padding:0;background:transparent}
.cork-rich-content a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cork-rich-content mark{padding:0 .15em;border-radius:3px;background:#f5e880;color:inherit}
.cork-card-style-editor{
    margin-top:12px;
    padding:12px;
    border:1px solid var(--border-soft);
    border-radius:14px;
    background:var(--surface-soft);
}
.cork-card-style-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.cork-edit-rich{min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:620px){.cork-card-style-grid{grid-template-columns:1fr}}


/* WYSIWYG rich-card editor. */
.cork-rich-editor{
    display:grid;
    gap:10px;
}
.cork-rich-toolbar{
    position:sticky;
    top:0;
    z-index:3;
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    align-items:center;
    padding:7px;
    border:1px solid var(--border-soft);
    border-radius:11px;
    background:rgba(255,253,249,.96);
    backdrop-filter:blur(6px);
}
.cork-rich-toolbar button{
    appearance:none;
    min-width:30px;
    height:30px;
    padding:0 8px;
    border:1px solid var(--border-soft);
    border-radius:7px;
    background:var(--surface);
    color:var(--ink);
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}
.cork-rich-toolbar button:hover,
.cork-rich-toolbar button:focus-visible{
    border-color:var(--accent);
    background:var(--surface-soft);
    outline:none;
}
.cork-rich-toolbar-sep{
    width:1px;
    height:22px;
    background:var(--border-soft);
    margin:0 2px;
}
.cork-rich-surface{
    min-height:180px;
    max-height:360px;
    overflow:auto;
    padding:13px 14px;
    border:1px solid var(--border-soft);
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    line-height:1.5;
    outline:none;
}
.cork-rich-surface:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(139,75,53,.10);
}
.cork-rich-surface:empty::before{
    content:attr(data-placeholder);
    color:var(--muted);
    pointer-events:none;
}
.cork-rich-surface h1,
.cork-rich-surface h2,
.cork-rich-surface h3{font-family:var(--font-display);line-height:1.15}
.cork-rich-surface blockquote{
    margin:.6em 0;
    padding:.45em .7em;
    border-left:3px solid var(--accent);
    background:var(--surface-soft);
}
.cork-rich-surface pre{
    padding:.7em;
    border-radius:8px;
    background:#2d2825;
    color:#f5eee6;
    white-space:pre-wrap;
}
.cork-rich-source-input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
    padding:0!important;
}
.cork-rich-source-details{
    border:1px solid var(--border-soft);
    border-radius:10px;
    overflow:hidden;
    background:var(--surface);
}
.cork-rich-source-details>summary{
    cursor:pointer;
    padding:9px 11px;
    font-size:11px;
    font-weight:800;
    color:var(--muted);
}
.cork-rich-source-details[open]{
    padding-bottom:10px;
}
.cork-rich-source-details[open]>summary{
    border-bottom:1px solid var(--border-soft);
    margin-bottom:8px;
}
.cork-rich-source-details .panel-note,
.cork-rich-source-details textarea{
    width:calc(100% - 20px);
    margin-left:10px;
    margin-right:10px;
}
.cork-rich-preview-wrap{
    display:grid;
    gap:6px;
}
.cork-rich-preview-card{
    position:relative;
    width:min(100%,420px);
    min-height:150px;
    padding-top:6px;
    filter:drop-shadow(0 5px 8px rgba(72,43,25,.14));
}
.cork-rich-preview-card>.pin-dot{
    position:absolute;
    top:0;
    left:50%;
    z-index:3;
    width:12px;
    height:12px;
    border-radius:50%;
    transform:translateX(-50%);
    background:#76506b;
    border:2px solid rgba(255,255,255,.65);
    box-shadow:0 2px 3px rgba(70,40,20,.3);
}
.cork-rich-preview-card>.card-body{
    min-height:140px;
    overflow:hidden;
    border:1px solid rgba(105,75,53,.22);
    border-radius:10px 10px 12px 9px;
    background:#fffdf4;
    box-shadow:1px 2px 0 rgba(255,255,255,.45) inset;
}
.cork-rich-preview-card .card-header{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:8px 10px 6px;
    border-bottom:1px solid rgba(105,75,53,.13);
}
.cork-rich-preview-card .badge{
    flex:0 0 auto;
    padding:2px 7px;
    border-radius:999px;
    background:#efe6d7;
    font-size:9px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.cork-rich-preview-card .card-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:800;
}
.cork-rich-preview-card .card-content{
    padding:10px;
    line-height:1.5;
    overflow-wrap:anywhere;
}
@media(max-width:620px){
    .cork-rich-toolbar{position:relative}
    .cork-rich-toolbar button{min-width:28px;padding:0 6px}
}

.cork-rich-toolbar button.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}


/* Keep rich card preview visible while editing. */
.cork-rich-editor-layout{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);
    gap:16px;
    align-items:start;
}
.cork-rich-editor-main{min-width:0}
.cork-rich-editor-preview-pane{
    position:sticky;
    top:10px;
    align-self:start;
    min-width:0;
}
.cork-rich-editor-preview-pane .cork-rich-preview-wrap{
    margin:0;
}
@media(max-width:820px){
    .cork-rich-editor-layout{grid-template-columns:1fr}
    .cork-rich-editor-preview-pane{position:relative;top:auto}
}


/* Rich card editor needs enough width for a persistent preview pane. */
.cork-card-edit-modal:has(.cork-rich-editor-layout){
    width:min(980px,calc(100vw - 28px));
    max-width:980px;
}
.cork-rich-editor-layout{
    grid-template-columns:minmax(360px,1fr) minmax(260px,320px);
}
.cork-rich-editor-preview-pane{
    max-height:calc(86dvh - 90px);
}
@media(max-width:820px){
    .cork-card-edit-modal:has(.cork-rich-editor-layout){
        width:calc(100vw - 20px);
        max-width:none;
    }
}


/* Force rich preview into a persistent modal-side rail. */
.cork-card-edit-modal:has(.cork-rich-editor-layout){
    padding-right:330px;
}
.cork-rich-editor-layout{
    display:block;
}
.cork-rich-editor-main{
    min-width:0;
}
.cork-rich-editor-preview-pane{
    position:absolute;
    top:58px;
    right:16px;
    width:290px;
    max-height:calc(100% - 116px);
    overflow:auto;
    z-index:4;
}
.cork-rich-editor-preview-pane .cork-rich-preview-card{
    width:100%;
}
@media(max-width:900px){
    .cork-card-edit-modal:has(.cork-rich-editor-layout){
        padding-right:0;
    }
    .cork-rich-editor-preview-pane{
        position:relative;
        top:auto;
        right:auto;
        width:auto;
        max-height:none;
        overflow:visible;
        margin-top:12px;
    }
}


/* Shared file upload progress */
.cork-upload-progress{
    display:none;
    width:100%;
    box-sizing:border-box;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid var(--border-warm);
    border-radius:11px;
    background:var(--surface-soft);
    box-shadow:var(--shadow-hairline);
}
.cork-upload-progress-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
    font-size:11px;
    color:var(--ink);
}
.cork-upload-progress-label{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:750;
}
.cork-upload-progress-percent{
    flex:0 0 auto;
    font-size:11px;
    font-variant-numeric:tabular-nums;
}
.cork-upload-progress-track{
    position:relative;
    width:100%;
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:var(--border-soft);
}
.cork-upload-progress-fill{
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transition:width .12s linear;
}
.cork-upload-progress-meta{
    margin-top:6px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    color:var(--ink-muted);
}
.cork-upload-progress.is-complete .cork-upload-progress-fill{
    background:var(--success, #5f7f55);
}
.cork-upload-progress.is-error{
    border-color:rgba(176,72,52,.4);
    background:rgba(176,72,52,.07);
}
.cork-upload-progress.is-error .cork-upload-progress-fill{
    background:var(--danger, #b04834);
}


@keyframes cork-upload-indeterminate{
    0%{transform:translateX(-120%)}
    50%{transform:translateX(70%)}
    100%{transform:translateX(220%)}
}
.cork-upload-progress.is-indeterminate .cork-upload-progress-track{
    overflow:hidden;
}
.cork-upload-progress.is-indeterminate .cork-upload-progress-fill{
    width:42%!important;
    transition:none;
    animation:cork-upload-indeterminate 1.15s ease-in-out infinite;
}
.cork-upload-progress.is-indeterminate .cork-upload-progress-percent{
    display:none;
}

/* Bingo cards */
.cork-bingo-card .card-content{padding-top:8px}
.cork-bingo-grid{display:grid;gap:5px;margin-top:8px;width:100%}
.cork-bingo-cell{min-width:0;min-height:54px;padding:6px;border:1px solid var(--border-warm);border-radius:8px;background:var(--surface-paper-strong);display:flex;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:11px;line-height:1.15;cursor:pointer;user-select:none;touch-action:manipulation;overflow-wrap:anywhere}
.cork-bingo-cell:hover{transform:translateY(-1px);box-shadow:var(--shadow-hairline)}
.cork-bingo-cell.done{background:var(--surface-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.cork-bingo-cell.done strong{font-size:16px;line-height:1}
.cork-bingo-cell.public{cursor:default}
.cork-bingo-cell.public:hover{transform:none;box-shadow:none}
@media (max-width:640px){.cork-bingo-cell{min-height:46px;padding:4px;font-size:10px}}

.cork-bingo-modebar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}
.cork-bingo-surface{position:relative;width:100%}
.cork-bingo-ink{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;touch-action:none;border-radius:8px}
.cork-bingo-card[data-cork-bingo-mode="draw"] .cork-bingo-ink{pointer-events:auto;cursor:crosshair}
.cork-bingo-card[data-cork-bingo-mode="draw"] .cork-bingo-grid{user-select:none}
.cork-bingo-card[data-cork-bingo-mode="draw"] .cork-bingo-cell{pointer-events:none}
.cork-bingo-ink.readonly{pointer-events:none}
.cork-bingo-modehint{min-height:1.2em;margin-top:6px}


/* Modal interaction guard: modal overlays own document scrolling while present. */
body.cork-modal-open { overflow: hidden; }
[data-cork-modal="true"] [role="dialog"]:focus { outline: none; }


/* Server-wired click-away surfaces for Cork transient panels. */
.cork-floating-panel-scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
    cursor: default;
}
.cork-addpin-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: default;
}
.cork-addpin-dialog {
    position: relative;
    z-index: 1;
}


.cork-event-time-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:520px){.cork-event-time-grid{grid-template-columns:1fr}}


/* Calendar: month first, Cork day boards second. */
.calendar-shell{background:var(--surface-shell)}
.calendar-workspace{min-width:0;flex:1;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--surface-canvas)}
.calendar-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;background:var(--surface-paper);border-bottom:1px solid var(--border-warm)}
.calendar-header h1{margin:2px 0 0;font-family:var(--font-display);font-size:24px;color:var(--ink-strong)}
.calendar-header p{margin-top:4px;max-width:680px;color:var(--ink-muted);font-size:11.5px;line-height:1.45}
.calendar-header-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.calendar-message{margin:10px 16px 0;padding:9px 11px;border-radius:10px;background:var(--surface-note);border:1px solid var(--border-warm);font-size:11px;color:var(--ink-muted)}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;padding:12px 16px 4px;color:var(--ink-faint);font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.calendar-weekdays span{padding:0 8px}
.calendar-month-grid{min-height:0;flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(112px,1fr);gap:1px;overflow:auto;margin:0 16px 16px;border:1px solid var(--border-warm);background:var(--border-warm);border-radius:16px}
.calendar-day-cell{min-width:0;padding:8px;background:#fffaf1;cursor:pointer;overflow:hidden;transition:background .12s ease}
.calendar-day-cell:hover,.calendar-day-cell:focus-visible{background:var(--surface-note);outline:none}
.calendar-day-number{font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--ink)}
.calendar-day-events{display:flex;flex-direction:column;gap:4px;margin-top:7px}
.calendar-event-chip{min-width:0;display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:7px;background:#f3e2c9;border:1px solid rgba(126,94,69,.18);font-size:9.5px;color:var(--ink)}
.calendar-event-chip strong{font-size:9px;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.calendar-event-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-event-chip em{margin-left:auto;color:var(--ink-faint);font-size:8px;font-style:normal}
.calendar-day-cork{flex:1}
.calendar-day-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:5px;text-align:center;color:var(--ink-muted);pointer-events:none}
.calendar-day-empty strong{font-family:var(--font-display);font-size:18px;color:var(--ink)}
.calendar-event-card .card-header{cursor:grab;touch-action:none}
.calendar-event-footer{justify-content:flex-end}
.calendar-event-editor{z-index:3001}
.calendar-event-editor-body{display:flex;flex-direction:column;gap:9px;padding:16px 20px 20px}
@media(max-width:900px){
  .calendar-header{padding:12px 14px;align-items:flex-start}
  .calendar-header p{display:none}
  .calendar-month-grid{grid-auto-rows:minmax(92px,1fr);margin:0 8px 8px}
  .calendar-weekdays{padding-left:8px;padding-right:8px}
  .calendar-event-chip em{display:none}
}
@media(max-width:700px){
  .calendar-workspace{height:calc(100dvh - 58px);margin-top:58px}
  .calendar-header{padding:9px 10px}
  .calendar-header h1{font-size:18px}
  .calendar-header-actions .btn-primary{padding:7px 9px;font-size:10.5px}
  .calendar-weekdays{font-size:8px;padding-top:7px}
  .calendar-weekdays span{padding:0 3px}
  .calendar-month-grid{grid-auto-rows:minmax(74px,1fr)}
  .calendar-day-cell{padding:5px}
  .calendar-day-number{font-size:12px}
  .calendar-event-chip{padding:3px 4px;font-size:8px}
  .calendar-event-chip strong{display:none}
}

.cork-repeat-value-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cork-repeat-choices{display:flex;flex-wrap:wrap;gap:5px}.cork-repeat-choices .tiny-button.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.cork-repeat-choices{display:flex;flex-wrap:wrap;gap:5px}
.cork-repeat-choices .tiny-button.active{background:var(--accent);color:#fff;border-color:var(--accent)}


/* Board folders: deep structure uses drill-down + breadcrumbs rather than unbounded indentation. */
.board-folder-browser{flex:0 0 auto;border-bottom:1px solid var(--border-warm);background:var(--surface-paper)}
.board-folder-summary{display:flex;align-items:center;gap:10px;padding:7px 18px;cursor:pointer;font-size:11px;font-weight:850;color:var(--ink)}
.board-folder-summary::marker{color:var(--ink-faint)}
.board-folder-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-muted);font-weight:650}
.board-folder-panel{display:grid;gap:8px;padding:0 18px 10px}
.board-folder-breadcrumbs{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;padding-bottom:2px}
.board-folder-crumb{flex:0 0 auto;padding:3px 6px;border-radius:7px;cursor:pointer;font-size:10px;font-weight:750;color:var(--accent-strong)}
.board-folder-crumb:hover{background:var(--surface-soft)}
.board-folder-separator{flex:0 0 auto;color:var(--ink-faint)}
.board-folder-children{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.board-folder-card{display:flex;align-items:center;gap:5px;flex:0 0 auto;max-width:230px;padding:6px 9px;border:1px solid var(--border-warm);border-radius:9px;background:var(--surface);cursor:pointer;font-size:10.5px;font-weight:750;box-shadow:var(--shadow-hairline)}
.board-folder-card span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-folder-card:hover{border-color:var(--accent)}
.board-folder-icon{color:var(--accent-strong)}
.board-folder-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.board-folder-actions .compact-input{width:min(190px,100%)}
@media(max-width:700px){
  .board-folder-summary{padding-left:10px;padding-right:10px}
  .board-folder-panel{padding-left:10px;padding-right:10px}
}


/* Calendar Cards */
.cork-calendar-card .card-content{display:flex;flex-direction:column;gap:8px;min-height:0}
.cork-calendar-card-events{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto}
.cork-calendar-card-event{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;padding:7px 8px;border:1px solid var(--border-warm);border-radius:9px;background:var(--surface-soft);cursor:pointer;text-align:left}
.cork-calendar-card-event:hover{border-color:var(--accent)}
.cork-calendar-card-event strong{grid-row:1 / span 2;font-size:9px;color:var(--accent-strong);white-space:nowrap}
.cork-calendar-card-event span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800;color:var(--ink)}
.cork-calendar-card-event small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;color:var(--ink-muted)}

.cork-calendar-card-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;min-width:0}
.cork-calendar-card-day{min-width:0;min-height:42px;padding:3px;border:1px solid var(--border-soft);border-radius:6px;background:var(--surface)}
.cork-calendar-card-day>strong{display:block;font-size:8px;color:var(--ink-faint)}
.cork-calendar-card-month-event{margin-top:2px;padding:2px 3px;border-radius:4px;background:var(--surface-note);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7.5px;cursor:pointer}


/* Live invite presenter */
.live-invite-modal{max-width:520px}
.live-invite-body{display:grid;justify-items:center;gap:14px;padding:18px 22px 22px;text-align:center}
.live-invite-code{font-family:var(--font-mono);font-size:clamp(30px,8vw,48px);font-weight:900;letter-spacing:.12em;color:var(--ink-strong)}
.live-invite-qr{width:240px;height:240px;max-width:min(240px,78vw);max-height:min(240px,78vw);background:#fff;border:10px solid #fff;border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}
.live-invite-meta{display:grid;gap:3px;color:var(--ink-muted)}
.live-invite-meta strong{font-size:18px;color:var(--ink)}
.live-invite-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}


/* Castra platform notification toast, themed via Cork's global CSS.
   The platform owns the DOM/behaviour; these CSS hooks only alter presentation. */
.castra-toast.castra-toast--info {
    --castra-toast-bg: var(--surface-paper);
    --castra-toast-color: var(--ink);
    --castra-toast-border: var(--border-warm);
    --castra-toast-radius: var(--radius-lg);
    --castra-toast-shadow: var(--shadow-float);
    --castra-toast-font: 12px/1.45 var(--font-body);
    --castra-toast-image-size: 46px;
    --castra-toast-image-radius: var(--radius-sm);
    --castra-toast-action-bg: var(--accent);
    --castra-toast-action-color: var(--ink-on-dark);
    --castra-toast-action-border: var(--accent-strong);
    --castra-toast-action-hover-bg: var(--accent-strong);
}
.castra-toast.castra-toast--info .castra-toast__message {
    font-weight: 850;
}