/* Shared interaction, typography and default dark palette. */
:root {
  --bg: #0a0f1a; --card-bg: #141b26; --surface-muted: #111927; --surface-inset: #0f172a; --surface-track: #1e2a3a;
  --border: #1e2a3a; --border-subtle: #1e2a3a; --control-border: #1e2a3a; --border-hover: #f0a050;
  --accent: #f0a050; --accent-hover: #f0a050; --accent-soft: rgba(240,160,80,.1); --accent-border: rgba(240,160,80,.4); --accent-border-hover: #f0a050;
  --primary-bg: #f0a050; --primary-hover: #f0a050; --on-primary: #fff; --accent-glow: rgba(240,160,80,.25); --focus-ring: rgba(240,160,80,.24);
  --text: #e2e8f0; --text-secondary: #a0aec0; --text-muted: #6b7280; --muted: var(--text-muted); --price: #f0c060;
  --green: #48bb78; --red: #f85149; --warning: #e3a237; --warning-soft: rgba(227,162,55,.12); --warning-border: rgba(227,162,55,.4);
  --success-soft: rgba(72,187,120,.1); --danger-soft: rgba(248,81,73,.1); --danger-border: rgba(248,81,73,.4); --disabled-bg: #1e2a3a; --selection-bg: rgba(240,160,80,.3);
  --header-bg: rgba(20,27,38,.95); --header-shadow-color: rgba(0,0,0,.08); --overlay: rgba(0,0,0,.7);
  --modal-shadow-color: rgba(0,0,0,.35); --menu-shadow-color: rgba(0,0,0,.28); --toast-shadow-color: rgba(0,0,0,.25); --bar-shadow-color: rgba(0,0,0,.2);
  --toast-bg: rgba(0,0,0,.8); --toast-text: #fff; --toast-border: #1e2a3a;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08); --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --page-image: url('bg.webp'); --home-background: linear-gradient(180deg,rgba(10,15,26,.46),rgba(10,15,26,.94) 72%,var(--bg));
  --hero-button-bg: linear-gradient(135deg,#f6bd71,#e9973e); --hero-button-text: #141414;
  --boost-button-bg: linear-gradient(135deg,#f0ad60,#e58a2f); --boost-button-hover: linear-gradient(135deg,#f4ba73,#ec9840); --boost-button-text: #17130f;
  --login-bg: transparent; --login-border: #58a6ff; --login-text: #58a6ff; --login-hover: rgba(88,166,255,.1);
  --utility-bg: rgba(240,160,80,.1); --utility-hover: rgba(240,160,80,.2); --utility-text: #f0a050;
  --payment-pending-text: #f0a050; --payment-pending-bg: rgba(240,160,80,.2);
  --tp-pending-text: #f7c873; --tp-pending-bg: rgba(247,200,115,.12);
  --tp-active-text: #70b9ff; --tp-active-bg: rgba(112,185,255,.12);
  --tp-acceptance-text: #ad91ff; --tp-acceptance-bg: rgba(173,145,255,.12);
  --logo-background: linear-gradient(135deg,#f0c070,#e8993d); --logo-fill: transparent;
  --register-border: #f0a050; --workflow-border: rgba(240,160,80,.25);
  --oc-info-text: var(--text); --oc-info-bg: rgba(128,128,128,.12);
  --oc-success-text: var(--text); --oc-success-bg: rgba(128,128,128,.12);
  --oc-warning-text: var(--text); --oc-warning-bg: rgba(128,128,128,.12);
  --oc-danger-text: var(--text); --oc-danger-bg: rgba(128,128,128,.12);
  --oc-exception-text: #e3a237; --oc-exception-bg: rgba(128,128,128,.12);
  --radius: 16px; --radius-sm: 10px;
  color-scheme: dark;
}

html { scroll-padding-top: calc(var(--site-header-height, 80px) + 20px); }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
button { min-height: 40px; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }
button:disabled { pointer-events: auto; transform: none; box-shadow: none; }
.theme-toggle-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 1.25rem; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { opacity: .65; cursor: not-allowed; }
.project-card:has(input:focus-visible) .card-inner,
.detail-card:has(input:focus-visible) .detail-inner,
.player-card:has(input:focus-visible) .player-inner,
.calc-type-option:has(input:focus-visible) .calc-type-btn {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.form-group label, .calc-field label { font-size: .875rem; font-weight: 600; margin-bottom: 7px; }
.field-help, .remark-hint, .quantity-hint, .tool-hint { font-size: .8rem; line-height: 1.65; }
.card-desc { font-size: .75rem; }
.form-group input:not([type=checkbox]):not([type=radio]), .form-group select,
.remark-input, .calc-field input, .rental-filters input, .rental-filters select { min-height: 44px; }
.form-group textarea { min-height: 96px; resize: vertical; }
.modal-overlay { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.modal-card:not(.oc-modal-card):not(.order-notification-modal) { max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-close { min-width: 40px; min-height: 40px; line-height: 1; padding: 4px; }
.table-scroll { scrollbar-width: thin; }
table { font-variant-numeric: tabular-nums; }
th { line-height: 1.5; }
td { line-height: 1.7; }
.table-actions { white-space: normal; }
.table-actions button { margin: 3px; }
.price-value, .price-total, .detail-price, .oc-meta strong { font-variant-numeric: tabular-nums; }
.async-state { min-height: 120px; display: grid; justify-items: center; align-content: center; gap: 12px; }
.async-state p { max-width: 460px; }
.oc-empty { color: var(--text-secondary); border: 1px dashed var(--border); border-radius: 12px; padding: 36px 20px; }
.oc-card-footer small { line-height: 1.6; }
.oc-card-footer button { white-space: normal; }
.oc-state { white-space: normal; line-height: 1.5; text-align: center; }
#orderCenterModal[aria-busy=true] { cursor: progress; }
#orderCenterModal[aria-busy=true] .oc-modal-footer { opacity: .65; }
.appearance-heading p { color: var(--text-secondary); font-size: .9rem; margin-top: 8px; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 22px 0; }
.theme-option { cursor: pointer; border: 2px solid var(--border); border-radius: 14px; overflow: hidden; min-width: 0; }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-preview { height: 138px; padding: 16px; display: grid; grid-template-columns: 28px 1fr; gap: 10px; pointer-events: none; }
.theme-preview-dark { background: #0a0f1a; --preview-card: #182234; --preview-line: #364156; --preview-accent: #f0a050; }
.theme-preview-light { background: #f3f5f9; --preview-card: #fff; --preview-line: #e1e7ef; --preview-accent: #2859cf; }
.theme-preview-rail { border-radius: 6px; background: var(--preview-card); }
.theme-preview-content { display: grid; gap: 10px; grid-template-rows: 20px 1fr; }
.theme-preview-bar { border-radius: 4px; background: var(--preview-card); }
.theme-preview-card { border-radius: 8px; background: var(--preview-card); padding: 12px; display: grid; gap: 7px; align-content: start; }
.theme-preview-card i { display: block; height: 5px; width: 72%; border-radius: 4px; background: var(--preview-line); }
.theme-preview-card i:first-child { width: 42%; background: var(--preview-accent); }
.theme-preview-card b { display: block; width: 48px; height: 16px; border-radius: 4px; background: var(--preview-accent); margin-top: 3px; }
.theme-option-caption { display: grid; grid-template-columns: 18px 1fr; gap: 4px 10px; padding: 14px 16px; }
.theme-option-caption input { margin-top: 5px; width: 16px; height: 16px; }
.theme-option-caption strong { font-size: .95rem; }
.theme-option-caption small { grid-column: 2; color: var(--text-secondary); font-size: .8rem; }
#saveThemeBtn { width: auto; min-width: 128px; }
.theme-save-status { font-size: .85rem; color: var(--text-secondary); margin-top: 10px; }
@media(min-width:601px) and (max-width:700px) {
  .boost-checkout-bar { bottom: env(safe-area-inset-bottom); }
  body[data-current-section=boost] #sectionBoost { padding-bottom: 110px; }
}
@media(max-width:600px) {
  .section-top { top: var(--site-header-height, 64px); }
  .form-group input:not([type=checkbox]):not([type=radio]), .form-group select, .form-group textarea,
  .remark-input, .calc-field input, .oc-filters input, .oc-filters select, .rental-filters input, .rental-filters select { font-size: 16px; }
  .theme-options { gap: 12px; }
  .theme-preview { height: 110px; padding: 12px; grid-template-columns: 20px 1fr; gap: 7px; }
  .theme-option-caption { padding: 12px; }
  .theme-option-caption small { line-height: 1.5; }
  button { min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}