/* ==========================================================
   DMZ (Domain Management Zystem) — 공용 디자인 시스템
   Go 백엔드(dmz-server) static/ 전용. 모든 페이지가 공유한다.
   팔레트: 남색(#0f1e3d, #172554) / 블루(#2563eb) / 슬레이트
   ========================================================== */

:root {
  --navy-950:#08142d;
  --navy-900:#0f1e3d;
  --navy-800:#172554;
  --navy-700:#1e3a8a;
  --blue-700:#1d4ed8;
  --blue-600:#2563eb;
  --blue-100:#dbeafe;
  --blue-50:#eff6ff;
  --slate-900:#0f172a;
  --slate-800:#1e293b;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748b;
  --slate-400:#94a3b8;
  --slate-300:#cbd5e1;
  --slate-200:#e2e8f0;
  --slate-100:#f1f5f9;
  --slate-50:#f8fafc;
  --green-800:#166534;
  --green-700:#15803d;
  --green-100:#dcfce7;
  --amber-800:#92400e;
  --amber-700:#b45309;
  --amber-100:#fef3c7;
  --red-700:#b91c1c;
  --red-600:#dc2626;
  --red-100:#fee2e2;
  --teal-800:#115e59;
  --teal-100:#ccfbf1;
  --violet-800:#5b21b6;
  --violet-100:#ede9fe;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.055);
  --font-mono:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--slate-100);color:var(--slate-900);font-family:"Segoe UI","Noto Sans KR","Malgun Gothic",Arial,sans-serif;font-size:15px;line-height:1.6}
h1,h2,h3,p{word-break:keep-all}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
code{padding:2px 6px;border:1px solid var(--slate-200);border-radius:6px;background:var(--slate-100);color:var(--navy-700);font:13px var(--font-mono)}

