/* Shared desktop design system. Mobile layouts remain template-specific. */
@media (min-width: 641px) {
  :root {
    --ui-page: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-header: #f4f7ff;
    --ui-border: #d9e3ef;
    --ui-border-strong: #cbd8e7;
    --ui-text: #0f172a;
    --ui-muted: #5f7390;
    --ui-blue: #2563eb;
    --ui-shadow: 0 8px 26px rgba(30, 64, 175, .055);
  }

  html { background: var(--ui-page); }
  body {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8faff 0%, var(--ui-page) 100%) !important;
    color: var(--ui-text) !important;
  }

  .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  .topbar {
    padding: 18px 20px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f8fbff 0%, var(--ui-header) 100%) !important;
    box-shadow: var(--ui-shadow);
  }

  .title {
    color: var(--ui-text) !important;
    font-size: 21px !important;
    font-weight: 950 !important;
    letter-spacing: -.2px !important;
  }

  .sub { color: var(--ui-muted) !important; line-height: 1.45 !important; }

  .grid { gap: 18px !important; min-width: 0; }
  .grid > *, .row > *, .row1 > *, .row2 > *, .row3 > * { min-width: 0; }

  .topbar, .card, .panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .card:not(.manualCard) {
    padding: 20px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .panel {
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(30, 64, 175, .045) !important;
  }

  .toolbar, .head, .splitTitle {
    border-color: var(--ui-border) !important;
    background: #f8faff !important;
  }

  .row, .row1, .row2, .row3 { column-gap: 14px !important; row-gap: 12px !important; }

  h1, h2, h3 { color: var(--ui-text) !important; letter-spacing: -.1px; }
  h2 { font-size: 15px !important; font-weight: 900 !important; }

  label {
    margin-bottom: 7px !important;
    color: #263b57 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 11px 13px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: var(--ui-text) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }

  input:not([type="checkbox"]):not([type="radio"]):hover,
  select:hover,
  textarea:hover { border-color: #aebed1 !important; }

  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus {
    border-color: #3b82f6 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .13) !important;
    outline: none !important;
  }

  .btn, .iconbtn {
    min-height: 44px;
    padding: 10px 14px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 13px !important;
    background: #fff;
    color: var(--ui-text);
    font-weight: 850 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045) !important;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }

  .btn:hover, .iconbtn:hover {
    border-color: #aebed1 !important;
    transform: translateY(-1px);
  }

  .btn.primary {
    color: #fff !important;
    background: #17233a !important;
    border-color: #17233a !important;
  }

  .btn.ok {
    color: #166534 !important;
    background: #ecfdf3 !important;
    border-color: #86efac !important;
  }

  .btn.warn {
    color: #92400e !important;
    background: #fffbeb !important;
    border-color: #fcd34d !important;
  }

  .btn.bad, .btn.danger {
    color: #991b1b !important;
    background: #fff5f5 !important;
    border-color: #fecaca !important;
  }

  .btn.ok:hover { background: #dcfce7 !important; }
  .btn.warn:hover { background: #fef3c7 !important; }
  .btn.bad:hover, .btn.danger:hover { background: #fee2e2 !important; }

  .pill {
    min-height: 36px;
    padding: 8px 12px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: var(--ui-muted) !important;
  }

  .hint, .small { color: var(--ui-muted) !important; }

  .status {
    padding: 12px 14px !important;
    border-radius: 13px !important;
  }

  .tableWrap {
    border: 1px solid var(--ui-border) !important;
    border-radius: 15px !important;
    background: #fff;
  }

  th {
    padding: 12px 11px !important;
    color: #38506d !important;
    background: #f5f8fc !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  td {
    padding: 11px !important;
    border-bottom-color: #e7edf4 !important;
  }

  tbody tr:hover { background: #fafcff; }

  .manualCard {
    border: 1px solid var(--ui-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .manualGrid > * { min-width: 0; }

  .manualSubmit {
    border-color: #86efac !important;
    background: #ecfdf3 !important;
  }

  .tabs {
    padding: 5px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 14px !important;
    background: #f5f8fc !important;
  }

  .tabbtn { border-radius: 10px !important; }
}