:root{
    /* Palette */
    --green:#1f7a4d;
    --green-dk:#155e3a;
    --green-lt:#e4f4ea;
    --orange:#e0632b;
    --orange-dk:#c94f1c;
    --amber:#c9922b;
    --amber-lt:#fbf1de;
    --blue:#2563a8;
    --blue-lt:#e7f0fa;
    --red:#c0392b;
    --red-lt:#fbe7e3;
    --ink:#1a231f;
    --muted:#66706b;
    --line:#dfd9cb;
    --paper:#ebe6dc;
    --card:#ffffff;
    --surface:#f2f0e8;
    --surface-glass: rgba(255, 255, 255, 0.95);
    --font: "Plus Jakarta Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", monospace;

    /* Claymorphism System */
    --clay-card-radius: 22px;
    --clay-btn-radius: 14px;
    --clay-pill-radius: 999px;

    /* Clay Shadows */
    --clay-shadow-out: 0 16px 32px -8px rgba(65, 55, 40, 0.13), 0 6px 14px -3px rgba(65, 55, 40, 0.08);
    --clay-shadow-card:
      0 18px 36px -10px rgba(60, 50, 36, 0.14),
      0 6px 16px -4px rgba(60, 50, 36, 0.08),
      inset 3px 3px 6px rgba(255, 255, 255, 0.95),
      inset -3px -3px 7px rgba(185, 172, 155, 0.28);
    --clay-shadow-card-hover:
      0 24px 44px -10px rgba(60, 50, 36, 0.2),
      0 8px 20px -4px rgba(60, 50, 36, 0.1),
      inset 3px 3px 7px rgba(255, 255, 255, 1),
      inset -3px -3px 7px rgba(185, 172, 155, 0.22);
    --clay-shadow-inset:
      inset 3px 3px 7px rgba(100, 90, 75, 0.14),
      inset -3px -3px 7px rgba(255, 255, 255, 0.95);
    --clay-shadow-btn-primary:
      0 10px 22px -5px rgba(224, 99, 43, 0.45),
      0 4px 8px -2px rgba(224, 99, 43, 0.25),
      inset 2.5px 2.5px 5px rgba(255, 255, 255, 0.6),
      inset -2.5px -3px 6px rgba(0, 0, 0, 0.25);
    --clay-shadow-btn-green:
      0 10px 22px -5px rgba(31, 122, 77, 0.45),
      0 4px 8px -2px rgba(31, 122, 77, 0.25),
      inset 2.5px 2.5px 5px rgba(255, 255, 255, 0.55),
      inset -2.5px -3px 6px rgba(0, 0, 0, 0.25);
    --clay-shadow-btn-white:
      0 8px 18px -4px rgba(65, 55, 40, 0.12),
      0 3px 6px -2px rgba(65, 55, 40, 0.08),
      inset 2.5px 2.5px 5px rgba(255, 255, 255, 1),
      inset -2.5px -3px 5px rgba(180, 168, 150, 0.35);
  }

  /* ===== DARK MODE =====
     Distinct from .theme-high-contrast (the WCAG-AAA accessibility toggle,
     which stays as-is) — this is the everyday dark theme, toggled by
     #themeToggleBtn and persisted via localStorage (see js/app.js). It
     redefines the same tokens almost everything in this stylesheet already
     draws from (--ink, --muted, --line, --card, --paper, --surface, the
     *-lt tint backgrounds, and the clay shadow set), so the vast majority of
     the app recolors correctly without per-component rules. Applied as
     [data-theme="dark"] on <html>. */
  :root[data-theme="dark"]{
    --green:#34c37c;
    --green-dk:#7be3a8;
    --green-lt:#0f2b1e;
    --orange:#e0733b;
    --orange-dk:#f0a06a;
    --amber:#d9a648;
    --amber-lt:#332a14;
    --blue:#5b9bd8;
    --blue-lt:#152535;
    --red:#e0685a;
    --red-lt:#341a17;
    --ink:#eef1ec;
    --muted:#98a29c;
    --line:#333b36;
    --paper:#14181a;
    --card:#1d2224;
    --surface:#242a2c;
    --surface-glass: rgba(24, 28, 30, 0.88);

    --clay-shadow-out: 0 16px 32px -8px rgba(0, 0, 0, 0.45), 0 6px 14px -3px rgba(0, 0, 0, 0.3);
    --clay-shadow-card:
      0 18px 36px -10px rgba(0, 0, 0, 0.5),
      0 6px 16px -4px rgba(0, 0, 0, 0.32),
      inset 2px 2px 4px rgba(255, 255, 255, 0.045),
      inset -2px -2px 5px rgba(0, 0, 0, 0.4);
    --clay-shadow-card-hover:
      0 24px 44px -10px rgba(0, 0, 0, 0.55),
      0 8px 20px -4px rgba(0, 0, 0, 0.35),
      inset 2px 2px 5px rgba(255, 255, 255, 0.06),
      inset -2px -2px 5px rgba(0, 0, 0, 0.4);
    --clay-shadow-inset:
      inset 3px 3px 7px rgba(0, 0, 0, 0.4),
      inset -2px -2px 5px rgba(255, 255, 255, 0.04);
    --clay-shadow-btn-primary:
      0 10px 22px -5px rgba(224, 99, 43, 0.4),
      0 4px 8px -2px rgba(224, 99, 43, 0.22),
      inset 2px 2px 4px rgba(255, 255, 255, 0.15),
      inset -2.5px -3px 6px rgba(0, 0, 0, 0.35);
    --clay-shadow-btn-green:
      0 10px 22px -5px rgba(52, 195, 124, 0.35),
      0 4px 8px -2px rgba(52, 195, 124, 0.2),
      inset 2px 2px 4px rgba(255, 255, 255, 0.15),
      inset -2.5px -3px 6px rgba(0, 0, 0, 0.35);
    --clay-shadow-btn-white:
      0 8px 18px -4px rgba(0, 0, 0, 0.4),
      0 3px 6px -2px rgba(0, 0, 0, 0.3),
      inset 2px 2px 4px rgba(255, 255, 255, 0.06),
      inset -2.5px -3px 5px rgba(0, 0, 0, 0.35);
  }
  :root[data-theme="dark"] body{
    background:
      radial-gradient(circle at 15% 10%, rgba(52,195,124,0.07), transparent 40%),
      radial-gradient(circle at 85% 0%, rgba(217,166,72,0.06), transparent 45%),
      radial-gradient(circle at 50% 100%, rgba(52,195,124,0.05), transparent 50%),
      linear-gradient(180deg, #171c1e, var(--paper));
  }
  :root[data-theme="dark"] .topbar{
    border-color: rgba(255,255,255,0.08);
  }
  :root[data-theme="dark"] .btn-report::after{ color:#0e1210; }
  :root[data-theme="dark"] img{ opacity:0.92; }
  /* Map tiles and photo thumbnails stay full-bright — dimming raster imagery
     reads as broken assets, not as "dark mode". */
  :root[data-theme="dark"] .leaflet-tile,
  :root[data-theme="dark"] .report-thumb img,
  :root[data-theme="dark"] .b-a-box img{ opacity:1; }
  /* Form controls don't inherit --ink/--card the way most elements here do
     (browsers give them their own default white-on-black-text rendering
     regardless of surrounding CSS variables), so they need an explicit rule. */
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] textarea,
  :root[data-theme="dark"] select{
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
  }
  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder{ color: var(--muted); opacity:1; }
  :root[data-theme="dark"] table{ color: var(--ink); }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper);}
  body{
    font-family:var(--font);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(circle at 15% 10%, rgba(31,122,77,0.10), transparent 40%),
      radial-gradient(circle at 85% 0%, rgba(201,146,43,0.10), transparent 45%),
      radial-gradient(circle at 50% 100%, rgba(31,122,77,0.08), transparent 50%),
      linear-gradient(180deg, #efeade, var(--paper));
    background-attachment: fixed;
    min-height: 100vh;
  }
  .app{max-width:1300px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding: 12px 16px 24px;}

  /* ===== TOP NAV (Clay Floating Bar) ===== */
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap: 16px;
    padding:12px 26px;
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    box-shadow: var(--clay-shadow-card);
    position:sticky; top:12px; z-index:50;
    margin-bottom: 20px;
    transition: all .25s ease;
  }
  .brand{
    display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--green-dk);
    letter-spacing: -0.3px;
    flex-shrink: 0;
  }
  .brand .ico{
    font-size:24px;
    filter: drop-shadow(0 4px 6px rgba(21,94,58,0.25));
  }
  .navlinks{
    display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; max-width:100%; padding:2px 0;
    flex: 1; min-width: 0;
  }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--muted); text-decoration:none; font-size:13px; font-weight:700;
    padding:6px 12px; border-radius:var(--clay-pill-radius); cursor:pointer;
    white-space:nowrap; transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; flex-shrink: 0;
  }
  .navlinks .n-ico { display: inline-block; font-size: 15px; margin: 0; line-height: 1; }
  .navlinks .n-lbl { display: inline-block; font-size: 12.5px; line-height: 1; }
  .navlinks a:hover{
    color:var(--ink);
    background: rgba(235, 230, 220, 0.6);
    transform: translateY(-1px);
  }
  .navlinks a.active{
    color:var(--green-dk);
    background: var(--green-lt);
    box-shadow:
      0 4px 10px -2px rgba(31, 122, 77, 0.2),
      inset 2px 2px 4px rgba(255, 255, 255, 0.9),
      inset -2px -2px 4px rgba(31, 122, 77, 0.15);
  }
  .nav-right{display:flex; align-items:center; gap:12px;}
  .icon-btn{
    width:48px; height:48px; border-radius:50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background:var(--card);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:var(--muted);
    position:relative;
    box-shadow: var(--clay-shadow-btn-white);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .icon-btn:hover{
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px -4px rgba(65, 55, 40, 0.18), inset 2.5px 2.5px 5px #fff, inset -2.5px -3px 5px rgba(180, 168, 150, 0.35);
  }
  .icon-btn:active{
    transform: translateY(1px) scale(0.96);
    box-shadow: var(--clay-shadow-inset);
  }
  .icon-btn .dot{
    position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--orange);
    box-shadow: 0 0 6px rgba(224, 99, 43, 0.7);
  }
  .btn-report{
    background: linear-gradient(145deg, #f3773e, #d6551e);
    color:#fff; border:none; padding:11px 22px; border-radius:var(--clay-pill-radius);
    font-weight:800; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:8px;
    box-shadow: var(--clay-shadow-btn-primary);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: 0.2px;
  }
  .btn-report:hover{
    background: linear-gradient(145deg, #fa834c, #e05e26);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 26px -5px rgba(224, 99, 43, 0.55), inset 2.5px 2.5px 5px rgba(255, 255, 255, 0.7), inset -2.5px -3px 6px rgba(0, 0, 0, 0.3);
  }
  .btn-report:active{
    transform: translateY(1px) scale(0.97);
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.3);
  }

  /* Mode toggle - tactile sunken pill */
  .mode-toggle{
    display:flex;
    background: #e2dbd0;
    border-radius: var(--clay-pill-radius);
    padding:4px; gap:3px; margin-right:4px;
    box-shadow: var(--clay-shadow-inset);
  }
  .mode-toggle button{
    border:none; background:transparent; padding:7px 15px; border-radius:var(--clay-pill-radius);
    font-size:12px; font-weight:800; cursor:pointer; color:var(--muted);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .mode-toggle button.active{
    background: linear-gradient(145deg, #248b57, #155e3a);
    color:#fff;
    box-shadow:
      0 4px 10px rgba(21, 94, 58, 0.35),
      inset 2px 2px 4px rgba(255, 255, 255, 0.5),
      inset -2px -2px 4px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
  }

  .view{ display:none; padding:10px 4px 30px; flex:1; }
  .view.active{ display:block; animation:fadeIn .3s ease; }
  #view-report.active{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:60vh; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

  .pagehead{ margin-bottom:24px; }
  .pagehead h1{ font-size:32px; margin:0 0 6px; letter-spacing:-0.6px; font-weight:800; }
  .pagehead .sub{ color:var(--muted); font-size:15px; font-weight:500; }
  .pagehead-row{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px; }

  /* ===== BUTTONS (Clay styled) ===== */
  .btn{
    border:none; border-radius:var(--clay-btn-radius); padding:12px 22px;
    font-weight:800; font-size:14px; cursor:pointer;
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-primary{
    background: linear-gradient(145deg, #f3773e, #d6551e);
    color:#fff;
    box-shadow: var(--clay-shadow-btn-primary);
  }
  .btn-primary:hover{
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 26px -5px rgba(224,99,43,0.55), inset 2.5px 2.5px 5px rgba(255,255,255,0.7), inset -2.5px -3px 6px rgba(0,0,0,0.3);
  }
  .btn-primary:active{
    transform: translateY(1px) scale(0.97);
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.3);
  }
  .btn-outline{
    background:var(--card);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color:var(--ink);
    box-shadow: var(--clay-shadow-btn-white);
  }
  .btn-outline:hover{
    border-color:var(--green-lt);
    color:var(--green-dk);
    transform: translateY(-2px) scale(1.02);
  }
  .btn-outline:active{
    transform: translateY(1px) scale(0.97);
    box-shadow: var(--clay-shadow-inset);
  }
  .btn-green{
    background: linear-gradient(145deg, #248b57, #155e3a);
    color:#fff;
    box-shadow: var(--clay-shadow-btn-green);
  }
  .btn-green:hover{
    transform: translateY(-2px) scale(1.02);
  }
  .btn-green:active{
    transform: translateY(1px) scale(0.97);
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.3);
  }

  /* ===== HOME ===== */
  .home-hero{
    background: linear-gradient(135deg, #238956 0%, #155e3a 100%);
    border-radius: 28px; padding:44px 48px; color:#fff;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:36px; align-items:center;
    margin-bottom:34px; position:relative; overflow:hidden;
    box-shadow:
      0 24px 48px -12px rgba(21, 94, 58, 0.4),
      0 8px 18px -4px rgba(21, 94, 58, 0.2),
      inset 4px 4px 8px rgba(255, 255, 255, 0.35),
      inset -4px -4px 10px rgba(0, 0, 0, 0.35);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
  }
  .home-hero::after{
    content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    pointer-events:none;
  }
  .home-hero h1{ font-size:36px; margin:0 0 14px; line-height:1.18; font-weight:800; letter-spacing:-0.5px; }
  .home-hero p{ font-size:15.5px; opacity:.94; line-height:1.6; max-width:480px; margin:0 0 26px;}
  .hero-stats{ display:flex; gap:28px; margin-top:28px; }
  .hero-stats .n{ font-size:26px; font-weight:800; text-shadow:0 2px 4px rgba(0,0,0,0.2); }
  .hero-stats .l{ font-size:12px; opacity:.88; font-weight:600; }
  @media (max-width:860px){ .home-hero{ grid-template-columns:1fr; padding:30px 24px; } }

  /* Clay Capture Card */
  .capture-card{
    background:var(--card);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px; padding:32px;
    box-shadow: var(--clay-shadow-card);
  }
  .capture-box{
    aspect-ratio:16/9;
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: 18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer;
    background: rgba(0, 0, 0, 0.04);
    box-shadow:
      inset 3px 3px 8px rgba(0, 0, 0, 0.05),
      inset -2px -2px 6px rgba(255, 255, 255, 0.8);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
  }
  .capture-box:hover{
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.01);
  }
  .capture-box.captured{
    border-style:solid;
    border-color: #8fe3ac;
    background: rgba(10, 45, 28, 0.4);
    box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.4), inset -2px -2px 6px rgba(143, 227, 172, 0.3);
  }
  .capture-box .cam-icon{ font-size:32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); color:var(--ink); }
  .capture-box .cam-label{ font-size:14px; letter-spacing:.3px; opacity:.95; font-weight:700; color:var(--ink); }
  .capture-box .check{
    font-size:20px; display:none; background:rgba(0,0,0,.5); width:40px; height:40px; border-radius:50%;
    align-items:center; justify-content:center; color:#8fe3ac;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  .capture-box.captured .check{ display:flex; }
  .capture-box.captured .cam-label{ background:rgba(0,0,0,.55); padding:5px 12px; border-radius:10px; backdrop-filter:blur(4px); }
  .capture-box.captured .cam-icon{ display:none; }

  .gps-row{ display:flex; align-items:center; gap:8px; font-size:13px; margin-top:14px; opacity:.85; font-weight:600; color:var(--ink); }
  .gps-dot{ width:8px; height:8px; border-radius:50%; background:#8fe3ac; animation:pulse 2s infinite; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(143,227,172,.8);} 70%{box-shadow:0 0 0 10px rgba(143,227,172,0);} 100%{box-shadow:0 0 0 0 rgba(143,227,172,0);} }

  .cat-row{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .cat-chip{
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.05);
    color:var(--ink);
    padding:10px 18px; border-radius:var(--clay-pill-radius);
    font-size:14px; cursor:pointer; font-weight:700;
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.05),
      inset 1.5px 1.5px 3px #ffffff,
      inset -1.5px -2px 3px rgba(0, 0, 0, 0.05);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .cat-chip:hover{
    transform: translateY(-2px) scale(1.04);
    background: rgba(0, 0, 0, 0.08);
  }
  .cat-chip.sel{
    background:var(--card); color:var(--green-dk); border-color:#ffffff;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.22),
      inset 2.5px 2.5px 5px #ffffff,
      inset -2.5px -2.5px 5px rgba(0, 0, 0, 0.12);
    transform: scale(1.06);
  }

  .desc-input-row{ display:flex; gap:8px; margin-top:14px; }
  .desc-input-row input{
    flex:1;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px; padding:14px 16px;
    background: rgba(0, 0, 0, 0.04);
    color:var(--ink); font-size:15px; font-family:var(--font);
    box-shadow: inset 2.5px 2.5px 6px rgba(0,0,0,0.08), inset -2px -2px 5px #ffffff;
    outline:none;
    transition: all .2s ease;
  }
  .desc-input-row input:focus{
    background:var(--card);
    border-color: rgba(0, 0, 0, 0.2);
  }
  .desc-input-row input::placeholder{ color:rgba(0, 0, 0, 0.5); }
  .mic-btn{
    width:52px; height:52px; border-radius:14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background:var(--card);
    cursor:pointer; font-size:20px; color:var(--ink); flex-shrink:0;
    box-shadow:
      0 6px 14px rgba(0,0,0,0.08),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(0,0,0,0.05);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .mic-btn:hover{ transform: translateY(-2px) scale(1.06); background: rgba(255,255,255,0.3); }
  .mic-btn:active{ transform: translateY(1px) scale(0.96); box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3); }
  .mic-btn.recording{ background:var(--orange); border-color:var(--orange); animation:micPulse 1.2s ease-in-out infinite; }
  @keyframes micPulse{
    0%{ box-shadow:0 0 0 0 rgba(224,99,43,0.55); }
    70%{ box-shadow:0 0 0 12px rgba(224,99,43,0); }
    100%{ box-shadow:0 0 0 0 rgba(224,99,43,0); }
  }

  .dupe-alert{
    margin-top:14px;
    background: rgba(255, 100, 100, 0.1);
    border: 1.5px solid rgba(255, 100, 100, 0.4);
    border-radius:12px; padding:12px;
    display:none; align-items:center; gap:10px; color:var(--red);
    box-shadow: inset 1px 1px 4px rgba(255,100,100,0.1);
  }
  .dupe-alert.show{ display:flex; }
  .dupe-alert button{
    margin-left:auto; background:var(--card); color:var(--green-dk); border:none;
    padding:7px 12px; border-radius:var(--clay-pill-radius); font-size:11.5px; font-weight:800;
    cursor:pointer; white-space:nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15), inset 1.5px 1.5px 3px #fff, inset -1.5px -1.5px 3px rgba(0,0,0,0.1);
  }

  .submit-btn{
    width:100%; margin-top:16px;
    background:var(--card);
    color:var(--green-dk); border:none; padding:14px;
    border-radius: 14px; font-weight:800; font-size:15px; letter-spacing:.5px; cursor:pointer;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.22),
      inset 3px 3px 6px #ffffff,
      inset -3px -3px 6px rgba(0, 0, 0, 0.12);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .submit-btn:hover:not(:disabled){
    transform: translateY(-2px) scale(1.02);
    background:var(--card);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), inset 3px 3px 6px #ffffff, inset -3px -3px 6px rgba(0, 0, 0, 0.12);
  }
  .submit-btn:active:not(:disabled){
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.25), inset -2px -2px 4px #fff;
  }
  .submit-btn:disabled{
    background: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.7);
    cursor:not-allowed;
    box-shadow: none;
  }

  /* ===== QUICK TILES (Clay 3D Widgets) ===== */
  .quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:34px; }
  @media (max-width:900px){ .quick-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:540px){ .quick-grid{ grid-template-columns:1fr; } }
  .quick-tile{
    background:var(--card);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px; padding:22px; cursor:pointer;
    box-shadow: var(--clay-shadow-card);
    transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display:flex; flex-direction:column; gap:12px;
  }
  .quick-tile:hover{
    transform: translateY(-5px) scale(1.02);
    box-shadow:
      0 24px 44px -10px rgba(31, 122, 77, 0.22),
      0 8px 18px -4px rgba(31, 122, 77, 0.12),
      inset 3px 3px 7px #ffffff,
      inset -3px -3px 7px rgba(185, 172, 155, 0.22);
    border-color: rgba(31, 122, 77, 0.25);
  }
  .quick-tile:active{
    transform: translateY(1px) scale(0.98);
  }
  .quick-tile .qi{
    width:48px; height:48px; border-radius:16px;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    box-shadow:
      0 6px 14px -3px rgba(0, 0, 0, 0.08),
      inset 2.5px 2.5px 5px rgba(255, 255, 255, 0.8),
      inset -2.5px -2.5px 5px rgba(0, 0, 0, 0.08);
  }
  .quick-tile h4{ margin:0; font-size:16px; font-weight:800; }
  .quick-tile p{ margin:0; font-size:13px; color:var(--muted); line-height:1.45; font-weight:500; }

  .home-split{ display:grid; grid-template-columns:1.35fr 0.95fr; gap:24px; }
  @media (max-width:900px){ .home-split{ grid-template-columns:1fr; } }

  /* ===== CARD (Clay Base) ===== */
  .card{
    background:var(--card);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--clay-card-radius);
    padding:24px;
    box-shadow: var(--clay-shadow-card);
    transition: all .25s ease;
  }
  .card h3{
    margin:0 0 16px; font-size:16px; font-weight:800;
    display:flex; align-items:center; justify-content:space-between;
    letter-spacing: -0.2px;
  }
  .card h3 .ico{ margin-right:8px; font-size: 18px; }

  /* ===== FEED / ACTIVITY (Clay items) ===== */
  .feed-item{
    display:flex; align-items:center; gap:14px; padding:14px;
    margin-bottom: 10px;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
      0 4px 10px -2px rgba(60, 50, 40, 0.06),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(185, 172, 155, 0.15);
    transition: all .2s ease;
  }
  .feed-item:last-child{ margin-bottom:0; }
  .feed-item:hover{
    transform: translateY(-2px);
    box-shadow:
      0 8px 16px -4px rgba(60, 50, 40, 0.1),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(185, 172, 155, 0.15);
  }
  .feed-icon{
    width:42px; height:42px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
    box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.06),
      inset 2px 2px 4px rgba(255, 255, 255, 0.8),
      inset -2px -2px 4px rgba(0, 0, 0, 0.08);
  }
  .feed-item .meta{ flex:1; }
  .feed-item .meta strong{ display:block; font-size:14px; font-weight:700; }
  .feed-item .meta span{ font-size:12px; color:var(--muted); font-weight:500; }

  /* ===== PILLS & BADGES (Clay volumetric) ===== */
  .pill{
    font-size:11px; padding:5px 12px; border-radius:var(--clay-pill-radius);
    font-weight:800; white-space:nowrap;
    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.06),
      inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.7),
      inset -1.5px -1.5px 3px rgba(0, 0, 0, 0.1);
  }
  .pill-high{ background:var(--red-lt); color:var(--red); }
  .pill-med{ background:var(--amber-lt); color:#8a6416; }
  .pill-low{ background:var(--green-lt); color:var(--green-dk); }

  .status-pill{
    font-size:12px; font-weight:800; padding:7px 14px; border-radius:var(--clay-pill-radius);
    display:inline-flex; align-items:center; gap:6px;
    box-shadow:
      0 4px 10px -2px rgba(0, 0, 0, 0.08),
      inset 2px 2px 4px rgba(255, 255, 255, 0.75),
      inset -2px -2px 4px rgba(0, 0, 0, 0.12);
  }
  .status-received{ background:var(--blue-lt); color:var(--blue); }
  .status-working{ background:var(--amber-lt); color:#8a6416; }
  .status-fixed{ background:var(--green-lt); color:var(--green-dk); }
  .status-queued{ background:var(--amber-lt); color:#8a6416; }
  .status-open{ background:var(--red-lt); color:var(--red); }
  .status-resolved{ background:var(--green-lt); color:var(--green-dk); }

  /* ===== MY REPORTS VIEW ===== */
  .reports-shell{ display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start; }
  @media (max-width:900px){ .reports-shell{ grid-template-columns:1fr; } }
  .summary-card .row{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; margin-bottom:8px;
    background: var(--surface); border-radius:14px;
    box-shadow: var(--clay-shadow-inset);
  }
  .summary-card .row:last-child{ margin-bottom:0; }
  .summary-card .row .lft{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
  .summary-card .ic{
    width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    box-shadow:
      0 3px 6px rgba(0,0,0,0.06),
      inset 1.5px 1.5px 3px rgba(255,255,255,0.8),
      inset -1.5px -1.5px 3px rgba(0,0,0,0.1);
  }
  .summary-card .val{ font-weight:800; font-size:18px; }

  .tip-card{
    margin-top:18px;
    background: linear-gradient(135deg, #248b57 0%, #155e3a 100%);
    color:#fff; border-radius:22px; padding:22px; font-size:13.5px; line-height:1.6;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow:
      0 16px 32px -8px rgba(21, 94, 58, 0.35),
      inset 3px 3px 6px rgba(255, 255, 255, 0.35),
      inset -3px -3px 8px rgba(0, 0, 0, 0.3);
  }
  .tip-card h4{ margin:0 0 8px; font-size:15px; font-weight:800; }

  .filter-row{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
  .fchip{
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    background:var(--card); padding:9px 18px; border-radius:var(--clay-pill-radius);
    font-size:13px; font-weight:800; cursor:pointer; color:var(--muted);
    box-shadow: var(--clay-shadow-btn-white);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .fchip:hover{
    transform: translateY(-2px);
    color: var(--ink);
  }
  .fchip.active{
    background: var(--green-lt);
    color: var(--green-dk);
    box-shadow:
      0 6px 14px -3px rgba(31, 122, 77, 0.25),
      inset 2px 2px 4px rgba(255, 255, 255, 0.9),
      inset -2px -2px 4px rgba(31, 122, 77, 0.15);
    transform: scale(1.03);
  }

  .report-card{
    background:var(--card);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px; padding:18px; margin-bottom:16px;
    display:grid; grid-template-columns:160px 1fr; gap:18px; cursor:pointer;
    box-shadow: var(--clay-shadow-card);
    transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .report-card:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--clay-shadow-card-hover);
    border-color: rgba(31, 122, 77, 0.2);
  }
  @media (max-width:640px){ .report-card{ grid-template-columns:1fr; } }
  .report-thumb{
    border-radius:16px; overflow:hidden; position:relative; min-height:120px;
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.08),
      inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  }
  .report-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .report-thumb .badge{
    position:absolute; top:8px; left:8px;
    backdrop-filter: blur(8px);
  }
  .report-body{ display:flex; flex-direction:column; }
  .report-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:600; }
  .report-body h4{ margin:0 0 6px; font-size:16.5px; font-weight:800; }
  .report-body p{ margin:0 0 10px; font-size:13.5px; color:var(--muted); line-height:1.5; font-weight:500; }
  .report-foot{ font-size:12px; color:var(--muted); margin-top:auto; display:flex; align-items:center; gap:6px; font-weight:600; }
  .report-ai-summary{ font-size:12px; color:var(--muted); margin:2px 0 6px; line-height:1.4; }

  .load-more{
    width:100%; padding:14px; border-radius:16px;
    border: 2px dashed #cfc9bb;
    background: var(--surface); color:var(--muted); font-weight:800; font-size:14px;
    cursor:pointer;
    box-shadow: inset 1.5px 1.5px 4px #ffffff, inset -1.5px -1.5px 4px rgba(185, 172, 155, 0.2);
    transition: all .2s ease;
  }
  .load-more:hover{
    border-color:var(--green); color:var(--green-dk); background:var(--green-lt);
    transform: translateY(-2px);
  }

  /* ===== COMMUNITY MAP VIEW (Clay Console) ===== */
  .map-shell{
    display:grid; grid-template-columns:360px 1fr; gap:0;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px; overflow:hidden; height:640px;
    box-shadow: var(--clay-shadow-card);
  }
  @media (max-width:900px){ .map-shell{ grid-template-columns:1fr; height:auto; } }
  .map-side{ background:var(--card); padding:20px; overflow-y:auto; border-right:1.5px solid var(--line); }
  .search-box{
    display:flex; align-items:center; gap:10px;
    border: none;
    border-radius: 14px; padding:11px 14px; margin-bottom:14px;
    background: var(--surface);
    box-shadow: var(--clay-shadow-inset);
  }
  .search-box input{ border:none; outline:none; flex:1; font-size:14px; background:transparent; font-family:var(--font); font-weight:600; }
  .map-item{
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px; padding:14px; margin-bottom:12px; cursor:pointer;
    background: var(--surface);
    box-shadow:
      0 4px 10px -2px rgba(60, 50, 40, 0.08),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(185, 172, 155, 0.2);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .map-item:hover{
    transform: translateY(-3px) scale(1.02);
    border-color:var(--green-lt);
    box-shadow: 0 8px 18px -4px rgba(31, 122, 77, 0.2), inset 2px 2px 4px #fff, inset -2px -2px 4px rgba(185, 172, 155, 0.15);
  }
  .map-item-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .map-item-top strong{ font-size:14.5px; font-weight:800; }
  .map-item .loc{ font-size:12px; color:var(--muted); margin:4px 0 6px; font-weight:600; }
  .map-item p{ font-size:13px; margin:0 0 8px; color:var(--muted); line-height:1.45; font-weight:500; }
  .map-item .foot{ font-size:11.5px; color:var(--muted); font-weight:600; }

  .map-canvas{
    position:relative; overflow:hidden; background:#eef6f0;
    cursor:grab; touch-action:none; user-select:none;
  }
  .map-canvas.dragging{ cursor:grabbing; }
  .map-viewport{ position:absolute; inset:0; transform-origin:center center; }
  .map-svg-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .map-road{ position:absolute; background:var(--card); box-shadow:0 0 0 1px #d4cec0, 0 4px 8px rgba(0,0,0,0.06); }
  .map-marker{
    position:absolute; width:40px; height:40px; border-radius:50% 50% 50% 0; transform:translate(-50%,-100%) rotate(-45deg);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:
      0 10px 20px -4px rgba(0,0,0,0.3),
      inset 2.5px 2.5px 5px rgba(255,255,255,0.7),
      inset -2.5px -2.5px 5px rgba(0,0,0,0.25);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .map-marker span{ transform:rotate(45deg); font-size:16px; }
  .map-marker:hover{
    transform:translate(-50%,-100%) rotate(-45deg) scale(1.18);
    z-index:10;
    box-shadow: 0 16px 28px -4px rgba(0,0,0,0.4), inset 2.5px 2.5px 5px #fff, inset -2.5px -2.5px 5px rgba(0,0,0,0.3);
  }
  .map-marker.red{ background: linear-gradient(145deg, #e54d3d, #ba2b1e); }
  .map-marker.amber{ background: linear-gradient(145deg, #e8a93a, #b57e1b); }
  .map-marker.green{ background: linear-gradient(145deg, #28a063, #155e3a); }

  .map-popup{
    position:absolute; background:var(--card); border-radius:18px; padding:14px 16px;
    box-shadow:
      0 20px 40px -10px rgba(0,0,0,0.25),
      inset 3px 3px 6px #ffffff,
      inset -3px -3px 6px rgba(185, 172, 155, 0.25);
    width:210px; z-index:12; font-size:13px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    animation: fadeIn .2s ease;
  }
  .map-popup strong{ display:block; font-size:14px; margin-bottom:4px; font-weight:800; }
  .map-controls{ position:absolute; right:18px; top:18px; display:flex; flex-direction:column; gap:8px; z-index:4;}
  .map-controls button{
    width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,0.9); background:var(--card);
    cursor:pointer; font-size:16px; font-weight:800;
    box-shadow: var(--clay-shadow-btn-white);
    transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .map-controls button:hover{ transform: scale(1.08); }
  .map-controls button:active{ transform: scale(0.94); box-shadow: var(--clay-shadow-inset); }

  .map-legend{
    position:absolute; left:18px; bottom:18px; background:var(--card); border-radius:14px; padding:10px 16px;
    font-size:12px; font-weight:700;
    box-shadow:
      0 10px 22px -5px rgba(60, 50, 40, 0.15),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(185, 172, 155, 0.2);
    display:flex; gap:16px; border: 1px solid rgba(255, 255, 255, 0.9);
  }
  .map-legend span{ display:flex; align-items:center; gap:6px; }
  .lgdot{
    width:10px; height:10px; border-radius:50%;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.6), inset -1px -1px 2px rgba(0,0,0,0.2);
  }

  /* ===== TRACK PROGRESS VIEW (Clay Timeline) ===== */
  .track-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
  .backlink{
    color:var(--green-dk); font-size:13.5px; font-weight:800; cursor:pointer;
    margin-bottom:14px; display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; background:var(--green-lt); border-radius:var(--clay-pill-radius);
    box-shadow: 0 4px 10px rgba(31,122,77,0.15), inset 1.5px 1.5px 3px #fff, inset -1.5px -1.5px 3px rgba(31,122,77,0.12);
    transition: all .2s ease;
  }
  .backlink:hover{ transform: translateY(-2px); }

  .track-banner{
    display:flex; align-items:center; justify-content:space-between;
    background: linear-gradient(135deg, #fef7ec, #faeccd);
    border: 1.5px solid #ebd39f;
    padding:16px 22px; border-radius:18px; margin-bottom:24px; flex-wrap:wrap; gap:12px;
    box-shadow:
      0 10px 22px -6px rgba(201, 146, 43, 0.18),
      inset 2.5px 2.5px 5px rgba(255, 255, 255, 0.9),
      inset -2.5px -2.5px 5px rgba(201, 146, 43, 0.15);
  }
  .ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
  @media (max-width:700px){ .ba-grid{ grid-template-columns:1fr; } }
  .ba-box{
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px; overflow:hidden; background:var(--card);
    box-shadow: var(--clay-shadow-card);
  }
  .ba-box img{ width:100%; height:200px; object-fit:cover; display:block; }
  .ba-empty{
    height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; color:var(--muted); background:var(--surface); font-weight:600;
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.06), inset -2px -2px 6px #fff;
  }
  .ba-label{ padding:11px 16px; font-size:13px; font-weight:800; border-top:1px solid var(--line); color:var(--muted); }

  .timeline{ list-style:none; margin:0; padding:0; position:relative; }
  .timeline li{ position:relative; padding:0 0 28px 44px; }
  .timeline li:last-child{ padding-bottom:0; }
  .timeline li::before{ content:""; position:absolute; left:13px; top:28px; bottom:0; width:3px; background:var(--line); border-radius:2px; }
  .timeline li:last-child::before{ display:none; }
  .tdot{
    position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.15),
      inset 2px 2px 4px rgba(255, 255, 255, 0.65),
      inset -2px -2px 4px rgba(0, 0, 0, 0.2);
  }
  .tdot.done{ background: linear-gradient(145deg, #248b57, #155e3a); color:#fff; }
  .tdot.active{ background: linear-gradient(145deg, #e8a93a, #b57e1b); color:#fff; animation:pulse2 1.6s infinite; }
  .tdot.pending{
    background:var(--line); color:var(--muted);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1), inset -2px -2px 4px #fff;
  }
  @keyframes pulse2{ 0%{box-shadow:0 0 0 0 rgba(201,146,43,.6);} 70%{box-shadow:0 0 0 10px rgba(201,146,43,0);} 100%{box-shadow:0 0 0 0 rgba(201,146,43,0);} }
  .timeline h4{ margin:0 0 4px; font-size:15px; font-weight:800; }
  .timeline .ts{ font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:600; }
  .timeline .note{
    font-size:13px; color:var(--muted); background:var(--surface);
    border-radius:12px; padding:9px 14px; margin-top:8px; display:inline-block; font-weight:500;
    box-shadow: inset 1.5px 1.5px 3px rgba(0,0,0,0.06), inset -1.5px -1.5px 3px #fff;
  }
  .timeline .pending-lbl{ color:var(--muted); font-style:italic; font-size:13px; font-weight:500; }

  .comment{ display:flex; gap:12px; margin-bottom:16px; }
  .avatar{
    width:36px; height:36px; border-radius:50%;
    background: linear-gradient(145deg, #e4f4ea, #c8e8d3);
    color:var(--green-dk); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px; flex-shrink:0;
    box-shadow:
      0 4px 8px rgba(0,0,0,0.08),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(31,122,77,0.15);
  }
  .comment-body{
    background:var(--surface); border-radius:16px; padding:12px 16px; flex:1;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
      0 4px 10px -2px rgba(60, 50, 40, 0.06),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(185, 172, 155, 0.18);
  }
  .comment-body .cname{ font-weight:800; font-size:13.5px; display:flex; justify-content:space-between; }
  .comment-body .cname span{ font-weight:500; color:var(--muted); font-size:11.5px; }
  .comment-body p{ margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); font-weight:500; }
  .comment-input{ display:flex; gap:10px; margin-top:16px; }
  .comment-input textarea{
    flex:1; border: none; border-radius:14px; padding:12px 14px;
    font-family:var(--font); font-size:13.5px; resize:vertical; min-height:48px;
    background: var(--surface);
    box-shadow: var(--clay-shadow-inset);
    outline: none;
  }

  /* ===== AUTHORITY DASHBOARD (Clay Analytics) ===== */
  .kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px; }
  @media (max-width:820px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } }
  .kpi{
    background:var(--card);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px; padding:18px 20px;
    box-shadow: var(--clay-shadow-card);
    transition: all .2s ease;
  }
  .kpi:hover{ transform: translateY(-3px); }
  .kpi .num{ font-size:32px; font-weight:800; letter-spacing:-0.5px; }
  .kpi .lbl{ font-size:12.5px; color:var(--muted); margin-top:4px; font-weight:600; }
  .kpi.alert .num{ color:var(--red); }

  .dash-grid{ display:grid; grid-template-columns:1.35fr 0.95fr; gap:24px; }
  @media (max-width:900px){ .dash-grid{ grid-template-columns:1fr; } }
  .ward-bar-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .ward-bar-row .wname{ width:85px; font-size:13px; font-weight:700; flex-shrink:0; }
  .ward-bar-track{
    flex:1; height:16px; background:#e5dfd3; border-radius:999px; overflow:hidden;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.12), inset -1.5px -1.5px 3px #ffffff;
    padding: 2px;
  }
  .ward-bar-fill{
    height:100%; border-radius:999px;
    box-shadow: inset 1.5px 1.5px 3px rgba(255,255,255,0.6), inset -1.5px -1.5px 3px rgba(0,0,0,0.25);
  }
  .ward-bar-row .wval{ width:100px; font-size:11.5px; color:var(--muted); text-align:right; font-weight:700; text-transform:capitalize; }

  .queue-item{
    display:flex; align-items:center; gap:14px; padding:12px 14px;
    margin-bottom:10px; background:#faf8f5; border-radius:16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
      0 4px 8px rgba(60, 50, 40, 0.06),
      inset 1.5px 1.5px 3px #ffffff,
      inset -1.5px -1.5px 3px rgba(185, 172, 155, 0.15);
    transition: all .2s ease;
  }
  .queue-item:last-child{ margin-bottom:0; }
  .rank{ font-size:20px; font-weight:800; width:28px; text-align:center; color:var(--muted); flex-shrink:0; }
  .queue-item.flagged .rank{ color:var(--amber); }
  .qmeta{ flex:1 1 0; min-width:0; }
  .qmeta strong{ display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .qmeta span{ font-size:11.5px; color:var(--muted); font-weight:500; }
  .sev-bar{
    width:64px; height:8px; background:#e5dfd3; border-radius:999px; overflow:hidden; flex-shrink:0;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
  }
  .sev-fill{ height:100%; border-radius:999px; }
  .qactions{ display:flex; gap:8px; flex-shrink:0; }
  .qactions button{
    border: 1px solid rgba(255, 255, 255, 0.9);
    background:var(--card); font-size:11px; padding:6px 10px; border-radius:10px;
    cursor:pointer; font-weight:800;
    box-shadow: var(--clay-shadow-btn-white);
    transition: all .15s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .qactions button:hover{ transform: scale(1.05); }
  .qactions button:active{ transform: scale(0.95); box-shadow: var(--clay-shadow-inset); }
  .qactions button.done{
    background: linear-gradient(145deg, #248b57, #155e3a);
    color:#fff; border-color:transparent;
    box-shadow: var(--clay-shadow-btn-green);
  }

  .sla-banner{
    margin-top:16px;
    background: linear-gradient(135deg, #fce8e6, #f7d5d1);
    border: 1.5px solid #eeaba3; color:var(--red); padding:12px 16px; border-radius:14px;
    font-size:13px; font-weight:800; display:flex; align-items:center; gap:10px;
    box-shadow:
      0 8px 18px -4px rgba(192, 57, 43, 0.15),
      inset 2px 2px 4px #ffffff,
      inset -2px -2px 4px rgba(192, 57, 43, 0.12);
  }
  .intel-note{ font-size:13px; color:var(--muted); line-height:1.75; margin-top:8px; font-weight:500; }
  .intel-note code{
    background:var(--green-lt); color:var(--green-dk); padding:2px 8px; border-radius:8px;
    font-size:11.5px; font-weight:700;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.7), inset -1px -1px 2px rgba(31,122,77,0.12);
  }

  footer{
    text-align:center; padding:26px 20px; color:#888478; font-size:12px; font-weight:600;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: inset 2px 2px 5px #ffffff, inset -2px -2px 5px rgba(185, 172, 155, 0.15);
    margin-top: 20px;
  }
  footer .flinks{ margin-top:8px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
  footer .flinks span{ cursor:pointer; transition: color .15s; }
  footer .flinks span:hover{ color:var(--ink); }

  /* ===== Step 2: shared-data loop additions ===== */
  /* Placeholder shown in place of a photo the assets/ folder doesn't have yet. */
  .thumb-fallback{
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:32px; background:var(--green-lt);
  }
  /* Flags a queue row that just arrived from a citizen submission, for ~3s
     — see .queue-item.new / @keyframes queueHighlightFlat in the step 9
     block below, which now owns this animation's actual styling.

     Queue row layout: row 1 is rank + title/meta + countdown + severity
     bar; the actions group always starts its own row 2 (flex-basis:100%
     forces that unconditionally, so it's deterministic rather than left to
     the flex algorithm's greedy line-packing). An earlier version instead
     left plain flex-wrap:wrap on the whole row with no forced break point
     — since qmeta had no min-width and every other item was
     flex-shrink:0, whether qactions' buttons fit on row 1 depended on the
     exact pixel width of the countdown/confirm text, so the title column
     would unpredictably collapse to a sliver and wrap across 2–3 lines
     depending on the report's data, not the viewport. */
  .queue-item{ flex-wrap:wrap; }
  .qactions{ flex-basis:100%; flex-wrap:wrap; justify-content:flex-end; margin-top:2px; }
  @media (max-width:900px){
    .qactions{ justify-content:flex-start; }
  }
  /* Step 3: explainable priority score breakdown */
  .why-panel{
    display:none; width:100%; margin-top:10px; padding:12px 14px;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    font-family:var(--mono); font-size:12.5px; color:var(--ink);
  }
  .why-panel.show{ display:block; }
  .why-row{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
  .why-total{
    display:flex; justify-content:space-between; gap:12px;
    padding-top:8px; margin-top:6px; border-top:1px dashed var(--line); font-weight:800;
  }

  /* ===== Step 4: offline-first ===== */
  .offline-strip{
    display:flex; align-items:center; gap:10px; margin-bottom:20px;
    padding:12px 18px; border-radius:14px;
    background:var(--amber-lt); color:#8a6416; font-weight:700; font-size:13.5px;
  }
  .demo-tools{ display:none !important; }
  .demo-tools-label{ opacity:0.65; }
  .demo-tools-btn{
    border:none; border-radius:6px; padding:6px 12px; font-family:var(--mono);
    font-weight:700; font-size:11px; cursor:pointer; letter-spacing:0.05em;
  }
  .demo-tools-btn.online{ background:#248b57; color:#fff; }
  .demo-tools-btn.offline{ background:#c0392b; color:#fff; }
  .citizen-ward-map{
    width:100%; height:320px; border-radius:14px; margin-top:10px; z-index:1;
    background:var(--surface, #f2f5f2);
  }
  .ward-map-legend{
    display:flex; gap:16px; margin-top:10px; font-size:12px; font-weight:700; color:var(--muted);
  }
  .ward-map-legend span{ display:flex; align-items:center; gap:6px; }
  .ward-map-legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
  .toast{
    position:fixed; top:20px; left:50%; transform:translateX(-50%);
    background:#1a231f; color:#fff; padding:12px 20px; border-radius:12px;
    font-size:13.5px; font-weight:700; z-index:1000;
    box-shadow:0 12px 26px rgba(0,0,0,0.28);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .toast.show{ opacity:1; }

  /* ===== DBSCAN hotspot overlay ===== */
  .hotspot-circle{
    position:absolute; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle, rgba(224,99,43,0.38), rgba(224,99,43,0.08) 70%, transparent 100%);
    border:1.5px solid rgba(224,99,43,0.55);
    pointer-events:auto; cursor:help; z-index:2;
    animation: hotspotPulse 2.6s ease-in-out infinite;
  }
  @keyframes hotspotPulse{
    0%, 100%{ opacity:0.75; } 50%{ opacity:1; }
  }

  /* ===== AI photo triage (CNN category suggestion) ===== */
  .ai-suggest{
    display:none; align-items:center; gap:8px; margin-top:10px;
    padding:9px 13px; border-radius:12px; font-size:12.5px; font-weight:700;
    background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.5); color:#fff;
  }
  .ai-suggest.show{ display:flex; }
  .ai-suggest .spinner{
    width:13px; height:13px; border-radius:50%; flex-shrink:0;
    border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
    animation: aiSpin 0.7s linear infinite;
  }
  @keyframes aiSpin{ to{ transform:rotate(360deg); } }

  /* ===== Step 5: equity correction toggle ===== */
  .equity-toggle-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom:14px; padding:10px 14px;
    background:#f4f0e6; border-radius:12px;
  }
  .equity-label{
    font-family:var(--mono); font-size:11px; font-weight:800;
    letter-spacing:0.05em; color:var(--ink);
  }
  .equity-btn{
    border:none; border-radius:8px; padding:6px 16px;
    font-family:var(--mono); font-weight:800; font-size:11px;
    letter-spacing:0.05em; cursor:pointer;
    background:#e6e1d5; color:var(--muted);
    transition: all .2s ease;
  }
  .equity-btn.on{
    background: linear-gradient(145deg, #248b57, #155e3a); color:#fff;
  }
  .queue-item{ transition: transform 400ms ease; }

  /* ===== Step 6: live SLA countdown + escalation ===== */
  .sla-countdown{
    font-family:var(--mono); font-size:11px; font-weight:700;
    color:var(--muted); white-space:nowrap; flex-shrink:0; width:104px; text-align:right;
  }
  .sla-countdown.critical{ color:var(--red); font-weight:800; }
  .queue-item.critical{ background:var(--red-lt); border-color:var(--red); }

  /* ===== Step 7: language switcher ===== */
  .lang-switch{ position:relative; }
  .lang-menu{
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60;
    background:var(--card); border:1.5px solid rgba(255,255,255,0.9); border-radius:14px;
    padding:6px; min-width:150px; box-shadow: var(--clay-shadow-card);
    flex-direction:column; gap:2px;
  }
  .lang-menu.show{ display:flex; }
  .lang-menu button{
    border:none; background:transparent; text-align:left; padding:9px 12px;
    border-radius:10px; font-size:13.5px; font-weight:700; color:var(--ink);
    cursor:pointer; font-family:var(--font);
  }
  .lang-menu button:hover{ background:var(--green-lt); color:var(--green-dk); }
  .lang-menu button.active{ background:var(--green-lt); color:var(--green-dk); }

  /* ===== Notifications + profile dropdowns ===== */
  .notif-menu{ min-width:280px; max-height:320px; overflow-y:auto; }
  .notif-empty{ padding:14px 12px; color:var(--muted); font-size:13px; text-align:center; }
  .notif-item{ display:flex; gap:10px; padding:9px 10px; border-radius:10px; }
  .notif-item:hover{ background:var(--green-lt); }
  .notif-icon{ font-size:16px; flex-shrink:0; }
  .notif-text{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
  .notif-time{ font-size:11px; color:var(--muted); margin-top:2px; }
  .profile-menu{ min-width:230px; padding:12px; }
  .profile-head{ font-size:14.5px; font-weight:800; color:var(--ink); }
  .profile-sub{ font-size:12px; color:var(--muted); margin:2px 0 10px; }
  .profile-stat{ font-size:12px; color:var(--muted); margin-bottom:10px; }
  .profile-menu button{
    width:100%; text-align:left; border:none; background:var(--green-lt); color:var(--green-dk);
    border-radius:10px; padding:9px 12px; font-size:13px; font-weight:700; cursor:pointer;
    margin-bottom:6px; font-family:var(--font);
  }
  .profile-menu button:last-child{ margin-bottom:0; background:var(--red-lt); color:var(--red); }
  .profile-menu button:hover{ filter:brightness(0.97); }

  /* ===== Step 8: routing banner + duplicate thumbnail ===== */
  .dupe-thumb{ width:40px; height:40px; object-fit:cover; border-radius:10px; flex-shrink:0; }
  .routing-banner{
    display:none; align-items:center; justify-content:center; gap:8px;
    margin-top:14px; padding:11px 14px; border-radius:14px;
    background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.45);
    color:#fff; font-size:13px; font-weight:700; text-align:center;
  }
  .routing-banner.show{ display:flex; }

  /* ===== Report visibility (public/private) toggle ===== */
  .photo-relevance-warning{
    display:none; align-items:flex-start; gap:8px; margin-top:10px;
    padding:10px 12px; border-radius:12px; font-size:12.5px; line-height:1.4;
    background:var(--amber-lt); color:#8a6416; border:1px solid var(--amber);
    font-weight:600;
  }
  .visibility-row{ display:flex; gap:10px; margin-top:14px; }
  .visibility-chip{
    flex:1; display:flex; align-items:center; gap:10px; text-align:left;
    padding:10px 12px; border-radius:14px; border:1.5px solid var(--line);
    background:var(--surface, #fff); cursor:pointer; font-family:var(--font);
    transition:border-color .15s ease, background .15s ease;
  }
  .visibility-chip .vis-ico{ font-size:18px; flex-shrink:0; }
  .visibility-chip .vis-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .visibility-chip strong{ font-size:13px; color:var(--ink); }
  .visibility-chip small{ font-size:11px; color:var(--muted); font-weight:600; line-height:1.3; }
  .visibility-chip.active{ border-color:var(--green); background:var(--green-lt); }
  .visibility-chip.active strong{ color:var(--green-dk); }
  .visibility-chip:hover{ border-color:var(--green); }
  .visibility-badge{
    display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800;
    padding:3px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.02em;
  }
  .visibility-badge.is-public{ background:var(--green-lt); color:var(--green-dk); }
  .visibility-badge.is-private{ background:rgba(0,0,0,0.06); color:var(--muted); }

  /* ===== Generic modal (Team Builder, Investor intro, Policy, Language, Badges) =====
     .modal-overlay/.modal-content/.modal-header/.modal-body/.modal-close were used
     across several views but never had a CSS definition — they rendered as unstyled
     inline blocks in normal document flow instead of centered overlays. */
  .modal-overlay{
    position:fixed; inset:0; z-index:2000; display:none;
    align-items:center; justify-content:center; padding:20px;
    background:rgba(20,24,20,0.55); backdrop-filter:blur(2px);
  }
  .modal-content{
    background:var(--card, #fff); border-radius:20px; width:100%; max-width:520px;
    max-height:88vh; overflow-y:auto; box-shadow:0 24px 60px rgba(0,0,0,0.3);
    padding:22px;
  }
  .modal-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:16px;
  }
  .modal-header h2, .modal-header h3{ margin:0; font-size:18px; font-weight:800; color:var(--ink); }
  .modal-close{
    border:none; background:rgba(0,0,0,0.06); color:var(--ink); width:30px; height:30px;
    border-radius:50%; font-size:15px; cursor:pointer; flex-shrink:0; line-height:1;
  }
  .modal-close:hover{ background:rgba(0,0,0,0.12); }
  .modal-body{ font-size:14px; color:var(--ink); }
  .modal-footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
  @media (max-width:640px){
    .modal-content{ max-width:100%; max-height:92vh; padding:18px; }
  }

  /* ===== Step 9: Authority "diagnostic instrument" design pass =====
     DESIGN.md: 0px corners everywhere, zero shadows, hairline borders only,
     mono for all machine data, dense padding. Scoped to #view-dash for
     classes shared with citizen views (.card, .fchip, .dash-grid, .sub);
     classes exclusive to the queue/KPI/ward UI are restyled directly. */
  :root{
    --a-ink:#191c1e; --a-ink-soft:#45464d; --a-line:#d8dadc;
    --a-surface:#f7f9fb; --a-card:#ffffff; --a-hover:#f2f4f6;
    --s-critical:#ba1a1a; --s-critical-bg:#ffdad6;
    --s-warn:#a86800; --s-warn-bg:#fff2d6;
    --s-ok:#248b57; --s-ok-bg:#e4f4ec;
    --s-idle:#76777d; --s-idle-bg:#eceef0;
  }
  /* The Authority dashboard is a deliberately distinct "diagnostic
     instrument" design system (DESIGN.md: flat, hairline-bordered, mono
     data) with its own a- and s-prefixed token set, separate from the
     citizen UI's clay tokens — so it needs its own dark variants rather
     than inheriting the ones above. */
  :root[data-theme="dark"]{
    --a-ink:#e9ecee; --a-ink-soft:#a3a9ad; --a-line:#33383b;
    --a-surface:#15181a; --a-card:#1c2022; --a-hover:#24292c;
    --s-critical:#ff6b5e; --s-critical-bg:#3a1714;
    --s-warn:#e0a83c; --s-warn-bg:#332708;
    --s-ok:#3ddc84; --s-ok-bg:#0f2b1e;
    --s-idle:#8b9195; --s-idle-bg:#212528;
  }

  #view-dash{ background:var(--a-surface); border-radius:0; }
  #view-dash .pagehead-row h1{ color:var(--a-ink); }
  #view-dash .sub{
    font-family:var(--mono); font-size:11px; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--a-ink-soft);
  }
  #view-dash .fchip{
    border-radius:0; border:1px solid var(--a-line); background:var(--a-card);
    color:var(--a-ink-soft); box-shadow:none; font-family:var(--mono);
    font-size:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700;
  }
  #view-dash .fchip:hover{ background:var(--a-hover); transform:none; color:var(--a-ink); }
  #view-dash .fchip.active{ background:var(--a-ink); color:#fff; box-shadow:none; transform:none; }
  #view-dash .card{
    border-radius:0; box-shadow:none; border:1px solid var(--a-line);
    background:var(--a-card);
  }
  #view-dash .card h3{
    font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--a-ink-soft); border-bottom:1px solid var(--a-line);
    padding-bottom:10px; margin-bottom:14px;
  }
  #view-dash .dash-grid{ gap:16px; }

  .kpi{
    border-radius:0; box-shadow:none; border:1px solid var(--a-line);
    background:var(--a-card);
  }
  .kpi:hover{ transform:none; background:var(--a-hover); }
  .kpi .num{ font-family:var(--mono); color:var(--a-ink); }
  .kpi .lbl{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--a-ink-soft); }
  .kpi.alert .num{ color:var(--s-critical); }

  .queue-item{
    border-radius:0; box-shadow:none; background:var(--a-card);
    border:1px solid var(--a-line); border-left:4px solid var(--s-idle);
  }
  .queue-item:hover{ background:var(--a-hover); }
  .queue-item.critical{ border-left-color:var(--s-critical); background:var(--s-critical-bg); }
  .queue-item.new{ animation:queueHighlightFlat 3s ease; }
  @keyframes queueHighlightFlat{
    0%{ background:var(--s-ok-bg); box-shadow:none; }
    100%{ background:var(--a-card); box-shadow:none; }
  }
  .rank{ font-family:var(--mono); color:var(--a-ink-soft); }
  .qmeta strong{ color:var(--a-ink); }
  .qmeta span{ font-family:var(--mono); font-size:10.5px; color:var(--a-ink-soft); }
  .qactions button{
    border-radius:0; box-shadow:none; background:transparent; border:none;
    font-family:var(--mono); font-size:10.5px; color:var(--a-ink-soft);
    letter-spacing:0.02em; padding:6px 4px;
  }
  .qactions button::before{ content:'[ '; }
  .qactions button::after{ content:' ]'; }
  .qactions button:hover{ color:var(--a-ink); transform:none; }
  .qactions button.done{ background:transparent; color:var(--s-ok); box-shadow:none; }

  .ward-bar-track{ border-radius:0; box-shadow:none; background:var(--a-line); }
  .ward-bar-fill{ border-radius:0; box-shadow:none; }
  .ward-bar-row .wname, .ward-bar-row .wval{ font-family:var(--mono); font-size:10.5px; color:var(--a-ink-soft); }

  .sev-bar{ border-radius:0; box-shadow:none; background:var(--a-line); }
  .sev-fill{ border-radius:0; }

  .sla-banner{
    border-radius:0; box-shadow:none;
    background:var(--s-critical-bg); border:1px solid var(--s-critical); color:var(--s-critical);
  }

  .equity-toggle-row{ border-radius:0; background:var(--a-surface); border:1px solid var(--a-line); }
  .equity-btn{ border-radius:0; }
  .equity-btn.on{ background:var(--s-ok); }

  .why-panel{ border-radius:0; border-color:var(--a-line); }
  .why-total{ border-top-color:var(--a-line); }

  .intel-note{ font-family:var(--mono); font-size:11.5px; }
  .intel-note code{ border-radius:0; background:var(--a-surface); border:1px solid var(--a-line); color:var(--a-ink); box-shadow:none; }

  /* ===== Authority dashboard tabs ===== */
  .dash-grid.single-col{ grid-template-columns:1fr; }
  .dash-map-canvas{ height:360px; border-radius:0; border:1px solid var(--a-line); cursor:default; }

  /* ===== Prototype sign-in gate ===== */
  .auth-gate{
    position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 35%),
      radial-gradient(circle at 80% 85%, rgba(255,255,255,0.06), transparent 40%),
      linear-gradient(160deg, var(--green-dk), #0f3320 65%, #0a2116);
    padding:24px;
  }
  .auth-card{
    background:var(--card); border-radius:24px; padding:36px 34px; max-width:380px; width:100%;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.4);
  }
  .auth-badge{
    background:var(--amber-lt); color:#8a6416; font-size:11.5px; font-weight:800;
    padding:7px 12px; border-radius:999px; display:inline-block; margin-bottom:16px;
  }
  .auth-card h1{ font-size:24px; margin:0 0 18px; }
  .auth-role-row{ display:flex; gap:8px; margin-bottom:18px; }
  .auth-role-btn{
    flex:1; border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:10px;
    font-weight:800; font-size:13px; cursor:pointer; color:var(--muted);
  }
  .auth-role-btn.active{ background:var(--green-lt); border-color:var(--green); color:var(--green-dk); }
  .auth-card label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin:12px 0 5px; }
  .auth-card input, .auth-card select{
    width:100%; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px;
    font-family:var(--font); box-sizing:border-box;
  }
  .auth-hint{ font-size:12px; color:var(--muted); margin-top:8px; }
  .auth-hint code{ background:var(--green-lt); color:var(--green-dk); padding:2px 6px; border-radius:6px; }
  .auth-error{ font-size:12.5px; color:var(--red); margin-top:8px; font-weight:700; }
  .auth-card .btn{ width:100%; margin-top:16px; }

/* ===== MOBILE DEVICE UI ===== */
.is-mobile .navlinks .n-ico { display: inline-block; font-size: 24px; margin-bottom: 2px; }
.is-mobile .navlinks .n-lbl { font-size: 11px; }
.is-mobile .navlinks a { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; }

@media (max-width: 900px) {
  .navlinks .n-ico { display: inline-block; font-size: 24px; margin-bottom: 2px; }
  .navlinks .n-lbl { font-size: 11px; }
  .navlinks a { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; }
  
  .topbar { padding: 12px 16px; margin-bottom: 10px; }
  /* backdrop-filter on an ancestor makes it the containing block for any
     position:fixed descendant (a real CSS quirk, not a bug in the fixed
     rule below) — without this, the "fixed to viewport bottom" nav below
     anchors to .topbar's own edge instead, landing back up near the top. */
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* With .navlinks and .btn-report taken out of flow below (fixed bottom
     nav / FAB), .nav-right's five 48px icon buttons are the only thing left
     competing with .brand for the topbar's width. At the 375px demo device
     width they don't fit on one line and were overflowing both the topbar
     card and the page itself (real horizontal scroll on the one width
     DESIGN.md requires citizen views to survive). Wrapping keeps every
     button at its full 48px touch target instead of shrinking them. */
  .nav-right{ flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

  /* Bottom Navigation */
  .navlinks {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    z-index: 100;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
  }
  
  /* Convert Report Issue button to FAB */
  .btn-report {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    box-shadow: 0 8px 24px rgba(31, 122, 77, 0.4);
  }
  .btn-report::after {
    content: '+';
    font-size: 32px;
    color: white;
  }
  
  /* Add padding to body so bottom nav doesn't cover content */
  body { padding-bottom: 80px; }
  
  /* Hide text labels on smallest screens to save space */
  @media (max-width: 400px) {
    .navlinks .n-lbl { display: none; }
  }
}


.is-mobile .navlinks {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
}
.is-mobile .btn-report {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  box-shadow: 0 8px 24px rgba(31, 122, 77, 0.4);
}
.is-mobile .btn-report::after {
  content: '+';
  font-size: 32px;
  color: white;
}
.is-mobile body { padding-bottom: 80px; }

/* ============================================================
   PORTFOLIO & PROJECT SHOWCASE — Rich Redesign
   ============================================================ */

/* ---- Hero card ---- */
#view-portfolio { padding-bottom: 40px; }

.portfolio-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  position: relative;
  border-radius: 28px;
  padding: 36px 40px;
  margin-bottom: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f1f16 0%, #1a3d28 40%, #1b3060 100%);
  box-shadow:
    0 30px 60px -10px rgba(15,31,22,0.55),
    0 10px 24px -5px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Glowing orbs in background */
.portfolio-hero::before,
.portfolio-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.portfolio-hero::before {
  width: 320px; height: 320px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(37,99,168,0.35) 0%, transparent 70%);
}
.portfolio-hero::after {
  width: 260px; height: 260px;
  bottom: -80px; left: 20%;
  background: radial-gradient(circle, rgba(31,122,77,0.3) 0%, transparent 70%);
}

/* Particle grid overlay */
.portfolio-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.portfolio-avatar {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
  border: 2px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  flex-shrink: 0;
  position: relative; z-index: 1;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    0 0 0 6px rgba(255,255,255,0.05),
    inset 2px 2px 8px rgba(255,255,255,0.2);
  animation: avatarPulse 4s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.05), inset 2px 2px 8px rgba(255,255,255,0.2); }
  50%       { box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 12px rgba(255,255,255,0.06), inset 2px 2px 8px rgba(255,255,255,0.2); }
}

.portfolio-hero-info { flex: 1; min-width: 200px; position: relative; z-index: 1; }

.portfolio-name {
  font-size: 26px; font-weight: 900; color: #fff;
  letter-spacing: -0.6px; margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.portfolio-role-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 14px;
  margin-bottom: 18px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Reputation progress */
.portfolio-rep-bar-wrap {
  display: flex; flex-direction: column; gap: 6px;
}
.portfolio-rep-top-row {
  display: flex; align-items: center; justify-content: space-between;
}
.portfolio-rep-label {
  font-size: 10px; font-weight: 800;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 1px;
}
.portfolio-rep-score {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.portfolio-rep-bar-outer {
  width: 100%; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.portfolio-rep-bar-inner {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #16a34a, #38bdf8);
  background-size: 200% 100%;
  animation: shimmerBar 3s ease-in-out infinite;
  transition: width 0.9s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 0 10px rgba(34,197,94,0.6);
}
@keyframes shimmerBar {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.portfolio-level-badge {
  padding: 12px 22px;
  border-radius: 20px;
  font-size: 13px; font-weight: 900;
  color: #fff;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  position: relative; z-index: 1;
  transition: background 0.5s, transform 0.2s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.portfolio-level-badge:hover { transform: scale(1.06); }

/* ---- Stats row ---- */
.portfolio-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 640px) {
  .portfolio-stats-row { grid-template-columns: repeat(2, 1fr); }
  .portfolio-hero { padding: 24px 20px; }
  .portfolio-name { font-size: 20px; }
}

.portfolio-stat-card {
  background: var(--card);
  border-radius: 20px;
  padding: 22px 16px 18px;
  text-align: center;
  box-shadow: var(--clay-shadow-card);
  transition: transform 0.2s cubic-bezier(.22,.68,0,1.3), box-shadow 0.2s;
  cursor: default;
  position: relative; overflow: hidden;
}
.portfolio-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--green), #38d996);
  opacity: 0;
  transition: opacity 0.2s;
}
.portfolio-stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--clay-shadow-card-hover);
}
.portfolio-stat-card:hover::before { opacity: 1; }

.portfolio-stat-emoji {
  font-size: 26px; margin-bottom: 8px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.portfolio-stat-n {
  font-size: 34px; font-weight: 900;
  color: var(--ink);
  line-height: 1; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--green-dk), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.portfolio-stat-l {
  font-size: 10.5px; font-weight: 700;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ---- Sections ---- */
.portfolio-section {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--clay-shadow-card);
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.portfolio-section:hover { box-shadow: var(--clay-shadow-card-hover); }

.portfolio-section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1.5px solid var(--line);
  position: relative;
}
/* Colored left accent per section */
.portfolio-section:nth-child(1) .portfolio-section-header { border-left: 4px solid #f97316; }
.portfolio-section:nth-child(2) .portfolio-section-header { border-left: 4px solid #3b82f6; }
.portfolio-section:nth-child(3) .portfolio-section-header { border-left: 4px solid #a855f7; }
.portfolio-section:nth-child(4) .portfolio-section-header { border-left: 4px solid #ec4899; }

.portfolio-section-icon {
  font-size: 24px;
  width: 44px; height: 44px;
  background: var(--paper);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.8), inset -2px -2px 4px rgba(0,0,0,0.06);
}
.portfolio-section-header h2 {
  font-size: 15px; font-weight: 800;
  color: var(--ink); margin: 0; flex: 1;
  letter-spacing: -0.2px;
}
.portfolio-section-count {
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  background: var(--paper);
  border-radius: 999px;
  padding: 2px 10px;
  margin-right: 4px;
}
.portfolio-add-btn {
  display: flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--green), var(--green-dk));
  color: #fff;
  border: none; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  padding: 7px 16px; cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
  box-shadow: 0 4px 12px rgba(31,122,77,0.35);
  letter-spacing: 0.3px;
}
.portfolio-add-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(31,122,77,0.45);
}

/* ---- Item cards ---- */
.portfolio-items {
  display: flex; flex-direction: column;
  padding: 16px 20px 20px;
  gap: 12px;
}
.portfolio-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px;
  text-align: center; padding: 32px 20px;
}
.portfolio-empty::before {
  content: '✦';
  font-size: 28px; opacity: 0.2;
}

.portfolio-item-card {
  background: linear-gradient(135deg, var(--paper) 0%, #fff 100%);
  border-radius: 16px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  transition: transform 0.18s cubic-bezier(.22,.68,0,1.2), box-shadow 0.18s, border-color 0.18s;
  animation: pItemIn 0.35s cubic-bezier(.22,.68,0,1.2) both;
  position: relative; overflow: hidden;
}
.portfolio-item-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--green), #38d996);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity 0.18s;
}
.portfolio-item-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), -4px 0 0 var(--green);
  border-color: rgba(31,122,77,0.25);
}
.portfolio-item-card:hover::before { opacity: 1; }
@keyframes pItemIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.portfolio-item-top { display: flex; align-items: flex-start; gap: 12px; }
.portfolio-item-icon {
  font-size: 22px; line-height: 1; flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--green-lt);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.portfolio-item-info { flex: 1; min-width: 0; }
.portfolio-item-title {
  font-size: 14px; font-weight: 800; color: var(--ink);
  margin-bottom: 3px; letter-spacing: -0.2px;
}
.portfolio-item-date {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.portfolio-item-date::before { content: '📅'; font-size: 10px; }
.portfolio-item-pts {
  font-size: 11px; font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--green), #16a34a);
  border-radius: 999px;
  padding: 3px 12px;
  flex-shrink: 0;
  align-self: flex-start;
  box-shadow: 0 3px 8px rgba(31,122,77,0.3);
  letter-spacing: 0.3px;
}
.portfolio-item-del {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--muted);
  width: 28px; height: 28px;
  border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.12s, background 0.12s;
}
.portfolio-item-del:hover { color: var(--red); background: var(--red-lt); }

.portfolio-item-desc {
  font-size: 13px; color: var(--muted);
  margin: 10px 0 0 52px; line-height: 1.6;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.portfolio-item-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 0 52px;
}
.p-tag {
  font-size: 10.5px; font-weight: 700;
  background: var(--blue-lt); color: var(--blue);
  border-radius: 999px; padding: 2px 10px;
  letter-spacing: 0.3px;
}
.portfolio-item-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 10px 0 0 52px;
  font-size: 12px; font-weight: 700; color: var(--blue);
  text-decoration: none;
  padding: 3px 12px;
  background: var(--blue-lt);
  border-radius: 999px;
  transition: background 0.14s;
}
.portfolio-item-link:hover { background: #bfdbfe; }

/* ---- Add Modal ---- */
.portfolio-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(15,20,18,0.6);
  backdrop-filter: blur(8px) saturate(1.2);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.portfolio-modal {
  background: var(--card);
  border-radius: 28px;
  box-shadow:
    var(--clay-shadow-card),
    0 40px 80px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.5) inset;
  padding: 32px 32px 28px;
  width: 100%; max-width: 500px;
  position: relative;
  animation: modalSlideIn 0.3s cubic-bezier(.22,.68,0,1.25);
}
.portfolio-modal::before {
  content: '';
  position: absolute; top: 0; left: 32px; right: 32px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--green), #38bdf8, var(--green));
  background-size: 200%;
  animation: shimmerBar 3s linear infinite;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.88) translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.portfolio-modal h3 {
  font-size: 20px; font-weight: 900; color: var(--ink);
  margin: 8px 0 22px; padding-right: 32px;
  letter-spacing: -0.4px;
}
.portfolio-modal .form-group { margin-bottom: 14px; }
.portfolio-modal label {
  display: block; font-size: 11px; font-weight: 800;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.7px; margin-bottom: 6px;
}
.portfolio-modal input,
.portfolio-modal textarea,
.portfolio-modal select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--paper);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--clay-shadow-inset);
}
.portfolio-modal input:focus,
.portfolio-modal textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31,122,77,0.12), var(--clay-shadow-inset);
}
.portfolio-modal-close {
  position: absolute; top: 20px; right: 20px;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 50%; width: 34px; height: 34px;
  cursor: pointer; font-size: 14px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, transform 0.12s;
  box-shadow: var(--clay-shadow-btn-white);
}
.portfolio-modal-close:hover {
  background: var(--red-lt); color: var(--red);
  transform: rotate(90deg);
}

/* ============================================================
   COMPLETED PROJECTS — Rich Redesign
   ============================================================ */

/* Page header */
#view-resolved .pagehead-row h1 {
  background: linear-gradient(135deg, var(--green-dk), #2563a8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Empty state */
.resolved-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 60px 20px; text-align: center;
}
.resolved-empty-icon { font-size: 56px; opacity: 0.4; }
.resolved-empty-text { font-size: 15px; color: var(--muted); font-weight: 500; }

/* Gallery grid */
.resolved-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
  margin-top: 8px;
  align-items: start;
}
@media (max-width: 700px) {
  .resolved-gallery-grid { grid-template-columns: 1fr; }
}

/* Card */
.resolved-card {
  background: var(--card);
  border-radius: 24px;
  padding: 0;
  box-shadow: var(--clay-shadow-card);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.22,.68,0,1.2), box-shadow 0.22s;
  animation: resolvedCardIn 0.4s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes resolvedCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.resolved-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--clay-shadow-card-hover), 0 20px 48px rgba(0,0,0,0.12);
}

/* Before/After split — now full-width at top */
.b-a-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; height: 190px;
  border-radius: 0; overflow: hidden;
  position: relative;
}
.b-a-split::after {
  content: '↔';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3;
  background: rgba(0,0,0,0.65);
  color: #fff; font-size: 14px; font-weight: 800;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.b-a-box {
  position: relative; overflow: hidden;
  background: var(--line);
}
.b-a-box img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s;
}
.resolved-card:hover .b-a-box img { transform: scale(1.05); }
.b-a-label {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.55);
  color: white; font-size: 10px; font-weight: 800;
  padding: 3px 10px; border-radius: 8px;
  backdrop-filter: blur(6px);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ba-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; color: var(--muted); font-size: 12px;
  background: var(--paper);
}
.ba-empty span { font-size: 11px; }

