:root{
  --bg:#16130f; --panel:#1f1a15; --panel2:#262019; --line:#352c23;
  --ink:#f5ece3; --muted:#a89a8b; --accent:#c98b6b; --accent2:#7fae9b; --gold:#d9b27a;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:.92rem;line-height:1.5}
.spacer{flex:1}
.err{color:#e87a6b;font-size:.85rem;min-height:1.1em}

button,input,select,textarea{font-family:inherit;color:inherit}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:.6rem 1rem;border-radius:10px;font-weight:600;cursor:pointer;font-size:.9rem;transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#b5765a);border-color:transparent;color:#1a120c}
.btn.ghost{background:transparent}
.btn.sm{padding:.4rem .7rem;font-size:.82rem}
.btn.danger{color:#e87a6b;border-color:#5a2f2a}
.icon-btn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;width:42px;height:42px;font-size:1.1rem;cursor:pointer;flex:0 0 auto}
.icon-btn:hover{border-color:var(--accent)}

/* LOGIN */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 0%,#241d16,#16130f);padding:1.5rem;z-index:50}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:2rem;width:100%;max-width:360px;display:flex;flex-direction:column;gap:.8rem;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-card input{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.8rem;font-size:1rem}
.brand-lg{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:600}
.brand-lg span,.brand span{color:var(--accent)}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:rgba(22,19,15,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600;flex:0 0 auto}
.nav{display:flex;gap:.3rem;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-btn{background:transparent;border:none;color:var(--muted);padding:.5rem .7rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap}
.nav-btn.active{color:var(--ink);background:var(--panel2)}
.nav-btn.cta{color:var(--accent)}

/* VIEWS */
.view{max-width:1200px;margin:0 auto;padding:1.2rem 1rem 4rem}
.view-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.view-head h1{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;flex:1}
.name-input{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;font-size:1rem;min-width:160px}
.empty{color:var(--muted);text-align:center;padding:3rem 1rem;border:1px dashed var(--line);border-radius:var(--radius)}

/* GALERIA */
.groups{display:flex;flex-direction:column;gap:1.6rem}
.group-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;cursor:pointer;user-select:none}
.group-toggle{background:none;border:none;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;flex:0 0 auto;width:22px;transition:transform .15s}
.group:not(.collapsed) .group-toggle{transform:rotate(90deg)}
.group.collapsed .cards{display:none}
.group-head h2{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600}
.group-count{color:var(--muted);font-size:.8rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.15s;position:relative}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card-preview{aspect-ratio:1/1;background:#0e0c0a;overflow:hidden;position:relative}
.card-preview iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none}
.card-meta{padding:.55rem .6rem}
.card-meta .nm{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem}
.card-meta .sub{color:var(--muted);font-size:.72rem;margin-top:.15rem}
.card-buttons{display:flex;gap:.3rem}
.cbtn{flex:1;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:8px;padding:.35rem;font-size:.74rem;font-weight:600;cursor:pointer;white-space:nowrap}
.cbtn:hover{border-color:var(--accent)}
.cbtn.ai{color:var(--accent);border-color:#4a382e}
.cbtn[data-menu]{flex:0 0 34px}
.menu-list{display:flex;flex-direction:column;gap:.4rem}
.menu-list .btn{text-align:left;width:100%}
.viewer{position:fixed;inset:0;z-index:70;background:rgba(10,8,6,.95);display:flex;flex-direction:column}
.viewer-bar{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-bottom:1px solid var(--line);color:var(--ink)}
.viewer-bar span{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:10px}
.vp-wrap{flex:0 0 auto;overflow:hidden;background:#fff;border-radius:6px;box-shadow:0 10px 50px rgba(0,0,0,.6)}
.viewer-stage iframe{border:0;background:#fff;display:block}
.viewer-x{position:fixed;top:12px;right:14px;z-index:90;width:46px;height:46px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.5)}
.viewer-x:hover{background:var(--accent);color:#1a120c}
.viewer-nav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:30px;padding:.4rem .8rem}
.viewer-nav .vn{width:40px;height:40px;border-radius:50%;border:none;background:var(--panel2);color:var(--ink);font-size:1.4rem;cursor:pointer;line-height:1}
.viewer-nav .vn:hover{background:var(--accent);color:#1a120c}
.viewer-nav .vn-count{color:#fff;font-size:.9rem;min-width:54px;text-align:center}
.badge{position:absolute;top:.4rem;left:.4rem;background:rgba(0,0,0,.6);color:#fff;font-size:.65rem;padding:.15rem .45rem;border-radius:6px;backdrop-filter:blur(4px)}

/* GUIDELINE / MEDIA cards */
.gl-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.gl-card h3{font-family:'Fraunces',serif;font-size:1.05rem}
.gl-card p{color:var(--muted);font-size:.82rem;line-height:1.5;max-height:6.5em;overflow:hidden}
.gl-card .row{display:flex;gap:.4rem;margin-top:auto}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.7rem}
.media-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0e0c0a}
.media-item img{width:100%;height:100%;object-fit:cover}
.media-item .del{position:absolute;top:.3rem;right:.3rem;width:26px;height:26px;border:none;border-radius:7px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.media-item.sel{outline:3px solid var(--accent)}

/* CRIAR */
.create-wrap{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:900px){.create-wrap{grid-template-columns:1fr 1fr;align-items:start}}
.chat-col{display:flex;flex-direction:column;min-height:50vh}
.chat{flex:1;display:flex;flex-direction:column;gap:.7rem;padding:.5rem 0;min-height:120px;max-height:45vh;overflow-y:auto}
.msg{padding:.7rem .9rem;border-radius:14px;max-width:90%;font-size:.9rem;line-height:1.5}
.msg.me{align-self:flex-end;background:var(--accent);color:#1a120c}
.msg.ai{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg.sys{align-self:center;color:var(--muted);font-size:.8rem;background:none}
.tray{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;flex-wrap:wrap}
.tray-lbl{font-size:.74rem;color:var(--muted);flex:0 0 auto}
.thumbs{display:flex;gap:.4rem;flex-wrap:wrap;padding:.3rem 0}
.thumbs .t{position:relative;width:54px;height:54px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
.thumbs .t .x{position:absolute;top:0;right:0;background:rgba(0,0,0,.7);color:#fff;border:none;width:18px;height:18px;font-size:.7rem;cursor:pointer;border-bottom-left-radius:6px}
.composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem;display:flex;flex-direction:column;gap:.6rem}
.composer-opts{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.sel,.slides{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:.45rem .55rem;font-size:.82rem}
button.sel{cursor:pointer}
button.sel.on{border-color:var(--accent);color:var(--accent)}
.media-item.gl-pick{cursor:pointer;background:#fff}
.media-item.gl-pick iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none}
select,select.sel{color:var(--ink)}
select option{background:#262019;color:#f5ece3}
.slides{width:64px}
.chk{display:flex;align-items:center;gap:.3rem;font-size:.82rem;color:var(--muted);cursor:pointer}
.custom-format{display:flex;align-items:center;gap:.4rem}
.custom-format input{width:80px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.4rem;font-size:.82rem}
.composer-row{display:flex;gap:.5rem;align-items:flex-end}
#prompt{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.7rem;font-size:1rem;resize:none;max-height:140px;line-height:1.4}
.btn.send{flex:0 0 auto;align-self:stretch}

.preview-col{position:sticky;top:70px}
.preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.preview-actions{display:flex;gap:.4rem}
.preview-stage{background:#0e0c0a;border:1px solid var(--line);border-radius:var(--radius);min-height:300px;max-height:70vh;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem}
.preview-stage iframe{border:0;background:#fff;display:block}
.pv-wrap{flex:0 0 auto;overflow:hidden;background:#fff;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.preview-placeholder{color:var(--muted);margin:auto}
.preview-loading{margin:auto;display:flex;flex-direction:column;align-items:center;gap:.8rem;color:var(--muted);font-size:.9rem}
.preview-loading .spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:pv-spin .8s linear infinite}
@keyframes pv-spin{to{transform:rotate(360deg)}}

/* EDITOR */
.editor-wrap{display:grid;grid-template-columns:1fr;gap:.8rem;height:72vh}
@media(min-width:900px){.editor-wrap{grid-template-columns:1fr 1fr}}
#editor-code{background:#0e0c0a;border:1px solid var(--line);border-radius:12px;padding:.8rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:#d9cfc4;resize:none;height:100%;line-height:1.5}
.editor-preview{background:#0e0c0a;border:1px solid var(--line);border-radius:12px;overflow:auto;display:flex;align-items:center;justify-content:center}
.editor-preview iframe{border:0;background:#fff}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:60}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.3rem;width:100%;max-width:560px;max-height:85vh;overflow:auto;display:flex;flex-direction:column;gap:.8rem}
.modal-card h3{font-family:'Fraunces',serif;font-size:1.2rem}
.modal-card input,.modal-card textarea{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.7rem;font-size:.95rem;width:100%}
.modal-card textarea{min-height:180px;resize:vertical;line-height:1.5;font-family:inherit}
.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:.7rem 1.1rem;border-radius:12px;z-index:80;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* chip de uso de tokens */
.usage-chip{font-size:.72rem;color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:.35rem .6rem;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.usage-chip.over{color:#e87a6b;border-color:#5a2f2a}

/* barra de seleção em massa */
.bulk-bar{display:flex;align-items:center;gap:.6rem;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem;margin-bottom:.8rem}

/* itens de mídia (seleção/nome/ações) */
.media-item .mi-check{position:absolute;top:.3rem;left:.3rem;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#1a120c;display:none;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.media-item.sel .mi-check{display:flex}
.media-item .mi-name{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:.66rem;padding:.5rem .4rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.media-item .mi-btn{position:absolute;top:.3rem;width:24px;height:24px;border:none;border-radius:7px;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:.72rem;backdrop-filter:blur(4px)}
.media-item .mi-btn.del{right:.3rem}
.media-item .mi-btn.rn{right:2.1rem}

/* ===== Mobile ===== */
@media(max-width:680px){
  /* topo enxuto: logo + chip + sair */
  .topbar{gap:.5rem;padding:.55rem .7rem;align-items:center}
  .brand{font-size:1.1rem;flex:1}
  .usage-chip{font-size:.66rem;padding:.3rem .5rem}
  /* navegação no topo, em linha cheia, fácil de tocar */
  .topbar{flex-wrap:wrap}
  .nav{order:3;flex:1 0 100%;gap:.25rem;justify-content:space-between;overflow-x:auto;margin-top:.4rem;padding-bottom:.1rem}
  .nav-btn{flex:1;text-align:center;font-size:.72rem;font-weight:600;padding:.5rem .2rem;border-radius:9px;white-space:nowrap}
  .nav-btn.cta{background:linear-gradient(135deg,var(--accent),#b5765a);color:#1a120c}
  .nav-btn.active{background:var(--panel2)}
  .nav-btn.cta.active{background:linear-gradient(135deg,var(--accent),#b5765a)}
  .view{padding:1rem .7rem 4rem}
  .view-head h1{font-size:1.2rem}
  .view-head{gap:.5rem}
  .view-head .btn{font-size:.74rem;padding:.45rem .6rem}
  .cards{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .media-grid{grid-template-columns:repeat(3,1fr)}
  .preview-col{position:static}
  .preview-stage{max-height:60vh}
  .chat{max-height:26vh}
  .group-head{flex-wrap:wrap;gap:.4rem}
  .group-head h2{font-size:1.05rem}
  .group-head .btn{font-size:.7rem;padding:.35rem .5rem}
  .cbtn{font-size:.66rem;padding:.4rem .2rem}
  .editor-wrap{height:auto;grid-template-columns:1fr}
  #editor-code{height:34vh}
  .editor-preview{height:46vh}
  .modal-card{max-height:86vh}
  .composer-opts{gap:.35rem}
  .sel{font-size:.78rem;padding:.4rem .45rem}
  .viewer-bar{padding:.5rem .7rem;font-size:.85rem}
  .viewer-bar span{font-size:.8rem}
  .viewer-nav{bottom:12px}
}