/* ══════════════════════════════════════════════════════════════
   HitBullsEye User Portal — "Warm Noir" Aesthetic
   Premium dark with amber/gold, grain texture, editorial spacing
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --noir:#0f0d0a;
  --noir-2:#1a1714;
  --noir-3:#242019;
  --brd:#2e2a22;
  --brd-f:#d4a43a;
  --t1:#ece6d8;
  --t2:#b0a898;
  --t3:#7a7368;
  --amber:#d4a43a;
  --amber-dim:rgba(212,164,58,0.08);
  --amber-glow:rgba(212,164,58,0.15);
  --red:#c0392b;
  --green:#2ecc71;
}

html,body{
  height:100%;
  font-family:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  background:var(--noir);
  color:var(--t1);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--amber);color:var(--noir)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brd);border-radius:2px}

button{font-family:inherit;cursor:pointer;border:none;outline:none}
input{font-family:inherit;outline:none}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* ── Grain Overlay ── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:128px 128px;
}

/* ── Ambient Glow ── */
body::after{
  content:'';position:fixed;
  width:700px;height:700px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--amber-glow) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  animation:ambientPulse 8s ease-in-out infinite;
}
@keyframes ambientPulse{
  0%,100%{opacity:0.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:0.8;transform:translate(-50%,-50%) scale(1.1)}
}

/* ── Layout ── */
.portal-wrap{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}

/* ── Card ── */
.portal-card{
  width:100%;max-width:1100px;
  padding:56px 52px;
  position:relative;
}

/* Top accent line */
.portal-card::before{
  content:'';position:absolute;top:0;left:52px;right:52px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);
}

/* ── Brand Header ── */
.brand{text-align:center;margin-bottom:48px;animation:revealUp .6s cubic-bezier(.16,1,.3,1) both}
.brand-icon{
  font-size:44px;display:block;margin-bottom:16px;
  filter:drop-shadow(0 0 20px var(--amber-glow));
  animation:iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.brand h1{
  font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;
  font-size:32px;font-weight:800;
  letter-spacing:-0.5px;
  color:var(--t1);
  margin-bottom:6px;
}
.brand p{
  font-size:13px;color:var(--t3);
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-weight:500;
}

/* ── Staggered Reveal ── */
@keyframes revealUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{animation:revealUp .5s cubic-bezier(.16,1,.3,1) both}
.reveal-1{animation-delay:.1s}
.reveal-2{animation-delay:.18s}
.reveal-3{animation-delay:.26s}
.reveal-4{animation-delay:.34s}
.reveal-5{animation-delay:.42s}

/* ── Form Elements ── */
.field{margin-bottom:28px}
.field label{
  display:block;
  font-size:11px;font-weight:600;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:12px;
}
.field input{
  width:100%;padding:16px 0;
  background:transparent;
  border:none;border-bottom:1px solid var(--brd);
  color:var(--t1);font-size:17px;
  letter-spacing:0.3px;
  transition:border-color .3s;
}
.field input::placeholder{color:var(--t3);font-weight:300}
.field input:focus{border-bottom-color:var(--amber)}

/* ── OTP Digits ── */
.otp-row{display:flex;gap:12px;justify-content:center;margin-bottom:28px}
.otp-row input{
  width:52px;height:64px;
  text-align:center;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:28px;font-weight:700;
  color:var(--amber);
  background:transparent;
  border:none;
  border-bottom:2px solid var(--brd);
  padding:0;
  caret-color:var(--amber);
  transition:border-color .3s,transform .2s;
}
.otp-row input:focus{
  border-bottom-color:var(--amber);
  transform:translateY(-2px);
}
.otp-row input.filled{
  border-bottom-color:var(--amber);
}

/* ── Buttons ── */
.btn{
  width:100%;padding:16px;
  font-size:14px;font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  background:var(--amber);
  color:var(--noir);
  border:none;
  transition:all .25s;
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity:0;transition:opacity .25s;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(212,164,58,0.25);
}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}

.btn-ghost{
  width:100%;
  background:transparent;
  border:1px solid var(--brd);
  color:var(--t3);
  padding:12px;
  font-size:12px;font-weight:500;
  letter-spacing:0.3px;
  margin-top:12px;
  cursor:pointer;
  transition:all .25s;
}
.btn-ghost:hover{border-color:var(--t3);color:var(--t1)}

