/* === Reset / base — Momentum Design lightBronzeWebex foundation ===
 *
 * Values are inlined from the lightBronzeWebex token set rather than chained
 * through var(--mds-...) — that chain works in theory but adds a brittle
 * dependency on the Momentum stylesheet loading + cascading correctly. With
 * direct hex values we get reliable opaque colours in every browser/timing
 * scenario; the full Momentum vocabulary remains available via its own
 * --mds-color-theme-* namespace for any rule that wants to opt in.
 *
 * The "Bronze" character of the theme lives in the warm beige body
 * background (#f5efe4) — gradient top of background-gradient-primary-normal —
 * with white surfaces (cards, topbar, toolbar) sitting on top. */
:root {
    color-scheme: light;

    /* Surfaces */
    --bg:         #f5efe4;          /* warm bronze page wash */
    --surface:    #ffffff;          /* cards, topbar, modals */
    --surface-2:  #f7f7f7;          /* subtle hover / sub-strip background */
    --surface-3:  #ededed;          /* divider-area background */

    /* Borders / dividers */
    --border:     rgba(0, 0, 0, .14);
    --border-strong: rgba(0, 0, 0, .25);

    /* Text colours */
    --text:       rgba(0, 0, 0, .95);
    --text-soft:  rgba(0, 0, 0, .7);

    /* Primary filled buttons — in Momentum's light Bronze/Webex themes the
     * primary button is BLACK (`button-primary-normal: #000000f2`). The
     * Webex blue is reserved for accent backgrounds + focus rings. */
    --button-primary:        rgba(0, 0, 0, .95);   /* #000000f2 */
    --button-primary-hover:  rgba(0, 0, 0, .8);    /* #000000cc */
    --button-primary-active: rgba(0, 0, 0, .7);    /* #000000b3 */
    --button-primary-text:   rgba(255, 255, 255, .95);  /* #fffffff2 */

    /* Accent (focus rings, links, info backgrounds) — Webex blue */
    --accent:        #1170cf;
    --accent-hover:  #0353a8;

    /* Status colours */
    --danger:    #ab0a15;
    --warning:   #7d4705;
    --success:   #185e46;

    /* Shadows */
    --shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06);

    /* Typography */
    --font-body:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: Fraunces, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01", "ss03";  /* Inter alt-glyphs */
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
}
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* === Forms (login/register) === */
.center-card {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 380px;
}
.card h1 {
    margin: 0 0 1.1rem;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.015em;
}
.card p { color: var(--text-soft); margin: .5rem 0 1rem; font-size: .9rem; }
label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-soft);
    margin-top: 1.1rem;
    letter-spacing: .01em;
}
/* === Inputs ===
 * Momentum text inputs sit on a white surface with a subtle outline. On
 * focus the outline strengthens to the input's active stroke colour
 * rather than offsetting the box. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--mds-color-theme-outline-input-normal);
    background: var(--mds-color-theme-background-solid-primary-normal);
    color: var(--text);
    font: inherit;
    margin-top: .25rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    -webkit-appearance: none;
    appearance: none;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
    border-color: var(--mds-color-theme-outline-input-active);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(17, 112, 207, .18);
}
input::placeholder, textarea::placeholder { color: var(--mds-color-theme-text-primary-disabled); }

/* === Buttons ===
 * Momentum has three button flavours: primary (filled blue), secondary
 * (subtle ghost), and tertiary (transparent). We map our existing classes
 * onto those: .btn = secondary by default, .btn-primary = primary,
 * .btn-icon = tertiary. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: 999px;     /* Momentum buttons are pill-shaped */
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover {
    background: var(--mds-color-theme-background-primary-hover);
    border-color: var(--mds-color-theme-outline-primary-normal);
}
.btn:active { transform: translateY(1px); background: var(--mds-color-theme-background-primary-active); }
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 112, 207, .25);
}
.btn[disabled], .btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary {
    background: var(--button-primary);
    color: var(--button-primary-text);
    border-color: var(--button-primary);
}
.btn-primary:hover {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
}
.btn-primary:active {
    background: var(--button-primary-active);
    border-color: var(--button-primary-active);
}
.btn-block { width: 100%; margin-top: 1rem; }
.btn-icon {
    width: 44px;
    padding: 0;
    aspect-ratio: 1;
    border-radius: 999px;
    border-color: transparent;
    background: transparent;
}
.btn-icon:hover { background: var(--mds-color-theme-background-primary-hover); }
.error {
    color: var(--danger);
    font-size: .85rem;
    margin-top: .5rem;
    min-height: 1.2em;
}
.muted-link {
    margin-top: 1rem;
    text-align: center;
    font-size: .9rem;
    color: var(--text-soft);
}
.muted-link a { color: var(--accent); text-decoration: none; }

/* === Project list === */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.2rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky; top: 0; z-index: 10;
}
.topbar h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar .icon-row { display: flex; gap: .5rem; }

