:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#25222a;
  background:#e9e8eb;
  --ink:#25222a;
  --muted:#77727d;
  --line:#dedbe1;
  --paper:#ffffff;
  --panel:#f7f6f8;
  --violet:#6d2077;
  --violet-dark:#53165c;
  --violet-soft:#f2eaf4;
  --dark:#17151b;
  --kraft:#d8c6a6;
  --shadow:0 12px 34px rgba(34,26,39,.10);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--panel);color:var(--ink);overflow:hidden}
button,input,select,.ghost-button{font:inherit}
button,.ghost-button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,.ghost-button:focus-within{outline:3px solid rgba(109,32,119,.18);outline-offset:1px}

.topbar{
  height:76px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;z-index:20;
  backdrop-filter:blur(10px)
}
.brand-wrap{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{width:46px;height:52px;display:grid;place-items:center;overflow:visible;flex:none}
.brand-mark img{width:38px;height:52px;object-fit:contain;display:block}
.brand-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-line{display:flex;align-items:center;gap:8px}.brand-line strong{font-size:23px;line-height:1;letter-spacing:-.035em;color:var(--dark)}
.brand-copy>span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.welcome-inline{margin:-2px 2px 10px;font-size:10px;color:#8b8590;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-meta{padding:2px 4px 12px;text-align:center;font-size:10px;color:#8b8590}

.plan-badge,.mini-pro{font-size:9px;font-weight:800;letter-spacing:.08em;background:var(--violet-soft);color:var(--violet);border:1px solid #e4cfe8;border-radius:999px;padding:3px 6px}
.top-actions{display:flex;align-items:center;gap:8px}
.ghost-button,.pro-link{border:1px solid var(--line);background:#fff;color:#39343d;border-radius:10px;padding:9px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:650;text-decoration:none}
.ghost-button:hover{background:#f7f5f8;border-color:#cbc6ce}.pro-link{background:var(--dark);border-color:var(--dark);color:#fff}
.btn-icon{font-size:15px;line-height:1}.compact{padding:8px 10px}

.layout{display:grid;grid-template-columns:382px minmax(0,1fr);height:calc(100vh - 76px);min-height:0}
.panel{background:#efedf1;border-right:1px solid var(--line);padding:18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#bbb4c0 transparent}
.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:2px 2px 14px}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.panel-heading h1{margin:2px 0 0;font-size:20px;letter-spacing:-.025em}.status-dot{width:9px;height:9px;border-radius:50%;background:#3fb26f;box-shadow:0 0 0 4px rgba(63,178,111,.12);margin:0 5px 5px 0}
.control-card{background:var(--paper);border:1px solid #e1dee4;border-radius:var(--radius);padding:15px;margin-bottom:12px;box-shadow:0 2px 8px rgba(39,29,45,.025)}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.section-title-row>div{display:flex;align-items:center;gap:8px}.section-number{font-size:10px;font-weight:800;color:#aaa4ad}.control-card h2{margin:0;font-size:13px;letter-spacing:.01em}.section-hint{font-size:10px;color:#aaa4ad;font-weight:700}

.segmented{display:grid;grid-template-columns:1fr 1fr;background:#eeecf0;border:1px solid #e4e0e6;padding:3px;border-radius:11px;margin-bottom:14px;gap:3px}
.segmented button{border:0;background:transparent;color:#756f79;border-radius:8px;padding:8px 7px;font-size:11.5px;font-weight:700}.segmented button.active{background:#fff;color:var(--dark);box-shadow:0 1px 5px rgba(38,28,43,.10)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.span2{grid-column:span 2}
.form-grid label,.custom-wave label{font-size:10.5px;font-weight:650;color:#65606a;display:flex;flex-direction:column;gap:5px;min-width:0}
input,select{width:100%;min-width:0;border:1px solid #d9d5dc;border-radius:9px;background:#fbfafc;color:#262229;padding:9px 10px;font-size:12.5px;transition:.15s ease}
input:hover,select:hover{border-color:#c4bec8}input:focus,select:focus{background:#fff;border-color:#a67aae}
.input-unit{position:relative}.input-unit input{padding-right:33px}.input-unit span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:9.5px;color:#aaa3ad;font-weight:700;pointer-events:none}
.custom-wave{margin-top:10px}.hidden{display:none!important}
.primary{width:100%;border:0;border-radius:10px;background:linear-gradient(180deg,#762982,#5d1b67);color:#fff;padding:10px 12px;font-size:12px;font-weight:750;box-shadow:0 5px 12px rgba(109,32,119,.16)}.primary:hover{filter:brightness(1.04)}.full{margin-top:10px}

.switch-list{border-top:1px solid #eeeaf0;margin-top:14px;padding-top:5px}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 1px;color:var(--ink);cursor:pointer}.switch-row>span:first-child{display:flex;flex-direction:column;gap:1px}.switch-row strong{font-size:11.5px}.switch-row small{font-size:9.5px;color:#98919b}.switch{position:relative;width:34px;height:20px;flex:none}.switch input{position:absolute;opacity:0;pointer-events:none}.switch i{display:block;width:34px;height:20px;border-radius:999px;background:#d3cfd6;transition:.18s;position:relative}.switch i:after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:.18s}.switch input:checked+i{background:var(--violet)}.switch input:checked+i:after{transform:translateX(14px)}

.export-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.export-button{border:1px solid #ded9e0;background:#faf9fb;border-radius:11px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;color:#49424d}.export-button strong{font-size:12.5px}.export-button span{font-size:8.5px;color:#99929c}.export-button:hover{background:#f4eff5;border-color:#cdbbd1}.export-button.featured{background:var(--violet-soft);border-color:#dcc7e0;color:var(--violet)}.export-note{display:block;margin-top:9px;color:#99929c;font-size:9.5px;line-height:1.4}

.workspace{min-width:0;display:flex;flex-direction:column;background:#d7d5da;position:relative;overflow:hidden}
.workspace-head{height:66px;background:#f9f8fa;border-bottom:1px solid #d7d4da;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}.workspace-title{display:flex;flex-direction:column;gap:3px}.workspace-name{display:flex;align-items:baseline;gap:10px;min-width:0}.workspace-name strong{font-size:14px}.workspace-name span{font-size:10.5px;color:#89828c;white-space:nowrap}.workspace-actions{display:flex;align-items:center;gap:8px}.live-pill{font-size:9.5px;color:#77717b;display:inline-flex;align-items:center;gap:5px}.live-pill i{width:6px;height:6px;border-radius:50%;background:#3fb26f}
#canvasWrap{flex:1;min-height:0;overflow:hidden;padding:24px;background:radial-gradient(circle at 50% 35%,#e4e2e6 0,#d7d5da 58%,#cfccd2 100%)}
.canvas-stage{width:100%;height:100%;min-height:0;background:#fff;border-radius:8px;box-shadow:var(--shadow),0 0 0 1px rgba(72,61,77,.06);overflow:hidden;position:relative}
.canvas-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(110,103,114,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(110,103,114,.035) 1px,transparent 1px);background-size:24px 24px}
#preview{width:100%;height:100%;display:block;position:relative;z-index:1;background:transparent}
.workspace-footer{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:8.5px;color:#87818a;background:#e4e2e6;border-top:1px solid #ccc9cf;flex:none}

.toast{position:fixed;right:20px;bottom:20px;z-index:9999;background:#211e24;color:#fff;padding:11px 14px;border-radius:10px;font-size:11.5px;box-shadow:0 8px 24px #0004;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s ease;max-width:min(420px,calc(100vw - 40px))}.toast.show{opacity:1;transform:translateY(0)}
.mobile-export-bar{display:none}

@media(max-width:1100px){
  .layout{grid-template-columns:340px minmax(0,1fr)}
  .panel{padding:14px}.control-card{padding:13px}.topbar{padding:0 16px}.btn-text{display:none}.icon-button{width:38px;height:38px;padding:0}.brand-copy>span{display:none}
}

@media(max-width:820px){
  body{overflow:auto;padding-bottom:62px}
  .topbar{height:64px;position:sticky;top:0;padding:0 12px}.brand-mark{width:38px;height:44px}.brand-mark img{width:31px;height:44px}.brand-line strong{font-size:20px}.pro-link{display:none}
  .layout{display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 64px)}
  .workspace{order:1;height:52vh;min-height:380px;border-bottom:1px solid var(--line)}
  .panel{order:2;border-right:0;overflow:visible;padding:14px;background:#efedf1}
  .panel-heading{padding-top:2px}
  .workspace-head{height:58px;padding:0 12px}.live-pill{display:none}.workspace-name{display:block}.workspace-name span{display:block;margin-top:1px}
  #canvasWrap{padding:12px}.workspace-footer{display:none}
  .control-card{max-width:720px;margin-left:auto;margin-right:auto}
  .mobile-export-bar{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;height:58px;background:rgba(28,25,31,.97);z-index:50;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px;box-shadow:0 -8px 24px rgba(0,0,0,.16)}
  .mobile-export-bar button{border:1px solid #3a353d;background:#27232a;color:#fff;border-radius:9px;font-size:11px}.mobile-export-bar button:nth-child(2){background:var(--violet);border-color:#7d3288}
  .toast{bottom:72px;right:12px}
}

@media(max-width:520px){
  .top-actions{gap:5px}.ghost-button.icon-button{width:36px;height:36px}.brand-copy{max-width:160px}
  .workspace{height:46vh;min-height:330px}.workspace-head{height:54px}.workspace-actions .compact{font-size:10px;padding:7px 8px}
  #canvasWrap{padding:8px}.canvas-stage{border-radius:6px}
  .panel{padding:10px}.control-card{padding:13px;border-radius:14px}.panel-heading{padding-left:3px;padding-right:3px}
  .grid2{gap:8px}.form-grid label{font-size:10px}.input-unit input,input,select{font-size:12px;padding:9px 8px}.input-unit input{padding-right:30px}
  .export-grid{grid-template-columns:repeat(2,1fr)}.export-button{min-height:51px}
  .section-title-row{margin-bottom:11px}.switch-row{padding:8px 0}
}

@media(max-width:380px){
  .grid2{grid-template-columns:1fr}.span2{grid-column:auto}.brand-copy>span{display:none}.plan-badge{display:none}
  .workspace{min-height:300px}.mobile-export-bar{height:56px}.panel-heading h1{font-size:18px}
}

/* Mobile UX refinements */
.mobile-section-nav{display:none}

@media(max-width:820px){
  .topbar{height:60px}
  .layout{min-height:calc(100dvh - 60px)}
  .workspace{
    position:sticky;
    top:60px;
    z-index:15;
    height:43dvh;
    min-height:320px;
    max-height:470px;
    box-shadow:0 8px 24px rgba(37,30,41,.10)
  }
  .workspace-head{height:52px;padding:0 10px}
  .workspace-name strong{font-size:13px}
  .workspace-name span{font-size:9.5px}
  #canvasWrap{padding:8px}
  .panel{padding-top:10px}
  .mobile-section-nav{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    max-width:720px;
    margin:0 auto 10px;
    position:sticky;
    top:calc(60px + 43dvh + 6px);
    z-index:14;
    padding:6px;
    background:rgba(239,237,241,.94);
    backdrop-filter:blur(10px);
    border-radius:12px
  }
  .mobile-section-nav button{
    border:1px solid #d9d4dc;
    background:#fff;
    color:#55505a;
    border-radius:9px;
    padding:9px 5px;
    font-size:10.5px;
    font-weight:750
  }
  .mobile-section-nav button:active{background:var(--violet-soft);color:var(--violet)}
  .control-card{scroll-margin-top:calc(60px + 43dvh + 58px)}
}

@media(max-width:520px){
  .workspace{
    height:39dvh;
    min-height:285px;
    max-height:390px
  }
  .mobile-section-nav{top:calc(60px + 39dvh + 4px)}
  .control-card{scroll-margin-top:calc(60px + 39dvh + 56px)}
  .workspace-head{height:48px}
  .workspace-title .eyebrow{display:none}
  .workspace-actions{gap:4px}
  .workspace-actions .compact{padding:6px 7px;font-size:9.5px}
  .panel-heading{display:none}
  .mobile-section-nav{margin-bottom:8px}
  #canvasWrap{padding:6px}
}

@media(max-width:380px){
  .workspace{height:37dvh;min-height:260px}
  .mobile-section-nav{top:calc(60px + 37dvh + 4px)}
  .control-card{scroll-margin-top:calc(60px + 37dvh + 56px)}
}

/* Keep side-by-side layout on tablets in landscape where it is more useful. */
@media (min-width:821px) and (max-width:1050px) and (orientation:landscape){
  .layout{grid-template-columns:330px minmax(0,1fr)}
  .panel{padding:12px}
  #canvasWrap{padding:16px}
}

/* Commercial layer — Free / Pro */
.plan-badge.free{background:#f1f0f2;color:#6f6973;border-color:#ddd9df}
.plan-badge.pro{background:var(--violet-soft);color:var(--violet);border-color:#e4cfe8}
.plan-notice{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#26222a;color:#fff;border-radius:12px;padding:10px 12px;margin:0 0 12px;box-shadow:0 5px 14px rgba(28,22,31,.10)}
.plan-notice>span{display:flex;flex-direction:column;gap:1px}.plan-notice strong{font-size:11.5px}.plan-notice small{font-size:9px;color:#c7c1ca}.plan-notice button{border:1px solid #584e5d;background:#342e37;color:#fff;border-radius:8px;padding:7px 9px;font-size:9.5px;font-weight:750}.plan-notice.pro{background:#f4edf5;color:var(--violet);border:1px solid #dfcce3;box-shadow:none}.plan-notice.pro small{color:#83688a}.plan-notice.pro button{display:none}
.pro-feature em.mini-pro{font-style:normal;vertical-align:1px;margin-left:3px}
.pro-locked{position:relative;opacity:.7}.pro-locked:after{content:"PRO";font-size:8px;font-weight:850;letter-spacing:.08em;color:var(--violet);background:#fff;border:1px solid #dfcae3;border-radius:999px;padding:2px 5px;margin-left:5px}

.modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(23,21,27,.52);backdrop-filter:blur(5px)}
.modal-card{position:fixed;z-index:1001;width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 34px);overflow:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #e4e0e6;border-radius:20px;padding:24px;box-shadow:0 28px 70px rgba(23,16,27,.28)}
.modal-card h2{margin:5px 0 8px;font-size:23px;letter-spacing:-.03em}.modal-copy{margin:0 0 16px;color:#756f79;font-size:11.5px;line-height:1.55}.modal-close{position:absolute;right:13px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f3f1f4;color:#554f59;font-size:21px;line-height:1}.modal-form{display:grid;grid-template-columns:1fr;gap:10px}.modal-form label{font-size:10.5px;font-weight:700;color:#67616b;display:flex;flex-direction:column;gap:5px}.account-plan-row{display:flex;align-items:center;justify-content:space-between;background:#f5f3f6;border:1px solid #e7e2e9;border-radius:11px;padding:11px 12px;margin-bottom:14px;font-size:11px}.account-plan-row strong{color:var(--violet);letter-spacing:.07em}.dev-plan-box{margin-top:16px;border-top:1px solid #ebe7ed;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.dev-plan-box>span{display:flex;flex-direction:column;gap:2px}.dev-plan-box strong{font-size:10.5px}.dev-plan-box small{font-size:8.5px;color:#96909a}.dev-buttons{display:flex;gap:5px;flex:none}.dev-buttons button{border:1px solid #dcd7df;background:#fff;border-radius:8px;padding:7px 8px;font-size:9px;font-weight:750}.dev-buttons button:last-child{background:var(--violet);border-color:var(--violet);color:#fff}
.pro-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f8f4f9;border:1px solid #eaddec;border-radius:12px;padding:12px;margin-bottom:14px}.pro-benefits span{font-size:10px;font-weight:650;color:#5d4a62}.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.price-card{border:1px solid #ddd7e0;background:#fff;border-radius:13px;padding:13px 10px;text-align:left;display:flex;flex-direction:column;gap:2px;color:#3c3740}.price-card small{font-size:9px;color:#948d97}.price-card strong{font-size:19px;letter-spacing:-.03em}.price-card span{font-size:9px;color:#928b95}.featured-price{background:var(--violet-soft);border-color:#d9bbde;color:var(--violet)}.pricing-note{display:block;color:#9a939d;font-size:8.8px;line-height:1.45;margin:10px 0 12px}.full-modal{width:100%}

@media(max-width:820px){
  .modal-card{padding:20px;border-radius:18px}.plan-notice{max-width:720px;margin-left:auto;margin-right:auto}.pro-benefits{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .modal-card{width:calc(100vw - 18px);padding:18px;max-height:calc(100dvh - 18px)}.modal-card h2{font-size:21px}.price-grid{grid-template-columns:1fr}.dev-plan-box{align-items:flex-start;flex-direction:column}.dev-buttons{width:100%}.dev-buttons button{flex:1}.pro-benefits{grid-template-columns:1fr}.plan-notice{padding:9px 10px}
}

/* Account authentication */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 16px;padding:4px;background:rgba(31,41,55,.06);border-radius:12px}
.auth-tabs button{border:0;background:transparent;border-radius:9px;padding:10px 12px;font-weight:700;color:#667085;cursor:pointer}
.auth-tabs button.active{background:#fff;color:#1f2937;box-shadow:0 1px 6px rgba(15,23,42,.10)}
.auth-message{display:block;min-height:20px;margin-top:10px;color:#8a3450;line-height:1.35}
#authSignedIn .ghost-button{margin-top:10px}

/* MD27 0.8.0 — camada comercial */
.subscription-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:-5px 0 14px}.subscription-summary>div{background:#fbfafb;border:1px solid #ebe7ed;border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:2px}.subscription-summary span{font-size:8.5px;color:#96909a}.subscription-summary strong{font-size:10.5px;color:#514a55}.commercial-note{margin-top:10px;padding:11px 12px;border-radius:11px;background:#f8f6f9;border:1px solid #e9e2eb;display:flex;flex-direction:column;gap:3px}.commercial-note strong{font-size:10.5px;color:#55475a}.commercial-note span{font-size:9px;line-height:1.45;color:#8a818d}.price-card b{font-size:8px;font-weight:750;color:#7c4788;margin-top:4px}.selected-price{outline:2px solid var(--violet);outline-offset:1px;box-shadow:0 7px 18px rgba(109,32,119,.12)}
@media(max-width:540px){.subscription-summary{grid-template-columns:1fr 1fr}.subscription-summary>div:first-child{grid-column:1/-1}}

/* MD27 0.9.0 — assinatura manual via Pix */
.payment-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}.payment-summary>div{background:#f8f6f9;border:1px solid #e7e1e9;border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:3px}.payment-summary span,.pix-box>span{font-size:8.8px;color:#938c96;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.payment-summary strong{font-size:13px;color:#413b45}.pix-box{background:#fbfafc;border:1px solid #ded8e1;border-radius:13px;padding:13px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}.pix-box>strong{font-size:14px;word-break:break-all;color:var(--violet)}.payment-request-status{border:1px solid #e4d6e7;background:#f7f0f8;color:#694b70;border-radius:11px;padding:10px 11px;margin:10px 0;font-size:10px;line-height:1.45}.payment-request-status.pending{display:block!important}.payment-request-status strong{display:block;font-size:10.5px;margin-bottom:2px}.payment-modal .primary[disabled]{opacity:.55;cursor:not-allowed}
@media(max-width:420px){.payment-summary{grid-template-columns:1fr}}