/*
 * CodePanel — interfaz local, sin dependencias externas.
 * La identidad mezcla papel, tinta y color para sentirse como un estudio
 * creativo antes que como otro dashboard tecnológico.
 */

:root {
    color-scheme: light;
    --paper: #f4efe6;
    --paper-deep: #e9e0d3;
    --surface: #fffdf8;
    --surface-soft: #faf6ef;
    --ink: #27251f;
    --ink-soft: #4f4a42;
    --muted: #706a61;
    --muted-light: #777168;
    --line: #ded5c9;
    --line-soft: #ebe4da;
    --coral: #df704f;
    --coral-dark: #a9472f;
    --coral-wash: #fae4dc;
    --apricot: #efa965;
    --yellow: #e9c75d;
    --yellow-wash: #fbf1c8;
    --sage: #748c76;
    --sage-dark: #4d6351;
    --sage-wash: #dfe9dd;
    --blue: #496981;
    --blue-wash: #dde8ef;
    --purple: #6f5879;
    --purple-wash: #eae0ed;
    --danger: #a33b38;
    --danger-wash: #f8dfdc;
    --hero-surface: #27251f;
    --hero-surface-deep: #1e1d19;
    --hero-text: #fffdf8;
    --hero-muted: #d4cec3;
    --sidebar-width: 256px;
    --topbar-height: 78px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --shadow-sm: 0 2px 3px rgba(49, 42, 32, .04), 0 8px 22px rgba(49, 42, 32, .045);
    --shadow-md: 0 16px 45px rgba(48, 39, 29, .10), 0 2px 8px rgba(48, 39, 29, .05);
    --shadow-pop: 0 24px 70px rgba(40, 34, 28, .2);
    --font-sans: Inter, Avenir, "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: Iowan Old Style, Baskerville, "Times New Roman", serif;
    --ease: cubic-bezier(.2, .75, .25, 1);
}

[data-theme="night"] {
    color-scheme: dark;
    --paper: #24241f;
    --paper-deep: #1c1d19;
    --surface: #2d2c27;
    --surface-soft: #33312b;
    --ink: #f4efe5;
    --ink-soft: #ddd8ce;
    --muted: #bdb6ab;
    --muted-light: #aaa49a;
    --line: #5a564c;
    --line-soft: #45423a;
    --coral: #ee8a6b;
    --coral-dark: #f3a087;
    --apricot: #f2b477;
    --yellow: #f1d36f;
    --sage: #94ad96;
    --sage-dark: #b5cbb6;
    --blue: #a5bfd2;
    --purple: #bea8c6;
    --danger: #f08b84;
    --coral-wash: #53372f;
    --yellow-wash: #51482c;
    --sage-wash: #35453a;
    --blue-wash: #34444f;
    --purple-wash: #463b49;
    --danger-wash: #512f2d;
    --hero-surface: #181915;
    --hero-surface-deep: #12130f;
    --hero-text: #f8f3e9;
    --hero-muted: #c9c2b7;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .12);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, .22);
    --shadow-pop: 0 28px 80px rgba(0, 0, 0, .52);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-width: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 81% 8%, rgba(239, 169, 101, .10), transparent 27rem),
        var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--coral) 56%, transparent);
    outline-offset: 3px;
}

::selection { background: var(--yellow-wash); color: var(--ink); }

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

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--hero-surface);
    color: var(--hero-text);
    transform: translateY(-160%);
    transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }

/* Sidebar */
.sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    padding: 26px 20px 20px;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255,255,255,.28), transparent 28%),
        var(--paper-deep);
}

.brand-row { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    padding: 7px 6px;
    border-radius: 11px 11px 11px 4px;
    background: var(--hero-surface);
    box-shadow: 3px 3px 0 var(--coral);
}
.brand-mark span { width: 4px; border-radius: 3px; background: var(--hero-text); transform: rotate(8deg); }
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 17px; }
.brand-mark span:nth-child(3) { height: 13px; }
.brand-copy { display: grid; line-height: 1.12; }
.brand-copy strong { font-family: var(--font-display); font-size: 20px; letter-spacing: -.35px; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }

.icon-button {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-soft);
    transition: background .2s, border-color .2s, transform .2s;
}
.icon-button:hover { border-color: var(--line); background: var(--surface-soft); }
.icon-button:active { transform: scale(.95); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-close { display: none; }

.main-nav { min-height: 0; flex: 1 1 auto; overflow-y: auto; margin-top: 28px; padding-right: 4px; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.nav-eyebrow {
    margin: 0 12px 9px;
    color: var(--muted-light);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.nav-eyebrow-spaced { margin-top: 22px; }
.nav-item {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 610;
    transition: color .18s, background .18s, transform .18s;
}
.nav-item:hover { background: rgba(255,255,255,.34); color: var(--ink); transform: translateX(2px); }
.nav-item.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.nav-item.is-active::before { position: absolute; left: -20px; width: 4px; height: 22px; border-radius: 0 5px 5px 0; background: var(--coral); content: ""; }
.nav-item svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:first-of-type svg { fill: currentColor; stroke: none; }
.nav-count { margin-left: auto; min-width: 22px; padding: 1px 6px; border-radius: 20px; background: var(--coral-wash); color: var(--coral-dark); font-size: 12px; font-weight: 800; text-align: center; }

.sidebar-note {
    position: relative;
    flex: 0 0 auto;
    margin: 16px 4px 14px;
    padding: 18px 17px 15px;
    border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--line));
    border-radius: 4px 14px 14px 14px;
    background: var(--yellow-wash);
    color: var(--ink-soft);
    transform: rotate(-.45deg);
}
.note-pin { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--coral); box-shadow: 0 2px 3px rgba(0,0,0,.2); }
.sidebar-note p { margin: 0 0 10px; font-family: var(--font-display); font-size: 14px; line-height: 1.35; }
.sidebar-note button { padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 750; }

.profile-card { position: relative; flex: 0 0 auto; border-top: 1px solid var(--line); padding-top: 16px; }
.profile-button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 13px; background: transparent; text-align: left; }
.profile-button:hover { background: rgba(255,255,255,.3); }
.avatar { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; background: var(--sage); color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.profile-copy { display: grid; min-width: 0; line-height: 1.2; }
.profile-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.profile-button > svg { width: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.profile-menu, .create-menu {
    position: absolute;
    z-index: 80;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.profile-menu { inset: auto 0 56px; }
.profile-menu button, .create-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: 13px; text-align: left; }
.profile-menu button:hover, .create-menu button:hover { background: var(--surface-soft); color: var(--ink); }

/* Header and workspace */
.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    display: flex;
    height: var(--topbar-height);
    align-items: center;
    gap: 18px;
    padding: 0 clamp(24px, 4vw, 58px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(16px);
}
[data-theme="night"] .topbar {
    border-bottom-color: color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--paper-deep) 92%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
}
[data-theme="night"] .sidebar {
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%),
        var(--paper-deep);
}
[data-theme="night"] .nav-item:hover,
[data-theme="night"] .profile-button:hover { background: rgba(255,255,255,.06); }
.menu-button { display: none; }
.search-trigger {
    display: flex;
    width: min(370px, 36vw);
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface) 68%, transparent);
    color: var(--muted);
    text-align: left;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.search-trigger:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); background: var(--surface); box-shadow: var(--shadow-sm); }
.search-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { margin-left: auto; padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-family: var(--font-sans); font-size: 13px; }
.topbar-actions { position: relative; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sync-status { display: inline-flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--muted); font-size: 13px; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }
.sync-status.is-syncing .sync-dot { animation: pulse 1s infinite; background: var(--apricot); }
.sync-status.is-error .sync-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); }
.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 720;
    line-height: 1;
    transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.98); }
.button-primary { border-color: var(--ink); background: var(--ink); color: var(--surface); box-shadow: 0 3px 0 color-mix(in srgb, var(--coral) 82%, #000); }
.button-primary:hover { background: var(--coral-dark); border-color: var(--coral-dark); box-shadow: 0 3px 0 var(--ink); }
.button-secondary { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.button-secondary:hover { border-color: var(--ink-soft); }
.button-ghost { border-color: var(--line); background: transparent; color: var(--ink-soft); }
.button-ghost:hover { background: var(--surface-soft); color: var(--ink); }
.button-danger { background: var(--danger); color: #fff; }
.button-small { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.button[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.create-menu { top: calc(100% + 10px); right: 0; width: 210px; max-height: calc(100vh - var(--topbar-height) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.menu-swatch { width: 9px; height: 9px; border-radius: 50%; }
.swatch-coral { background: var(--coral); }.swatch-yellow { background: var(--yellow); }.swatch-blue { background: var(--blue); }.swatch-green { background: var(--sage); }.swatch-purple { background: var(--purple); }

.workspace { max-width: 1540px; min-height: calc(100vh - var(--topbar-height)); padding: 42px clamp(24px, 4vw, 58px) 72px; }
.view { min-height: 60vh; }
.view.is-entering { animation: view-in .38s var(--ease) both; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-heading-copy { width: 100%; min-width: 0; max-width: 720px; }
.eyebrow { display: flex; max-width: 100%; min-width: 0; align-items: center; gap: 8px; overflow-wrap: anywhere; margin: 0 0 8px; color: var(--coral-dark); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
.page-heading h1 { max-width: 100%; overflow-wrap: anywhere; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4vw, 51px); font-weight: 500; letter-spacing: -.045em; line-height: 1.03; }
.page-heading h1 em { color: var(--coral-dark); font-weight: inherit; }
.page-heading p { max-width: 610px; margin: 11px 0 0; color: var(--muted); font-size: 14px; }
.heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }

.date-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: 13px; font-weight: 650; }
.date-chip svg { width: 15px; height: 15px; fill: none; stroke: var(--coral); stroke-width: 1.8; }

.demo-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -9px 0 18px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--yellow-wash) 68%, transparent);
    color: var(--ink-soft);
    font-size: 12px;
}
.demo-banner span { font-weight: 780; }
.demo-banner span::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--yellow); content: ""; }
.demo-banner small { color: var(--muted); font-size: 11px; }

/* Generic cards and dashboards */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-card {
    position: relative;
    min-height: 148px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.metric-card::after { position: absolute; top: -35px; right: -35px; width: 95px; height: 95px; border-radius: 50%; background: var(--metric-wash, var(--coral-wash)); content: ""; opacity: .85; }
.metric-card:nth-child(2) { --metric-wash: var(--yellow-wash); }
.metric-card:nth-child(3) { --metric-wash: var(--sage-wash); }
.metric-card:nth-child(4) { --metric-wash: var(--purple-wash); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.metric-icon { position: relative; z-index: 1; display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: var(--metric-wash, var(--coral-wash)); color: var(--ink-soft); }
.metric-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.metric-value { margin-top: 14px; font-family: var(--font-display); font-size: 34px; line-height: 1; }
.metric-caption { margin-top: 8px; color: var(--muted); font-size: 13px; }
.metric-caption strong { color: var(--sage-dark); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.dashboard-stack { display: grid; gap: 20px; }
.panel { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-padded { padding: 23px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 0; background: transparent; color: var(--coral-dark); font-size: 13px; font-weight: 760; }
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }

.focus-project {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    overflow: hidden;
    padding: 27px;
    border-radius: 22px;
    background: var(--hero-surface);
    color: var(--hero-text);
}
.focus-project::before { position: absolute; right: -70px; bottom: -100px; width: 260px; height: 260px; border: 48px solid rgba(255,255,255,.055); border-radius: 50%; content: ""; }
.focus-kickers { display: flex; align-items: center; gap: 9px; }
.focus-kicker { color: var(--hero-muted); font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.focus-project .project-type-badge.is-personal, .focus-project .project-type-badge.is-commercial { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: var(--hero-muted); }
.focus-project h3 { max-width: 430px; margin: 10px 0 5px; font-family: var(--font-display); font-size: clamp(23px, 3vw, 33px); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
.focus-project p { max-width: 500px; margin: 0; color: var(--hero-muted); font-size: 12px; }
.focus-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.focus-tags span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 100px; color: var(--hero-text); font-size: 11px; font-weight: 700; }
.focus-action { margin-top: 22px; color: var(--hero-text); }
.progress-ring {
    --progress: 0;
    position: relative;
    z-index: 1;
    display: grid;
    width: 102px;
    height: 102px;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    background: conic-gradient(var(--coral) calc(var(--progress) * 1%), rgba(255,255,255,.1) 0);
}
.progress-ring::before { position: absolute; width: 78px; height: 78px; border-radius: 50%; background: var(--hero-surface); content: ""; }
.progress-ring span { position: relative; font-family: var(--font-display); font-size: 22px; }

.project-rows { display: grid; }
.project-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) minmax(80px, 120px) auto; align-items: center; gap: 14px; padding: 13px 3px; border-bottom: 1px solid var(--line-soft); }
.project-row[role="button"], .follow-card[role="button"] { cursor: pointer; }
.project-row:last-child { border-bottom: 0; }
.project-color { width: 10px; height: 28px; border-radius: 5px; background: var(--project-color, var(--coral)); }
.project-row h3 { overflow: hidden; margin: 0; font-size: 12px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.project-row p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.project-type-inline { color: var(--muted-light); }
.mini-progress { height: 5px; overflow: hidden; border-radius: 10px; background: var(--line-soft); }
.mini-progress span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--project-color, var(--coral)); }
.row-percent { color: var(--muted); font-size: 12px; font-weight: 700; }

.task-list { display: grid; }
.task-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.task-row:last-child { border-bottom: 0; }
.task-check { display: grid; width: 21px; height: 21px; place-items: center; padding: 0; border: 1.5px solid var(--line); border-radius: 7px; background: transparent; color: #fff; }
.task-check:hover { border-color: var(--sage); }
.task-check.is-done { border-color: var(--sage); background: var(--sage); }
.task-check svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.task-row h3 { margin: 0; font-size: 12px; font-weight: 660; }
.task-title-button { display: inline; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.task-title-button:hover { color: var(--coral-dark); }
.task-row.is-done h3 { color: var(--muted); text-decoration: line-through; }
.task-row p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.due-label { padding: 4px 7px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.due-label.is-late { background: var(--danger-wash); color: var(--danger); }
.due-label.is-today { background: var(--yellow-wash); color: var(--ink-soft); }

.idea-preview { position: relative; padding: 18px; border: 1px solid color-mix(in srgb, var(--yellow) 42%, var(--line)); border-radius: 5px 14px 14px 14px; background: var(--yellow-wash); transform: rotate(-.25deg); }
.idea-preview + .idea-preview { margin-top: 10px; transform: rotate(.3deg); }
.idea-preview small { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.idea-preview h3 { margin: 7px 0 5px; font-family: var(--font-display); font-size: 17px; line-height: 1.15; }
.idea-preview p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.follow-list { display: grid; gap: 9px; }
.follow-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border-radius: 12px; background: var(--surface-soft); }
.contact-initial { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: var(--avatar-color, var(--blue-wash)); color: var(--ink-soft); font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.follow-card strong { display: block; font-size: 13px; }
.follow-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.follow-date { color: var(--coral-dark); font-size: 11px; font-weight: 750; }

/* Toolbars and filters */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.filter-search { position: relative; min-width: min(100%, 270px); }
.filter-search svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; transform: translateY(-50%); }
.filter-search input { width: 100%; height: 40px; padding: 0 12px 0 37px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); outline: 0; }
.filter-search input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-wash); }
.select-wrap { position: relative; }
.select-wrap select { height: 40px; min-width: 140px; appearance: none; padding: 0 34px 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.select-wrap::after { position: absolute; top: 50%; right: 13px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.toolbar-spacer { flex: 1; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.segmented button { display: grid; width: 32px; height: 31px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.segmented svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.result-count { color: var(--muted); font-size: 13px; }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 16px; }
.project-card {
    --project-color: var(--coral);
    position: relative;
    display: flex;
    min-height: 264px;
    flex-direction: column;
    overflow: hidden;
    padding: 21px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.project-card::before { position: absolute; top: 0; right: 24px; left: 24px; height: 3px; border-radius: 0 0 4px 4px; background: var(--project-color); content: ""; }
.project-card:hover { border-color: color-mix(in srgb, var(--project-color) 35%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-badges { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
.status-badge, .priority-badge, .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 100px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 760;
    line-height: 1.2;
    white-space: nowrap;
}
.project-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
}
.project-type-badge::before { width: 5px; height: 5px; border-radius: 1px; background: currentColor; content: ""; transform: rotate(45deg); }
.project-type-badge.is-personal { border-color: color-mix(in srgb, var(--yellow) 38%, var(--line)); background: color-mix(in srgb, var(--yellow-wash) 64%, var(--surface)); color: #806c28; }
.project-type-badge.is-commercial { border-color: color-mix(in srgb, var(--sage) 32%, var(--line)); background: color-mix(in srgb, var(--sage-wash) 62%, var(--surface)); color: var(--sage-dark); }
.project-type-badge.is-compact { padding: 3px 6px; font-size: 11px; }
[data-theme="night"] .project-type-badge.is-personal, [data-theme="night"] .project-type-option:has(input[value="personal"]:checked) .project-type-icon { color: var(--yellow); }
.status-badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.status-active, .status-building, .status-qualified, .status-in_progress, .status-ready, .status-sent { background: var(--blue-wash); color: var(--blue); }
.status-completed, .status-validated, .status-won, .status-done, .status-approved, .status-published { background: var(--sage-wash); color: var(--sage-dark); }
.status-on_hold, .status-parked, .status-proposal, .status-attention { background: var(--yellow-wash); color: #785f18; }
.status-archived, .status-inactive, .status-lost, .status-expired { color: var(--muted); }
.status-new, .status-inbox, .status-planned, .status-lead, .status-todo, .status-draft { background: var(--purple-wash); color: var(--purple); }
.status-rejected, .status-rolled_back { background: var(--danger-wash); color: var(--danger); }
.status-contacted, .status-exploring { background: var(--coral-wash); color: var(--coral-dark); }
.card-menu-button { width: 31px; height: 31px; }
.card-menu-button svg { width: 17px; }
.project-card h2 { margin: 18px 0 7px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.card-content-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.project-card .description { display: -webkit-box; overflow: hidden; min-height: 38px; margin: 0; color: var(--muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tech-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 15px 0; }
.tech-list .tag { padding: 3px 7px; border: 1px solid var(--line-soft); background: transparent; }
.project-card-footer { margin-top: auto; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.progress-bar { height: 6px; overflow: hidden; border-radius: 10px; background: var(--line-soft); }
.progress-bar span { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--project-color); }
.card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--muted); font-size: 12px; }
.card-bottom span { display: inline-flex; align-items: center; gap: 5px; }
.card-bottom svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.card-bottom .personal-project-note { color: var(--purple); font-weight: 680; }
.card-actions-menu { position: absolute; z-index: 10; top: 52px; right: 15px; width: 135px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-md); }
.card-actions-menu button { width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font-size: 13px; text-align: left; }
.card-actions-menu button:hover { background: var(--surface-soft); }.card-actions-menu .danger { color: var(--danger); }

.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 13px; overflow-x: auto; padding: 2px 1px 12px; }
.kanban-column { min-width: 230px; padding: 13px; border: 1px solid var(--line-soft); border-radius: 15px; background: color-mix(in srgb, var(--surface-soft) 73%, transparent); }
.kanban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 3px; }
.kanban-header strong { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.kanban-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--column-color); }
.kanban-header span { color: var(--muted); font-size: 12px; }
.kanban-items { display: grid; gap: 9px; min-height: 80px; }
.kanban-card { padding: 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 8px rgba(43,35,26,.035); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.kanban-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.kanban-card-kicker { display: flex; margin-bottom: 9px; }
.kanban-card h3 { margin: 0 0 7px; font-family: var(--font-display); font-size: 16px; line-height: 1.15; }
.kanban-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kanban-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.kanban-card footer small { color: var(--muted); font-size: 11px; }
.kanban-progress { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: conic-gradient(var(--project-color) calc(var(--progress) * 1%), var(--line-soft) 0); font-size: 0; }
.kanban-progress::before { width: 21px; height: 21px; border-radius: 50%; background: var(--surface); content: ""; }

/* Ideas */
.idea-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
.idea-grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 15px; }
.idea-card {
    position: relative;
    min-height: 222px;
    padding: 21px 20px 18px;
    border: 1px solid color-mix(in srgb, var(--idea-color, var(--yellow)) 28%, var(--line));
    border-radius: 5px 17px 17px 17px;
    background: color-mix(in srgb, var(--idea-wash, var(--yellow-wash)) 70%, var(--surface));
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s;
}
.idea-card:nth-child(3n+2) { transform: rotate(.35deg); }
.idea-card:nth-child(4n+1) { transform: rotate(-.25deg); }
.idea-card:hover { z-index: 1; box-shadow: var(--shadow-md); transform: rotate(0) translateY(-3px); }
.idea-card .pin { position: absolute; top: 10px; right: 12px; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--idea-color, var(--yellow)); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.idea-card h2 { margin: 17px 0 8px; font-family: var(--font-display); font-size: 21px; line-height: 1.12; }
.idea-card .description { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.idea-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.idea-tags span { color: var(--muted); font-size: 11px; font-weight: 650; }.idea-tags span::before { content: "#"; }
.idea-score { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent); }
.idea-score > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.dot-score { display: inline-flex; gap: 3px; }.dot-score i { width: 6px; height: 6px; border: 1px solid var(--idea-color, var(--yellow)); border-radius: 50%; }.dot-score i.is-filled { background: var(--idea-color, var(--yellow)); }

.idea-sidebar { position: sticky; top: calc(var(--topbar-height) + 24px); }
.idea-quote { padding: 23px; border-radius: 18px; background: var(--hero-surface); color: var(--hero-text); }
.idea-quote span { font-family: var(--font-display); font-size: 36px; color: var(--coral); line-height: .7; }
.idea-quote p { margin: 9px 0 14px; font-family: var(--font-display); font-size: 18px; line-height: 1.28; }
.idea-quote small { color: var(--hero-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.idea-breakdown { margin-top: 14px; padding: 19px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); }
.idea-breakdown h3 { margin: 0 0 13px; font-size: 13px; }
.breakdown-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 11px; }
.breakdown-bar { grid-column: 1 / -1; height: 4px; margin-top: -4px; border-radius: 8px; background: var(--line-soft); }.breakdown-bar span { display: block; height: 100%; border-radius: inherit; background: var(--bar-color, var(--yellow)); }

/* Contacts and leads */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 15px; }
.contact-card { position: relative; padding: 20px; border: 1px solid var(--line-soft); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-header { display: flex; align-items: center; gap: 12px; }
.contact-header .contact-initial { width: 46px; height: 46px; flex: 0 0 46px; font-size: 15px; }
.contact-header h2 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.15; }
.contact-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.contact-header .card-menu-button { margin-left: auto; }
.contact-details { display: grid; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.contact-details a, .contact-details span { display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.contact-details a:hover { color: var(--coral-dark); }
.contact-details svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.contact-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; }
.contact-footer small { color: var(--muted); font-size: 11px; }

.pipeline { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 14px; }
.pipeline-stage { min-width: 210px; }
.pipeline-header { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 0 5px; }
.pipeline-header i { width: 8px; height: 8px; border-radius: 50%; background: var(--stage-color); }
.pipeline-header strong { font-size: 13px; }.pipeline-header span { margin-left: auto; color: var(--muted); font-size: 11px; }
.lead-list { display: grid; gap: 9px; min-height: 90px; padding: 8px; border: 1px dashed var(--line); border-radius: 14px; background: rgba(255,255,255,.12); }
.lead-card { padding: 14px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.lead-card:hover { border-color: color-mix(in srgb, var(--stage-color) 38%, var(--line)); }
.lead-card h3 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.1; }
.lead-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.lead-value { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.lead-value strong { color: var(--sage-dark); font-size: 13px; }.lead-value small { color: var(--muted); font-size: 11px; }

/* Task page */
.task-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.task-board { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.task-group + .task-group { border-top: 1px solid var(--line-soft); }
.task-group-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--surface-soft); }
.task-group-header strong { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }.task-group-header strong i { width: 7px; height: 7px; border-radius: 50%; background: var(--group-color); }.task-group-header span { color: var(--muted); font-size: 11px; }
.task-group .task-row { padding: 13px 20px; }
.task-meta { display: flex; gap: 8px; margin-top: 4px; }.task-meta span { color: var(--muted); font-size: 11px; }.task-meta span + span::before { margin-right: 8px; content: "·"; }
.priority-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--priority-color); }
.week-card { padding: 21px; border-radius: 18px; background: var(--hero-surface); color: var(--hero-text); }
.week-card h2 { margin: 0; font-family: var(--font-display); font-size: 21px; }.week-card > p { margin: 5px 0 19px; color: var(--hero-muted); font-size: 12px; }
.week-progress { height: 7px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.11); }.week-progress span { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.week-caption { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--hero-muted); }
.priority-legend { margin-top: 14px; padding: 19px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); }.priority-legend h3 { margin: 0 0 12px; font-size: 13px; }.priority-legend p { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--muted); font-size: 11px; }

/* Dev log */
.devlog-timeline { position: relative; display: grid; max-width: 940px; gap: 0; margin: 0 auto; }
.devlog-timeline::before { position: absolute; top: 12px; bottom: 24px; left: 16px; width: 1px; background: var(--line); content: ""; }
.devlog-entry { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-bottom: 17px; }
.devlog-marker { position: relative; z-index: 1; padding-top: 28px; }
.devlog-marker i { display: block; width: 11px; height: 11px; margin: 0 auto; border: 3px solid var(--paper); border-radius: 50%; background: var(--entry-color); box-shadow: 0 0 0 1px var(--entry-color); }
.devlog-card { position: relative; padding: 20px 22px; border: 1px solid var(--line-soft); border-radius: 5px 17px 17px 17px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s, transform .18s; }
.devlog-card:hover { border-color: color-mix(in srgb, var(--entry-color) 35%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.devlog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.devlog-head time { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.devlog-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; }
.devlog-labels > span:last-child { color: var(--muted); font-size: 11px; }
.entry-type-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 100px; font-size: 11px; font-weight: 780; text-transform: uppercase; }
.entry-type-badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.entry-type-progress { background: var(--blue-wash); color: var(--blue); }.entry-type-decision { background: var(--purple-wash); color: var(--purple); }.entry-type-blocker { background: var(--danger-wash); color: var(--danger); }.entry-type-learning { background: var(--yellow-wash); color: #806c28; }.entry-type-note { background: var(--sage-wash); color: var(--sage-dark); }
.devlog-content-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.devlog-content-button h2 { margin: 15px 0 7px; font-family: var(--font-display); font-size: 22px; font-weight: 570; letter-spacing: -.02em; }
.devlog-content-button p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.devlog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.devlog-tags { display: flex; flex-wrap: wrap; gap: 7px; }.devlog-tags span { color: var(--muted); font-size: 11px; font-weight: 650; }
.devlog-footer small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }.devlog-footer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Budgets and payments */
.finance-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 23px; }
.finance-metric { position: relative; overflow: hidden; min-height: 128px; padding: 18px 19px; border: 1px solid var(--line-soft); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-sm); }
.finance-metric::after { position: absolute; right: -24px; bottom: -39px; width: 90px; height: 90px; border: 17px solid var(--sage-wash); border-radius: 50%; content: ""; opacity: .55; }
.finance-metric-label { position: relative; z-index: 1; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.finance-values { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 11px 0 6px; }
.finance-values > span { display: grid; font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); font-weight: 620; line-height: 1; }
.finance-values > span small { margin-bottom: 4px; color: var(--muted); font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.finance-metric > small { position: relative; z-index: 1; color: var(--muted); font-size: 11px; }
.finance-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.budget-grid { display: grid; grid-template-columns: repeat(2, minmax(245px, 1fr)); gap: 14px; }
.budget-card { position: relative; min-height: 275px; padding: 19px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.budget-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.budget-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.budget-card > header > div { display: flex; align-items: center; gap: 7px; }.budget-card > header > div > small { color: var(--muted); font-size: 11px; font-weight: 800; }
.budget-content-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.budget-content-button h2 { margin: 17px 0 5px; font-family: var(--font-display); font-size: 20px; line-height: 1.12; }
.budget-content-button p { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.budget-content-button > strong { display: block; margin-top: 15px; font-family: var(--font-display); font-size: 26px; line-height: 1; }
.budget-progress { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }.budget-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }.budget-progress .progress-bar span { background: var(--sage); }.budget-progress > small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.budget-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.budget-validity, .resource-renewal { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }.budget-validity svg, .resource-renewal svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }.budget-validity.is-soon, .resource-renewal.is-soon { color: #785f18; }.budget-validity.is-late, .resource-renewal.is-late { color: var(--danger); }
.payment-panel { position: sticky; top: calc(var(--topbar-height) + 20px); overflow: hidden; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.payment-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }.payment-panel .eyebrow { margin-bottom: 3px; font-size: 11px; }.payment-panel > header h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }.payment-panel > header .icon-button { width: 32px; height: 32px; flex-basis: 32px; border-color: var(--line); }
.payment-list { display: grid; max-height: 520px; overflow-y: auto; padding: 8px 15px 15px; }
.payment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }.payment-row:last-child { border-bottom: 0; }.payment-row:hover strong { color: var(--coral-dark); }
.payment-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px 10px 10px 4px; background: var(--sage-wash); color: var(--sage-dark); }.payment-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.payment-row strong { display: block; font-size: 13px; }.payment-row p { overflow: hidden; margin: 2px 0 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.payment-row time { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* Releases */
.release-timeline { position: relative; display: grid; max-width: 1020px; gap: 13px; margin: 0 auto; }
.release-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 13px; }
.release-date { display: grid; height: 72px; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: 4px 15px 15px 15px; background: var(--paper-deep); color: var(--ink-soft); }
.release-date strong { font-family: var(--font-display); font-size: 25px; line-height: 1; }.release-date span { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.release-body { position: relative; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-sm); }
.release-body > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.release-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }.release-labels > span:not(.status-badge) { padding: 3px 7px; border-radius: 100px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; }.release-labels .release-kind { background: var(--blue-wash); color: var(--blue); }
.release-content-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.release-version { display: block; margin-top: 12px; color: var(--coral-dark); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.release-content-button h2 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 22px; line-height: 1.1; }.release-content-button p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.release-body > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 11px; border-top: 1px solid var(--line-soft); }.release-body > footer span, .release-body > footer a { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }.release-body > footer a { color: var(--coral-dark); font-weight: 720; }.release-body > footer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Resources */
.security-note { display: flex; align-items: center; gap: 13px; margin: -6px 0 20px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--yellow) 46%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--yellow-wash) 68%, var(--surface)); }
.security-note > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: var(--surface); color: #806c28; }.security-note svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }.security-note strong { display: block; font-size: 12px; }.security-note p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.resource-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }.resource-metrics article { display: flex; align-items: baseline; gap: 8px; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface); }.resource-metrics strong { font-family: var(--font-display); font-size: 22px; }.resource-metrics span { color: var(--muted); font-size: 11px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(245px, 1fr)); gap: 14px; }
.resource-card { position: relative; min-width: 0; min-height: 275px; padding: 19px; border: 1px solid var(--line-soft); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }.resource-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.resource-card > header { display: flex; align-items: center; gap: 10px; }.resource-card > header > div { min-width: 0; }.resource-card > header small { color: var(--muted); font-size: 11px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }.resource-card > header h2 { overflow: hidden; margin: 2px 0 0; font-family: var(--font-display); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.resource-card > header .card-menu-button { margin-left: auto; }
.resource-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px 13px 13px 4px; background: var(--purple-wash); color: var(--purple); }.resource-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.resource-content-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }.resource-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.resource-badges > span:not(.status-badge) { padding: 4px 8px; border-radius: 100px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.resource-card dl { display: grid; gap: 9px; margin: 16px 0 0; }.resource-card dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }.resource-card dt { color: var(--muted); font-size: 11px; }.resource-card dd { overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.resource-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }.resource-card > footer > a { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--coral-dark); }.resource-card > footer > a:hover { background: var(--coral-wash); }.resource-card > footer > a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Empty, error and loading states */
.empty-state { display: grid; min-height: 360px; place-items: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 55%, transparent); text-align: center; }
.empty-inner { max-width: 330px; }
.empty-art { position: relative; width: 105px; height: 92px; margin: 0 auto 22px; }
.empty-art::before, .empty-art::after { position: absolute; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); content: ""; }
.empty-art::before { inset: 12px 13px 8px 5px; border-radius: 5px 13px 13px 13px; transform: rotate(-7deg); }
.empty-art::after { inset: 4px 4px 16px 15px; border-radius: 5px 13px 13px 13px; background: var(--yellow-wash); transform: rotate(5deg); }
.empty-art span { position: absolute; z-index: 2; top: 28px; left: 41px; font-family: var(--font-display); font-size: 33px; }
.empty-state h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }.empty-state p { margin: 8px 0 20px; color: var(--muted); font-size: 12px; }
.error-state .empty-art::after { background: var(--danger-wash); }.error-state .empty-art span { color: var(--danger); }

.inline-empty { padding: 24px 10px; color: var(--muted); font-size: 13px; text-align: center; }
.page-skeleton { display: grid; gap: 12px; }
.skeleton { overflow: hidden; border-radius: 10px; background: var(--line-soft); }
.skeleton::after, .skeleton-grid div::after { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); content: ""; animation: shimmer 1.5s infinite; transform: translateX(-100%); }
.skeleton-title { width: 38%; height: 46px; }.skeleton-subtitle { width: 52%; height: 16px; }.skeleton-panel { height: 330px; margin-top: 10px; border-radius: 20px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }.skeleton-grid div { height: 140px; overflow: hidden; border-radius: 18px; background: var(--line-soft); }

/* Dialogs and forms */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(31, 28, 24, .48); backdrop-filter: blur(4px); }
.app-dialog { width: min(650px, calc(100vw - 28px)); max-height: min(820px, calc(100vh - 28px)); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-pop); }
.app-dialog[open] { animation: dialog-in .24s var(--ease); }
.entity-form { display: flex; max-height: min(820px, calc(100vh - 28px)); flex-direction: column; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 27px 18px; border-bottom: 1px solid var(--line-soft); }
.dialog-kicker { display: block; margin-bottom: 4px; color: var(--coral-dark); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dialog-header h2 { margin: 0; font-family: var(--font-display); font-size: 27px; font-weight: 550; letter-spacing: -.03em; }
.dialog-body { overflow-y: auto; padding: 22px 27px 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field { display: grid; align-content: start; gap: 6px; }
.form-field.is-wide { grid-column: 1 / -1; }
.form-field label { color: var(--ink-soft); font-size: 13px; font-weight: 720; }
.form-field label span { color: var(--muted); font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    outline: 0;
    font-size: 13px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-field textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.form-field select { appearance: none; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--coral); background: var(--surface); box-shadow: 0 0 0 3px var(--coral-wash); }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); }
.field-error { color: var(--danger); font-size: 11px; }
.project-type-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.project-type-field legend { margin-bottom: 8px; padding: 0; color: var(--ink-soft); font-size: 13px; font-weight: 720; }
.project-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-type-option {
    position: relative;
    display: grid;
    min-height: 82px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.project-type-option:hover { border-color: var(--muted-light); transform: translateY(-1px); }
.project-type-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--coral) 45%, transparent); outline-offset: 2px; }
.project-type-option:has(input[value="personal"]:checked) { border-color: color-mix(in srgb, var(--yellow) 72%, var(--line)); background: color-mix(in srgb, var(--yellow-wash) 55%, var(--surface)); box-shadow: 0 6px 18px color-mix(in srgb, var(--yellow) 10%, transparent); }
.project-type-option:has(input[value="commercial"]:checked) { border-color: color-mix(in srgb, var(--sage) 65%, var(--line)); background: color-mix(in srgb, var(--sage-wash) 52%, var(--surface)); box-shadow: 0 6px 18px color-mix(in srgb, var(--sage) 10%, transparent); }
.form-field .project-type-option input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; border: 0; opacity: 0; pointer-events: none; }
.form-field label .project-type-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line-soft); border-radius: 11px 11px 11px 4px; background: var(--surface); color: var(--muted); }
.project-type-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.project-type-option:has(input[value="personal"]:checked) .project-type-icon { color: #806c28; }
.project-type-option:has(input[value="commercial"]:checked) .project-type-icon { color: var(--sage-dark); }
.form-field label .project-type-copy { display: block; color: var(--ink); }
.project-type-copy strong { display: block; font-size: 12px; }
.project-type-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.35; }
.project-type-note { color: var(--muted); font-size: 11px; font-weight: 500; }
.project-commercial-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 15px; border: 1px solid var(--line-soft); border-radius: 14px; background: color-mix(in srgb, var(--sage-wash) 22%, var(--surface-soft)); }
.project-commercial-heading { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 10px; }
.project-commercial-heading strong { color: var(--ink-soft); font-size: 12px; }
.project-commercial-heading small { color: var(--muted); font-size: 11px; text-align: right; }
.form-security-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--yellow) 48%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--yellow-wash) 58%, var(--surface)); color: var(--muted); font-size: 11px; line-height: 1.45; }
.form-security-note svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #806c28; stroke-width: 1.8; }.form-security-note strong { color: var(--ink-soft); }
.check-field { display: inline-flex; align-items: center; gap: 9px; width: fit-content; cursor: pointer; }
.check-field input { width: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--coral); }
.range-field { grid-column: 1 / -1; }.range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }.range-row output { display: grid; width: 38px; height: 32px; place-items: center; border-radius: 9px; background: var(--coral-wash); color: var(--coral-dark); font-family: var(--font-display); font-weight: 700; }.range-row input { min-height: 20px; padding: 0; accent-color: var(--coral); }
.color-options { display: flex; flex-wrap: wrap; gap: 9px; }.color-option { position: relative; display: grid; width: 27px; height: 27px; place-items: center; }.color-option input { position: absolute; opacity: 0; }.color-option span { width: 22px; height: 22px; border: 2px solid var(--surface); border-radius: 50%; background: var(--color); box-shadow: 0 0 0 1px var(--line); transition: transform .15s; }.color-option input:checked + span { box-shadow: 0 0 0 2px var(--ink); transform: scale(.9); }
.dialog-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 27px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-soft); }
.dialog-delete { margin-right: auto; }

.search-dialog { width: min(610px, calc(100vw - 24px)); max-height: min(590px, calc(100vh - 30px)); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-pop); transform: translateY(-10vh); }
.search-dialog[open] { animation: dialog-in .2s var(--ease); }
.search-input-wrap { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.search-input-wrap svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: var(--muted); stroke-width: 1.8; }.search-input-wrap input { width: 100%; height: 40px; border: 0; background: transparent; outline: 0; font-size: 16px; }.search-input-wrap kbd { flex: 0 0 auto; }
.search-results { max-height: 460px; overflow-y: auto; padding: 9px; }
.search-hint { display: grid; min-height: 220px; place-items: center; align-content: center; color: var(--muted); text-align: center; }.search-hint span { font-family: var(--font-display); font-size: 44px; color: var(--line); }.search-hint p { margin: 6px 0; font-size: 13px; }
.search-group-title { margin: 12px 10px 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.search-result { display: flex; width: 100%; align-items: center; gap: 11px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; }.search-result:hover, .search-result.is-selected { background: var(--surface-soft); }.search-result-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: var(--result-wash); }.search-result-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }.search-result strong { display: block; font-size: 13px; }.search-result small { display: block; color: var(--muted); font-size: 11px; }.search-result > span:last-child { min-width: 0; }

.confirm-dialog { width: min(410px, calc(100vw - 28px)); padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); text-align: center; }.confirm-dialog[open] { animation: dialog-in .22s var(--ease); }.confirm-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 15px; border-radius: 50%; background: var(--danger-wash); color: var(--danger); font-family: var(--font-display); font-size: 23px; }.confirm-dialog h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }.confirm-dialog p { margin: 8px 0 22px; color: var(--muted); font-size: 13px; }.confirm-actions { display: flex; justify-content: center; gap: 9px; }

/* Auth */
.auth-overlay { position: fixed; z-index: 200; inset: 0; display: grid; grid-template-columns: minmax(360px, .95fr) minmax(430px, 1.05fr); min-height: 100vh; background: var(--paper); }
.auth-art { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 42px clamp(34px, 6vw, 84px); background: var(--hero-surface); color: var(--hero-text); }
.auth-art::before { position: absolute; top: -22%; right: -30%; width: 620px; height: 620px; border: 100px solid rgba(255,255,255,.035); border-radius: 50%; content: ""; }.auth-art::after { position: absolute; bottom: -120px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: var(--coral); content: ""; opacity: .11; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 21px; }.auth-brand .brand-mark { background: var(--hero-text); box-shadow: 3px 3px 0 var(--coral); }.auth-brand .brand-mark span { background: var(--hero-surface); }
.paper-stack { position: relative; z-index: 1; width: min(360px, 80%); height: 280px; margin: 30px auto; }.paper-stack > span, .paper-stack article { position: absolute; inset: 10px; border-radius: 7px 24px 24px 24px; }.paper-stack > span:first-child { background: var(--purple); transform: rotate(-9deg); opacity: .7; }.paper-stack > span:nth-child(2) { background: var(--yellow); transform: rotate(7deg); }.paper-stack article { display: flex; flex-direction: column; justify-content: center; padding: 36px; background: #f8f0df; color: #292720; box-shadow: 0 25px 60px rgba(0,0,0,.22); transform: rotate(-1.3deg); }.paper-stack small { margin-bottom: 12px; color: #8a7e70; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.paper-stack strong { font-family: var(--font-display); font-size: clamp(25px, 3vw, 37px); font-weight: 500; line-height: 1.1; }.paper-stack i { width: 75%; height: 2px; margin-top: 25px; background: #ddd1bd; }.paper-stack i + i { width: 58%; margin-top: 9px; }.paper-stack i:last-child { width: 67%; }
.auth-art > p { position: relative; z-index: 1; max-width: 460px; margin: 0; color: var(--hero-muted); font-family: var(--font-display); font-size: 16px; line-height: 1.45; }
.auth-panel { display: grid; place-items: center; padding: 45px; }.auth-panel form { width: min(410px, 100%); }.auth-kicker { color: var(--coral-dark); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.auth-panel h1 { margin: 12px 0 11px; font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1.03; }.auth-lead { margin: 0 0 27px; color: var(--muted); font-size: 13px; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 23px; padding: 4px; border-radius: 12px; background: var(--paper-deep); }.auth-tabs button { height: 37px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }.auth-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }.auth-panel .form-field { margin-top: 14px; }.form-error { margin: 12px 0 0; padding: 9px 11px; border-radius: 9px; background: var(--danger-wash); color: var(--danger); font-size: 12px; }.auth-submit { width: 100%; margin-top: 21px; justify-content: space-between; padding: 0 18px; }

.auth-tabs.is-login-only { grid-template-columns: 1fr; }

/* Toasts */
.toast-region { position: fixed; z-index: 300; right: 20px; bottom: 20px; display: grid; width: min(360px, calc(100vw - 32px)); gap: 9px; pointer-events: none; }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-md); pointer-events: auto; animation: toast-in .3s var(--ease); }.toast.is-leaving { animation: toast-out .22s ease both; }.toast-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--sage-wash); color: var(--sage-dark); font-size: 13px; font-weight: 800; }.toast.is-error .toast-icon { background: var(--danger-wash); color: var(--danger); }.toast strong { display: block; font-size: 13px; }.toast p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }.toast button { padding: 5px; border: 0; background: transparent; color: var(--muted); font-size: 15px; }

.mobile-nav { display: none; }
.sidebar-scrim { display: none; }

@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(25px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(25px); } }
@keyframes pulse { 50% { opacity: .3; transform: scale(.8); } }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .project-grid, .contact-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
    .resource-grid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
    .budget-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: minmax(0, 1.25fr) minmax(255px, .75fr); }
}

@media (max-width: 920px) {
    :root { --sidebar-width: 270px; }
    .sidebar { transform: translateX(-105%); transition: transform .3s var(--ease); box-shadow: var(--shadow-pop); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-close, .menu-button { display: inline-grid; }
    .sidebar-scrim { position: fixed; z-index: 45; inset: 0; display: block; background: rgba(31,28,24,.35); opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); }.sidebar-scrim.is-visible { opacity: 1; pointer-events: auto; }
    .app-main { margin-left: 0; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-stack { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .idea-layout { grid-template-columns: 1fr; }.idea-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.idea-breakdown { margin-top: 0; }
    .task-page-grid { grid-template-columns: 1fr; }.task-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.priority-legend { margin-top: 0; }
    .finance-layout { grid-template-columns: 1fr; }.budget-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }.payment-panel { position: static; }.payment-list { max-height: none; }
}

@media (max-width: 700px) {
    :root { --topbar-height: 66px; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .topbar { gap: 8px; padding: 0 16px; }.topbar .sync-status, .topbar #theme-button { display: none; }.search-trigger { width: auto; flex: 1; min-width: 0; }.search-trigger span { font-size: 12px; }.search-trigger kbd { display: none; }.top-create { width: 42px; padding: 0; }.top-create span:last-child { display: none; }
    .workspace { padding: 28px 16px 45px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 23px; }.page-heading h1 { font-size: 38px; }.heading-actions { width: 100%; }.heading-actions .button { flex: 1; }
    .demo-banner { align-items: flex-start; flex-direction: column; gap: 3px; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.metric-card { min-height: 126px; padding: 16px; }.metric-value { font-size: 29px; }.metric-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .focus-project { grid-template-columns: 1fr; }.progress-ring { position: absolute; top: 22px; right: 20px; width: 68px; height: 68px; }.progress-ring::before { width: 52px; height: 52px; }.progress-ring span { font-size: 15px; }.focus-project h3 { padding-right: 65px; }
    .dashboard-stack { grid-template-columns: 1fr; }
    .project-grid, .contact-grid, .idea-grid, .budget-grid, .resource-grid { grid-template-columns: 1fr; }.project-card { min-height: 240px; }
    .idea-sidebar, .task-aside { grid-template-columns: 1fr; }
    .finance-metrics { grid-template-columns: 1fr; }.finance-metric { min-height: 112px; }.resource-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .devlog-entry { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }.devlog-timeline::before { left: 10px; }.devlog-card { padding: 17px; }.devlog-marker i { width: 9px; height: 9px; }
    .release-card { grid-template-columns: 55px minmax(0, 1fr); gap: 8px; }.release-date { height: 59px; }.release-date strong { font-size: 20px; }.release-body { padding: 16px; }.release-body > footer { align-items: flex-start; flex-direction: column; }
    .security-note { align-items: flex-start; }
    .toolbar { align-items: stretch; }.filter-search { width: 100%; }.select-wrap { flex: 1; }.select-wrap select { width: 100%; min-width: 0; }.segmented { margin-left: auto; }
    .project-row { grid-template-columns: 9px minmax(0,1fr) 65px auto; gap: 9px; }
    .mobile-nav { position: fixed; z-index: 42; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(65px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); }.mobile-nav a { display: grid; place-items: center; align-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }.mobile-nav a.is-active { color: var(--coral-dark); }.mobile-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.mobile-nav a:first-child svg { fill: currentColor; stroke: none; }.mobile-nav button { display: grid; width: 46px; height: 46px; place-items: center; align-self: center; justify-self: center; border: 0; border-radius: 16px 16px 16px 5px; background: var(--ink); color: var(--surface); box-shadow: 3px 3px 0 var(--coral); font-size: 24px; }
    .toast-region { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); }
    .form-grid { grid-template-columns: 1fr; }.form-field.is-wide, .range-field { grid-column: auto; }.project-type-options, .project-commercial-fields { grid-template-columns: 1fr; }.project-commercial-fields { grid-column: auto; }.project-commercial-heading { grid-column: auto; align-items: flex-start; flex-direction: column; gap: 2px; }.project-commercial-heading small { text-align: left; }.dialog-header { padding: 21px 20px 16px; }.dialog-body { padding: 19px 20px 23px; }.dialog-footer { padding: 14px 20px 18px; }
    .auth-overlay { grid-template-columns: 1fr; overflow-y: auto; }.auth-art { display: none; }.auth-panel { min-height: 100vh; padding: 32px 24px; }
}

@media (max-width: 420px) {
    .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 112px; }.metric-card::after { width: 80px; height: 80px; }.metric-value { margin-top: 10px; }
    .resource-metrics { grid-template-columns: 1fr; }.resource-metrics article { justify-content: space-between; }
    .budget-card > footer { align-items: flex-start; flex-direction: column; }.payment-row { grid-template-columns: auto minmax(0, 1fr); }.payment-row time { grid-column: 2; }
    .search-trigger span { max-width: 112px; }.page-heading h1 { font-size: 34px; }
    .confirm-actions { flex-direction: column-reverse; }.confirm-actions .button { width: 100%; }
}

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

@media print {
    .sidebar, .topbar, .mobile-nav, .toolbar, .heading-actions { display: none !important; }
    .app-main { margin: 0; }.workspace { max-width: none; padding: 0; }.panel, .project-card, .contact-card, .devlog-card, .budget-card, .release-card, .resource-card { break-inside: avoid; box-shadow: none; }
}

/* Workspace 1.3 — agenda, tiempo, rentabilidad y preferencias */
.dashboard-widget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dashboard-widget { min-width: 0; margin: 0; }
.dashboard-widget.is-wide { grid-column: 1 / -1; }
.dashboard-widget-grid > .metric-grid { margin-bottom: 0; }
.dashboard-widget .focus-project { padding: 21px; }
.widget-project-rows { margin-top: 13px; }
.widget-time-value { margin-top: 6px; font-family: var(--font-display); font-size: 42px; line-height: 1; }
.muted-copy { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.compact-reminders { display: grid; gap: 7px; }
.compact-reminder { display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 11px; background: var(--surface-soft); color: inherit; text-align: left; }
.compact-reminder:hover { background: var(--paper-deep); }
.compact-reminder > span { min-width: 0; }
.compact-reminder strong, .compact-reminder small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-reminder strong { font-size: 12px; }.compact-reminder small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.compact-reminder time { color: var(--coral-dark); font-size: 11px; font-weight: 750; white-space: nowrap; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.priority-dot.priority-high, .reminder-priority.priority-high { background: var(--danger); }.priority-dot.priority-low, .reminder-priority.priority-low { background: var(--sage); }
.widget-profit-list { display: grid; gap: 8px; }.widget-profit-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }.widget-profit-list div:last-child { border: 0; }.widget-profit-list span { color: var(--muted); font-size: 11px; font-weight: 800; }.widget-profit-list strong { font-family: var(--font-display); font-size: 20px; }.widget-profit-list strong.negative { color: var(--danger); }
.review-widget-score { display: block; color: var(--coral-dark); font-family: var(--font-display); font-size: 39px; }
.widget-finance { align-items: flex-start; flex-direction: column; gap: 9px; }.widget-finance > span { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }

/* Reminder center */
.reminder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.reminder-groups { display: grid; gap: 22px; }
.reminder-group > header { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.reminder-group > header h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }.reminder-group > header span { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 800; }
.reminder-card { position: relative; display: grid; min-width: 0; grid-template-columns: 5px minmax(0, 1fr) auto auto; align-items: center; gap: 15px; margin-bottom: 8px; padding: 15px 16px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.reminder-card.is-late { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }.reminder-card.is-resolved { opacity: .68; }
.reminder-priority { width: 5px; height: 38px; border-radius: 4px; background: var(--yellow); }
.reminder-copy { min-width: 0; }.reminder-copy > div { display: flex; flex-wrap: wrap; gap: 5px; }.derived-badge, .billable-badge { padding: 3px 6px; border-radius: 100px; background: var(--purple-wash); color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.reminder-copy h3 { overflow: hidden; margin: 6px 0 2px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.reminder-copy p { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.reminder-copy > small { display: block; margin-top: 5px; color: var(--muted-light); font-size: 11px; }
.reminder-date { display: grid; min-width: 92px; text-align: right; }.reminder-date time { color: var(--coral-dark); font-size: 12px; font-weight: 780; }.reminder-date small { color: var(--muted); font-size: 11px; }
.reminder-actions { display: flex; align-items: center; gap: 4px; }
.reminder-explainer { position: sticky; top: calc(var(--topbar-height) + 18px); }.reminder-bell { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 16px; border-radius: 16px 16px 16px 5px; background: var(--yellow-wash); color: #806c28; }.reminder-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }.reminder-explainer h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }.reminder-explainer p { margin: 8px 0 15px; color: var(--muted); font-size: 12px; }

/* Time tracking */
.active-timer { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 13px; margin: -4px 0 20px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--coral) 40%, var(--line)); border-radius: 15px; background: var(--coral-wash); }
.timer-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); animation: pulse 1.5s infinite; }.active-timer small, .active-timer strong { display: block; }.active-timer small { color: var(--coral-dark); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.active-timer strong { overflow: hidden; max-width: 500px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.active-timer output { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 17px; font-variant-numeric: tabular-nums; }
.time-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 20px; align-items: start; }.time-list { display: grid; gap: 8px; }
.time-entry-card { display: grid; min-width: 0; grid-template-columns: 50px minmax(0,1fr) auto auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }.time-entry-card.is-running { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); }
.time-date { display: grid; height: 48px; place-items: center; align-content: center; border-radius: 12px; background: var(--blue-wash); line-height: 1; }.time-date strong { font-family: var(--font-display); font-size: 19px; }.time-date small { margin-top: 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.time-entry-copy { min-width: 0; }.time-entry-copy > div { display: flex; flex-wrap: wrap; gap: 5px; }.time-entry-copy > div > span:not(.billable-badge) { color: var(--muted); font-size: 11px; }.time-entry-copy h3 { overflow: hidden; margin: 4px 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }.tag-cloud span { color: var(--purple); font-size: 11px; }
.time-duration { min-width: 70px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }.time-entry-actions { display: flex; align-items: center; gap: 4px; }
.time-summary { position: sticky; top: calc(var(--topbar-height) + 18px); }.time-ring { display: grid; min-height: 150px; place-items: center; align-content: center; margin: 12px 0 18px; border-radius: 50%; background: radial-gradient(circle,var(--surface) 57%,transparent 58%),conic-gradient(var(--blue) 0 68%,var(--blue-wash) 68%); text-align: center; }.time-ring strong { font-family: var(--font-display); font-size: 26px; }.time-ring small { color: var(--muted); font-size: 11px; }.time-summary dl { margin: 0; }.time-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }.time-summary dt { color: var(--muted); font-size: 11px; }.time-summary dd { margin: 0; font-size: 12px; font-weight: 750; }

/* Profitability */
.calculation-note { display: flex; align-items: flex-start; gap: 12px; margin: -6px 0 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }.calculation-note svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--coral-dark); stroke-width: 1.8; }.calculation-note p { margin: 0; color: var(--muted); font-size: 11px; }.calculation-note strong { color: var(--ink-soft); }
.profitability-grid { display: grid; grid-template-columns: repeat(3,minmax(250px,1fr)); gap: 15px; }.profit-card { padding: 20px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }.profit-card.is-negative { border-color: color-mix(in srgb,var(--danger) 30%,var(--line)); }.profit-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.profit-card h2 { overflow: hidden; margin: 0; font-family: var(--font-display); font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }.profit-margin { display: grid; min-width: 43px; height: 43px; place-items: center; border-radius: 50%; background: var(--sage-wash); color: var(--sage-dark); font-size: 12px; font-weight: 800; }.is-negative .profit-margin { background: var(--danger-wash); color: var(--danger); }
.profit-value { display: block; overflow-wrap: anywhere; margin-top: 22px; font-family: var(--font-display); font-size: 31px; line-height: 1; }.is-negative .profit-value { color: var(--danger); }.profit-label { color: var(--muted); font-size: 11px; }.profit-card dl { margin: 19px 0 12px; }.profit-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }.profit-card dt { color: var(--muted); font-size: 11px; }.profit-card dd { margin: 0; font-size: 12px; font-weight: 700; }.incomplete-note,.complete-note { margin: 11px 0 0; padding: 9px; border-radius: 9px; font-size: 11px; }.incomplete-note { background: var(--yellow-wash); color: #806c28; }.complete-note { background: var(--sage-wash); color: var(--sage-dark); }

/* Calendar */
.calendar-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }.calendar-toolbar h2 { min-width: 210px; margin: 0; font-family: var(--font-display); font-size: 22px; text-align: center; }.calendar-toolbar .button { margin-left: 4px; }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 18px; align-items: start; }.calendar-board { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }.calendar-weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }.calendar-weekdays { border-bottom: 1px solid var(--line); background: var(--surface-soft); }.calendar-weekdays span { padding: 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.calendar-cell { position: relative; min-width: 0; min-height: 94px; padding: 9px; border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: transparent; color: inherit; text-align: left; }.calendar-cell:hover { background: var(--surface-soft); }.calendar-cell:nth-child(7n) { border-right: 0; }.calendar-cell.is-outside { color: var(--muted-light); opacity: .48; }.calendar-cell.is-selected { background: var(--coral-wash); box-shadow: inset 0 0 0 2px var(--coral); }.calendar-cell.is-today > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); }.calendar-cell > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 17px; }.calendar-cell i,.calendar-event-row > i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--coral); }.calendar-cell .event-task,.calendar-event-row > .event-task { background: var(--blue); }.calendar-cell .event-lead,.calendar-event-row > .event-lead { background: var(--purple); }.calendar-cell .event-budget,.calendar-event-row > .event-budget { background: var(--sage); }.calendar-cell .event-release,.calendar-event-row > .event-release { background: var(--yellow); }.calendar-cell .event-resource,.calendar-event-row > .event-resource { background: var(--danger); }.calendar-cell small { position: absolute; right: 8px; bottom: 7px; color: var(--muted); font-size: 11px; }
.calendar-day-list { position: sticky; top: calc(var(--topbar-height) + 18px); }.calendar-day-list h2 { margin: 0 0 15px; font-family: var(--font-display); font-size: 23px; }.calendar-event-row { display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 5px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: inherit; text-align: left; }.calendar-event-row:hover { color: var(--coral-dark); }.calendar-event-row span { min-width: 0; }.calendar-event-row strong,.calendar-event-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.calendar-event-row strong { font-size: 12px; }.calendar-event-row small,.calendar-event-row time { color: var(--muted); font-size: 11px; }.calendar-agenda-mobile { display: none; }

/* Weekly review */
.weekly-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-bottom: 20px; }.weekly-money { display: grid; gap: 3px; margin-top: 12px; }.weekly-money strong { overflow: hidden; font-family: var(--font-display); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.weekly-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 20px; align-items: start; }.weekly-prompt { position: sticky; top: calc(var(--topbar-height) + 18px); background: var(--yellow-wash); transform: rotate(-.3deg); }.weekly-prompt h2 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.08; }.weekly-prompt p { margin: 10px 0 18px; color: var(--ink-soft); font-size: 13px; }.review-history > h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 22px; }
.review-card { margin-bottom: 10px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }.review-card header { display: flex; align-items: center; gap: 12px; }.review-card header > div { min-width: 0; margin-right: auto; }.review-card header small { color: var(--muted); font-size: 11px; }.review-card h3 { margin: 1px 0 0; font-family: var(--font-display); font-size: 18px; }.review-score { color: #80640d; font-size: 12px; letter-spacing: 1px; }.review-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin: 15px 0; }.review-columns div { min-width: 0; padding: 11px; border-radius: 11px; background: var(--surface-soft); }.review-columns strong { font-size: 11px; }.review-columns p { display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: var(--muted); font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Attachments */
.upload-panel { display: grid; grid-template-columns: auto minmax(230px,1fr) minmax(210px,.6fr); align-items: center; gap: 18px; margin-bottom: 18px; padding: 20px; border: 1px dashed color-mix(in srgb,var(--blue) 60%,var(--line)); border-radius: 18px; background: color-mix(in srgb,var(--blue-wash) 38%,var(--surface)); }.upload-art { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 17px 17px 17px 5px; background: var(--surface); color: var(--blue); }.upload-art svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }.upload-copy h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }.upload-copy p { margin: 4px 0 12px; color: var(--muted); font-size: 11px; }.file-picker { display: flex; min-width: 0; align-items: center; gap: 9px; cursor: pointer; }.file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }.file-picker > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 750; }.file-picker small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.upload-fields { display: grid; min-width: 0; gap: 8px; }.upload-fields label span { display: block; margin-bottom: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }.upload-fields select { width: 100%; min-width: 0; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 11px; }.upload-feedback { min-height: 14px; margin: 0; color: var(--muted); font-size: 11px; }
.file-stats { display: flex; gap: 14px; margin-bottom: 11px; color: var(--muted); font-size: 11px; }.file-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.file-card { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }.file-type { display: grid; width: 45px; height: 52px; place-items: center; border-radius: 5px 13px 13px 13px; background: var(--purple-wash); color: var(--purple); font-size: 11px; font-weight: 850; }.file-copy { min-width: 0; }.file-copy h2 { overflow: hidden; margin: 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.file-copy p { overflow: hidden; margin: 3px 0; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.file-copy small { color: var(--muted-light); font-size: 11px; }.file-actions { display: flex; align-items: center; gap: 2px; }.danger-icon,.danger-text { color: var(--danger) !important; }

/* Tags and settings */
.tag-suggestions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }.tag-suggestions button { padding: 3px 7px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }.tag-suggestions button:hover { border-color: var(--purple); color: var(--purple); }.tag-catalog { display: grid; grid-template-columns: repeat(3,minmax(200px,1fr)); gap: 12px; }.tag-card { display: grid; gap: 12px; padding: 17px; border: 1px solid var(--line-soft); border-top: 3px solid var(--tag-color); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }.catalog-tag,.tag-form-preview span { width: fit-content; padding: 6px 10px; border-radius: 100px; background: color-mix(in srgb,var(--tag-color) 18%,var(--surface)); color: var(--tag-color); font-size: 13px; font-weight: 750; }.tag-card > strong { color: var(--muted); font-size: 11px; }.tag-card > div { display: flex; gap: 7px; }.tag-form-preview { display: flex; min-width: 0; flex-direction: column; gap: 8px; justify-content: center; }.tag-form-preview small { color: var(--muted); font-size: 11px; }
.widget-settings { max-width: 780px; margin: 0 auto; }.widget-settings > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }.widget-settings h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }.widget-settings header p { margin: 3px 0; color: var(--muted); font-size: 12px; }.widget-settings header > span { color: var(--muted); font-size: 11px; }.widget-settings ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.widget-settings li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-soft); }.widget-settings li.is-disabled { opacity: .58; }.widget-handle { color: var(--muted-light); }.widget-settings li label { display: flex; min-width: 0; align-items: center; gap: 11px; cursor: pointer; }.widget-settings li input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--coral); }.widget-settings li label span { min-width: 0; }.widget-settings li strong,.widget-settings li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.widget-settings li strong { font-size: 12px; }.widget-settings li small { color: var(--muted); font-size: 11px; }.widget-settings li > div { display: flex; }.widget-settings footer { display: flex; align-items: center; gap: 14px; margin-top: 18px; }.widget-settings footer p { color: var(--muted); font-size: 11px; }
.settings-form { display: grid; max-width: 900px; gap: 14px; margin: 0 auto; }.settings-section > header { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }.settings-section > header > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--coral-wash); color: var(--coral-dark); }.settings-section > header svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }.settings-section h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }.settings-section header p { margin: 2px 0; color: var(--muted); font-size: 11px; }.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }.reminder-days { margin: 18px 0 0; padding: 0; border: 0; }.reminder-days legend { margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 720; }.reminder-days label { display: inline-block; margin: 0 6px 6px 0; cursor: pointer; }.reminder-days input { position: absolute; opacity: 0; }.reminder-days span { display: inline-block; padding: 7px 10px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: 11px; }.reminder-days input:checked + span { border-color: var(--coral); background: var(--coral-wash); color: var(--coral-dark); font-weight: 750; }.theme-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.theme-options label { cursor: pointer; }.theme-options input { position: absolute; opacity: 0; }.theme-options label > span { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; }.theme-options input:checked + span { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral-wash); }.theme-preview { width: 34px; height: 25px; border: 1px solid var(--line); border-radius: 7px; background: #fffdf8; box-shadow: inset 12px 0 #f4efe6; }.theme-preview.is-night { background: #2d2c27; box-shadow: inset 12px 0 #24241f; }.theme-preview.is-system { background: linear-gradient(90deg,#fffdf8 50%,#2d2c27 50%); box-shadow: none; }.theme-options strong { font-size: 12px; }.settings-footer { display: flex; align-items: center; gap: 14px; padding: 7px 0; }.settings-footer p { color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
    .profitability-grid { grid-template-columns: repeat(2,minmax(230px,1fr)); }
    .weekly-metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 920px) {
    .reminder-layout,.calendar-layout { grid-template-columns: 1fr; }.reminder-explainer,.calendar-day-list,.time-summary,.weekly-prompt { position: static; }
    .time-layout { grid-template-columns: 1fr; }.time-summary { display: none; }
    .weekly-layout { grid-template-columns: 1fr; }
    .upload-panel { grid-template-columns: auto minmax(0,1fr); }.upload-fields { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .dashboard-widget-grid { grid-template-columns: 1fr; }.dashboard-widget.is-wide { grid-column: auto; }
    .heading-actions { flex-wrap: wrap; }.heading-actions .button { min-width: 130px; }
    .reminder-card { grid-template-columns: 4px minmax(0,1fr) auto; }.reminder-actions { grid-column: 2 / -1; justify-content: flex-start; }.reminder-date { min-width: 75px; }
    .active-timer { grid-template-columns: auto minmax(0,1fr) auto; }.active-timer .button { grid-column: 2 / -1; width: 100%; }.time-entry-card { grid-template-columns: 43px minmax(0,1fr) auto; }.time-entry-actions { grid-column: 2 / -1; }.time-duration { min-width: 60px; }
    .profitability-grid,.file-grid,.tag-catalog { grid-template-columns: 1fr; }
    .calendar-board { overflow-x: auto; }.calendar-weekdays,.calendar-grid { min-width: 620px; }.calendar-day-list { display: none; }.calendar-agenda-mobile { display: block; margin-top: 18px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--surface); }.calendar-agenda-mobile h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 21px; }
    .review-columns { grid-template-columns: 1fr; }.review-score { display: none; }
    .upload-panel { grid-template-columns: 1fr; }.upload-art { display: none; }.upload-fields { grid-column: auto; }
    .settings-grid { grid-template-columns: 1fr; }.theme-options { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .reminder-card { grid-template-columns: 4px minmax(0,1fr); }.reminder-date { grid-column: 2; text-align: left; }.reminder-actions { grid-column: 2; flex-wrap: wrap; }
    .active-timer { grid-template-columns: auto minmax(0,1fr); }.active-timer output { grid-column: 2; }.time-entry-card { grid-template-columns: 40px minmax(0,1fr); }.time-duration { grid-column: 2; text-align: left; }.time-entry-actions { grid-column: 2; flex-wrap: wrap; }
    .weekly-metrics { grid-template-columns: 1fr; }
    .calendar-toolbar { flex-wrap: wrap; }.calendar-toolbar h2 { min-width: 0; flex: 1; font-size: 19px; }.calendar-toolbar .button { width: 100%; margin: 0; }
    .file-card { grid-template-columns: auto minmax(0,1fr); }.file-actions { grid-column: 2; }
    .widget-settings li { grid-template-columns: minmax(0,1fr) auto; }.widget-handle { display: none; }
}

