*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#080808;
  --fg:#f0ece4;
  --dim:#1a1a1a;
  --line:#1e1e1e;
  --accent:#c8f53c;
}
html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%;}
body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--bg);
  color:var(--fg);
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;z-index:0;
}

/* TOPBAR */
.topbar{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:52px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.logo{
  font-family:'Space Mono',monospace;
  font-size:0.95rem;font-weight:700;
  letter-spacing:5px;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  animation:blink 2.4s ease-in-out infinite;
  transition:background 0.4s;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}
.nav-pill{
  display:flex;gap:2px;
  background:var(--dim);border-radius:5px;padding:3px;
}
.nav-btn{
  background:none;border:none;
  color:var(--fg);
  font-family:'Space Grotesk',sans-serif;
  font-size:0.7rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 14px;border-radius:3px;
  cursor:pointer;transition:all 0.18s;
}
.nav-btn.on{background:var(--fg);color:var(--bg);}
.nav-btn:hover:not(.on){color:var(--fg);}
.status{
  font-family:'Space Mono',monospace;
  font-size:0.58rem;color:var(--fg);letter-spacing:2px;
}

/* LAYOUT */
.main{flex:1;display:flex;overflow:hidden;position:relative;z-index:1;}

/* RAIL */
.rail{
  width:200px;border-right:1px solid var(--line);
  padding:20px 0;
  display:flex;flex-direction:column;
  flex-shrink:0;overflow-y:auto;
}
.rail::-webkit-scrollbar{width:0;}
.mood-row{
  display:flex;align-items:center;gap:11px;
  padding:9px 18px;cursor:pointer;
  border-left:2px solid transparent;
  transition:all 0.15s;
}
.mood-row:hover{background:rgba(255,255,255,0.025);}
.mood-row.on{background:rgba(255,255,255,0.04);border-left-color:var(--accent);}
.mood-row.on .mood-row-label{color:var(--fg);}
.swatch{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  transition:transform 0.2s;
}
.mood-row:hover .swatch,.mood-row.on .swatch{transform:scale(2);}
.mood-row-label{
  font-size:0.72rem;font-weight:500;
  color:var(--fg);letter-spacing:0.8px;
  text-transform:uppercase;flex:1;
  transition:color 0.2s;
}
.mood-num{
  font-family:'Space Mono',monospace;
  font-size:0.55rem;color:var(--fg);
  opacity:0;transition:opacity 0.2s;
}
.mood-row.on .mood-num,.mood-row:hover .mood-num{opacity:1;}

/* CONTENT */
.content{flex:1;display:flex;flex-direction:column;overflow:hidden;}

.hero{
  padding:36px 44px 28px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:0.58rem;color:var(--fg);
  letter-spacing:3px;text-transform:uppercase;
  margin-bottom:10px;
}
.heading{
  font-size:clamp(2rem,3.8vw,3.8rem);
  font-weight:700;line-height:0.93;
  letter-spacing:-2px;color:var(--fg);
}
.heading em{font-style:normal;color:var(--accent);transition:color 0.35s;}

.irow{
  display:flex;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.ifield{
  min-width:0;
  flex:1;background:transparent;border:none;outline:none;
  color:var(--fg);
  font-family:'Space Grotesk',sans-serif;font-size:0.9rem;
  padding:16px 44px;
}
.ifield::placeholder{color:var(--fg);opacity:1;}
.ifield:focus-visible{box-shadow:inset 0 -2px var(--accent);background:#111;}
.input-help{padding:8px 16px;color:var(--fg);font-size:0.75rem;line-height:1.5;flex-shrink:0;}
.input-help + .input-help{padding-top:0;}
.input-help a{color:var(--accent);}
.qmatch{color:var(--fg);font-size:0.75rem;line-height:1.5;margin-bottom:20px;}
.content,.zone{min-height:0;min-width:0;}
.qtext{overflow-wrap:anywhere;}
.gbtn{
  background:var(--accent);border:none;
  color:var(--bg);
  font-family:'Space Mono',monospace;
  font-size:0.65rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  padding:0 28px;cursor:pointer;
  border-left:1px solid var(--line);
  transition:opacity 0.18s;flex-shrink:0;
  white-space:nowrap;
}
.gbtn:hover{opacity:0.82;}
.gbtn:active{transform:scale(0.98);}
.gbtn:disabled{opacity:0.25;cursor:not-allowed;}

/* ZONES */
.zone{flex:1;overflow-y:auto;}
.zone::-webkit-scrollbar{width:3px;}
.zone::-webkit-scrollbar-thumb{background:var(--dim);}

.empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  height:100%;gap:10px;color:var(--fg);
}
.empty-o{font-size:2.5rem;}
.empty-t{
  font-family:'Space Mono',monospace;
  font-size:0.58rem;letter-spacing:3px;text-transform:uppercase;
}

/* Quote card */
.qcard{
  padding:44px;border-bottom:1px solid var(--line);
  position:relative;
  animation:up 0.38s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.qcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);transition:background 0.4s;
}
.qnum{
  font-family:'Space Mono',monospace;
  font-size:0.58rem;color:var(--fg);
  letter-spacing:2px;margin-bottom:24px;
}
.qtext{
  font-size:clamp(1.2rem,2.2vw,1.9rem);
  font-weight:300;line-height:1.45;
  color:var(--fg);letter-spacing:-0.3px;
  margin-bottom:20px;max-width:640px;
}
.qauthor{
  font-family:'Space Mono',monospace;
  font-size:0.65rem;color:var(--accent);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:24px;transition:color 0.4s;
}
.qactions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;}
.abtn,.hbtn,.unsave-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;min-width:104px;padding:0 18px;
  border:1px solid #343434;border-radius:8px;
  background:#151515;color:var(--fg);
  font-family:'Space Mono',monospace;font-size:0.65rem;font-weight:500;
  line-height:1;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;transition:background 0.18s,border-color 0.18s,color 0.18s,transform 0.18s;
}
.abtn:hover:not(:disabled),.hbtn:hover:not(:disabled){background:#222;border-color:#666;color:var(--fg);}
.abtn:active:not(:disabled),.hbtn:active:not(:disabled),.unsave-btn:active{transform:translateY(1px);}
.abtn.primary{background:var(--accent);border-color:var(--accent);color:#101408;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
.abtn.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#101408;filter:brightness(1.08);}
.hbtn{min-width:116px;}
.hbtn:hover:not(:disabled){color:#ffa4cd;border-color:#78415b;background:#23151c;}
.hbtn.is-saved{color:#ffa4cd;border-color:#633147;cursor:default;background:#26151d;}
.unsave-btn{color:#e8a0ad;background:#1d1417;border-color:#55313a;}
.unsave-btn:hover{background:#301a20;border-color:#b5687a;color:#ffc2ce;}
.abtn:focus-visible,.hbtn:focus-visible,.unsave-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.saved-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;}
.copy-btn:disabled{cursor:default;color:var(--fg);background:#191919;}
@media(prefers-reduced-motion:reduce){.abtn,.hbtn,.unsave-btn{transition:none;}}

/* Loading */
.no-match{padding:32px 20px;max-width:680px;color:var(--fg);}
.no-match h2{font-size:1.15rem;margin-bottom:12px;}
.no-match p{font-size:0.9rem;line-height:1.7;margin-bottom:20px;}
.topic-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.topic-suggestions .abtn{border-color:var(--accent);min-width:0;}
.lcard{
  padding:44px;
  display:flex;align-items:center;gap:16px;
}
.lbar{
  height:1px;background:var(--dim);flex:1;
  position:relative;overflow:hidden;
}
.lbar::after{
  content:'';
  position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:var(--accent);
  animation:slide 1s ease-in-out infinite;
}
@keyframes slide{to{left:110%;}}
.llabel{
  font-family:'Space Mono',monospace;
  font-size:0.58rem;color:var(--fg);
  letter-spacing:2px;white-space:nowrap;
}

/* Views */
.view{display:none;}
.view.on{display:flex;flex-direction:column;height:100%;}

/* Saved */
.scard{
  padding:20px 44px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto;gap:14px;
  align-items:start;
  transition:background 0.12s;
  animation:up 0.28s ease forwards;
}
.scard:hover{background:rgba(255,255,255,0.018);}
.sq{
  font-size:0.88rem;font-weight:300;
  color:var(--fg);line-height:1.5;margin-bottom:7px;
}
.smeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.sau{
  font-family:'Space Mono',monospace;
  font-size:0.58rem;color:var(--fg);letter-spacing:1px;text-transform:uppercase;
}
.stag{
  font-family:'Space Mono',monospace;
  font-size:0.5rem;letter-spacing:1px;
  padding:2px 7px;border-radius:2px;
  text-transform:uppercase;color:var(--bg);
}
.dx{
  background:none;border:none;color:var(--fg);
  cursor:pointer;font-size:0.9rem;
  padding:3px;transition:color 0.15s;
  align-self:flex-start;margin-top:3px;
}
.dx:hover{color:#ff3b3b;}
.sempty{
  padding:60px 44px;
  font-family:'Space Mono',monospace;
  font-size:0.58rem;color:var(--fg);
  letter-spacing:2px;text-transform:uppercase;
}

/* Mobile mood bar — hidden by default, shown on mobile */
.mood-bar{
  display:none;
  overflow-x:auto;
  gap:8px;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mood-bar::-webkit-scrollbar{display:none;}
.mood-chip{
  display:flex;align-items:center;gap:6px;
  background:var(--dim);border:1px solid var(--line);
  color:var(--fg);
  font-family:'Space Grotesk',sans-serif;
  font-size:0.68rem;font-weight:500;
  letter-spacing:0.5px;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;
  cursor:pointer;white-space:nowrap;
  transition:all 0.18s;flex-shrink:0;
}
.mood-chip.on{
  border-color:var(--accent);
  color:var(--fg);
  background:rgba(255,255,255,0.06);
}
.chip-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}

/* Tablet — narrower rail */
@media(max-width:900px){
  .rail{width:160px;}
  .hero{padding:28px 28px 22px;}
  .ifield{padding:14px 28px;}
  .qcard{padding:32px 28px;}
  .scard{padding:16px 28px;}
}

/* Mobile */
@media(max-width:680px){
  .main{flex-direction:column;overflow-x:hidden;}
  .rail{display:none;}
  .mood-bar{display:flex;width:100%;min-width:0;overflow-x:auto;touch-action:pan-x;}
  .topbar{padding:0 16px;height:48px;}
  .logo{font-size:0.82rem;letter-spacing:4px;}
  .nav-btn{font-size:0.62rem;padding:5px 12px;min-height:32px;}
  .status{display:none;}
  .content{min-width:0;}
  .hero{padding:20px 16px 16px;}
  .heading{letter-spacing:-1px;}
  .irow{flex-direction:column;}
  .ifield{padding:14px 16px;font-size:0.82rem;min-height:48px;}
  .gbtn{
    padding:14px 16px;font-size:0.62rem;
    border-left:none;border-top:1px solid var(--line);
    min-height:48px;
  }
  .qcard{padding:24px 16px;}
  .qtext{font-size:clamp(1rem,4.5vw,1.4rem);}
  .qactions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .abtn,.hbtn,.unsave-btn{min-width:0;height:44px;padding:0 12px;font-size:0.6rem;}
  .qactions .hbtn{min-width:0;}
  .scard{padding:14px 16px;grid-template-columns:1fr auto;gap:10px;}
  .dx{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
  .sempty{padding:40px 16px;}
  .mood-chip{min-height:36px;}
}

/* Small phones */
@media(max-width:380px){
  .topbar{padding:0 10px;}
  .logo{font-size:0.75rem;letter-spacing:3px;}
  .nav-btn{font-size:0.56rem;padding:4px 8px;}
  .hero{padding:16px 12px 12px;}
  .ifield{padding:12px 12px;}
  .gbtn{padding:12px 12px;}
  .qcard{padding:20px 12px;}
  .scard{padding:12px 12px;}
  .mood-chip{font-size:0.6rem;padding:5px 10px;}
}

/* Landscape phones */
@media(max-height:440px) and (max-width:900px){
  .hero{padding:12px 16px 8px;}
  .heading{font-size:clamp(1.4rem,3vw,2rem);}
  .eyebrow{margin-bottom:4px;}
}

/* Safe area insets for notched devices */
@supports(padding:env(safe-area-inset-bottom)){
  .topbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
  .mood-bar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
  .qcard,.scard,.hero,.ifield,.sempty{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
}