:root{
  --bg:#071733;--panel:#081d43;--line:rgba(255,255,255,.10);
  --text:#f6f8ff;--muted:#9fb3dc;--blue:#087cff
}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button,input,textarea,select{font:inherit}
.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#061633;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:9px;align-items:center}.brand-mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#fff,#8bdcff 48%,#087cff);display:grid;place-items:center;color:#06275f;font-weight:900;box-shadow:0 0 24px rgba(8,124,255,.45)}
.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{font-size:9px;color:var(--muted)}
.top-actions{display:flex;gap:8px}.btn{border:1px solid var(--line);border-radius:9px;padding:9px 13px;color:#fff;background:rgba(255,255,255,.05);cursor:pointer}.btn.primary{background:linear-gradient(135deg,#168fff,#0868de);border-color:#58b6ff;box-shadow:0 8px 22px rgba(8,124,255,.28)}.btn.ghost{background:rgba(255,255,255,.035)}.btn.full{width:100%;margin-top:8px}
.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);height:calc(100vh - 58px)}
.panel{background:linear-gradient(180deg,#0a214e,#061734);border-right:1px solid var(--line);min-width:0}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);height:40px;border-bottom:1px solid var(--line)}.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:#9fb3dc;font-size:9px;cursor:pointer}.tab.active{color:#fff;border-bottom-color:#168fff;background:rgba(8,124,255,.08)}
.tab-panel{display:none;height:calc(100% - 40px);overflow:auto;padding:14px}.tab-panel.active{display:block}.tab-panel::-webkit-scrollbar{width:7px}.tab-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:99px}
section{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}section:last-child{border-bottom:0}
h2{font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:#dbe7ff}
label{display:block;font-size:9px;color:#b6c7e4;margin:9px 0}input,textarea,select{width:100%;margin-top:5px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.22);color:#fff;outline:none}textarea{resize:vertical}input:focus,textarea:focus,select:focus{border-color:#3ba3ff;box-shadow:0 0 0 3px rgba(59,163,255,.12)}
.upload-card{padding:16px;text-align:center;border:1px dashed rgba(80,175,255,.64);border-radius:10px;background:rgba(8,124,255,.08);cursor:pointer}.upload-card span,.upload-card small{display:block}.upload-card span{font-size:10px}.upload-card small{font-size:8px;color:var(--muted);margin-top:3px}.upload-card.compact{padding:9px;margin-top:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.quality-toggles{display:grid;gap:6px;margin-top:10px}.quality-toggles label{margin:0;display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03);cursor:pointer}.quality-toggles span{font-size:9px;color:#e9f3ff}.quality-toggles input{display:none}.quality-toggles i{width:28px;height:16px;border-radius:99px;background:#203657;position:relative;transition:.18s}.quality-toggles i:after{content:"";position:absolute;width:12px;height:12px;left:2px;top:2px;border-radius:50%;background:#9db1d0;transition:.18s}.quality-toggles input:checked+i{background:#138cff;box-shadow:0 0 14px rgba(19,140,255,.42)}.quality-toggles input:checked+i:after{left:14px;background:#fff}
.format-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.format-cards button{padding:9px 3px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.035);color:#fff;cursor:pointer}.format-cards button.active{border-color:#4caeff;background:rgba(8,124,255,.18)}.format-cards strong,.format-cards small{display:block}.format-cards strong{font-size:9px;margin-top:5px}.format-cards small{font-size:7px;color:var(--muted);margin-top:2px}.format-icon{display:block;margin:auto;border-radius:3px;background:linear-gradient(145deg,#f3fbff,#56baff 48%,#0a5fcb);border:1px solid rgba(255,255,255,.6)}.format-icon.poster{width:21px;height:27px}.format-icon.story{width:17px;height:31px}.format-icon.banner{width:32px;height:19px;margin-top:6px;margin-bottom:4px}
.small-copy{font-size:9px;line-height:1.5;color:var(--muted);margin:0}
.workspace{display:grid;grid-template-rows:41px minmax(0,1fr) 24px;min-width:0;background:#101722}
.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#071a3b;border-bottom:1px solid var(--line)}.toolbar-left{display:flex;align-items:center;gap:8px;font-size:10px}.divider{width:1px;height:18px;background:var(--line)}.icon-btn{border:1px solid var(--line);border-radius:7px;padding:5px 8px;background:rgba(255,255,255,.045);color:#fff;font-size:9px}.autosave{font-size:8px;color:#80b9ff}
.canvas-stage{position:relative;overflow:hidden}.stage-grid{position:absolute;inset:0;background-color:#111a27;background-image:linear-gradient(45deg,#172231 25%,transparent 25%),linear-gradient(-45deg,#172231 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#172231 75%),linear-gradient(-45deg,transparent 75%,#172231 75%);background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0}.canvas-wrap{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 24px 60px rgba(0,0,0,.42)}canvas{display:block;background:#fff}.hint{margin:0;text-align:center;font-size:8px;color:#8ba4cf;line-height:24px;background:#071a3b;border-top:1px solid var(--line)}
@media(max-width:800px){body{overflow:auto}.app-shell{display:block;height:auto}.panel{height:auto}.workspace{height:720px}.top-actions .ghost{display:none}}

.element-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:10px}
.element-tabs button{border:1px solid var(--line);border-radius:8px;padding:7px 5px;background:rgba(255,255,255,.035);color:var(--muted);font-size:8px;cursor:pointer}
.element-tabs button.active{border-color:#49adff;background:rgba(8,124,255,.18);color:#fff}
.range-row label,.grid-2 label{position:relative}
.range-row label>span,.grid-2 label>span{float:right;color:#76c6ff}
input[type="range"]{padding:0;height:5px;border:0;background:linear-gradient(90deg,#168fff,#29415f);accent-color:#37a5ff}
.drag-note{margin-top:9px}
.selection-box{position:absolute;display:none;border:1px dashed #61c9ff;box-shadow:0 0 0 1px rgba(97,201,255,.18),0 0 18px rgba(21,150,255,.28);pointer-events:none;z-index:4}
.canvas-wrap{user-select:none}
.format-cards button{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.format-cards button:hover{border-color:rgba(76,174,255,.55)}
.format-cards button.active{background:linear-gradient(180deg,rgba(18,139,255,.25),rgba(8,79,171,.18));box-shadow:0 0 18px rgba(8,124,255,.18),inset 0 0 0 1px rgba(79,180,255,.15)}

/* Corrección visual v3 */
button,
.element-tabs button,
.format-cards button,
.tabs button,
.icon-btn,
.btn {
  -webkit-appearance:none !important;
  appearance:none !important;
  color:#f4f8ff !important;
  background-color:rgba(10,31,69,.96) !important;
  border:1px solid rgba(116,180,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.element-tabs button{
  min-height:34px;
  background:linear-gradient(180deg,rgba(18,48,95,.98),rgba(7,27,63,.98)) !important;
  border-radius:9px !important;
}
.element-tabs button:hover,
.format-cards button:hover{
  border-color:rgba(78,177,255,.62) !important;
  background:linear-gradient(180deg,rgba(22,64,122,.98),rgba(8,37,82,.98)) !important;
}
.element-tabs button.active,
.format-cards button.active{
  color:#fff !important;
  border-color:#45adff !important;
  background:linear-gradient(180deg,rgba(21,139,255,.34),rgba(6,69,151,.30)) !important;
  box-shadow:0 0 20px rgba(7,125,255,.20),inset 0 0 0 1px rgba(107,202,255,.12) !important;
}
.format-cards{
  grid-template-columns:1fr !important;
  gap:8px !important;
}
.format-cards button{
  min-height:58px;
  display:grid !important;
  grid-template-columns:42px 1fr !important;
  grid-template-rows:1fr 1fr !important;
  align-items:center !important;
  text-align:left !important;
  padding:9px 12px !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,rgba(18,48,95,.98),rgba(7,27,63,.98)) !important;
}
.format-cards .format-icon{
  grid-row:1/3;
  margin:0 auto;
}
.format-cards strong{
  font-size:10px !important;
  margin:0 !important;
}
.format-cards small{
  font-size:8px !important;
  margin:0 !important;
}
.quality-toggles label{
  min-height:36px;
  background:linear-gradient(180deg,rgba(17,45,88,.92),rgba(7,27,62,.92)) !important;
}
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:6px !important;
  border-radius:99px !important;
  background:linear-gradient(90deg,#168fff 0 45%,#29415f 45% 100%) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#29a9ff;border:2px solid #bde9ff;
  box-shadow:0 0 12px rgba(41,169,255,.55);
}