/* Shared UI rules; see docs/UI规则.md. Keep business-specific styles in app.js. */
:root { --ui-muted:#5b6474; --ui-control:34px; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #2d5bff; outline-offset:3px; }
button { touch-action:manipulation; }
[hidden] { display:none !important; }
.main { min-width:0; width:100%; }
.sidebar .nav-item { width:100%; text-align:left; background:transparent; font-family:inherit; }
.sidebar .nav-item:hover { background:#e8eaed; }
.sidebar .nav-item.active { background:#d3e3fd; }
.topbar .nav-toggle { flex-shrink:0; min-width:36px; min-height:34px; border:0; }
.panel-head { gap:10px; }
.btn { min-height:var(--ui-control); display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }
.btn-sm { min-height:30px; }
.empty p { margin-bottom:14px; }
.empty .btn { margin:12px 4px 0; }
#creators-body { overflow-x:auto; }
.creators-table { min-width:1060px; width:100%; }
.creators-table th { white-space:nowrap; }
.creators-table td:nth-child(2) { min-width:220px; }
.creators-table td:nth-child(2) span { font-size:12px !important; }
.creators-table td:nth-child(3) { min-width:114px; white-space:nowrap; }
.creators-table td:nth-child(3) span { display:inline-block; white-space:nowrap; }
.creators-table td:nth-child(7) { min-width:120px; }
#pipeline-chips { gap:8px !important; padding:12px 16px !important; }
#pipeline-chips .pipeline-chip { background:#f1f4f8 !important; color:#475569 !important; border-color:#dce2eb !important; line-height:1.5; }
#pipeline-chips .pipeline-chip[aria-pressed="true"] { background:#e8efff !important; color:#2349be !important; border-color:#9eb5f8 !important; }
#pipeline-chips button { min-height:32px; }
#main[data-page="creators"] .panel-head h2 > span,
#main[data-page="creators_awaiting"] .panel-head h2 > span { color:var(--ui-muted) !important; }
#identity-chips { background:#f8fafc !important; }
.ui-empty-editor { margin:0; min-height:280px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:8px; }
.ui-empty-editor h3,.ui-empty-editor p { flex-basis:100%; }
.ui-empty-editor h3 { font-size:18px; color:var(--ink); }
.settings-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.settings-nav button { color:#475569; }
.settings-nav [aria-current="true"] { background:#e8efff; color:#2349be; border-color:#9eb5f8; }
.settings-status { color:var(--ui-muted); margin:12px 0; font-size:13px; }
.settings-group[data-dirty="true"] > .settings-status { color:#92400e; }
.settings-savebar { position:sticky; top:56px; z-index:5; padding:10px 0; background:#f6f8fc; border-bottom:1px solid var(--line); }
.settings-group .panel-body { max-width:1000px; }
#nav-backdrop { position:fixed; inset:56px 0 0; background:rgba(15,23,42,.35); z-index:59; border:0; }




#identity-chips > span { color:var(--ui-muted) !important; }
#identity-chips button { background:#fff !important; color:#475569 !important; border-color:#dce2eb !important; min-height:32px; }
#identity-chips button[aria-pressed="true"] { background:#e8efff !important; color:#2349be !important; border-color:#9eb5f8 !important; }
.creators-table .btn-brand { background:#edf2ff; color:#2349be; border-color:#cad7ff; }
.table-scroll-hint { display:none; padding:8px 16px; color:var(--ui-muted); font-size:12px; }


#main[data-page="drafts"] > div:first-child h2 { flex-wrap:wrap; }
#main[data-page="drafts"] > div:first-child h2 > span { color:var(--ui-muted) !important; }


.email-category { background:transparent; border:0; min-height:38px; }

@media (min-width:761px) {
  #nav-backdrop { display:none; }
}

@media (max-width:1100px) {
  .topbar { gap:10px; padding:0 14px; }
  .topbar .logo > span { display:none; }
  .main { padding:18px; }
  .drafts-layout { grid-template-columns:240px minmax(0,1fr) !important; }
}

@media (max-width:760px) {
  .topbar { height:56px; padding:0 8px; gap:6px; }
  .topbar .logo { flex-shrink:0; }
  .topbar .who { display:none; }
  .topbar > a { font-size:12px !important; padding:5px 8px !important; white-space:nowrap; }
  .topbar > a span { display:none; }
  .topbar > a::before { content:'Studio'; }
  .topbar > div[style*="margin-right:14px"] { margin-right:0 !important; white-space:nowrap; font-size:12px !important; }
  .topbar #notif-wrap { margin-right:0 !important; }
  .topbar > button:last-child { padding:6px 8px; white-space:nowrap; }
  .layout { display:block; }
  .layout .sidebar { display:none; position:fixed; top:56px; bottom:0; left:0; width:240px; z-index:60; box-shadow:8px 0 24px #0f172a22; }
  .layout.mobile-nav-open .sidebar { display:block; }
  .layout .main,.layout.nav-collapsed .main { width:100%; max-width:100%; padding:12px; }
  .panel-head { flex-wrap:wrap; }
  #main[data-page="creators"] .panel-head h2,
  #main[data-page="creators_awaiting"] .panel-head h2 { flex-wrap:wrap; }
  #creators-search { width:100% !important; order:2; min-height:38px; }
  #pipeline-chips { max-height:240px; overflow-y:auto; align-content:start; }
  .drafts-layout,.gmail-layout,.inbox-layout { grid-template-columns:minmax(0,1fr) !important; }
  .draft-split { grid-template-columns:minmax(0,1fr); }
  .inbox-layout > div:first-child { position:static !important; }
  #inbox-list-pane { min-width:0; }
  #emails-search { width:100% !important; min-width:0 !important; }
  #inbox-list-pane > div:first-child { flex-wrap:wrap; }
  #notif-dropdown { width:min(360px,calc(100vw - 24px)) !important; right:-50px !important; }
  .settings-nav { flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 10px; }
  .settings-nav button { flex-shrink:0; }
  .settings-group input,.settings-group select,.settings-group textarea { max-width:100%; }
  .settings-group .panel-body { padding:16px; }
  .modal { max-width:calc(100vw - 24px); }
  #modal > div { max-width:100% !important; }
  #modal [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; }
  .gmail-layout { overflow-wrap:anywhere; }
  .gmail-layout > * { min-width:0; }
  #main[data-page="sync"] .panel-body { flex-wrap:wrap; }
  #main[data-page="drafts"] > div:first-child h2 { display:block !important; }
  #main[data-page="drafts"] > div:first-child h2 > span { display:block; margin-top:6px; line-height:1.5; }
  .inbox-layout > div:first-child { flex-direction:row !important; flex-wrap:nowrap; align-items:center; gap:6px !important; max-height:none !important; overflow-x:auto !important; padding-bottom:10px !important; }
  .inbox-layout > div:first-child > * { flex-shrink:0; }
  .inbox-layout > div:first-child > button { width:auto; white-space:nowrap; margin:0 !important; padding:8px 12px !important; border-radius:10px; }
  .login-card { width:min(380px,calc(100vw - 32px)); padding:32px 24px; }
}

@media (prefers-reduced-motion:reduce) {
  .nav-item,.btn,#pipeline-chips button,.topbar button { transition:none !important; }
}

@media (max-width:1320px) {
  .table-scroll-hint { display:block; }
}

/* Official Dokipo SVG, shared by the login and application headers. */
.brand-logo { display:block; flex-shrink:0; width:100px; height:40px; object-fit:contain; }
.login-card .brand-logo { width:150px; height:60px; margin-bottom:8px; }
@media (max-width:760px) {
  .topbar .brand-logo { width:72px; height:28.8px; }
}