/* ─── Theme Variables ──────────────────────────────────────────────────────── */
:root {
    --bg-color:#fdfcf8; --text-color:#2c3e50; --card-bg:#ffffff;
    --border-color:#dcdde1; --input-bg:#ffffff; --read-bg:#f5f6fa;
    --accent-color:#4a69bd; --accent-hover:#1e3799;
    --success-color:#27ae60; --success-hover:#219150;
    --secondary-color:#34495e; --secondary-hover:#2c3e50;
    --info-color:#3498db; --danger-color:#e74c3c; --danger-hover:#c0392b;
    --focus-color:#8e44ad; --focus-hover:#732d91;
    --warning-color:#f39c12; --sheets-color:#217346; --sheets-hover:#165030;
    --sidebar-w:260px; --topbar-h:0px;
    --shadow-sm:0 1px 4px rgba(0,0,0,.06);
    --shadow-md:0 4px 12px rgba(0,0,0,.1);
    --shadow-lg:0 8px 28px rgba(0,0,0,.14);
    --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
    --font-body:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;
    --font-heading:"Futura","Trebuchet MS","Segoe UI",Arial,sans-serif;
    --font-ui:var(--font-heading);
}
:root[data-theme="light-red"]    { --bg-color:#fff5f5;--text-color:#2d3436;--card-bg:#ffffff;--border-color:#f1dddd;--input-bg:#ffffff;--read-bg:#fce8e8; }
:root[data-theme="powder-blue"]  { --bg-color:#f0f8ff;--text-color:#2c3e50;--card-bg:#ffffff;--border-color:#d1e5f5;--input-bg:#ffffff;--read-bg:#e1effc; }
:root[data-theme="light-yellow"] { --bg-color:#fcf8e3;--text-color:#3e3124;--card-bg:#ffffff;--border-color:#e8dfc3;--input-bg:#ffffff;--read-bg:#f2ebd9; }
:root[data-theme="dark"]         { --bg-color:#121212;--text-color:#d4d4d4;--card-bg:#1e1e1e;--border-color:#333;--input-bg:#2a2a2a;--read-bg:#181818;--accent-color:#5b7cda; }

/* ─── Base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; margin:0; padding:0; background:var(--bg-color); color:var(--text-color); font-family:var(--font-body); overflow:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:500; margin:0; }
a { color:var(--accent-color); }
button,input,textarea,select { font-family:var(--font-ui); }

.ui-icon {
    width:1em;
    height:1em;
    display:inline-block;
    flex-shrink:0;
    vertical-align:-0.12em;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.ui-icon-fill { fill:currentColor; stroke:none; }
.icon-label { display:inline-flex; align-items:center; gap:8px; }

/* ─── App Shell ────────────────────────────────────────────────────────────── */
#app-shell { display:flex; height:100vh; overflow:hidden; }

/* ─── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar {
    width:var(--sidebar-w); flex-shrink:0;
    background:var(--card-bg);
    border-right:1px solid var(--border-color);
    display:flex; flex-direction:column;
    height:100vh; overflow:hidden;
    transition:transform .25s ease;
    z-index:200;
}
.sidebar-brand {
    padding:20px 18px 16px;
    border-bottom:1px solid var(--border-color);
    flex-shrink:0;
}
.sidebar-brand-main { font-family:var(--font-heading); font-size:1.25rem; font-weight:bold; color:var(--accent-color); display:block; letter-spacing:-.3px; }
.sidebar-brand-sub  { font-size:.8rem; color:#7f8fa6; font-style:italic; font-family:var(--font-body); }
.sidebar-brand-tag  { font-size:.7rem; color:#b2bec3; font-style:italic; margin-top:2px; display:block; }

.sidebar-nav { flex:1; overflow-y:auto; padding:10px 0; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:4px; }

.nav-item {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:9px 18px;
    background:none; border:none; cursor:pointer;
    color:var(--text-color); font-size:.88rem;
    font-family:var(--font-heading); font-weight:500;
    text-align:left; transition:background .15s,color .15s;
    border-radius:0;
}
.nav-item:hover { background:var(--read-bg); }
.nav-item.active { background:var(--accent-color)10; color:var(--accent-color); font-weight:bold; border-left:3px solid var(--accent-color); }
.nav-item .nav-icon {
    width:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:currentColor;
}
.nav-item .nav-icon .ui-icon { width:18px; height:18px; }

.nav-section-label {
    padding:12px 18px 4px;
    font-size:.65rem; font-weight:bold; letter-spacing:1.2px;
    color:#b2bec3; font-family:var(--font-heading);
    text-transform:uppercase;
}

/* Notebook items in sidebar */
.notebook-nav-item {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:7px 18px 7px 28px;
    background:none; border:none; cursor:pointer;
    color:var(--text-color); font-size:.83rem;
    font-family:var(--font-body); text-align:left;
    transition:background .15s; gap:8px;
}
.notebook-nav-item:hover { background:var(--read-bg); }
.notebook-nav-item.active { background:var(--accent-color)10; color:var(--accent-color); font-weight:bold; }
.notebook-nav-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notebook-nav-count { font-size:.7rem; color:#b2bec3; flex-shrink:0; background:var(--read-bg); padding:1px 6px; border-radius:10px; }
.notebook-nav-item.active .notebook-nav-count { background:var(--accent-color)20; color:var(--accent-color); }

/* Sidebar add subject inline */
#sidebar-add-subject-form {
    padding:8px 16px 8px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
}
#sidebar-add-subject-form input {
    width:100%;
    min-width:0;
    padding:8px 10px;
    font-size:.8rem;
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
    background:var(--input-bg); color:var(--text-color);
}
#sidebar-add-subject-form .sidebar-add-actions {
    display:flex;
    gap:8px;
    align-items:center;
}
#sidebar-add-subject-form .sas-add {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--accent-color);
    color:white;
    border:none;
    padding:7px 12px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:.8rem;
    font-family:var(--font-heading);
    white-space:nowrap;
}
#sidebar-add-subject-form .sas-cancel {
    background:none;
    border:none;
    color:#7f8fa6;
    cursor:pointer;
    font-size:.8rem;
    padding:7px 6px;
    font-family:var(--font-heading);
}
#sidebar-add-subject-form .sas-add:hover { background:var(--accent-hover); }

.nav-add-btn {
    display:flex; align-items:center; gap:8px;
    width:100%; padding:7px 18px 7px 28px;
    background:none; border:none; cursor:pointer;
    color:#7f8fa6; font-size:.8rem;
    font-family:var(--font-body); text-align:left;
    transition:color .15s;
}
.nav-add-btn:hover { color:var(--accent-color); }

/* Sidebar footer */
.sidebar-footer {
    border-top:1px solid var(--border-color);
    padding:10px 0;
    flex-shrink:0;
}
#user-info {
    display:none; align-items:center; gap:8px;
    padding:8px 18px; font-size:.8rem;
    background:var(--read-bg); margin:6px 10px;
    border-radius:var(--radius-md); border:1px solid var(--border-color);
}
#user-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
#user-name   { font-weight:bold; color:var(--text-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-size:.78rem; }
#sync-status { display:none; font-size:.65rem; padding:2px 6px; border-radius:8px; font-weight:bold; flex-shrink:0; }
.sync-syncing { background:#fff3cd; color:#856404; }
.sync-synced  { background:#d4edda; color:#155724; }
.sync-local   { background:#e2e3e5; color:#383d41; }
.sync-error   { background:#f8d7da; color:#721c24; }

#auth-btn {
    display:flex; align-items:center; gap:8px;
    width:calc(100% - 20px); margin:4px 10px;
    padding:8px 12px; border-radius:var(--radius-sm);
    font-size:.82rem; cursor:pointer; transition:all .2s;
    font-family:var(--font-heading); font-weight:bold;
}
.auth-sign-in { background:white; color:#3c4043; border:1px solid #dadce0; box-shadow:var(--shadow-sm); }
.auth-sign-in:hover { background:#f8f8f8; box-shadow:var(--shadow-md); }
.auth-sign-out { background:#243b53; color:#f5f7fa; border:1px solid #243b53; box-shadow:var(--shadow-sm); }
.auth-sign-out:hover { background:#1f3246; border-color:#1f3246; box-shadow:var(--shadow-md); }
.google-g { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#4285F4 25%,#34A853 25%,#34A853 50%,#FBBC05 50%,#FBBC05 75%,#EA4335 75%); color:white; font-size:.6rem; font-weight:900; font-family:Arial,sans-serif; flex-shrink:0; }

/* ─── Hamburger (mobile) ───────────────────────────────────────────────────── */
#hamburger {
    display:none; position:fixed; top:12px; left:12px;
    z-index:300; background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer;
    font-size:1.1rem; box-shadow:var(--shadow-sm);
}
#sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); z-index:190;
}
#sidebar-overlay.active { display:block; }

/* ─── Main Content ─────────────────────────────────────────────────────────── */
#main-content { flex:1; overflow-y:auto; height:100vh; background:var(--bg-color); }
.panel { display:none; min-height:100vh; }
.panel.active { display:block; }

/* ─── Panel Header ─────────────────────────────────────────────────────────── */
.panel-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:28px 32px 20px; flex-wrap:wrap; gap:12px;
    border-bottom:1px solid var(--border-color);
    background:var(--card-bg); position:sticky; top:0; z-index:50;
}
.panel-header h1 { font-size:1.8rem; color:var(--text-color); }
.panel-header-sub { font-size:.9rem; color:#7f8fa6; margin-top:4px; font-family:var(--font-body); font-style:italic; }
.panel-header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ─── Dashboard ────────────────────────────────────────────────────────────── */
#dashboard-content { padding:28px 32px; }

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px; margin-bottom:32px;
}
.stat-card {
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); padding:20px 22px;
    box-shadow:var(--shadow-sm); transition:box-shadow .2s;
    cursor:default;
}
.stat-card:hover { box-shadow:var(--shadow-md); }
.stat-icon { font-size:1.5rem; margin-bottom:8px; }
.stat-icon .ui-icon,
.dash-empty-icon .ui-icon { width:28px; height:28px; }
.stat-value { font-family:var(--font-heading); font-size:2rem; font-weight:bold; color:var(--accent-color); line-height:1; }
.stat-label { font-size:.8rem; color:#7f8fa6; margin-top:4px; font-family:var(--font-body); }
.stat-sub { font-size:.75rem; color:var(--success-color); margin-top:4px; font-weight:bold; }

.section-title {
    font-family:var(--font-heading); font-size:1rem;
    font-weight:bold; color:var(--text-color);
    text-transform:uppercase; letter-spacing:.5px;
    margin-bottom:14px;
}

.progress-list { display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.subject-progress-item {
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--radius-md); padding:14px 18px;
    cursor:pointer; transition:all .2s;
}
.subject-progress-item:hover { box-shadow:var(--shadow-md); transform:translateX(3px); }
.progress-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.progress-subject { font-family:var(--font-heading); font-size:.9rem; font-weight:bold; color:var(--text-color); }
.progress-count { font-size:.78rem; color:#7f8fa6; }
.progress-bar-track { height:6px; background:var(--read-bg); border-radius:3px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--accent-color); border-radius:3px; transition:width .4s ease; }
.progress-bar-fill.full { background:var(--success-color); }

.deadline-list { display:flex; flex-direction:column; gap:8px; }
.deadline-item {
    display:flex; justify-content:space-between; align-items:center;
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--radius-md); padding:12px 16px;
    cursor:pointer; transition:all .2s; gap:12px;
}
.deadline-item:hover { box-shadow:var(--shadow-md); }
.deadline-info { flex:1; min-width:0; }
.deadline-case-title { display:block; font-size:.88rem; font-weight:bold; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.subject-badge { font-size:.68rem; background:var(--read-bg); color:#7f8fa6; padding:2px 7px; border-radius:10px; font-weight:bold; text-transform:uppercase; }
.deadline-meta { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.deadline-date { font-size:.8rem; color:#7f8fa6; }
.deadline-chip { font-size:.72rem; font-weight:bold; padding:3px 8px; border-radius:8px; }
.chip-red    { background:#fde8e8; color:#c0392b; }
.chip-yellow { background:#fef3cd; color:#856404; }
.chip-green  { background:#d4edda; color:#155724; }
.chip-grey   { background:#e2e3e5; color:#6c757d; text-decoration:line-through; }

.dash-empty { text-align:center; padding:60px 20px; color:#7f8fa6; font-style:italic; }
.dash-empty .dash-empty-icon { font-size:3rem; margin-bottom:12px; }
.dash-empty h3 { color:var(--text-color); margin-bottom:8px; }

/* ─── Notebook Panel ───────────────────────────────────────────────────────── */
.notebook-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:24px 32px 16px; gap:12px; flex-wrap:wrap;
    background:var(--card-bg); border-bottom:1px solid var(--border-color);
    position:sticky; top:0; z-index:50;
}
.notebook-title-area { min-width:0; }
#current-tab-title { font-size:1.7rem; color:var(--accent-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:500px; }
#notebook-stats { font-size:.8rem; color:#7f8fa6; margin-top:4px; font-family:var(--font-body); }
.notebook-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.notebook-toolbar {
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    padding:12px 32px; background:var(--bg-color);
    border-bottom:1px solid var(--border-color);
    position:sticky; top:65px; z-index:40; /* below header */
}
.search-bar {
    flex:1; min-width:180px; padding:8px 14px; font-size:.88rem;
    border:1.5px solid var(--border-color); border-radius:var(--radius-sm);
    background:var(--input-bg); color:var(--text-color);
    transition:border-color .2s;
}
.search-bar:focus { outline:none; border-color:var(--accent-color); }
.toolbar-select {
    padding:8px 10px; border-radius:var(--radius-sm);
    border:1px solid var(--border-color); background:var(--input-bg);
    color:var(--text-color); cursor:pointer; font-family:var(--font-body);
    font-size:.85rem;
}
.filter-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent; color:var(--accent-color);
    border:1.5px solid var(--accent-color);
    padding:7px 13px; font-family:var(--font-heading); font-weight:bold;
    border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
    transition:all .2s; font-size:.82rem;
}
.filter-btn.active { background:var(--accent-color); color:white; }
.view-toggle { display:flex; border:1px solid var(--border-color); border-radius:var(--radius-sm); overflow:hidden; }
.view-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 13px; background:var(--input-bg); border:none;
    cursor:pointer; font-size:.8rem; font-family:var(--font-heading);
    color:var(--text-color); transition:background .15s;
}
.view-btn:hover { background:var(--read-bg); }
.view-btn.active { background:var(--accent-color); color:white; }

/* ─── Card View ────────────────────────────────────────────────────────────── */
.cases-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
    gap:16px; padding:24px 32px;
}
.case-card {
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); padding:18px;
    transition:all .2s; position:relative;
    display:flex; flex-direction:column;
}
.case-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.case-card.read { opacity:.55; }
.case-card.read:hover { opacity:.75; }

.case-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.case-card-badges { display:flex; gap:5px; align-items:center; flex-wrap:wrap; flex-shrink:0; }
.status-badge { font-size:.65rem; font-weight:bold; padding:3px 7px; border-radius:8px; text-transform:uppercase; letter-spacing:.3px; }
.badge-unread { background:#e8f0fe; color:var(--accent-color); }
.badge-read   { background:#d4edda; color:#155724; }
.has-link-icon { font-size:.85rem; title:"Has full text link"; }

.case-card-title { font-family:var(--font-heading); font-size:.92rem; font-weight:bold; color:var(--text-color); line-height:1.3; margin-bottom:3px; }
.case-link {
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid transparent;
}
.case-link:hover,
.case-link:focus-visible {
    color:var(--accent-color);
    border-bottom-color:currentColor;
}
.case-card-ponente { font-size:.75rem; color:#7f8fa6; font-style:italic; }
.case-card-doctrine {
    font-size:.82rem; color:var(--text-color); line-height:1.5;
    margin:10px 0; flex:1;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
}
.case-card-doctrine.pending { color:#b2bec3; font-style:italic; }
.case-card-deadline { margin-bottom:10px; }

.case-card-footer {
    display:flex;
    align-items:center;
    gap:8px;
    padding-top:12px;
    border-top:1px solid var(--border-color);
    margin-top:auto;
}
.case-card-footer input[type="checkbox"] { width:16px; height:16px; cursor:pointer; accent-color:var(--success-color); }
.case-card-footer .card-action-btn,
.case-card-footer .btn-read,
.case-card-footer .btn-edit,
.case-card-footer .btn-delete,
.case-card-footer .btn-compare,
.case-card-footer .btn-link {
    all:unset;
}
.card-primary-btn {
    padding:6px 14px;
    border:none;
    border-radius:var(--radius-sm);
    background:var(--success-color);
    color:white;
    font-family:var(--font-heading);
    font-weight:bold;
    font-size:.78rem;
    cursor:pointer;
    transition:opacity .2s;
    white-space:nowrap;
    flex-shrink:0;
}
.card-primary-btn:hover { opacity:.85; }
.card-icon-actions {
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto;
}
.card-icon-btn {
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    background:var(--read-bg);
    color:var(--text-color);
    transition:background .15s, color .15s;
    flex-shrink:0;
}
.card-icon-btn .ui-icon { width:15px; height:15px; }
.card-icon-btn:hover { background:var(--border-color); }
.card-icon-compare:hover { background:var(--focus-color); color:white; }
.card-icon-link:hover { background:var(--secondary-color); color:white; }
.card-icon-edit:hover { background:var(--info-color); color:white; }
.card-icon-delete:hover { background:var(--danger-color); color:white; }
.case-menu { position:relative; margin-left:auto; }
.case-menu-trigger,
.row-icon-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:none;
    border-radius:var(--radius-sm);
    color:white;
    cursor:pointer;
}
.case-menu-trigger { background:var(--secondary-color); }
.case-menu-dropdown {
    display:none;
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    min-width:132px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);
    padding:6px;
    z-index:20;
}
.case-menu-dropdown.open { display:block; }
.case-menu-dropdown button {
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    background:none;
    color:var(--text-color);
    border:none;
    border-radius:var(--radius-sm);
    padding:8px 10px;
    cursor:pointer;
    font-size:.8rem;
    font-family:var(--font-heading);
}
.case-menu-dropdown button:hover { background:var(--read-bg); }
.case-menu-dropdown button .ui-icon { width:14px; height:14px; }

/* Review mode – card view */
.review-active .case-card .case-card-doctrine,
.review-active .case-card .case-card-ponente {
    filter:blur(6px); opacity:.3; user-select:none; transition:all .3s;
    cursor:pointer;
}
.review-active .case-card.revealed-card .case-card-doctrine,
.review-active .case-card.revealed-card .case-card-ponente {
    filter:none; opacity:1; user-select:auto;
}

/* ─── Spreadsheet View ─────────────────────────────────────────────────────── */
.table-wrapper { padding:20px 32px; }
.table-responsive { width:100%; overflow-x:auto; background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.cases-table { width:100%; border-collapse:collapse; font-size:.88rem; min-width:900px; }
.cases-table th,.cases-table td { padding:10px 12px; border-bottom:1px solid var(--border-color); border-right:1px solid var(--border-color); text-align:left; vertical-align:top; }
.cases-table th:last-child,.cases-table td:last-child { border-right:none; }
.cases-table th { background:var(--read-bg); color:var(--accent-color); font-family:var(--font-heading); font-weight:bold; text-transform:uppercase; letter-spacing:.4px; font-size:.75rem; position:sticky; top:0; z-index:5; }
.cases-table tr { transition:background .15s; }
.cases-table tr:hover { background:var(--read-bg); }
.cases-table tr.read { opacity:.5; background:var(--bg-color); }
.cases-table tr.editing-row { background:var(--read-bg); box-shadow:inset 0 0 0 2px var(--accent-color); opacity:1; }
.cases-table input[type="text"].inline-input,.cases-table textarea.inline-input,.cases-table select.inline-input { width:100%; padding:6px 8px; font-size:.82rem; border:1px solid var(--accent-color); border-radius:4px; background:var(--bg-color); color:var(--text-color); box-sizing:border-box; font-family:var(--font-body); }
.cases-table textarea.inline-input { min-height:80px; resize:vertical; }
.drag-handle { cursor:grab; color:var(--border-color); text-align:center; vertical-align:middle; font-size:1rem; user-select:none; }
.cases-table tr:hover .drag-handle { color:var(--accent-color); }
.drag-handle:active { cursor:grabbing; }
.pending-text { color:#b2bec3; font-style:italic; }
.cell-actions { display:flex; flex-direction:column; gap:5px; }
.cell-actions button { border:none; padding:4px 8px; border-radius:4px; cursor:pointer; font-size:.73rem; color:white; width:100%; font-family:var(--font-heading); }
.inline-focus-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    border:none;
    border-radius:4px;
    background:var(--secondary-color);
    color:white;
    cursor:pointer;
    padding:7px 8px;
    font-size:.76rem;
    font-family:var(--font-heading);
}
.inline-digest-summary { font-size:.75rem; color:#7f8fa6; line-height:1.4; }

/* Review mode – table */
.review-active tr:not(.revealed-case) .hideable-td { cursor:pointer; position:relative; }
.review-active tr:not(.revealed-case) .hideable-td .cell-content { filter:blur(6px); opacity:.25; user-select:none; pointer-events:none; }
.review-active tr.revealed-case .hideable-td .cell-content { filter:none; opacity:1; }
.cell-content { transition:all .2s; }

/* ─── FAB ──────────────────────────────────────────────────────────────────── */
.fab {
    position:fixed; bottom:28px; right:28px; z-index:100;
    width:54px; height:54px; border-radius:50%;
    background:var(--accent-color); color:white; border:none;
    font-size:1.6rem; font-weight:300; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-lg); transition:all .2s;
    line-height:1;
}
.fab:hover { background:var(--accent-hover); transform:scale(1.08); }
.fab.hidden { display:none; }

/* ─── Slide-up Case Panel ──────────────────────────────────────────────────── */
#case-panel-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:400;
}
#case-panel-overlay.active { display:block; }
#case-panel-overlay.focus-hidden { display:none; }
#case-panel {
    position:fixed; bottom:0; left:0; right:0; z-index:500;
    background:var(--card-bg);
    border-top:2px solid var(--accent-color);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    max-height:90vh; display:flex; flex-direction:column;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.18);
}
#case-panel.active { transform:translateY(0); }
#case-panel.focus-hidden {
    opacity:0;
    pointer-events:none;
    transform:translateY(100%);
}

.case-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 24px; border-bottom:1px solid var(--border-color);
    flex-shrink:0;
}
.case-panel-header h3 { font-size:1.1rem; color:var(--accent-color); }
.case-panel-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:#7f8fa6; padding:0; line-height:1; }
.case-panel-close:hover { color:var(--danger-color); }

.case-panel-body { overflow-y:auto; padding:20px 24px; flex:1; }
.case-panel-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.case-panel-grid .form-group { margin-bottom:0; }
.case-panel-grid .full-span { grid-column:1/-1; }
.form-group label { display:block; margin-bottom:4px; font-size:.8rem; font-weight:bold; color:var(--text-color); font-family:var(--font-heading); }
.form-group input,.form-group select,.form-group textarea {
    width:100%; padding:8px 10px; border:1px solid var(--border-color);
    border-radius:var(--radius-sm); font-size:.88rem;
    background:var(--input-bg); color:var(--text-color);
    transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--accent-color); }
.form-group textarea { resize:vertical; min-height:80px; }
.digest-focus-card {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--read-bg);
}
.digest-focus-copy strong { display:block; font-family:var(--font-heading); margin-bottom:4px; }
.digest-focus-copy p { margin:0; font-size:.82rem; color:#7f8fa6; line-height:1.5; }
.digest-focus-trigger { flex-shrink:0; }
.digest-preview-list {
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    margin-top:12px;
}
.digest-preview-item {
    padding:10px 12px;
    border:1px dashed var(--border-color);
    border-radius:var(--radius-sm);
    background:var(--card-bg);
}
.digest-preview-item strong {
    display:block;
    margin-bottom:4px;
    font-size:.78rem;
    font-family:var(--font-heading);
}
.digest-preview-item span { font-size:.76rem; color:#7f8fa6; }
.digest-preview-item.filled { border-style:solid; border-color:var(--accent-color); }
.upload-hint { margin-top:6px; font-size:.78rem; color:#7f8fa6; }
.case-panel-footer {
    display:flex; justify-content:flex-end; gap:10px;
    padding:14px 24px; border-top:1px solid var(--border-color);
    flex-shrink:0;
}

/* ─── General Buttons ──────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; color:white; border:none; padding:8px 14px; font-size:.85rem; font-weight:bold; border-radius:var(--radius-sm); cursor:pointer; transition:all .2s; font-family:var(--font-heading); }
.btn:hover { filter:brightness(.92); }
.primary-btn   { background:var(--accent-color); }
.success-btn   { background:var(--success-color); }
.danger-btn    { background:var(--danger-color); }
.secondary-btn { background:var(--secondary-color); }
.info-btn      { background:var(--info-color); }
.cancel-btn    { background:#95a5a6; }
.sheets-btn    { background:var(--sheets-color); font-size:.78rem; }
.submit-btn    { background:var(--accent-color); }
.word-warning { font-size:.73rem; color:var(--warning-color); font-style:italic; margin-top:3px; display:none; }

/* ─── Compare Overlay ──────────────────────────────────────────────────────── */
#compare-overlay {
    display:none; position:fixed; inset:0; z-index:30000;
    background:var(--bg-color); flex-direction:column;
}
#compare-overlay.active { display:flex; }
.compare-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 24px; background:var(--card-bg);
    border-bottom:2px solid var(--accent-color); flex-shrink:0;
}
.compare-header h3 { color:var(--accent-color); font-size:1rem; }
.compare-close-btn { background:none; border:1px solid var(--border-color); padding:6px 12px; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-heading); font-size:.82rem; color:var(--text-color); }
.compare-close-btn:hover { background:var(--danger-color); color:white; border-color:var(--danger-color); }
.compare-body {
    display:grid; grid-template-columns:1fr 1fr; flex:1; overflow:hidden;
}
.compare-pane { overflow-y:auto; padding:20px 24px; }
.compare-pane:first-child { border-right:2px solid var(--border-color); }
.compare-pane-label { font-size:.65rem; font-weight:bold; letter-spacing:1.2px; text-transform:uppercase; color:#b2bec3; margin-bottom:12px; font-family:var(--font-heading); }
.compare-open-btn { display:inline-flex; align-items:center; gap:6px; background:var(--info-color); color:white; padding:7px 14px; border-radius:var(--radius-sm); font-size:.82rem; font-family:var(--font-heading); font-weight:bold; text-decoration:none; margin-bottom:14px; }
#compare-iframe { width:100%; height:calc(100vh - 180px); border:1px solid var(--border-color); border-radius:var(--radius-sm); }
.compare-digest-section { margin-bottom:18px; }
.compare-section-title { font-family:var(--font-heading); font-size:.85rem; font-weight:bold; color:var(--accent-color); text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
.compare-section-text { font-size:.88rem; line-height:1.6; color:var(--text-color); }
.digest-focus-modal-card {
    background:var(--bg-color);
    width:min(1400px, 98vw);
    height:min(92vh, 860px);
    border-radius:18px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}
.digest-focus-header,
.digest-focus-footer {
    padding:18px 24px;
    background:var(--card-bg);
    border-bottom:1px solid var(--border-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.digest-focus-header p { margin:6px 0 0; font-size:.88rem; color:#7f8fa6; }
.digest-focus-close {
    border:none;
    background:none;
    color:#7f8fa6;
    cursor:pointer;
    padding:4px;
}
.digest-focus-close .ui-icon { width:20px; height:20px; }
.digest-focus-body {
    flex:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    padding:0;
    overflow:hidden;
}
.digest-focus-reader {
    height:100%;
    border-right:1px solid var(--border-color);
    background:var(--bg-color);
}
.digest-focus-reader iframe {
    width:100%;
    height:100%;
    display:block;
}
.digest-focus-editor {
    overflow-y:auto;
    padding:0;
    background:var(--card-bg);
    display:flex;
    flex-direction:column;
}
.digest-rte-toolbar {
    display:flex;
    flex-wrap:wrap;
    gap:2px;
    padding:8px 12px;
    background:var(--read-bg);
    border-bottom:1px solid var(--border-color);
    flex-shrink:0;
    align-items:center;
    position:sticky;
    top:0;
    z-index:5;
}
.rte-btn {
    min-width:30px;
    height:30px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    cursor:pointer;
    color:var(--text-color);
    font-family:var(--font-ui);
    font-size:.82rem;
    font-weight:bold;
    transition:background .15s, border-color .15s;
    white-space:nowrap;
}
.rte-btn:hover { background:var(--border-color); }
.rte-btn-active { background:var(--accent-color); color:white; border-color:var(--accent-color); }
.rte-select {
    height:30px;
    padding:0 6px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-sm);
    background:var(--input-bg);
    color:var(--text-color);
    font-size:.8rem;
    cursor:pointer;
}
.rte-separator {
    width:1px;
    height:22px;
    background:var(--border-color);
    margin:0 4px;
    align-self:center;
    flex-shrink:0;
}
.digest-focus-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    padding:24px;
}
.digest-focus-field {
    display:flex;
    flex-direction:column;
    min-height:0;
}
.digest-focus-field label {
    margin-bottom:8px;
    font-size:.84rem;
    font-family:var(--font-heading);
    font-weight:bold;
}
.digest-rte-field {
    flex:1;
    min-height:200px;
    max-height:400px;
    overflow-y:auto;
    padding:14px 16px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--card-bg);
    color:var(--text-color);
    font-family:var(--font-body);
    font-size:.95rem;
    line-height:1.7;
    outline:none;
    transition:border-color .2s;
    word-break:break-word;
}
.digest-rte-field:focus { border-color:var(--accent-color); }
.digest-rte-field:empty::before {
    content:attr(data-placeholder);
    color:#b2bec3;
    pointer-events:none;
    display:block;
}
.digest-rte-field h1 { font-size:1.4rem; font-weight:bold; margin:.4em 0; }
.digest-rte-field h2 { font-size:1.2rem; font-weight:bold; margin:.4em 0; }
.digest-rte-field h3 { font-size:1.05rem; font-weight:bold; margin:.4em 0; }
.digest-rte-field p { margin:.3em 0; }
.digest-rte-field ul,
.digest-rte-field ol { margin:.4em 0; padding-left:1.6em; }
.digest-rte-field li { margin:.2em 0; }
.digest-rte-field mark { background:#fff176; color:inherit; border-radius:2px; padding:0 2px; }
.digest-rte-field b,
.digest-rte-field strong { font-weight:bold; }
.digest-rte-field i,
.digest-rte-field em { font-style:italic; }
.digest-rte-field u { text-decoration:underline; }
.digest-rte-field s,
.digest-rte-field strike { text-decoration:line-through; }
.digest-rte-field blockquote {
    border-left:3px solid var(--accent-color);
    margin:.5em 0;
    padding:.3em .8em;
    color:#7f8fa6;
    font-style:italic;
}
:root[data-theme="dark"] .digest-rte-field mark { background:#b8860b; color:#fff; }
.digest-focus-footer {
    border-top:1px solid var(--border-color);
    border-bottom:none;
    justify-content:flex-end;
}

/* ─── Settings Panel ───────────────────────────────────────────────────────── */
#settings-content { padding:28px 32px; max-width:640px; }
.settings-section {
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); padding:24px; margin-bottom:20px;
    box-shadow:var(--shadow-sm);
}
.settings-section-title { font-family:var(--font-heading); font-size:1rem; font-weight:bold; color:var(--accent-color); margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--border-color); }
.settings-row { display:flex; flex-direction:column; margin-bottom:14px; }
.settings-row:last-child { margin-bottom:0; }
.settings-row label { font-size:.82rem; font-weight:bold; color:var(--text-color); margin-bottom:5px; font-family:var(--font-heading); }
.settings-row input,.settings-row select {
    padding:9px 12px; border:1px solid var(--border-color);
    border-radius:var(--radius-sm); font-size:.88rem;
    background:var(--input-bg); color:var(--text-color);
    width:100%; max-width:340px;
    transition:border-color .2s;
}
.settings-row input:focus,.settings-row select:focus { outline:none; border-color:var(--accent-color); }
.settings-help { margin-top:6px; font-size:.76rem; color:#7f8fa6; line-height:1.5; max-width:340px; }
.settings-empty-note { margin:0; font-size:.84rem; color:#7f8fa6; line-height:1.6; }
.settings-shared-list { display:flex; flex-direction:column; gap:12px; }
.settings-shared-item {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding:14px 16px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    background:var(--read-bg);
}
.settings-shared-copy strong {
    display:block;
    margin-bottom:4px;
    font-size:.9rem;
}
.settings-shared-copy span {
    display:block;
    font-size:.78rem;
    color:#7f8fa6;
}
.settings-shared-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
/* Shared notebook status label in settings list */
.settings-shared-status {
    display:inline-block;
    margin-top:4px;
    font-size:.74rem;
    font-weight:bold;
    letter-spacing:.02em;
}
.settings-shared-status--active { color:var(--success-color); }
.settings-shared-status--paused { color:var(--warning-color); }

/* Dimmed appearance for a disabled (paused) shared notebook row */
.settings-shared-item--disabled { opacity:.65; }

/* Shared notebook badge in the notebook header */
.notebook-shared-badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:.75rem;
    font-weight:bold;
    padding:3px 10px;
    border-radius:20px;
    letter-spacing:.03em;
    vertical-align:middle;
    margin-top:4px;
}
.notebook-shared-badge .ui-icon { width:12px; height:12px; }
.notebook-shared-badge--active {
    background:rgba(39,174,96,.12);
    color:var(--success-color);
    border:1px solid rgba(39,174,96,.3);
}
.notebook-shared-badge--paused {
    background:rgba(243,156,18,.12);
    color:#c97a00;
    border:1px solid rgba(243,156,18,.35);
}

/* Warning button style */
.warning-btn { background:var(--warning-color) !important; color:#fff !important; }
.warning-btn:hover { filter:brightness(.9); }

.settings-save-btn { background:var(--success-color); color:white; border:none; padding:9px 20px; border-radius:var(--radius-sm); font-family:var(--font-heading); font-weight:bold; cursor:pointer; font-size:.88rem; margin-top:8px; }
.settings-save-btn:hover { background:var(--success-hover); }
.settings-danger-btn { background:var(--danger-color); color:white; border:none; padding:9px 18px; border-radius:var(--radius-sm); font-family:var(--font-heading); font-weight:bold; cursor:pointer; font-size:.85rem; }
.settings-danger-btn:hover { background:var(--danger-hover); }
.settings-sync-info { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--read-bg); border-radius:var(--radius-md); font-size:.85rem; }
.settings-avatar { width:36px; height:36px; border-radius:50%; }
.settings-user-detail strong { display:block; font-size:.88rem; }
.settings-user-detail span { font-size:.75rem; color:#7f8fa6; }

/* ─── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay { visibility:hidden; opacity:0; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.85); z-index:10001; display:flex; justify-content:center; align-items:center; transition:opacity .3s,visibility .3s; }
.modal-overlay.active { visibility:visible; opacity:1; }
.modal-content { background:var(--card-bg); padding:35px; border-radius:12px; text-align:center; max-width:450px; border:3px solid var(--accent-color); color:var(--text-color); transform:scale(.95); transition:transform .3s; }
.modal-overlay.active .modal-content { transform:scale(1); }
.modal-content h3 { color:var(--accent-color); margin-top:0; font-size:1.8rem; margin-bottom:5px; }
.modal-content h4 { color:var(--text-color); margin-top:0; font-size:1.1rem; opacity:.8; font-family:var(--font-body); margin-bottom:20px; }
.modal-content p { font-family:var(--font-body); line-height:1.6; font-size:1.05rem; }
.welcome-list { text-align:left; padding-left:20px; font-size:.9rem; line-height:1.6; margin-bottom:20px; }
.welcome-list li { margin-bottom:10px; }
.motivational-text { font-style:italic; color:#7f8fa6; margin-bottom:25px; font-size:1.05rem; }
.close-modal-btn { background:var(--success-color); color:white; border:none; padding:12px 20px; border-radius:5px; font-family:var(--font-heading); font-size:1.05rem; cursor:pointer; width:100%; font-weight:bold; margin-top:10px; transition:background .3s; }
.close-modal-btn:hover { background:var(--success-hover); }
.welcome-modal-wrapper,.info-modal-wrapper { max-width:600px; padding:36px; max-height:88vh; overflow-y:auto; }
.info-modal-wrapper { max-width:700px; text-align:left; }
.info-modal-wrapper h4.subhead { color:var(--accent-color); font-family:var(--font-heading); margin-top:22px; margin-bottom:8px; font-size:1.2rem; opacity:1; }

/* ─── Immersive ────────────────────────────────────────────────────────────── */
.immersive-card { background:var(--bg-color); width:95%; max-width:1000px; height:88vh; border-radius:12px; display:flex; flex-direction:column; box-shadow:0 15px 40px rgba(0,0,0,.5); overflow:hidden; transform:scale(.95); transition:transform .3s; }
.modal-overlay.active .immersive-card { transform:scale(1); }
.immersive-header { padding:14px 22px; border-bottom:1px solid var(--border-color); display:flex; justify-content:space-between; align-items:flex-start; background:var(--card-bg); }
.immersive-header-titles { flex-grow:1; padding-right:16px; }
.immersive-case-title { font-family:var(--font-heading); font-size:1.9rem; color:var(--accent-color); margin:0 0 4px; line-height:1.2; }
.immersive-ponente { font-style:italic; color:#7f8fa6; margin:0; font-size:1rem; }
.immersive-controls { display:flex; gap:8px; align-items:center; }
.immersive-review-btn { background:var(--danger-color); padding:7px 11px; font-size:.78rem; }
.immersive-compare-btn { background:var(--focus-color); padding:7px 11px; font-size:.78rem; }
.immersive-close-btn { background:none; border:none; font-size:1.8rem; color:#7f8fa6; cursor:pointer; padding:0; line-height:1; }
.immersive-close-btn:hover { color:var(--danger-color); }
.immersive-body { flex-grow:1; overflow-y:auto; padding:28px 36px; color:var(--text-color); }
.immersive-section { margin-bottom:30px; }
.immersive-section-title { font-family:var(--font-heading); font-size:1.3rem; margin-bottom:12px; color:var(--text-color); border-bottom:2px solid var(--border-color); padding-bottom:4px; }
.immersive-text-block { font-size:1.1rem; line-height:1.7; }
.immersive-footer { padding:14px 22px; border-top:1px solid var(--border-color); display:flex; justify-content:space-between; background:var(--card-bg); }
.immersive-nav-btn { background:var(--info-color); padding:9px 18px; font-size:.92rem; }
.immersive-nav-btn:disabled { opacity:.5; cursor:not-allowed; }
.immersive-hideable { position:relative; cursor:pointer; }
.immersive-hideable .immersive-text-block { filter:blur(8px); opacity:.25; user-select:none; pointer-events:none; transition:all .3s; }
.immersive-hideable:hover .immersive-text-block { filter:blur(5px); opacity:.4; }
.immersive-hideable::after { content:'Click to Reveal'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--accent-color); color:white; padding:6px 14px; border-radius:4px; font-size:.82rem; font-weight:bold; opacity:0; transition:opacity .2s; pointer-events:none; font-family:var(--font-heading); }
.immersive-hideable:hover::after { opacity:1; }
.immersive-hideable.revealed .immersive-text-block { filter:none; opacity:1; user-select:auto; pointer-events:auto; }
.immersive-hideable.revealed::after { display:none; }
.immersive-hideable.revealed { cursor:default; }

/* ─── Floating Review Btn ──────────────────────────────────────────────────── */
.floating-review-btn { position:fixed; bottom:94px; right:28px; background:var(--danger-color); color:white; border:none; padding:12px 20px; border-radius:50px; box-shadow:var(--shadow-lg); font-family:var(--font-heading); font-weight:bold; font-size:.88rem; cursor:pointer; z-index:90; display:none; transition:transform .2s,background .3s; }
.floating-review-btn:hover { transform:scale(1.05); background:var(--danger-hover); }

/* ─── Onboarding ───────────────────────────────────────────────────────────── */
#onboarding-screen { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:20000; background:var(--bg-color); align-items:center; justify-content:center; padding:20px; box-sizing:border-box; overflow-y:auto; animation:obFadeIn .35s ease forwards; }
#onboarding-screen.active { display:flex; }
#onboarding-screen.hiding { animation:obFadeOut .4s ease forwards; }
@keyframes obFadeIn  { from{opacity:0}to{opacity:1} }
@keyframes obFadeOut { from{opacity:1}to{opacity:0} }
.onboarding-card { background:var(--card-bg); border:2px solid var(--border-color); border-radius:16px; padding:48px; max-width:460px; width:100%; text-align:center; box-shadow:var(--shadow-lg); animation:obSlideUp .4s ease forwards; }
@keyframes obSlideUp { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)} }
.onboarding-logo { display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.onboarding-logo-main { font-family:var(--font-heading); font-size:2.2rem; font-weight:bold; color:var(--accent-color); letter-spacing:-.5px; }
.onboarding-logo-sub { font-size:1.1rem; font-style:italic; color:var(--text-color); opacity:.75; }
.onboarding-tagline { font-size:.9rem; color:#7f8fa6; font-style:italic; margin:0 0 28px; }
.onboarding-features { display:flex; flex-direction:column; gap:10px; text-align:left; margin-bottom:32px; }
.onboarding-feature { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--text-color); line-height:1.4; }
.onboarding-feature-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.onboarding-feature-icon .ui-icon { width:18px; height:18px; }
.onboarding-actions { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.onboarding-google-btn { display:flex; align-items:center; justify-content:center; gap:10px; background:white; color:#3c4043; border:1px solid #dadce0; padding:12px 20px; border-radius:8px; font-size:.95rem; font-weight:600; cursor:pointer; width:100%; box-shadow:0 1px 3px rgba(0,0,0,.12); transition:box-shadow .2s,background .2s; font-family:var(--font-ui); box-sizing:border-box; }
.onboarding-google-btn:hover { background:#f8f9fa; box-shadow:var(--shadow-md); }
.google-logo-svg { width:20px!important; height:20px!important; min-width:20px; flex-shrink:0; display:block; }
.onboarding-offline-btn { background:transparent; color:var(--accent-color); border:2px solid var(--accent-color); padding:11px 20px; border-radius:8px; font-size:.9rem; font-weight:bold; cursor:pointer; width:100%; transition:background .2s,color .2s; box-sizing:border-box; font-family:var(--font-heading); }
.onboarding-offline-btn:hover { background:var(--accent-color); color:white; }
.onboarding-note { font-size:.76rem; color:#7f8fa6; line-height:1.5; margin:0; }

/* ─── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
    .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:1024px) {
    .panel-header,
    .notebook-header { padding-left:20px; padding-right:20px; }
    #dashboard-content,
    #settings-content,
    .cases-grid,
    .table-wrapper { padding-left:20px; padding-right:20px; }
    .notebook-toolbar {
        padding:12px 20px;
        top:73px;
    }
    .search-bar {
        min-width:100%;
        order:1;
    }
    .toolbar-select,
    .filter-btn,
    .view-toggle {
        order:2;
    }
    .notebook-header-actions,
    .panel-header-actions {
        width:100%;
    }
    .digest-focus-modal-card {
        width:min(100vw, 1400px);
        height:min(96vh, 900px);
        border-radius:16px;
    }
    .digest-focus-editor { padding:0; }
    .digest-focus-grid { padding:20px; }
    .compare-pane { padding:18px 20px; }
    #compare-iframe { height:calc(100vh - 220px); }
    .immersive-card {
        width:min(96vw, 1000px);
        height:92vh;
    }
    .immersive-body { padding:24px 24px 28px; }
}
@media (max-width:768px) {
    #sidebar { position:fixed; top:0; left:0; height:100vh; transform:translateX(-100%); }
    #sidebar { width:min(84vw, 320px); }
    #sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
    #hamburger { display:block; }
    #main-content { width:100%; }
    .panel-header { padding:50px 16px 16px; }
    #dashboard-content { padding:16px; }
    .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .notebook-header { padding:50px 16px 12px; }
    .notebook-toolbar {
        padding:10px 16px;
        top:102px;
        gap:10px;
    }
    #current-tab-title {
        font-size:1.3rem;
        max-width:none;
        white-space:normal;
    }
    .notebook-title-area,
    .notebook-header-actions,
    .panel-header-actions { width:100%; }
    .notebook-header-actions .btn,
    .panel-header-actions .btn,
    .panel-header-actions button:not(.btn) {
        width:100%;
        justify-content:center;
    }
    .search-bar,
    .toolbar-select,
    .filter-btn,
    .view-toggle,
    .view-btn {
        width:100%;
    }
    .view-toggle { display:grid; grid-template-columns:1fr 1fr; }
    .cases-grid { grid-template-columns:1fr; padding:16px; gap:12px; }
    .table-wrapper { padding:16px; }
    .case-card { padding:16px; }
    .case-card-top { flex-direction:column; align-items:stretch; }
    .case-card-badges { justify-content:flex-start; }
    .case-card-footer {
        gap:8px;
    }
    .case-card-footer input[type="checkbox"] {
        width:18px;
        height:18px;
    }
    .card-icon-btn { width:34px; height:34px; }
    .card-primary-btn { padding:8px 16px; font-size:.82rem; }
    .case-panel-grid { grid-template-columns:1fr; }
    .case-panel-grid .full-span { grid-column:1; }
    .case-panel-header,
    .case-panel-body,
    .case-panel-footer { padding-left:16px; padding-right:16px; }
    .case-panel-footer {
        flex-direction:column-reverse;
    }
    .case-panel-footer .btn {
        width:100%;
        justify-content:center;
    }
    .digest-preview-list { grid-template-columns:1fr 1fr; }
    .digest-focus-card { flex-direction:column; align-items:stretch; }
    .digest-focus-trigger .btn { width:100%; justify-content:center; }
    .digest-focus-modal-card {
        width:100vw;
        height:100dvh;
        max-height:none;
        border-radius:0;
    }
    .digest-focus-header,
    .digest-focus-footer {
        padding:14px 16px;
    }
    .digest-focus-body { grid-template-columns:1fr; }
    .digest-focus-reader {
        height:45vh;
        border-right:none;
        border-bottom:1px solid var(--border-color);
    }
    .digest-focus-editor { padding:0; }
    .digest-rte-toolbar { padding:6px 10px; gap:2px; }
    .rte-btn { min-width:28px; height:28px; font-size:.78rem; }
    .digest-focus-grid { grid-template-columns:1fr; padding:16px; }
    #settings-content { padding:16px; }
    .settings-shared-item {
        flex-direction:column;
        align-items:stretch;
    }
    .settings-shared-actions {
        justify-content:stretch;
    }
    .settings-shared-actions .btn {
        width:100%;
        justify-content:center;
    }
    .compare-body { grid-template-columns:1fr; }
    .compare-header {
        padding:12px 16px;
        align-items:flex-start;
        flex-direction:column;
    }
    .compare-close-btn,
    .compare-open-btn { width:100%; justify-content:center; }
    .compare-pane:first-child { border-right:none; border-bottom:2px solid var(--border-color); max-height:40vh; }
    .compare-pane { padding:16px; }
    #compare-iframe { height:42vh; }
    .immersive-card {
        width:100vw;
        height:100dvh;
        border-radius:0;
    }
    .immersive-header,
    .immersive-footer {
        padding:12px 16px;
    }
    .immersive-header {
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }
    .immersive-header-titles { padding-right:0; }
    .immersive-controls {
        width:100%;
        flex-wrap:wrap;
    }
    .immersive-controls .btn,
    .immersive-controls button {
        flex:1 1 calc(50% - 8px);
        justify-content:center;
    }
    .immersive-close-btn {
        min-height:38px;
        border:1px solid var(--border-color);
        border-radius:var(--radius-sm);
    }
    .immersive-body {
        padding:18px 16px 24px;
    }
    .immersive-footer {
        gap:10px;
    }
    .immersive-nav-btn {
        flex:1 1 0;
        justify-content:center;
    }
    .fab { bottom:16px; right:16px; width:48px; height:48px; font-size:1.4rem; }
    .floating-review-btn { bottom:76px; right:16px; }
}
@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .onboarding-card { padding:32px 20px; }
    .digest-preview-list { grid-template-columns:1fr; }
    .panel-header h1,
    #current-tab-title { font-size:1.15rem; }
    .notebook-toolbar { top:110px; }
    .deadline-item {
        flex-direction:column;
        align-items:flex-start;
    }
    .deadline-meta {
        width:100%;
        justify-content:space-between;
    }
    .status-badge,
    .subject-badge,
    .deadline-chip {
        font-size:.68rem;
    }
    .immersive-case-title {
        font-size:1.4rem;
    }
    .immersive-text-block {
        font-size:1rem;
        line-height:1.65;
    }
}