/* ==========================================================
   CleanDomain.ai — Unified Style System v5.0
   Mode: Subtle Cinematic Motion (Premium, stable)
   Bonus: Hidden “Tech Glow” theme via .glow-mode
   Author: Andrew Economou + ChatGPT
   ========================================================== */

/* ---------- Core Variables ---------- */
:root{
  --brand:#0066ff;
  --brand-2:#00b7ff;
  --brand-3:#00d4ff;
  --ok:#00d084;
  --warn:#ffaa00;
  --bad:#ff5252;

  --bg:#f9fafc;
  --surface:#ffffff;
  --text:#111;
  --sub:#555;
  --muted:#666;
  --line:#e4e4e4;
  --card:#fafbff;
  --tableHead:#f4f7ff;

  --radius:10px;
  --radius-lg:16px;

  --shadow-0:0 0 0 rgba(0,0,0,0);
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 2px 10px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.14);

  --ring:0 0 0 3px rgba(0,102,255,.12);
}

body.dark-mode{
  --bg:#0b0c10;
  --surface:#101014;
  --text:#e9e9e9;
  --sub:#bbb;
  --muted:#a0a3ad;
  --line:#222;
  --card:#161920;
  --tableHead:#1d2230;
  --ring:0 0 0 3px rgba(79,195,247,.18);
}

/* ---------- Mobile Stability Patch ---------- */
html,body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  line-height:1.6;
  transition:background .35s ease,color .35s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
input,textarea,button,select{font-size:16px !important;-webkit-text-size-adjust:none}
button{cursor:pointer;transition:transform .15s ease, box-shadow .25s ease}
button:active{transform:scale(.985)}
.container{max-width:960px;margin:0 auto;padding:0 1rem}
section,header,footer{max-width:100vw;overflow-x:hidden}

/* ---------- Reduce motion (accessibility) ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:999;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
body.dark-mode .site-header{
  background:rgba(12,12,16,.85);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.dark-mode .site-header.scrolled{
  background:rgba(10,12,18,.86);
  box-shadow:0 6px 18px rgba(0,150,255,.12);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}

.brand-name{font-weight:900;font-size:1.22rem;color:var(--text);letter-spacing:-.15px}
.brand-name .ai{color:var(--brand)}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}100%{opacity:.45;transform:scale(.92)}}

/* ---------- Hero ---------- */
.hero{
  background:var(--surface);
  border-bottom:1px solid #f0f0f0;
  padding:2rem 0 1.35rem;
  text-align:center;
}
body.dark-mode .hero{border-bottom:1px solid var(--line)}
.hero .container{position:relative;top:-.4rem}

.hero-title{
  font-size:2.32rem;font-weight:900;letter-spacing:-.3px;margin:0 0 .6rem;
  background:linear-gradient(90deg,var(--brand),var(--brand-3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
body.dark-mode .hero-title{
  background:linear-gradient(90deg,#78a7ff,#a6ddff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.sub{font-size:1.05rem;color:var(--sub)}

/* ---------- Search ---------- */
.searchbar{
  display:flex;justify-content:center;align-items:center;gap:.5rem;margin:1.15rem 0 1.5rem;
}
.searchbar input{
  width:60%;padding:.78rem 0.9rem;font-size:1rem;
  border:1px solid #cfd3da;border-radius:8px;background:#fff;color:#111;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.searchbar input:focus{border-color:var(--brand);outline:none;box-shadow:var(--ring)}
body.dark-mode .searchbar input{background:#181b22;border-color:#333;color:#fff}

.primary-btn{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;border:none;border-radius:8px;padding:.78rem 1.2rem;font-weight:800;
  box-shadow:0 4px 12px rgba(0,100,255,.2);
}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,150,255,.28)}
.primary-btn:disabled{opacity:.7;cursor:not-allowed}

/* ---------- Micro KPIs ---------- */
.micro-kpis{display:flex;justify-content:space-around;flex-wrap:wrap;gap:1rem;margin-top:.6rem}
.micro-kpis div{font-size:.92rem;color:var(--muted);transition:color .25s ease, transform .25s ease}
.micro-kpis strong{color:var(--text)}
.micro-kpis div:hover{color:var(--brand);transform:translateY(-1px)}
body.dark-mode .micro-kpis div:hover{color:#78baff}

/* ---------- Messages ---------- */
.search-msg{margin-top:1rem;font-weight:800;font-size:1.05em;transition:color .25s ease}
.search-msg.searching{color:var(--warn);font-style:italic}
.search-msg.success{color:var(--ok)}
.search-msg.error{color:var(--bad)}

/* ---------- Engine Result / Score Card ---------- */
#scoreResult,.engine-result{
  background:linear-gradient(135deg,#ffffff,#f7faff);
  border:1px solid #e4e9ff;border-radius:var(--radius);
  padding:1.1rem 1.25rem;line-height:1.5;color:#111;
  box-shadow:var(--shadow-sm);
  opacity:0;animation:fadeIn .6s ease forwards;
}
.engine-result:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
body.dark-mode #scoreResult,body.dark-mode .engine-result{
  background:linear-gradient(135deg,#161820,#1d212b);
  border-color:#2b2f3a;color:#eaeaea;box-shadow:0 0 10px rgba(0,150,255,.08);
}

/* ---------- Action Panel / History / Tone ---------- */
.action-panel{margin-top:1.4rem;padding:1rem;background:#f9fbff;border:1px solid #e1e7ff;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-0)}
.action-panel h3{margin-bottom:.4rem}
.action-panel p{font-size:.95rem;color:var(--sub);margin-bottom:1rem}
.action-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.cta-btn{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:.6rem 1rem;font-weight:800}
.cta-btn:hover{background:#004ecc}
body.dark-mode .action-panel{background:var(--card);border-color:#2a2a2a}
body.dark-mode .cta-btn{background:#2b2f3a}
body.dark-mode .cta-btn:hover{background:#3b3f4a}

.history-panel{display:none;margin-top:1.2rem;padding:1rem;background:#f8faff;border:1px solid #e4e9ff;border-radius:var(--radius)}
.history-panel h3{margin-bottom:.5rem;font-size:1.05rem}
.history-panel ul{list-style:none;padding-left:0}
.history-panel li{padding:.25rem 0;color:#333}
body.dark-mode .history-panel{background:#181b22;border-color:#2b2f3a;color:#ddd}

.tone-switch{margin-top:1rem;text-align:right}
.tone-switch label{font-weight:800;margin-right:.4rem}
.tone-switch select{padding:.3rem .6rem;border-radius:6px;border:1px solid #ccc}
body.dark-mode .tone-switch select{background:#1b1e26;color:#fff;border-color:#333}

/* ---------- Table ---------- */
.table-wrap{background:var(--surface);padding:2rem 0}
.table-head h2{margin-bottom:.35rem}
.table-head p{color:var(--muted)}
.cd-table{width:100%;border-collapse:collapse;font-size:.95rem}
.cd-table th,.cd-table td{border:1px solid rgba(0,0,0,.06);padding:.7rem;text-align:left}
.cd-table th{background:var(--tableHead);font-weight:800;color:#333}
.cd-table tr:nth-child(even){background:#fafafa}
.cd-table tr td:nth-child(2){color:var(--brand);font-weight:800}
body.dark-mode .cd-table th{background:var(--tableHead);color:#d9e1ff}
body.dark-mode .cd-table td{color:#a5b4ff;border-color:#2d3347}
body.dark-mode .cd-table tr:hover{background:rgba(0,150,255,.06)}
.cd-table tr{transition:background .22s ease, transform .22s ease}
.cd-table tr:hover{background:rgba(0,102,255,.05);transform:scale(1.001)}

/* ---------- Disclaimer ---------- */
.disclaimer{background:#f5f7fa;padding:1.5rem 0}
.notice{background:#fff;padding:1rem;border-radius:var(--radius);border:1px solid #eee;color:#444;position:relative;overflow:hidden}
body.dark-mode .disclaimer{background:#0e1117}
body.dark-mode .notice{background:#14171e;border-color:#2a2a2a;color:#ddd}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:1rem 0;margin-top:2rem;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.06);
  transition:background .3s ease;
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.badge{background:var(--brand);color:#fff;font-size:.8rem;padding:.35rem .7rem;border-radius:6px}
body.dark-mode .site-footer{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ---------- Modal (Glass, fixed) ---------- */
#reportModal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.38);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  z-index:9999;opacity:0;animation:fadeInModal .35s ease forwards;
}
@keyframes fadeInModal{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.modal-content{
  position:relative;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-radius:var(--radius-lg);padding:2rem 1.6rem;width:90%;max-width:420px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);animation:modalUp .32s ease;color:#111;
}
@keyframes modalUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
#closeModal{position:absolute;top:1rem;right:1rem;font-size:1.4rem;background:none;border:none;cursor:pointer;color:#444;transition:.25s}
#closeModal:hover{color:#000;transform:scale(1.06)}

.report-form label{display:block;margin-top:.8rem;font-weight:800}
.report-form input{
  width:100%;padding:.68rem;border:1px solid #cfd3da;border-radius:8px;margin-top:.35rem;font-size:1rem;background:#fff;color:#111;
}
.report-form input:focus{outline:none;box-shadow:var(--ring);border-color:var(--brand)}
#reportForm button.primary-btn{
  background:linear-gradient(90deg,#007aff,#4fc3f7);
  color:#fff;border:none;border-radius:8px;padding:.85rem 1.2rem;width:100%;font-weight:900;
  box-shadow:0 0 12px rgba(0,122,255,.35);
}
#reportForm button.primary-btn:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(0,122,255,.6)}
.success-msg{
  display:none;
  text-align:center;background:rgba(0,200,83,.1);color:#00c853;
  border:1px solid rgba(0,200,83,.28);border-radius:10px;padding:1rem;font-weight:900;margin-top:.9rem;
}

body.dark-mode #reportModal{background:rgba(0,0,0,.6)}
body.dark-mode .modal-content{background:rgba(25,25,30,.78);color:#f0f0f0;box-shadow:0 8px 28px rgba(0,0,0,.6)}
body.dark-mode #closeModal{color:#ccc}
body.dark-mode #closeModal:hover{color:#fff}
body.dark-mode .report-form input{background:#20232a;color:#fff;border:1px solid #333}
body.dark-mode #reportForm button.primary-btn{background:linear-gradient(90deg,#4fc3f7,#007aff);box-shadow:0 0 12px rgba(79,195,247,.4)}

/* ---------- Animations ---------- */
@keyframes fadeIn{to{opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width:700px){
  .searchbar input{width:100%}
  .micro-kpis{flex-direction:column;text-align:center}
  .footer-inner{flex-direction:column;gap:.6rem}
  .hero-title{font-size:1.95rem;line-height:1.28}
}

/* ---------- Focus states ---------- */
:focus-visible{outline:3px solid rgba(0,102,255,.35);outline-offset:2px;border-radius:6px}

/* ---------- Engine Button States ---------- */
button.loading{
  pointer-events:none;opacity:.8;
  background:linear-gradient(90deg,#005bea,#00c6fb) !important;
  box-shadow:0 0 12px rgba(0,150,255,.3);
  position:relative;overflow:hidden;
}
button.loading::after{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.15),rgba(255,255,255,.4),rgba(255,255,255,.15));
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{100%{left:100%}}
button.flash{animation:flashBlue .8s ease}
@keyframes flashBlue{0%{box-shadow:0 0 0 rgba(0,150,255,0)}50%{box-shadow:0 0 16px rgba(0,150,255,.7)}100%{box-shadow:0 0 0 rgba(0,150,255,0)}}

/* ==========================================================
   OPTIONAL THEME — “Tech Glow” (toggle with .glow-mode on body)
   ========================================================== */

body.glow-mode .hero-title{
  background:linear-gradient(90deg,#5af,#0ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
body.glow-mode .primary-btn,
body.glow-mode .cta-btn{
  background:linear-gradient(90deg,#007aff,#3ac8ff);
  box-shadow:0 8px 22px rgba(0,120,255,.35);
}
body.glow-mode .engine-result,
body.glow-mode .action-panel,
body.glow-mode .notice{
  border-color:rgba(0,150,255,.2);
  box-shadow:0 8px 24px rgba(0,150,255,.08);
}
body.dark-mode.glow-mode .engine-result,
body.dark-mode.glow-mode .action-panel,
body.dark-mode.glow-mode .notice{
  box-shadow:0 10px 28px rgba(0,180,255,.12);
}
/* --- Revenue Calculator --- */
.calc-wrap { background: var(--surface); padding: 2rem 0; }
.calc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin: 1rem 0 1.2rem; }
.calc-field label { display:block; font-weight:700; margin-bottom:.35rem; }
.calc-field input { width:100%; padding:.65rem; border:1px solid #ccc; border-radius:8px; background:#fff; color:#111; }
@media (max-width:900px){ .calc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .calc-grid{ grid-template-columns: 1fr; } }
body.dark-mode .calc-field input { background:#181b22; color:#fff; border:1px solid #333; }
/* --- Chart Widget --- */
.chart-wrap { background: var(--surface); padding: 2rem 0; }
.chart-controls { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin-bottom: 1rem; }
.chart-controls label { display:block; font-weight:700; margin-bottom:.35rem; }
.chart-controls input, .chart-controls select { padding:.55rem; border:1px solid #ccc; border-radius:8px; }
.indicators { display:flex; gap:1rem; align-items:center; }
#chartArea { width:100%; height:420px; border-radius:10px; border:1px solid rgba(0,0,0,.08); }
#rsiArea { width:100%; height:140px; margin-top:.6rem; border-radius:10px; border:1px solid rgba(0,0,0,.08); }
body.dark-mode .chart-controls input,
body.dark-mode .chart-controls select { background:#181b22; color:#fff; border:1px solid #333; }
body.dark-mode #chartArea, body.dark-mode #rsiArea { border-color: rgba(255,255,255,.1); }