@import '../_assets/fontes.css';
:root{--yellow:#ffd02a;--ink:#0f0f0f;--panel:#191919;--line:#343434;--muted:#a8abad}*{box-sizing:border-box}body{margin:0;background:#0d0d0d;color:#fff;font:14px Roboto,Arial,sans-serif}header{height:72px;border-bottom:1px solid #2b2b2b;display:flex;align-items:center;gap:26px;padding:0 clamp(18px,4vw,62px);position:sticky;top:0;z-index:5;background:#0d0d0df2;backdrop-filter:blur(12px)}.brand{font:700 24px 'IBM Plex Sans';color:#fff;text-decoration:none;letter-spacing:-1px}.brand span{color:var(--yellow);font-size:28px}.brand b{font-size:10px;letter-spacing:2px;color:var(--yellow);margin-left:5px}header p{color:#a4a4a4;margin:0;flex:1}.ghost,.icon{background:transparent;border:1px solid #555;color:#fff;border-radius:8px;padding:9px 12px;cursor:pointer}.ghost:hover,.icon:hover{border-color:var(--yellow);color:var(--yellow)}main{display:grid;grid-template-columns:minmax(310px,400px) 1fr;min-height:calc(100vh - 72px)}.editor{background:var(--panel);border-right:1px solid #2c2c2c;padding:25px;overflow:auto;max-height:calc(100vh - 72px)}.section-title{display:flex;gap:9px;align-items:center;margin:0 0 13px}.section-title:not(:first-child){margin-top:27px}.section-title span{color:var(--yellow);font:700 12px 'IBM Plex Sans';border:1px solid #765f13;padding:3px 5px;border-radius:5px}.section-title h2{font:700 17px 'IBM Plex Sans';margin:0}label{display:block;color:#dadada;font-size:12px;margin:10px 0 4px}small{color:#8f9497}input,select{width:100%;background:#101010;border:1px solid var(--line);color:white;border-radius:7px;padding:10px;font:14px Roboto}input:focus,select:focus,button:focus{outline:2px solid var(--yellow);outline-offset:2px}input[type=color]{height:40px;padding:4px;cursor:pointer}input[type=file]{padding:7px;font-size:12px}.row,.two{display:flex;gap:9px}.row select{flex:1}.icon{font-size:20px;padding:4px 11px}.two>*{width:50%;position:relative}.two output{position:absolute;bottom:-15px;right:2px;font-size:10px;color:#bbb}.two:has(input[type=range]){padding-bottom:10px}fieldset{border:0;padding:0;margin:0}.template-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.template-options label{margin:0;border:1px solid var(--line);border-radius:7px;padding:9px 5px;text-align:center;cursor:pointer}.template-options input{width:auto;accent-color:var(--yellow)}.file-status{font-size:11px;color:#a3a3a3;margin-top:4px}.suggest,.download{width:100%;margin-top:22px;padding:12px;border:0;border-radius:8px;font:700 14px 'IBM Plex Sans';cursor:pointer}.suggest{background:#2a2a2a;color:#fff;border:1px solid #4b4b4b}.suggest:hover{border-color:var(--yellow)}.suggestions{display:grid;gap:6px;margin-top:8px}.suggestions button{background:#121212;color:#d8d8d8;text-align:left;border:1px solid #393939;border-radius:6px;padding:8px;cursor:pointer;font-size:12px}.suggestions button:hover{border-color:var(--yellow)}.ai-note{color:#9ea2a5;border-left:2px solid var(--yellow);font-size:11px;line-height:1.45;padding:9px;margin-top:20px;background:#141414}.ai-note b{color:#fff}.workspace{padding:clamp(18px,3.5vw,48px);min-width:0;background:radial-gradient(circle at 70% 20%,#29220b 0,#101010 34%)}.toolbar{display:flex;justify-content:space-between;align-items:center;max-width:790px;margin:0 auto 22px}.formats{display:flex;background:#1b1b1b;padding:4px;border-radius:8px}.format{background:transparent;border:0;color:#acacac;border-radius:5px;padding:8px 13px;cursor:pointer}.format.active{background:#383838;color:#fff}.download{width:auto;margin:0;background:var(--yellow);color:#111;padding:11px 17px}.canvas-wrap{width:min(100%,790px);height:min(69vh,680px);margin:auto;position:relative;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#151515,#151515 10px,#171717 10px,#171717 20px);border:1px solid #303030;border-radius:12px;overflow:hidden}.canvas-wrap canvas{display:block;max-height:100%;max-width:100%;width:auto;height:auto;box-shadow:0 18px 40px #0008}.canvas-wrap canvas[data-format="portrait"]{height:100%;width:auto}.canvas-wrap canvas[data-format="story"]{height:100%;width:auto}#canvasEmpty{position:absolute;text-align:center;color:#d0d0d0;line-height:1.6}.preview-note{max-width:790px;margin:13px auto;color:#aaa;font-size:12px}.preview-note span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#69c36d;margin-right:6px}@media(max-width:800px){header{height:auto;min-height:64px;flex-wrap:wrap;padding:12px 16px;gap:8px}header p{display:none}.ghost{margin-left:auto}main{display:block}.editor{max-height:none;border:0;padding:20px}.workspace{padding:20px}.canvas-wrap{height:60vh}.toolbar{gap:10px}.download{font-size:12px;padding:10px}.format{padding:7px 9px}}@media(max-width:390px){.two{gap:7px}.editor{padding:16px}.template-options{font-size:10px}}