/*
 * Bespoke app styles, layered on top of:
 *   1. lib/basecoat/basecoat-mira.min.css  (Basecoat UI, Mira style — component
 *      structure/sizing, e.g. .btn, .field, .input, .card, .alert, .select)
 *   2. css/theme.css                        (Bamboo Breeze color tokens)
 *
 * Everything below should read colors/spacing from the CSS custom properties
 * those two files define (--background, --foreground, --card, --primary,
 * --muted, --border, --radius, --spacing, ...) rather than hard-coding
 * values, so a future theme swap (see theme.css) only touches that one file.
 */

* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}

:root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* ---------------------------------------------------------------------
 * Mobile touch-target overrides
 *
 * Basecoat's Mira style targets dense, mouse-driven admin UIs: default
 * controls are ~28px tall with 12-14px text. This app is an always-mobile
 * PWA, so interactive controls are bumped to Apple HIG / Material minimums
 * (44pt / 48dp) and text inputs to 16px, which also stops iOS Safari from
 * auto-zooming the page when a field is focused.
 * ------------------------------------------------------------------- */

.btn {
    min-height: 2.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-user-select: none;
}

.btn[data-size="icon"] {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
}

.btn.primary,
.btn[data-variant="primary"] {
    background: linear-gradient(135deg, rgb(78 125 122) 0%, rgb(52 94 91) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(78, 125, 122, 0.28), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.primary:hover,
.btn[data-variant="primary"]:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(78, 125, 122, 0.38);
}

.btn.primary:active,
.btn[data-variant="primary"]:active {
    transform: translateY(0.5px);
    box-shadow: 0 2px 6px rgba(78, 125, 122, 0.2);
}

.btn.danger,
.btn[data-variant="destructive"] {
    background: linear-gradient(135deg, rgb(215 85 100) 0%, rgb(185 60 75) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(208, 79, 94, 0.28);
}

.btn.danger:hover,
.btn[data-variant="destructive"]:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(208, 79, 94, 0.38);
}

.btn[data-variant="outline"] {
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgb(198 206 200);
    color: var(--foreground);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn[data-variant="outline"]:hover {
    background: rgb(240 245 242);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(78, 125, 122, 0.15);
}

/* Matches Basecoat's own [type=...] compound-selector specificity so this
   reliably wins the cascade (Basecoat sets font-size via .input[type=...]
   rules, not the bare .input class). */
.input[type],
.input:not([type]),
select.select,
.select,
textarea,
.textarea {
    min-height: 2.85rem;
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid rgb(195 204 198);
    border-radius: 0.85rem;
    background-color: rgb(249 250 246);
    color: var(--foreground);
    box-shadow: inset 0 1px 2px rgba(28, 42, 41, 0.04);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.dark .input[type],
.dark .input:not([type]),
.dark select.select,
.dark .select,
.dark textarea,
.dark .textarea {
    border-color: rgb(65 78 75);
    background-color: rgb(24 31 29);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.input[type]:hover,
.input:not([type]):hover,
select.select:hover,
.select:hover,
textarea:hover,
.textarea:hover {
    border-color: rgb(150 174 168);
    background-color: #ffffff;
}

.dark .input[type]:hover,
.dark .input:not([type]):hover,
.dark select.select:hover,
.dark .select:hover,
.dark textarea:hover,
.dark .textarea:hover {
    border-color: rgb(85 105 100);
    background-color: rgb(30 38 36);
}

.input[type]:focus,
.input:not([type]):focus,
select.select:focus,
.select:focus,
textarea:focus,
.textarea:focus {
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(78, 125, 122, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.02);
    outline: none;
}

.dark .input[type]:focus,
.dark .input:not([type]):focus,
.dark select.select:focus,
.dark .select:focus,
.dark textarea:focus,
.dark .textarea:focus {
    background-color: rgb(21 27 26);
    box-shadow: 0 0 0 3.5px rgba(78, 125, 122, 0.35);
}

::placeholder,
.input::placeholder,
textarea::placeholder {
    color: rgb(125 142 138);
    opacity: 0.85;
    font-style: italic;
    font-weight: 400;
}

textarea,
.textarea {
    min-height: 5.5rem;
    line-height: 1.5;
}

.input[type="color"] {
    width: 3.5rem;
    padding: 0.25rem;
    border-radius: var(--radius-md, var(--radius));
    border: 1.5px solid rgb(185 190 185);
    background: var(--card);
}

.input[type="file"] {
    padding-block: 0.5rem;
}


/* Inline text-link button (no border, no background) */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
}
.btn-link:hover { opacity: 0.75; }

.add-private-note-btn { color: var(--primary); }
.clear-private-note-btn { color: var(--destructive, #c0392b); font-size: 0.875rem; }

/* Private notes label + clear button inline */
.private-notes-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.private-notes-label-row label { margin-bottom: 0; }

/* -----------------------------------------------------------------------
 * Custom background picker
 * --------------------------------------------------------------------- */
.bg-picker {
    position: relative;
}

.bg-picker-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.45rem 0.75rem;
    background: var(--card, #fff);
    border: 1.5px solid rgb(185 190 185);
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    font-size: 1rem;
    color: var(--foreground);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
}
.bg-picker-trigger:hover {
    border-color: rgb(140 165 155);
    background-color: rgb(248 250 249);
}
.bg-picker-trigger:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3.5px rgba(78,125,122,0.22);
}

.bg-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 2.4rem;
    height: 1.6rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-label {
    flex: 1;
}

.bg-chevron {
    flex-shrink: 0;
    color: var(--muted-foreground, #888);
    transition: transform 0.2s;
}
.bg-picker-trigger[aria-expanded="true"] .bg-chevron {
    transform: rotate(180deg);
}

.bg-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 200;
    background: var(--card, #fff);
    border: 1.5px solid rgb(185 190 185);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 18rem;
    overflow-y: auto;
}

.bg-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0.35rem;
    background: none;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--foreground);
    text-align: left;
    transition: background 0.12s;
}
.bg-option:hover { background: var(--muted, #f1f5f9); }
.bg-option.is-selected {
    background: rgba(78, 125, 122, 0.1);
    font-weight: 600;
}
.bg-option .bg-swatch {
    width: 3rem;
    height: 1.6rem;
}

.bg-option-row {
    display: flex;
    align-items: center;
    border-radius: 0.35rem;
    transition: background 0.12s;
    position: relative;
}
.bg-option-row:hover {
    background: var(--muted, #f1f5f9);
}
.bg-option-row.is-selected {
    background: rgba(78, 125, 122, 0.1);
    font-weight: 600;
}
.bg-option-row .bg-option {
    flex: 1;
    min-width: 0;
}
.bg-option-row .bg-option:hover {
    background: none;
}
.bg-option-row.is-selected .bg-option {
    background: none;
}

.bg-option-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.4rem;
    flex-shrink: 0;
}

.bg-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    color: var(--muted-foreground, #64748b);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bg-action-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--foreground);
}
.bg-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--destructive, #ef4444);
}

.bg-quadratic-preview-container {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background: var(--muted, #f8fafc);
    border-radius: var(--radius-md, 0.5rem);
    border: 2px dashed var(--border, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.bg-quadratic-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ---------------------------------------------------------------------
 * Layout shell
 * ------------------------------------------------------------------- */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-header .brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none;
}

.user-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
}

.user-nav span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.user-nav a,
.user-nav button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--primary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0.5rem 0.125rem;
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

/* Our custom tab strip happens to share Basecoat's ".tabs" component class
   name and also carries role="tablist" (for a11y), both of which Basecoat's
   own Tabs component styles with its own layout assumptions (a wrapper with
   a *nested* tablist, stacked into a column, fixed-height pill strip). All
   of Basecoat's rules live in `@layer components`, and unlayered rules like
   this one always win the cascade over layered ones regardless of
   specificity, so every property Basecoat sets on .tabs/[role=tablist] is
   pinned back to what this bar actually needs. */
nav.tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: auto;
    overflow-x: auto;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 0;
    background: var(--card);
    color: inherit;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
}

nav.tabs button {
    flex: 1 0 auto;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md, var(--radius));
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

nav.tabs button.active {
    background: var(--primary);
    color: var(--primary-foreground);
}

.tab-content {
    padding: 1rem;
    max-width: 40rem;
    margin: 0 auto;
}

.center {
    text-align: center;
}

/* ---------------------------------------------------------------------
 * Alerts (paired with Basecoat's .alert component; .alert[data-variant]
 * covers the "default"/"destructive" cases, "success" is bespoke since
 * neither Basecoat nor the Bamboo Breeze theme define a positive token)
 * ------------------------------------------------------------------- */

.alert[data-variant="success"] {
    background-color: rgb(198 246 213);
    color: rgb(34 84 61);
    border-color: rgb(154 230 180);
}

.dark .alert[data-variant="success"] {
    background-color: rgb(20 45 34);
    color: rgb(154 230 180);
    border-color: rgb(39 90 62);
}

/* ---------------------------------------------------------------------
 * Parts
 * ------------------------------------------------------------------- */

.parts-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem;
    min-height: 2.75rem;
}

.parts-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--card);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg, var(--radius));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.parts-empty-state .empty-illustration {
    max-width: 180px;
    height: auto;
    margin-bottom: 0.5rem;
}

.parts-empty-state h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--foreground);
}

