#ssa-app{
  /* Sacred Soul Alignment brand palette, per ssa-palette-reference.
     Pure white is deliberately absent: --card (#fbf7f3) replaces it everywhere.
     Gold is deliberately absent: the brand is moving away from it, so cyan
     carries the accents instead. */
  --purple:#675980; --purple-dark:#4e4363; --purple-light:#8a7ba0;
  --teal:#266a7b; --teal-deep:#1a4e5b; --rose:#983566; --mauve:#916089;
  --accent:#05a1b8;        /* bright cyan, accents on light backgrounds */
  --accent-light:#8fdbe8;  /* light cyan, accents on dark backgrounds */
  --ink:#2b2b2b;           /* true neutral, never reads purple */
  --muted:#6e6e6e;         /* labels, meta lines, captions, fine print */
  --paper:#f5ebe1;         /* cream, page background */
  --card:#fbf7f3;          /* warm off-white, replaces pure white */
  --line:#e4d9cc;
  --soft:#efe7f2;
  --soft-hover:#e6dbf0;
  font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;
}
#ssa-app, #ssa-app *{box-sizing:border-box;margin:0;padding:0}
#ssa-app .wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* Header */
#ssa-app header{background:linear-gradient(160deg,var(--purple-dark) 0%,var(--purple) 55%,var(--purple-light) 100%);color:var(--card);padding:44px 0 38px;position:relative;overflow:hidden}
#ssa-app header::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(143,219,232,.20),transparent 42%);pointer-events:none}
#ssa-app .eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent-light);font-weight:bold;margin-bottom:14px}
#ssa-app header h1{font-size:34px;font-weight:bold;letter-spacing:.01em;margin-bottom:8px;color:var(--card) !important}
#ssa-app header p.sub{color:var(--paper);max-width:640px;font-size:15.5px}
#ssa-app .count-pill{display:inline-block;margin-top:18px;background:rgba(251,247,243,.16);border:1px solid rgba(251,247,243,.34);border-radius:40px;padding:6px 16px;font-size:13px;color:var(--card)}

/* Attunement reminder */
#ssa-app .attune{background:#e8f1f4;border-left:4px solid var(--teal);color:var(--teal-deep);padding:12px 18px;font-size:13.5px;border-radius:0 8px 8px 0;margin:22px 0 0}
#ssa-app .attune strong{color:var(--teal)}

/* Search zone */
#ssa-app .search-zone{margin:26px 0 8px}
#ssa-app .searchbar{position:relative}
#ssa-app .searchbar input{width:100%;font-family:Arial;font-size:17px;padding:17px 20px 17px 52px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);transition:border-color .18s,box-shadow .18s}
#ssa-app .searchbar input:focus{outline:none;border-color:var(--purple-light);box-shadow:0 0 0 4px rgba(138,123,160,.24)}
#ssa-app .searchbar svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
#ssa-app .hint{font-size:12.5px;color:var(--muted);margin-top:9px;padding-left:4px}

/* Filter chips */
#ssa-app .filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
#ssa-app .chip{font-family:Arial;font-size:13px;padding:7px 14px;border-radius:30px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
#ssa-app .chip:hover{border-color:var(--purple-light);color:var(--purple)}
#ssa-app .chip.on{background:var(--purple);border-color:var(--purple);color:var(--card)}
#ssa-app .chip.layer{border-style:dashed}

/* Layout */
#ssa-app .body-grid{display:grid;grid-template-columns:236px 1fr;gap:28px;margin:26px 0 60px;align-items:start}
@media(max-width:820px){
  #ssa-app .body-grid{grid-template-columns:1fr}
  #ssa-app .side{position:static!important}
  #ssa-app .side h3{margin-bottom:8px}
  #ssa-app .serieslist{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  #ssa-app .serieslist button{white-space:nowrap;flex-shrink:0}
}

/* Sidebar series */
#ssa-app .side{position:sticky;top:18px}
#ssa-app .side h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve);margin-bottom:12px;font-weight:bold}
#ssa-app .serieslist{display:flex;flex-direction:column;gap:2px;max-height:70vh;overflow-y:auto;padding-right:6px}
#ssa-app .serieslist button{text-align:left;font-family:Arial;font-size:13.5px;padding:8px 11px;border:none;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:8px;transition:background .13s}
#ssa-app .serieslist button:hover{background:var(--soft)}
#ssa-app .serieslist button.on{background:var(--purple);color:var(--card)}
#ssa-app .serieslist button.on .sc{color:var(--card)}
#ssa-app .sc{color:var(--muted);font-size:12px;flex-shrink:0}

