/**
 * Shared Dashboard Styles
 * Common design system for Demo and Command Center pages
 */

/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
  --bg: #111118; --card: #1a1a24; --text: #e0e0e8; --muted: #8888a0;
  --border: #2a2a3a; --accent: #7c6ef0; --accent-light: #1e1a35;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.4);
  --radius: 10px; --radius-sm: 6px;
  --critical: #ef4444; --high: #f97316; --medium: #eab308; --low: #22c55e;
  /* Semantic aliases for status indicators */
  --green: #22c55e; --red: #ef4444; --yellow: #eab308;
}

/* ==========================================================================
   2. GLOBAL RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }

/* Accessibility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -40px; left: 0; background: var(--accent); color: #fff; padding: 8px 16px; z-index: 10000; text-decoration: none; border-radius: 0 0 4px 0; }
.skip-link:focus { top: 0; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: .9rem; }

/* ==========================================================================
   3. PRIVACY MODE
   ========================================================================== */

body.privacy .privacy-amount,
body.privacy .cash-entry-amount { filter: blur(8px); user-select: none; }

/* ==========================================================================
   4. TOOLBAR & CONTROLS
   ========================================================================== */

.main-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.ok { background: var(--green); }
.status-dot.error { background: var(--red); }
.status-dot.loading { background: var(--yellow); animation: pulse 1s infinite; }
.status-dot.warn { background: var(--yellow); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.last-updated { font-size: .75rem; color: var(--muted); }
#expandAllBtn { display: inline-flex; align-items: center; gap: .35rem; padding: 4px 10px; font-size: .75rem; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; cursor: pointer; transition: border-color .2s, color .2s; }
#expandAllBtn:hover { border-color: var(--accent); color: var(--accent); }
.privacy-toggle { display: flex; align-items: center; gap: .35rem; padding: 4px 10px; font-size: .75rem; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; cursor: pointer; }
.privacy-toggle:hover { border-color: var(--accent); color: var(--accent); }
.privacy-toggle .eye { font-size: .85rem; line-height: 1; }
body.privacy .privacy-toggle { border-color: var(--accent); color: var(--accent); }
.preset-bar { display:flex; align-items:center; gap:.4rem; }
.preset-bar select { padding:4px 8px; font-size:.75rem; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:var(--radius-sm); cursor:pointer; max-width:160px; }
.preset-bar button { padding:4px 10px; font-size:.75rem; border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:var(--radius-sm); font-weight:500; cursor:pointer; white-space:nowrap; }
.preset-bar button:hover { border-color:var(--accent); color:var(--accent); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */

.header { background: var(--card); border-bottom: 1px solid var(--border); padding: 1.25rem 0; position: sticky; top: 0; z-index: 100; }
.header-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; }
.header-left h1 { font-size: 1.35rem; font-weight: 700; color: var(--text); }
.header-left p { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.date-label { font-size: .75rem; color: var(--muted); background: var(--bg); padding: 4px 10px; border-radius: 20px; }
.date-filter { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; position: relative; }
.date-filter label { font-size: .7rem; color: var(--muted); font-weight: 600; }
.date-filter .presets { display: flex; gap: .2rem; }
.date-filter .presets button { font-size: .68rem; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); cursor: pointer; font-family: inherit; }
.date-filter .presets button:hover { border-color: var(--accent); color: var(--accent); }
.date-filter .presets button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.custom-range-label { font-size: .68rem; color: var(--accent); cursor: pointer; padding: 3px 8px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-light); white-space: nowrap; }
.custom-range-label:hover { background: rgba(124,110,240,0.2); }
.custom-range-popover { display: none; position: absolute; top: 100%; right: 0; margin-top: .35rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; box-shadow: var(--shadow-lg); z-index: 200; min-width: 220px; }
.custom-range-popover.open { display: block; }
.crp-row { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.crp-row label { font-size: .7rem; color: var(--muted); font-weight: 600; min-width: 32px; }
.crp-row select { flex: 1; padding: 4px 6px; font-size: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: inherit; }
.crp-actions { display: flex; gap: .35rem; justify-content: flex-end; }
.crp-actions button { font-size: .7rem; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); cursor: pointer; font-family: inherit; }
.crp-actions button:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
.crp-actions button:hover { opacity: .85; }
.view-toggle { display: flex; background: var(--bg); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button { padding: 6px 14px; font-size: .8rem; border: none; background: transparent; color: var(--muted); font-weight: 500; transition: all .15s; }
.view-toggle button.active { background: var(--accent); color: #fff; }
.nav-links { display: flex; gap: .4rem; }
.nav-links a { padding: 5px 10px; font-size: .75rem; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; text-decoration: none; }
.nav-links a:hover { border-color: var(--accent); color: var(--accent); }
.nav-links a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ==========================================================================
   6. PROTECTED TIME STRIP
   ========================================================================== */

.protected-strip { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 6px 1.5rem; background: #2a2518; border-bottom: 1px solid #3d3520; font-size: .75rem; color: #d4a843; }

/* ==========================================================================
   7. MAIN LAYOUT
   ========================================================================== */

.layout { display: grid; grid-template-columns: 1fr 320px; gap: 0; max-width: 1600px; margin: 0 auto; }
main { padding: 1.5rem; min-width: 0; }
.category-header { font-size: 1rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--border); }
.category-header:first-child { margin-top: 0; }

/* ==========================================================================
   8. PRIORITIES PANEL
   ========================================================================== */

.priorities-panel { border-left: 1px solid var(--border); background: var(--card); padding: 1.5rem 1.25rem 1.25rem; overflow-y: auto; height: calc(100vh - 90px); position: sticky; top: 90px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.priorities-panel::-webkit-scrollbar { width: 6px; }
.priorities-panel::-webkit-scrollbar-track { background: transparent; }
.priorities-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.priorities-panel::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.priorities-panel h2 { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; color: var(--text); }
.pri-group-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: .75rem 0 .4rem; padding: 3px 8px; border-radius: 4px; color: #fff; display: inline-block; }
.pri-group-label[data-lev="Critical"] { background: var(--critical); }
.pri-group-label[data-lev="High"] { background: var(--high); }
.pri-group-label[data-lev="Medium"] { background: var(--medium); }
.pri-group-label[data-lev="Low"] { background: var(--low); }
.pri-item { display: flex; gap: .5rem; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pri-item:last-child { border-bottom: none; }
.pri-item.completed { opacity: .45; }
.pri-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.pri-item-text { font-size: .78rem; color: var(--text); line-height: 1.4; }
.pri-item.completed .pri-item-text { text-decoration: line-through; }
.pri-item-source { font-size: .65rem; color: var(--muted); margin-top: 1px; }
.pri-item-meta { font-size: .6rem; color: var(--accent); margin-top: 1px; }
.pri-item-meta.overdue { color: var(--critical); font-weight: 600; }
.pri-item-meta.due-soon { color: var(--high); }
.pri-item-recur-badge { font-size: .55rem; padding: 1px 5px; border-radius: 3px; background: var(--accent-light); color: var(--accent); font-weight: 500; display: inline-block; margin-top: 2px; }
.pri-item-escalation-badge { font-size: .55rem; padding: 1px 5px; border-radius: 3px; background: rgba(239,68,68,0.15); color: var(--critical); font-weight: 500; display: inline-block; margin-top: 2px; border: 1px solid rgba(239,68,68,0.3); }
.pri-item-override-badge { font-size: .55rem; padding: 1px 5px; border-radius: 3px; background: rgba(59,130,246,0.15); color: var(--accent); font-weight: 500; display: inline-block; margin-top: 2px; border: 1px solid rgba(59,130,246,0.3); }
.pri-empty { font-size: .8rem; color: var(--muted); font-style: italic; padding: 1rem 0; }
.reset-picker { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: 3px; }
.reset-picker button { font-size: .6rem; padding: 1px 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--card); color: var(--muted); cursor: pointer; }
.reset-picker button:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   9. SAMPLE BANNER
   ========================================================================== */

.sample-banner { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.25rem; background: rgba(124,110,240,0.08); border: 1px dashed rgba(124,110,240,0.35); border-radius: var(--radius); margin-bottom: 1rem; font-size: .82rem; color: var(--muted); }
.sample-banner svg { flex-shrink: 0; }
.sample-banner .sample-banner-text { flex: 1; }
.sample-banner button { font-size: .72rem; padding: 4px 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; font-family: inherit; font-weight: 500; white-space: nowrap; }
.sample-banner button:hover { opacity: .85; }
.sample-toggle-btn { font-size: .7rem; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); cursor: pointer; font-family: inherit; }
.sample-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   10. CARD CUSTOMIZATION UI
   ========================================================================== */

.color-style-row { display: flex; gap: .35rem; margin-top: 4px; margin-bottom: 4px; }
.color-style-btn { font-size: .7rem; padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--card); color: var(--muted); cursor: pointer; }
.color-style-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,0.08); }
.angle-row { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: 3px; }
.angle-btn { font-size: .65rem; padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--card); color: var(--muted); cursor: pointer; }
.angle-btn.active { border-color: var(--accent); color: var(--accent); }
.gradient-options { margin-top: 4px; }

/* Long press drag ready state */
.venture-card.drag-ready { transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .15s ease, box-shadow .15s ease; }
.card-sub-venture.drag-ready { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: transform .15s ease, box-shadow .15s ease; }
.kd-btn.drag-ready { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .15s ease, box-shadow .15s ease; }

/* ==========================================================================
   11. KEY DATA EDITOR
   ========================================================================== */

.key-data-editor { margin-bottom: .5rem; }
.kd-fold-zone { min-height: 32px; padding: 6px; border: 2px dashed var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; gap: .35rem; transition: border-color .15s, background .15s; }
.kd-fold-zone[data-zone="above"], .kd-fold-zone[data-zone="below"] { display: flex; flex-wrap: wrap; }
.kd-fold-zone[data-zone="pool"] { display: flex; flex-wrap: wrap; border-style: dotted; border-color: rgba(136,136,160,.3); min-height: 28px; }
.kd-fold-zone.drag-over { border-color: var(--accent); background: rgba(124,110,240,.06); }
.kd-fold-zone[data-zone="pool"] .kd-btn { opacity: .5; }
.kd-fold-zone[data-zone="pool"] .kd-btn:hover { opacity: .8; }
.kd-fold-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .25rem; }

/* ==========================================================================
   12. MODAL COLLAPSIBLE SECTIONS
   ========================================================================== */

