/* =========================================================================
   Page shell: topbar, menu, layout, panels, tray, toast, login gate
   ========================================================================= */

/* --- Top bar ----------------------------------------------------------- */
.topbar{ display:flex; align-items:center; gap:16px; padding:16px 24px; background:var(--ice-yellow); flex-wrap:wrap; }
.topbar__title h1{ margin:0; font-size:19px; font-weight:800; color:var(--ice-black); letter-spacing:-0.01em; }
.topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.topbar__left{ position:relative; display:flex; align-items:center; }

.status-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; transition:background-color .2s ease, box-shadow .2s ease; cursor:default; }
.status-dot.status-red{ background:var(--status-red); box-shadow:0 0 0 3px rgba(229,72,77,.22); }
.status-dot.status-orange{ background:var(--status-orange); box-shadow:0 0 0 3px rgba(245,166,35,.22); }
.status-dot.status-green{ background:var(--status-green); box-shadow:0 0 0 3px rgba(47,179,68,.22); }

.icon-btn{ background:transparent; border:0; cursor:pointer; padding:6px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; transition:background-color .15s ease; position:relative; }
.icon-btn:hover{ background:rgba(0,0,0,.10); }
.icon-btn svg{ width:20px; height:20px; color:var(--ice-black); display:block; transition:transform .35s ease; }
.icon-btn:hover svg{ transform:rotate(35deg); }

/* --- Hamburger dropdown ------------------------------------------------
   Built as a list so more entries can be added above Settings later
   without restructuring. Settings stays last. */
.hamburger-dropdown{ position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:2px solid var(--ice-black); border-radius:10px; box-shadow:var(--shadow-float); min-width:180px; z-index:55; overflow:hidden; }
.hamburger-list{ list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:2px; }
.hamburger-list button{ width:100%; text-align:left; background:transparent; border:0; padding:10px 12px; border-radius:var(--radius-sm); font-family:var(--font-display); font-size:14px; cursor:pointer; }
.hamburger-list button:hover{ background:var(--ice-yellow-soft); }

/* --- Layout and panels -------------------------------------------------- */
.layout{ max-width:920px; margin:0 auto; padding:24px 18px 40px; display:grid; gap:22px; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-float); }
.panel h2{ font-size:14px; margin:0 0 4px; display:flex; align-items:center; gap:6px; }
.panel .sub{ font-size:12px; color:var(--ink-soft); margin:0 0 14px; }

/* --- Settings ----------------------------------------------------------- */
#settings-panel{ display:none; }
#settings-panel.open{ display:block; }
#settings-panel label{ display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
#settings-panel input{ width:100%; max-width:420px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:13px; margin-bottom:10px; transition:border-color .15s, box-shadow .15s; }
#settings-panel input:focus{ outline:none; border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.25); }
.settings-note{ font-size:11.5px; color:var(--ink-soft); max-width:520px; }

/* --- Buttons ------------------------------------------------------------ */
.btn{ font-family:var(--font-display); font-weight:700; font-size:13px; border-radius:var(--radius); border:2px solid var(--ice-black); cursor:pointer; padding:9px 16px; background:var(--ice-yellow); color:var(--ice-black); transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover:not(:disabled){ background:var(--ice-gold); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.15); }
.btn:active:not(:disabled){ transform:translateY(0); box-shadow:none; }
.btn:disabled{ background:#EDEDED; border-color:#DDD; color:#AAA; cursor:not-allowed; }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink-soft); }
.btn--ghost:hover:not(:disabled){ background:var(--line-soft); border-color:#BBB; color:var(--ink); transform:none; box-shadow:none; }
.btn--added{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
.btn--added:hover:not(:disabled){ background:var(--success-soft-hover); color:var(--success); }
.btn--small{ padding:6px 10px; font-size:12px; }

/* --- Bottom tray (Live EPREL mode only) --------------------------------- */
.tray{ position:fixed; left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:0 -6px 20px rgba(20,24,28,.06); }
.tray__summary{ font-size:13px; white-space:nowrap; }
.tray__summary strong{ font-family:var(--font-mono); color:var(--ink); }
.tray__items{ display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:100px; }
.tray__chip{ font-family:var(--font-mono); font-size:11px; background:var(--line-soft); border-radius:999px; padding:5px 10px; display:flex; gap:6px; align-items:center; }
.tray__chip button{ border:0; background:none; cursor:pointer; color:var(--ink-soft); transition:color .15s; }
.tray__chip button:hover{ color:var(--danger); }

/* --- Toast -------------------------------------------------------------- */
.toast{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%); background:var(--ice-black); color:#fff; padding:10px 18px; border-radius:999px; font-size:13px; z-index:50; max-width:80vw; text-align:center; }
.toast--error{ background:var(--danger); }
.toast--success{ background:var(--success); }
.toast[hidden]{ display:none; }

/* --- Inline hints ------------------------------------------------------- */
.hint{ font-size:12px; color:var(--ink-soft); margin:8px 2px 0; min-height:16px; }
.hint.warn{ color:var(--warning-text); }
.hint.error{ color:var(--danger); }
.hint.ok{ color:var(--success); }

/* --- Login gate ---------------------------------------------------------
   Shown on first visit until credentials are saved. The "crack open"
   animation is cosmetic on top of the same credential store the settings
   panel uses - logging in here IS saving credentials. */
.login-gate{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .55s ease;
}
.login-gate.gate-hidden{ opacity:0; pointer-events:none; }
.shell{ display:flex; flex-direction:column; align-items:center; width:320px; max-width:88vw; }
.shell-half{
  width:100%; background:#fff; border-left:2px solid var(--ice-black); border-right:2px solid var(--ice-black);
  box-sizing:border-box; transition:transform .55s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
.shell-top{
  padding:24px 20px 20px;
  border-top:2px solid var(--ice-black); border-bottom:2px dashed var(--ice-black);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  display:flex; align-items:center; justify-content:center;
}
.shell-bottom{
  padding:22px 22px 24px;
  border-bottom:2px solid var(--ice-black);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.shell-img{ width:100%; max-width:210px; display:block; }
.shell-form h2{ margin:0 0 14px; font-size:15px; text-align:center; }
.shell-form input{
  width:100%; padding:9px 11px; margin-bottom:9px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:13px; box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.shell-form input:focus{ outline:none; border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.25); }
.shell-form .btn{ width:100%; margin-top:4px; }
.gate-demo-link{
  display:block; text-align:center; margin-top:12px; font-size:11.5px; color:var(--ink-soft);
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease;
}
.gate-demo-link:hover{ border-color:var(--ink-soft); }

.shell.splitting .shell-top{ transform:translate(-42px,-95px) rotate(-20deg); opacity:0; }
.shell.splitting .shell-bottom{ transform:translate(42px,95px) rotate(16deg); opacity:0; }
.shell.shake .shell-top, .shell.shake .shell-bottom{ animation: shell-shake-anim .4s ease; }
@keyframes shell-shake-anim{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}