/* Results */
#ssa-app .results-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:8px}
#ssa-app .results-head .n{font-size:14px;color:var(--muted)}
#ssa-app .results-head .n b{color:var(--purple)}
#ssa-app .clearall{font-family:Arial;font-size:13px;background:none;border:none;color:var(--mauve);cursor:pointer;text-decoration:underline}

#ssa-app .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
#ssa-app .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;display:flex;flex-direction:column}
#ssa-app .card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(103,89,128,.14);border-color:var(--purple-light)}
#ssa-app .card .series-tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mauve);font-weight:bold;margin-bottom:7px}
#ssa-app .card h4{font-size:18px;color:var(--purple);margin-bottom:9px;font-weight:bold;line-height:1.25}
#ssa-app .card .snip{font-size:13.5px;color:var(--muted);flex-grow:1;margin-bottom:13px}
#ssa-app .card .tags{display:flex;flex-wrap:wrap;gap:5px}
#ssa-app .tag{font-size:11.5px;padding:3px 9px;border-radius:20px;background:var(--soft);color:var(--purple)}
/* The inferred-tag dagger. Base rule so it also colours correctly in the
   footer and the modal notes, where it has no .tag or .comp parent. */
#ssa-app .dag{color:var(--accent);font-weight:bold}
#ssa-app .tag .dag{margin-left:2px}
#ssa-app .tag.ail{background:#eaf1f4;color:var(--teal)}
#ssa-app .tag.body{background:#f7edf1;color:var(--mauve)}

#ssa-app .empty{text-align:center;padding:70px 20px;color:var(--muted)}
#ssa-app .empty h3{color:var(--purple);font-size:20px;margin-bottom:8px}

/* Modal */
#ssa-app .overlay{position:fixed;inset:0;background:rgba(43,43,43,.55);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:50;overflow-y:auto}
#ssa-app .overlay.show{display:flex}
#ssa-app .modal{background:var(--card);max-width:660px;width:100%;border-radius:18px;padding:34px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.3)}
#ssa-app .modal .close{position:absolute;top:18px;right:20px;width:34px;height:34px;border:none;background:var(--soft);border-radius:50%;color:var(--purple);font-size:18px;cursor:pointer;line-height:1}
#ssa-app .modal .series-tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mauve);font-weight:bold;margin-bottom:8px}
#ssa-app .modal h2{font-size:26px;color:var(--purple);margin-bottom:16px;font-weight:bold;padding-right:30px}
#ssa-app .modal .desc{font-size:15px;color:var(--ink);margin-bottom:22px;line-height:1.65}
#ssa-app .mblock{margin-bottom:20px}
#ssa-app .mblock h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-weight:bold}
#ssa-app .mblock .tags{display:flex;flex-wrap:wrap;gap:6px}
#ssa-app .companions{display:flex;flex-direction:column;gap:7px}
#ssa-app .comp{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--purple);background:var(--soft);padding:9px 13px;border-radius:9px;cursor:pointer;transition:background .13s}
#ssa-app .comp:hover{background:var(--soft-hover)}
#ssa-app .comp .dag{color:var(--accent);font-weight:bold}
#ssa-app .comp-note{font-size:12px;color:var(--muted);margin-top:8px;font-style:italic}
#ssa-app .modal .care{background:#e8f1f4;border-left:3px solid var(--teal);padding:12px 15px;font-size:13px;color:var(--teal-deep);border-radius:0 7px 7px 0;margin-top:8px}

#ssa-app footer{border-top:1px solid var(--line);padding:26px 0 40px;text-align:center;color:var(--muted);font-size:12.5px}
#ssa-app mark{background:#cfeaf1;color:inherit;padding:0 1px;border-radius:2px}

/* Mode tabs */
#ssa-app .modes{display:flex;gap:6px;margin:26px 0 0;border-bottom:2px solid var(--line)}
#ssa-app .modetab{font-family:Arial;font-size:15px;font-weight:bold;padding:12px 22px;border:none;background:none;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
#ssa-app .modetab.on{color:var(--purple);border-bottom-color:var(--accent)}
#ssa-app .modetab:hover{color:var(--purple)}
#ssa-app .panel{display:none}
#ssa-app .panel.on{display:block}

