/* =========================================================
   TeddyCG Refined Dark Theme
   Light mode intentionally uses the original blue TeddyCG palette
   from base.css/components. This file only refines dark mode.
   ========================================================= */

html[data-theme="dark"]{
  --bg-top:#080c12;
  --bg-mid:#0b1119;
  --bg-bottom:#070a0f;

  --card:rgba(15,22,31,.94);
  --field-bg:#111b26;
  --field-output:#0d151e;

  --text:#f4f8fc;
  --label:#dbe9f6;
  --muted:#93a7ba;

  --border:#39536a;
  --border-soft:#263b4d;

  --primary:#45adff;
  --primary-hover:#69beff;
  --primary-soft:#102a3e;

  --soft:#101b27;
  --success:#55d98a;
  --danger:#ff7474;

  --shadow:0 30px 90px rgba(0,0,0,.46),
           0 10px 30px rgba(0,64,108,.13),
           inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 50% 10%, rgba(55,168,255,.12) 0 10%, rgba(25,78,118,.06) 31%, transparent 57%),
    radial-gradient(circle at 6% 6%, rgba(31,119,184,.08), transparent 24%),
    radial-gradient(circle at 94% 8%, rgba(69,173,255,.055), transparent 23%),
    linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 48%,var(--bg-bottom) 100%);
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after{
  border-color:rgba(102,188,255,.09);
  box-shadow:
    0 0 0 60px rgba(55,168,255,.015),
    0 0 0 120px rgba(55,168,255,.01);
  opacity:.2;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .admin-dialog,
html[data-theme="dark"] .cloud-dialog{
  border-color:#334b60;
  box-shadow:0 24px 72px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="dark"] .tool-launch-card{
  background:linear-gradient(180deg,rgba(17,27,38,.97),rgba(13,21,30,.97));
  border-color:#30485c;
  box-shadow:0 20px 54px rgba(0,0,0,.28);
}

html[data-theme="dark"] .tool-launch-card:hover{
  border-color:#4d7696;
  box-shadow:0 26px 64px rgba(0,0,0,.36),0 0 0 1px rgba(69,173,255,.055);
}

html[data-theme="dark"] .tool-launch-card::before{
  background:radial-gradient(circle,rgba(69,173,255,.10),transparent 68%);
}

html[data-theme="dark"] .theme-toggle{
  background:#0f1721;
  border-color:#46647c;
  box-shadow:0 12px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
}

html[data-theme="dark"] .theme-toggle:hover{
  border-color:#6388a5;
  box-shadow:0 14px 38px rgba(0,0,0,.44),0 0 0 1px rgba(69,173,255,.07),inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .toggle-track{color:#c4d3df;}
html[data-theme="dark"] .toggle-knob{
  background:linear-gradient(180deg,#263c50,#172634);
  border-color:#6688a2;
}

html[data-theme="dark"] textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .select-trigger,
html[data-theme="dark"] .admin-select{
  border-color:#354d61;
}

html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .select-trigger:focus-visible,
html[data-theme="dark"] .mini-input:focus,
html[data-theme="dark"] .mini-select:focus,
html[data-theme="dark"] .admin-select:focus{
  border-color:#5ab6fb;
  box-shadow:0 0 0 4px rgba(69,173,255,.10);
}

html[data-theme="dark"] .selector,
html[data-theme="dark"] .tools-nav,
html[data-theme="dark"] .mini-control,
html[data-theme="dark"] .name-output-shell,
html[data-theme="dark"] .splitter-output-shell,
html[data-theme="dark"] .history-shell,
html[data-theme="dark"] .home-info-strip,
html[data-theme="dark"] .password-panel,
html[data-theme="dark"] .admin-create-user,
html[data-theme="dark"] .admin-stat{
  border-color:#30485d;
}

html[data-theme="dark"] .name-table-header,
html[data-theme="dark"] .name-data-row,
html[data-theme="dark"] .split-line,
html[data-theme="dark"] .admin-row,
html[data-theme="dark"] .cloud-item{
  border-color:#2f4659;
}

html[data-theme="dark"] .name-table-header > div:not(:last-child),
html[data-theme="dark"] .name-data-row > div:not(:last-child){
  border-right-color:#2b4052;
}

html[data-theme="dark"] .tool-tab.active,
html[data-theme="dark"] .name-filter-btn.active{
  color:#9ad7ff;
  border-color:#3f6380;
}

html[data-theme="dark"] .brand-home-button,
html[data-theme="dark"] .back-home-button,
html[data-theme="dark"] .account-button{
  border-color:#355066;
  background:rgba(17,27,38,.92);
}

html[data-theme="dark"] .primary,
html[data-theme="dark"] .cloud-primary,
html[data-theme="dark"] .auth-primary,
html[data-theme="dark"] .admin-primary{
  background:linear-gradient(180deg,#38a8fb 0%,#178fdf 100%);
  color:#fff;
  box-shadow:0 10px 28px rgba(23,143,223,.25),inset 0 1px 0 rgba(255,255,255,.18);
}

html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .cloud-primary:hover,
html[data-theme="dark"] .auth-primary:hover,
html[data-theme="dark"] .admin-primary:hover{
  background:linear-gradient(180deg,#4bb4ff 0%,#2199e8 100%);
  box-shadow:0 14px 32px rgba(23,143,223,.30),inset 0 1px 0 rgba(255,255,255,.20);
}

html[data-theme="dark"] .secondary{color:#9bd7ff;}
html[data-theme="dark"] .teddycg-watermark{color:#91b6cf;opacity:.68;}

/* Make thin separators more visible in dark mode without looking harsh. */
html[data-theme="dark"] .footer-note,
html[data-theme="dark"] .admin-dialog-head,
html[data-theme="dark"] .cloud-dialog-head{
  border-color:#24394b;
}