/* ---------- 앱 셸 (사이드바 + 콘텐츠) ---------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{position:sticky;top:0;display:flex;flex:0 0 252px;flex-direction:column;height:100vh;padding:20px 14px;background:#fff;border-right:1px solid var(--slate-200);overflow-y:auto}
.content{display:flex;flex:1;min-width:0;flex-direction:column}
.container{width:100%;max-width:1180px;margin:0 auto;padding:32px 36px 24px;flex:1}
.footer{padding:14px 36px 22px;color:var(--slate-400);font-size:12px;text-align:center}

.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;border-bottom:1px solid var(--slate-100)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--navy-800);color:#fff;font:800 12px var(--font-mono);letter-spacing:.5px}
.brand-info{display:flex;flex-direction:column;line-height:1.3}
.brand-name{color:var(--navy-800);font-size:16px;font-weight:800}
.brand-sub{color:var(--slate-400);font-size:11px}

.side-nav{display:flex;flex-direction:column;gap:3px;margin-top:18px}
.nav-title{margin:7px 0 5px;padding:0 10px;color:var(--slate-400);font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.side-link{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:var(--radius-sm);background:none;color:var(--slate-600);font-size:14px;font-weight:650;text-align:left;cursor:pointer}
.side-link:hover{background:var(--slate-100);color:var(--slate-900)}
.side-link.active{background:var(--blue-50);color:var(--blue-700)}
.side-link:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.side-link svg{flex:none;color:var(--slate-400)}
.side-link:hover svg,.side-link.active svg{color:currentColor}

.sidebar-bottom{display:flex;flex-direction:column;gap:7px;margin-top:auto;padding-top:14px;border-top:1px solid var(--slate-100)}
.user-chip{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--slate-200);border-radius:10px;background:var(--slate-50)}
.user-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy-800);color:#fff;font-size:12px;font-weight:800}
.user-meta{display:flex;min-width:0;flex-direction:column;line-height:1.28}
.user-name{overflow:hidden;color:var(--slate-800);font-size:13px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.user-role{color:var(--slate-400);font-size:11px}
.side-logout{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--slate-600);font-size:14px;font-weight:650;text-align:left;cursor:pointer}
.side-logout:hover{background:var(--red-100);color:var(--red-700)}
.side-logout svg{flex:none}

/* ---------- 탭 패널 (관리자 대시보드) ---------- */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---------- 페이지 헤더 ---------- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{margin:0 0 5px;font-size:28px;line-height:1.25;letter-spacing:-.45px}
.page-desc{margin:0;color:var(--slate-500);font-size:15px}
.page-actions{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- 버튼 ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:41px;padding:9px 16px;border:1px solid var(--blue-600);border-radius:var(--radius-sm);background:var(--blue-600);color:#fff;font-size:14px;font-weight:750;cursor:pointer;text-decoration:none}
.button:hover{background:var(--blue-700);border-color:var(--blue-700)}
.button.secondary{background:#fff;border-color:var(--slate-300);color:var(--slate-700)}
.button.secondary:hover{background:var(--slate-50);border-color:var(--slate-400)}
.button.danger{background:#fff;border-color:var(--red-100);color:var(--red-700)}
.button.danger:hover{background:var(--red-600);border-color:var(--red-600);color:#fff}
.button.success{background:var(--green-700);border-color:var(--green-700)}
.button.success:hover{background:var(--green-800);border-color:var(--green-800)}
.button.small{min-height:33px;padding:5px 11px;font-size:12.5px}
.button.block{width:100%;margin-top:22px}
.button:disabled{background:var(--slate-300);border-color:var(--slate-300);color:#fff;cursor:not-allowed}

/* ---------- 카드 ---------- */
.card{margin-bottom:18px;padding:24px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--slate-100)}
.card-head h2{margin:0;color:var(--slate-900);font-size:18px}
.card-head p{width:100%;margin:4px 0 0;color:var(--slate-500);font-size:14px}
.card h2{margin:0 0 7px;font-size:18px}
.card p{margin:0 0 12px;color:var(--slate-500)}

/* ---------- 관리자 작업 공간 / DNS 설정 도구 ---------- */
.workspace-card{padding:24px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.workspace-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--slate-100)}
.workspace-head .button{white-space:nowrap}
.workspace-head h2{margin:0 0 4px;font-size:19px}
.workspace-head p{margin:0;color:var(--slate-500);font-size:13.5px;line-height:1.6}
.quick-record-card{max-width:none}
.quick-record-form{display:grid;grid-template-columns:minmax(220px,1.55fr) minmax(150px,1fr) minmax(105px,.65fr) minmax(105px,.65fr);gap:0 14px;align-items:end}
.quick-record-form .field{margin-bottom:14px}
.quick-value-field{grid-column:span 2}
.quick-priority-field{grid-column:span 1}
.quick-submit{width:100%;margin-bottom:14px;padding-right:10px;padding-left:10px;white-space:nowrap}
.quick-priority-field label,.optional{white-space:nowrap}
.optional{color:var(--slate-400);font-size:10px;font-weight:600}
input:disabled,select:disabled{background:var(--slate-100);color:var(--slate-400);cursor:not-allowed}
.dns-setup-card{max-width:980px}
.dns-setup-grid{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(360px,1.35fr);gap:28px}
.dns-setup-copy{padding-right:28px;border-right:1px solid var(--slate-100)}
.dns-setup-copy h3,.dns-tool-actions h3{margin:0 0 8px;color:var(--slate-800);font-size:14px}
.dns-setup-copy p{margin:0 0 18px;color:var(--slate-500);font-size:13px;line-height:1.65}
.server-address{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--slate-200);border-radius:var(--radius-sm);background:var(--slate-50);color:var(--slate-500);font-size:12px;font-weight:700}
.server-address code{padding:0;border:0;background:transparent;color:var(--navy-800);font-size:14px}
.dns-download{width:100%;margin-top:12px}
.setup-steps{margin:0 0 14px;padding-left:20px;color:var(--slate-600);font-size:12.5px}
.setup-steps li{margin:4px 0;padding-left:2px}
.command-box{padding:10px 12px;border:1px solid var(--slate-200);border-radius:var(--radius-sm);background:var(--navy-950);overflow-x:auto}
.command-box code{display:block;padding:0;border:0;background:transparent;color:#bfdbfe;font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-all}
.restore-help{margin-top:11px;color:var(--slate-600);font-size:12.5px}
.restore-help summary{cursor:pointer;font-weight:750}
.restore-help .command-box{margin-top:8px}
.tool-warning{margin:22px 0 0!important;padding:11px 13px;border-radius:var(--radius-sm);background:#fffbeb;color:var(--amber-800)!important;font-size:11.5px!important;line-height:1.55!important}
.dns-tool-actions{min-width:0}

/* ---------- 통계 카드 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}
.stat-card{padding:18px 20px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat-label{color:var(--slate-600);font-size:13px;font-weight:700}
.stat-icon{color:var(--slate-400)}
.stat-value{display:block;margin-top:8px;font-size:31px;font-weight:850;line-height:1.1}
.stat-foot{display:block;margin-top:7px;color:var(--slate-400);font-size:12px}

/* ---------- 사용량 카드 ---------- */
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.usage-card{flex:1;min-width:240px;padding:15px 18px;border:1px solid var(--slate-200);border-left:4px solid var(--blue-600);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-card)}
.usage-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px;color:var(--slate-600);font-size:13px;font-weight:700}
.usage-bar{height:9px;border-radius:999px;background:var(--slate-100);overflow:hidden}
.usage-bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue-600),#60a5fa);transition:width .2s}

/* ---------- 배지 ---------- */
.badge,.type-tag,.status-tag,.role-badge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.25px}
.type-tag{background:var(--blue-100);color:var(--blue-700);font-family:var(--font-mono)}
.status-tag.pending{background:var(--amber-100);color:var(--amber-700)}
.status-tag.approved{background:var(--green-100);color:var(--green-800)}
.status-tag.rejected{background:var(--red-100);color:var(--red-700)}
.role-badge{background:var(--blue-50);color:var(--blue-700)}
.role-badge.admin{background:var(--violet-100);color:var(--violet-800)}

/* ---------- 테이블 ---------- */
.table-card{border:1px solid var(--slate-200);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);overflow:hidden}
.table-wrap{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:12px 14px;border-bottom:1px solid var(--slate-100);text-align:left;vertical-align:middle;white-space:nowrap}
th{border-bottom:1px solid var(--slate-200);background:var(--slate-50);color:var(--slate-500);font-size:10.5px;font-weight:850;letter-spacing:.7px;text-transform:uppercase}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--slate-50)}
.cell-mono{font:12.5px var(--font-mono);color:var(--slate-700)}
.cell-muted{color:var(--slate-500)}
.actions-cell{display:flex;gap:6px}
.empty-row td{padding:30px 14px;color:var(--slate-500);text-align:center}

/* ---------- 알림/데모 노트 ---------- */
.demo-note{display:none;margin-bottom:14px;padding:9px 13px;border:1px dashed var(--slate-300);border-radius:var(--radius-sm);background:var(--slate-50);color:var(--slate-500);font-size:12px}
.demo-note.show{display:block}
.notice{display:flex;gap:12px;margin-bottom:18px;padding:14px 16px;border:1px solid;border-left-width:4px;border-radius:var(--radius-md);font-size:13px}
.notice strong{display:block;margin-bottom:2px}
.notice p{margin:0}
.notice.info{border-color:#93c5fd;background:var(--blue-50)}
.notice.warning{border-color:#fcd34d;background:#fffbeb;color:var(--amber-800)}
.notice-icon{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:8px;background:rgba(255,255,255,.65);font-weight:900}

/* ---------- 폼 공통 ---------- */
.field{margin-bottom:14px}
.field label,form>label{display:block;margin:0 0 7px;color:var(--slate-700);font-size:13px;font-weight:800}
input[type="text"],input[type="password"],input[type="number"],select{width:100%;min-height:43px;padding:9px 12px;border:1px solid var(--slate-300);border-radius:var(--radius-sm);background:#fff;color:var(--slate-900);font-size:14px;outline:none}
input:focus,select:focus{border-color:var(--blue-600);outline:3px solid var(--blue-100)}
.field-hint{margin:6px 0 0;color:var(--slate-400);font-size:12px}
.field-error{display:none;margin:6px 0 0;color:var(--red-600);font-size:12px}
.field.invalid input{border-color:var(--red-600)}
.field.invalid .field-error{display:block}

/* ---------- 인증 화면 (로그인/회원가입) ---------- */
.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.8fr);min-height:calc(100vh - 120px);align-items:center;gap:56px}
/* 인증 카드가 길어지는 화면(회원가입)은 상단 기준 정렬로 로그인과 비율을 맞춘다 */
.auth-layout.top{align-items:flex-start}
.auth-layout.top .auth-hero{padding-top:64px}
.auth-hero{padding:30px}
.auth-hero-mark{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--blue-50);color:var(--blue-700);font-size:12px;font-weight:800}
.auth-hero h1{max-width:600px;margin:20px 0 14px;color:var(--navy-900);font-size:42px;line-height:1.16;letter-spacing:-1.6px}
.auth-hero p{max-width:570px;margin:0;color:var(--slate-500);font-size:16px}
.auth-points{display:grid;gap:11px;margin-top:28px}
.auth-point{display:flex;align-items:center;gap:10px;color:var(--slate-700);font-size:14px;font-weight:650}
.auth-point span{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--slate-200);color:var(--blue-700);font-weight:900}
.auth-card{width:100%;max-width:470px;margin-left:auto;padding:30px}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head h1{margin:5px 0 7px;font-size:25px}
.auth-head p{margin:0;color:var(--slate-500);font-size:14px}
.eyebrow{margin:0;color:var(--blue-600);font-size:11px;font-weight:850;letter-spacing:1.5px;text-transform:uppercase}
.auth-alt{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--slate-100);color:var(--slate-500);font-size:13px;text-align:center}
.auth-alt a{color:var(--blue-700);font-weight:800}
.auth-alt a:hover{text-decoration:underline}

.status-box{display:none;margin-bottom:14px;padding:12px 14px;border:1px solid;border-radius:var(--radius-sm);font-size:13px;line-height:1.55}
.status-box.show{display:block}
.status-box.error,.status-box.rejected{border-color:#fecaca;background:#fef2f2;color:var(--red-600)}
.status-box.pending{border-color:#fde68a;background:#fffbeb;color:var(--amber-700)}

.role-group{display:flex;gap:10px}
.role-option{position:relative;flex:1;padding:12px 10px;border:1px solid var(--slate-300);border-radius:var(--radius-sm);background:#fff;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.role-option input{position:absolute;inset:0;opacity:0;cursor:pointer}
.role-option.selected{border-color:var(--blue-600);background:var(--blue-50)}
.role-option .role-title{font-size:13px;font-weight:800}
.role-option .role-desc{margin-top:2px;color:var(--slate-500);font-size:11px}

.result-screen{display:none;text-align:center}
.result-screen.show{display:block}
form.hide{display:none}
.result-icon{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:var(--green-100);color:var(--green-700);font-size:26px;font-weight:900}
.result-screen h2{margin:0 0 8px;font-size:18px}
.result-screen p{margin:0 0 20px;color:var(--slate-500);font-size:13.5px;line-height:1.6}
.demo-badge{display:inline-block;margin-top:14px;padding:3px 10px;border-radius:999px;background:var(--slate-100);color:var(--slate-500);font-size:11px;font-weight:700}

.demo-tools{margin-top:22px;padding-top:16px;border-top:1px dashed var(--slate-300)}
.demo-tools p{margin:0 0 8px;color:var(--slate-400);font-size:11px;text-align:center}
.demo-buttons{display:flex;gap:6px}
.demo-buttons button{flex:1;padding:6px 4px;border:1px solid var(--slate-200);border-radius:6px;background:#fff;color:var(--slate-500);font-size:11px;cursor:pointer}
.demo-buttons button:hover{background:var(--slate-50)}

/* ---------- 모달 ---------- */
.modal-overlay{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.55)}
.modal-overlay.show{display:flex}
.modal{position:relative;width:100%;max-width:500px;max-height:85vh;padding:26px;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(2,6,23,.35);overflow-y:auto}
.modal h2{margin:0 0 18px;font-size:18px}
.modal-row{display:flex;gap:10px}
.modal-row .field{flex:1}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.modal-close{position:absolute;top:14px;right:16px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--slate-400);font-size:18px;cursor:pointer}
.modal-close:hover{background:var(--slate-100);color:var(--slate-700)}
.record-list{margin-top:20px;padding-top:16px;border-top:1px solid var(--slate-100)}
.record-list h3{margin:0 0 10px;color:var(--slate-500);font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.record-list .table-card{box-shadow:none}

/* ---------- 토스트 ---------- */
.toast{display:none;position:fixed;left:50%;bottom:24px;z-index:100;transform:translateX(-50%);padding:10px 20px;border-radius:9px;background:var(--slate-900);color:#fff;font-size:13px;font-weight:700}
.toast.show{display:block}

/* ---------- 랜딩(index) ---------- */
.landing{display:flex;min-height:100vh;flex-direction:column}
.landing-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 32px;background:#fff;border-bottom:1px solid var(--slate-200)}
.landing-nav{display:flex;align-items:center;gap:8px}
.landing-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.hero{max-width:680px;text-align:center}
.hero h1{margin:18px 0 14px;color:var(--navy-900);font-size:40px;line-height:1.2;letter-spacing:-1.4px}
.hero h1 span{color:var(--blue-600)}
.hero p{margin:0 0 32px;color:var(--slate-500);font-size:16px;line-height:1.7}
.cta-group{display:flex;justify-content:center;gap:12px;margin-bottom:48px;flex-wrap:wrap}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.feature-card{padding:20px 18px;border:1px solid var(--slate-200);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card)}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:var(--radius-sm);background:var(--navy-800);color:#fff;font-family:var(--font-mono);font-size:13px;font-weight:700}
.feature-card h3{margin:12px 0 6px;font-size:15px}
.feature-card p{margin:0;color:var(--slate-500);font-size:13px;line-height:1.6}

/* ---------- 반응형 ---------- */
@media(max-width:1040px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-record-form{grid-template-columns:1fr 1fr}
  .quick-value-field{grid-column:1/-1}
}
@media(max-width:860px){
  /* PC 기준 수동 줄바꿈은 모바일에서 해제하고 자연 줄바꿈에 맡긴다 */
  .pc-br{display:none}
  .app-shell{display:block}
  .sidebar{position:static;width:100%;height:auto;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-right:0;border-bottom:1px solid var(--slate-200)}
  .brand{padding:0;border:0}
  .side-nav{flex-direction:row;flex-wrap:wrap;margin:0}
  .side-link{width:auto}
  .nav-title{display:none}
  .sidebar-bottom{width:auto;margin:0 0 0 auto;padding:0;border:0;flex-direction:row;align-items:center}
  .side-logout{width:auto}
  .user-chip{display:none}
  .container{padding:24px 20px 18px}
  .auth-layout{grid-template-columns:1fr;gap:10px;min-height:auto}
  /* 모바일에서는 로그인/가입 폼을 소개 문구보다 먼저 보여준다 */
  .auth-layout .auth-card{order:-1;margin:0 auto}
  .auth-hero{padding:20px 0 12px}
  .auth-layout.top .auth-hero{padding-top:20px}
  .auth-hero h1{font-size:29px}
  .landing-header{flex-wrap:wrap}
  .feature-grid{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .dns-setup-grid{grid-template-columns:1fr}
  .dns-setup-copy{padding:0 0 22px;border-right:0;border-bottom:1px solid var(--slate-100)}
}
@media(max-width:620px){
  .container{padding:20px 14px 16px}
  .page-head h1{font-size:23px}
  .stat-grid{grid-template-columns:1fr}
  .modal-row{flex-direction:column;gap:0}
  .card{padding:19px 16px}
  .auth-hero h1{font-size:27px}
  .sidebar-bottom{width:100%;margin-left:0}
  .landing-header{padding:12px 16px}
  .quick-record-form{grid-template-columns:1fr 1fr}
  .quick-value-field{grid-column:1/-1}
  .quick-priority-field{grid-column:1/-1}
  .quick-submit{grid-column:1/-1}
  .workspace-card{padding:18px 15px}
  .workspace-head{flex-direction:column}
}