/* =========================================================
   rsz.css - Simplified
   ========================================================= */

/* =========================================================
   Theme tokens
   ========================================================= */
:root{
  --bg:#0b1020;
  --card:#101a33;
  --muted:#c8d3ef;
  --text:#eaf0ff;
  --line:rgba(255,255,255,.12);
  --btn:#4f7cff;
  --ok:#2dd4bf;
  --err:#fb7185;

  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm: 12px;
  --radius-lg: 18px;
  --focus-ring: 2px solid rgba(79,124,255,.7);
  --surface-1: rgba(0,0,0,.18);
  --surface-2: rgba(0,0,0,.16);
  --surface-3: rgba(0,0,0,.12);
  --menu-bg: rgba(16,26,51,.98);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Light theme tokens (used in docs page) */
  --lt-bg: #f8f9fc;
  --lt-bg-subtle: #f1f5f9;
  --lt-bg-code: #e8ecf4;
  --lt-text: #1a1a2e;
  --lt-text-heading: #0f172a;
  --lt-text-muted: #64748b;
  --lt-line: #e2e8f0;
  --lt-line-dark: #d1d9e6;
  --lt-link: #3b82f6;
  --lt-link-hover: #2563eb;
  --lt-accent: #e0e7ff;
}

/* =========================================================
   Base / utilities
   ========================================================= */
*{ box-sizing:border-box; }
.hidden{ display:none !important; }
.mono{ font-family: var(--mono); }
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.flex-1{ flex:1; }
.gap-sm{ gap:10px; }
.gap-md{ gap:12px; }
.nowrap{ white-space:nowrap; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pre-wrap{ white-space:pre-wrap; }
.word-break{ word-break:break-all; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(79,124,255,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(45,212,191,.18), transparent 55%),
    var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:flex-start;
  padding:24px;
  padding-bottom: 24px;
}

.wrap{
  width:min(900px, 100%);
  min-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  position: relative;
}

#appBlurWrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

#appBlurWrap > main{
  flex: 1;
}

/* =========================================================
   Locked / blur treatment
   ========================================================= */
#appMain.is-locked { opacity: 0.92; }
#appMain.is-locked input,
#appMain.is-locked textarea,
#appMain.is-locked select,
#appMain.is-locked button{ opacity: 0.55; }

body.auth-locked #appBlurWrap,
body.modal-open #appBlurWrap{
  filter: blur(5px);
  opacity: 0.70;
  transform: translateZ(0);
  pointer-events: none;
  user-select: none;
}

#topChrome{
  position: relative;
  z-index: 120;
  pointer-events: auto;
  filter: none;
  opacity: 1;
}
#topChrome #acctMenu{ position: absolute; z-index: 130; }

/* =========================================================
   Typography
   ========================================================= */
.title{
  font-size:22px;
  font-weight:700;
  letter-spacing:.2px;
  margin:0;
}
.subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.3;
}
label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin:10px 0 8px;
}
.help,
.hint{
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
}
.hint{
  margin-top:8px;
}

/* =========================================================
   Layout primitives
   ========================================================= */
.header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.row{
  display:flex;
  gap:10px;
  align-items:stretch;
}
.divider{
  height: 0;
  margin: 18px 0;
  border: 0;
}

/* =========================================================
   App topbar
   ========================================================= */
.app-topbar{
  position: relative;
  z-index: 120;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.app-topbar .topbar-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.app-topbar .title,
.app-topbar .subtitle,
.app-topbar .brand{
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  overflow-wrap:anywhere;
}
.topbar-left{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar-head{ flex: 1 1 auto; min-width: 0; }
.app-topbar #appChrome{ flex: 1 1 auto; min-width: 0; }
.app-topbar #topChrome{ flex: 0 0 auto; }

/* =========================================================
   Card / sections - Light theme inside cards
   ========================================================= */
.card{
  background: var(--lt-bg);
  border:1px solid var(--lt-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-inner{
  padding:18px;
  color: var(--lt-text);
}
.card-inner.compact{ padding:16px; }

/* Override text colors inside cards */
.card .title{ color: var(--lt-text-heading); }
.card .subtitle{ color: var(--lt-text-muted); }
.card .hint,
.card .help{ color: var(--lt-text-muted); }
.card label{ color: var(--lt-text-muted); }
.card .signin-err{ color: #e11d48; }
.card .text-muted{ color: var(--lt-text-muted); }
.card strong{ color: var(--lt-text-heading); }
.card a:not(.btn){ color: var(--lt-link); }
.card a:not(.btn):hover{ color: var(--lt-link-hover); }

.section{
  border:1px solid var(--lt-line);
  background: var(--lt-bg-subtle);
  border-radius: var(--radius-sm);
  padding:12px;
  margin:0 0 12px;
}
.section:last-child{ margin-bottom:0; }
.section-title{ margin:0; font-size:13.5px; font-weight:800; letter-spacing:.2px; color: var(--lt-text-heading); }
.section-desc{ margin:6px 0 0; color:var(--lt-text-muted); font-size:12.5px; line-height:1.35; }
.indent{ margin-top:10px; padding-left:12px; }

/* =========================================================
   Form controls - Light theme inside cards
   ========================================================= */
input[type="text"]:not(.otp-box),
input[type="url"],
input[type="number"],
select,
textarea{
  width:100%;
  border-radius: var(--radius-sm);
  background: #fff;
  border:1px solid var(--lt-line-dark);
  color: var(--lt-text);
  outline:none;
}
input[type="text"]:not(.otp-box),
input[type="url"],
input[type="number"]{
  padding:14px;
  font-size:16px;
}
select{
  padding: 14px 32px 14px 14px;
  font-size:16px;
}
input[type="text"]::placeholder,
input[type="url"]::placeholder{ color: var(--lt-text-muted); }
textarea{
  min-height:150px;
  resize:vertical;
  padding:12px;
  font-size:13.5px;
  line-height:1.45;
  font-family: var(--mono);
}
input[type="range"]{
  width: min(340px, 100%);
  accent-color: var(--btn);
}
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{
  border-color: var(--btn);
  box-shadow: 0 0 0 3px rgba(79,124,255,.15);
}

/* Short URL row */
.short-row input[type="text"]{ font-family: var(--mono); font-size: 14px; }

/* Mono text in cards */
.card .mono{ color: var(--lt-text); }
.time-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.time-field, .time-unit{ width:min(260px, 100%); }
.time-field input[type="number"]:disabled{ opacity:.6; cursor:not-allowed; }

/* Role select in user table */
.role-select{
  width: auto;
  min-width: 80px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--lt-line-dark);
  color: var(--lt-text);
}
.role-select:disabled{ opacity:.6; cursor:not-allowed; }

/* Domain select in shortener */
.domain-select{
  cursor: pointer;
  max-width: 400px;
}
.domain-select:disabled{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   Buttons + spinner
   ========================================================= */
.btn{
  border:0;
  border-radius: var(--radius-sm);
  padding:14px 16px;
  font-size:15px;
  font-weight:650;
  cursor:pointer;
  color:white;
  background:linear-gradient(180deg, rgba(79,124,255,1), rgba(79,124,255,.85));
  min-width:170px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow: 0 10px 22px rgba(79,124,255,.25);
}
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.btn.secondary{
  background: #fff;
  border:1px solid var(--lt-line-dark);
  color: var(--lt-text);
  box-shadow:none;
  min-width:auto;
  padding:12px 14px;
}
.btn.secondary:hover{
  background: var(--lt-bg-subtle);
  border-color: var(--lt-text-muted);
}
.btn.secondary:disabled{ opacity:.45; cursor:not-allowed; }
.btn.sm{ min-width:auto; padding:10px 12px; font-size:13.5px; }
.btn.icon{
  min-width:auto;
  width:36px;
  height:36px;
  padding:0;
  background: var(--lt-bg-subtle);
  border: 1px solid var(--lt-line-dark);
  color: var(--lt-text-muted);
  box-shadow: none;
}
.btn.icon:hover{
  background: var(--lt-line);
  color: var(--lt-text);
}

.spinner{
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  animation: spin .9s linear infinite;
  display:none;
}
.btn.loading .spinner{ display:inline-block; }
/* Secondary button has dark spinner for light bg */
.btn.secondary .spinner{
  border-color: rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.6);
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.link-btn{
  background: transparent;
  border: none;
  color: var(--lt-link);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  min-width: auto;
  box-shadow: none;
}
.link-btn:hover{ text-decoration: underline; color: var(--lt-link-hover); }
.link-btn:disabled{ color: var(--lt-text-muted); cursor: not-allowed; opacity: 0.6; }
.link-btn:disabled:hover{ text-decoration: none; }

/* =========================================================
   Status / badges - Light theme
   ========================================================= */
.status{
  border-radius: var(--radius-sm);
  border:1px solid var(--lt-line);
  background: var(--lt-bg-subtle);
  padding:12px;
  margin-top:14px;
  display:none;
  color: var(--lt-text);
}
.status.show{ display:block; }
.status.ok{ border-color: rgba(45,212,191,.5); background: rgba(45,212,191,.08); }
.status.err{ border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.08); }
.status-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }

.badge{
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--lt-line-dark);
  background: #fff;
  color: var(--lt-text);
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:middle;
}
.badge.ok{ border-color: rgba(45,212,191,.6); color: #0d9488; background: rgba(45,212,191,.12); }
.badge.err{ border-color: rgba(251,113,133,.6); color: #e11d48; background: rgba(251,113,133,.12); }
.badge.warn{ border-color: rgba(251,191,36,.5); color: #b45309; background: rgba(251,191,36,.12); }

.info-expired{ color: #e11d48; font-weight: 600; }
.info-reservation-expired{ color: #b45309; font-weight: 500; }
.info-muted{ color: var(--lt-text-muted); }

/* =========================================================
   Togglebar / pills / tabs - Light theme
   ========================================================= */
.togglebar{
  display:inline-flex;
  border:1px solid var(--lt-line-dark);
  border-radius:999px;
  overflow:hidden;
  background: #fff;
}
.pillbtn{
  border:0;
  background:transparent;
  color: var(--lt-text-muted);
  padding:10px 14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:lowercase;
  cursor:pointer;
  min-width:74px;
}
.pillbtn + .pillbtn{ border-left:1px solid var(--lt-line); }
.pillbtn.active{ color: var(--lt-text); background: var(--lt-accent); }
.pillbtn:focus-visible{ outline: var(--focus-ring); outline-offset:-2px; }

.adv-tabs-toggle{ margin:0 0 14px; }
.adv-tabs{ display:flex; gap:8px; margin:2px 0 14px; }
.adv-tab{
  border:1px solid var(--lt-line-dark);
  background: #fff;
  color: var(--lt-text-muted);
  padding:9px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:750;
  letter-spacing:.25px;
  cursor:pointer;
}
.adv-tab.active{ color: var(--lt-text); background: var(--lt-accent); border-color: var(--btn); }
.adv-panel{ display:none; }
.adv-panel.show{ display:block; }

/* Check chips */
.checks{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 2px; }
.check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--lt-line-dark);
  background: #fff;
  color: var(--lt-text);
  user-select:none;
}
.check input{ width:16px; height:16px; accent-color: var(--btn); margin:0; }
.check span{ font-size:13px; font-weight:650; letter-spacing:.2px; }
.check.tiny{ padding:8px 12px; }

/* =========================================================
   Account menu
   ========================================================= */
.topbar{ display:flex; justify-content:flex-end; position:relative; }
.topbar-btn{ min-width:auto; padding:10px 14px; }

.acctBtn{
  border:1px solid var(--line);
  background: var(--surface-1);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:none;
}
.acctBtn:hover{ background: rgba(255,255,255,.06); }
.acctBtn:focus-visible{ outline: var(--focus-ring); outline-offset:2px; }

.acctAvatar{
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-weight: 850;
  letter-spacing: .2px;
}
.acctAvatar--icon{ font-size: 18px; line-height: 1; }
.acctAvatar--initial{ background: var(--btn); border-color: var(--btn); color: #fff; font-size: 14px; }
.acctAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.acctBurger{
  width:18px; height:14px;
  display:inline-block;
  position:relative;
  opacity:.9;
}
.acctBurger::before{
  content:"";
  position:absolute;
  left:0; right:0; top:2px;
  height:2px;
  background: rgba(234,240,255,.75);
  border-radius:999px;
  box-shadow: 0 5px 0 rgba(234,240,255,.75), 0 10px 0 rgba(234,240,255,.75);
}

.menu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width:180px;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--menu-bg);
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index: 60;
}
.menu-item, a.menu-item, button.menu-item{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px;
  font-size:13.5px;
  font-weight:700;
  color: var(--text);
  text-decoration:none;
  background:transparent;
  border:0;
  cursor:pointer;
  outline: none;
}
a.menu-item:visited{ color: var(--text); }
.menu-item:hover{ background: rgba(255,255,255,.06); }
.menu-item:focus-visible{ outline: var(--focus-ring); outline-offset:-2px; }
.menu-sep{ height:1px; background: rgba(255,255,255,.10); margin: 6px 0; }
.authed-only.hidden,
.unauthed-only.hidden{ display:none !important; }

/* =========================================================
   Modal / sign-in
   ========================================================= */
.modal-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 220;
}
.modal-overlay.hidden{ display:none !important; }

/* Modal root - fixed position to cover viewport */
#modalRoot{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 300;
}
#modalRoot.hidden{ display:none !important; }

.signin-modal{
  width: min(520px, 100%);
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  backdrop-filter: blur(8px);
  transform: translateY(-48px);
}

.signin-x, .signin-back{
  position: absolute;
  top: 12px;
  width: 36px; height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: rgba(0,0,0,.10);
  color: rgba(234,240,255,.72);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.signin-x{ right: 12px; }
.signin-back{ left: 12px; }
.signin-x:hover, .signin-back:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(234,240,255,.92);
}

.signin-title{ margin: 6px 0 14px; text-align: center; font-size: 22px; font-weight: 850; letter-spacing: .2px; }
.signin-brand{ color: var(--btn); }
.signin-subtitle{ margin: 0 0 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.4; }
.signin-subtitle strong{ color: var(--text); font-weight: 700; }

.signin-input{
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.signin-input::placeholder{ color: rgba(234,240,255,.55); }
.signin-primary{ width: 100%; margin-top: 12px; min-width: auto; }

/* Modal form controls - keep dark theme */
.signin-modal input[type="text"],
.signin-modal input[type="url"],
.signin-modal input[type="number"],
.signin-modal select,
.signin-modal textarea{
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text);
}
.signin-modal input::placeholder,
.signin-modal textarea::placeholder{
  color: rgba(234,240,255,.5);
}
.signin-modal input:focus,
.signin-modal textarea:focus,
.signin-modal select:focus{
  border-color: rgba(79,124,255,.7);
  box-shadow: 0 0 0 3px rgba(79,124,255,.2);
}
.signin-modal label{
  color: var(--muted);
}
.signin-modal .hint,
.signin-modal .help{
  color: var(--muted);
}
.signin-modal .btn.secondary{
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text);
}
.signin-modal .btn.secondary:hover{
  background: rgba(255,255,255,.06);
}

.signin-or{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 16px 0 12px;
  color: rgba(234,240,255,.55);
  font-weight: 750;
  letter-spacing: .14em;
  font-size: 11px;
  justify-content:center;
}
.signin-or::before, .signin-or::after{ content:""; flex:1; height: 1px; background: rgba(255,255,255,.12); }
.signin-or span{ padding: 0 6px; }

.oauth-btn{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.oauth-btn:hover{ background: rgba(255,255,255,.06); }
.oauth-btn:disabled{ opacity: .55; cursor: not-allowed; }
.oauth-ico{
  width: 28px; height: 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.signin-err{ margin-top: 12px; font-size: 13px; color: var(--err); display: none; text-align: center; }
.signin-err.show{ display:block; }
.signin-step.hidden{ display:none; }

/* OTP */
#signinStepOtp .signin-title { margin-bottom: 10px; }
#signinStepOtp .signin-subtitle { margin-bottom: 14px; }

.otp-boxes{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 10px;
}
.otp-box{
  flex: 0 0 auto;
  width: 54px; height: 58px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  color: var(--text);
  font-size: 26px;
  font-weight: 750;
  font-family: var(--mono);
  text-align: center;
  line-height: 1;
  padding-top: 1px;
  appearance: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.otp-box:focus{
  border-color: rgba(79,124,255,.90);
  box-shadow: 0 0 0 3px rgba(79,124,255,.22);
  background: rgba(0,0,0,.10);
}
.otp-error{ min-height: 18px; margin: 0 0 6px; font-size: 13px; color: var(--err); text-align: center; }
.otp-boxes.error .otp-box{
  border-color: rgba(251,113,133,.90);
  box-shadow: 0 0 0 3px rgba(251,113,133,.14);
  animation: otp-shake 0.4s ease-in-out;
}
@keyframes otp-shake{
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.otp-resend-row{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.otp-countdown{ font-size: 13px; color: var(--muted); font-family: var(--mono); }
.otp-back{ margin-top: 16px; display: block; width: 100%; text-align: center; }
.name-input-last{ margin-top: 12px; }
.name-skip{ margin-top: 12px; display: block; width: 100%; text-align: center; }

/* Accounts modal */
.acct-modal{ min-height: 280px; }
.acct-view.hidden{ display: none; }
.acct-close, .acct-back{ font-size: 24px; }

.acct-kicked-msg{
  background: rgba(255,100,100,.15);
  border: 1px solid rgba(255,100,100,.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--err);
  text-align: center;
}

.acct-section{ margin-bottom: 18px; }
.acct-section-label{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.acct-current-name{
  font-size: 18px;
  font-weight: 700;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.acct-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct-item{
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.acct-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
}
.acct-item:disabled{
  opacity: .5;
  cursor: not-allowed;
}

.acct-add-btn{
  width: 100%;
  padding: 14px;
}

/* =========================================================
   API-Test - Light theme
   ========================================================= */
.dm-pre{
  min-height: 240px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--lt-bg-code);
  color: var(--lt-text);
}
#dmRespText[readonly]{ opacity: 0.92; background: var(--lt-bg-subtle); }
.row.dm-two{ flex-direction: column; align-items: stretch; }
.row.dm-two > div{ width: 100%; }

/* =========================================================
   Footer buildbar
   ========================================================= */
.buildbar{
  position: static;
  z-index: 50;
  max-width: 900px;
  margin: 24px auto 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  color: rgba(234,240,255,.45);
  padding: 10px 12px;
  background: rgba(11,16,32,.35);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
}
.buildbar span{ font-family: var(--mono); }
.buildbar a{ color: rgba(234,240,255,.72); text-decoration: underline; text-decoration-color: rgba(234,240,255,.35); }
.buildbar a:hover{ color: rgba(234,240,255,.9); text-decoration-color: rgba(234,240,255,.65); }
.buildbar > *{ display:inline-flex; align-items:center; }
.buildbar > * + *::before{ content:"•"; opacity:.6; margin: 0 10px; }

.dev-only{ display:none; }
.prod-only{ display:none; }
body.env-dev .dev-only{ display: initial; }
body.env-prod .prod-only{ display: initial; }

.home-link{ color: var(--btn); font-weight: 800; text-decoration: none; padding: 2px 6px; }
.home-link:hover{ text-decoration: underline; }
.home-link:focus-visible{ outline: var(--focus-ring); outline-offset: 2px; }

/* =========================================================
   Profile page - Light theme
   ========================================================= */
.profile-top{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.profile-title{ margin:0; font-size:16px; font-weight:850; color: var(--lt-text-heading); }
.profile-sub{ margin-top:4px; color: var(--lt-text-muted); font-size: 12.5px; }
.profile-avatar .acctAvatar{ width:44px; height:44px; }
.profile-badges{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }

/* =========================================================
   Tables - Light theme
   ========================================================= */
.table{ width:100%; border-collapse:collapse; }
.table thead th{
  text-align:left;
  padding: 12px;
  color: var(--lt-text-muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--lt-line);
}
.table tbody td{
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--lt-line);
  color: var(--lt-text);
}
.table tbody tr:last-child td{ border-bottom: 0; }
.tcell{ display:flex; align-items:center; gap:10px; min-width:0; }
.table-wrap{ overflow-x:auto; }

/* =========================================================
   Bottom actions / drawers - Light theme
   ========================================================= */
.bottom-actions{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lt-line);
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}
.drawer{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--lt-line);
  background: var(--lt-bg-subtle);
  display:none;
}
.drawer.show{ display:block; }
.drawer-row{ display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:end; }
.drawer-row label{ margin:0 0 6px; }
.drawer-row input{ height: 44px; }
.drawer-help{ margin-top: 8px; color: var(--lt-text-muted); font-size: 12.5px; }

/* =========================================================
   Domains table
   ========================================================= */
.dom-table{ table-layout: fixed; }
.dom-table col.col-toggle{ width: 8px; }
.dom-table col.col-actions{ width: 160px; }
.dom-table col.col-status{ width: 110px; }
.dom-table col.col-domain{ width: 35%; }
.dom-table col.col-key{ width: 65%; }

.dom-table thead th{ padding: 10px 12px; white-space: nowrap; }
.dom-table tbody td{ padding: 10px 12px; }
.dom-table .th-toggle{ padding-left: 8px; padding-right: 6px; }
.dom-table td:first-child{ padding-left: 8px; padding-right: 6px; }
.dom-table .th-actions{ text-align:right; }
.dom-table td.actions{ text-align: right; }

/* Domain cell truncation */
.dom-table td:nth-child(2) strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* API key cell */
.apikey-cell{
  display:flex;
  align-items:center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}
.apikey-text{
  display:block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.2;
}
.apikey-copy, .apikey-refresh{
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px;
  padding: 0 !important;
  background: var(--lt-bg-subtle);
  border: 1px solid var(--lt-line-dark);
  color: var(--lt-text-muted);
}
.apikey-copy:hover, .apikey-refresh:hover{
  background: var(--lt-line);
  color: var(--lt-text);
}

/* Status cell */
.status-cell{ max-width: 180px; }
.status-cell-inline{ display:none; }

/* Actions column */
.actions{ white-space: nowrap; }

/* Last row border fix */
.domRow.is-last td{ border-bottom: 0 !important; }
.domDetailsRow.is-last-details td{ border-bottom: 0 !important; }

/* Details subsections - Light theme */
.dom-subsec + .dom-subsec{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lt-line);
}
.dom-subsec-title{ margin: 0 0 6px; font-size: 13px; font-weight: 850; letter-spacing: .2px; color: var(--lt-text-heading); }
.dom-subsec-desc{ margin: 0 0 10px; color: var(--lt-text-muted); font-size: 12.5px; line-height: 1.35; }
.dom-subsec-body{ padding-left: 12px; }
/* Indent details to align with domain name (after toggle button) */
.domDetailsRow > td{ padding-left: 56px !important; }
.domDetailsRow .section{ padding: 12px; border: 0; background: transparent; }
.domDetailsRow .hint{ margin: 0; color: var(--lt-text-muted); }
.domDetailsRow .mono{ font-family: var(--mono); font-size: 13px; line-height: 1.35; color: var(--lt-text); }

/* Users page - Light theme */
.usercell .acctAvatar{
  width:34px;
  height:34px;
  flex: 0 0 34px;
  border-color: var(--lt-line-dark);
  background: var(--lt-bg-subtle);
  color: var(--lt-text-muted);
}
.usercell .acctAvatar--initial{
  background: var(--btn);
  border-color: var(--btn);
  color: #fff;
}
.user-name{ font-weight: 750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--lt-text-heading); }
.usrRole{ display:flex; gap:6px; align-items:center; overflow:hidden; white-space:nowrap; }
.usrEmail{ color: var(--lt-text-muted); }

/* Profile page avatar in light theme */
.profile-avatar .acctAvatar{
  border-color: var(--lt-line-dark);
  background: var(--lt-bg-subtle);
  color: var(--lt-text-muted);
}
.profile-avatar .acctAvatar--initial{
  background: var(--btn);
  border-color: var(--btn);
  color: #fff;
}

/* Account header - Light theme */
.acct-header{
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lt-line);
}
.acct-header-label{
  font-size: 11px;
  font-weight: 700;
  color: var(--lt-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.acct-header-name{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--lt-text-heading);
}
.acct-header-name .icon-btn{
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--lt-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.acct-header-name .icon-btn:hover{
  background: var(--lt-bg-subtle);
  border-color: var(--lt-line);
  color: var(--lt-text);
}
.acct-header-name .icon-btn.hidden{ display: none; }

/* Advanced account actions - Light theme */
.advanced-toggle{
  background: none;
  border: none;
  padding: 0;
  margin-right: auto;
  font-size: 13px;
  color: var(--lt-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.advanced-toggle:hover{ color: var(--lt-text); }
.advanced-toggle.hidden{ display: none; }
.advanced-content{
  margin-top: 14px;
  background: var(--lt-bg-subtle);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.advanced-content.hidden{ display: none; }
.advanced-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.advanced-item strong{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-text-heading);
  margin-bottom: 2px;
}
.advanced-item p{
  margin: 0;
  font-size: 13px;
  color: var(--lt-text-muted);
}

/* Danger button (used in profile delete, etc.) */
.btn.danger{
  background: linear-gradient(180deg, rgba(251,113,133,1), rgba(251,113,133,.85));
  box-shadow: 0 6px 16px rgba(251,113,133,.18);
  border: 1px solid rgba(251,113,133,.4);
  color: #fff;
}
.btn.danger:hover{
  background: linear-gradient(180deg, rgba(251,113,133,.9), rgba(251,113,133,.75));
}


/* Toggle button when placed inline with the domain */
.domToggleInline{
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px;
  padding: 0 !important;
  flex: 0 0 auto;
  background: var(--lt-bg-subtle);
  border: 1px solid var(--lt-line-dark);
  color: var(--lt-text-muted);
}
.domToggleInline:hover{
  background: var(--lt-line);
  color: var(--lt-text);
}

/* Make sure the domain text can still truncate next to the button */
.dom-table td:nth-child(2) .tcell{
  min-width: 0;
}
.dom-table td:nth-child(2) strong.truncate{
  min-width: 0;
}

/* =========================================================
   Users table
   ========================================================= */

/* Users table: help truncation behave predictably */
.table.usr-table{ table-layout: fixed; }
.table.usr-table th:nth-child(1){ width: 44%; }
.table.usr-table th:nth-child(2){ width: 36%; }
.table.usr-table th:nth-child(3){ width: 160px; }
.table.usr-table th:nth-child(4){ width: 120px; }

.usrEmail{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
   Accessibility
   ========================================================= */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================================================
   RESPONSIVE - All mobile styles consolidated
   ========================================================= */

/* OTP boxes - smaller on mobile */
@media (max-width: 520px){
  .otp-boxes{ gap: 10px; max-width: 280px; }
  .otp-box{ width: 48px; height: 54px; font-size: 24px; }
}

/* Main mobile breakpoint */
@media (max-width: 720px){
  body{
    align-items:flex-start;
    justify-content:flex-start;
    padding:14px;
    padding-bottom: 14px;
  }
  .wrap{ min-height: auto; }
  .header-row{ margin-bottom: 12px; }

  /* Topbar sticky + hide on scroll */
  .app-topbar{
    position: sticky;
    top: 0;
    z-index: 140;
    margin: -14px -14px 12px;
    background: transparent;
    transform: translateZ(0);
    transition: transform 160ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
  }
  .app-topbar .topbar-inner{ padding: 10px 14px; }
  .app-topbar.is-floating{
    background: rgba(16,26,51,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 30px rgba(0,0,0,.45);
  }
  .app-topbar.is-hidden{ transform: translateY(calc(-1 * (var(--topbar-h, 72px) + 14px))); }

  .buildbar{
    margin: 14px 0 0;
    max-width: none;
    border: 1px solid rgba(255,255,255,.10);
  }

  /* Short URL row grid */
  .row.short-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .row.short-row input{ grid-column: 1 / -1; }
  .row.short-row .btn.secondary{ min-width: 0; width: 100%; padding: 12px 0; }

  /* Stack rows */
  .row{ flex-direction:column; }

  /* Horizontal scrolling tabs */
  .adv-tabs{
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 12px;
    scroll-snap-type: x mandatory;
  }
  .adv-tab{ flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
  .adv-tabs::-webkit-scrollbar{ height: 0; }

  #shortenBtn.btn{ width:100%; min-width: 0; }

  /* On mobile, card takes full width with light background */
  .card{
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
    width: calc(100% + 28px);
    border-left: 0;
    border-right: 0;
  }

  /* Keep spacing nice */
  .card-inner{
    padding: 16px;
  }

  /* Row cards in light theme */
  .dom-table tr.domRow{
    background: #fff;
    border: 1px solid var(--lt-line-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  /* Bottom actions still need a separator */
  .bottom-actions{
    border-top: 0;
    padding-top: 10px;
  }
}

/* Domains table mobile - simplified stacking */
@media (max-width: 560px){
  .table-wrap{ overflow-x: visible !important; }
  .dom-table thead{ display:none; }

  .dom-table,
  .dom-table tbody,
  .dom-table tr,
  .dom-table td{ display:block; width:100%; }

  /* Each row becomes a card - light theme */
  .dom-table tr.domRow{
    border: 1px solid var(--lt-line-dark);
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
    padding-top: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .dom-table tbody td{ border: 0; padding: 0; }

  /* Simple vertical stacking */
  .dom-table tr.domRow > td{ margin-bottom: 8px; }
  .dom-table tr.domRow > td:last-child{ margin-bottom: 0; }

  /* Domain name */
  .dom-table tr.domRow > td:nth-child(2) strong{ font-size: 14px; }

  /* API key */
  .apikey-text{ font-size: 12.5px; }

  /* Status - inline */
  .status-cell{ max-width: none; }
  .status-cell .badge{ font-size: 11.5px; padding: 5px 9px; }

  /* Actions - right aligned */
  .dom-table td.actions{ text-align: right; margin-top: 4px; }
  .dom-table td.actions .btn + .btn{ margin-left: 8px; }

  /* Toggle/icon buttons smaller */
  .domToggleBtn.btn.icon, .dom-table .btn.icon{ width: 32px; height: 32px; }

  /* Details row */
  .dom-table tr.domDetailsRow{
    display:block;
    margin-top: -6px;
    margin-bottom: 10px;
  }
  .dom-table tr.domDetailsRow > td{ display:block; padding: 0 !important; border: 0 !important; }
  .dom-table tr.domDetailsRow .section{
    border-radius: 14px;
    padding: 12px;
    margin: 0;
    border: 1px solid var(--lt-line);
    background: var(--lt-bg-subtle);
  }
  .domRow.is-last{ border-bottom: 0 !important; }

  /* DNS table -> stacked cards */
  .domDetailsRow table.table thead{ display:none; }
  .domDetailsRow table.table,
  .domDetailsRow table.table tbody,
  .domDetailsRow table.table tr{ display:block; width:100%; }

  .domDetailsRow table.table tbody tr{
    border: 1px solid var(--lt-line);
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    margin: 10px 0;
  }

  /* Each TD becomes a label/value grid row */
  .domDetailsRow table.table tbody td{
    display:grid !important;
    grid-template-columns: 64px 1fr;
    gap:10px;
    align-items:start;
    border:0 !important;
    padding:6px 0 !important;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.25;
  }

  .domDetailsRow table.table tbody td::before{
    display:block;
    width:auto;
    color: var(--lt-text-muted);
    font-size: 12px;
    font-weight: 800;
    white-space:nowrap;
  }

  .domDetailsRow table.table tbody tr > td:nth-child(1)::before{ content:"Type"; }
  .domDetailsRow table.table tbody tr > td:nth-child(2)::before{ content:"Name"; }
  .domDetailsRow table.table tbody tr > td:nth-child(3)::before{ content:"Value"; }

  /* Make the value column wrap nicely */
  .domDetailsRow table.table tbody td{
    overflow-wrap:anywhere;   /* breaks long hostnames/records */
    word-break: break-word;   /* fallback */
  }

  /* --- Mobile: make Details read like a phone UI (single column) --- */

  /* Details section: kill the 2-col grid on mobile */
  .domDetailsRow .dom-subsec-body{
    padding-left: 0;
    display: block !important;
  }

  /* If you keep inline grid styles in HTML, force them to 1 column anyway */
  .domDetailsRow .dom-subsec-body[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* Give each label/value pair breathing room */
  .domDetailsRow .dom-subsec-body .hint{
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: .12px;
  }
  .domDetailsRow .dom-subsec-body .mono{
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  /* API key area: let it wrap more gracefully */
  .dom-table tr.domRow > td:nth-child(3){
    margin-top: 2px;
  }
  .apikey-cell{
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .apikey-text{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
  }
  .apikey-copy, .apikey-refresh{
    flex: 0 0 auto;
  }

  /* Actions: make them look intentional on mobile */
  .dom-table td.actions{
    display: flex;
    gap: 10px;
    justify-content: stretch;
    margin-top: 6px;
    text-align: left;
  }
  .dom-table td.actions .btn{
    flex: 1 1 0;
    min-width: 0;
  }

  /* Optional: slightly reduce inner “nested card” feeling */
  .dom-table tr.domRow{
    padding: 12px;
  }

  .status-cell-inline{
    display:inline-flex;
    flex:0 0 auto;
    margin-left:auto;
    justify-content:flex-end;
  }

  .dom-table .tcell.dom-cell{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .dom-name{
    flex:1 1 auto;
    min-width:0;
  }

  /* hide the old standalone status cell on mobile */
  .dom-table tr.domRow > td.status-cell{
    display:none !important;
  }


  /* Users table -> mobile cards */
  .table-wrap{ overflow-x: visible !important; }

  /* only on Users page table (safe: depends on usrTbody existing) */
  #usrTbody{ display:block; }

  #usrTbody tr,
  #usrTbody td{ display:block; width:100%; }

  /* Hide header row (keeps semantics on desktop) */
  #usrTbody{ }
  .table thead{ display:none; } /* if this is too global, change to: .usr-table thead{...} */

  /* Each user/invite row becomes a card - light theme */
  #usrTbody tr{
    border: 1px solid var(--lt-line-dark);
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }

  #usrTbody td{
    border: 0 !important;
    padding: 0 !important;
  }

  /* Stack spacing between “rows” inside the card */
  #usrTbody tr > td{ margin-bottom: 8px; }
  #usrTbody tr > td:last-child{ margin-bottom: 0; }

  /* User cell: allow name truncation */
  .usercell{ min-width:0; }
  .user-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size: 14px;
  }

  /* Email: wrap nicely and NOT drift under the label (same idea as DNS) */
  .usrEmail{
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.25;
    overflow-wrap:anywhere;
    word-break: break-word;
  }

  /* Status badges: keep on same line, allow wrap if multiple */
  .usrStatus{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }
  .usrStatus .badge{ font-size: 11.5px; padding: 5px 9px; }

  /* Actions: full-width primary-ish row like Domains */
  #usrTbody td.actions{
    display:flex;
    gap:10px;
    justify-content:stretch;
    margin-top: 6px;
  }
  #usrTbody td.actions .btn{
    flex: 1 1 0;
    min-width: 0;
  }

  /* Make small buttons feel right on mobile */
  #usrTbody td.actions .btn.sm{ padding: 10px 12px; }

}

/* =========================================================
   About section (collapsible on home page)
   ========================================================= */

/* Link in subtitle */
.about-link{
  background: none;
  border: none;
  padding: 0;
  color: var(--btn);
  font-size: inherit;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}
.about-link:hover{
  text-decoration: underline;
}
.about-link:focus-visible{
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* About content panel */
.about-content{
  margin-bottom: 16px;
  background: var(--lt-bg);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-content.hidden{
  display: none;
}

.about-inner{
  padding: 24px;
}

.about-footer{
  padding: 0 24px 20px;
  display: flex;
  justify-content: center;
}

.about-loading{
  text-align: center;
  padding: 24px;
  color: var(--lt-text-muted);
}

.about-error{
  text-align: center;
  color: var(--err);
}

/* Mobile: full-width about panel */
@media (max-width: 720px){
  .about-content{
    margin-left: -14px;
    margin-right: -14px;
    margin-bottom: 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    width: calc(100% + 28px);
  }
  .about-inner{
    padding: 20px;
  }
  .about-footer{
    padding: 0 20px 16px;
  }
}

/* =========================================================
   Documentation page (light theme inside card)
   ========================================================= */
.docs-page .card-inner{
  max-width: 100%;
  background: var(--lt-bg);
  color: var(--lt-text);
  border-radius: var(--radius-sm);
  padding: 32px;
}

.docs-content{
  line-height: 1.7;
  font-size: 15px;
  color: var(--lt-text);
}

.docs-loading,
.docs-error{
  text-align: center;
  padding: 48px 24px;
  color: var(--lt-text-muted);
}

.docs-error h2{
  color: var(--err);
  margin-bottom: 12px;
}

/* Headings */
.docs-content h1,
.docs-content h2{
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lt-line);
  color: var(--lt-text-heading);
}

.docs-content h1{
  font-size: 28px;
  margin: 0 0 16px 0;
}

.docs-content h2{
  font-size: 22px;
  font-weight: 600;
  margin: 32px 0 16px 0;
}

.docs-content h3,
.docs-content h4,
.docs-content h5,
.docs-content h6{
  font-weight: 600;
  color: var(--lt-text);
}

.docs-content h3{
  font-size: 18px;
  margin: 24px 0 12px 0;
}

.docs-content h4,
.docs-content h5,
.docs-content h6{
  font-size: 16px;
  margin: 20px 0 10px 0;
}

/* Paragraphs */
.docs-content p{
  margin: 0 0 16px 0;
}

/* Links */
.docs-content a{
  color: var(--lt-link);
  text-decoration: underline;
  text-decoration-color: rgba(59, 130, 246, 0.4);
  font-weight: 400;
}
.docs-content a:hover{
  color: var(--lt-link-hover);
  text-decoration-color: rgba(37, 99, 235, 0.7);
}

/* Lists */
.docs-content ul,
.docs-content ol{
  margin: 0 0 16px 0;
  padding-left: 24px;
}

.docs-content li{
  margin-bottom: 6px;
}

.docs-content li > ul,
.docs-content li > ol{
  margin-top: 6px;
  margin-bottom: 0;
}

/* Code - light theme with subtle background */
.docs-content code{
  font-family: var(--mono);
  font-size: 13px;
  background: var(--lt-bg-code);
  color: var(--lt-text);
  padding: 2px 6px;
  border-radius: 4px;
}

.docs-content pre{
  background: var(--lt-bg-code);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 0 0 16px 0;
  border: 1px solid var(--lt-line-dark);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.docs-content pre code{
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Tables */
.docs-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px 0;
  font-size: 14px;
}

.docs-content th,
.docs-content td{
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--lt-line);
}

.docs-content th{
  background: var(--lt-line);
  font-weight: 600;
  color: var(--lt-text-heading);
}

.docs-content tr:nth-child(even){
  background: var(--lt-bg-subtle);
}

/* Blockquotes */
.docs-content blockquote{
  margin: 0 0 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--lt-link-hover);
  background: var(--lt-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--lt-text);
}

.docs-content blockquote p:last-child{
  margin-bottom: 0;
}

/* Horizontal rule */
.docs-content hr{
  border: none;
  border-top: 1px solid var(--lt-line);
  margin: 32px 0;
}

/* Strong / emphasis */
.docs-content strong{
  font-weight: 600;
  color: var(--lt-text-heading);
}

/* First element no top margin */
.docs-content > *:first-child{
  margin-top: 0;
}

/* Responsive docs - aligned with main mobile breakpoint */
@media (max-width: 720px) {
  /* Edge-to-edge card on mobile */
  .docs-page.card{
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
    width: calc(100% + 28px);
  }

  /* Internal padding for content */
  .docs-page .card-inner{
    padding: 20px;
    border-radius: 0;
  }

  .docs-content table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .docs-content th,
  .docs-content td{
    padding: 8px 10px;
    font-size: 13px;
  }

  .docs-content h1{ font-size: 24px; }
  .docs-content h2{ font-size: 20px; }
  .docs-content h3{ font-size: 17px; }
}