:root {
  --primary-color: #fff;
  --secondary-color: #1d1d1f;
  --accent: #eaf3ff;
  --text-color: #242429;
  --muted: #696970;
  --border-color: #e5e5ea;
  --light-bg: #f5f5f7;
  --green: #27704f;
  --red: #a53636;
  --amber: #855500;
  --sidebar-w: 238px;
  color-scheme: light;
}

body {
  color: var(--text-color);
  background: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

body a { color: #0066cc; text-decoration: none; }
body a:hover { color: #004e9e; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #4385ce;
  outline-offset: 3px;
}
.easy-text-logo { color: #1d1d1f !important; font: 650 26px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -.075em; }
.panel-wrapper { min-height: 100vh; background: #fafafa; }
.sidebar { background: #fff; color: var(--text-color); border-right: 1px solid #e9e9ed; box-shadow: none; }
.sidebar-brand { padding: 23px 21px 18px; border-bottom: 1px solid #ededf0; }
.sidebar-brand .tagline { color: #6b6b73; font-size: 10px; letter-spacing: .1em; }
.sidebar-nav { padding: 15px 12px; }
.sidebar-nav .nav-label { padding: 17px 11px 6px; color: #77777e; font-size: 9px; letter-spacing: .11em; }
.sidebar-nav a { min-height: 42px; padding: 9px 11px; border-radius: 10px; color: #4b4b52; font-size: 12px; gap: 10px; }
.sidebar-nav a i { color: #696970; font-size: 13px; }
.sidebar-nav a:hover { color: #1d1d1f; background: #f5f5f7; }
.sidebar-nav a.active { color: #005bb5; background: #eaf3ff; font-weight: 600; }
.sidebar-nav a.active i { color: #0066cc; }
.sidebar-nav a .badge-count { background: #0066cc; color: #fff; }
.sidebar-footer { padding: 13px; border-top: 1px solid #ededf0; }
.sidebar-user { gap: 9px; }
.sidebar-user .avatar { width: 34px; height: 34px; background: #eaf3ff; color: #005bb5; font-size: 12px; }
.sidebar-user .name { color: #242429; font-size: 11px; }
.sidebar-user .mail { color: #696970; font-size: 10px; overflow-wrap: anywhere; }
.sidebar-user a.logout { color: #55555c; padding: 9px; }
.main-content { padding: 0 34px 54px; }
.topbar { position: sticky; top: 0; z-index: 5; min-height: 82px; margin: 0 -4px 25px; padding: 16px 4px; border-bottom: 1px solid #ebebee; background: #fafafae8; backdrop-filter: blur(18px); }
.topbar h1 { color: #1d1d1f; font: 600 24px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -.04em; }
.topbar .subtitle { margin-top: 4px; color: #696970; font-size: 12px; }
.topbar .topbar-actions { gap: 8px; }
.btn-icon { width: 42px; height: 42px; border-radius: 50%; color: #33333a; border-color: #e1e1e6; }
.btn-icon:hover { border-color: #b7cde6; background: #f5f9ff; }
.btn-easy { min-height: 42px; padding: 9px 17px; border: 1px solid #0066cc; border-radius: 22px; background: #0066cc; color: #fff; font-size: 12px; }
.btn-easy:hover { border-color: #0054aa; background: #0054aa; color: #fff; opacity: 1; }
.btn-easy.accent { border-color: #0066cc; background: #0066cc; color: #fff; }
.btn-easy.outline { border-color: #d7d7de; background: #fff; color: #33333a; }
.btn-easy.outline:hover { border-color: #b7cde6; background: #f5f9ff; color: #0054aa; }
.btn-easy.sm { min-height: 36px; padding: 7px 13px; border-radius: 20px; }
.card-easy,.stat-tile { border: 1px solid #e6e6ea; border-radius: 17px; background: #fff; box-shadow: 0 4px 18px #1d273508; }
.card-easy { padding: 22px; }
.card-easy .card-head { gap: 12px; }
.card-easy .card-head h3 { color: #242429; font-size: 15px; letter-spacing: -.02em; }
.card-easy .card-head a { color: #0066cc; font-size: 12px; }
.stat-tile { padding: 18px 19px; }
.stat-tile .stat-icon { width: 38px; height: 38px; margin-bottom: 11px; border-radius: 50%; background: #eef5fd; color: #286299; font-size: 15px; }
.stat-tile .stat-value { color: #1d1d1f; font-size: 25px; font-weight: 600; letter-spacing: -.035em; }
.stat-tile .stat-label { color: #53535b; font-size: 11px; }
.stat-tile .stat-meta { color: #696970; font-size: 10px; }
.stat-tile .stat-meta.up,.badge-easy.ok { color: #21613f; }
.stat-tile .stat-meta.warn,.badge-easy.warn { color: #754e00; }
.table-easy { border-spacing: 0; }
.table-easy th { color: #696970; font-size: 9px; letter-spacing: .06em; }
.table-easy td { color: #44444b; font-size: 11px; }
.table-easy .cell-main { color: #242429; }
.table-easy .cell-sub { color: #696970; font-size: 10px; }
.table-easy tr:hover td { background: #fafafd; }
.badge-easy { padding: 4px 9px; font-size: 10px; }
.badge-easy.ok { background: #eaf5ee; }
.badge-easy.warn { background: #fff5df; }
.badge-easy.err { color: #8c2e2e; background: #faeded; }
.badge-easy.info { color: #245c91; background: #edf4fb; }
.badge-easy.muted { color: #505058; background: #f1f1f4; }
.progress-easy { background: #ececf0; }
.progress-easy .bar { background: #5c8fbe; }
.progress-easy .bar.warn { background: #b27813; }
.progress-easy .bar.err { background: #a53636; }
.usage-row .u-label { font-size: 11px; }
.usage-row .u-val { color: #696970; font-size: 10px; }
.timeline-item .t-dot { background: #d7eaff; }
.timeline-item .t-title { color: #27272d; font-size: 11px; }
.timeline-item .t-text,.timeline-item .t-time { color: #696970; font-size: 10px; }
.form-control,.form-control-easy,.login-card .form-control { height: auto; min-height: 44px; padding: 10px 13px; border: 1px solid #d7d7de; border-radius: 11px; background-color: #fff; color: #242429; font: inherit; font-size: 13px; box-shadow: none; }
.form-control:focus,.form-control-easy:focus,.login-card .form-control:focus { border-color: #6a9bc9; outline: 3px solid #dcecff; outline-offset: 1px; box-shadow: none; }
.text-muted-easy { color: #5c5c64; font-size: 11px; }
.empty-state { color: #696970; }
.empty-state .es-title { color: #242429; }

.login-body { flex-direction: column; gap: 14px; padding: 28px 18px; background: #f4f5f7; }
.login-card { max-width: 410px; padding: 38px; border: 1px solid #e8e8ec; border-radius: 22px; background: #fff; box-shadow: 0 18px 60px #171a2410; }
.login-card .easy-text-logo { color: #1d1d1f !important; font-size: 30px; }
.login-card h2 { margin: 28px 0 5px; color: #1d1d1f; font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.login-card .login-sub { margin-bottom: 27px; color: #696970; font-size: 13px; }
.login-card label { color: #42424a; font-size: 11px; }
.login-card .form-group { margin-bottom: 15px; }
.login-card .btn-easy { width: 100%; margin-top: 8px; }
.login-card .login-foot { color: #696970; font-size: 12px; }
.login-card .login-foot a { color: #0066cc; }
.login-note { color: #64646c; font-size: 11px; }
.login-note a { color: #3c6591 !important; }

@media (max-width: 1100px) {
  .main-content { padding-inline: 24px; }
  .grid-4 { gap: 12px; }
}
@media (max-width: 768px) {
  .panel-wrapper { display: block; }
  .sidebar { position: sticky; top: 0; display: block; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid #e4e4e8; }
  .sidebar-brand { min-height: 54px; padding: 14px 16px 9px; border-bottom: 0; }
  .sidebar-brand .easy-text-logo { font-size: 23px; }
  .sidebar-brand .tagline { display: none; }
  .sidebar-nav { display: flex; width: 100%; gap: 3px; padding: 3px 10px 9px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .sidebar-nav .nav-label { display: none; }
  .sidebar-nav a { flex: 0 0 auto; min-height: 39px; margin: 0; padding: 8px 10px; font-size: 10px; }
  .sidebar-nav a i { width: auto; }
  .sidebar-footer { position: absolute; top: 0; right: 6px; display: block; width: auto; padding: 8px; border: 0; }
  .sidebar-user { gap: 0; }
  .sidebar-user .avatar,.sidebar-user .name,.sidebar-user .mail { display: none; }
  .sidebar-user a.logout { min-width: 40px; min-height: 40px; display: grid; place-items: center; margin: 0; padding: 0; }
  .main-content { margin: 0; padding: 0 17px 36px; }
  .topbar { min-height: 76px; margin-bottom: 17px; padding-block: 12px; }
  .topbar h1 { font-size: 21px; }
  .topbar .subtitle { font-size: 11px; }
  .topbar .topbar-actions { gap: 6px; }
  .topbar .btn-easy { min-height: 38px; padding: 8px 11px; font-size: 10px; }
  .topbar .btn-icon { width: 38px; height: 38px; }
  .grid-4,.grid-even { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-2 { grid-template-columns: minmax(0,1fr); }
  .stat-tile { padding: 14px; }
  .card-easy { overflow-x: auto; padding: 16px; }
  .table-easy { min-width: 580px; }
  .table-easy td { padding: 11px 9px; }
}
@media (max-width: 480px) {
  .main-content { padding-inline: 12px; }
  .topbar { align-items: flex-start; }
  .topbar .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .topbar .topbar-actions .btn-easy { font-size: 12px; gap: 6px; }
  .topbar .topbar-actions .btn-easy i { font-size: 13px; }
  .card-easy { padding: 14px; }
  .grid-4 { gap: 9px; }
  .stat-tile .stat-label { line-height: 1.35; }
  .sidebar-nav { gap: 0; }
  .sidebar-nav a { padding-inline: 9px; }
  .login-card { padding: 30px 24px; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: #fafafa; backdrop-filter: none; }
}

/* Shared readable type and accessible motion settings. */
.sidebar-nav a,.btn-easy,.topbar .subtitle,.stat-tile .stat-label,.text-muted-easy,.login-card label { font-size: 13px; }
.table-easy td { font-size: 13px; }
.table-easy th,.table-easy .cell-sub,.stat-tile .stat-meta,.sidebar-user .mail { font-size: 12px; }
.main-content { min-width: 0; }
.main-content > .kb-section { padding: 12px 0 48px; }
.modal-content { box-shadow: 0 24px 80px #172a4020; }
.modal-title { letter-spacing: -.03em; }
.preview-notice { padding: 12px 16px; margin: 16px 0; border-radius: 12px; background: #edf4fb; color: #245c91; font-size: 13px; }
@media(max-width:768px) { .topbar { position: static; flex-wrap: wrap; gap: 12px; } .sidebar { z-index: 10; } .sidebar-nav a { font-size: 12px; } .grid-4,.grid-even { grid-template-columns: minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }