:root{color-scheme:light;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f5f8}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;min-height:100%}body{display:flex;align-items:stretch;justify-content:center;color:#1e2330}main{width:min(1180px,100%);padding:3rem clamp(1.5rem,3vw,3rem)}.app-header h1{margin:0 0 .125rem;font-size:clamp(2.1rem,3vw,2.8rem)}.app-header p{margin:0;color:rgba(30,35,48,.72)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:2rem 0 2.5rem}.file-input{position:relative;display:inline-flex;align-items:center;padding:.85rem 1.4rem;background:white;border-radius:.75rem;border:1px dashed rgba(30,35,48,.25);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;font-weight:600}.file-input:hover{border-color:rgba(30,35,48,.45);box-shadow:0 12px 28px rgba(30,35,48,.08)}.file-input input{position:absolute;inset:0;opacity:0;cursor:pointer}.secondary{padding:.75rem 1.3rem;border-radius:.75rem;border:1px solid rgba(30,35,48,.18);background:transparent;color:rgba(30,35,48,.8);font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.secondary:disabled{cursor:not-allowed;opacity:.4}.secondary:not(:disabled):hover{background:rgba(30,35,48,.05);border-color:rgba(30,35,48,.35)}.workspace{display:grid;grid-gap:2rem;gap:2rem;grid-template-columns:minmax(220px,320px) minmax(0,1fr)}.painter-panel{background:white;border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:0 16px 34px rgba(30,35,48,.08)}.panel-header h2{margin:0;font-size:1.35rem}.panel-header p{margin:.3rem 0 0;color:rgba(30,35,48,.55);font-size:.95rem}.painter-list{display:flex;flex-direction:column;gap:.75rem}.painter-button{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1.1rem;border-radius:.75rem;border:1px solid rgba(30,35,48,.14);background:rgba(248,249,253,.6);cursor:pointer;font-weight:600;text-align:left;transition:border-color .2s ease,transform .2s ease,background-color .2s ease}.painter-button:hover{border-color:rgba(30,35,48,.28);transform:translateY(-1px)}.painter-button[data-active=true]{background:linear-gradient(135deg,#4c6ef5,#5f9bff);color:white;border-color:transparent;box-shadow:0 18px 28px rgba(76,110,245,.3)}.painter-button[data-has-image=true]:after{content:"cached";font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;background:rgba(44,160,89,.15);color:#2ca059}.painter-button[data-active=true][data-has-image=true]:after{background:rgba(255,255,255,.28);color:white}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.preview-frame{position:relative;background:white;border-radius:1.25rem;min-height:420px;padding:clamp(1.1rem,1.8vw,1.6rem);box-shadow:0 22px 48px rgba(30,35,48,.1);display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-frame img{max-width:100%;max-height:100%;display:none;border-radius:.75rem;box-shadow:0 12px 32px rgba(30,35,48,.22)}.preview-frame img[data-visible=true]{display:block}.preview-placeholder{text-align:center;color:rgba(30,35,48,.6)}.preview-loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.78);opacity:0;pointer-events:none;transition:opacity .2s ease}.preview-loading[data-active=true]{opacity:1;pointer-events:all}.spinner{width:2.5rem;height:2.5rem;border-radius:50%;border:4px solid rgba(76,110,245,.25);border-top-color:#4c6ef5;animation:spin 1s linear infinite;margin-bottom:.5rem}.preview-loading span{display:block;text-align:center}.status-message{margin:0;font-size:.95rem;color:rgba(30,35,48,.7)}.primary{align-self:flex-start;padding:.85rem 1.6rem;border-radius:.9rem;border:none;font-weight:600;letter-spacing:.02em;background:linear-gradient(135deg,#4c6ef5,#5f9bff);color:white;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.primary:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 18px 32px rgba(76,110,245,.35)}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:980px){.workspace{grid-template-columns:1fr}.painter-panel{flex-direction:row;flex-wrap:wrap}.painter-list{width:100%}}