/* Card body */
.resolved-card-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.resolved-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.resolved-card-title {
  font-weight: 800; color: var(--ink);
  font-size: 15px; margin: 0 0 4px;
  letter-spacing: -0.2px; line-height: 1.3;
}
.resolved-card-meta {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
}
.resolved-card-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #15803d;
  padding: 4px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(21,128,61,0.2);
  white-space: nowrap;
}
.resolved-card-badge::before { content: '✓'; font-size: 10px; }

/* Stats bar */
.resolved-card-stats {
  display: flex; gap: 0;
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--line);
}
.resolved-stat-item {
  flex: 1; padding: 10px 8px; text-align: center;
  border-right: 1px solid var(--line);
}
.resolved-stat-item:last-child { border-right: none; }
.resolved-stat-val {
  font-size: 13px; font-weight: 900; color: var(--ink);
  display: block; margin-bottom: 2px;
}
.resolved-stat-key {
  font-size: 9.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Assignee chip */
.resolved-assignee {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
}
.resolved-assignee-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-lt), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--blue);
  font-weight: 800; flex-shrink: 0;
}

/* ===== TEAM BUILDER ===== */
.tb-layout {
  display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px;
}
.tb-challenges-col {
  flex: 1; min-width: 300px;
}
.tb-teams-col {
  flex: 2; min-width: 400px; display: flex; flex-direction: column; gap: 16px;
}
.tb-section-title {
  font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 16px; display:flex; align-items:center; gap:8px;
}
.tb-challenge-card {
  background: var(--card); border-radius: var(--clay-card-radius); padding: 16px;
  box-shadow: var(--clay-shadow-card); margin-bottom: 12px; cursor: pointer;
  transition: all 0.2s ease; border-left: 4px solid transparent;
}
.tb-challenge-card:hover {
  transform: translateY(-2px); box-shadow: var(--clay-shadow-card-hover);
}
.tb-challenge-card.active {
  border-left-color: var(--green); background: var(--green-lt);
}
.tb-challenge-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
.tb-challenge-domain { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--green-dk); background:var(--green-lt); border-radius:999px; padding:3px 9px; margin-bottom:8px; }
.tb-challenge-origin { font-size:11.5px; color:var(--green-dk); background:var(--green-lt); border-radius:8px; padding:5px 8px; margin-bottom:8px; font-family:var(--mono); }
.tb-challenge-desc { font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.tb-challenge-meta { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); margin-bottom:8px; }
.tb-challenge-stats { font-size: 12px; font-weight: 700; color: var(--ink); }