/* Projects 1.4 — fixed work, overview and interactive Kanban */
.project-toolbar { align-items: flex-start; }
.project-search { width: min(100%, 330px); }
.project-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.project-filter-group .select-wrap select { min-width: 128px; max-width: 190px; }
.project-filter-group .select-wrap:nth-child(4) select { min-width: 155px; }
.filter-reset { min-height: 40px; padding-inline: 7px; }
.project-card-actions { display: flex; align-items: center; gap: 3px; }
.project-pin-button { display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted-light); transition: color .18s, background .18s, transform .18s; }
.project-pin-button:hover { background: var(--yellow-wash); color: #806c28; transform: translateY(-1px); }
.project-pin-button:focus-visible { outline: 3px solid color-mix(in srgb,var(--yellow) 38%,transparent); outline-offset: 1px; }
.project-pin-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.project-pin-button.is-pinned { background: var(--yellow-wash); color: #806c28; }
.project-pin-button.is-pinned svg { fill: color-mix(in srgb,var(--yellow) 28%,transparent); }
[data-theme="night"] .project-pin-button.is-pinned { color: var(--yellow); }
.project-pin-button.is-compact { width: 26px; height: 26px; border-radius: 8px; }
.project-card.is-pinned { border-color: color-mix(in srgb,var(--yellow) 34%,var(--line)); box-shadow: 0 8px 22px color-mix(in srgb,var(--yellow) 8%,transparent); }
.project-card.is-pinned::after { position: absolute; top: 0; right: 22px; width: 23px; height: 7px; border-radius: 0 0 6px 6px; background: var(--yellow); content: ""; }
.focus-pinned { padding: 3px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; color: var(--hero-muted); font-size: 11px; font-weight: 750; }
.row-pin { margin-right: 5px; color: var(--yellow); font-size: 11px; }

.kanban-help { display: flex; align-items: center; gap: 10px; margin: -5px 0 13px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-soft); color: var(--muted); }
.kanban-help > span { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 9px; background: var(--surface); color: var(--purple); }
.kanban-help svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.kanban-help p { margin: 0; font-size: 11px; line-height: 1.45; }
.kanban-help strong { color: var(--ink-soft); }
.kanban-board { grid-template-columns: repeat(5,minmax(230px,1fr)); scroll-snap-type: x proximity; }
.kanban-column { transition: border-color .16s, background .16s, box-shadow .16s; scroll-snap-align: start; }
.kanban-column.is-drop-target { border-color: var(--column-color); background: color-mix(in srgb,var(--column-color) 8%,var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--column-color) 22%,transparent); }
.kanban-column.is-drop-target .kanban-items { outline: 2px dashed color-mix(in srgb,var(--column-color) 55%,transparent); outline-offset: 4px; }
.kanban-card { cursor: grab; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.is-pinned { border-color: color-mix(in srgb,var(--yellow) 40%,var(--line)); }
.kanban-card.is-dragging { opacity: .42; box-shadow: none; transform: rotate(1.5deg) scale(.98); }
.kanban-card.is-saving { pointer-events: none; opacity: .68; }
.kanban-card.is-saving::after { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: color-mix(in srgb,var(--surface) 70%,transparent); color: var(--ink-soft); content: "Guardando…"; font-size: 11px; font-weight: 800; backdrop-filter: blur(1px); }
.kanban-card { position: relative; }
.kanban-card-kicker { align-items: center; gap: 6px; }
.kanban-card-spacer { flex: 1; }
.kanban-drag-handle { display: grid; width: 20px; height: 22px; place-items: center; color: var(--muted-light); }
.kanban-drag-handle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.kanban-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.kanban-open:focus-visible { outline: 3px solid color-mix(in srgb,var(--project-color) 35%,transparent); outline-offset: 4px; border-radius: 5px; }
.kanban-card-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kanban-card-controls label { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.kanban-card-controls select { width: 105px; min-width: 0; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; }
.kanban-card-controls .text-button { flex: 0 0 auto; font-size: 11px; }

.project-preview-dialog { width: min(1160px,calc(100vw - 34px)); max-width: none; max-height: calc(100vh - 28px); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 27px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.project-preview-dialog[open] { animation: dialog-in .25s var(--ease); }
.project-preview-dialog::backdrop { background: rgba(31,28,24,.58); backdrop-filter: blur(5px); }
.project-preview-shell { display: grid; max-height: calc(100vh - 30px); grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; }
.project-preview-loading { display: grid; min-height: min(650px,calc(100vh - 30px)); align-content: start; gap: 16px; padding: 50px; }
.project-preview-error { display: grid; min-height: 450px; place-items: center; align-content: center; padding: 30px; text-align: center; }
.project-preview-error > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--danger-wash); color: var(--danger); font-family: var(--font-display); font-size: 24px; }
.project-preview-error h2 { margin: 14px 0 5px; font-family: var(--font-display); font-size: 27px; }
.project-preview-error p { max-width: 430px; margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.project-preview-error > div { display: flex; gap: 8px; }
.project-preview-hero { --project-color: var(--coral); position: relative; display: grid; min-height: 190px; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 24px; overflow: hidden; padding: 32px 35px 29px; background: var(--hero-surface); color: var(--hero-text); }
.project-preview-hero::before { position: absolute; right: -80px; bottom: -190px; width: 430px; height: 430px; border: 80px solid color-mix(in srgb,var(--project-color) 35%,transparent); border-radius: 50%; content: ""; opacity: .45; }
.project-preview-hero::after { position: absolute; bottom: 0; left: 35px; width: 78px; height: 4px; border-radius: 5px 5px 0 0; background: var(--project-color); content: ""; }
.project-preview-hero-copy { position: relative; z-index: 1; min-width: 0; }
.project-preview-kickers { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.project-preview-hero .status-badge,.project-preview-hero .project-type-badge,.project-preview-hero .priority-badge { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.08); color: var(--hero-muted); }
.priority-urgent { background: var(--danger-wash); color: var(--danger); }.priority-high { background: var(--coral-wash); color: var(--coral-dark); }.priority-low { background: var(--sage-wash); color: var(--sage-dark); }
.project-preview-hero h2 { margin: 13px 0 7px; font-family: var(--font-display); font-size: clamp(31px,4vw,48px); font-weight: 520; letter-spacing: -.04em; line-height: 1; }
.project-preview-hero-copy > p { max-width: 700px; margin: 0; color: var(--hero-muted); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.project-preview-progress { position: relative; z-index: 1; display: grid; width: 104px; height: 104px; place-items: center; align-content: center; align-self: center; border-radius: 50%; background: radial-gradient(circle,var(--hero-surface) 0 60%,transparent 61%),conic-gradient(var(--project-color) calc(var(--progress) * 1%),rgba(255,255,255,.1) 0); }
.project-preview-progress span { font-family: var(--font-display); font-size: 24px; line-height: 1; }.project-preview-progress small { margin-top: 3px; color: var(--hero-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-preview-top-actions { position: absolute; z-index: 2; top: 20px; right: 22px; display: flex; gap: 5px; }
.project-preview-top-actions .project-pin-button,.project-preview-close { background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); }
.project-preview-top-actions .project-pin-button:hover,.project-preview-top-actions .project-pin-button.is-pinned,.project-preview-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.project-preview-close { width: 34px; height: 34px; border: 0; font-size: 20px; }
.project-preview-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 27px 31px 31px; }
.project-preview-summary { padding: 20px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--surface-soft); }
.project-preview-metadata { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; }
.project-preview-metadata > div { min-width: 0; padding: 5px 14px 12px; border-right: 1px solid var(--line-soft); }
.project-preview-metadata > div:nth-child(3n) { border-right: 0; }.project-preview-metadata > div:nth-child(n+4) { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.project-preview-metadata dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.project-preview-metadata dd { overflow-wrap: anywhere; margin: 4px 0 0; font-size: 12px; font-weight: 720; }
.project-preview-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 7px 14px 4px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.project-preview-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft); font-size: 11px; font-weight: 730; }
.project-preview-links a:hover { border-color: var(--coral); color: var(--coral-dark); }.project-preview-links a svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }.project-preview-links a svg:last-child { margin-left: 5px; }
.project-preview-no-links { margin: 12px 14px 2px; padding-top: 13px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }
.project-preview-taxonomy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 15px 14px 2px; }
.project-preview-taxonomy strong { font-size: 11px; }.project-preview-taxonomy .tech-list { margin: 8px 0 0; }.project-preview-taxonomy .tag-cloud { margin-top: 9px; }
.project-preview-grid { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 18px; margin-top: 18px; align-items: start; }
.project-preview-main,.project-preview-aside { display: grid; min-width: 0; gap: 15px; }
.project-detail-section,.project-related-section { min-width: 0; padding: 20px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.project-detail-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.project-detail-section .eyebrow { margin-bottom: 4px; font-size: 11px; }.project-detail-section h3,.project-related-section h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }.project-detail-section header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.project-share-section { overflow: hidden; border-color: color-mix(in srgb,var(--blue) 24%,var(--line-soft)); background: linear-gradient(145deg,color-mix(in srgb,var(--blue-wash) 25%,var(--surface)),var(--surface) 45%); }
.project-share-section.is-enabled { border-color: color-mix(in srgb,var(--sage) 38%,var(--line)); }
.project-share-section.is-unavailable { opacity: .78; }
.project-share-summary { display: grid; min-width: 74px; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 5px; text-align: right; }
.project-share-summary strong { color: var(--blue); font-family: var(--font-display); font-size: 27px; font-weight: 600; line-height: 1; }
.project-share-summary span { color: var(--muted); font-size: 12px; }
.project-share-summary em { grid-column: 1 / -1; margin-top: 3px; color: var(--coral-dark); font-size: 12px; font-style: normal; font-weight: 750; }
.project-share-link-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 13px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: color-mix(in srgb,var(--surface) 92%,transparent); }
.project-share-link-copy { min-width: 0; }
.project-share-link-copy > label { display: block; margin-bottom: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 780; }
.project-share-link-copy > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.project-share-link-copy input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 13px; }
.project-share-buttons { display: flex; gap: 6px; }
.project-share-link-copy > small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.project-share-link-actions { display: flex; gap: 5px; padding-bottom: 4px; }
.project-share-link-actions .text-button { min-height: 38px; padding-inline: 8px; font-size: 13px; }
.project-share-section .text-button.is-danger { color: var(--danger); }
.project-share-empty { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 16px; border: 1px dashed color-mix(in srgb,var(--blue) 45%,var(--line)); border-radius: 14px; background: color-mix(in srgb,var(--blue-wash) 28%,var(--surface)); }
.project-share-empty > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; background: var(--surface); color: var(--blue); box-shadow: var(--shadow-sm); }
.project-share-empty.is-warning { border-color: color-mix(in srgb,var(--danger) 44%,var(--line)); background: var(--danger-wash); }
.project-share-empty.is-warning > span { color: var(--danger); font-size: 18px; font-weight: 850; }
.project-share-empty svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.project-share-empty strong,.project-share-empty p { display: block; margin: 0; }
.project-share-empty strong { font-size: 14px; }
.project-share-empty p { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.project-feedback-list { display: grid; gap: 9px; margin-top: 13px; }
.project-feedback-item { position: relative; overflow: hidden; padding: 14px 14px 12px 17px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); }
.project-feedback-item::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); content: ""; }
.project-feedback-item.feedback-type-bug::before { background: var(--coral); }
.project-feedback-item.feedback-type-error::before { background: var(--danger); }
.project-feedback-item > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.project-feedback-item > header > div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 7px; }
.project-feedback-item > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.feedback-type-label { padding: 4px 8px; border-radius: 100px; background: var(--blue-wash); color: var(--blue); font-size: 12px; font-weight: 800; }
.feedback-type-bug .feedback-type-label { background: var(--coral-wash); color: var(--coral-dark); }
.feedback-type-error .feedback-type-label { background: var(--danger-wash); color: var(--danger); }
.project-feedback-item select { min-width: 124px; height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.project-feedback-item select:focus-visible { outline-offset: -2px; }
.project-feedback-item > p { margin: 11px 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.project-feedback-images { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 10px 0; }
.project-feedback-images a { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--paper-deep); }
.project-feedback-images img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease); }
.project-feedback-images a:hover img { transform: scale(1.04); }
.project-feedback-item > footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.project-feedback-item > footer > div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.project-feedback-item > footer strong,.project-feedback-item > footer a,.project-feedback-item > footer time { font-size: 12px; }
.project-feedback-item > footer a { overflow: hidden; color: var(--blue); overflow-wrap: anywhere; text-overflow: ellipsis; }
.project-feedback-item > footer time { color: var(--muted); }
.project-feedback-item > footer .text-button { flex: 0 0 auto; min-height: 38px; padding-inline: 7px; font-size: 12px; }
.project-feedback-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.project-feedback-empty { display: grid; justify-items: center; gap: 2px; margin-top: 13px; padding: 18px; border-radius: 12px; background: var(--surface-soft); color: var(--muted); text-align: center; }
.project-feedback-empty strong { color: var(--ink-soft); font-size: 14px; }
.project-feedback-empty span { font-size: 13px; line-height: 1.5; }
.project-feedback-empty .text-button { min-height: 40px; margin-top: 5px; }
.project-feedback-empty.is-error { border: 1px solid color-mix(in srgb,var(--danger) 24%,var(--line)); background: var(--danger-wash); }
.project-photo-form { display: grid; justify-items: end; gap: 4px; }.project-photo-form > div { display: flex; gap: 6px; }.project-photo-form label { cursor: pointer; }.project-photo-form input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }.project-photo-form svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }.project-photo-form small { max-width: 230px; color: var(--muted); font-size: 11px; text-align: right; }
.project-photo-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.project-photo { position: relative; min-width: 0; overflow: hidden; margin: 0; border: 1px solid var(--line-soft); border-radius: 13px; background: var(--surface-soft); }
.project-photo > a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }.project-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .24s var(--ease); }.project-photo:hover img { transform: scale(1.035); }
.project-photo figcaption { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 9px; }.project-photo figcaption span { overflow: hidden; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }.project-photo figcaption small { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.project-photo > button { position: absolute; top: 7px; right: 7px; display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; background: rgba(31,28,24,.72); color: #fff; font-size: 15px; backdrop-filter: blur(4px); }.project-photo > button:hover { background: var(--danger); }
.project-photo-empty { display: grid; min-height: 155px; grid-column: 1 / -1; place-items: center; align-content: center; padding: 20px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; }.project-photo-empty svg { width: 27px; height: 27px; margin-bottom: 8px; fill: none; stroke: var(--muted-light); stroke-width: 1.5; }.project-photo-empty strong { color: var(--ink-soft); font-family: var(--font-display); font-size: 17px; }.project-photo-empty span { margin-top: 3px; font-size: 11px; }
.project-preview-tasks { display: grid; }.project-preview-task { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }.project-preview-task:last-child { border-bottom: 0; }.project-preview-task-copy { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }.project-preview-task-copy strong,.project-preview-task-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-preview-task-copy strong { font-size: 12px; }.project-preview-task-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; }.project-preview-task.is-done .project-preview-task-copy strong { color: var(--muted); text-decoration: line-through; }
.project-preview-timeline { position: relative; display: grid; }.project-preview-timeline::before { position: absolute; top: 10px; bottom: 13px; left: 5px; width: 1px; background: var(--line); content: ""; }.project-timeline-entry { position: relative; display: grid; grid-template-columns: 11px minmax(0,1fr); gap: 11px; padding: 7px 0 16px; }.project-timeline-entry:last-child { padding-bottom: 3px; }.project-timeline-mark { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 3px solid var(--surface); border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 1px var(--line); }.project-timeline-mark.entry-type-progress { background: var(--blue); }.project-timeline-mark.entry-type-decision { background: var(--purple); }.project-timeline-mark.entry-type-blocker { background: var(--danger); }.project-timeline-mark.entry-type-learning { background: var(--yellow); }
.project-timeline-entry > div > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.project-timeline-entry header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }.project-timeline-entry time { color: var(--muted); font-size: 11px; }.project-timeline-entry h4 { margin: 7px 0 3px; font-size: 13px; }.project-timeline-entry p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }.project-timeline-entry > div > small { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; color: var(--muted-light); font-size: 11px; }.project-timeline-entry small svg { width: 11px; height: 11px; fill: none; stroke: currentColor; }
.preview-inline-empty { padding: 19px; border-radius: 11px; background: var(--surface-soft); color: var(--muted); font-size: 11px; text-align: center; }
.project-preview-documents { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.project-preview-documents a { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 11px; color: inherit; }.project-preview-documents a:hover { border-color: var(--purple); }.project-preview-documents .file-type { width: 35px; height: 40px; }.project-preview-documents a > span:nth-child(2) { min-width: 0; }.project-preview-documents strong,.project-preview-documents small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-preview-documents strong { font-size: 11px; }.project-preview-documents small { color: var(--muted); font-size: 11px; }.project-preview-documents a > svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.project-related-section { padding: 16px; box-shadow: none; }.project-related-section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }.project-related-section h3 { font-size: 17px; }.project-related-section > header span { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 800; }.project-related-section > div { display: grid; }.project-related-section button { display: block; width: 100%; min-width: 0; padding: 9px 3px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: inherit; text-align: left; }.project-related-section button:last-child { border-bottom: 0; }.project-related-section button:hover strong { color: var(--coral-dark); }.project-related-section button span,.project-related-section button strong,.project-related-section button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.project-related-section button span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.project-related-section button strong { margin: 3px 0 2px; font-size: 11px; }.project-related-section button small,.project-related-section > div > p { margin: 0; color: var(--muted); font-size: 11px; }
.project-preview-footer { display: flex; align-items: center; gap: 8px; padding: 14px 31px; border-top: 1px solid var(--line); background: var(--surface-soft); }.project-preview-footer > div { min-width: 0; margin-right: auto; }.project-preview-footer small,.project-preview-footer span { display: block; }.project-preview-footer small { color: var(--muted-light); font-size: 11px; }.project-preview-footer span { color: var(--muted); font-size: 11px; }

