/*
  UI LAB shared shell for standalone pages.
  Keeps login/account aligned with the official studio surface.
*/
:root{
  --bg:#EEF3F8;
  --surface:#FFFFFF;
  --surface-soft:#F7FAFC;
  --ink:#172033;
  --muted:#637083;
  --line:#D8E0EA;
  --blue:#1769D1;
  --blue-soft:#EAF3FF;
  --green:#0E8F6B;
  --green-soft:#E7F7F1;
  --red:#C92B3A;
  --red-soft:#FDECEF;
  --amber:#A86400;
  --amber-soft:#FFF4E3;
  --shadow:0 18px 48px rgba(25,42,70,.10);
}

body.ui-polish-lab,
body.account-page{
  color:var(--text, var(--ink));
  background:linear-gradient(180deg, #F6F8FB 0%, #EEF3F8 48%, #E8EEF5 100%);
  font-family:"Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-size:14px;
  line-height:1.42;
  font-variation-settings:"wdth" 96;
  text-rendering:geometricPrecision;
}

body.ui-polish-lab::before,
body.account-page::before{
  display:none;
}

body.ui-polish-lab .panel,
body.ui-polish-lab .card,
body.account-page .panel,
body.account-page .card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow);
}

body.ui-polish-lab .card,
body.account-page .card{
  background:var(--surface-soft);
}

body.ui-polish-lab h1,
body.ui-polish-lab h2,
body.ui-polish-lab .panelTitle,
body.account-page h1,
body.account-page h2,
body.account-page .panelTitle{
  color:var(--ink);
  letter-spacing:0;
}

body.ui-polish-lab p,
body.ui-polish-lab .panelSub,
body.ui-polish-lab .status,
body.account-page p,
body.account-page .panelSub,
body.account-page .status{
  color:var(--muted);
}

body.ui-polish-lab label,
body.account-page label{
  color:#425166;
}

body.ui-polish-lab input,
body.ui-polish-lab select,
body.account-page input,
body.account-page select{
  border:1px solid var(--line);
  border-radius:10px;
  background:#FFFFFF;
  color:var(--ink);
  box-shadow:none;
}

body.ui-polish-lab input:focus,
body.ui-polish-lab select:focus,
body.account-page input:focus,
body.account-page select:focus{
  border-color:#1769D1;
  box-shadow:0 0 0 3px rgba(23,105,209,.14);
}

body.ui-polish-lab button,
body.account-page button{
  border-radius:10px;
  box-shadow:none;
}

body.ui-polish-lab button:not(.secondary):not(.navbtn):not(.dangerBtn),
body.account-page button:not(.secondary):not(.navbtn):not(.dangerBtn){
  border:1px solid #1769D1;
  background:#1769D1;
  color:#FFFFFF;
}

body.ui-polish-lab button.secondary,
body.account-page button.secondary{
  border:1px solid var(--line);
  background:#FFFFFF;
  color:var(--ink);
}

body.ui-polish-lab .notice,
body.account-page .notice{
  border:1px solid #B7E6D5;
  background:#E7F7F1;
  color:#096247;
}

body.ui-polish-lab .lock,
body.account-page .lock{
  border:1px solid #B8D8FF;
  border-radius:12px;
  background:#1769D1;
  color:#FFFFFF;
}

body.ui-polish-lab .toastItem,
body.account-page .toastItem{
  color:var(--ink);
  background:#FFFFFF;
  border-color:var(--line);
  box-shadow:0 18px 45px rgba(25,42,70,.16);
}

body.account-page .accountTopbar{
  width:min(1760px, calc(100% - 32px));
  margin:16px auto 0;
  position:sticky;
  top:12px;
}

body.account-page .accountTopbar .brandMark{
  display:grid;
}

body.account-page .accountShell{
  padding-top:16px;
}

body.account-page .accountSidebar,
body.account-page .panel{
  border-radius:10px;
  box-shadow:0 10px 28px rgba(25,42,70,.08);
}

body.account-page .sideTab{
  min-height:36px;
  border-radius:9px;
  font-weight:650;
}

body.account-page .sideTab.active{
  background:#1769D1;
  color:#FFFFFF;
}

body.login-page .shell{
  width:min(440px, 100%);
}

body.login-page .panel{
  border-radius:12px;
  box-shadow:0 12px 30px rgba(31,48,72,.08);
}

body.login-page .panelTitle{
  font-size:24px;
  font-weight:700;
}