/* base styles split from app/static/styles.css. */

@font-face {
  font-family: "\963F\91CC\5988\5988\6570\9ED1\4F53\20 Bold";
  font-weight: 700;
  src:
    url("//at.alicdn.com/wf/webfont/PQMKqeHRuP8c/oleVqAIUE5SM.woff2") format("woff2"),
    url("//at.alicdn.com/wf/webfont/PQMKqeHRuP8c/lXc4VTgNXlyW.woff") format("woff");
  font-variation-settings: normal;
  font-display: swap;
}

:root {
  --sidebar-width: 208px;
  --template-sidebar-width: 312px;
  --bg: #ffffff;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f5f5f4;
  --surface-subtle: #fafafa;
  --text: #27272a;
  --muted: #71717a;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --danger: #b42318;
  --danger-bg: #fff0ed;
  --shadow: 0 18px 54px rgba(24, 24, 27, 0.052), 0 38px 96px rgba(24, 24, 27, 0.025);
  --shadow-soft: 0 12px 38px rgba(24, 24, 27, 0.036), 0 28px 70px rgba(24, 24, 27, 0.018);
  --shadow-card: 0 18px 60px rgba(24, 24, 27, 0.044), 0 42px 110px rgba(24, 24, 27, 0.018);
  --shadow-media: 0 14px 44px rgba(24, 24, 27, 0.042), 0 34px 82px rgba(24, 24, 27, 0.018);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled {
  cursor: not-allowed;
}

:where(a, button, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.36);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

@media (max-width: 900px) {
  body {
      overflow: auto;
    }

  :where(button, [role="button"], [role="menuitem"], a, label, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

@media (max-width: 1280px) and (min-width: 901px) {
  :root {
      --template-sidebar-width: 288px;
    }
}

@media (prefers-reduced-motion: reduce) {
  html {
      scroll-behavior: auto;
    }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}