styles.css

  :root{
    --canvas:#000000;
    --surface-card:#0a0a0c;
    --surface-elevated:#101012;
    --surface-deep:#06060a;
    --hairline: rgba(255,255,255,0.06);
    --hairline-strong: rgba(255,255,255,0.14);
    --divider-soft: rgba(255,255,255,0.04);
    --ink:#fcfdff;
    --body-c: rgba(252,253,255,0.86);
    --charcoal: rgba(252,253,255,0.7);
    --mute:#a1a4a5;
    --ash:#888e90;
    --stone:#464a4d;
    --primary:#fcfdff;
    --primary-on:#000000;
    --surface-light:#f1f7fe;
    --accent-orange:#ff801f;
    --accent-orange-glow: rgba(255,89,0,0.22);
    --accent-yellow:#ffc53d;
    --accent-blue:#3b9eff;
    --accent-blue-glow: rgba(0,117,255,0.34);
    --accent-green:#11ff99;
    --accent-green-glow: rgba(34,255,153,0.18);
    --accent-red:#ff2047;
    --accent-red-glow: rgba(255,32,71,0.34);
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Inter Tight', Inter, sans-serif;
    --font-ui:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{background:var(--canvas); color:var(--ink); margin:0; font-family:var(--font-ui); -webkit-font-smoothing:antialiased;}
  ::selection{background:rgba(252,253,255,0.18);}
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--hairline-strong); border-radius:8px;}

  .font-display{font-family:var(--font-display); font-feature-settings:"ss01","liga"; font-weight:400; line-height:1;}
  .font-body{font-family:var(--font-body);}
  .font-mono{font-family:var(--font-mono);}

  .display-xxl{font-family:var(--font-display); font-feature-settings:"ss01"; font-weight:400; line-height:1; letter-spacing:-0.96px; font-size:clamp(34px,7vw,72px);}
  .display-xl{font-family:var(--font-display); font-feature-settings:"ss01"; font-weight:400; line-height:1; letter-spacing:-0.7px; font-size:clamp(28px,4.5vw,44px);}
  .subtitle{font-family:var(--font-body); font-size:18px; line-height:1.5; color:var(--body-c);}

  .hairline-b{border-bottom:1px solid var(--hairline);}
  .hairline-t{border-top:1px solid var(--hairline);}

  .btn-primary{background:var(--primary); color:var(--primary-on); font-family:var(--font-ui); font-weight:500; font-size:14px; padding:8px 16px; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer; transition:background .15s ease, transform .1s ease;}
  .btn-primary:hover{background:#e8eef7;}
  .btn-primary:active{background:var(--surface-light); transform:scale(.98);}
  .btn-primary:disabled{opacity:.4; cursor:not-allowed;}

  .btn-ghost{background:var(--surface-elevated); color:var(--ink); border:1px solid var(--hairline-strong); font-family:var(--font-ui); font-weight:500; font-size:14px; padding:8px 16px; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:background .15s ease;}
  .btn-ghost:hover{background:#17171a;}
  .btn-ghost:disabled{opacity:.4; cursor:not-allowed;}

  .btn-outline{background:transparent; color:var(--ink); border:1px solid var(--hairline-strong); font-family:var(--font-ui); font-weight:500; font-size:14px; padding:8px 16px; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:border-color .15s ease;}
  .btn-outline:hover{border-color:var(--ink);}

  .btn-icon{width:36px; height:36px; border-radius:8px; background:var(--surface-elevated); border:1px solid var(--hairline-strong); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
  .btn-icon:hover{background:#17171a;}

  .card{background:var(--surface-card); border-radius:12px; padding:24px;}
  .card-b{background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:12px; padding:24px;}
  .card-elevated{background:var(--surface-elevated); border:1px solid var(--hairline-strong); border-radius:12px; padding:24px;}
  .code-window{background:var(--surface-deep); border:1px solid var(--hairline-strong); border-radius:12px; padding:20px; font-family:var(--font-mono); font-size:13px; color:var(--body-c);}

  .pill{background:var(--surface-elevated); color:var(--body-c); font-size:12px; font-family:var(--font-ui); padding:4px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
  .status-dot{width:8px; height:8px; border-radius:9999px; display:inline-block; flex-shrink:0;}

  .field-label{font-family:var(--font-ui); font-size:12px; font-weight:500; color:var(--mute); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; display:block;}
  .input{width:100%; background:var(--surface-card); color:var(--ink); border:1px solid var(--hairline-strong); border-radius:8px; padding:10px 14px; height:40px; font-family:var(--font-ui); font-size:14px; outline:none; transition:border-color .15s ease;}
  .input:focus{border-color:var(--ink);}
  textarea.input{height:auto; padding-top:10px;}
  select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a1a4a5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:32px;}

  .nav-link{font-family:var(--font-ui); font-size:14px; letter-spacing:0.35px; color:var(--charcoal); padding:8px 4px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s ease;}
  .nav-link:hover{color:var(--ink);}
  .nav-link.active{color:var(--ink); border-bottom-color:var(--ink);}

  .glow-blue{position:relative;}
  .glow-blue::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1100px; max-width:160vw; height:480px; background:radial-gradient(ellipse at top, var(--accent-blue-glow), transparent 70%); pointer-events:none; z-index:0; opacity:.55;}
  .glow-green::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1100px; max-width:160vw; height:480px; background:radial-gradient(ellipse at top, var(--accent-green-glow), transparent 70%); pointer-events:none; z-index:0; opacity:.6;}
  .glow-orange::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1100px; max-width:160vw; height:480px; background:radial-gradient(ellipse at top, var(--accent-orange-glow), transparent 70%); pointer-events:none; z-index:0; opacity:.5;}
  .glow-wrap{position:relative; overflow:hidden;}
  .glow-wrap > *{position:relative; z-index:1;}

  .kanban-col{background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:12px; padding:16px; min-height:120px;}
  .kanban-card{background:var(--surface-elevated); border:1px solid var(--hairline); border-left:3px solid var(--hairline-strong); border-radius:8px; padding:12px; margin-bottom:10px; cursor:pointer; transition:border-color .15s ease, transform .1s ease;}
  .kanban-card:hover{border-color:var(--hairline-strong); transform:translateY(-1px);}

  table.data-table{width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:13px;}
  table.data-table th{text-align:left; font-weight:500; color:var(--mute); text-transform:uppercase; font-size:11px; letter-spacing:0.5px; padding:10px 12px; border-bottom:1px solid var(--hairline-strong); cursor:pointer; white-space:nowrap; user-select:none;}
  table.data-table th:hover{color:var(--ink);}
  table.data-table td{padding:12px; border-bottom:1px solid var(--divider-soft); color:var(--body-c); vertical-align:middle;}
  table.data-table tr:hover td{background:rgba(255,255,255,0.02);}

  .progress-track{height:8px; background:var(--hairline); border-radius:9999px; overflow:hidden; width:100%;}
  .progress-fill{height:100%; border-radius:9999px; transition:width .4s ease;}

  .modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px;}
  .modal-panel{background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:12px; max-width:640px; width:100%; padding:32px; margin:auto;}

  .chip{background:var(--surface-elevated); border:1px solid var(--hairline-strong); color:var(--body-c); font-size:12px; padding:4px 8px 4px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:6px;}
  .chip button{background:none; border:none; color:var(--ash); cursor:pointer; font-size:14px; line-height:1; padding:0;}
  .chip button:hover{color:var(--accent-red);}

  .star{cursor:pointer; font-size:20px; color:var(--stone); transition:color .1s ease;}
  .star.filled{color:var(--accent-yellow);}

  .toast{background:var(--surface-elevated); border:1px solid var(--hairline-strong); border-radius:8px; padding:12px 16px; color:var(--ink); font-size:13px; font-family:var(--font-ui); box-shadow:none; min-width:260px; max-width:360px; display:flex; align-items:flex-start; gap:10px; animation:toast-in .2s ease;}
  @keyframes toast-in{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}

  .chat-bubble-user{background:var(--surface-elevated); border:1px solid var(--hairline-strong); border-radius:12px 12px 2px 12px; padding:14px 16px; max-width:78%; margin-left:auto; font-size:14px; color:var(--ink); font-family:var(--font-body);}
  .chat-card{background:var(--surface-deep); border:1px solid var(--hairline-strong); border-radius:12px; padding:20px; max-width:92%; font-family:var(--font-ui);}

  .spinner{width:16px; height:16px; border-radius:50%; border:2px solid var(--hairline-strong); border-top-color:var(--ink); animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .typing-dot{width:6px; height:6px; border-radius:50%; background:var(--mute); animation:blink 1.2s infinite ease-in-out;}
  .typing-dot:nth-child(2){animation-delay:.2s;} .typing-dot:nth-child(3){animation-delay:.4s;}
  @keyframes blink{0%,80%,100%{opacity:.2;} 40%{opacity:1;}}

  .fab{position:fixed; bottom:24px; right:24px; z-index:40; width:52px; height:52px; border-radius:9999px; background:var(--primary); color:var(--primary-on); border:none; font-size:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease;}
  .fab:hover{transform:scale(1.06);}

  @media (max-width: 1023px){
    .desktop-nav{display:none;}
  }
  @media (min-width: 1024px){
    .mobile-nav-toggle{display:none;}
  }

/* Best-of-three additions: editorial metrics, local advisor, responsive flow */
body{min-height:100vh;background:
  radial-gradient(900px 460px at 85% -10%,rgba(61,107,255,.13),transparent 62%),
  radial-gradient(760px 420px at 0 30%,rgba(163,255,112,.045),transparent 65%),var(--canvas);}
nav{backdrop-filter:blur(18px);background:rgba(0,0,0,.82)!important;}
#view-root{min-height:calc(100vh - 190px);}
.app-status{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:11px;letter-spacing:.2px;}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 26px;}
.metric-card{position:relative;min-height:145px;padding:18px;border:1px solid var(--hairline);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden;}
.metric-card::after{content:"";position:absolute;inset:auto -20% -65% 10%;height:120px;background:radial-gradient(ellipse,rgba(255,255,255,.07),transparent 68%);pointer-events:none;}
.metric-card strong{display:block;margin:24px 0 7px;font-family:var(--font-display);font-size:32px;font-weight:400;letter-spacing:-1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metric-card span{display:block;color:var(--ash);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.metric-lime{border-color:rgba(17,255,153,.16);}.metric-lime strong{color:#c8ff9b;}
.metric-blue{border-color:rgba(59,158,255,.18);}.metric-blue strong{color:#9dcbff;}
.metric-violet{border-color:rgba(171,130,255,.18);}.metric-violet strong{color:#d0b7ff;font-size:26px;}
.focus-panel{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:54px;padding:20px 22px;border:1px solid rgba(216,249,155,.16);border-radius:12px;background:linear-gradient(100deg,rgba(216,249,155,.07),rgba(59,158,255,.035));}
.focus-panel h2{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:-.5px;margin:2px 0 6px;}
.focus-panel p:last-child{color:var(--ash);font-size:12px;}
.section-kicker{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;}
.section-kicker span{color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:1.2px;}
.section-kicker h2{font-family:var(--font-display);font-weight:400;font-size:26px;}
.advisor-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.advisor-index span,.advisor-source{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--hairline);border-radius:999px;background:rgba(255,255,255,.025);color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:.55px;}
.advisor-source{margin-bottom:14px;color:var(--body-c);}
.quick-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.quick-prompts button{padding:7px 10px;border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface-card);color:var(--charcoal);font-size:11px;cursor:pointer;transition:.15s ease;}
.quick-prompts button:hover{border-color:var(--accent-blue);color:var(--ink);transform:translateY(-1px);}
.bar-chart{height:280px;display:grid;grid-template-columns:32px 1fr;gap:12px;padding-top:16px;}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;color:var(--stone);font-family:var(--font-mono);font-size:9px;text-align:right;padding-bottom:26px;}
.chart-bars{display:grid;grid-template-columns:repeat(8,minmax(22px,1fr));gap:8px;border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:0 6px 0 12px;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(50% - 1px),var(--divider-soft) 50%,transparent calc(50% + 1px));}
.chart-bar-group{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;}
.chart-bar-area{height:225px;width:100%;display:flex;align-items:flex-end;justify-content:center;}
.chart-bar{position:relative;width:min(34px,70%);min-height:4px;border-radius:5px 5px 1px 1px;background:linear-gradient(to top,rgba(59,158,255,.45),rgba(59,158,255,.9));box-shadow:0 0 22px rgba(59,158,255,.13);animation:bar-grow .5s ease-out;}
.chart-bar b{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font:9px var(--font-mono);color:var(--mute);}
.chart-bar-group small{height:18px;color:var(--ash);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
@keyframes bar-grow{from{height:0;opacity:.2}to{opacity:1}}
.app-footer{border-top:1px solid var(--divider-soft);padding:26px 20px 34px;color:var(--stone);font-size:11px;}
.app-footer-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.app-footer strong{font-family:var(--font-display);font-size:15px;font-weight:400;color:var(--charcoal);}

@media(max-width:900px){
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #kanban-board{grid-template-columns:1fr!important;}
  #analytics-grid{grid-template-columns:1fr!important;}
}
@media(max-width:620px){
  #view-root{padding-left:14px!important;padding-right:14px!important;}
  .metric-grid{grid-template-columns:1fr 1fr;gap:7px;}
  .metric-card{min-height:120px;padding:14px;}.metric-card strong{font-size:25px;margin-top:18px;}.metric-violet strong{font-size:20px;}
  .focus-panel{align-items:flex-start;flex-direction:column;margin-bottom:45px;}.focus-panel .btn-primary{width:100%;}
  .section-kicker{align-items:flex-start;flex-direction:column;gap:4px;}
  .app-status{display:none;}.app-footer-inner{align-items:flex-start;flex-direction:column;}
  .chart-bars{gap:4px;padding-left:7px}.chart-bar{width:70%}.chart-bar-group small{font-size:8px;transform:rotate(-32deg);transform-origin:center top;overflow:visible;}
  table.data-table{min-width:760px;}
}
@media(max-width:390px){.metric-grid{grid-template-columns:1fr}.metric-card{min-height:104px}.metric-card strong{margin-top:12px}.quick-prompts{display:grid}.quick-prompts button{text-align:left}}

  /* Vault Styles */
  .vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 24px;
  }
  .question-card {
    background: var(--surface-card);
    border: 1px solid var(--hairline-strong);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .question-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
  }
  .question-img-container {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-deep);
    border: 1px solid var(--divider-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
  }
  .question-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .upload-zone {
    border: 2px dashed var(--hairline-strong);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.01);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .upload-zone:hover {
    border-color: var(--accent-blue);
    background: rgba(59, 158, 255, 0.03);
  }
  .upload-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
  .upload-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    background: var(--surface-deep);
  }
  .upload-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .upload-preview-item button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }
  .upload-preview-item button:hover {
    background: var(--accent-red);
  }
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
  }
  .lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }