*, *::before, *::after { box-sizing: border-box; }
:root {
    --bg-primary: #f3f4f6;
    --bg-secondary: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border-color: #d1d5db;
    --input-bg: #f9fafb;
    --accent: #b91c1c;
    --accent-hover: #991b1b;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    --radius-lg: 20px;
    --radius-md: 14px;
    --transition: 0.2s ease;
}
html, body {
    margin: 0; padding: 0; min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(circle at top left, rgba(185, 28, 28, 0.08), transparent 28%), linear-gradient(180deg, #f7f7f8 0%, #eceef1 100%);
    color: var(--text-primary);
}
body { min-height: 100vh; }
.page { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card {
    width:100%; min-width:var(--login-min-width); max-width:var(--login-max-width);
    background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.7);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow:hidden;
}
.brand-line { height:6px; background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 55%, #ef4444 100%); }
.login-header { padding: 34px 34px 18px 34px; text-align:center; }
.login-header h1 { margin:0 0 10px 0; font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight:800; color:#111827; line-height:1.2; }
.login-header p { margin:0; color:var(--text-secondary); font-size:1rem; text-align:center; }
.login-form { padding: 0 34px 34px 34px; }
.form-group { margin-bottom: 18px; }
.form-group label { display:block; margin-bottom:8px; font-size:0.95rem; font-weight:600; color:#374151; }
.form-group input {
    width:100%; height:48px; padding:0 14px; border:1px solid var(--border-color); border-radius:var(--radius-md);
    background:var(--input-bg); font-size:1rem; color:var(--text-primary); outline:none;
    transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-group input:focus { border-color: rgba(185, 28, 28, 0.6); box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12); background:#fff; }
.btn-primary {
    width:100%; height:50px; border:none; border-radius:var(--radius-md); background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    color:#fff; font-size:1rem; font-weight:700; cursor:pointer; transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
    box-shadow:0 10px 24px rgba(185, 28, 28, 0.25);
}
.btn-primary:hover { filter: brightness(0.98); transform: translateY(-1px); }
.alert { margin:0 34px 20px 34px; padding:14px 16px; border-radius:12px; font-size:0.95rem; }
.alert-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.app-page {
    min-height:100vh; padding:28px;
    background: radial-gradient(circle at top left, rgba(185, 28, 28, 0.08), transparent 28%), linear-gradient(180deg, #f7f7f8 0%, #eceef1 100%);
}
.topbar, .forms-section {
    max-width:1200px; margin:0 auto 24px auto; background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.7);
    border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,0.08);
}
.topbar { padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar-title { font-size:1.6rem; font-weight:800; color:#111827; line-height:1.2; }
.topbar-subtitle { margin-top:6px; color:#6b7280; font-size:0.95rem; }
.btn-logout { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; text-decoration:none; font-weight:700; color:#991b1b; background:#fff; border:1px solid #fecaca; }
.forms-section { padding:28px; }
.section-header h1 { margin:0 0 8px 0; font-size:1.8rem; color:#111827; }
.section-header p { margin:0 0 24px 0; color:#6b7280; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.form-tile-wrap { position:relative; }
.form-tile {
    min-height:120px; border-radius:18px; padding:22px; text-decoration:none; border:2px solid #e5e7eb; box-shadow:0 10px 24px rgba(0,0,0,0.06);
    display:flex; align-items:center; justify-content:center; text-align:center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.form-tile:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,0.10); }
.form-tile-title { display:block; width:100%; font-size:1.25rem; font-weight:800; color:#111827; line-height:1.25; text-align:center; }
.empty-state { border:1px dashed #d1d5db; border-radius:16px; background:#f9fafb; color:#6b7280; padding:28px; text-align:center; font-size:1rem; }
.color-edit-btn { position:absolute; right:10px; bottom:10px; width:34px; height:34px; border:none; border-radius:10px; background: rgba(255,255,255,0.92); color:#374151; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,0.12); z-index:5; }
.color-popup { position:absolute; right:10px; bottom:52px; width:190px; padding:12px; border-radius:14px; background:#ffffff; border:1px solid #e5e7eb; box-shadow:0 18px 40px rgba(0,0,0,0.16); z-index:20; display:none; }
.color-popup.is-open { display:block; }
.color-popup-title { font-size:0.9rem; font-weight:700; color:#374151; margin-bottom:10px; }
.color-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.color-swatch { width:100%; aspect-ratio:1 / 1; border:2px solid rgba(255,255,255,0.95); border-radius:10px; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.color-swatch:hover { transform: scale(1.05); }

.form-page {
    min-height:100vh; padding:28px;
    background: radial-gradient(circle at top left, rgba(0,0,0,0.03), transparent 28%), linear-gradient(180deg, #f7f7f8 0%, #eceef1 100%);
}
.form-wrap { max-width:980px; margin:0 auto; }
.form-card {
    background: rgba(255,255,255,0.95); border-radius:22px; box-shadow:0 20px 50px rgba(0,0,0,0.08); overflow:hidden; border:1px solid rgba(255,255,255,0.7);
}
.form-card-line { height:6px; background: linear-gradient(90deg, color-mix(in srgb, var(--form-accent) 70%, #000 30%) 0%, var(--form-accent) 100%); }
.form-card-header { padding:28px 30px 12px 30px; text-align:center; }
.form-card-header h1 { margin:0 0 8px 0; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight:800; color:#111827; }
.form-card-header p { margin:0; color:#6b7280; }
.form-card-body { padding:0 24px 28px 24px; }
.alert-box { margin:10px 0 18px 0; padding:14px 16px; border-radius:12px; font-size:0.95rem; }
.alert-success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.form-step { border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; background:#fff; margin-bottom:16px; }
.form-step-header { width:100%; border:none; background: var(--form-accent-light); padding:18px 20px; text-align:left; font-size:1.08rem; font-weight:800; color:#111827; cursor:pointer; }
.form-step.active .form-step-header { border-bottom:1px solid #e5e7eb; }
.form-step-content { display:none; padding:22px 20px 20px 20px; }
.form-step.active .form-step-content { display:block; }
.form-section { display:grid; gap:16px; margin-bottom:18px; }
.form-grid-12 { grid-template-columns: repeat(12, 1fr); }
.form-col-12 { grid-column: span 12; }
.form-col-6 { grid-column: span 6; }
.form-col-4 { grid-column: span 4; }
.form-col-3 { grid-column: span 3; }
.form-field label { display:block; margin-bottom:8px; font-size:0.95rem; font-weight:700; color:#374151; }
.form-field input, .form-field textarea, .form-field select {
    width:100%; border:1px solid #d1d5db; border-radius:14px; background:#f9fafb; padding:13px 14px; font-size:1rem; color:#111827; outline:none;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    border-color: var(--form-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--form-accent) 15%, transparent); background:#fff;
}
.form-field textarea { min-height:110px; resize:vertical; }
.form-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.form-actions.right-only { justify-content:flex-end; }
.form-btn-primary, .form-btn-secondary {
    min-height:48px; border:none; border-radius:14px; padding:0 22px; font-size:1rem; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition: transform .2s ease, box-shadow .2s ease;
}
.form-btn-primary { background: var(--form-accent); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.form-btn-secondary { background:#fff; color:#374151; border:1px solid #d1d5db; }
.filled-form { margin-top:18px; padding:24px; border-radius:20px; background:#fff; border:1px solid #e5e7eb; }
.filled-header h2 { margin:0 0 8px 0; color:#111827; }
.filled-header p { margin:0 0 18px 0; color:#6b7280; }
.filled-section + .filled-section { margin-top:20px; }
.filled-section h3 { margin:0 0 12px 0; color:#111827; }
.filled-grid { display:grid; gap:14px; margin-bottom:14px; grid-template-columns: repeat(3, 1fr); }
.filled-grid > div { background:#f9fafb; border:1px solid #e5e7eb; border-radius:14px; padding:14px; }
@media (max-width: 860px) {
    .login-card { min-width: unset; }
    .login-header { padding:26px 22px 14px 22px; }
    .login-header h1 { font-size:1.5rem; }
    .login-form { padding:0 22px 24px 22px; }
    .alert { margin:0 22px 18px 22px; }
    .app-page, .form-page { padding:16px; }
    .topbar { flex-direction:column; align-items:stretch; }
    .btn-logout { width:100%; }
    .forms-section, .form-card-body { padding:20px; }
    .form-col-6, .form-col-4, .form-col-3, .filled-grid { grid-template-columns:1fr; grid-column: span 12; }
}