.modal-collapsible { margin-top: .75rem; }
.modal-collapsible-header { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: 6px 0; user-select: none; }
.modal-collapsible-header .collapse-arrow { font-size: .65rem; color: var(--muted); transition: transform .15s; }
.modal-collapsible-header.open .collapse-arrow { transform: rotate(90deg); }
.modal-collapsible-header .collapse-title { font-size: .78rem; font-weight: 600; color: var(--muted); }
.modal-collapsible-header .collapse-preview { font-size: .7rem; color: var(--accent); margin-left: auto; }
.modal-collapsible-body { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.modal-collapsible-body.open { max-height: 800px; overflow-y:auto; }

/* ==========================================================================
   13. ESCALATION RULES
   ========================================================================== */

.escalation-rule-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; margin-bottom: .5rem; }
.escalation-rule-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.esc-toggle-label { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.escalation-rule-delete { background: none; border: none; color: var(--critical); font-size: 1.2rem; padding: 0 4px; cursor: pointer; }
.escalation-rule-type { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); margin-top: .25rem; margin-bottom: .5rem; font-size: .8rem; }
.escalation-rule-params label { display: block; font-size: .72rem; color: var(--muted); margin-top: .4rem; margin-bottom: .15rem; }
.escalation-rule-params input[type="date"],
.escalation-rule-params input[type="text"],
.escalation-rule-params select:not(.escalation-rule-type) { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .78rem; }
.esc-param-channel { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .78rem; }
.escalation-thresholds { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.threshold-row { display: flex; align-items: center; gap: .3rem; font-size: .72rem; flex-wrap: wrap; }
.threshold-row input[type="number"] { width: 55px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); text-align: center; font-size: .75rem; }
.threshold-row select { padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .72rem; }
.threshold-row span { color: var(--muted); white-space: nowrap; }
.threshold-remove { background: none; border: none; color: var(--critical); font-size: 1rem; padding: 0 4px; cursor: pointer; }
.threshold-add { margin-top: .25rem; }
.pri-override-sel { padding: 4px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .7rem; color: var(--muted); max-width: 75px; background: var(--bg); }

