:root{
--workspace:#e7e7e7;
--panel:#ffffff;
--panel-border:#d8d8d8;
--sheet:#000000;
--card:#101414;
--primary:#ffff00;
--secondary:#ffffff;
--white:#ffffff;
--text:#d8dddd;
--muted:#8e9898;
--dark:#061012;
--content-scale:1;
--button-scale:1;
--small-text-scale:1.10;
--document-font:'Poppins', sans-serif;
--document-weight:900;
}

*{box-sizing:border-box}

html,body{
margin:0;
min-height:100%;
font-family:'Poppins', sans-serif;
background:var(--workspace);
color:#111;
}

button,input,textarea,select{font:inherit}
button{cursor:pointer}

.app{
min-height:100vh;
display:grid;
grid-template-columns:minmax(330px,390px) minmax(0,1fr);
gap:22px;
padding:18px;
}

/* ===== PAINEL ===== */
.panel{
background:var(--panel);
border:1px solid var(--panel-border);
border-radius:18px;
padding:22px;
align-self:start;
position:sticky;
top:18px;
box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.kicker{
display:block;
margin-bottom:6px;
color:var(--primary);
font-size:11px;
font-weight:900;
letter-spacing:1.4px;
}

.panel h1{
margin:0;
font-size:22px;
}

.panel-intro{
margin:8px 0 22px;
color:#6f7676;
font-size:12px;
line-height:1.5;
}

.group{
display:grid;
gap:8px;
margin-top:18px;
}

.group>span,
.field-label{
color:#262b2b;
font-size:12px;
font-weight:900;
}

input,textarea,select{
width:100%;
min-width:0;
border:1px solid #d3d8d8;
outline:none;
border-radius:10px;
background:#f7f8f8;
color:#111;
padding:11px 12px;
}

input:focus,textarea:focus,select:focus{
border-color:var(--primary);
}

textarea{
resize:vertical;
min-height:78px;
line-height:1.45;
}

small{
color:#788080;
font-size:10px;
line-height:1.4;
}

/* logo */
.logo-upload{
display:flex;
align-items:center;
gap:12px;
min-height:76px;
padding:13px;
border:1px dashed #c7cece;
border-radius:12px;
background:#f8f9f9;
cursor:pointer;
}

.logo-upload:hover{border-color:var(--primary)}

.logo-upload-icon{
width:42px;
height:42px;
border-radius:11px;
background:#edfafa;
color:var(--primary);
display:flex;
align-items:center;
justify-content:center;
font-size:23px;
}

.logo-upload strong{
display:block;
margin-bottom:3px;
font-size:12px;
}

.logo-upload span{
color:#7d8585;
font-size:10px;
}

#logoInput{display:none}

.logo-row{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:7px;
color:#7b8383;
font-size:10px;
}

.text-button{
border:0;
padding:0;
background:none;
color:var(--primary);
font-weight:900;
font-size:10px;
}

.text-button:disabled{
color:#b2b7b7;
cursor:default;
}

/* file name */
.filename-row{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
}

.pdf-suffix{
min-width:54px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #d3d8d8;
border-radius:10px;
background:#f7f8f8;
color:var(--primary);
font-size:11px;
font-weight:900;
}

/* colors */
.color-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.color-field{
display:grid;
gap:6px;
}

.color-row{
display:grid;
grid-template-columns:44px 1fr;
gap:7px;
}

.color-row input[type="color"]{
height:40px;
padding:4px;
cursor:pointer;
}

/* slider */
.range-row{
display:grid;
grid-template-columns:1fr 52px;
gap:10px;
align-items:center;
}

.range-row input{
padding:0;
border:0;
background:transparent;
accent-color:var(--primary);
}

.range-row strong{
text-align:center;
color:var(--primary);
font-size:11px;
}

/* textos */
.texts-box{
margin-top:22px;
padding-top:18px;
border-top:1px solid #eceeee;
}

.texts-head{
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-end;
}

.texts-head h2{
margin:0;
font-size:15px;
}

.reset-button{
border:1px solid #d8dddd;
border-radius:8px;
padding:8px 9px;
background:#f4f5f5;
color:#313737;
font-size:10px;
font-weight:900;
}

.primary-button{
width:100%;
min-height:52px;
margin-top:22px;
border:0;
border-radius:11px;
background:var(--primary);
color:var(--dark);
font-weight:900;
font-size:14px;
}

.primary-button:hover{filter:brightness(1.04)}


.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:22px;
}
.action-grid .primary-button{margin-top:0;}
.secondary-button{
  width:100%;
  min-height:52px;
  border:1px solid #1b1b1b;
  border-radius:11px;
  background:#111111;
  color:#ffffff;
  font-weight:900;
  font-size:13px;
}
.secondary-button:hover{filter:brightness(1.12)}
.copy-status{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  min-height:0;
  margin:0;
  padding:12px 15px;
  border-radius:10px;
  background:#FFFF00;
  color:#090909;
  font-size:11px;
  font-weight:800;
  box-shadow:0 14px 38px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  pointer-events:none;
}
.copy-status.show{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:520px){.action-grid{grid-template-columns:1fr}}

/* ===== WORKSPACE ===== */
.workspace{
min-width:0;
display:flex;
flex-direction:column;
}

.workspace-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin:3px 2px 14px;
}

.workspace-head h2{
margin:0;
font-size:18px;
color:#202525;
}

.workspace-head span{
color:#737b7b;
font-size:10px;
font-weight:900;
letter-spacing:1px;
}

.stage{
min-width:0;
border-radius:18px;
background:#d2d2d2;
padding:18px;
display:flex;
justify-content:center;
align-items:flex-start;
overflow:auto;
}

/* ===== DOCUMENTO ===== */
.sheet{
width:min(100%,760px);
aspect-ratio:210 / 297;
background:#000000;
color:var(--white);
border-radius:0;
font-family:var(--document-font);
border:0;
outline:0;
overflow:hidden;
flex:0 0 auto;
box-shadow:0 12px 40px rgba(0,0,0,.12);
position:relative;
}

.sheet-content{
width:100%;
height:100%;
padding:7.4% 6.8% 5.5%;
transform:scale(var(--content-scale));
transform-origin:top center;
}

.brand{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:6.5%;
min-height:46px;
}

.default-brand{
display:flex;
align-items:center;
gap:12px;
}

.brand-symbol{
width:34px;
height:34px;
border-radius:10px;
background:var(--primary);
display:flex;
align-items:center;
justify-content:center;
color:var(--dark);
font-size:13px;
font-weight:900;
}

.brand-name{
font-size:14px;
font-weight:var(--document-weight);
letter-spacing:2px;
}

.logo-preview{
display:none;
max-width:190px;
max-height:62px;
object-fit:contain;
}

.hero{
text-align:center;
max-width:640px;
margin:0 auto;
}

.status{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
color:var(--primary);
font-size:calc(12px * var(--small-text-scale));
font-weight:var(--document-weight);
letter-spacing:1.1px;
text-transform:uppercase;
}

.status-dot{
width:7px;
height:7px;
border-radius:50%;
background:var(--secondary);
}

.hero h1{
margin:0;
font-size:44px;
line-height:1.08;
letter-spacing:-1.3px;
font-weight:var(--document-weight);
}

.hero h1 .accent{color:var(--primary)}

.hero p{
margin:20px auto 0;
max-width:590px;
color:var(--text);
font-size:calc(15px * var(--small-text-scale));
line-height:1.65;
}

.hero p strong{color:var(--primary)}

.cta-area{
display:flex;
justify-content:center;
margin:36px 0 48px;
}

.cta{
min-width:calc(330px * var(--button-scale));
min-height:calc(62px * var(--button-scale));
padding:0 calc(28px * var(--button-scale));
border-radius:calc(12px * var(--button-scale));
background:var(--primary);
color:var(--dark);
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:calc(16px * var(--button-scale));
font-weight:var(--document-weight);
white-space:nowrap;
}

.info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.info-card{
min-height:230px;
padding:24px;
border-radius:18px;
background:var(--card);
}

.info-icon{
width:48px;
height:48px;
border-radius:13px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#0b1a1c;
color:var(--primary);
}

.info-card.green .info-icon{
background:#0c1b15;
color:var(--secondary);
}

.info-card h2{
margin:0 0 10px;
color:var(--primary);
font-size:calc(13px * var(--small-text-scale));
font-weight:var(--document-weight);
letter-spacing:.9px;
}

