/* ========== Base / Theme ========== */
:root{
  --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --text:#e5e7eb;
  --brand:#22d3ee; --brand2:#2563eb;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  /* Mobile-first sizing tokens */
  --container-pad:16px;
  --h1-size:22px;
  --video-size:220px;     /* circular viewport size */
  --thumb-size:64px;
  --tap-target:44px;      /* min hit area */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  background:radial-gradient(120% 200% at 0% 0%,#0b1220,#0f172a);
  color:var(--text);
  padding-left: max(var(--container-pad), env(safe-area-inset-left));
  padding-right:max(var(--container-pad), env(safe-area-inset-right));
}

/* ========== Shell ========== */
.container{
  max-width:1200px;
  margin:32px auto;
  padding:0;
}

header{align-items:flex-start; justify-content:flex-start; margin-bottom:16px}
.brand{display:flex; gap:14px; align-items:flex-start; min-width:0}
.brand .logo{margin-top:6px}
.brand-text{flex:1 1 auto; min-width:0}
/* --- Split title over two lines with a typing effect on “Authum” only --- */
.brand-title{margin:0; line-height:1.1; font-size:clamp(26px, 3.2vw, 40px)}
.brand-subtitle{margin:6px 0 10px; font-size:clamp(13px, 1.35vw, 18px); color:var(--muted); letter-spacing:.2px}

/* Fixed-width holder prevents layout jitter while inner span “types” */
.type-wrap{ display:inline-block; width:calc(var(--chars) * 1ch); overflow:hidden; }

/* Animate the inner span only */
.type{
  display:inline-block;
  white-space:nowrap;
  border-right:2px solid rgba(255,255,255,.6);
  width:0;
  animation:typeIn 1.6s steps(6,end) forwards, caret .8s step-end infinite;
}

.logo{
  width:40px; height:40px; border-radius:12px;
  background:radial-gradient(140% 180% at 0% 0%, var(--brand), var(--brand2));
  box-shadow:var(--shadow)
}
h1{
  font-size:var(--h1-size);
  margin:0;
  letter-spacing:.3px;
  white-space:normal;     /* allow wrapping; the “Authum” typing handles nowrap itself */
  overflow:visible;
  border-right:none;
}

/* Typing effect with reduced-motion support */
.typing{width:0; animation: typing 3s steps(36,end) forwards, blink .8s step-end infinite;}
.hidden { display: none !important; }

@keyframes typeIn{ from{width:0} to{width:6ch} }
@keyframes caret{ 50%{ border-color:transparent } }

/* Reduce motion & stop layout jitter on wider screens */
@media (prefers-reduced-motion: reduce){
  .type{animation:none; border-right:none; width:auto}
}

/* Pills row becomes scrollable on small screens */
.flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.scroll-x{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px}
.scroll-x::-webkit-scrollbar{display:none}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#0b1220; border:1px solid #334155; color:#cbd5e1; font-size:12px; white-space:nowrap
}
/* --- Responsive pills that use full width elegantly --- */
.pills{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
  align-items:center;
  width:100%;
  margin-top:6px;
}
.pills .pill{
  width:100%;
  justify-content:center;
  text-align:center;
}
@media (min-width: 1200px){
  .pills{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ========== Tabs & Cards ========== */
.tabs{display:flex; gap:8px; margin:8px 0 20px; flex-wrap:wrap}
.tab{
  padding:10px 14px; border-radius:999px; background:#0a1220; color:var(--muted);
  cursor:pointer; border:1px solid #1f2937; min-height:var(--tap-target)
}
.tab.active{background:var(--card); color:var(--text); border-color:#334155; box-shadow:var(--shadow)}

.grid{display:grid; grid-template-columns:1fr; gap:16px} /* mobile-first: single column */
.card{background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:14px; box-shadow:var(--shadow)}
.card h2{font-size:16px; margin:0 0 10px}
label{display:block; font-size:13px; color:var(--muted); margin:8px 0 6px}

input[type=text], input[type=number], input[type=password], select, textarea{
  width:100%; padding:12px;
  background:#0b1220; border:1px solid #334155; border-radius:10px; color:var(--text);
  min-height:var(--tap-target);
}

/* ========== Buttons & Rows ========== */
.row{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:10px; border:1px solid #1f2937;
  cursor:pointer; background:#111827; color:#e5e7eb; transition:.15s transform ease;
  min-height:var(--tap-target); flex:1 1 auto; /* stack nicely on mobile */
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand2)); border:none; color:white}
.btn.success{background:#14532d; color:#d1fae5; border-color:#166534}
.btn.warn{background:#3b2f0b; color:#fde68a; border-color:#a16207}
.btn.danger{background:#3f1d1d; color:#fecaca; border-color:#b91c1c}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ========== Circular Camera Viewport ========== */
.video-wrap{
  display:flex; justify-content:center; align-items:center;
  margin:0 auto;
  width:var(--video-size); height:var(--video-size);
  border-radius:50%; overflow:hidden;
  border:4px solid var(--brand2); box-shadow:0 0 12px rgba(0,0,0,.6);
  background:#020617;
}
.video-wrap video{width:100%; height:100%; object-fit:cover; transform:scale(1.2)}

/* ========== Thumbnails ========== */
.thumbs{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px
}
.thumb{
  position:relative; border:1px solid #334155; border-radius:12px;
  overflow:hidden; background:#020617; width:100%; aspect-ratio:1/1;
}
.thumb img{display:block; width:100%; height:100%; object-fit:cover; border-radius:50%}
.thumb .x{
  position:absolute; top:4px; right:4px; background:#000a; color:#fff; border:none;
  border-radius:999px; padding:6px 8px; cursor:pointer; font-size:12px; line-height:1; min-height:32px;
}

/* ========== Status & Footer ========== */
.status{
  padding:12px; background:#081019; border:1px solid #1f2937; color:var(--muted);
  border-radius:10px; min-height:46px
}
.danger{
  background:rgba(254,202,202,.1); border-color:var(--err); color:var(--err)
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:12px; white-space:pre-wrap}
footer{margin:24px 0; color:#94a3b8; font-size:12px; text-align:center}

/* ========== Breakpoints ========== */
/* Medium phones / small tablets */
@media (min-width: 480px){
  :root{
    --h1-size:24px;
    --video-size:260px;
    --thumb-size:72px;
  }
  .thumbs{grid-template-columns:repeat(4, 1fr)}
}

/* Tablets and up */
@media (min-width: 768px){
  :root{
    --container-pad:24px;
    --h1-size:26px;
    --video-size:280px;
    --thumb-size:80px;
  }
  .grid{grid-template-columns:1fr 1fr} /* two columns on larger screens */
  .btn{flex:0 0 auto}
}

/* Large desktops */
@media (min-width: 1200px){
  :root{ --video-size:300px }
}

/* Typing width matches headline length at wider screens */
@media (min-width: 768px){
  .typing{animation: typing 3s steps(36,end) forwards, blink .8s step-end infinite;}
}


/* Tune for very small phones */
@media (max-width: 420px){
  .pills{ grid-template-columns: repeat(2, 1fr); } /* 2 columns */
  .pill{ font-size:11px; padding:6px 8px; }
}
@media (max-width: 340px){
  .pills{ grid-template-columns: 1fr; } /* single column if super narrow */
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.table th, .table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.table th {
  background-color: #f0f0f0;
}
.hidden {
  display: none;
}