/* === Public quilt detail page === */
.quilt-detail-page { max-width: 1080px; margin: 0 auto; padding: 1.5rem; }
.quilt-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
}
.quilt-detail-canvas {
    aspect-ratio: 1;
    background: var(--surface-2);
    border-radius: 12px;
    overflow: hidden;
}
.quilt-detail-canvas svg { width: 100%; height: 100%; display: block; }
.quilt-detail-side { display: flex; flex-direction: column; gap: .8rem; }
.quilt-detail-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
}
.quilt-detail-owner {
    color: var(--text-soft);
    text-decoration: none;
    font-size: .9rem;
}
.quilt-detail-owner:hover { color: var(--accent); }
.quilt-detail-stats {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--text-soft);
}
.quilt-detail-meta {
    display: flex;
    gap: .65rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--text-soft);
}
.quilt-detail-meta-item {
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 6px;
}
.quilt-detail-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-chip {
    background: var(--surface-2);
    color: var(--text);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .8rem;
}
.tag-chip-mini {
    background: var(--surface-2);
    color: var(--text-soft);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .7rem;
    margin-right: .2rem;
}
.quilt-card-tags {
    display: flex; flex-wrap: wrap; gap: .25rem;
    margin-top: .35rem; align-items: center;
}
.badge-difficulty {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge-easy   { background: #d4f5dd; color: #185e46; }
.badge-medium { background: #fff3d4; color: #7d4705; }
.badge-hard   { background: #ffe5e8; color: #ab0a15; }
.badge-expert { background: #1a1a1a; color: #fff; }
.quilt-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .8rem;
}

/* "Made this!" community photos */
.quilt-detail-photos {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.madethis-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; gap: 1rem;
}
.madethis-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
}
.madethis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.madethis-photo {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.madethis-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.madethis-photo figcaption {
    padding: .5rem .75rem;
    font-size: .85rem;
    color: var(--text-soft);
}
.madethis-photo figcaption p { margin: 0 0 .15rem; color: var(--text); }
@media (max-width: 720px) {
    .quilt-detail { grid-template-columns: 1fr; }
}

/* === Cookie banner === */
.cookie-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 720px;
    margin: 0 auto;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 150;
    animation: cookieIn .35s ease-out;
}
.cookie-banner.dismissed { animation: cookieOut .2s ease-in forwards; }
.cookie-banner p { margin: 0; flex: 1; font-size: .85rem; line-height: 1.4; }
.cookie-banner a { color: var(--accent); text-decoration: underline; }
@keyframes cookieIn  { from { transform: translateY(140%); } to { transform: translateY(0); } }
@keyframes cookieOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(140%); opacity: 0; } }

/* === Prose / static legal pages === */
.prose-page { max-width: 720px; margin: 0 auto; padding: 1.5rem 0; }
.prose-page h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}
.prose-page h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
}
.prose-page p, .prose-page li { line-height: 1.6; color: var(--text); font-size: .95rem; }
.prose-page p { margin: .5rem 0 .8rem; }
.prose-page ul { padding-left: 1.4rem; }
.prose-page a { color: var(--accent); }

/* === Public homepage / search === */
.home-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.home-topbar {
    gap: 1rem;
    padding: .8rem 1.5rem;
}
.home-topbar .home-search {
    flex: 1;
    max-width: 540px;
    margin: 0;
}
.home-topbar .home-search input {
    width: 100%;
    margin: 0;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font: inherit;
}
.home-topbar .home-search input:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(17, 112, 207, .18);
    outline: none;
}
.home-actions { gap: .35rem; }
.home-main {
    flex: 1;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.home-hero {
    padding: 2rem 0 2.5rem;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.home-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
}
.home-hero p {
    color: var(--text-soft);
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0;
}
.home-section { margin-top: 2.5rem; }
.home-section-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}
.home-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.home-sort-bar .home-section-title { margin: 0; }
.home-sort-tabs {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.home-sort-tab {
    border: none;
    background: transparent;
    padding: .35rem .85rem;
    border-radius: 999px;
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-soft);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.home-sort-tab:hover { color: var(--text); }
.home-sort-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

/* Featured: horizontal scroll row */
.home-featured-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 220px);
    gap: 1rem;
    overflow-x: auto;
    padding: .25rem 0 1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.home-featured-row .quilt-card {
    scroll-snap-align: start;
}

/* Generic public quilt grid */
.quilt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* === Reusable quilt-card === */
.quilt-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s ease-out, box-shadow .15s ease-out;
    /* Stagger fade-in on grid load. --i set inline per card. */
    animation: quiltCardIn .35s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 35ms);
}
.quilt-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.quilt-card-thumb-link { display: block; }
.quilt-card-thumb {
    aspect-ratio: 1;
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quilt-card-thumb svg { display: block; width: 100%; height: 100%; }
.quilt-card-body {
    padding: .65rem .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.quilt-card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quilt-card-title:hover { color: var(--accent); }
.quilt-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-soft);
}
.quilt-card-owner {
    color: var(--text-soft);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.quilt-card-owner:hover { color: var(--accent); }
.quilt-card-stats { display: inline-flex; gap: .5rem; flex-shrink: 0; }
.card-stat { font-variant-numeric: tabular-nums; }

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

/* === Skeleton loader === */
.shimmer {
    background: linear-gradient(90deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.10) 50%,
        rgba(0,0,0,.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.quilt-card-skeleton .quilt-card-thumb { background: rgba(0,0,0,.05); }
.skeleton-line {
    height: .9em;
    border-radius: 4px;
    background: rgba(0,0,0,.08);
    width: 100%;
}

/* === Search results === */
.search-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 1.5rem 0 1rem;
}

/* === Toast notifications === */
.toast-host {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-soft);
    color: var(--text);
    padding: .7rem 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    max-width: 360px;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform .22s ease-out, opacity .22s ease-out;
    font-size: .9rem;
}
.toast.visible { transform: translateX(0); opacity: 1; }
.toast-success { border-left-color: var(--success); }
.toast-error   { border-left-color: var(--danger); }
.toast-info    { border-left-color: var(--accent); }
.toast-msg { flex: 1; line-height: 1.35; }
.toast-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-soft);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0 0 .25rem;
}
.toast-close:hover { color: var(--text); }

/* Page transition fade — main.js toggles `.fade-in` on #app each route
 * change so the animation re-fires (a single class on a long-lived
 * element wouldn't re-trigger). */
@keyframes pageFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
#app.fade-in { animation: pageFade .18s ease-out; }

/* Setting hint text below profile inputs */
.settings-section-h {
    margin: 0 0 .25rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}
.settings-hint {
    margin: .2rem 0 0;
    font-size: .75rem;
    color: var(--text-soft);
}