@media (max-width: 1180px) {
    .project-search { width: 100%; flex: 1 0 100%; }.project-filter-group { flex: 1; }.project-toolbar .segmented { align-self: center; }
    .project-preview-grid { grid-template-columns: minmax(0,1fr) 240px; }
}
@media (max-width: 920px) {
    .project-preview-grid { grid-template-columns: 1fr; }.project-preview-aside { grid-template-columns: repeat(3,minmax(0,1fr)); }.project-preview-aside .project-related-section { min-width: 0; }
    .project-preview-metadata { grid-template-columns: repeat(2,minmax(0,1fr)); }.project-preview-metadata > div:nth-child(3n) { border-right: 1px solid var(--line-soft); }.project-preview-metadata > div:nth-child(2n) { border-right: 0; }.project-preview-metadata > div:nth-child(3) { padding-top: 14px; border-top: 1px solid var(--line-soft); }
}
@media (max-width: 700px) {
    .project-filter-group { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }.project-filter-group .select-wrap select { width: 100%; max-width: none; min-width: 0; }.project-toolbar .result-count { align-self: center; }
    .kanban-help { align-items: flex-start; }.kanban-board { margin-right: -16px; padding-right: 16px; }.kanban-card-controls { display: flex; }
    .project-preview-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 20px; }.project-preview-shell { max-height: calc(100vh - 14px); }.project-preview-hero { min-height: 224px; grid-template-columns: minmax(0,1fr); align-items: end; padding: 59px 22px 24px; }.project-preview-progress { position: absolute; right: 21px; bottom: 22px; width: 72px; height: 72px; }.project-preview-progress span { font-size: 18px; }.project-preview-progress small { display: none; }.project-preview-hero-copy { padding-right: 73px; }.project-preview-hero h2 { font-size: 31px; }.project-preview-hero-copy > p { display: -webkit-box; overflow: hidden; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.project-preview-top-actions { top: 14px; right: 15px; }
    .project-preview-body { padding: 16px; }.project-preview-summary { padding: 13px; }.project-preview-taxonomy { grid-template-columns: 1fr; gap: 12px; }.project-preview-links { margin-inline: 8px; }.project-preview-no-links { margin-inline: 8px; }.project-preview-metadata > div { padding-inline: 8px; }
    .project-detail-section { padding: 16px; }.project-detail-section > header { align-items: flex-start; flex-direction: column; }.project-photo-form { width: 100%; justify-items: stretch; }.project-photo-form > div { width: 100%; }.project-photo-form .button { flex: 1; }.project-photo-form small { max-width: none; text-align: left; }.project-photo-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }.project-preview-aside { grid-template-columns: 1fr; }.project-preview-documents { grid-template-columns: 1fr; }
    .project-share-summary { justify-content: start; text-align: left; }.project-share-link-panel { grid-template-columns: 1fr; }.project-share-link-copy > div { grid-template-columns: 1fr; }.project-share-buttons { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); }.project-share-buttons .button { min-height: 44px; }.project-share-link-actions { justify-content: flex-start; }.project-share-link-actions .text-button { min-height: 44px; }.project-share-empty { grid-template-columns: auto minmax(0,1fr); }.project-share-empty > .button { grid-column: 1 / -1; width: 100%; min-height: 44px; }.project-feedback-images { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .project-share-link-copy input,.project-feedback-item select { font-size: 16px; }
    .project-preview-footer { flex-wrap: wrap; padding: 12px 16px; }.project-preview-footer > div { width: 100%; margin: 0 0 3px; }.project-preview-footer .button { flex: 1; }
}
@media (max-width: 420px) {
    .project-filter-group { grid-template-columns: 1fr; }.project-filter-group .select-wrap:nth-child(4) select { min-width: 0; }.project-toolbar .toolbar-spacer { display: none; }.project-toolbar .segmented { margin-left: auto; }
    .project-preview-hero-copy { padding-right: 0; }.project-preview-progress { display: none; }.project-preview-metadata { grid-template-columns: 1fr; }.project-preview-metadata > div,.project-preview-metadata > div:nth-child(2n),.project-preview-metadata > div:nth-child(3n) { padding: 10px 7px; border-top: 1px solid var(--line-soft); border-right: 0; }.project-preview-metadata > div:first-child { border-top: 0; }.project-photo-gallery { grid-template-columns: 1fr; }.project-preview-task { grid-template-columns: auto minmax(0,1fr); }.project-preview-task .status-badge { grid-column: 2; width: fit-content; }.project-preview-footer .button { width: 100%; flex: 1 0 100%; }
    .project-share-buttons { grid-template-columns: 1fr; }.project-share-buttons .button { width: 100%; }.project-feedback-item > header,.project-feedback-item > footer { align-items: stretch; flex-direction: column; }.project-feedback-item select { width: 100%; min-height: 44px; }.project-feedback-actions { width: 100%; align-items: stretch; flex-direction: column; }.project-feedback-item > footer .text-button { align-self: flex-start; min-height: 44px; }.project-feedback-images { grid-template-columns: 1fr; }
}

/* Universal record preview */
.record-preview-dialog {
    width: min(980px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 28px);
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-pop);
}
.record-preview-dialog--wide { width: min(1160px, calc(100vw - 32px)); }
.record-preview-dialog--compact { width: min(740px, calc(100vw - 32px)); }
.record-preview-dialog[open] { animation: dialog-in .25s var(--ease); }
.record-preview-dialog::backdrop { background: rgba(18, 18, 15, .64); backdrop-filter: blur(6px); }
.record-preview-shell {
    display: grid;
    max-height: calc(100vh - 30px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: var(--surface);
}
.record-preview-header {
    position: relative;
    display: flex;
    min-height: 168px;
    align-items: flex-end;
    overflow: hidden;
    padding: 33px 76px 29px 34px;
    background:
        radial-gradient(circle at 88% 120%, color-mix(in srgb, var(--coral) 28%, transparent) 0 9rem, transparent 9.1rem),
        linear-gradient(135deg, var(--hero-surface), var(--hero-surface-deep));
    color: var(--hero-text);
}
.record-preview-header::after {
    position: absolute;
    bottom: 0;
    left: 34px;
    width: 76px;
    height: 4px;
    border-radius: 5px 5px 0 0;
    background: var(--coral);
    content: "";
}
.record-preview-hero { position: relative; z-index: 1; min-width: 0; max-width: 760px; }
.record-preview-hero > .record-preview-tags { margin: 0 0 11px; }
.record-preview-hero .record-preview-tag { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: var(--hero-muted); }
.record-preview-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: var(--hero-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.record-preview-eyebrow::before { width: 18px; height: 2px; border-radius: 2px; background: var(--coral); content: ""; }
.record-preview-title {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--hero-text);
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 520;
    letter-spacing: -.035em;
    line-height: 1.05;
}
.record-preview-subtitle {
    max-width: 700px;
    margin: 9px 0 0;
    color: var(--hero-muted);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.record-preview-close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 20px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    color: var(--hero-muted);
    font-size: 22px;
    line-height: 1;
    transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.record-preview-close:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.14); color: var(--hero-text); transform: translateY(-1px); }
.record-preview-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 25px 29px 30px;
    scrollbar-color: var(--line) transparent;
    scrollbar-width: thin;
}
.record-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 18px; align-items: start; }
.record-preview-main,
.record-preview-aside { display: grid; min-width: 0; gap: 15px; }
.record-preview-section {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.record-preview-aside .record-preview-section { padding: 17px; box-shadow: none; }
.record-preview-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.record-preview-section-head > div { min-width: 0; }
.record-preview-section-head h3,
.record-preview-section > h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.16;
}
.record-preview-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.record-preview-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.record-preview-meta-item {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-soft);
}
.record-preview-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.35;
    text-transform: uppercase;
}
.record-preview-value {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.5;
    white-space: pre-wrap;
}
.record-preview-value a { color: var(--coral-dark); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--coral) 45%, transparent); text-underline-offset: 3px; }
.record-preview-copy { color: var(--ink-soft); font-size: 13px; line-height: 1.72; white-space: pre-wrap; }
.record-preview-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.record-preview-tag {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}
.record-preview-list { display: grid; margin: 0; padding: 0; list-style: none; }
.record-preview-list-item {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
    transition: background .16s, color .16s, padding .16s;
}
.record-preview-list-item:first-child { padding-top: 3px; }
.record-preview-list-item:last-child { padding-bottom: 3px; border-bottom: 0; }
.record-preview-list-item:hover { padding-inline: 9px; border-radius: 10px; background: var(--surface-soft); color: var(--coral-dark); }
.record-preview-list-item > span { min-width: 0; }
.record-preview-list-item strong { display: block; color: var(--ink); font-size: 13px; }
.record-preview-list-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.record-preview-list-item > svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.record-preview-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.record-preview-links a,
.record-preview-file {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
    transition: border-color .16s, background .16s, color .16s;
}
.record-preview-links a:hover,
.record-preview-file:hover { border-color: var(--coral); background: var(--surface); color: var(--coral-dark); }
.record-preview-links a > span,
.record-preview-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-preview-links svg,
.record-preview-file svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.record-preview-file strong,
.record-preview-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-preview-file small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
.record-preview-image { display: grid; overflow: hidden; min-height: 180px; place-items: center; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--paper-deep); }
.record-preview-image img { display: block; width: 100%; max-height: min(480px, 55vh); object-fit: contain; }
.record-preview-related .record-preview-section-head > span { display: grid; min-width: 27px; height: 27px; place-items: center; border-radius: 100px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 800; }
.record-preview-empty {
    display: grid;
    min-height: 92px;
    place-items: center;
    align-content: center;
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}
.record-preview-footer {
    display: flex;
    min-height: 70px;
    align-items: center;
    gap: 12px;
    padding: 13px 29px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}
.record-preview-footer > span,
.record-preview-footer > div:first-child { min-width: 0; margin-right: auto; color: var(--muted); font-size: 11px; line-height: 1.45; }
.record-preview-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.record-preview-loading,
.record-preview-error { display: grid; min-height: min(540px, calc(100vh - 30px)); place-items: center; align-content: center; gap: 10px; padding: 34px; color: var(--muted); text-align: center; }
.record-preview-loading strong,
.record-preview-error h2 { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 25px; }
.record-preview-loading p,
.record-preview-error p { max-width: 440px; margin: 0 0 10px; font-size: 13px; line-height: 1.55; }

/* Explicit dark surfaces keep the whole workspace coherent, including native menus. */
[data-theme="night"] .app-main,
[data-theme="night"] .workspace,
[data-theme="night"] .view { color: var(--ink); }
[data-theme="night"] .page-heading h1,
[data-theme="night"] .panel-heading h2,
[data-theme="night"] .metric-value { color: var(--ink); }
[data-theme="night"] .profile-menu,
[data-theme="night"] .create-menu,
[data-theme="night"] .card-actions-menu,
[data-theme="night"] .app-dialog,
[data-theme="night"] .confirm-dialog,
[data-theme="night"] .search-dialog,
[data-theme="night"] .project-preview-dialog,
[data-theme="night"] .record-preview-dialog,
[data-theme="night"] .record-preview-shell { background: var(--surface); color: var(--ink); }
[data-theme="night"] input,
[data-theme="night"] textarea,
[data-theme="night"] select,
[data-theme="night"] option { background-color: var(--surface); color: var(--ink); }
[data-theme="night"] input::placeholder,
[data-theme="night"] textarea::placeholder { color: var(--muted-light); opacity: 1; }
[data-theme="night"] .lead-list { background: rgba(0,0,0,.10); }
[data-theme="night"] .status-on_hold,
[data-theme="night"] .status-parked,
[data-theme="night"] .status-proposal,
[data-theme="night"] .status-attention,
[data-theme="night"] .entry-type-learning,
[data-theme="night"] .budget-validity.is-soon,
[data-theme="night"] .resource-renewal.is-soon,
[data-theme="night"] .security-note > span,
[data-theme="night"] .reminder-bell,
[data-theme="night"] .incomplete-note,
[data-theme="night"] .project-pin-button:hover,
[data-theme="night"] .review-score { color: var(--yellow); }
[data-theme="night"] .form-security-note svg { stroke: var(--yellow); }
[data-theme="night"] .skeleton::after,
[data-theme="night"] .skeleton-grid div::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }

@media (max-width: 820px) {
    .record-preview-grid { grid-template-columns: 1fr; }
    .record-preview-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .record-preview-dialog,
    .record-preview-dialog--wide,
    .record-preview-dialog--compact { width: calc(100vw - 10px); max-height: calc(100vh - 10px); border-radius: 20px; }
    .record-preview-shell { max-height: calc(100vh - 12px); }
    .record-preview-header { min-height: 164px; padding: 55px 20px 23px; }
    .record-preview-header::after { left: 20px; }
    .record-preview-close { top: 13px; right: 13px; }
    .record-preview-title { font-size: clamp(28px, 10vw, 36px); }
    .record-preview-subtitle { display: -webkit-box; overflow: hidden; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .record-preview-body { padding: 15px; }
    .record-preview-section { padding: 16px; }
    .record-preview-section-head { flex-direction: column; }
    .record-preview-aside { grid-template-columns: 1fr; }
    .record-preview-links { grid-template-columns: 1fr; }
    .record-preview-footer { flex-wrap: wrap; padding: 12px 15px; }
    .record-preview-footer > div:first-child { width: 100%; margin: 0; }
    .record-preview-actions { width: 100%; }
    .record-preview-actions .button { flex: 1; }
}

@media (max-width: 390px) {
    .record-preview-meta-grid { grid-template-columns: 1fr; }
    .record-preview-actions { flex-direction: column; align-items: stretch; }
    .record-preview-actions .button { width: 100%; }
}