:root {
  --ctu-bg: #f5f7fb;
  --ctu-panel: #ffffff;
  --ctu-ink: #172033;
  --ctu-muted: #667085;
  --ctu-line: #d9e1ec;
  --ctu-brand: #116b5f;
  --ctu-brand-ink: #ffffff;
  --ctu-accent: #2753c7;
  --ctu-success: #16734c;
  --ctu-warning: #a35c00;
  --ctu-danger: #b42318;
  --ctu-info-soft: #eef4ff;
  --ctu-success-soft: #edf8f1;
  --ctu-warning-soft: #fff6df;
  --ctu-danger-soft: #fff1f0;
  --ctu-radius: 8px;
  --ctu-shadow: 0 12px 28px rgba(23, 32, 51, .08);
  --ctu-space-1: 4px;
  --ctu-space-2: 8px;
  --ctu-space-3: 12px;
  --ctu-space-4: 16px;
  --ctu-space-5: 20px;
  --ctu-space-6: 24px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ctu-bg); color: var(--ctu-ink); font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.ctu-shell { min-height: 100vh; }
.ctu-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--ctu-space-3); min-height: 64px; padding: 10px var(--ctu-space-4); border-bottom: 1px solid var(--ctu-line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.ctu-brand { display: flex; min-width: 0; align-items: center; gap: 10px; text-decoration: none; }
.ctu-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--ctu-radius); color: var(--ctu-brand-ink); background: var(--ctu-brand); font-weight: 900; }
.ctu-brand-text { min-width: 0; }
.ctu-brand-text strong, .ctu-brand-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctu-brand-text small { color: var(--ctu-muted); font-size: 12px; font-weight: 700; }
.ctu-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--ctu-space-2); flex-wrap: wrap; }
.ctu-layout { display: grid; min-height: calc(100vh - 64px); }
.ctu-sidebar { display: none; border-bottom: 1px solid var(--ctu-line); background: #fff; padding: var(--ctu-space-3); }
.ctu-sidebar.open { display: block; }
.ctu-nav-group { margin-bottom: var(--ctu-space-4); }
.ctu-nav-group-title { margin: 0 0 6px; color: var(--ctu-muted); font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.ctu-nav-link { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 9px 10px; border-radius: var(--ctu-radius); color: var(--ctu-muted); text-decoration: none; font-weight: 800; }
.ctu-nav-link.active { color: var(--ctu-brand-ink); background: var(--ctu-brand); }
.ctu-main { width: 100%; max-width: 1420px; margin: 0 auto; padding: var(--ctu-space-4); }
.ctu-page-header { display: grid; gap: var(--ctu-space-3); margin-bottom: var(--ctu-space-4); }
.ctu-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ctu-muted); font-size: 12px; font-weight: 800; }
.ctu-page-title { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: 0; }
.ctu-page-subtitle { margin: 4px 0 0; color: var(--ctu-muted); }
.ctu-page-actions, .ctu-row-actions, .ctu-form-actions { display: flex; flex-wrap: wrap; gap: var(--ctu-space-2); }
.ctu-card, .ctu-panel { border: 1px solid var(--ctu-line); border-radius: var(--ctu-radius); background: var(--ctu-panel); box-shadow: var(--ctu-shadow); }
.ctu-card { padding: var(--ctu-space-4); }
.ctu-panel { padding: var(--ctu-space-5); }
.ctu-panel h2, .ctu-card h2 { margin: 0 0 var(--ctu-space-3); font-size: 18px; letter-spacing: 0; }
.ctu-stack { display: grid; gap: var(--ctu-space-3); }
.ctu-grid-2, .ctu-grid-3, .ctu-metrics { display: grid; gap: var(--ctu-space-3); }
.ctu-metric { border: 1px solid var(--ctu-line); border-radius: var(--ctu-radius); padding: var(--ctu-space-3); background: var(--ctu-info-soft); }
.ctu-metric span { display: block; color: var(--ctu-muted); font-size: 12px; font-weight: 800; }
.ctu-metric strong { display: block; margin-top: 4px; font-size: 24px; }
.ctu-kv { border: 1px solid var(--ctu-line); border-radius: var(--ctu-radius); padding: var(--ctu-space-3); background: #fbfcfe; }
.ctu-kv span { display: block; color: var(--ctu-muted); font-size: 12px; font-weight: 800; }
.ctu-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1px solid var(--ctu-brand); border-radius: var(--ctu-radius); padding: 9px 13px; color: var(--ctu-brand-ink); background: var(--ctu-brand); font-weight: 850; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ctu-button.secondary { color: var(--ctu-brand); background: #fff; }
.ctu-button.danger { border-color: var(--ctu-danger); color: #fff; background: var(--ctu-danger); }
.ctu-button.success { border-color: var(--ctu-success); color: #fff; background: var(--ctu-success); }
.ctu-button.warning { border-color: var(--ctu-warning); color: #fff; background: var(--ctu-warning); }
.ctu-button.ghost { border-color: var(--ctu-line); color: var(--ctu-ink); background: #fff; }
.ctu-button.icon { width: 40px; padding: 0; }
.ctu-button:disabled { cursor: not-allowed; opacity: .58; }
.ctu-field { display: grid; gap: 6px; color: var(--ctu-muted); font-size: 13px; font-weight: 800; }
.ctu-field input, .ctu-field select, .ctu-field textarea { width: 100%; min-height: 42px; border: 1px solid var(--ctu-line); border-radius: var(--ctu-radius); padding: 10px 12px; color: var(--ctu-ink); background: #fff; }
.ctu-field textarea { min-height: 120px; resize: vertical; }
.ctu-field small { color: var(--ctu-muted); font-weight: 650; }
.ctu-form { display: grid; gap: var(--ctu-space-4); }
.ctu-form-grid { display: grid; gap: var(--ctu-space-3); }
.ctu-alert, .ctu-empty, .ctu-loading { border-radius: var(--ctu-radius); padding: var(--ctu-space-3); }
.ctu-alert.info { border: 1px solid #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.ctu-alert.success { border: 1px solid #bbf7d0; color: var(--ctu-success); background: var(--ctu-success-soft); }
.ctu-alert.warning { border: 1px solid #fed7aa; color: var(--ctu-warning); background: var(--ctu-warning-soft); }
.ctu-alert.danger { border: 1px solid #fecaca; color: var(--ctu-danger); background: var(--ctu-danger-soft); }
.ctu-empty { border: 1px dashed var(--ctu-line); color: var(--ctu-muted); background: #fbfcfe; }
.ctu-loading { border: 1px solid #bfdbfe; color: #1d4ed8; background: #eff6ff; }
.ctu-badge { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 4px 9px; background: #edf2f7; color: var(--ctu-ink); font-size: 12px; font-weight: 900; }
.ctu-badge.success { color: var(--ctu-success); background: #dcfce7; }
.ctu-badge.warning { color: var(--ctu-warning); background: #fef3c7; }
.ctu-badge.danger { color: var(--ctu-danger); background: #fee2e2; }
.ctu-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ctu-space-3); flex-wrap: wrap; margin-bottom: var(--ctu-space-3); }
.ctu-grid-controls { display: flex; align-items: center; gap: var(--ctu-space-2); flex-wrap: wrap; }
.ctu-grid-search { min-width: min(100%, 260px); }
.ctu-table-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--ctu-line); border-radius: var(--ctu-radius); background: #fff; }
.ctu-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.ctu-table th, .ctu-table td { padding: 11px 12px; border-bottom: 1px solid var(--ctu-line); text-align: left; vertical-align: top; }
.ctu-table th { position: sticky; top: 0; z-index: 1; color: var(--ctu-muted); background: #f8fafc; font-size: 12px; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.ctu-table th button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; font-weight: 900; cursor: pointer; }
.ctu-table td { font-size: 14px; }
.ctu-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--ctu-space-3); flex-wrap: wrap; margin-top: var(--ctu-space-3); }
.ctu-wizard-steps { display: grid; gap: 8px; margin-bottom: var(--ctu-space-4); }
.ctu-step { display: flex; align-items: center; gap: 8px; min-height: 34px; color: var(--ctu-muted); font-weight: 800; }
.ctu-step-index { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--ctu-muted); background: #edf2f7; }
.ctu-step.active .ctu-step-index { color: #fff; background: var(--ctu-brand); }
.ctu-step.done .ctu-step-index { color: #fff; background: var(--ctu-success); }
.ctu-preview { display: grid; gap: var(--ctu-space-3); border: 1px solid var(--ctu-line); border-radius: var(--ctu-radius); padding: var(--ctu-space-3); background: #fbfcfe; }
.ctu-logo-preview { display: grid; min-height: 80px; place-items: center; border: 1px dashed var(--ctu-line); border-radius: var(--ctu-radius); background: #fff; }
.ctu-logo-preview img { max-width: 220px; max-height: 90px; }
.ctu-auth-wrap { display: grid; min-height: 100vh; place-items: center; padding: var(--ctu-space-4); }
.ctu-auth-card { width: min(100%, 460px); }
.ctu-footer { color: var(--ctu-muted); font-size: 12px; text-align: center; padding: var(--ctu-space-5); }
@media (min-width: 768px) { .ctu-layout { grid-template-columns: 260px minmax(0, 1fr); } .ctu-sidebar { position: sticky; top: 64px; display: block; height: calc(100vh - 64px); overflow: auto; border-right: 1px solid var(--ctu-line); border-bottom: 0; } .ctu-nav-toggle { display: none; } .ctu-main { padding: var(--ctu-space-6); } .ctu-page-header { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .ctu-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctu-grid-3, .ctu-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ctu-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctu-wizard { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--ctu-space-4); } }
@media (min-width: 1120px) { .ctu-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ctu-topbar { align-items: flex-start; } .ctu-brand-text small { display: none; } .ctu-top-actions { width: 100%; justify-content: flex-start; } .ctu-button { min-height: 38px; padding: 8px 10px; } .ctu-page-title { font-size: 25px; } }

.ctu-brand-logo{max-width:132px;max-height:42px;object-fit:contain;display:block}
.ctu-login-logo{max-width:220px;max-height:96px;object-fit:contain;margin:0 auto 16px;display:block}
.ctu-upload-preview{margin:8px 0 0;display:flex;align-items:center;gap:10px;color:var(--ctu-muted);font-size:12px}
.ctu-upload-preview img{max-width:180px;max-height:72px;object-fit:contain;border:1px solid var(--ctu-border);border-radius:6px;background:#fff;padding:6px}
.ctu-progress{height:8px;background:var(--ctu-surface-alt);border:1px solid var(--ctu-border);border-radius:999px;overflow:hidden;margin:8px 0}
.ctu-progress span{display:block;height:100%;background:var(--ctu-primary);transition:width .2s ease}