.info-card.green h2{color:var(--secondary)}

.info-card p{
margin:0;
color:var(--text);
font-size:calc(14px * var(--small-text-scale));
line-height:1.7;
}

.info-card p strong{color:var(--primary)}
.info-card.green p strong{color:var(--secondary)}

.footer{
margin-top:30px;
text-align:center;
}

.footer-text{
color:var(--muted);
font-size:calc(13px * var(--small-text-scale));
line-height:1.7;
}

.footer-text strong{color:var(--white)}

.signature{
margin-top:8px;
color:var(--primary);
font-size:calc(13px * var(--small-text-scale));
font-weight:900;
letter-spacing:1.6px;
line-height:1.2;
}

.signature b{color:var(--primary)}

@media(max-width:1000px){
.app{grid-template-columns:1fr}
.panel{position:static}
}

@media(max-width:640px){
.app{padding:0;gap:0}
.panel{border-radius:0;border-left:0;border-right:0}
.workspace{padding:14px}
.stage{padding:8px}
.sheet{border-radius:0}
.hero h1{font-size:35px}
.hero p{font-size:calc(14px * var(--small-text-scale))}
.cta{
min-width:0;
width:min(100%, calc(330px * var(--button-scale)));
min-height:calc(62px * var(--button-scale));
padding-left:calc(28px * var(--button-scale));
padding-right:calc(28px * var(--button-scale));
border-radius:calc(12px * var(--button-scale));
font-size:calc(16px * var(--button-scale));
}
.info-grid{grid-template-columns:1fr}
.info-card{min-height:auto}
}


/* ===== EXPORTAÇÃO PDF =====
Força o documento para layout desktop/A4 mesmo quando
o PDF é criado pelo celular. */
.pdf-export-host{
position:fixed;
left:-10000px;
top:0;
width:794px;
height:1123px;
overflow:hidden;
background:#000;
pointer-events:none;
z-index:-99999;
}

.pdf-export-host .sheet{
position:absolute !important;
left:-3px !important;
top:-3px !important;
width:800px !important;
height:1129px !important;
max-width:none !important;
aspect-ratio:auto !important;
border-radius:0 !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:#000 !important;
overflow:hidden !important;
}

.pdf-export-host .sheet-content{
width:100% !important;
height:100% !important;
}

.pdf-export-host .hero h1{
font-size:44px !important;
}

.pdf-export-host .hero p{
font-size:calc(15px * var(--small-text-scale)) !important;
}

.pdf-export-host .status{
font-size:calc(12px * var(--small-text-scale)) !important;
}

.pdf-export-host .info-card h2{
font-size:calc(13px * var(--small-text-scale)) !important;
}

.pdf-export-host .info-card p{
font-size:calc(14px * var(--small-text-scale)) !important;
}

.pdf-export-host .footer-text{
font-size:calc(13px * var(--small-text-scale)) !important;
}

.pdf-export-host .signature{
font-size:calc(13px * var(--small-text-scale)) !important;
margin-top:8px !important;
color:var(--primary) !important;
font-weight:900 !important;
letter-spacing:1.6px !important;
}

.pdf-export-host .info-grid{
grid-template-columns:1fr 1fr !important;
}

.pdf-export-host .info-card{
min-height:230px !important;
}

.pdf-export-host .cta{
width:auto !important;
max-width:none !important;
}

