/* Plain CSS. Small reusable layout classes; no framework or build step. */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #636363; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
button, input, select { font: inherit; color: inherit; background: transparent; }
button, select, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
canvas { display: block; }
button { text-transform: none; }
hr { height: 0; border-top-width: 1px; }
:disabled { cursor: not-allowed; }
.absolute { position:absolute; }
.appearance-none { appearance:none; }
.aspect-square { aspect-ratio:1; }
.backdrop-blur-sm { backdrop-filter:blur(4px); }
.bg-black { background-color:#000; }
.bg-black\/50 { background-color:#00000080; }
.bg-gray-50 { background-color:#1b1b1b; }
.bg-indigo-50 { background-color:#2a2018; }
.bg-indigo-600 { background-color:#ff9e3b; }
.bg-indigo-700 { background-color:#ffb86c; }
.bg-surface { background-color:#141414; }
.bg-transparent { background-color:transparent; }
.bg-white\/10 { background-color:#ffffff1a; }
.bg-white\/20 { background-color:#ffffff33; }
.block { display:block; }
.border { border-width:1px; }
.border-8 { border-width:8px; }
.border-b { border-bottom-width:1px; }
.border-gray-100 { border-color:#2d2d2d; }
.border-gray-200 { border-color:#636363; }
.border-gray-300 { border-color:#636363; }
.border-gray-800 { border-color:#2d2d2d; }
.border-indigo-100 { border-color:#5a4028; }
.border-indigo-200 { border-color:#d9b98c; }
.border-r { border-right-width:1px; }
.border-t { border-top-width:1px; }
.border-white\/30 { border-color:#ffffff4d; }
.cursor-pointer { cursor:pointer; }
.fixed { position:fixed; }
.flex { display:flex; }
.flex-1 { flex:1 1 0%; }
.flex-col { flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }
.font-bold { font-weight:700; }
.font-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.gap-2 { gap:0.5rem; }
.gap-3 { gap:0.75rem; }
.grid { display:grid; }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.h-4 { height:1rem; }
.h-\[70vh\] { height:70vh; }
.h-full { height:100%; }
.hidden { display:none; }
.inset-0 { inset:0; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.leading-relaxed { line-height:1.625; }
.max-h-\[90vh\] { max-height:90vh; }
.max-w-2xl { max-width:42rem; }
.mb-1 { margin-bottom:0.25rem; }
.mb-2 { margin-bottom:0.5rem; }
.mb-3 { margin-bottom:0.75rem; }
.min-h-screen { min-height:100vh; }
.ml-2 { margin-left:0.5rem; }
.mt-1 { margin-top:0.25rem; }
.mt-2 { margin-top:0.5rem; }
.mt-3 { margin-top:0.75rem; }
.mt-4 { margin-top:1.0rem; }
.object-contain { object-fit:contain; }
.overflow-hidden { overflow:hidden; }
.overflow-y-auto { overflow-y:auto; }
.p-2 { padding:0.5rem; }
.p-4 { padding:1.0rem; }
.p-6 { padding:1.5rem; }
.pointer-events-none { pointer-events:none; }
.pt-4 { padding-top:1.0rem; }
.pt-6 { padding-top:1.5rem; }
.px-3 { padding-inline:0.75rem; }
.px-4 { padding-inline:1.0rem; }
.py-2 { padding-block:0.5rem; }
.py-3 { padding-block:0.75rem; }
.relative { position:relative; }
.rounded { border-radius:.25rem; }
.rounded-2xl { border-radius:1rem; }
.rounded-3xl { border-radius:1.5rem; }
.rounded-full { border-radius:999px; }
.rounded-lg { border-radius:.5rem; }
.rounded-md { border-radius:.375rem; }
.rounded-xl { border-radius:.75rem; }
.shadow-2xl { box-shadow:0 25px 50px #0006; }
.shadow-lg { box-shadow:0 10px 15px #0003; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left:0.5rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top:0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top:0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top:1.0rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top:1.5rem; }
.sticky { position:sticky; }
.text-base { font-size:1rem;line-height:1.5; }
.text-black { color:#000; }
.text-center { text-align:center; }
.text-gray-400 { color:#b3b3b3; }
.text-gray-500 { color:#b3b3b3; }
.text-gray-700 { color:#e8e8e8; }
.text-indigo-600 { color:#ff9e3b; }
.text-indigo-700 { color:#ffb86c; }
.text-indigo-900 { color:#fae2c8; }
.text-lg { font-size:1.125rem;line-height:1.5; }
.text-sm { font-size:.875rem;line-height:1.5; }
.text-white { color:#fff; }
.text-xl { font-size:1.25rem;line-height:1.5; }
.text-xs { font-size:.75rem;line-height:1.5; }
.top-0 { top:0; }
.tracking-tighter { letter-spacing:-.05em; }
.transition-colors { transition:color .15s,background-color .15s,border-color .15s; }
.uppercase { text-transform:uppercase; }
.w-4 { width:1rem; }
.w-full { width:100%; }
.z-10 { z-index:10; }
.z-50 { z-index:50; }
.disabled\:cursor-not-allowed:disabled { cursor:not-allowed; }
.disabled\:opacity-50:disabled { opacity:.5; }
.focus\:border-indigo-500:focus { border-color:#ffb86c; }
.focus\:outline-none:focus { outline:none; }
.hover\:bg-gray-50:hover { background-color:#1b1b1b; }
.hover\:bg-indigo-100:hover { background-color:#5a4028; }
.hover\:bg-indigo-50:hover { background-color:#2a2018; }
.hover\:bg-indigo-600:hover { background-color:#ff9e3b; }
.hover\:bg-indigo-700:hover { background-color:#ffb86c; }
.hover\:text-gray-600:hover { color:#e8e8e8; }
.hover\:text-indigo-600:hover { color:#ff9e3b; }
.hover\:underline:hover { text-decoration:underline; }
@media (min-width:768px) { .md\:flex-1 { flex:1 1 0%; } }
@media (min-width:768px) { .md\:flex-row { flex-direction:row; } }
@media (min-width:768px) { .md\:h-auto { height:auto; } }
@media (min-width:768px) { .md\:h-full { height:100%; } }
@media (min-width:768px) { .md\:h-screen { height:100vh; } }
@media (min-width:768px) { .md\:min-h-0 { min-height:0; } }
@media (min-width:768px) { .md\:overflow-hidden { overflow:hidden; } }
@media (min-width:768px) { .md\:overflow-y-auto { overflow-y:auto; } }
@media (min-width:768px) { .md\:p-8 { padding:2.0rem; } }
@media (min-width:768px) { .md\:shadow-none { box-shadow:none; } }
@media (min-width:768px) { .md\:shrink-0 { flex-shrink:0; } }
@media (min-width:768px) { .md\:w-96 { width:24rem; } }
@media (min-width:640px) { .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Calendar preview and form components. */


        :root { color-scheme: dark; }
        body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
        :focus-visible { outline: 2px solid #ffb86c; outline-offset: 3px; }
        input[type=radio] { accent-color: #ff9e3b; }
        input[type=text], input[type=number], input[type=date] { min-width: 0; }
        input[type=color].color-picker {
            appearance: none; -webkit-appearance: none;
            width: 5rem; height: 2.75rem; flex: 0 0 5rem;
            padding: 4px; border: 1px solid #6b7280; border-radius: 6px;
            background: #242424; cursor: pointer;
        }
        .color-picker::-webkit-color-swatch-wrapper { padding: 0; }
        .color-picker::-webkit-color-swatch { border: 0; border-radius: 3px; }
        .color-picker::-moz-color-swatch { border: 0; border-radius: 3px; }
        .color-picker:hover { border-color: #ffb86c; }
        .preview-area {
            container-type: size;
            min-width: 0;
            min-height: 0;
            background: radial-gradient(ellipse at center, #211a14 0%, #0a0a0a 65%);
        }
        .phone-preview {
            --preview-ratio: 1320 / 2868;
            aspect-ratio: var(--preview-ratio);
            width: min(90cqw, calc(90cqh * var(--preview-ratio)));
            flex: none;
        }
        #preview-notch {
            position: absolute; left: 50%; top: 1.6%; transform: translateX(-50%);
            width: 28%; height: 3%; border-radius: 999px; background: #171717;
            pointer-events: none;
        }
        #phone-preview[role=button] { cursor: zoom-in; }
        #preview-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #090909; color: white; }
        #preview-dialog::backdrop { background: #090909; }
        #preview-stage { container-type: size; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
        #preview-dialog .phone-preview { width: min(90cqw, calc(82cqh * var(--preview-ratio))); border-radius: 24px; }
        #close-preview { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; min-width: 44px; min-height: 44px; padding: 8px 16px; background: #242424; border: 1px solid #636363; border-radius: 8px; cursor: pointer; }
        body:has(#preview-dialog[open]) { overflow: hidden; }
        @media (min-width: 768px) {
            @supports (height: 100dvh) { body { height: 100dvh; } }
        }


        button, select, input[type=date], input[type=number], input[type=text] { min-height: 44px; }
        label:has(input[type=checkbox]), #layout-options .flex { min-height: 44px; cursor: pointer; }
        input[type=checkbox], input[type=radio] { accent-color: #ff9e3b; }
        #layout-options input { flex-shrink: 0; }
        #layout-options label { padding-block: 10px; cursor: pointer; }
        .controls-panel a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
        @media (max-width: 767px) {
            .preview-area { order: -1; position: sticky; top: 0; z-index: 20; height: 26svh; min-height: 150px; padding: 8px; border-bottom: 1px solid #636363; }
            .phone-preview { border-width: 3px; border-radius: 12px; }
            .controls-panel { border-right: 0; }
            .controls-panel > div { padding: 16px; }
            #ui-container { min-height: 100svh; }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #636363;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #b3b3b3;
        }


/* Accessible preview guidance and native setup dialog. */
.preview-area { isolation:isolate; }
#preview-hint { position:absolute; bottom:8px; left:0; right:0; text-align:center; color:#b3b3b3; font-size:12px; pointer-events:none; }
#close-preview { min-width:56px; min-height:48px; }
.setup-dialog { margin:0; width:100%; max-width:none; height:100dvh; max-height:none; border:0; }
.setup-dialog[open] { display:flex; }
.setup-dialog::backdrop { background:#0009; }
body:has(.setup-dialog[open]) { overflow:hidden; }
summary { min-height:44px; padding-block:10px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid #ffb86c; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

#reset-dialog { max-width:min(28rem, calc(100vw - 32px)); padding:24px; border:1px solid #636363; border-radius:12px; background:#141414; color:#e8e8e8; }
#reset-dialog::backdrop { background:#000b; }
#reset-dialog h2 { font-size:1.125rem; font-weight:700; }
#reset-dialog p { margin-block:16px; }
#reset-dialog form { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
#reset-dialog button { padding:8px 12px; border:1px solid #636363; border-radius:6px; }
#reset-dialog button[value=reset] { background:#ff9e3b; color:#000; }
@media (max-width:767px) {
    .preview-area #phone-preview { width:min(90cqw, calc(76cqh * var(--preview-ratio))); }
    #preview-hint { bottom:4px; }
}

.design-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.design-preset { padding:5px; min-width:0; border:1px solid #636363; border-radius:8px; background:#1c1c1c; text-align:left; }
.design-preset canvas { display:block; width:100%; height:auto; border-radius:4px; }
.design-preset span { display:block; padding:6px 4px 3px; font-size:12px; }
.design-preset:hover { border-color:#b3b3b3; }
.design-preset[aria-pressed=true] { border-color:#ffb86c; box-shadow:0 0 0 1px #ffb86c; }

.config-details { border-top:1px solid #333; }
.config-details > summary { font-size:13px; font-weight:600; }
.controls-panel > .space-y-6 > section + section { border-top:1px solid #333; padding-top:20px; }