/* Page-wide light theme. The default dark palette remains in app.css. */
/*
 * The HTML shell historically points at the light logo and app.js swaps it
 * after restoring persisted theme state. Hide the logo until the theme is
 * known, then let CSS select the correct asset immediately for that paint.
 * This avoids a light-logo flash when restoring dark mode (and vice versa).
 */
html:not([data-theme]) #appLogo{visibility:hidden}
html[data-theme="dark"] #appLogo{visibility:visible;content:url("../assets/atlas-studio-logo-dark.png?v=256")}
html[data-theme="light"] #appLogo{visibility:visible;content:url("../assets/atlas-studio-logo.png?v=256")}
#resetView{display:none!important}

html[data-theme="light"] {
  color-scheme: light;
  --bg:#f3f5f7;
  --panel:#ffffff;
  --panel2:#f1f4f7;
  --panel3:#e8edf2;
  --rule:#d7dde5;
  --rule2:#e5e9ee;
  --text:#1b2430;
  --dim:#536171;
  --muted:#748092;
  --amber:#b56a08;
  --amber2:#8d5000;
  --cyan:#087e9d;
  --rose:#c43c57;
  --green:#16815f;
  --violet:#654cb0;
  --danger:#b52e49;
  --shadow:0 18px 50px rgba(34,48,64,.14);
}
html[data-theme="light"],html[data-theme="light"] body{background:var(--bg);color:var(--text)}
html[data-theme="light"] body{background:radial-gradient(1000px 620px at 40% -20%,rgba(8,126,157,.07),transparent 65%),radial-gradient(900px 600px at -5% 10%,rgba(181,106,8,.06),transparent 60%),var(--bg)}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.9)}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,247,250,.98))}
html[data-theme="light"] .workspace{background:#edf1f5}
html[data-theme="light"] .viewer-toolbar,html[data-theme="light"] .display-controls,html[data-theme="light"] .slice-controls{background:#ffffff}
html[data-theme="light"] .tab.active{background:#e8edf2;color:var(--text);border-color:#bfc9d4;box-shadow:inset 0 -2px 0 var(--amber)}
html[data-theme="light"] .section-title,html[data-theme="light"] details.panel-section>summary{color:var(--text)}
html[data-theme="light"] .implant-card{background:linear-gradient(180deg,#eef2f5,#e7ecf1)}
html[data-theme="light"] .canvas-stage{background:radial-gradient(circle at 50% 45%,#ffffff 0,#f2f5f8 60%,#e8edf2 100%)}
html[data-theme="light"] input[type=number],html[data-theme="light"] input[type=text],html[data-theme="light"] input[type=search],html[data-theme="light"] select{background:#ffffff;border-color:#c8d0da}
html[data-theme="light"] .btn.ghost{background:#ffffff;color:var(--dim)}
html[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,248,250,.98))}
html[data-theme="light"] .metric,html[data-theme="light"] .metric-strip{background:#f1f4f7}
html[data-theme="light"] .warning{background:#f5f7f9}
html[data-theme="light"] .search-results{background:#ffffff}
html[data-theme="light"] .region-result button{background:#f1f4f7}
html[data-theme="light"] footer{background:#ffffff}
html[data-theme="light"] dialog.methods-dialog{background:linear-gradient(145deg,#ffffff,#f1f4f7 70%);box-shadow:0 28px 100px rgba(34,48,64,.25)}
html[data-theme="light"] dialog.methods-dialog::backdrop{background:rgba(38,48,60,.3)}