:root{
  --bg:#dcded9;
  --frame:#ffffff;
  --panel:#2f2f2f;
  --panel-2:#3a3a3a;
  --panel-3:#4b4b4b;
  --line:rgba(255,255,255,.09);
  --text:#f4f4f1;
  --muted:#a9a9a2;
  --accent:#d7ff3f;
  --accent-ink:#1c2005;
  --r-lg:26px;
  --r-md:20px;
  --gap:14px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  padding:22px;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page-bg{width:100%;max-width:1360px}

/* Marco blanco */
.frame{
  background:var(--frame);
  border-radius:34px;
  padding:var(--gap);
  display:grid;
  gap:var(--gap);
  grid-template-columns:82px minmax(0,1fr) 330px;
  grid-template-areas:
    "side main aside"
    "side bottom bottom";
  min-height:calc(100vh - 44px);
  min-height:calc(100dvh - 44px);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
}
.panel{background:var(--panel);border-radius:var(--r-lg);color:var(--text)}

/* ── Sidebar ── */
.sidebar{
  grid-area:side;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 0;gap:10px;
}
.avatar{
  width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;
  font-weight:800;font-size:20px;color:#fff;
  background:linear-gradient(135deg,#ff9a62,#c86bff 55%,#5aa8ff);
  transition:transform .25s ease;
}
.avatar:hover{transform:scale(1.07) rotate(-4deg)}
.sep{width:44px;height:1px;background:var(--line);margin:4px 0}
.side-group{display:flex;flex-direction:column;gap:8px}
.icon-btn{
  position:relative;
  width:46px;height:46px;border-radius:15px;border:0;cursor:pointer;
  background:transparent;color:#cfcfc9;
  display:grid;place-items:center;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--panel-2);color:#fff;transform:translateY(-1px)}
.icon-btn.active{background:var(--panel-3);color:#fff}
.icon-btn .tip{
  position:absolute;left:56px;top:50%;translate:0 -50%;
  background:#111;color:#fff;font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:10px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:5;
}
.icon-btn:hover .tip{opacity:1}
.accent-plus{background:var(--accent);color:#1a1e04}
.accent-plus:hover{background:#e4ff70;color:#111}
.spacer{flex:1}
.icon-btn.circle{border-radius:50%;background:var(--panel-2);font-size:18px}
.icon-btn.circle:hover{background:var(--panel-3)}

/* ── Hero / preview ── */
.hero{grid-area:main;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hero-title{display:flex;gap:12px;align-items:flex-start;min-width:0}
.live-dot{width:10px;height:10px;flex:none;margin-top:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(215,255,63,.15);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(215,255,63,.05)}}
.hero-title h1{font-size:clamp(18px,2.4vw,22px);font-weight:700;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-title p{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;background:rgba(215,255,63,.14);color:var(--accent);border:1px solid rgba(215,255,63,.3);padding:3px 10px;border-radius:99px}
.chip.draft{background:rgba(255,255,255,.07);color:#ddd;border-color:var(--line)}
.pills{display:flex;gap:8px;flex:none}
.pill{
  border:1px solid var(--line);background:transparent;color:#d8d8d2;
  font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:all .2s ease;white-space:nowrap;
}
.pill:hover{border-color:#fff;color:#fff}
.pill.active{background:#efefea;color:#191919;border-color:#efefea}

.preview-wrap{background:#1e1e1e;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#262626}
.browser-bar span{width:10px;height:10px;flex:none;border-radius:50%;background:#555}
.browser-bar em{margin-left:10px;font-style:normal;font-size:12px;color:var(--muted);background:#1c1c1c;padding:5px 12px;border-radius:999px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reload-btn{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#ddd;font-size:15px;cursor:pointer;transition:all .2s ease}
.reload-btn:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
.preview{position:relative;height:clamp(280px,42vh,400px);background:#222}
.preview iframe{width:100%;height:100%;border:0;background:#fff;display:block}
.preview-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  background:radial-gradient(600px 300px at 50% 0%,#454545,#282828);
  transition:opacity .3s ease;
}
.preview-fallback.hidden{opacity:0;pointer-events:none}
.fallback-thumb{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;color:#111;background:var(--accent)}
.preview-fallback h2{font-size:clamp(19px,3vw,24px)}
.preview-fallback p{color:var(--muted);font-size:14px;max-width:420px}
.preview-fallback small{color:#777;font-size:11.5px;max-width:380px}

.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-light{
  border:0;cursor:pointer;background:#efefea;color:#161616;
  font-weight:700;font-size:13.5px;padding:12px 20px;border-radius:999px;
  transition:transform .18s ease,background .18s ease;
}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn-light:active{transform:translateY(0)}
.btn-light.big{width:100%;padding:15px;font-size:14.5px}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:#ddd;
  font-weight:600;font-size:13px;padding:11px 18px;border-radius:999px;cursor:pointer;
  transition:all .18s ease;
}
.btn-ghost:hover{border-color:#fff;color:#fff}
.btn-ghost.danger:hover{border-color:#ff7b7b;color:#ff9c9c}
.dev-progress{min-width:220px;flex:1;max-width:340px}
.dev-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px}
.dev-label strong{color:#fff}
.bar{height:6px;border-radius:99px;overflow:hidden;background:#1d1d1d;outline:1px solid var(--line)}
.bar.slim{height:5px;margin-top:8px}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#fff,var(--accent));transition:width .5s cubic-bezier(.2,.9,.2,1)}

/* ── Columna derecha ── */
.pages{grid-area:aside;display:flex;flex-direction:column;padding:20px;gap:12px;min-width:0}
.pages-head h2{font-size:17px;font-weight:700}
.pages-head h2 span{background:var(--panel-3);font-size:12px;padding:3px 10px;border-radius:99px;margin-left:6px;color:#fff}
#searchInput{
  margin-top:10px;width:100%;border:1px solid var(--line);background:#242424;color:#fff;
  border-radius:12px;padding:10px 12px;font:500 13px var(--font);outline:none;
}
#searchInput:focus{border-color:var(--accent)}
.pages-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:180px;max-height:520px;padding-right:2px;scrollbar-width:thin;scrollbar-color:#555 transparent}
.pages-list::-webkit-scrollbar{width:6px}
.pages-list::-webkit-scrollbar-thumb{background:#555;border-radius:99px}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:20px;line-height:1.6}
.page-item{
  display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  background:transparent;border:0;cursor:pointer;color:var(--text);
  padding:10px;border-radius:18px;transition:background .2s ease,transform .2s ease;
  min-height:64px;
}
.page-item:hover{background:var(--panel-2)}
.page-item.selected{background:var(--panel-3);transform:scale(1.01)}
.thumb{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#141414}
.page-item .meta{flex:1;min-width:0}
.page-item .meta strong{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-item .meta small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-item .extra{text-align:right;flex:none}
.page-item .extra small{color:var(--muted);font-size:11px;display:block}
.star{color:var(--accent);font-size:14px}
.cat-tag{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.12);padding:3px 8px;border-radius:99px}

/* ── Fila inferior ── */
.bottom{grid-area:bottom;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.card{padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{font-size:14px;font-weight:700;color:#e9e9e4}
.stat-total{display:flex;align-items:baseline;gap:8px}
.stat-total strong{font-size:38px;font-weight:800;letter-spacing:-.03em}
.stat-total span{color:var(--muted);font-size:13px}
.cat-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#d5d5cf}
.cat-row>span:first-child{width:86px;flex:none}
.cat-row .bar{flex:1;min-width:0}
.cat-row b{width:22px;flex:none;text-align:right}
.card small{color:var(--muted);font-size:12px}
.backup-row{display:flex;gap:8px}
.url-row{display:flex;gap:8px;align-items:center}
.url-row code{flex:1;min-width:0;background:#222;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-btn{background:var(--panel-3);border:0;color:#fff;font-weight:600;font-size:12px;padding:9px 13px;border-radius:999px;cursor:pointer;transition:all .18s ease;white-space:nowrap}
.mini-btn:hover{background:#5c5c5c}
.switch-row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:600;gap:10px}
.toggle{width:52px;height:29px;flex:none;border-radius:99px;border:0;cursor:pointer;background:#1d1d1d;outline:1px solid var(--line);position:relative;transition:background .25s ease}
.toggle i{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#8a8a85;transition:left .25s ease,background .25s ease}
.toggle.on{background:rgba(215,255,63,.25)}
.toggle.on i{left:26px;background:var(--accent)}
.btn-accent{border:0;cursor:pointer;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13.5px;padding:14px;border-radius:16px;transition:transform .18s ease,filter .18s ease}
.btn-accent:hover{transform:translateY(-1px);filter:brightness(1.05)}
.stepper{display:flex;align-items:center;gap:12px}
.step-btn{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff;font-size:16px;cursor:pointer;transition:all .18s ease}
.step-btn:hover{background:var(--panel-3)}
.step-info{flex:1;min-width:0}
.step-info strong{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-info small{color:var(--muted)}
.fav-row{display:flex;gap:8px;flex-wrap:wrap}

/* ── Modal / toast ── */
.overlay{position:fixed;inset:0;background:rgba(20,20,18,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;z-index:50;overflow-y:auto}
.overlay[hidden]{display:none}
.modal{width:min(520px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;padding:26px;display:flex;flex-direction:column;gap:14px;animation:pop .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}}
.modal h3{font-size:18px}
.modal label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#e6e6e0}
.modal input,.modal select{background:#232323;border:1px solid var(--line);color:#fff;border-radius:12px;padding:11px 12px;font:500 13.5px var(--font);outline:none;width:100%}
.modal input:focus,.modal select:focus{border-color:var(--accent)}
.modal .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .check{flex-direction:row;align-items:center;gap:8px}
.modal .check input{width:auto}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.toast{position:fixed;bottom:26px;left:50%;translate:-50% 0;background:#161616;color:#fff;font-weight:600;font-size:13px;padding:12px 20px;border-radius:99px;border:1px solid var(--accent);z-index:99;animation:pop .25s ease;max-width:calc(100vw - 32px);text-align:center}
.toast[hidden]{display:none}
.mobile-nav{display:none}

/* ── Responsive: tablet ── */
@media (max-width:1150px){
  .frame{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"side main" "side aside" "side bottom"}
  .pages-list{max-height:320px}
  .bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
  .control{grid-column:1/-1}
}
/* ── Responsive: hero interno ── */
@media (max-width:900px){
  .hero-top{flex-direction:column;align-items:stretch}
  .pills{display:flex;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
}
/* ── Responsive: móvil ── */
@media (max-width:760px){
  body{padding:10px;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .frame{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "aside" "bottom";border-radius:24px;min-height:auto}
  .sidebar{display:none}
  .hero{padding:16px}
  .preview{height:min(52vw,300px)}
  .hero-actions .btn-light{flex:1;text-align:center}
  .dev-progress{max-width:none}
  .pages-list{max-height:300px}
  .bottom{grid-template-columns:minmax(0,1fr)}
  .modal{padding:20px}
  .modal .grid2{grid-template-columns:1fr}
  .mobile-nav{
    display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;
    justify-content:space-around;align-items:center;padding:10px 6px;border-radius:22px;
    box-shadow:0 12px 30px rgba(0,0,0,.3);
  }
  .mobile-nav .icon-btn{width:44px;height:44px;font-size:19px}
  .mobile-nav .tip{display:none}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}