:root{--purple: #7b3fe4;--purple-dark: #5b24bd;--mint: #b8f2e6;--ink: #2b2140;--card: #ffffff;font-family:Nunito,"Baloo 2",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:linear-gradient(180deg,#c9f5ec,#9fe7d8) fixed}*{box-sizing:border-box}body{margin:0;min-height:100vh;-webkit-tap-highlight-color:transparent}h1{font-size:1.6rem;margin:0}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:16px;padding:.7rem 1.2rem;background:var(--purple);color:#fff;font-weight:700;box-shadow:0 4px 0 var(--purple-dark)}button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--purple-dark)}button:disabled{opacity:.4;cursor:default}button.secondary{background:#eee;color:var(--ink);box-shadow:0 4px #ccc}button.link{background:none;color:var(--purple);box-shadow:none;text-decoration:underline}input,select{width:100%;padding:.7rem;border:2px solid #ddd;border-radius:12px;margin-top:.3rem}label{display:block;margin:.8rem 0;font-weight:600}label.check{display:flex;gap:.5rem;align-items:flex-start;font-weight:400;font-size:.9rem}label.check input{width:auto;margin-top:.2rem}.error{color:#c62828}.note{color:#555;font-size:.9rem}.center{display:grid;place-items:center;min-height:100vh;padding:1rem}.card{background:var(--card);border-radius:28px;padding:2rem;width:min(440px,100%);box-shadow:0 10px 30px #0002;text-align:center}.card form{text-align:left}.brand{font-size:2.6rem;font-weight:900;color:var(--purple);letter-spacing:.02em}.language{width:auto;margin:.5rem auto;display:block}.row{display:flex;gap:.8rem;justify-content:flex-end}.profiles{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:1.5rem 0}.profile{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:#f4efff;color:var(--ink);box-shadow:0 4px #d9ccf5;min-width:110px}.avatar{font-size:2.6rem}.avatars{display:flex;gap:.5rem;flex-wrap:wrap}.avatars .avatar{background:#f4efff;box-shadow:none;padding:.4rem .6rem;font-size:1.8rem}.avatars .avatar.selected{outline:3px solid var(--purple)}.bar{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem}.bar .actions{margin-left:auto;display:flex;gap:.5rem}.bar .actions button{position:relative;padding:.5rem .8rem;font-size:1.2rem;background:#fff;color:var(--ink);box-shadow:0 4px #ccc}.bar .actions .lock{position:absolute;right:-8px;top:-8px}.back{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#ffd23f;color:var(--ink);font-size:1.6rem;text-decoration:none;box-shadow:0 4px #d9a800;padding:0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2rem;padding:1rem 1.5rem 2rem}.tile{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:22px;padding:.8rem;color:var(--ink);text-decoration:none;font-weight:800;box-shadow:0 6px #7fd6c5;border:4px solid #6fd3c0}.tile img{width:100%;aspect-ratio:16 / 10;object-fit:contain}.tile span{margin-top:.4rem}.tile.locked img{opacity:.55}.tile .lock{position:absolute;right:8px;bottom:8px}.lock{display:inline-flex;filter:drop-shadow(0 2px 1px #0003)}.modal-backdrop{position:fixed;inset:0;background:#0006;display:grid;place-items:center;padding:1rem;z-index:10}.modal{background:#fff;border-radius:24px;padding:1.5rem;width:min(460px,100%);text-align:center}.gate-question{font-size:1.6rem;font-weight:800}.plans{display:flex;gap:1rem;margin:1rem 0}.plan{flex:1;display:flex;flex-direction:column;gap:.2rem;background:#f4efff;color:var(--ink);box-shadow:0 4px #d9ccf5}.plan.best{background:var(--purple);color:#fff;box-shadow:0 4px 0 var(--purple-dark)}.plan .price{font-size:1.5rem;font-weight:900}.paint-page{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#fff}.stage{flex:1;display:grid;place-items:center;overflow:hidden;padding:.5rem}.canvas-wrap{position:relative;touch-action:none;flex:none}.layer{position:absolute;inset:0;width:100%;height:100%}.lines{mix-blend-mode:multiply;pointer-events:none}.toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:#f6f3ff}.tools{display:flex;gap:.5rem;align-items:center}.tool,.size{background:#fff;color:var(--ink);box-shadow:0 4px #ddd;padding:.5rem .8rem;font-size:1.5rem}.tool.active,.size.active{outline:3px solid var(--purple)}.size span{display:block;border-radius:50%;background:var(--ink)}.palette{display:flex;flex-wrap:wrap;gap:.45rem}.swatch{width:44px;height:44px;border-radius:50%;padding:0;border:3px solid #fff;box-shadow:0 0 0 2px #ccc}.swatch.active{box-shadow:0 0 0 4px var(--purple);transform:scale(1.1)}.swatch.more{background:#fff;display:grid;place-items:center}.coupon{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}.coupon input{margin:0;text-transform:uppercase}.note.ok{color:#1b7f3a;font-weight:700}.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%);background:#1b7f3a;color:#fff;padding:.8rem 1.4rem;border-radius:999px;font-weight:800;z-index:20;box-shadow:0 6px 20px #0003}.toast.error{background:#c62828}.account-links{display:flex;gap:1rem;justify-content:center;margin:.5rem 0}.account-links a{color:var(--purple);font-weight:700}.office{background:#f7f7fb;min-height:100vh;padding:1rem 1.5rem 3rem}.office header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.office header a{color:var(--purple);font-weight:700}.office nav{display:flex;gap:.5rem;margin-left:auto}.office nav button{background:#fff;color:var(--ink);box-shadow:0 2px #ddd;padding:.5rem 1rem}.office nav button.active{background:var(--purple);color:#fff;box-shadow:0 2px 0 var(--purple-dark)}.office section{background:#fff;border-radius:16px;padding:1rem 1.2rem;margin-bottom:1rem;box-shadow:0 2px 8px #0001}.office h2{font-size:1.1rem;margin:0 0 .8rem}.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.8rem;margin-bottom:1rem}.kpi{background:#fff;border-radius:16px;padding:.9rem 1rem;box-shadow:0 2px 8px #0001}.kpi small{display:block;color:#666;font-weight:600}.kpi strong{font-size:1.6rem}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.bars{display:grid;gap:.35rem}.bars .bar-row{display:grid;grid-template-columns:7rem 1fr 3rem;gap:.5rem;align-items:center;font-size:.85rem}.bars .bar-track{background:#f0ecfa;border-radius:6px;height:14px;overflow:hidden}.bars .bar-fill{background:var(--purple);height:100%;border-radius:6px}.bars .bar-row span:last-child{text-align:right;font-variant-numeric:tabular-nums}.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:120px}.hours div{background:var(--purple);border-radius:3px 3px 0 0;min-height:2px}.hours-labels{display:grid;grid-template-columns:repeat(24,1fr);font-size:.65rem;color:#888;text-align:center}.swatch-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #0002;vertical-align:middle;margin-right:.3rem}table.list{width:100%;border-collapse:collapse;font-size:.9rem}table.list th,table.list td{text-align:left;padding:.5rem;border-bottom:1px solid #eee;vertical-align:top}table.list th{color:#666;font-weight:700}table.list td.num{text-align:right;font-variant-numeric:tabular-nums}.office form.inline{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}.office form.inline label{margin:0;flex:1 1 160px;font-size:.85rem}.office button.small{padding:.3rem .7rem;font-size:.8rem;box-shadow:0 2px 0 var(--purple-dark)}.office button.small.secondary{box-shadow:0 2px #ccc}.chip{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:#eee;font-size:.75rem;font-weight:700;margin:0 .25rem .25rem 0}.chip.Pending{background:#fff3cd}.chip.Payable{background:#d1ecf1}.chip.Paid{background:#d4edda}.chip.Canceled{background:#f8d7da}.chip.off{text-decoration:line-through;opacity:.6}.prefs{display:flex;gap:.5rem;justify-content:center;align-items:center;margin:.5rem 0;flex-wrap:wrap}.prefs .language{margin:0}.theme-toggle{display:inline-flex;border-radius:12px;overflow:hidden;border:2px solid #ddd}.theme-toggle button{border-radius:0;box-shadow:none;background:transparent;color:var(--ink);padding:.45rem .8rem;font-weight:700;font-size:.9rem}.theme-toggle button[aria-pressed=true]{background:var(--purple);color:#fff}.theme-toggle button:active{transform:none}:root[data-theme=dark]{--ink: #ece8f7;--card: #2a2342;--surface-2: #3a2f5c;--muted: #b3abc9;--line: #4a4166;color-scheme:dark;background:linear-gradient(180deg,#1d1734,#120f22) fixed}:root[data-theme=dark] body{color:var(--ink)}:root[data-theme=dark] input,:root[data-theme=dark] select{background:#1f1a33;color:var(--ink);border-color:var(--line)}:root[data-theme=dark] button.secondary{background:var(--surface-2);color:var(--ink);box-shadow:0 4px #241d3a}:root[data-theme=dark] button.link,:root[data-theme=dark] .account-links a,:root[data-theme=dark] .office header a{color:#b99bff}:root[data-theme=dark] .brand{color:#b99bff}:root[data-theme=dark] .note,:root[data-theme=dark] .kpi small,:root[data-theme=dark] table.list th,:root[data-theme=dark] .hours-labels{color:var(--muted)}:root[data-theme=dark] .error{color:#ff8a80}:root[data-theme=dark] .note.ok{color:#7ee2a0}:root[data-theme=dark] .card,:root[data-theme=dark] .modal{background:var(--card);box-shadow:0 10px 30px #0006}:root[data-theme=dark] .profile,:root[data-theme=dark] .avatars .avatar,:root[data-theme=dark] .plan{background:var(--surface-2);color:var(--ink);box-shadow:0 4px #241d3a}:root[data-theme=dark] .plan.best{background:var(--purple);color:#fff;box-shadow:0 4px 0 var(--purple-dark)}:root[data-theme=dark] .tile{background:var(--card);color:var(--ink);border-color:#3c8f80;box-shadow:0 6px #24584f}:root[data-theme=dark] .tile img{background:#fff;border-radius:12px}:root[data-theme=dark] .bar .actions button,:root[data-theme=dark] .tool,:root[data-theme=dark] .size{background:var(--surface-2);color:var(--ink);box-shadow:0 4px #241d3a}:root[data-theme=dark] .size span{background:var(--ink)}:root[data-theme=dark] .paint-page{background:#1b1630}:root[data-theme=dark] .toolbar{background:#241d3a}:root[data-theme=dark] .swatch{border-color:var(--card);box-shadow:0 0 0 2px var(--line)}:root[data-theme=dark] .swatch.active{box-shadow:0 0 0 4px #b99bff}:root[data-theme=dark] .swatch.more{background:var(--surface-2)}:root[data-theme=dark] .theme-toggle{border-color:var(--line)}:root[data-theme=dark] .office{background:#17132a}:root[data-theme=dark] .office section,:root[data-theme=dark] .kpi{background:var(--card);box-shadow:0 2px 8px #0005}:root[data-theme=dark] .office nav button{background:var(--card);color:var(--ink);box-shadow:0 2px #241d3a}:root[data-theme=dark] .office nav button.active{background:var(--purple);color:#fff}:root[data-theme=dark] .bars .bar-track{background:var(--surface-2)}:root[data-theme=dark] table.list th,:root[data-theme=dark] table.list td{border-bottom-color:var(--line)}:root[data-theme=dark] .chip{background:var(--surface-2);color:var(--ink)}:root[data-theme=dark] .chip.Pending{background:#5c4a14}:root[data-theme=dark] .chip.Payable{background:#1d4e59}:root[data-theme=dark] .chip.Paid{background:#1e5130}:root[data-theme=dark] .chip.Canceled{background:#5e2228}:root[data-theme=dark] .back{color:#2b2140}.paint-page .stage{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem .75rem;min-height:0}.paint-page .canvas-area{flex:1;min-width:0;min-height:0;align-self:stretch;display:grid;place-items:center;overflow:hidden}.rail{position:relative;display:flex;flex-direction:column;gap:.9rem;align-self:center}.rail-button{width:76px;height:76px;padding:0;display:grid;place-items:center;border-radius:24px;background:#efe7ff;border:4px solid #fff;box-shadow:0 0 0 3px #d9ccf5,0 5px 0 3px #c4b3ee}.rail-button.open{box-shadow:0 0 0 4px var(--purple),0 5px 0 4px var(--purple-dark)}.rail-icon{font-size:2.3rem;line-height:1;display:grid;place-items:center}.rail-icon .tool-icon{width:44px;height:44px}.rail-color{width:48px;height:48px;border-radius:14px;display:block;box-shadow:inset 0 0 0 3px #fffa,0 0 0 2px #0002}.panel{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);z-index:5;background:#fffaf0;border:4px solid #ffe19a;border-radius:26px;padding:.8rem;box-shadow:0 10px 28px #0003}.panel:after{content:"";position:absolute;right:-14px;top:calc(50% - 10px);border:10px solid transparent;border-left-color:#ffe19a}.tools-panel{display:flex;flex-direction:column;gap:.5rem;width:190px}.colors-panel{width:min(340px,70vw,calc((100vh - 150px)*.8))}.tool-option{display:flex;align-items:center;gap:.7rem;background:#fff;color:var(--ink);box-shadow:0 3px #eadfbf;padding:.5rem .8rem;border-radius:18px;font-size:1rem}.tool-option.active{background:var(--purple);color:#fff;box-shadow:0 3px 0 var(--purple-dark)}.tool-emoji{font-size:2rem;display:grid;place-items:center}.sizes{display:flex;justify-content:space-around;padding-top:.3rem;border-top:2px dashed #eadfbf}.sizes .size{width:48px;height:48px;display:grid;place-items:center;padding:0;background:#fff;box-shadow:0 3px #eadfbf}.sizes .size span{border-radius:50%;display:block}.sizes .size.active{outline:3px solid var(--purple)}.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem}.color-cell{aspect-ratio:1;padding:0;border-radius:14px;border:0;box-shadow:inset 0 -4px #0002,inset 0 3px #fff6,0 0 0 1px #0001}.color-cell.active{box-shadow:0 0 0 4px var(--purple),inset 0 -4px #0002;transform:scale(1.06)}.locked-area{position:relative;margin-top:.45rem}.locked-area .color-cell{opacity:.35}.premium-lock{position:absolute;inset:0;margin:auto;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:#fffc;box-shadow:0 6px 18px #0003;padding:0}@media(max-width:640px){.rail-button{width:60px;height:60px;border-radius:18px}.rail-icon{font-size:1.8rem}.rail-icon .tool-icon{width:34px;height:34px}.rail-color{width:36px;height:36px}}@media(max-aspect-ratio:1/1)and (max-width:900px){.paint-page .stage{flex-direction:column}.paint-page .canvas-area{width:100%}.rail{flex-direction:row}.panel{right:auto;top:auto;left:50%;bottom:calc(100% + 14px);transform:translate(-50%)}.panel:after{right:auto;top:100%;left:calc(50% - 10px);border-left-color:transparent;border-top-color:#ffe19a}:root[data-theme=dark] .panel:after{border-left-color:transparent;border-top-color:var(--line)}.colors-panel{width:min(340px,90vw)}}@media(max-width:640px){.paint-page .bar{gap:.5rem;padding:.5rem .6rem}.paint-page .bar h1{flex:1;min-width:0;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.paint-page .bar .actions{gap:.35rem}.paint-page .bar .actions button{padding:.35rem .5rem;font-size:1rem}.paint-page .back{width:42px;height:42px;font-size:1.3rem;flex:none}}:root[data-theme=dark] .rail-button{background:var(--surface-2);border-color:var(--card);box-shadow:0 0 0 3px var(--line),0 5px 0 3px #241d3a}:root[data-theme=dark] .rail-button.open{box-shadow:0 0 0 4px #b99bff,0 5px 0 4px var(--purple-dark)}:root[data-theme=dark] .panel{background:var(--card);border-color:var(--line)}:root[data-theme=dark] .panel:after{border-left-color:var(--line)}:root[data-theme=dark] .tool-option,:root[data-theme=dark] .sizes .size{background:var(--surface-2);color:var(--ink);box-shadow:0 3px #241d3a}:root[data-theme=dark] .tool-option.active{background:var(--purple);color:#fff}:root[data-theme=dark] .premium-lock{background:#2a2342cc}