/* === Heart / Like button + burst animation === */
.heart-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.heart-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.heart-btn:disabled { opacity: .55; cursor: not-allowed; }
.heart-btn[data-state="liked"] { color: #d33453; border-color: #d33453; background: #fff1f3; }
.heart-btn[data-state="liked"]:hover { background: #ffe2e7; }
.heart-icon { display: inline-flex; }
.heart-icon svg { display: block; }
.heart-btn[data-state="liked"] .heart-icon svg { animation: heartPulse .35s ease-out; }
.heart-count { font-variant-numeric: tabular-nums; }
@keyframes heartPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.3); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}
.heart-burst-layer {
    position: fixed; pointer-events: none; z-index: 100;
    width: 0; height: 0;
}
.heart-burst-particle {
    position: absolute; left: 0; top: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #d33453;
    animation: heartBurst .65s ease-out forwards;
}
@keyframes heartBurst {
    0%   { transform: translate(0, 0) scale(.6); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* === Public profile page === */
.profile-page { max-width: 980px; margin: 1rem auto; padding: 1rem 1.2rem; }
.profile-page-title { font-size: 1rem !important; color: var(--text-soft); }
.profile-header {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,.1) inset;
}
.profile-meta { flex: 1; min-width: 0; }
.profile-name {
    margin: 0 0 .15rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
}
.profile-handle { margin: 0; color: var(--text-soft); font-size: .85rem; }
.profile-bio { margin: .8rem 0; color: var(--text); font-size: .95rem; line-height: 1.4; }
.profile-bio.muted { font-style: italic; color: var(--text-soft); }
.profile-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}
.profile-stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
}
.profile-stat-label { font-size: .8rem; color: var(--text-soft); }
.profile-quilts.project-grid { padding: 0; }