/* ==========================================================================
   14. MODAL GRID LAYOUTS
   ========================================================================== */

.modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 15px 0; }
.modal-2col > div > label { margin-top: 0; }
.modal-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin: 15px 0; }
.modal-3col > div > label { margin-top: 0; }

/* ==========================================================================
   15. KEY DRIVER BUTTONS
   ========================================================================== */

.kd-btn { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: grab; user-select: none; transition: all .15s; font-family: inherit; font-weight: 500; white-space: nowrap; -webkit-touch-callout: none; touch-action: manipulation; -webkit-user-select: none; }
.kd-btn:active { cursor: grabbing; }
.kd-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.kd-btn.active-below { background: rgba(124,110,240,.15); color: var(--accent); border-color: rgba(124,110,240,.4); }
.kd-btn:hover { border-color: var(--accent); color: var(--accent); }
.kd-btn.active:hover { color: #fff; }
.kd-btn.active-below:hover { color: var(--accent); }
.kd-btn .kd-icon { font-size: .85rem; line-height: 1; flex-shrink: 0; }
.kd-btn.dragging { opacity: .5; }
.kd-note-input textarea { width: 100%; min-height: 2.5rem; margin-top: .3rem; font-size: .75rem; }
.kd-mode { margin-top: .4rem; font-size: .75rem; }
.kd-mode select { margin-left: .3rem; }
.kd-hint { font-size: .72rem; color: var(--muted); font-style: italic; margin-top: .3rem; }
.kd-toggle { display: flex; align-items: center; gap: .4rem; font-size: .78rem; padding: 3px 0; cursor: pointer; }
.kd-toggle input { accent-color: var(--accent); }

/* ==========================================================================
   16. YOUTUBE CONNECTIONS
   ========================================================================== */

.yt-connections { margin-top: .5rem; }
.yt-conn-row { display: flex; align-items: center; gap: .5rem; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .78rem; }
.yt-conn-row:last-child { border-bottom: none; }
.yt-conn-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.yt-conn-dot.ok { background: var(--green); }
.yt-conn-dot.off { background: var(--muted); }
.yt-conn-name { font-weight: 600; min-width: 90px; }
.yt-conn-label { color: var(--muted); font-size: .7rem; }
.yt-conn-remove { background: none; border: 1px solid var(--border); color: var(--muted); font-size: .65rem; padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; margin-left: auto; }
.yt-conn-remove:hover { border-color: var(--red); color: var(--red); }
.yt-conn-add { background: none; border: 1px dashed var(--border); color: var(--accent); font-size: .72rem; padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; width: 100%; margin-top: .4rem; }
.yt-conn-add:hover { border-color: var(--accent); background: rgba(124,110,240,.08); }
.yt-conn-empty { color: var(--muted); font-size: .75rem; font-style: italic; padding: 6px 0; }

/* ==========================================================================
   17. CARD VALUE & DETAILS
   ========================================================================== */

.card-value { font-size: .78rem; color: var(--card-accent, var(--accent)); font-weight: 500; margin-bottom: .4rem; }
.card-details { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.card-details.open { max-height: 400px; }
.card-expand-btn { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: .58rem; font-weight: 500; padding: 3px 14px; border-radius: 20px; cursor: pointer; z-index: 3; opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.venture-card:hover .card-expand-btn { opacity: 1; transform: translate(-50%, 50%); pointer-events: auto; }
.card-expand-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-light); }
.card-expand-btn.open { opacity: 1; transform: translate(-50%, 50%); pointer-events: auto; color: var(--text); border-color: var(--accent); }
.card-hover-actions { position: absolute; bottom: 0; right: 12px; transform: translateY(50%); display: flex; gap: .3rem; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .2s; }
.venture-card:hover .card-hover-actions { opacity: 1; pointer-events: auto; }
.card-hover-action { background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: .58rem; font-weight: 500; padding: 3px 10px; border-radius: 20px; cursor: pointer; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.card-hover-action:hover { color: var(--text); border-color: var(--accent); background: var(--accent-light); }
@container (max-width: 350px) {
  .card-expand-btn { left: 12px; transform: translate(0, 50%); }
  .venture-card:hover .card-expand-btn { transform: translate(0, 50%); }
  .card-expand-btn.open { transform: translate(0, 50%); }
}
.card-last-activity { font-style: italic; font-size: .7rem; color: var(--muted); text-align: right; padding: 2px 10px 0 0; margin-bottom: -1rem; opacity: 0.85; }
.qt-preset-row { display: flex; gap: .3rem; margin-top: .35rem; }
.qt-preset { font-size: .75rem; padding: 5px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); cursor: pointer; font-family: inherit; font-weight: 500; }
.qt-preset:hover { border-color: var(--accent); color: var(--accent); }
.qt-preset.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.card-desc { font-size: .78rem; color: var(--muted); margin-bottom: .5rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-priorities { list-style: none; margin-bottom: .5rem; }
.card-priorities li { font-size: .76rem; color: var(--text); padding: 2px 0; padding-left: 1rem; position: relative; }
.card-priorities li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--card-accent, var(--accent)); }
.card-priorities li.placeholder { color: var(--border); font-style: italic; }
.card-priorities li.placeholder::before { background: var(--border); }
.card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.card-tag { font-size: .62rem; padding: 1px 7px; border-radius: 10px; background: var(--bg); color: var(--muted); }
.card-tag-more { font-size: .62rem; color: var(--muted); padding: 1px 4px; }
.card-details-footer { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* ==========================================================================
   18. MODAL
   ========================================================================== */

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .15s; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: 1.5rem; box-shadow: var(--shadow-lg); color: var(--text); position: relative; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal h2 { font-size: 1.1rem; margin: 0; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; line-height: 1; border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text); background: var(--bg); }
.modal-logo-name { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
.modal-logo-name .logo-col { flex-shrink: 0; }
.modal-logo-name .logo-col > label { margin-top: 0; }
.modal-logo-name .name-col { flex: 1; min-width: 0; }
.modal-logo-name .name-col > label { margin-top: 0; }
.logo-preview-wrap { position: relative; width: 56px; height: 56px; margin-top: .25rem; cursor: pointer; }
.logo-preview { width: 56px; height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--border); object-fit: cover; background: var(--bg); }
.logo-placeholder { width: 56px; height: 56px; border-radius: var(--radius-sm); border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .65rem; background: var(--bg); transition: border-color .15s, color .15s; }
.logo-preview-wrap:hover .logo-placeholder { border-color: var(--accent); color: var(--accent); }
.logo-overlay-replace { position: absolute; inset: 0; border-radius: var(--radius-sm); background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.logo-preview-wrap:hover .logo-overlay-replace { opacity: 1; pointer-events: auto; }
.logo-overlay-replace svg { width: 20px; height: 20px; color: #fff; }
.logo-overlay-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--critical); color: #fff; border: none; font-size: .7rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 2; padding: 0; }
.logo-preview-wrap:hover .logo-overlay-x { opacity: 1; }
.modal label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; margin-top: .75rem; }
.modal input[type="text"], .modal input[type="url"], .modal input[type="number"], .modal select, .modal textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }
.modal textarea { resize: vertical; min-height: 60px; }
.priority-list { display: flex; flex-direction: column; gap: .5rem; }
.priority-list .pri-row { display: flex; gap: .3rem; align-items: center; }
.priority-list .pri-row input[type="text"] { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; background: var(--bg); color: var(--text); }
.priority-list .pri-row select { padding: 5px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .72rem; color: var(--muted); max-width: 110px; background: var(--bg); }
.priority-list .pri-row input[type="number"] { width: 50px; padding: 5px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .72rem; text-align: center; background: var(--bg); color: var(--text); }
.priority-list .pri-remove { background: none; border: none; color: var(--critical); font-size: .85rem; padding: 0 2px; }
.event-dates-list { display: flex; flex-direction: column; gap: .3rem; }
.event-dates-list .ed-row { display: flex; gap: .3rem; align-items: center; }
.event-dates-list .ed-row input { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .8rem; background: var(--bg); color: var(--text); }
.event-dates-list .ed-row input[type="text"] { flex: 1; }
.event-dates-list .ed-remove { background: none; border: none; color: var(--critical); font-size: .85rem; padding: 0 2px; }
.priority-add-btn { font-size: .75rem; color: var(--accent); background: none; border: none; padding: 4px 0; }
.links-list { display: flex; flex-direction: column; gap: .3rem; }
.link-row { display: flex; gap: .3rem; }
.link-row input { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .8rem; background: var(--bg); color: var(--text); }
.link-remove-btn { background: none; border: none; color: var(--critical); font-size: .8rem; padding: 0 4px; }
.tags-editor { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.tags-editor .te-chip { font-size: .72rem; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; transition: all .1s; }
.tags-editor .te-chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal-actions { display: flex; gap: .5rem; margin-top: 1.25rem; justify-content: flex-end; }
.modal-actions button { padding: 7px 18px; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.modal-actions .btn-save { background: var(--accent); color: #fff; border-color: var(--accent); }
.modal-actions .btn-delete { color: var(--critical); border-color: var(--critical); }
.modal-actions .btn-delete:hover { background: #2a1515; }
.color-swatch-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color .15s, transform .15s; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.texture-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.texture-opt { width: 48px; height: 32px; border-radius: var(--radius-sm); border: 2px solid var(--border); cursor: pointer; position: relative; overflow: hidden; background: var(--card); transition: border-color .15s; }
.texture-opt:hover { border-color: var(--muted); }
.texture-opt.active { border-color: var(--accent); }
.texture-opt-label { font-size: .55rem; color: var(--muted); text-align: center; position: absolute; bottom: 1px; left: 0; right: 0; }

/* ==========================================================================
   19. FAB
   ========================================================================== */

.fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 1.5rem; box-shadow: var(--shadow-lg); z-index: 90; display: flex; align-items: center; justify-content: center; }
.fab:hover { transform: scale(1.05); }

/* ==========================================================================
   20. UTILITIES
   ========================================================================== */

.hidden-input { display: none; }

/* ==========================================================================
   21. RESPONSIVE - TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .main-toolbar { display: none; }
}

/* ==========================================================================
   22. RESPONSIVE - SMALL TABLET (max-width: 900px)
   ========================================================================== */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .priorities-panel { border-left: none; border-top: 1px solid var(--border); height: auto; position: static; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .venture-card { grid-column: span 1 !important; }
  .card-inner { flex-direction: column; }
  .card-row-1 { flex-direction: column; }
  .card-row-1 > .card-children-row1 { max-width: 100%; }
  .resize-handle { display: none; }
  .header { padding: 1rem; }
  .header-right { width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   23. RESPONSIVE - MOBILE (max-width: 600px)
   ========================================================================== */

@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .header-top { flex-direction: column; align-items: flex-start; }
  main { padding: .75rem; }
  .header { padding: .75rem 1rem; }
  .header-left h1 { font-size: 1.1rem; }
  .drag-handle { display: none; }
  .venture-card { padding: .75rem .75rem 1rem; cursor: default; }
  .card-sub-venture { cursor: default; }
  .card-logo { width: 36px; height: 36px; }
  .card-name { font-size: .85rem; }
  .fab { bottom: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 1.25rem; }
  .date-filter { gap: .25rem; }
  .date-filter .presets button { font-size: .6rem; padding: 2px 6px; }
}

/* ==========================================================================
   24. RESPONSIVE - SMALL MODAL (max-width: 500px)
   ========================================================================== */

@media (max-width: 500px) {
  .modal-2col { grid-template-columns: 1fr; }
  .modal-3col { grid-template-columns: 1fr; }
  .modal-logo-name { flex-direction: column; }
}

/* ==========================================================================
   25. TOUCH DEVICE OPTIMIZATIONS
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  .card-expand-btn { opacity: 1 !important; pointer-events: auto !important; }
  .card-hover-actions { opacity: 1 !important; pointer-events: auto !important; }
  .venture-card { padding-bottom: 2.5rem; }
  .card-sub-venture { padding-bottom: 1rem; }
}