:root{
  color-scheme:light;
  --du-bg:#F5F7FB;
  --du-surface:#FFFFFF;
  --du-surface-soft:#FAFBFD;
  --du-surface-muted:#DDE5F6;
  --du-ink:#152238;
  --du-text:#26344D;
  --du-muted:#7E899B;
  --du-faint:#A4ADBC;
  --du-line:#D5DBE6;
  --du-line-strong:#BFC8D6;
  --du-primary:#006DFF;
  --du-primary-soft:#DDE5F6;
  --du-info:#1C94D9;
  --du-success:#7CB342;
  --du-warning:#E5A300;
  --du-danger:#E43D42;
  --du-radius-xs:8px;
  --du-radius-sm:12px;
  --du-radius-md:16px;
  --du-radius-lg:20px;
  --du-shadow-sm:0 4px 14px rgba(23,36,56,.04);
  --du-shadow-md:0 8px 24px rgba(23,36,56,.055);
  --du-page-width:1180px;
  --du-topbar-height:68px;
  --du-bottombar-height:74px;
  --du-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html[data-theme="dark"],
body.theme-dark{
  color-scheme:dark;
  --du-bg:#0B1220;
  --du-surface:#19212F;
  --du-surface-soft:#26344D;
  --du-surface-muted:#26344D;
  --du-ink:#F4F7FB;
  --du-text:#D7DEEA;
  --du-muted:#8A95A8;
  --du-faint:#68748B;
  --du-line:#3B475D;
  --du-line-strong:#566784;
  --du-primary:#006DFF;
  --du-primary-soft:#26344D;
  --du-info:#25A7E7;
  --du-success:#8BC34A;
  --du-warning:#F0B429;
  --du-danger:#F05A63;
  --du-shadow-sm:0 4px 14px rgba(0,0,0,.15);
  --du-shadow-md:0 10px 30px rgba(0,0,0,.22);
}

@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]) body:not(.theme-light){
    color-scheme:dark;
    --du-bg:#0B1220;
    --du-surface:#19212F;
    --du-surface-soft:#26344D;
    --du-surface-muted:#26344D;
    --du-ink:#F4F7FB;
    --du-text:#D7DEEA;
    --du-muted:#8A95A8;
    --du-faint:#68748B;
    --du-line:#3B475D;
    --du-line-strong:#566784;
    --du-primary:#006DFF;
    --du-primary-soft:#26344D;
    --du-info:#25A7E7;
    --du-success:#8BC34A;
    --du-warning:#F0B429;
    --du-danger:#F05A63;
    --du-shadow-sm:0 4px 14px rgba(0,0,0,.15);
    --du-shadow-md:0 10px 30px rgba(0,0,0,.22);
  }
}

html{background:var(--du-bg)}

body.du-professional-shell{
  margin:0;
  min-height:100vh;
  background:var(--du-bg);
  color:var(--du-ink);
  font-family:var(--du-font);
  padding-top:calc(var(--du-topbar-height) + env(safe-area-inset-top));
}

.du-page{
  width:min(var(--du-page-width),calc(100% - 28px));
  margin:0 auto;
  'padding:30px 0 112px;
}

.du-card{
  border:1px solid var(--du-line);
  border-radius:var(--du-radius-md);
  background:var(--du-surface);
  box-shadow:var(--du-shadow-sm);
}

.du-kicker{
  color:var(--du-muted);
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.12em;
}

.du-title{
  margin:8px 0 0;
  color:var(--du-ink);
  font-size:clamp(2.6rem,6vw,4.8rem);
  line-height:.92;
  letter-spacing:-.055em;
}

.du-copy{
  color:var(--du-muted);
  font-size:.82rem;
  line-height:1.55;
}

.du-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 13px;
  border:1px solid var(--du-line);
  border-radius:10px;
  background:var(--du-surface-soft);
  color:var(--du-ink);
  text-decoration:none;
  font:inherit;
  font-size:.68rem;
  line-height:1;
  font-weight:850;
  cursor:pointer;
}

.du-btn--primary{
  border-color:var(--du-primary);
  background:var(--du-primary);
  color:#fff;
}

.du-btn--danger{
  border-color:color-mix(in srgb,var(--du-danger) 28%,var(--du-line));
  background:color-mix(in srgb,var(--du-danger) 8%,var(--du-surface));
  color:var(--du-danger);
}

@media(max-width:760px){
  :root{
    --du-topbar-height:64px;
    --du-bottombar-height:78px;
  }

  .du-page{
    width:calc(100% - 16px);
    'padding-top:20px;
    'padding-bottom:126px;
  }
}