/* === Admin shell === */
.admin-app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}
.admin-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1.2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.admin-sidebar > .wordmark { padding: 0 .25rem; }
.admin-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.admin-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
}
.admin-nav-item:hover { background: var(--surface-2); }
.admin-nav-item.active { background: var(--button-primary); color: var(--button-primary-text); }
.admin-nav-item.active .icon { color: var(--button-primary-text); }
.admin-nav-item .icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-soft); }
.admin-sidebar-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.admin-back-link { color: var(--text-soft); font-size: .85rem; text-decoration: none; }
.admin-back-link:hover { color: var(--text); }
.admin-content { padding: 1.5rem 2rem; overflow-y: auto; }
.admin-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.admin-page-header h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
}
.admin-search {
    flex: 1;
    max-width: 320px;
    padding: .5rem .75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
}
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.admin-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow);
}
.admin-stat-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; }
.admin-stat-label { color: var(--text-soft); font-size: .85rem; margin-top: .15rem; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.admin-table th, .admin-table td {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: .9rem;
    vertical-align: middle;
}
.admin-table th {
    background: var(--surface-2);
    font-weight: 600;
    font-size: .8rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .row-blocked { opacity: .55; }
.admin-table .muted { color: var(--text-soft); }
.admin-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: .25rem;
}
.admin-tag.admin   { background: #1170cf; color: #fff; }
.admin-tag.danger  { background: #ab0a15; color: #fff; }
.admin-tag.featured { background: #f5b800; color: #000; }
.btn.btn-sm { min-height: 32px; padding: .25rem .7rem; font-size: .85rem; margin-right: .25rem; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: rgba(171, 10, 21, .08); }

.admin-quilt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.admin-quilt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.admin-quilt-thumb { aspect-ratio: 1; background: var(--surface-2); }
.admin-quilt-thumb svg { width: 100%; height: 100%; display: block; }
.admin-quilt-body { padding: .8rem 1rem 1rem; }
.admin-quilt-body h3 { margin: 0 0 .25rem; font-size: 1rem; }
.admin-quilt-actions {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.admin-gen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.admin-gen-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.admin-gen-card .thumb {
    aspect-ratio: 1;
    background-color: var(--surface-2);
    background-size: cover;
    background-position: center;
}
.admin-gen-card .thumb.empty { display: flex; align-items: center; justify-content: center; color: var(--text-soft); }
.admin-gen-card .body { padding: .65rem .85rem .85rem; }
.admin-gen-card .prompt { font-size: .9rem; line-height: 1.35; max-height: 4em; overflow: hidden; }
.admin-gen-card .meta {
    display: flex; gap: .4rem; align-items: center;
    font-size: .75rem; color: var(--text-soft); margin-top: .35rem;
}
.status-pill {
    padding: 1px 7px; border-radius: 999px; font-weight: 600;
    background: var(--surface-3);
}
.status-pill.status-completed { background: #d4f5dd; color: #185e46; }
.status-pill.status-failed   { background: #ffe5e8; color: #ab0a15; }
.status-pill.status-pending  { background: #fff3d4; color: #7d4705; }

/* === Nickname-feedback banner under register form === */
.nickname-feedback {
    margin: .15rem 0 0;
    font-size: .75rem;
    color: var(--text-soft);
}
.nickname-feedback[data-state="ok"] { color: var(--success); }
.nickname-feedback[data-state="error"] { color: var(--danger); }

/* === User-menu nickname header === */
.user-display-name { display: block; font-weight: 600; }

/* === quilt.works wordmark ===
 * Two-line text mark used in topbars + above the login card. Will be
 * swapped for an SVG logo once the brand mark is delivered. */
.wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .25rem .5rem;
    margin: 0;
    text-decoration: none;
    color: inherit;
    line-height: 1;
    border-radius: 8px;
    transition: background .12s;
}
.wordmark:hover { background: var(--surface-2); }
.wordmark-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -.02em;
    color: var(--text);
}
.wordmark-tagline {
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 500;
    color: var(--text-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 1px;
}
.wordmark-compact {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--text);
    line-height: 1;
}

/* When the wordmark sits above the login card */
.login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    flex: 1;
    justify-content: center;
}
.login-wrap .wordmark {
    align-items: center;
}
.login-wrap .wordmark-name { font-size: 2rem; }
.login-wrap .wordmark-tagline { font-size: .8rem; }
/* Account-menu slot is always pushed to the far-right edge of the topbar
 * so the hamburger reads as account chrome rather than another action. */
.topbar .user-menu-slot { margin-left: auto; }

/* Click-to-edit title trigger. Wraps the topbar h1 + a small pencil icon
 * that fades in on hover/focus. Clicking opens the title-edit modal. */
.title-edit-trigger {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    text-align: left;
    transition: background .12s, border-color .12s;
}
.title-edit-trigger:hover,
.title-edit-trigger:focus-visible {
    background: var(--surface-2);
    border-color: var(--border);
    outline: none;
}
.title-edit-trigger > h1 { flex: 0 1 auto; min-width: 0; }
.title-edit-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    opacity: 0;
    color: var(--text-soft);
    transition: opacity .12s;
}
.title-edit-trigger:hover .title-edit-icon,
.title-edit-trigger:focus-visible .title-edit-icon {
    opacity: .85;
}
/* Touch devices have no hover — keep the icon visible at low opacity so
 * it's discoverable, but still fades up to full on focus. */
@media (hover: none) {
    .title-edit-icon { opacity: .5; }
}

/* === Visibility / sharing toggle (next to title in the topbar) === */
.visibility-trigger {
    margin-left: -.25rem;
    color: var(--text-soft);
}
.visibility-trigger[data-level="private"] { color: var(--text-soft); }
.visibility-trigger[data-level="view"],
.visibility-trigger[data-level="open"],
.visibility-trigger[data-level="community"] {
    /* "Open" levels get the brand colour so the user instantly knows the
     * design isn't fully private anymore. */
    color: var(--accent);
}
.visibility-icon { width: 22px; height: 22px; }

/* Visibility modal — radio-group rows */
.visibility-card .visibility-options {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .25rem;
}
.visibility-option {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .85rem .9rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s, background .12s, box-shadow .12s;
    margin-top: 0;
}
.visibility-option:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.visibility-option:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(17, 112, 207, .14);
    background: var(--surface);
}
.visibility-option input[type="radio"] {
    margin-top: .15rem;
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.visibility-option-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
    min-width: 0;
}
.visibility-option-text strong {
    font-weight: 600;
    color: var(--text);
}
.visibility-option-text span {
    color: var(--text-soft);
    font-size: .85rem;
    line-height: 1.4;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    padding: 1.2rem;
}
.project-card {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transition: transform .15s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.project-card:hover { transform: translateY(-2px); }
.project-card .card-body {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.project-card h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-card .meta { color: var(--text-soft); font-size: .8rem; }
.project-card .preview {
    margin-bottom: .65rem;
    aspect-ratio: 1;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtle inner shadow so the preview reads as a "window" into the design */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.project-card .preview .preview-svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Empty-preview placeholder — shown when the project has no drawable
 * pieces yet (just the root leaf or no tree). The preview div stays
 * with the subtle grey background. */
.project-card .preview:empty::before {
    content: "—";
    color: var(--text-soft);
    font-size: 1.5rem;
    opacity: .4;
}
.project-card .card-actions {
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
    padding: .35rem .6rem .6rem;
    border-top: 1px solid var(--border);
}
.project-card .card-actions .btn-icon {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-soft);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.project-card .card-actions .btn-icon:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
.project-card .card-actions .btn-icon .icon {
    width: 18px; height: 18px;
}
.project-card .card-actions .btn-delete:hover {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(1.08); }
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-soft);
}

/* === Editor === */
.editor {
    flex: 1;
    min-height: 0;
    /* Hard cap to viewport height. flex:1 + grid sometimes lets the editor
     * grow past viewport on macOS Safari when sidebars have lots of content
     * (color palette ~20 swatches). max-height pins it; overflow: hidden
     * clips visually; minmax(0, 1fr) on the canvas row + min-height:0 on
     * the sidebars makes them scroll internally instead. */
    max-height: 100vh;
    max-height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    /* Bronze page wash (matches the projects list and login screens). */
    background: var(--bg);
    overflow: hidden;
}
.editor canvas {
    display: block;
    background: var(--surface);
    width: 100%;
    height: 100%;
    touch-action: none;
}
.canvas-wrap {
    position: relative;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    display: grid;
    /* canvas | optional groups sidebar */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    background: var(--bg);
}
.canvas-wrap .canvas-inner {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.canvas-wrap .canvas-inner canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.canvas-wrap > .groups-sidebar { grid-column: 2; grid-row: 1; }

/* Rulers — floating panels positioned by JS at the quilt's screen edges.
 * They follow pan/zoom so labels always sit right next to the work area. */
.ruler {
    position: absolute;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 5;
}
.ruler-top  { border-radius: 6px 6px 0 0; }
.ruler-left { border-radius: 6px 0 0 6px; }

.ruler-tick {
    position: absolute;
    background: var(--text-soft);
    opacity: .65;
}
.ruler-top .ruler-tick    { top: auto; bottom: 0; width: 1px; }
.ruler-left .ruler-tick   { left: auto; right: 0; height: 1px; }
/* Tick-length classes are sized in their cross-axis direction */
.ruler-top .ruler-tick.minor    { height: 4px; }
.ruler-top .ruler-tick.medium   { height: 7px; }
.ruler-top .ruler-tick.major    { height: 11px; opacity: .85; }
.ruler-left .ruler-tick.minor   { width: 4px; }
.ruler-left .ruler-tick.medium  { width: 7px; }
.ruler-left .ruler-tick.major   { width: 11px; opacity: .85; }

.ruler-label {
    position: absolute;
    color: var(--text-soft);
    font-size: 9px;
    white-space: nowrap;
    pointer-events: none;
}
.ruler-top  .ruler-label { top: 1px; transform: translateX(2px); }
.ruler-left .ruler-label {
    left: 1px;
    transform: translateY(2px) rotate(-90deg);
    transform-origin: top left;
}

/* === Groups sidebar (right-hand panel, only visible in group-mode) === */
.groups-sidebar {
    grid-area: sidebar;
    width: 240px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: .8rem .8rem 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.groups-sidebar[hidden] { display: none; }
.groups-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.groups-sidebar h2 {
    font-size: 1rem;
    margin: 0;
}
.groups-hint {
    font-size: .8rem;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.35;
}
.btn-groups-new {
    align-self: flex-start;
    margin-top: 0;
}
.groups-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.group-item {
    background: var(--surface-2);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: .55rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: border-color .15s, background .15s;
}
.group-item.active {
    border-color: var(--accent);
    background: var(--surface);
}
.group-item-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.group-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(15, 23, 42, .25);
}
.group-name-input {
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font-size: .9rem;
    padding: 2px 4px;
    border-radius: 4px;
}
.group-name-input:hover { background: var(--surface); }
.group-name-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}
.group-meta {
    font-size: .72rem;
    color: var(--text-soft);
}
.group-actions {
    display: flex;
    gap: .25rem;
}
.group-actions .btn-icon-sm {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.group-actions .btn-icon-sm:hover {
    background: var(--surface);
    color: var(--text);
}
.group-actions .btn-icon-sm[disabled] {
    opacity: .35;
    cursor: not-allowed;
}
.groups-empty {
    color: var(--text-soft);
    font-size: .85rem;
    font-style: italic;
}
.btn-sm {
    font-size: .85rem;
    padding: .35rem .65rem;
    margin-top: 0;
}

/* When in group-management mode the eraser and other tools shouldn't fire —
 * canvas.js handles that, but visually we mark the editor too. */
.editor[data-group-mode="on"] .canvas-inner { cursor: pointer; }
.toolbar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .6rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.tool {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    transition: background .12s, border-color .12s, color .12s;
}
.tool:hover {
    background: var(--mds-color-theme-background-primary-hover);
}
.tool.active {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--button-primary-text);
}
.tool.active:hover {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
}
.tool:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 112, 207, .25);
}

/* Eye-catching styling for high-value tools (the AI button). Subtle gradient
 * + accent border. Stands out without being mistaken for the active-tool state. */
.tool-accent {
    background: linear-gradient(135deg, rgba(99, 102, 241, .15), rgba(168, 85, 247, .15));
    border-color: rgba(99, 102, 241, .55);
    color: var(--accent);
}
.tool-accent:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(168, 85, 247, .25));
    border-color: rgba(99, 102, 241, .85);
}
.tool-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 .25rem;
}
.tool-spacer { flex: 1; }
.swatch {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--c, #ccc);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--border) inset;
}
.swatch.active { border-color: var(--text); }

/* === Right-side sub-strips ===
 * Three mutually-exclusive panels that occupy the same right-edge slot:
 *   - color-strip: visible when picking colours
 *   - line-strip:  visible when any line/curve tool is active
 *   - image-strip: visible on demand via the "Bild" toggle button
 *
 * Visibility is driven by `[data-panel]` on .editor:
 *   data-panel=""        → no panel
 *   data-panel="color"   → color-strip
 *   data-panel="line"    → line-strip
 *   data-panel="image"   → image-strip
 * setTool() in editor.js syncs data-panel to the active tool; the "Bild"
 * button overrides it to "image" until the user picks another tool. */
.color-strip,
.line-strip,
.image-strip,
.history-strip {
    display: none;
}
.editor[data-panel="color"] .color-strip,
.editor[data-panel="line"]  .line-strip,
.editor[data-panel="image"] .image-strip {
    display: flex;
    gap: .35rem;
    padding: .35rem .6rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
}
/* History panel: wider than the strip-style siblings since it holds an
 * action button + a snapshot list. Vertical layout in both narrow and
 * wide viewports. */
.editor[data-panel="history"] .history-strip {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .8rem .9rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
}
.history-strip-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}
.history-undo-btn {
    align-self: stretch;
    justify-content: flex-start;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-top: 0;
    min-height: 40px;
    border-radius: 10px;
}
.history-undo-btn .icon { width: 18px; height: 18px; }
.history-undo-hint {
    margin: -.2rem 0 0;
    font-size: .75rem;
    color: var(--text-soft);
}
.history-divider {
    height: 1px;
    background: var(--border);
    margin: .25rem 0;
}
.history-strip-subtitle {
    margin: 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-soft);
    letter-spacing: .01em;
}

/* Group-mode takes over the right edge with the groups-sidebar — suppress
 * any visible right-edge strip while it's active so the user can focus on
 * picking pieces into the active group without distraction. */
.editor[data-group-mode="on"] .color-strip,
.editor[data-group-mode="on"] .line-strip,
.editor[data-group-mode="on"] .image-strip,
.editor[data-group-mode="on"] .history-strip {
    display: none;
}
/* Compact tool buttons inside the line/image sub-strips — slightly smaller
 * than the main toolbar buttons since they sit in a sub-strip. */
.line-strip .tool,
.image-strip .tool {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

/* === Sewability traffic light === */
.sewability-light {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: 4px 10px 4px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: .75rem;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.sewability-light:hover { background: var(--surface); }
.sewability-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 1px rgba(148,163,184,.35) inset;
}
.sewability-light[data-status="ok"]            { color: #15803d; border-color: rgba(34,197,94,.4); }
.sewability-light[data-status="ok"] .sewability-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.6); }
.sewability-light[data-status="multi_section"] { color: #b45309; border-color: rgba(234,179,8,.5); }
.sewability-light[data-status="multi_section"] .sewability-dot { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,.6); }
.sewability-light[data-status="broken"]        { color: #b91c1c; border-color: rgba(220,38,38,.5); background: rgba(220,38,38,.06); }
.sewability-light[data-status="broken"] .sewability-dot {
    background: #dc2626;
    box-shadow: 0 0 8px rgba(220,38,38,.6);
    animation: sew-pulse 1.4s ease-in-out infinite;
}
@keyframes sew-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* === Sewability modal === */
.sew-modal .sew-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .25rem;
}
.sew-modal .sew-head h1 { margin: 0; font-size: 1.25rem; }
.sew-head-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    flex: 0 0 auto;
}
.sew-head-dot[data-status="ok"]            { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.sew-head-dot[data-status="multi_section"] { background: #eab308; box-shadow: 0 0 0 4px rgba(234,179,8,.18); }
.sew-head-dot[data-status="broken"]        { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
.sew-modal .sew-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: .35rem;
    margin: 1rem 0;
    padding: .6rem;
    background: var(--surface-2);
    border-radius: 12px;
}
.sew-modal .sew-stats > div {
    text-align: center;
}
.sew-modal .sew-stats span {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.sew-modal .sew-stats .sew-stat-warn { color: #b45309; }
.sew-modal .sew-stats label {
    margin: 0;
    color: var(--text-soft);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sew-modal .sew-advice {
    background: var(--surface-2);
    border-radius: 12px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.sew-modal .sew-advice h2 {
    margin: 0 0 .5rem;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-soft);
}
.sew-modal .sew-advice ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .9rem;
}
.sew-modal .sew-advice li + li { margin-top: .5rem; }

/* === Editor mode toggle (Einfach / Pro) === */
.mode-toggle {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    gap: 0;
    flex: 0 0 auto;
}
.mode-toggle button {
    padding: 0 .85rem;
    min-height: 30px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text-soft);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .15s, color .15s;
}
.mode-toggle button.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.mode-toggle button:not(.active):hover {
    color: var(--text);
}

.edit-mode-toggle button {
    padding: 0 .55rem;
    min-height: 28px;
    font-size: .72rem;
}

/* Info icon next to mode pills */
.pill-group {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}
.btn-info {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-soft);
    font-style: italic;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.btn-info:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--text-soft);
}

/* Info-popover content layout */
.popover .info-list { display: flex; flex-direction: column; gap: 1.25rem; }
.popover .info-item strong {
    display: block;
    margin-bottom: .4rem;
    font-size: .95rem;
}
.popover .info-item p {
    margin: 0;
    color: var(--text-soft);
    font-size: .88rem;
    line-height: 1.55;
}

/* Hide Pro-only controls in Einfach mode */
body.mode-einfach .pro-only { display: none !important; }

/* Confirm modal button stack */
.confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.25rem;
}
.confirm-buttons .btn { margin-top: 0; }

