* { box-sizing: border-box; }
body { margin: 0; background: #100c10; color: #eaf0fa; font: 16px system-ui, sans-serif; }
main { max-width: 750px; margin: auto; padding: 24px; }
header p { color: #ff3847; letter-spacing: .14em; }
header h1 { margin-top: 0; }
.card { background: #24191e; border: 1px solid #503039; border-radius: 14px; padding: 20px; margin-block: 16px; }
label { display: block; margin-block: 12px; }
input, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px; background: #100c10; color: inherit; border: 1px solid #79515c; border-radius: 6px; font: inherit; }
textarea { min-height: 90px; }
.check { display: inline-block; width: auto; }
button, a { display: inline-block; padding: 8px 12px; border-radius: 6px; color: #100c10; background: #ff3847; font: inherit; border: 0; cursor: pointer; text-decoration: none; }
:focus-visible { outline: 2px solid white; outline-offset: 3px; }
article { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid #503039; }
.error { color: #ffaaaa; }
.danger { background: #ffaaaa; }
.dashboard { display: grid; grid-template-columns: minmax(195px, 245px) minmax(0, 1fr); background: #100c10; }
.dashboard main { width: 100%; max-width: 1250px; padding: clamp(18px, 4vw, 52px); }
.sidebar { position: sticky; top: 0; min-height: 100dvh; align-self: start; display: flex; flex-direction: column; gap: 24px; padding: 25px 17px; background: #180f14; border-inline-end: 1px solid #42232d; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px; }
.brand strong { display: block; font-size: 1.25rem; }
.brand small, fieldset small { color: #aab9cc; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; background: #4a1923; color: #ff5260; font-size: 1.5rem; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar nav a, .sign-out button { background: transparent; color: #cbd6e6; padding: 12px; border: 1px solid transparent; }
.sidebar nav a[aria-current="page"], .sidebar nav a:hover { background: #421b25; border-color: #a72c3d; color: #ffb8be; }
.sidebar nav span { display: inline-block; width: 23px; color: #ff5260; }
.sign-out { margin-top: auto; }
.dashboard .card { background: #24191e; border-color: #503039; padding: clamp(16px, 3vw, 30px); }
fieldset { min-inline-size: 0; border: 1px solid #503039; border-radius: 12px; padding: 10px 16px 16px; margin: 18px 0; }
legend { color: #ff9da7; padding-inline: 8px; font-weight: 650; }
.color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-bottom: 12px; }
.color-field label { margin-bottom: 4px; }
.color-inputs { display: flex; gap: 8px; }
.color-inputs input[type="color"] { flex: 0 0 52px; height: 42px; padding: 4px; cursor: pointer; }
.color-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.secondary { color: #ffe3e6; background: #472630; }
.preview-tile { border-radius: 9px; padding: 12px; }
.preview-logo { max-width: 100%; object-fit: contain; }
.catalog-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
fieldset select { display: block; width: 100%; margin-top: 5px; padding: 9px; color: inherit; background: #100c10; border: 1px solid #79515c; border-radius: 6px; font: inherit; }
#appearance-preview h2 { border-inline-start: 4px solid; padding-inline-start: 10px; }
@media (max-width: 720px) {
 .dashboard { display: block; }
 .sidebar { position: static; min-height: auto; gap: 12px; }
 .sidebar nav { display: flex; flex-wrap: wrap; }
 .sign-out { margin: 0; }
 .color-grid { grid-template-columns: 1fr; }
}

.brand-mark { object-fit: contain; background: transparent; width: 54px; height: 54px; }
.brand strong { font-size: 1.05rem; }
button, a { color: #ffffff; }