:root {
    color-scheme: dark;
    --bg:#0f1115;
    --panel:#1a1f27;
    --panel2:#222936;
    --text:#f2f5f8;
    --muted:#b8c0cc;
    --border:#343d4d;
    --accent:#7fb7ff;
    --accent2:#7ce0a4;
    --warn:#ffbf66;
    --danger:#ff6b6b;
    --shadow:0 10px 30px rgba(0,0,0,.28);
    --radius:16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(127,183,255,.16), transparent 30rem),
        radial-gradient(circle at 90% 18%, rgba(124,224,164,.12), transparent 26rem),
        linear-gradient(135deg, #0f1115, #161b24 58%, #10141b);
    font:15px/1.45 Arial, Helvetica, sans-serif;
}
body { overflow-x:hidden; }
body.modal-open { overflow:hidden; }
a { color: inherit; }
.topbar {
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px;
    border-bottom:1px solid var(--border);
    background:rgba(15,17,21,.86);
    backdrop-filter:blur(14px);
}
.topbar strong { display:block; font-size:20px; letter-spacing:.01em; }
.topbar span { color:var(--muted); font-size:13px; }
.topbar a {
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel2);
    text-decoration:none;
    font-weight:800;
}
.layout {
    display:grid;
    grid-template-columns:minmax(280px, 320px) minmax(0, 1fr);
    gap:14px;
    padding:14px;
    max-width:1600px;
    margin:0 auto;
}
.sessions {
    position:sticky;
    top:76px;
    align-self:start;
    max-height:calc(100vh - 92px);
    overflow:auto;
    padding:14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(26,31,39,.92);
    box-shadow:var(--shadow);
}
.sessions h2 {
    margin:0 0 12px;
    font-size:.86rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.sessions-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
.sessions-head h2 { margin:0; }
.sessions-head span {
    color:var(--muted);
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.session-link {
    display:grid;
    gap:3px;
    padding:12px;
    margin-bottom:8px;
    border:1px solid transparent;
    border-radius:14px;
    background:rgba(34,41,54,.72);
    color:var(--text);
    text-decoration:none;
}
.session-link.active {
    border-color:rgba(127,183,255,.65);
    background:rgba(127,183,255,.15);
}
.session-link span,
.session-link small {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.session-link span { font-weight:800; }
.session-link small { color:var(--muted); }
.content {
    display:grid;
    gap:14px;
    min-width:0;
}
.panel {
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(26,31,39,.92);
    box-shadow:var(--shadow);
    padding:16px;
}
.hero { display:block; }
.hero-main { min-width:0; }
.eyebrow {
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
}
.hero h1 {
    margin:0;
    min-width:0;
    font-size:clamp(24px,3.2vw,38px);
    line-height:1.06;
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
}
.title-row {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
    align-items:start;
    margin-bottom:8px;
}
.edit-toggle,
.edit-close {
    width:auto;
    min-width:42px;
    min-height:42px;
    display:inline-grid;
    place-items:center;
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(34,41,54,.72);
    color:var(--text);
    font-size:18px;
    line-height:1;
}
.hero p { margin:0 0 12px; color:var(--muted); }
.hero-actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}
.analysis-link,
.secondary-link {
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:13px;
    text-decoration:none;
    font-weight:900;
}
.analysis-link {
    border:1px solid rgba(127,183,255,.55);
    background:rgba(127,183,255,.18);
    color:#cfe6ff;
}
.secondary-link {
    border:1px solid var(--border);
    background:var(--panel2);
    color:var(--muted);
}
.edit-modal[hidden] { display:none; }
.edit-modal {
    position:fixed;
    inset:0;
    z-index:20;
    display:grid;
    place-items:center;
    padding:18px;
}
.edit-backdrop {
    position:absolute;
    inset:0;
    background:rgba(5,7,10,.68);
    backdrop-filter:blur(8px);
}
.edit-card {
    position:relative;
    z-index:1;
    width:min(520px, 100%);
    max-height:calc(100vh - 36px);
    overflow:auto;
    padding:16px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(26,31,39,.98);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.edit-card-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.edit-card h2 {
    margin:0;
    font-size:20px;
    letter-spacing:-.02em;
}
.edit-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.cancel-btn {
    border-color:var(--border);
    background:var(--panel2);
    color:var(--muted);
}
.rename { display:grid; gap:8px; }
input, textarea, button {
    width:100%;
    border:1px solid var(--border);
    border-radius:13px;
    padding:11px 12px;
    color:var(--text);
    background:var(--panel2);
    font:inherit;
}
textarea { min-height:74px; resize:vertical; }
button {
    cursor:pointer;
    border-color:rgba(124,224,164,.45);
    background:rgba(124,224,164,.16);
    color:#c9f7dd;
    font-weight:900;
}
.stats {
    display:grid;
    grid-template-columns:repeat(4, minmax(150px, 1fr));
    gap:10px;
}
.metric {
    min-height:94px;
    display:grid;
    align-content:center;
}
.metric strong {
    display:block;
    font-size:clamp(22px, 3vw, 32px);
    line-height:1;
    letter-spacing:-.04em;
}
.metric span {
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:.86rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.overview-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}
.info-card {
    min-height:84px;
    display:grid;
    align-content:center;
    min-width:0;
    overflow-wrap:anywhere;
}
.info-card span,
.recipe-grid span {
    color:var(--muted);
    font-size:.8rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.info-card strong {
    display:block;
    margin-top:7px;
    font-size:clamp(16px, 1.55vw, 23px);
    line-height:1.12;
    letter-spacing:-.02em;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
}
.two-column {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.two-column.wide-left { grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr); }
.section-title {
    margin:0 0 10px;
    color:var(--muted);
    font-size:.84rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.subsection-title {
    margin:18px 0 8px;
    color:var(--text);
    font-size:.95rem;
}
.recipe-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}
.recipe-grid div {
    min-height:82px;
    display:grid;
    align-content:center;
    gap:5px;
    padding:12px;
    min-width:0;
    overflow-wrap:anywhere;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(34,41,54,.55);
}
.recipe-grid strong {
    font-size:clamp(18px, 1.8vw, 22px);
    letter-spacing:-.03em;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.chip-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.chip {
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 11px;
    border:1px solid rgba(127,183,255,.35);
    border-radius:999px;
    background:rgba(127,183,255,.12);
    color:#d9ecff;
    font-weight:800;
    max-width:100%;
    overflow-wrap:anywhere;
}
.compact-list {
    display:grid;
    gap:7px;
    margin:0;
    padding-left:18px;
    color:var(--muted);
}
.compact-list li { margin-bottom:4px; }
.muted { color:var(--muted); }
.event-list {
    display:grid;
    gap:8px;
}
.event-row {
    display:grid;
    gap:3px;
    padding:10px 12px;
    border-left:4px solid var(--accent);
    border-radius:12px;
    background:rgba(34,41,54,.64);
}
.event-row small { color:var(--muted); }
.notes {
    white-space:pre-wrap;
    color:var(--muted);
}
details summary {
    cursor:pointer;
    color:var(--muted);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}
table {
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
    font-size:14px;
}
th, td {
    padding:8px 10px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
}
td { word-break:break-word; }
th { color:var(--muted); font-weight:900; }
.login-page {
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:20px;
}
.login-card {
    width:min(420px, 100%);
    padding:28px;
    border:1px solid var(--border);
    border-radius:22px;
    background:rgba(26,31,39,.94);
    box-shadow:var(--shadow);
}
.login-card h1 { margin:0; font-size:42px; letter-spacing:-.05em; }
.login-card p { color:var(--muted); margin-top:4px; }
.login-card form { display:grid; gap:12px; }
.login-card label { display:grid; gap:6px; color:var(--muted); font-weight:800; }
.error {
    padding:10px 12px;
    margin:12px 0;
    border-radius:12px;
    color:#ffd7d7;
    background:rgba(255,107,107,.18);
}
@media (max-width: 980px) {
    .layout { grid-template-columns:1fr; padding:10px; }
    .sessions { position:relative; top:auto; max-height:320px; }
    .two-column,
    .two-column.wide-left { grid-template-columns:1fr; }
    .stats,
    .overview-grid,
    .recipe-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .topbar { align-items:flex-start; padding:12px; }
    .panel { padding:13px; }
    .hero h1 { font-size:clamp(22px, 8vw, 32px); }
    .edit-actions { grid-template-columns:1fr; }
    .stats,
    .overview-grid,
    .recipe-grid { grid-template-columns:1fr; }
    .hero-actions { display:grid; }
    .analysis-link,
    .secondary-link { width:100%; }
}