/* === Wide layout (iPad landscape, desktop) ===
 * Topbar stays at the top; toolbar moves to the left edge as a vertical strip;
 * color palette moves to the right edge (also vertical). Canvas takes the
 * middle, growing in both axes. Triggered at 900px (covers iPad landscape
 * and bigger; iPad portrait keeps the phone-style bottom layout). */
@media (min-width: 900px) {
    .editor {
        grid-template-areas:
            "topbar topbar topbar"
            "tools  canvas swatches";
        grid-template-columns: auto 1fr auto;
        /* minmax(0, 1fr) again — the toolbar/palette tracks would otherwise
         * inflate the row to their content height. */
        grid-template-rows: auto minmax(0, 1fr);
    }
    .editor > .topbar      { grid-area: topbar; }
    .editor > .canvas-wrap { grid-area: canvas; }
    .editor > .toolbar     { grid-area: tools; }
    /* color-strip / line-strip / image-strip share the right column —
     * only one is ever visible at a time (data-panel rule above), so they
     * never fight for space. */
    .editor > .color-strip   { grid-area: swatches; }
    .editor > .line-strip    { grid-area: swatches; }
    .editor > .image-strip   { grid-area: swatches; }
    .editor > .history-strip { grid-area: swatches; width: 260px; }

    .toolbar {
        flex-direction: column;
        align-items: center;
        padding: .6rem .5rem;
        gap: .35rem;
        border-top: none;
        border-right: 1px solid var(--border);
        overflow-x: hidden;
        overflow-y: auto;
        min-width: 64px;
        /* allow this grid item to shrink so its overflow-y can take over */
        min-height: 0;
        max-height: 100%;
    }
    .tool-divider {
        width: 28px;
        height: 1px;
        margin: .25rem 0;
    }
    .tool-spacer {
        flex: 1;
        width: 1px;
        height: auto;
        min-height: .5rem;
    }

    /* In the wide layout the visible strip becomes a vertical column on the
     * right edge. Visibility is still gated by the [data-panel] rule above —
     * so these rules only kick in for the ONE strip that's actually on. */
    .editor[data-panel="color"] .color-strip,
    .editor[data-panel="line"]  .line-strip,
    .editor[data-panel="image"] .image-strip {
        flex-direction: column;
        align-items: center;
        padding: .5rem .35rem;
        gap: .35rem;
        border-top: none;
        border-left: 1px solid var(--border);
        overflow-x: hidden;
        overflow-y: auto;
        min-width: 56px;
        min-height: 0;
        max-height: 100%;
    }
    /* History panel keeps its native vertical-list layout but switches the
     * top border for a left border to match the other right-edge strips. */
    .editor[data-panel="history"] .history-strip {
        border-top: none;
        border-left: 1px solid var(--border);
    }
}

/* Save indicator */
.save-status {
    color: var(--text-soft);
    font-size: .8rem;
    padding: 0 .5rem;
}
.save-status.saving { color: var(--accent); }
.save-status.error { color: var(--danger); }

/* === Icons ===
 * Momentum SVGs are FILLED (32×32 viewBox, single combined path with
 * fill:currentColor). The legacy stroke-based icon rules are kept under
 * .icon-stroke for the few hand-rolled glyphs we still use (curves,
 * arcs, etc. — they don't exist in Momentum's set). */
.icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}
.icon-stroke {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
/* Rainbow droplet keeps its inline-gradient fill plus a dark stroke. */
.icon-rainbow { stroke: none; fill: none; }
.tool.active .icon-rainbow path { stroke: white; }

/* Divider with text in login card */
.divider {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.2rem 0 .8rem;
    color: var(--text-soft);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Guest banner — shown above content for unupgraded guests */
.guest-banner {
    margin: 1rem 1.2rem 0;
    padding: .8rem 1rem;
    background: rgba(99, 102, 241, .1);
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    color: var(--text);
    font-size: .9rem;
}
.guest-banner > span { flex: 1; min-width: 12em; }
.guest-banner .btn { margin: 0; }

/* Modal — generic full-screen overlay */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 1rem;
}
.modal-overlay .card {
    /* Explicit opaque background — without this, certain cascade orderings
     * have rendered the modal as transparent over the dimmed backdrop. */
    background: #ffffff;
    max-width: 420px;
    /* Cap height to viewport so tall modals (like the auto-lines panel
     * with all its sliders) stay reachable on small screens.
     * `dvh` accounts for iOS Safari's collapsing toolbar. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    /* Smooth-scroll inside the modal on iOS */
    -webkit-overflow-scrolling: touch;
}
.modal-overlay .card h1 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
}
/* Sticky footer for action buttons inside scrollable modals.
 * Mark the wrapping container with .modal-actions to use this pattern. */