.tb-teams-header { display: flex; justify-content: space-between; align-items: flex-start; }
.tb-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tb-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; background: rgba(0,0,0,0.02); border-radius: 12px; border: 1px dashed var(--line); }

.tb-team-card {
  background: var(--card); border-radius: 16px; padding: 16px;
  box-shadow: var(--clay-shadow-card);
}
.tb-team-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tb-team-name { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.tb-team-status { font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; }
.tb-team-status.recruiting { background: var(--amber-lt); color: #8a6416; }
.tb-team-status.full { background: var(--green-lt); color: var(--green-dk); }

.tb-team-members { display: flex; flex-direction: column; gap: 8px; }
.tb-member-slot {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
  border-radius: 10px; font-size: 13px;
}
.tb-member-slot.filled { background: var(--surface); border: 1px solid var(--line); }
.tb-member-slot.empty { background: rgba(0,0,0,0.02); border: 1px dashed var(--line); }
.tb-member-info { display: flex; flex-direction: column; }
.tb-member-name { font-weight: 700; color: var(--ink); }
.tb-member-uni { font-size: 11px; color: var(--muted); margin-top:2px; }
.tb-member-role { font-weight: 800; font-size: 11px; text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,0.04); padding: 3px 8px; border-radius: 6px; }
.tb-empty-slot { color: var(--muted); font-style: italic; }

@media (max-width: 768px) {
  .tb-layout { flex-direction: column; }
  .tb-teams-col { min-width: 100%; }
}

/* ===== INVESTOR CONNECT PORTAL ===== */
.inv-role-badge {
  display: flex; align-items: center; gap: 6px; background: var(--green-lt); color: var(--green-dk);
  font-weight: 800; font-size: 12.5px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(46,125,50,0.2);
}
.inv-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px;
}
.inv-filter-label {
  font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px;
}
.inv-main-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 24px;
}
.inv-section-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.inv-section-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.inv-count-pill {
  font-size: 12px; font-weight: 700; color: var(--muted); background: rgba(0,0,0,0.04); padding: 4px 10px; border-radius: 99px;
}
.inv-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.inv-card {
  background: var(--card); border-radius: 18px; padding: 18px; box-shadow: var(--clay-shadow-card);
  display: flex; flex-direction: column; justify-content: space-between; transition: all 0.2s ease;
  border: 1px solid var(--line);
}
.inv-card:hover {
  transform: translateY(-2px); box-shadow: var(--clay-shadow-card-hover);
}
.inv-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.inv-card-head-info { flex: 1 1 auto; min-width: 0; }
.inv-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-name { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.inv-verified { font-size: 10.5px; font-weight: 800; color: #1565c0; background: #e3f2fd; padding: 2px 6px; border-radius: 4px; }
.inv-type-pill { font-size: 10.5px; font-weight: 800; color: var(--green-dk); background: var(--green-lt); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .02em; }
.inv-firm { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.inv-ticket-pill {
  font-size: 11.5px; font-weight: 800; color: var(--green-dk); background: var(--green-lt);
  padding: 4px 8px; border-radius: 8px; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.inv-bio { font-size: 13px; color: var(--ink); line-height: 1.45; margin: 8px 0 12px; }
.inv-meta-row { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap; }
.inv-domains-box { margin-bottom: 16px; }
.inv-domains-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.inv-tags-flex { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-tag {
  font-size: 11px; font-weight: 700; background: rgba(0,0,0,0.04); color: var(--ink); padding: 3px 8px; border-radius: 6px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-card-foot { margin-top: auto; }

.inv-side-col { display: flex; flex-direction: column; gap: 20px; }
.inv-pref-card, .inv-intros-card, .inv-solutions-card {
  padding: 16px; border-radius: 16px; background: var(--card); box-shadow: var(--clay-shadow-card);
}
.inv-domain-check-grid { display: flex; flex-direction: column; gap: 8px; }
.inv-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.inv-intros-list { display: flex; flex-direction: column; gap: 10px; }
.inv-intro-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px;
}
.inv-intro-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.inv-intro-meta { font-size: 11.5px; color: var(--muted); }
.inv-intro-note { font-size: 12px; font-style: italic; color: var(--ink); margin: 6px 0; background: rgba(0,0,0,0.02); padding: 6px 8px; border-radius: 6px; }
.inv-intro-time { font-size: 10.5px; color: var(--muted); font-family: var(--mono); }

.inv-solutions-list { display: flex; flex-direction: column; gap: 12px; }
.inv-sol-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface);
}
.inv-sol-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.inv-sol-title { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.inv-sol-stage { font-size: 10.5px; font-weight: 800; color: #8a6416; background: var(--amber-lt); padding: 2px 6px; border-radius: 4px; }
.inv-sol-team { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.inv-sol-summary { font-size: 12px; color: var(--ink); line-height: 1.4; }

.inv-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 12px; }

@media (max-width: 900px) {
  .inv-main-grid { grid-template-columns: 1fr; }
}

/* ===== GOVERNMENT POLICY INSIGHT REPORTS ===== */
.pol-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px;
}
.pol-filter-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.pol-matrix-card { padding: 18px; border-radius: 18px; background: var(--card); box-shadow: var(--clay-shadow-card); }
.pol-matrix-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.pol-matrix-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.pol-matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pol-matrix-item {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px;
}
.pol-matrix-item.pol-level-high { border-color: rgba(211,47,47,0.4); background: rgba(211,47,47,0.02); }
.pol-matrix-item.pol-level-med { border-color: rgba(237,108,2,0.4); background: rgba(237,108,2,0.02); }
.pol-matrix-item.pol-level-low { border-color: rgba(46,125,50,0.3); }

.pol-matrix-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pol-ward-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.pol-ward-id { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.pol-level-pill { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; }
.pol-level-pill.pol-level-high { background: #ffebee; color: #c62828; }
.pol-level-pill.pol-level-med { background: #fff3e0; color: #e65100; }
.pol-level-pill.pol-level-low { background: var(--green-lt); color: var(--green-dk); }

.pol-matrix-metrics { display: flex; justify-content: space-between; margin-bottom: 12px; background: rgba(0,0,0,0.03); padding: 8px; border-radius: 8px; }
.pol-m-col { display: flex; flex-direction: column; align-items: center; }
.pol-m-val { font-size: 14px; font-weight: 800; color: var(--ink); }
.pol-m-lbl { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-top: 2px; }

.pol-bar-box { margin-bottom: 8px; }
.pol-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.pol-bar-track { height: 8px; background: rgba(0,0,0,0.06); border-radius: 99px; overflow: hidden; }
.pol-bar-fill { height: 100%; border-radius: 99px; }
.pol-bar-fill.pol-level-high { background: var(--red); }
.pol-bar-fill.pol-level-med { background: var(--amber); }
.pol-bar-fill.pol-level-low { background: var(--green); }

.pol-equity-tag { font-size: 11px; color: #c62828; background: #ffebee; padding: 6px 8px; border-radius: 6px; font-weight: 600; line-height: 1.35; margin-top: 8px; }

.pol-section-head { margin-bottom: 16px; }
.pol-section-head h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0; }
.pol-briefs-grid { display: flex; flex-direction: column; gap: 16px; }
.pol-brief-card {
  background: var(--card); border-radius: 18px; padding: 20px; box-shadow: var(--clay-shadow-card);
  border: 1px solid var(--line); transition: all 0.2s ease;
}
.pol-brief-card:hover { transform: translateY(-2px); box-shadow: var(--clay-shadow-card-hover); }
.pol-brief-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.pol-code-pill { font-size: 11px; font-weight: 800; font-family: var(--mono); background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 4px; color: var(--muted); }
.pol-brief-title { font-size: 17px; font-weight: 800; color: var(--ink); margin: 6px 0 2px; line-height: 1.3; }
.pol-ministry-name { font-size: 12.5px; font-weight: 700; color: var(--green-dk); }
.pol-brief-date { font-size: 12px; color: var(--muted); font-family: var(--mono); }

.pol-summary-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13px; color: var(--ink); margin-bottom: 12px; line-height: 1.45; }
.pol-summary-box p { margin: 4px 0 0; }
.pol-pain-highlights { margin-bottom: 12px; }
.pol-highlights-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pol-pain-chip { display: inline-block; font-size: 11.5px; background: rgba(0,0,0,0.03); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; margin: 0 6px 6px 0; }

.pol-scheme-box { font-size: 12px; color: var(--muted); margin-bottom: 16px; background: rgba(21,101,192,0.05); padding: 8px 12px; border-radius: 8px; border-left: 3px solid #1565c0; }
.pol-card-foot { display: flex; gap: 10px; flex-wrap: wrap; }

.pol-doc-container { padding: 10px 4px; font-family: var(--font); color: var(--ink); }
.pol-doc-header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.pol-emblem { font-size: 38px; }
.pol-doc-org { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.pol-doc-sub { font-size: 18px; font-weight: 800; color: var(--ink); margin: 2px 0; }
.pol-doc-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.pol-doc-divider { border: 0; height: 2px; background: var(--ink); margin: 16px 0; opacity: 0.15; }

.pol-doc-section { margin-bottom: 20px; }
.pol-doc-section h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; }
.pol-doc-section h4 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.pol-doc-section p { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0; }

.pol-doc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.pol-kpi-item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; }
.pol-kpi-val { font-size: 20px; font-weight: 800; color: var(--ink); }
.pol-kpi-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 700; }

.pol-doc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.pol-doc-table th, .pol-doc-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.pol-doc-table th { background: var(--surface); font-weight: 800; font-size: 11px; text-transform: uppercase; color: var(--muted); }

.pol-directives-list { margin: 8px 0 0 18px; padding: 0; font-size: 13.5px; line-height: 1.6; }
.pol-directives-list li { margin-bottom: 6px; }

.pol-allocation-box { background: var(--green-lt); border: 1px solid rgba(46,125,50,0.3); padding: 12px 14px; border-radius: 10px; font-size: 13px; color: var(--green-dk); line-height: 1.45; }
.pol-doc-foot { display: flex; gap: 10px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }

.pol-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: 12px; }

/* ===== FONT SCALING — handled via .app { zoom } in accessibility.js ===== */
:root { --font-scale: 1.0; }

/* ===== DYSLEXIC-FRIENDLY FONT (loaded via <link> in index.html) ===== */
.font-dyslexic, .font-dyslexic * {
  font-family: 'Lexend', 'Comic Sans MS', 'Arial', sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.8;
}

/* ===== HIGH CONTRAST MODE (WCAG AAA 7:1) ===== */
.theme-high-contrast {
  --bg: #000000;
  --surface: #111111;
  --card: #1a1a1a;
  --ink: #ffffff;
  --muted: #cccccc;
  --line: #555555;
  --green: #00ff88;
  --green-lt: #003322;
  --green-dk: #00ff88;
  --red: #ff4444;
  --amber: #ffcc00;
  background: #000 !important;
  color: #fff !important;
}
.theme-high-contrast .topbar,
.theme-high-contrast .card,
.theme-high-contrast .view,
.theme-high-contrast .modal-content {
  background: #111 !important;
  border-color: #555 !important;
  color: #fff !important;
}
.theme-high-contrast a,
.theme-high-contrast .navlinks a {
  color: #00ff88 !important;
}
.theme-high-contrast button,
.theme-high-contrast .btn {
  border: 2px solid #fff !important;
}
.theme-high-contrast *:focus {
  outline: 3px solid #ffcc00 !important;
  outline-offset: 3px !important;
}

/* ===== 22-LANGUAGE SELECTOR MODAL ===== */
.lang-modal-content {
  max-width: 700px !important;
  width: 95vw !important;
  max-height: 88vh;
  overflow-y: auto;
}
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.lang-grid-btn {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.lang-grid-btn:hover {
  border-color: var(--green);
  background: var(--green-lt);
  transform: translateY(-2px);
}
.lang-grid-btn.active {
  border-color: var(--green);
  background: var(--green-lt);
  box-shadow: 0 0 0 2px var(--green);
}
.lang-native {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.lang-english {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lang-region {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ===== ACCESSIBILITY DRAWER ===== */
.a11y-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: var(--card);
  border-left: 1.5px solid var(--line);
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  z-index: 1002;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
  gap: 0;
}
.a11y-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.a11y-drawer-head h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}
.a11y-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.a11y-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.a11y-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 10px;
}
.a11y-scale-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.a11y-scale-btn {
  flex: 1;
  padding: 8px 4px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  text-align: center;
  transition: all 0.15s ease;
}
.a11y-scale-btn:hover { border-color: var(--green); background: var(--green-lt); }
.a11y-scale-btn.active { border-color: var(--green); background: var(--green-lt); box-shadow: 0 0 0 2px var(--green); }

.a11y-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: all 0.15s ease;
}
.a11y-toggle-btn:hover { border-color: var(--green); background: var(--green-lt); }
.a11y-toggle-btn.active { border-color: var(--green); background: var(--green-lt); box-shadow: 0 0 0 2px var(--green); color: var(--green-dk); }

.a11y-info p {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0;
}
.a11y-compliance-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--green-lt);
  color: var(--green-dk);
  border: 1px solid var(--green);
  margin-bottom: 6px;
}

/* WCAG 2.1 Focus Ring (applies globally for keyboard navigation) */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== BADGES ===== */
.badge-card {
  padding: 16px;
  border-radius: 12px;
  border: 2px solid;
  background: var(--surface);
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.badge-card.unlocked {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.badge-card.locked {
  filter: grayscale(100%);
  opacity: 0.6;
}
.badge-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border: 2px solid;
}
.badge-title {
  font-weight: 800;
  font-size: 15px;
}
.badge-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ===== AI Assistant chat widget ===== */
#cbotWidget{ position:fixed; right:22px; bottom:22px; z-index:2500; }
.cbot-fab{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green); color:#fff; font-size:24px;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.cbot-fab:hover{ transform:scale(1.06); }
.cbot-panel{
  position:absolute; right:0; bottom:70px; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:70vh; background:var(--card); border-radius:18px;
  box-shadow:0 24px 48px rgba(0,0,0,0.28); overflow:hidden;
  flex-direction:column; border:1px solid var(--line);
}
.cbot-head{
  background:var(--green-dk); color:#fff; padding:12px 14px; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.cbot-close{ background:none; border:none; color:#fff; font-size:15px; cursor:pointer; opacity:.85; }
.cbot-close:hover{ opacity:1; }
.cbot-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--paper); }
.cbot-msg{ display:flex; }
.cbot-msg.cbot-user{ justify-content:flex-end; }
.cbot-bubble{
  max-width:85%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.45;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
}
.cbot-user .cbot-bubble{ background:var(--green); color:#fff; border-color:var(--green); }
.cbot-typing .cbot-bubble{ color:var(--muted); font-style:italic; }
.cbot-inputrow{
  display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--card); flex-shrink:0;
}
.cbot-inputrow input{
  flex:1; border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; font-size:13px; font-family:var(--font);
}
.cbot-inputrow input:focus{ outline:none; border-color:var(--green); }
@media (max-width:520px){
  .cbot-panel{ width:calc(100vw - 24px); right:-6px; }
}