/* ── Messages ── */
.msg{font-size:13px;margin-top:12px;min-height:18px;text-align:center}
.msg-err{color:var(--red)}
.msg-ok{color:var(--green)}

/* ── OTP Timer ── */
.otp-timer{
  text-align:center;
  font-size:12px;color:var(--t3);
  margin-bottom:24px;
  letter-spacing:0.3px;
}
.otp-timer span{
  font-family:'JetBrains Mono',monospace;
  color:var(--amber);
  font-weight:600;
}

/* ── Email Display ── */
.email-highlight{
  display:inline-block;
  color:var(--amber);
  font-weight:600;
  border-bottom:1px dashed var(--amber);
  padding-bottom:1px;
}

/* ── Commands Panel ── */
.commands-panel{text-align:center}
.greeting{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:24px;font-weight:700;
  margin-bottom:4px;
}
.greeting span{color:var(--amber)}
.hint{color:var(--t3);font-size:12px;margin-bottom:36px;letter-spacing:0.3px}

.cmd-group{text-align:left;margin-bottom:20px}
.cmd-group label{
  display:block;
  font-size:10px;font-weight:600;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:8px;
}

.cmd-box{
  position:relative;
  background:var(--noir-2);
  border:1px solid var(--brd);
  padding:16px 48px 16px 16px;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:11.5px;
  color:var(--t2);
  word-break:break-all;
  line-height:1.6;
  cursor:pointer;
  transition:all .25s;
  overflow:hidden;
}

/* Terminal prompt indicator */
.cmd-box::before{
  content:'▸';
  color:var(--amber);
  margin-right:8px;
  font-weight:700;
}

.cmd-box:hover{
  border-color:var(--amber);
  background:var(--noir-3);
}

.cmd-box .copy-icon{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  opacity:0;
  transition:opacity .25s;
}
.cmd-box:hover .copy-icon{opacity:0.7}

/* ── Separator ── */
.sep{
  width:48px;height:1px;
  background:var(--brd);
  margin:32px auto;
}

/* ── Toast ── */
#toast-container{
  position:fixed;top:24px;right:24px;
  display:flex;flex-direction:column;gap:8px;z-index:9999;
}
.toast{
  padding:14px 24px;
  font-size:13px;font-weight:500;
  letter-spacing:0.2px;
  animation:toastIn .3s cubic-bezier(.16,1,.3,1);
  border-left:3px solid;
}
.toast-ok{
  background:rgba(46,204,113,0.08);
  border-left-color:var(--green);
  color:var(--green);
}
.toast-err{
  background:rgba(192,57,43,0.08);
  border-left-color:var(--red);
  color:var(--red);
}
@keyframes toastIn{
  from{opacity:0;transform:translateX(24px)}
  to{opacity:1;transform:translateX(0)}
}

/* ── Shake ── */
.shake{animation:shake .35s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* ── Split Layout ── */
.split-layout{display:flex;gap:32px;align-items:stretch}
.split-left{flex:1;min-width:0}
.split-right{width:360px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--brd);padding-left:32px}
.split-chat-header{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--t2);margin-bottom:16px;letter-spacing:.3px}
.chat-unread-dot{display:inline-block;width:8px;height:8px;background:var(--amber);border-radius:50%;margin-left:4px;vertical-align:middle}

/* ── Announcement ── */
#announcement-panel{margin-bottom:24px;animation:revealUp .4s cubic-bezier(.16,1,.3,1) both}
.announce-inner{background:rgba(212,164,58,0.06);border:1px solid rgba(212,164,58,0.15);padding:18px 22px;border-left:3px solid var(--amber)}
.announce-title{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--amber);margin-bottom:6px}
.announce-msg{font-size:13px;color:var(--t2);line-height:1.6;margin:0}

