:root{color-scheme:dark;--color-bg: #1f1f1f;--color-bg-soft: #242424;--color-surface: #292929;--color-surface-raised: #333;--color-border: rgba(255, 255, 255, .1);--color-text: #f4f4f9;--color-muted: #bdbdc7;--color-accent: #e63946;--color-accent-strong: #d62839;--color-accent-soft: color-mix(in srgb, var(--color-accent) 16%, transparent);--color-accent-border: color-mix(in srgb, var(--color-accent) 55%, transparent);--color-success: #35d07f;--shadow-soft: 0 12px 32px rgba(0, 0, 0, .28);--shadow-accent: 0 12px 28px color-mix(in srgb, var(--color-accent) 20%, transparent);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 14px;--page-inline: clamp(1rem, 4vw, 2rem)}*{box-sizing:border-box;margin:0;padding:0}html{min-height:100%;background:var(--color-bg)}body{min-height:100%;font-family:Arial,Helvetica,sans-serif;line-height:1.6;background:radial-gradient(circle at top left,color-mix(in srgb,var(--color-accent) 8%,transparent),transparent 34rem),var(--color-bg);color:var(--color-text)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}a:hover{color:#fff}button,.button,input[type=file]::file-selector-button{min-height:2.75rem;border:0;border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--color-accent),var(--color-accent-strong));color:#fff;cursor:pointer;font-weight:700;padding:.7rem 1rem;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}button:hover,.button:hover,input[type=file]::file-selector-button:hover{box-shadow:var(--shadow-accent);filter:brightness(1.04);transform:translateY(-1px)}button:active,.button:active{transform:translateY(0)}button:disabled{background:#555;box-shadow:none;cursor:not-allowed;filter:none;transform:none}input,select,textarea{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);outline:none;padding:.8rem .9rem;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}input::placeholder,textarea::placeholder{color:#9f9faa}input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--color-accent) 75%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 20%,transparent)}textarea{min-height:7rem;resize:vertical}canvas{box-sizing:content-box;display:block;max-width:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.container{width:min(1200px,100%);margin:0 auto;padding:0 var(--page-inline)}.content{min-height:calc(100vh - 146px)}.brand{align-items:center;display:inline-flex;gap:.75rem;min-width:0}.brand-logo-frame{align-items:center;border-radius:var(--radius-sm);display:inline-flex;height:2.75rem;justify-content:center;padding:.35rem;width:2.75rem}.brand-logo-frame img{display:block;max-height:100%;max-width:100%;object-fit:contain}.brand-text{display:grid;gap:.1rem;line-height:1.05}.brand-text strong{color:var(--color-text);font-size:clamp(1.1rem,3vw,1.45rem)}.brand-text small{color:var(--color-accent);font-weight:800}.page-title,h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);line-height:1.15;margin-bottom:1rem}.surface{background:#292929eb;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.route-editor{display:grid;gap:1rem;margin:0 auto;padding:1rem 0 clamp(1rem,3vw,1.5rem);width:100%}.spray-wall-container{display:grid;gap:.85rem;min-width:0}.editor-heading{align-items:end;display:grid;gap:.75rem;padding-inline:var(--page-inline)}.editor-heading h2{margin-bottom:0}.route-form,.range-control,.style-selection,.panel-selector{display:grid;gap:.45rem}.route-form{width:100%}.spray-wall-selection label,.route-form label,.hold-controls label,.panel-selector label{color:var(--color-muted);font-weight:700}.canvas-workspace{display:grid;position:relative;width:100%}.canvas-container{align-items:flex-start;display:flex;justify-content:flex-start;height:80svh;min-height:30rem;max-height:88svh;overflow:auto;overscroll-behavior-x:contain;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;width:100%}.canvas-container canvas{width:auto}.hold-controls{align-items:center;background:#292929f0;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;justify-self:center;padding:.45rem;position:absolute;top:.5rem;width:min(calc(100% - (var(--page-inline) * 2)),72rem);z-index:2}.hold-controls button{min-height:2.2rem;padding:.45rem .65rem;width:auto}.hold-controls input[type=range],.zoom-control input[type=range]{min-width:8rem}.zoom-control{align-items:center;display:flex;gap:.35rem}.zoom-value{align-items:center;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:#fff;display:inline-flex;font-weight:700;justify-content:center;min-height:2.2rem;min-width:3.6rem;padding:0 .45rem}.global-controls,.spray-wall-selection,.route-type-control{align-items:center;display:flex;gap:.35rem}.spray-wall-selection select{max-width:12rem;min-width:8rem;width:auto}.route-type-control select{min-width:6rem;width:auto}.hold-controls label{font-size:.82rem;line-height:1}.hold-controls input,.hold-controls select{min-height:2.2rem;padding:.45rem .55rem}.hold-controls .panel-selector{align-items:center;display:flex;gap:.35rem;width:auto}.hold-controls .panel-selector select{min-width:8rem;max-width:12rem;width:auto}.global-controls input[type=color]{height:2.2rem;min-width:2.2rem;padding:.15rem}.next-step-button{min-width:5.5rem}.empty-wall-state{min-height:12rem;position:relative}.empty-toolbar{position:static}.route-form{background:#292929d1;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);gap:.75rem;justify-self:center;padding:.9rem;width:min(calc(100% - (var(--page-inline) * 2)),42rem)}.route-form h3{color:#fff;font-size:1.2rem;line-height:1.2;text-align:center}.route-summary{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-sm);display:grid;gap:.25rem;padding:.75rem}.route-summary p{color:var(--color-muted)}.route-summary strong{color:#fff}.editor-message{justify-self:center;width:min(calc(100% - (var(--page-inline) * 2)),42rem)}.canvas-message{left:50%;max-width:min(22rem,calc(100% - 2rem));pointer-events:none;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:max-content;z-index:3}.form-message{border-radius:var(--radius-sm);font-weight:700;line-height:1.35;padding:.7rem .8rem}.form-message.success{background:color-mix(in srgb,var(--color-success) 14%,transparent);border:1px solid color-mix(in srgb,var(--color-success) 42%,transparent);color:var(--color-success)}.form-message.error{background:color-mix(in srgb,#ff6b6b 14%,transparent);border:1px solid color-mix(in srgb,#ff6b6b 42%,transparent);color:#ffb3b3}.secondary-button{background:var(--color-bg-soft);border:1px solid var(--color-border);box-shadow:none}.style-pills{display:flex;flex-wrap:wrap;gap:.5rem}.style-pill{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);cursor:pointer;font-size:.95rem;font-weight:700;min-height:2.5rem;padding:.5rem .7rem;-webkit-user-select:none;user-select:none;transition:background .16s ease,border-color .16s ease,color .16s ease}.style-pill:hover,.style-pill.selected{background:color-mix(in srgb,var(--color-accent) 18%,transparent);border-color:color-mix(in srgb,var(--color-accent) 65%,transparent);color:#fff}.success-message{color:var(--color-success);font-weight:700;padding:0 1rem 1rem;text-align:center}.grade-badge{background:color-mix(in srgb,var(--color-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);border-radius:var(--radius-sm);color:#fff;flex:0 0 auto;font-weight:800;line-height:1;padding:.45rem .6rem}.route-preview{inset:0;opacity:.22;pointer-events:none;position:absolute;width:100%;height:100%;z-index:0}.route-preview polyline{fill:none;stroke:var(--color-accent);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;vector-effect:non-scaling-stroke}.route-preview circle{fill:var(--color-accent);stroke:none}@media (min-width: 768px){:root{--page-inline: clamp(1.25rem, 3vw, 2rem)}.canvas-container{height:84svh;max-height:90svh}}@media (max-width: 640px){.hold-controls{align-items:center;border-radius:var(--radius-sm);gap:.3rem;justify-content:flex-start;max-height:34svh;overflow-y:auto;padding:.3rem;width:calc(100% - .75rem)}.hold-controls button{flex:1 1 auto;min-height:1.95rem;padding:.32rem .45rem}.hold-controls label{font-size:.72rem}.hold-controls input,.hold-controls select{min-height:1.95rem;padding:.32rem .42rem}.route-type-control,.hold-controls .panel-selector,.global-controls{flex:0 1 auto}.route-type-control select{min-width:5.5rem}.hold-controls .panel-selector select{max-width:8rem;min-width:6rem}.range-control{align-items:center;display:flex;flex:1 1 100%;gap:.35rem}.hold-controls input[type=range]{flex:1 1 auto;min-width:0;width:auto}.global-controls input[type=color]{height:1.95rem;min-width:1.95rem}.next-step-button{flex:1 1 5rem}}