/* Chat */
#ssa-app .chatwrap{max-width:780px;margin:22px auto 60px}
#ssa-app .chatintro{background:var(--soft);border-radius:14px;padding:20px 22px;margin-bottom:18px}
#ssa-app .chatintro h3{color:var(--purple);font-size:17px;margin-bottom:6px}
#ssa-app .chatintro p{font-size:13.5px;color:var(--muted)}
#ssa-app .starter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#ssa-app .starter{font-family:Arial;font-size:13px;padding:8px 14px;border-radius:30px;border:1.5px solid var(--purple-light);background:var(--card);color:var(--purple);cursor:pointer;transition:background .14s}
#ssa-app .starter:hover{background:var(--soft-hover)}
#ssa-app .stream{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;min-height:60px}
#ssa-app .msg{max-width:86%;padding:14px 17px;border-radius:15px;font-size:14.5px;line-height:1.6}
#ssa-app .msg.user{align-self:flex-end;background:var(--purple);color:var(--card);border-bottom-right-radius:5px}
#ssa-app .msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
#ssa-app .msg.bot .rec{margin:11px 0;padding:12px 14px;background:var(--soft);border-radius:10px;cursor:pointer;transition:background .13s}
#ssa-app .msg.bot .rec:hover{background:var(--soft-hover)}
#ssa-app .msg.bot .rec .rn{font-weight:bold;color:var(--purple);font-size:14.5px}
#ssa-app .msg.bot .rec .rs{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mauve);font-weight:bold;margin-left:6px}
#ssa-app .msg.bot .rec .rr{font-size:13px;color:var(--muted);margin-top:4px}
#ssa-app .msg.bot .care{margin-top:11px;font-size:12px;color:var(--teal);font-style:italic}
#ssa-app .msg.bot .pair{font-size:13.5px;color:var(--ink);margin-top:6px}
#ssa-app .chatform{display:flex;gap:9px}
#ssa-app .chatform input{flex:1;font-family:Arial;font-size:15px;padding:14px 17px;border:2px solid var(--line);border-radius:12px}
#ssa-app .chatform input:focus{outline:none;border-color:var(--purple-light);box-shadow:0 0 0 4px rgba(138,123,160,.22)}
#ssa-app .chatform button{font-family:Arial;font-size:15px;font-weight:bold;padding:0 24px;border:none;border-radius:12px;background:var(--purple);color:var(--card);cursor:pointer;transition:background .15s}
#ssa-app .chatform button:hover{background:var(--purple-dark)}
#ssa-app .chatform button:disabled{background:var(--muted);opacity:.55;cursor:default}
#ssa-app .chatform button:disabled:hover{background:var(--muted)}
#ssa-app .demo-note{text-align:center;font-size:12px;color:var(--muted);margin-top:14px;padding:10px;background:rgba(5,161,184,.06);border:1px dashed var(--accent);border-radius:9px}
#ssa-app .typing{align-self:flex-start;color:var(--muted);font-size:13px;font-style:italic;padding:6px 4px}

/* Phone breakpoint */
@media(max-width:640px){
  #ssa-app .wrap{padding:0 16px}
  #ssa-app header{padding:30px 0 26px}
  #ssa-app .eyebrow{font-size:10.5px;letter-spacing:.22em;margin-bottom:10px}
  #ssa-app header h1{font-size:25px;line-height:1.2}
  #ssa-app header p.sub{font-size:13.5px}
  #ssa-app .count-pill{margin-top:14px;font-size:12px;padding:5px 13px}
  #ssa-app .attune{padding:11px 14px;font-size:13px}

  #ssa-app .searchbar input{font-size:15px;padding:14px 16px 14px 44px}
  #ssa-app .searchbar svg{left:15px;width:18px;height:18px}
  #ssa-app .hint{font-size:12px}
  #ssa-app .chip{font-size:12.5px;padding:8px 13px}

  #ssa-app .modes{gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #ssa-app .modetab{font-size:13.5px;padding:10px 14px;white-space:nowrap}

  #ssa-app .cards{grid-template-columns:1fr;gap:12px}
  #ssa-app .card{padding:16px}
  #ssa-app .card h4{font-size:16.5px}
  #ssa-app .card .snip{font-size:13px}

  #ssa-app .overlay{padding:0;align-items:stretch}
  #ssa-app .modal{max-width:100%;width:100%;min-height:100dvh;border-radius:0;padding:24px 18px 34px}
  #ssa-app .modal .close{top:14px;right:14px}
  #ssa-app .modal h2{font-size:20px;padding-right:28px}
  #ssa-app .modal .desc{font-size:14px}

  #ssa-app .chatwrap{margin:16px auto 40px}
  #ssa-app .chatintro{padding:16px 17px}
  #ssa-app .msg{max-width:92%;font-size:14px}
  #ssa-app .chatform input{font-size:15px;padding:12px 14px}
  #ssa-app .chatform button{padding:0 16px;font-size:14px}
}