/* ── User Chat ── */
.user-chat-panel{display:flex;flex-direction:column;flex:1;min-height:400px}
.user-chat-messages{flex:1;overflow-y:auto;padding:16px 0;display:flex;flex-direction:column;gap:8px}
.user-chat-empty{text-align:center;color:var(--t3);font-size:13px;padding:60px 0}
.user-chat-msg{max-width:85%;padding:10px 14px;font-size:13px;line-height:1.5}
.user-chat-msg-me{align-self:flex-end;background:var(--amber-dim);border:1px solid rgba(212,164,58,.2);color:var(--t1)}
.user-chat-msg-admin{align-self:flex-start;background:var(--noir-2);border:1px solid var(--brd);color:var(--t1)}
.user-chat-msg-broadcast{align-self:center;background:rgba(212,164,58,.05);border:1px solid rgba(212,164,58,.12);color:var(--amber);font-size:12px;max-width:90%;text-align:center}
.user-chat-msg-time{font-size:9px;color:var(--t3);margin-top:4px}
.user-chat-input-bar{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--brd);align-items:flex-end}
.user-chat-input-bar textarea{flex:1;padding:10px;background:var(--noir-2);border:1px solid var(--brd);color:var(--t1);font-size:13px;resize:none;min-height:40px;max-height:160px;font-family:'Instrument Sans',sans-serif;transition:border .2s;overflow-y:auto}
.user-chat-input-bar textarea:focus{border-color:var(--amber)}
.user-chat-send{padding:10px 18px;background:var(--amber);color:var(--noir);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;transition:all .2s;white-space:nowrap}
.user-chat-send:hover{box-shadow:0 4px 12px rgba(212,164,58,.25)}
.user-chat-attach-btn{cursor:pointer;font-size:18px;padding:6px 4px;opacity:.6;transition:opacity .2s}
.user-chat-attach-btn:hover{opacity:1}
.user-chat-attach-preview{display:flex;align-items:center;gap:8px;padding:8px 0;margin-top:4px}
.user-chat-attach-preview img{max-height:60px;max-width:120px;border:1px solid var(--brd);object-fit:cover}
.user-attach-remove{background:var(--red);color:#fff;border:none;font-size:11px;padding:2px 8px;cursor:pointer}
.user-chat-msg img{max-width:200px;max-height:160px;border:1px solid var(--brd);margin-top:6px;cursor:pointer;display:block}

/* ── Collapsible Guides ── */
.guide-details{margin-bottom:20px}
.guide-details summary{cursor:pointer;padding:10px 14px;background:var(--noir-2);border:1px solid var(--brd);font-size:12px;font-weight:600;color:var(--t2);letter-spacing:.3px;list-style:none;transition:all .2s}
.guide-details summary::-webkit-details-marker{display:none}
.guide-details summary::before{content:'▸ ';color:var(--amber);font-weight:700}
.guide-details[open] summary::before{content:'▾ '}
.guide-details[open] summary{border-color:var(--amber);color:var(--t1)}
.guide-content{padding:16px 18px;background:var(--noir-2);border:1px solid var(--brd);border-top:none;font-size:12px;line-height:1.8;color:var(--t2)}
.guide-content ol{padding-left:18px;margin:0}
.guide-content li{margin-bottom:6px}
.guide-content li strong{color:var(--t1)}
.guide-content code{background:var(--noir-3);padding:1px 6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--amber)}
.guide-content ul{padding-left:16px;margin:4px 0 0}
.guide-warn{margin-top:14px;padding:10px 14px;background:rgba(192,57,43,.06);border:1px solid rgba(192,57,43,.15);border-left:3px solid var(--red);font-size:11px;color:var(--red);font-weight:500}

/* ── Footer ── */
.portal-footer{text-align:center;margin-top:48px;font-size:11px;color:var(--t3);letter-spacing:0.5px;opacity:0.5}

/* ── Mobile ── */
@media(max-width:800px){
  .portal-card{padding:40px 24px;max-width:640px}
  .portal-card::before{left:24px;right:24px}
  .brand h1{font-size:26px}
  .otp-row input{width:44px;height:54px;font-size:22px}
  .otp-row{gap:8px}
  .cmd-box{font-size:10px;padding:12px 40px 12px 12px}
  .split-layout{flex-direction:column;gap:24px}
  .split-right{width:100%;border-left:none;padding-left:0;border-top:1px solid var(--brd);padding-top:24px}
  .user-chat-panel{min-height:300px}
}