/* PDF/print */
@page{size:A4;margin:0}
@media print{
body{background:#000}
.panel,.workspace-head{display:none!important}
.app,.workspace,.stage{display:block;padding:0;margin:0;background:#000}
.sheet{
width:210mm;
height:297mm;
max-width:none;
border-radius:0;
box-shadow:none;
background:#000!important;
}
}


/* ============================================================
   ZORIK STUDIOS — UI PREMIUM DARK
   O escopo abaixo altera apenas a plataforma/editor.
   O documento (.sheet) mantém seu visual independente.
   ============================================================ */
:root{
  --ui-bg:#060808;
  --ui-sidebar:#0a0c0c;
  --ui-surface:#0d1010;
  --ui-surface-2:#111414;
  --ui-hover:#151919;
  --ui-line:rgba(255,255,255,.065);
  --ui-line-2:rgba(255,255,255,.10);
  --ui-text:#f7f7f5;
  --ui-muted:#858c89;
  --ui-muted-2:#5f6663;
  --zorik-yellow:#ffff00;
  --zorik-yellow-soft:rgba(255,255,0,.12);
  --ui-glass:linear-gradient(152deg,rgba(255,255,255,.070),rgba(255,255,255,.022));
  --ui-glass-hi:inset 0 1px 0 rgba(255,255,255,.08);
  --ui-ease:cubic-bezier(.22,.61,.36,1);
}
html,body{
  background:
    radial-gradient(900px 520px at 6% -10%,rgba(255,255,0,.105),transparent 61%),
    radial-gradient(760px 440px at 96% 0,rgba(255,255,255,.035),transparent 58%),
    #060808;
  color:var(--ui-text);
}
body{font-family:'Fustat','Poppins',sans-serif;-webkit-font-smoothing:antialiased;background-attachment:fixed}
::selection{background:rgba(255,255,0,.24);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:content-box}

.app{
  grid-template-columns:minmax(350px,390px) minmax(0,1fr);
  gap:0;
  padding:0;
  background:transparent;
}
.panel{
  height:100vh;
  top:0;
  border:0;
  border-radius:0;
  padding:18px 16px 30px;
  background:rgba(10,12,12,.78);
  color:var(--ui-text);
  box-shadow:1px 0 0 rgba(255,255,255,.045);
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
  overflow:auto;
  z-index:20;
}
.zorik-brand{height:48px;display:flex;align-items:center;gap:11px;padding:0 5px;margin-bottom:12px}
.zorik-mark{
  width:31px;height:31px;border-radius:9px;display:grid;place-items:center;
  background:var(--zorik-yellow);color:#111;font-size:16px;font-weight:800;
  box-shadow:0 5px 18px rgba(255,255,0,.18),inset 0 1px 0 rgba(255,255,255,.6)
}
.zorik-brandcopy{display:flex;flex-direction:column;line-height:1.05}
.zorik-brandcopy strong{font-size:15px;font-weight:800;letter-spacing:-.025em;color:#f7f7f5}
.zorik-brandcopy strong span{color:var(--zorik-yellow)}
.zorik-brandcopy small{margin-top:5px;color:#5f6663;font-size:8px;letter-spacing:.16em;font-weight:700}
.workspace-chip{
  height:38px;border:0;border-radius:9px;background:var(--ui-glass);box-shadow:var(--ui-glass-hi);
  display:flex;align-items:center;gap:9px;padding:0 11px;margin:0 0 24px;color:#c7cbc9;font-size:12px;font-weight:500
}
.workspace-chip i,.preview-badge i{width:7px;height:7px;border-radius:50%;background:var(--zorik-yellow);box-shadow:0 0 0 3px rgba(255,255,0,.08);flex:none}
.panel .kicker{color:#666d6a;font-size:9px;letter-spacing:.14em;font-weight:700;margin-bottom:7px;text-transform:uppercase}
.panel h1{font-size:24px;line-height:1.05;letter-spacing:-.04em;font-weight:800;color:#f7f7f5}
.title-dot{color:var(--zorik-yellow)}
.panel-intro{color:#777e7b;font-size:12px;line-height:1.55;margin:9px 0 22px}
.panel .group{margin-top:16px;gap:7px}
.panel .group>span,.panel .field-label{color:#9aa19e;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.panel input:not([type="range"]):not([type="color"]),
.panel textarea,
.panel select{
  border:0;border-radius:8px;background:rgba(255,255,255,.045);color:#ecefed;padding:10px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);font-size:12px;
  transition:box-shadow .18s var(--ui-ease),background .18s var(--ui-ease)
}
.panel input:not([type="range"]):not([type="color"]):focus,.panel textarea:focus,.panel select:focus{
  border-color:transparent;box-shadow:0 0 0 2px rgba(255,255,0,.22),inset 0 1px 0 rgba(255,255,255,.05);background:rgba(255,255,255,.06)
}
.panel textarea{min-height:82px}
.panel small{color:#666d6a;font-size:10px;line-height:1.45}
.panel select{color-scheme:dark}
.logo-upload{
  border:1px dashed rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.025);min-height:72px;
  transition:.18s var(--ui-ease)
}
.logo-upload:hover{border-color:rgba(255,255,0,.35);background:rgba(255,255,0,.025)}
.logo-upload-icon{width:40px;height:40px;border-radius:9px;background:var(--zorik-yellow-soft);color:var(--zorik-yellow);font-size:20px}
.logo-upload strong{color:#d8dcda;font-size:12px;font-weight:650}.logo-upload span{color:#646b68}
.logo-row{color:#666d6a}.text-button{color:var(--zorik-yellow);font-weight:700}.text-button:disabled{color:#4e5552}
.pdf-suffix{border:0;border-radius:8px;background:rgba(255,255,255,.045);color:var(--zorik-yellow);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.panel input[type="range"]{accent-color:var(--zorik-yellow)}
.range-row strong{color:var(--zorik-yellow);font-size:10px}
.color-row input[type="color"]{border:0!important;background:rgba(255,255,255,.045)!important;border-radius:8px!important;padding:4px!important}
.texts-box{border-top:1px solid var(--ui-line);margin-top:24px;padding-top:20px}
.texts-head h2{color:#e4e7e5;font-size:14px;font-weight:650}
.reset-button{border:0;border-radius:8px;background:rgba(255,255,255,.055);color:#aeb4b1;font-size:9px;font-weight:700;padding:8px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.reset-button:hover{background:rgba(255,255,255,.09);color:#fff}
.action-grid{position:sticky;bottom:-30px;margin:24px -16px -30px;padding:14px 16px 20px;background:linear-gradient(180deg,rgba(10,12,12,0),rgba(10,12,12,.95) 25%,rgba(10,12,12,.98));backdrop-filter:blur(14px)}
.primary-button,.secondary-button{min-height:44px!important;border-radius:8px!important;font-family:'Fustat',sans-serif!important;font-size:12px!important;font-weight:700!important;transition:.18s var(--ui-ease)}
.primary-button{background:var(--zorik-yellow)!important;color:#111!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 24px rgba(255,255,0,.10)!important}
.primary-button:hover{filter:none!important;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 28px rgba(255,255,0,.16)!important}
.secondary-button{border:0!important;background:rgba(255,255,255,.065)!important;color:#d5d9d7!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.secondary-button:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}
.copy-status{font-family:'Fustat',sans-serif!important}

.workspace{background:transparent;min-height:100vh;gap:0}
.workspace-head{
  min-height:70px;margin:0;padding:0 30px;border-bottom:0;background:rgba(6,8,8,.66);box-shadow:0 1px 0 rgba(255,255,255,.045);
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%)
}
.workspace-head>div:first-child small{display:block;color:#5f6663;font-size:9px;letter-spacing:.14em;font-weight:700;margin-bottom:4px}
.workspace-head h2{color:#f4f5f4;font-size:20px;font-weight:750;letter-spacing:-.035em}
.workspace-head>span{display:none}
.preview-badge{height:30px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.05);display:flex;align-items:center;gap:7px;color:#8c9390;font-size:10px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.stage{
  border-radius:0;background:transparent;padding:32px 34px 52px;min-height:calc(100vh - 70px);
  background-image:radial-gradient(circle at 50% 12%,rgba(255,255,255,.025),transparent 38%)
}
.sheet{box-shadow:0 28px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.035)}

@media(max-width:1000px){
  .app{grid-template-columns:1fr}
  .panel{height:auto;position:relative;top:auto;border-radius:0;overflow:visible;padding:16px}
  .action-grid{bottom:0;margin:24px -16px -16px;padding-bottom:16px}
  .workspace-head{position:relative;padding:0 18px}
}
@media(max-width:640px){
  .app{padding:0;gap:0}
  .panel{padding:14px}
  .workspace{padding:0}
  .workspace-head{min-height:64px;padding:0 14px}
  .workspace-head h2{font-size:17px}.preview-badge{display:none}
  .stage{padding:14px 8px 28px}
  .sheet{border-radius:0}
}

/* Correção de contraste no menu nativo dos selects (Windows/Chrome/Edge) */
.panel select option,
.panel select optgroup{
  background:#ffffff;
  color:#111111;
}
.panel select option:checked{
  color:#111111;
}