.parts-empty-state p {
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    max-width: 24rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * Modal Dialog (above whole UI)
 * ------------------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(14, 19, 18, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

.modal-card {
    position: relative;
    margin: auto;
    background: var(--card, #ffffff);
    color: var(--card-foreground, inherit);
    border: 1.5px solid rgba(78, 125, 122, 0.2);
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px -15px rgba(28, 42, 41, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 32rem;
    max-height: calc(100dvh - 2rem);
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    animation: modal-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    width: 100%;
    overflow: hidden;
}

.modal-sticky-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem 1rem;
    background: var(--card);
    border-bottom: 1.5px solid var(--border);
    z-index: 30;
}

.modal-sticky-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.35rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.constellation-editor-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.constellation-modal-backdrop {
    z-index: 9990;
}

.part-modal-backdrop {
    z-index: 10000;
}

.bg-modal-backdrop {
    z-index: 10100;
}

.delete-bg-modal-backdrop {
    z-index: 10200;
}

.constellation-modal-card {
    max-width: 38rem;
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-close-btn {
    min-height: 2.35rem;
    height: 2.35rem;
    width: 2.35rem;
    min-width: 2.35rem;
    padding: 0;
    color: var(--foreground);
    background: rgba(78, 125, 122, 0.08);
    border: 1.5px solid rgba(78, 125, 122, 0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    transform: none !important;
}

.modal-close-btn:hover {
    color: var(--primary);
    background-color: rgba(78, 125, 122, 0.16);
    transform: none !important;
}

.modal-close-btn:active {
    background-color: rgba(78, 125, 122, 0.25);
    transform: none !important;
}

.modal-close-btn svg {
    transition: none !important;
    transform: none !important;
}

.part-subscreen .part-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.part-subscreen .part-form-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.part-form .preview {
    max-width: 100%;
    max-height: 8rem;
    border-radius: var(--radius-md, var(--radius));
    margin-top: 0.5rem;
    object-fit: cover;
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.color-value {
    font-family: var(--font-mono, monospace);
    font-size: 0.9375rem;
    color: var(--muted-foreground);
}

/* File upload widget */
.file-upload-widget {
    margin-top: 0.25rem;
}

.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.upload-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    border: 1.5px dashed rgb(185 190 185);
    border-radius: var(--radius-md, var(--radius));
    background: var(--card);
}

.dark .upload-controls {
    border-color: rgb(65 78 75);
}

.upload-hint {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.upload-preview-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1.5px solid rgb(185 190 185);
    border-radius: var(--radius-md, var(--radius));
    background: var(--card);
}

.dark .upload-preview-card {
    border-color: rgb(65 78 75);
}

.preview-thumbnail {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-md, var(--radius));
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
}

.part-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.part-item {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, var(--radius));
    margin-bottom: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, margin-top 0.2s cubic-bezier(0.2, 0, 0, 1), margin-bottom 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-sizing: border-box;
    width: 100%;
}

.part-item.is-live-dragging {
    background: var(--muted);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(45, 106, 79, 0.22);
    transform: scale(1.02);
    z-index: 10;
}

.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    cursor: grab;
    padding: 0.25rem;
    border-radius: var(--radius);
    transition: color 0.15s, background-color 0.15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    flex: 0 0 auto;
}

.drag-handle:hover {
    color: var(--foreground);
    background-color: var(--muted);
}

.part-item:active .drag-handle {
    cursor: grabbing;
}

.part-color {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid var(--border);
}

.part-thumb {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--radius-md, var(--radius));
}

.part-info {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.part-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.part-desc {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.part-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.empty {
    color: var(--muted-foreground);
    text-align: center;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------------
 * Constellation
 * ------------------------------------------------------------------- */

.constellation-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.75rem;
    min-height: 2.75rem;
}

.constellation-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, var(--radius));
    background: var(--card);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.constellation-part {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translate(-50%, -50%);
    cursor: grab;
    border: 2px solid var(--card);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 0.75rem;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.constellation-part img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.constellation-part span {
    pointer-events: none;
    padding: 0.125rem;
}

.part-palette {
    margin-top: 0.75rem;
}

.palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.palette-header h3 {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.part-palette h3 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.empty-palette {
    text-align: center;
    padding: 1.25rem 0.5rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg, var(--radius));
    background: var(--card);
}

.empty-palette .empty-subtitle {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.palette-list {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    padding: 0.65rem 0.35rem 0.5rem 0.35rem;
    scrollbar-width: thin;
}

.palette-part {
    flex: 0 0 auto;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 9999px;
    border: 1.5px solid rgb(198 206 200);
    background: var(--card);
    color: var(--card-foreground);
    font: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: grab;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(28, 42, 41, 0.05);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-user-drag: element;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.palette-part:active {
    cursor: grabbing;
}

.palette-part img,
.palette-part span {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.palette-part img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.constellation-canvas.is-drag-over {
    border-color: var(--primary);
    box-shadow: 0 0 0 3.5px rgba(78, 125, 122, 0.35);
}

.palette-drag-avatar {
    position: fixed;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100000;
    border: 2.5px solid #ffffff;
    box-shadow: 0 10px 25px rgba(28, 42, 41, 0.4), 0 3px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0.95;
}

.palette-drag-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.palette-drag-avatar span {
    padding: 0.15rem;
    line-height: 1.1;
    word-break: break-word;
}

.constellation-form {
    margin-top: 1rem;
}

/* Shared button-row layout for both .part-form and .constellation-form. */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* =======================================================================
 * Identity UI compatibility shim
 *
 * Login/Register/etc. come from the packaged Microsoft.AspNetCore.Identity.UI
 * Razor Class Library, which ships Bootstrap 5 markup. This app doesn't load
 * Bootstrap, so this is a small, targeted shim covering just the classes
 * those pages actually emit, restyled with the app's own tokens and sized
 * for touch.
 * ===================================================================== */

.form-floating {
    position: relative;
    margin-bottom: 1rem;
}

.form-floating > .form-control {
    height: 3.25rem;
    padding: 1.375rem 0.75rem 0.375rem;
}

/* The scaffolded markup gives inputs a real placeholder (e.g. "name@example.com")
   as the classic Bootstrap floating-label trick expects: hidden until the
   label has floated out of the way on focus/fill, otherwise it doubles up
   with the label text. */
.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem;
    color: var(--muted-foreground);
    font-size: 1rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.8) translateY(-0.6rem);
    color: var(--muted-foreground);
}

.form-control {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--foreground);
    background: var(--input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, var(--radius));
}

.form-control:focus {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.btn-primary,
.btn-secondary,
.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--radius-md, var(--radius));
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

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

.btn-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-link {
    background: none;
    color: var(--primary);
    padding-inline: 0;
}

.btn-lg {
    min-height: 3rem;
    font-size: 1.0625rem;
}

.w-100 {
    width: 100%;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-3 {
    margin-top: 1rem;
}

.text-danger {
    color: var(--destructive);
}

.validation-summary-errors,
.text-danger.validation-summary-errors {
    display: block;
    margin-bottom: 1rem;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.row > [class*="col-"] {
    padding: 0 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* The packaged Identity UI pages (Login/Register/etc.) render straight into
   <body> with no wrapping container of their own, unlike the SPA shell
   (which manages its own edge-to-edge header/tabs deliberately) - so they
   get their own padding here, scoped by the body class _Layout.cshtml sets
   for anything under /Identity. */
body.identity-page {
    padding: 1rem;
    max-width: 40rem;
    margin-inline: auto;
}

body.identity-page h1 {
    margin-top: 0;
}

/* ---------------------------------------------------------------------
 * History
 * ------------------------------------------------------------------- */

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.history-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, var(--radius));
}

.history-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.history-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.history-date {
    font-weight: 600;
    font-size: 0.95rem;
}

.history-duration {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    background: var(--secondary);
    color: var(--secondary-foreground);
    border-radius: var(--radius-md, var(--radius));
}

.history-notes {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0.25rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.history-private-notes {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.25rem 0;
}

.history-parts-count {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}

.history-mini-canvas-container {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    height: 5.5rem;
    align-self: center;
}

.history-mini-canvas {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: var(--radius-md, var(--radius));
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--muted);
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.history-mini-part {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fused Constellation Header Actions */
.constellation-header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Digital Clock with softly blinking colon */
.digital-clock {
    display: inline-flex;
    align-items: center;
    font-family: ui-monospace, 'SF Mono', 'Roboto Mono', 'Cascadia Code', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(45, 106, 79, 0.15);
    color: var(--primary, #2d6a4f);
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgba(45, 106, 79, 0.35);
    box-shadow: 0 1px 3px rgba(45, 106, 79, 0.1);
}

.clock-colon {
    display: inline-block;
    margin: 0 1.5px;
    animation: softColonBlink 1.5s ease-in-out infinite;
}

@keyframes softColonBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.18;
    }
}

/* Running Constellation Card (Green box) */
.running-card {
    border: 2px solid var(--primary, #2d6a4f) !important;
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.07) 0%, rgba(45, 106, 79, 0.13) 100%) !important;
    box-shadow: 0 4px 16px rgba(45, 106, 79, 0.15);
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.running-badge-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.running-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary, #2d6a4f);
    background: rgba(45, 106, 79, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.running-dot {
    width: 7px;
    height: 7px;
    background-color: var(--primary, #2d6a4f);
    border-radius: 50%;
    animation: pulseGreenDot 2s infinite ease-in-out;
}

@keyframes pulseGreenDot {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* Shared Constellation Cards, Canvas, and Fold Button */
.shared-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: var(--radius-lg, var(--radius)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important; /* Never let flexbox compress card into a slim line */
}

.shared-card.is-expanded {
    box-shadow: 0 6px 24px rgba(45, 106, 79, 0.18) !important;
}

.shared-card:not(.is-expanded) {
    cursor: pointer;
}

.shared-card.running-card {
    border: 2px solid var(--primary, #2d6a4f) !important;
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.07) 0%, rgba(45, 106, 79, 0.13) 100%) !important;
    margin-bottom: 0 !important;
}

.shared-card.history-item-card {
    border: 1.5px solid var(--border) !important;
    background: var(--card) !important;
}

.shared-card.history-item-card.is-expanded {
    border-color: var(--primary, #2d6a4f) !important;
    box-shadow: 0 6px 24px rgba(45, 106, 79, 0.15) !important;
}

.shared-canvas {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
    flex: 0 0 auto !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-lg, var(--radius)) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.shared-canvas .constellation-part {
    cursor: default;
}

/* Fold Button: Up arrow button at bottom of expanded box */
.shared-fold-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted-foreground);
    background: rgba(0, 0, 0, 0.03);
    border: none;
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-radius: 0 0 var(--radius-lg, var(--radius)) var(--radius-lg, var(--radius));
}

.shared-fold-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--foreground);
}

.shared-fold-btn svg {
    transition: transform 0.2s ease;
}

.shared-fold-btn:hover svg {
    transform: translateY(-2px);
}

/* Clickable History Cards */
.clickable-history-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.clickable-history-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* Tray / Palette Placed State */
.palette-part {
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.palette-part.is-placed {
    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
    position: relative;
}

.palette-part.is-placed::after {
    content: "✓";
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, rgb(78 125 122) 0%, rgb(45 106 79) 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

/* Part Placement Animation (First time placed via tap) */
.constellation-part.part-just-placed {
    animation: partEnterAnimation 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes partEnterAnimation {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2) translateY(50px);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }
}

/* Depth labels for constellation canvas (Top = In Front, Bottom = Background) */
.canvas-depth-label {
    flex: 0 0 auto;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    padding: 0;
    line-height: 1.1;
}

.canvas-depth-label.top-label {
    margin-bottom: 0.1rem;
}

.canvas-depth-label.bottom-label {
    margin-top: 0.1rem;
    margin-bottom: 0.5rem;
}

/* Visually hidden screen-reader utility (hides duplicate headers visually without breaking a11y) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
 * App Splash & Opening Animation (~1s)
 * =================================================================== */
.app-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: splashFadeOut 1.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.splash-logo-img {
    width: 200px;
    height: 200px;
    padding: 16px;
    background-color: #f3ede6;
    border-radius: 22%;
    box-sizing: border-box;
    object-fit: contain;
    box-shadow: 0 12px 28px rgba(45, 106, 79, 0.16);
    animation: splashLogoZoomIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.splash-brand-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--foreground);
    animation: splashTextRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes splashLogoZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}

@keyframes splashTextRise {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes splashFadeOut {
    0% {
        opacity: 1;
        pointer-events: all;
    }
    78% {
        opacity: 1;
        pointer-events: all;
    }
    100% {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-splash {
        display: none !important;
        animation: none !important;
    }
}

/* =====================================================================
 * Brand Header Logo
 * =================================================================== */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.brand-logo-img {
    display: inline-block;
    width: 34px;
    height: 34px;
    padding: 3px;
    background-color: #f3ede6;
    border-radius: 22%;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
    box-sizing: border-box;
}

.brand-logo-icon {
    display: inline-block;
    flex-shrink: 0;
    color: var(--primary);
    vertical-align: middle;
}

/* =====================================================================
 * Auth Pages (Login & Register)
 * =================================================================== */
.auth-container {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 1.5rem;
    padding: 2.25rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo-badge {
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-logo-img {
    width: 72px;
    height: 72px;
    padding: 7px;
    background-color: #f3ede6;
    border-radius: 22%;
    object-fit: contain;
    box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(45, 106, 79, 0.14);
}

.auth-logo-svg {
    width: 36px;
    height: 36px;
}

.auth-title {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
}

.auth-subtitle {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.45;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.auth-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.auth-input {
    width: 100%;
    min-height: 2.85rem;
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid rgb(195 204 198);
    border-radius: 0.85rem;
    background-color: rgb(249 250 246);
    color: var(--foreground);
    box-shadow: inset 0 1px 2px rgba(28, 42, 41, 0.04);
    transition: all 0.2s ease;
}

.auth-input:focus {
    outline: none;
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(78, 125, 122, 0.2);
}

.dark .auth-input {
    border-color: rgb(65 78 75);
    background-color: rgb(24 31 29);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dark .auth-input:focus {
    background-color: rgb(29 38 35);
    border-color: var(--primary);
}

.auth-field-error {
    font-size: 0.8rem;
    color: #d75564;
    font-weight: 500;
}

.auth-row-remember {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.auth-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--foreground);
    cursor: pointer;
}

.auth-checkbox {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.35rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.auth-button {
    width: 100%;
    min-height: 3rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, rgb(78 125 122) 0%, rgb(52 94 91) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(78, 125, 122, 0.28), 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 0.5rem;
}

.auth-button:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(78, 125, 122, 0.38);
}

.auth-button:active {
    transform: translateY(0.5px);
}

.auth-switch-link {
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}

.auth-switch-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    margin-left: 0.35rem;
}

.auth-validation-summary {
    color: #d75564;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.auth-validation-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* =====================================================================
 * Dashboard / Main Tab
 * =================================================================== */
.dashboard-container {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.dashboard-hero-card {
    background: linear-gradient(135deg, rgba(78, 125, 122, 0.08) 0%, rgba(82, 183, 136, 0.12) 100%);
    border: 1.5px solid rgba(78, 125, 122, 0.2);
    border-radius: 1.5rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dashboard-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
}

.dashboard-hero-desc {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    max-width: 480px;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
}

.onboarding-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    text-align: left;
    margin-bottom: 1.5rem;
}

@media (min-width: 600px) {
    .onboarding-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.onboarding-step-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.onboarding-step-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.onboarding-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
}

.onboarding-step-text {
    font-size: 0.825rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.4;
}

.dashboard-active-card {
    background: linear-gradient(135deg, rgba(45, 106, 79, 0.07) 0%, rgba(45, 106, 79, 0.13) 100%);
    border: 2px solid var(--primary, #2d6a4f);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(45, 106, 79, 0.15);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-active-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(45, 106, 79, 0.12);
    color: #2d6a4f;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.live-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2d6a4f;
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(0.9); opacity: 1; }
}

.dashboard-timer {
    font-family: monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--foreground);
}

.dashboard-recent-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* =====================================================================
 * Connections Tab
 * =================================================================== */
.connections-container {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.connection-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.connection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
    flex-wrap: wrap;
}

.connection-item:last-child {
    border-bottom: none;
}

.connection-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 200px;
    min-width: 0;
}

.connection-name-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.connection-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--foreground);
    line-height: 1.3;
    word-break: break-word;
}

.connection-email {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    word-break: break-all;
}

.connection-meta {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.connection-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.connection-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.connection-edit-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--foreground);
}

.push-explainer-card {
    background: rgba(78, 125, 122, 0.06);
    border: 1px dashed rgba(78, 125, 122, 0.3);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.45;
}

.push-explainer-card strong {
    color: var(--foreground);
}