.modal-overlay .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    margin: 1rem -1.5rem -1.5rem;
    padding: .75rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border);
    /* Fade-out at top so scrolled content peeks behind the sticky bar */
    box-shadow: 0 -8px 12px -8px rgba(15, 23, 42, .08);
}
.modal-overlay .modal-actions .btn-block { margin-top: .5rem; }
.modal-overlay .modal-actions .btn-block:first-child { margin-top: 0; }

/* Popovers (Snap, Symmetry) */
.popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, .25);
}
.popover {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(15,23,42,.3);
    width: min(360px, calc(100vw - 16px));
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.popover-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 70vh;
    animation: popover-slide-up .2s ease;
}
@keyframes popover-slide-up { from { transform: translateY(100%); } to { transform: none; } }

.popover-header {
    display: flex;
    align-items: center;
    padding: .8rem 1rem .4rem;
    border-bottom: 1px solid var(--border);
}
.popover-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: -.01em;
}
.popover-close { width: 36px; height: 36px; }

.popover-body {
    overflow-y: auto;
    padding: .5rem 0;
}
.popover-section {
    padding: .8rem 1rem;
}
.popover-section + .popover-section {
    border-top: 1px solid var(--border);
}
.popover-title {
    font-size: .8rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .5rem;
}
.popover-hint {
    color: var(--text-soft);
    font-size: .8rem;
    margin: .5rem 0 0;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .5rem;
}
.option-btn {
    min-height: 44px;
    padding: 0 .6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.option-btn:hover { background: var(--surface); }
.option-btn.active {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--button-primary-text);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    padding: .25rem 0;
    font-size: 1rem;
    margin-top: 0;
}
.checkbox-row input[type="checkbox"] {
    width: 22px; height: 22px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Auto-Lines warning banner */
.autoline-warning {
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .5);
    border-radius: 10px;
    padding: .65rem .8rem;
    margin: .5rem 0 1rem;
    font-size: .9rem;
    color: var(--text);
    line-height: 1.4;
}
.autoline-warning strong {
    display: block;
    margin-bottom: .2rem;
    color: #b45309;
}

/* "Neuer Quilt" preset row + side-by-side size inputs */
.preset-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin-top: .25rem;
}
.preset-btn {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.preset-btn:hover { background: var(--surface); }
.preset-btn.active {
    background: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--button-primary-text);
}
.size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1rem;
}
.size-row label { margin-top: 0; }

/* History list */
.history-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: .5rem 0 1rem;
    max-height: 50vh;
    overflow-y: auto;
}
.history-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.history-meta {
    flex: 1;
    min-width: 0;
}
.history-when {
    font-size: .9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-abs {
    color: var(--text-soft);
    font-size: .8rem;
}
.history-stats {
    color: var(--text-soft);
    font-size: .75rem;
    margin-top: .15rem;
}
.history-row .btn {
    margin: 0;
    flex: 0 0 auto;
    font-size: .85rem;
    padding: .4rem .8rem;
    min-height: 36px;
}
.history-row .btn[disabled] {
    opacity: .55;
    cursor: default;
}

/* AI prompt suggestion buttons */
.suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0 .25rem;
}
.suggestion-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.suggestion-btn:hover {
    background: var(--surface);
    border-color: var(--accent);
}

/* AI spinner */
.ai-spinner {
    width: 28px;
    height: 28px;
    margin-top: .8rem;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ai-spin .9s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Admin gallery */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.2rem;
}
.admin-card {
    background: var(--surface);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.admin-card .thumb {
    aspect-ratio: 1;
    background: var(--surface-2) center/cover no-repeat;
    border-bottom: 1px solid var(--border);
}
.admin-card .thumb.empty {
    display: grid;
    place-items: center;
    color: var(--text-soft);
    font-size: .85rem;
}
.admin-card .body {
    padding: .65rem .8rem;
    font-size: .85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.admin-card .prompt {
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.admin-card .meta {
    color: var(--text-soft);
    font-size: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}
.admin-card .status-pill {
    display: inline-block;
    padding: .1em .5em;
    border-radius: 999px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.status-succeeded { background: rgba(34,197,94,.15); color: #15803d; }
.status-failed    { background: rgba(220,38,38,.15); color: #b91c1c; }
.status-pending,
.status-running   { background: rgba(99,102,241,.15); color: #4338ca; }


/* === User menu (hamburger dropdown) === */
.user-menu-trigger {
    background: transparent;
}
.user-menu-dropdown {
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08);
    min-width: 240px;
    overflow: hidden;
    animation: user-menu-pop .12s ease-out;
}
@keyframes user-menu-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.user-menu-header {
    padding: .75rem 1rem .55rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.user-menu-header .user-email {
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-all;
}
.user-menu-header.guest .muted {
    font-size: .8rem;
    color: var(--text-soft);
    font-style: italic;
}
.user-menu-body {
    display: flex;
    flex-direction: column;
    padding: .35rem 0;
}
.user-menu-item {
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: .55rem 1rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    transition: background .1s;
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item.primary {
    color: var(--accent);
    font-weight: 600;
}
.user-menu-item.danger:hover {
    background: rgba(220,38,38,.10);
    color: var(--danger);
}

/* === Image-size modal (post-upload aspect ratio dialog) === */
.image-size-card .subtle {
    color: var(--text-soft);
    font-size: .85rem;
    margin: 0 0 1rem;
}
.image-size-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem;
    margin: .5rem 0 1rem;
}
@media (max-width: 540px) {
    .image-size-grid { grid-template-columns: 1fr; }
}
.image-size-preview {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .5rem;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    align-items: center;
}
.image-size-preview img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 6px;
    background: white;
}
.image-size-info {
    font-size: .78rem;
    color: var(--text-soft);
}
.image-size-form {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.image-size-row {
    display: grid;
    grid-template-columns: 70px 1fr 80px;
    align-items: center;
    gap: .4rem;
    margin-top: 0;
}
.image-size-row > span {
    font-size: .9rem;
    color: var(--text-soft);
}
.image-size-row input[type="number"] {
    margin-top: 0;
    padding: .5rem .6rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.image-size-row select {
    padding: .5rem .4rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.image-size-lock {
    margin-top: .25rem;
}
.image-size-area {
    font-size: .85rem;
    color: var(--text-soft);
    margin-top: .25rem;
}

/* ──────────────────────────────────────────────────────────────────
   Phase 7 — community: bell, badges, qotd, profile-actions, reports
   ─────────────────────────────────────────────────────────────── */

/* Notifications bell button + panel */
.bell-slot { position: relative; }
.bell-btn {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.bell-btn:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); }
.bell-icon { font-size: 18px; line-height: 1; }
.bell-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #d23b3b; color: #fff;
    border-radius: 9px; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--bg, #f5efe4);
}
.bell-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: min(380px, 92vw);
    max-height: 70vh; overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 18px 60px -10px rgba(0,0,0,.18);
    z-index: 80;
}
.bell-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: sticky; top: 0; background: #fff;
}
.bell-list { list-style: none; padding: 0; margin: 0; }
.bell-empty { padding: 1.25rem; text-align: center; }
.bell-item {
    display: flex; gap: .5rem; align-items: flex-start;
    padding: .65rem 1rem; cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .12s;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: rgba(17, 112, 207, .05); }
.bell-item.unread { background: rgba(17, 112, 207, .04); }
.bell-item.unread .bell-item-body { font-weight: 600; }
.bell-item-body { flex: 1; font-size: .9rem; line-height: 1.35; }
.bell-item-time { font-size: .75rem; opacity: .55; white-space: nowrap; }
.btn-link {
    background: none; border: none; padding: 0;
    color: var(--accent, #1170cf); cursor: pointer;
    font-size: .85rem; text-decoration: underline;
}

/* Profile actions row + XP + Badges */
.profile-actions {
    margin-top: .75rem;
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.btn-icon {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

.profile-xp-row {
    margin: 1.5rem 0 .5rem;
    padding: 0 1rem;
}
.xp-bar {
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    padding: .65rem .9rem;
}
.xp-bar-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .35rem;
    font-size: .85rem;
}
.xp-level { font-weight: 600; }
.xp-numbers { opacity: .6; font-size: .8rem; }
.xp-bar-track {
    height: 8px; background: rgba(0,0,0,.06);
    border-radius: 4px; overflow: hidden;
}
.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1170cf, #4ea9ff);
    transition: width .3s ease;
}

.profile-badges-row {
    margin: .5rem 0 1.5rem;
    padding: 0 1rem;
}
.badges-empty { padding: 1rem 0; font-size: .9rem; }
.badges-grid {
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.badge-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem;
    background: linear-gradient(135deg, #fff8e7, #ffe9bd);
    border: 1px solid rgba(180, 130, 40, .25);
    border-radius: 999px;
    font-size: .8rem; font-weight: 500;
    color: #6d4a10;
}
.badge-icon { font-size: .95rem; line-height: 1; }

.profile-stat.clickable { cursor: pointer; }
.profile-stat.clickable:hover .profile-stat-num { color: var(--accent, #1170cf); }

/* Follow list modal */
.follow-list { list-style: none; padding: 0; margin: 0; }
.follow-list-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .9rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.follow-list-item:last-child { border-bottom: 0; }
.follow-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    color: #fff; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.follow-meta { display: flex; flex-direction: column; min-width: 0; }
.follow-name {
    font-weight: 500; color: inherit; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.follow-name:hover { text-decoration: underline; }
.follow-handle { font-size: .8rem; opacity: .55; }

/* Quilt of the Day */
.qotd-section { padding: 1rem 0; }
.home-section-subtitle { opacity: .6; margin: 0 0 .85rem; font-size: .9rem; }
.qotd-banner {
    background: linear-gradient(135deg, rgba(17, 112, 207, .07), rgba(255, 200, 100, .12));
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.05);
}
.qotd-card-wrap { max-width: 480px; margin: 0 auto; }

/* Report modal — reasons fieldset */
.reason-fieldset {
    border: none; padding: 0; margin: 0 0 .75rem;
}
.reason-fieldset legend {
    font-weight: 600; padding: 0; margin-bottom: .35rem;
}
.reason-row {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .15rem; cursor: pointer;
}
.reason-row input[type=radio] { margin: 0; }

/* Admin reports */
.admin-toolbar { margin-left: auto; }
.report-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
}
.report-card-head {
    display: flex; align-items: center; gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.report-reason {
    text-transform: uppercase; font-size: .75rem; font-weight: 700;
    background: rgba(210, 60, 60, .12); color: #b03030;
    padding: .15rem .55rem; border-radius: 4px;
    letter-spacing: .04em;
}
.report-status {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    padding: .12rem .55rem; border-radius: 4px;
    background: rgba(0,0,0,.06);
}
.report-status-open { background: rgba(210, 60, 60, .12); color: #b03030; }
.report-status-reviewing { background: rgba(220, 150, 30, .15); color: #8a5b00; }
.report-status-resolved { background: rgba(60, 160, 90, .15); color: #226c3b; }
.report-status-dismissed { background: rgba(0,0,0,.06); color: #555; }
.report-meta { font-size: .8rem; opacity: .6; margin-left: auto; }
.report-target { font-size: .95rem; margin: .25rem 0 .5rem; }
.report-note {
    border-left: 3px solid rgba(0,0,0,.15);
    padding: .35rem .75rem; margin: .5rem 0;
    font-style: italic; opacity: .8;
}
.report-mod-note { font-size: .85rem; opacity: .8; margin: .5rem 0; }
.report-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .65rem; }
.btn-sm { padding: .25rem .65rem; font-size: .8rem; }

/* Honeypot field — visually hidden but valid form input. */
.hp-trap { display: block; }