/* ═══════════════════════════════════════╗
   Bit Room Marketing Studio — Brand System
   ╚═══════════════════════════════════════ */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@500;600;700&family=Orbitron:wght@400;700&display=swap');

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Rajdhani',sans-serif;font-weight:500;background:var(--bg);color:var(--w);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;outline:none;border:none;background:none;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}

/* ─── CSS Variables ─── */
:root{
  --r:#CC1111;
  --rh:#FF2020;
  --rd:#7A0000;
  --g:#C8A84A;
  --gl:#F0D070;
  --gd:#7A5800;
  --w:#F5F0EC;
  --bg:#06060A;
  --bg2:#0E0E16;
  --bg3:#161622;
  --bg4:#1A1A2E;
  --brd:rgba(204,17,17,.2);
  --brdg:rgba(200,168,74,.22);
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Rajdhani',sans-serif;
  --font-mono:'Orbitron',monospace;
  --radius:11px;
  --radius-sm:6px;
  --radius-pill:50px;
  --shadow-red:0 0 30px rgba(204,17,17,.3);
  --shadow-gold:0 0 30px rgba(200,168,74,.3);
  --transition:.3s ease;
}

/* ─── Atmospheric Background ─── */
body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(204,17,17,.07) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%,rgba(200,168,74,.05) 0%,transparent 60%);
  pointer-events:none;z-index:0;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--rd);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--r)}

/* ─── Brand Logo Chip ─── */
.brand-chip{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,var(--w),var(--r) 40%,var(--rd));
  border:2px solid var(--g);
  box-shadow:var(--shadow-red),inset 0 2px 4px rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;
}
.brand-chip::after{
  content:'BP';font-family:var(--font-display);font-size:16px;letter-spacing:2px;
  background:linear-gradient(135deg,var(--gl),var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.brand-chip-sm{width:40px;height:40px}
.brand-chip-sm::after{font-size:12px}
.brand-chip-lg{width:72px;height:72px}
.brand-chip-lg::after{font-size:22px}

/* ─── Brand Title ─── */
.brand-title{
  font-family:var(--font-display);font-size:clamp(28px,5vw,48px);letter-spacing:4px;line-height:1.1;
  background:linear-gradient(135deg,var(--gd),var(--g),var(--r),var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ─── Brand Sub ─── */
.brand-sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:4px;
  color:rgba(245,240,236,.35);text-transform:uppercase;
}

/* ─── Panels ─── */
.panel{
  background:var(--bg2);border:1px solid var(--brd);border-radius:var(--radius);padding:20px;
}
.panel-gold{
  border-color:var(--brdg);background:linear-gradient(135deg,var(--bg2),rgba(200,168,74,.04));
}
.panel-title{
  font-family:var(--font-display);font-size:22px;letter-spacing:3px;
  background:linear-gradient(135deg,var(--gl),var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:12px;
}

/* ─── Section Label ─── */
.section-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(245,240,236,.3);display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--brd)}

/* ─── Divider ─── */
.divider{height:1px;background:var(--brd);margin:16px 0;border:none}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 24px;border-radius:var(--radius-sm);font-weight:600;
  font-size:14px;letter-spacing:.5px;cursor:pointer;
  transition:all var(--transition);border:1px solid transparent;
  white-space:nowrap;user-select:none;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.btn-red{
  background:linear-gradient(135deg,var(--rd),var(--r));color:var(--w);
  box-shadow:var(--shadow-red);
}
.btn-red:hover{box-shadow:0 0 40px rgba(204,17,17,.5);transform:translateY(-2px)}

.btn-gold{
  background:linear-gradient(135deg,var(--gd),var(--g),var(--gl));color:var(--bg);
  box-shadow:0 0 30px rgba(200,168,74,.25);
}
.btn-gold:hover{box-shadow:0 0 40px rgba(200,168,74,.4);transform:translateY(-2px)}

.btn-ghost{
  background:transparent;border-color:var(--brd);color:rgba(245,240,236,.6);
}
.btn-ghost:hover{border-color:var(--r);color:var(--w);background:rgba(204,17,17,.06)}

.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:14px 32px;font-size:16px}

/* ─── Input Fields ─── */
.input-field{
  width:100%;padding:12px 16px;background:var(--bg3);border:1px solid var(--brd);
  border-radius:var(--radius-sm);color:var(--w);font-size:15px;transition:border var(--transition);
}
.input-field:focus{border-color:var(--r);box-shadow:0 0 20px rgba(204,17,17,.15)}
.input-field::placeholder{color:rgba(245,240,236,.25)}
textarea.input-field{resize:vertical;min-height:80px}
select.input-field{appearance:none;cursor:pointer}
.input-field-sm{padding:8px 12px;font-size:13px}

/* ─── Output Box ─── */
.output-box{
  background:#000;border:1px solid var(--brd);border-radius:var(--radius-sm);
  padding:16px;font-family:var(--font-mono);font-size:12px;line-height:1.6;
  color:#FFD8A0;max-height:300px;overflow-y:auto;white-space:pre-wrap;
  word-break:break-word;
}
.copy-box{
  composes:output-box;color:var(--w);
}

/* ─── Copy Button ─── */
.copy-btn{
  padding:6px 14px;border:1px solid var(--r);border-radius:var(--radius-sm);
  color:var(--rh);background:transparent;cursor:pointer;font-size:12px;
  font-weight:600;letter-spacing:.5px;transition:all var(--transition);
}
.copy-btn:hover{background:rgba(204,17,17,.12);box-shadow:0 0 20px rgba(204,17,17,.2)}

/* ─── Badge ─── */
.badge{
  display:inline-flex;align-items:center;padding:3px 8px;
  background:rgba(204,17,17,.1);border:1px solid rgba(204,17,17,.25);
  border-radius:var(--radius-pill);color:var(--rh);
  font-family:var(--font-mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;
}

/* ─── Choice Buttons ─── */
.choice-btn{
  padding:8px 18px;background:var(--bg3);border:1px solid var(--brd);
  border-radius:var(--radius-sm);color:rgba(245,240,236,.7);cursor:pointer;
  font-weight:600;font-size:14px;transition:all var(--transition);text-align:center;
}
.choice-btn:hover{border-color:var(--r);transform:translateY(-2px);color:var(--w)}
.choice-btn.selected{background:rgba(204,17,17,.15);border-color:var(--r);color:var(--w);box-shadow:0 0 15px rgba(204,17,17,.2)}
.choice-btn-sm{padding:5px 12px;font-size:12px}

/* ─── Nav Tabs ─── */
.nav-tabs{
  display:flex;background:var(--bg2);border:1px solid var(--brd);
  border-radius:10px;padding:4px;overflow-x:auto;gap:2px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{
  flex:1;padding:8px 14px;text-align:center;border-radius:6px;
  background:transparent;color:rgba(245,240,236,.4);cursor:pointer;
  font-weight:600;font-size:13px;letter-spacing:.5px;transition:all var(--transition);
  white-space:nowrap;border:none;
}
.nav-tab:hover{color:var(--w)}
.nav-tab.active{
  background:linear-gradient(135deg,rgba(204,17,17,.25),rgba(200,168,74,.15));
  color:var(--g);box-shadow:0 0 20px rgba(200,168,74,.1);
}

/* ─── Progress Bar ─── */
.progress-bar{display:flex;gap:4px;width:100%}
.progress-dot{flex:1;height:2px;border-radius:1px;background:var(--bg3);transition:background var(--transition)}
.progress-dot.active{background:var(--r)}
.progress-dot.done{background:var(--rd)}

/* ─── Typing Indicator ─── */
.typing-indicator{display:flex;gap:4px;padding:12px 16px;align-items:center}
.typing-indicator span{
  width:7px;height:7px;border-radius:50%;background:rgba(245,240,236,.35);
  animation:dotBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}

/* ─── Messages ─── */
.msg-bot{display:flex;gap:10px;align-items:flex-start;max-width:88%}
.msg-user{display:flex;gap:10px;align-items:flex-start;max-width:88%;flex-direction:row-reverse;margin-left:auto}
.bubble-bot{
  background:var(--bg2);border:1px solid var(--brd);border-radius:12px 12px 12px 3px;
  padding:12px 16px;font-size:14px;line-height:1.5;
}
.bubble-user{
  background:linear-gradient(135deg,var(--rd),var(--r));
  border-radius:12px 12px 3px 12px;padding:12px 16px;font-size:14px;line-height:1.5;
  color:var(--w);
}

/* ─── Output Card ─── */
.output-card{
  background:var(--bg3);border:1px solid var(--brdg);border-radius:10px;
  padding:16px;margin-top:12px;
}
.output-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.output-tab{
  padding:6px 14px;background:var(--bg4);border:1px solid var(--brd);
  border-radius:var(--radius-sm);color:rgba(245,240,236,.5);cursor:pointer;
  font-size:12px;font-weight:600;transition:all var(--transition);
}
.output-tab:hover{border-color:var(--r);color:var(--w)}
.output-tab.active{background:rgba(204,17,17,.15);border-color:var(--r);color:var(--w)}

/* ─── Grid Helpers ─── */
.f1,.f2,.f3,.f4{display:grid;gap:16px}
.f1{grid-template-columns:1fr}
.f2{grid-template-columns:1fr 1fr}
.f3{grid-template-columns:1fr 1fr 1fr}
.f4{grid-template-columns:1fr 1fr 1fr 1fr}

@media(max-width:560px){
  .f2,.f3,.f4{grid-template-columns:1fr}
  .f3-md{grid-template-columns:1fr!important}
}
@media(max-width:360px){
  .f2-sm{grid-template-columns:1fr!important}
}

/* ─── Utility ─── */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}
.justify-between{justify-content:space-between}.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.w-full{width:100%}.text-center{text-align:center}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.p-16{padding:16px}.p-20{padding:20px}
.dim{color:rgba(245,240,236,.4)}
.text-red{color:var(--rh)}.text-gold{color:var(--g)}
.font-mono{font-family:var(--font-mono)}.font-display{font-family:var(--font-display)}
.text-sm{font-size:12px}.text-xs{font-size:10px}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pointer{cursor:pointer}
.relative{position:relative}
.overflow-auto{overflow:auto}

/* ─── Animations ─── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}
@keyframes dotBounce{
  0%,60%,100%{transform:translateY(0)}
  30%{transform:translateY(-6px)}
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 20px rgba(204,17,17,.2)}
  50%{box-shadow:0 0 40px rgba(204,17,17,.5)}
}

.fade-up{animation:fadeUp .4s ease both}
.msg-in{animation:msgIn .35s ease both}
.shimmer{
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:shimmer 1.5s ease infinite;
}

/* ─── Scrollbar None ─── */
.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}
.scrollbar-none::-webkit-scrollbar{display:none}

/* ─── Toast Notification ─── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--bg2);border:1px solid var(--brdg);border-radius:var(--radius-sm);
  padding:12px 24px;color:var(--w);font-weight:600;font-size:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);z-index:9999;
  animation:fadeUp .3s ease;pointer-events:none;
}

/* ─── Loading Spinner ─── */
.spinner{
  width:24px;height:24px;border:2px solid var(--brd);
  border-top-color:var(--r);border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}