:root{
  --bg:#07090d;
  --surface:#0d1118;
  --surface-2:#121824;
  --surface-3:#171f2c;
  --surface-4:#1d2635;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --gold:#cba85d;
  --gold-soft:#edd38c;
  --purple:#8d4dff;
  --purple-2:#b369ff;
  --cyan:#5fe4ff;
  --text:#f6f8fb;
  --muted:#8f9baa;
  --danger:#ff6378;
  --shadow:0 24px 70px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% -10%,rgba(132,68,255,.18),transparent 34%),
    radial-gradient(circle at 86% 0,rgba(45,187,255,.10),transparent 28%),
    linear-gradient(145deg,#080a0f,#090d13 58%,#07090d);
  overflow:hidden;
}
button,input,select,textarea{font:inherit}
button,.top-link,.upload-tile{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color:#edf2f8;
  border-radius:11px;
  padding:9px 12px;
  cursor:pointer;
  text-decoration:none;
  transition:.18s ease;
}
button:hover,.top-link:hover,.upload-tile:hover{
  border-color:rgba(198,161,255,.6);
  background:linear-gradient(180deg,rgba(147,84,255,.18),rgba(110,56,210,.08));
  transform:translateY(-1px);
}
button:active{transform:translateY(0)}
button.gold,.primary{
  border-color:rgba(196,121,255,.75);
  background:linear-gradient(135deg,#a849ff,#6f32d5);
  box-shadow:0 10px 28px rgba(127,53,232,.27),inset 0 1px rgba(255,255,255,.25);
  color:#fff;
}
.danger-outline{
  color:#ff9eaa;
  border-color:rgba(255,99,120,.42);
  background:rgba(255,99,120,.04);
}
.full{width:100%}

.topbar{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:0 24px;
  border-bottom:1px solid var(--line);
  background:rgba(8,11,16,.82);
  backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 10px 40px rgba(0,0,0,.22);
  position:relative;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:12px;min-width:230px}
.brand-mark{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,#edd38c,#9b7738);
  color:#171006;font-size:23px;font-weight:950;position:relative;
  box-shadow:0 12px 30px rgba(201,166,90,.22),inset 0 1px rgba(255,255,255,.6);
}
.brand-mark i{
  position:absolute;width:12px;height:12px;border-radius:50%;right:-4px;bottom:-3px;
  background:linear-gradient(145deg,#a951ff,#6d2bd5);border:2px solid #090c11;
}
.brand-copy span,.brand-copy strong,.brand-copy small{display:block}
.brand-copy span{font-weight:800;font-size:15px;letter-spacing:.02em}
.brand-copy strong{
  margin-top:1px;font-size:13px;
  background:linear-gradient(90deg,#d596ff,#7fe8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-copy small{margin-top:3px;color:#717d8d;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

.top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.icon-action{
  min-width:68px;min-height:46px;padding:5px 10px;
  display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center;
  font-size:11px;
}
.icon-action b{font-size:17px;line-height:1;color:#cda4ff}
.export-main{min-height:46px;display:flex;align-items:center;gap:8px;font-size:12px;padding:8px 17px}
.export-main b{font-size:18px}
.top-link{font-size:11px;min-height:46px;display:flex;align-items:center}

.workspace{
  height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:304px minmax(560px,1fr) 332px;
}
.leftbar,.rightbar{
  background:rgba(10,14,20,.88);
  backdrop-filter:blur(18px);
  overflow:auto;
  scrollbar-color:#3a4656 transparent;
}
.leftbar{border-right:1px solid var(--line)}
.rightbar{border-left:1px solid var(--line);padding:14px}

.tool-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  padding:12px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,14,20,.94);backdrop-filter:blur(16px);z-index:4;
}
.tool-tabs button{font-size:10px;padding:10px 5px;color:#8f9baa}
.tool-tabs button.active{
  color:#fff;border-color:rgba(169,97,255,.58);
  background:linear-gradient(135deg,rgba(150,72,255,.38),rgba(80,41,159,.28));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 20px rgba(89,37,172,.18);
}
.side-panel{display:none;padding:17px}
.side-panel.active{display:block}
.section-kicker{
  font-size:9px;font-weight:900;letter-spacing:.16em;color:#8f79b8;text-transform:uppercase;margin-bottom:5px
}
.side-panel h2,.rightbar h2{font-size:17px;margin:0 0 6px;letter-spacing:-.02em}
.section-lead{font-size:11px;line-height:1.45;color:var(--muted);margin:0 0 15px}
.side-panel h3{font-size:11px;color:var(--gold-soft);margin:20px 0 10px;letter-spacing:.04em}

label{display:grid;gap:6px;font-size:10px;font-weight:700;color:#b4bfcb;margin-bottom:10px}
input,select,textarea{
  width:100%;min-height:39px;border:1px solid var(--line-strong);border-radius:10px;
  background:rgba(3,6,10,.55);color:#fff;padding:8px 10px;outline:none;
  transition:border-color .16s,box-shadow .16s;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(164,91,255,.72);
  box-shadow:0 0 0 3px rgba(132,68,255,.13);
}
textarea{min-height:68px;resize:vertical}
input[type=color]{padding:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.plan-grid,.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.plan-card,.template-card{
  aspect-ratio:.72;border:1px solid var(--line-strong);border-radius:13px;overflow:hidden;
  position:relative;cursor:pointer;background:#151b22;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  transition:.18s ease;
}
.plan-card:hover,.template-card:hover{transform:translateY(-3px);border-color:#a862ff;box-shadow:0 18px 36px rgba(0,0,0,.38)}
.plan-card canvas,.template-card canvas{width:100%;height:100%;display:block}
.plan-card span,.template-card span{
  position:absolute;left:7px;right:7px;bottom:7px;
  background:rgba(6,8,12,.78);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px;
  font-size:9px;text-align:center;
}
.element-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.element-grid button,.upload-tile{
  min-height:66px;display:grid;place-items:center;text-align:center;padding:10px 5px;font-size:11px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.015));
}
.icon-library{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.icon-library button{
  aspect-ratio:1;font-size:23px;padding:4px;border-radius:11px;background:rgba(255,255,255,.035)
}

.layer-list{display:grid;gap:6px}
.layer-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:9px;border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  font-size:11px;
}
.layer-item.active{
  border-color:rgba(174,98,255,.68);
  background:linear-gradient(135deg,rgba(119,56,210,.28),rgba(73,34,133,.18));
  box-shadow:0 8px 22px rgba(74,31,147,.16);
}
.layer-item button{padding:4px 6px;font-size:10px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-heading button{font-size:9px;padding:6px 8px}

.center{
  min-width:0;display:grid;grid-template-rows:auto 1fr auto auto;
  background:
    radial-gradient(circle at 50% 15%,rgba(119,67,222,.10),transparent 35%),
    #090d12;
}
.editor-toolbar{
  min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--line);background:rgba(12,17,23,.92);backdrop-filter:blur(16px)
}
.toolbar-group{display:flex;align-items:center;gap:6px}
.toolbar-group button{min-width:38px;min-height:36px;padding:7px 9px;font-size:11px}
.toolbar-group label{display:flex;align-items:center;gap:7px;margin:0;font-size:9px}
.toolbar-group select{width:auto;min-height:34px}
.toolbar-group input[type=range]{width:120px;accent-color:#9f57ff}

.canvas-shell{
  overflow:auto;display:flex;align-items:center;justify-content:center;padding:42px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(123,74,216,.09),transparent 48%),
    #0b1016;
  background-size:24px 24px,24px 24px,auto,auto;
}
#designCanvas{
  background:#fff;touch-action:none;border-radius:3px;
  box-shadow:0 36px 90px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.14);
}
.studio-status{
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding:7px 12px;border-top:1px solid var(--line);background:#0d1218;color:#748090;font-size:9px;
}
.studio-status span{display:flex;align-items:center;gap:6px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.8)}
.page-tabs{
  display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line);background:#0e131a;overflow-x:auto
}
.page-tabs button{white-space:nowrap;font-size:10px;padding:8px 11px}
.page-tabs button.active{
  border-color:#a459ff;background:linear-gradient(135deg,rgba(139,70,246,.45),rgba(78,36,145,.28));
  box-shadow:0 8px 20px rgba(91,42,167,.17)
}

.inspector,.suite-panel{
  background:linear-gradient(180deg,rgba(24,31,42,.92),rgba(14,19,27,.92));
  border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.empty-state{
  padding:28px 10px;color:var(--muted);font-size:11px;text-align:center;
  border:1px dashed var(--line-strong);border-radius:11px;background:rgba(255,255,255,.018)
}
.hidden{display:none!important}
.button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.suite-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.suite-card{
  border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#0a0e13;cursor:pointer;
  transition:.18s ease;box-shadow:0 10px 24px rgba(0,0,0,.22)
}
.suite-card:hover{transform:translateY(-2px);border-color:#9e58ff}
.suite-card canvas{display:block;width:100%;aspect-ratio:.78;background:white}
.suite-card span{display:block;padding:7px;font-size:9px;text-align:center;color:#aab5c1}

dialog{
  max-width:min(900px,94vw);max-height:88vh;overflow:auto;
  border:1px solid rgba(183,120,255,.35);border-radius:18px;
  background:linear-gradient(160deg,#151d28,#0d1218);
  color:#fff;padding:0;box-shadow:0 36px 110px rgba(0,0,0,.8)
}
dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(7px)}
.dialog-inner{padding:24px;position:relative}
.dialog-close{position:absolute;right:13px;top:13px}
.export-items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:13px 0}
.export-check{display:flex;gap:8px;align-items:center;padding:9px;border:1px solid var(--line-strong);border-radius:9px}
.export-check input{width:auto;min-height:auto}

@media(max-width:1220px){
  .workspace{grid-template-columns:280px minmax(500px,1fr)}
  .rightbar{display:none}
}
@media(max-width:860px){
  body{overflow:auto}
  .topbar{height:auto;align-items:flex-start;padding:14px;flex-direction:column}
  .workspace{height:auto;grid-template-columns:1fr}
  .leftbar,.rightbar{display:block;border:0}
  .center{min-height:760px}
  .top-actions{width:100%;justify-content:flex-start}
}

/* Birthday v2.0 additions */
.template-grid{grid-template-columns:repeat(4,minmax(120px,1fr))}
@media(max-width:700px){.template-grid{grid-template-columns:repeat(2,1fr)}}

/* v2.1 Asset Engine */
.asset-library-head{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:18px}
.asset-library-head h3{margin:0}
.asset-library-head select{width:138px;min-height:34px;font-size:10px}
.asset-library{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.asset-card{padding:7px;display:grid;gap:6px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015))}
.asset-thumb{height:78px;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#242e3c,#0c1118)}
.asset-thumb img{max-width:92%;max-height:92%;filter:drop-shadow(0 8px 8px rgba(0,0,0,.35))}
.asset-card b{font-size:9px;font-weight:700;color:#cbd5df}
.premium-pack-btn{margin-top:8px;border-color:#d1ad61;color:#f4d88f;background:linear-gradient(135deg,rgba(207,167,88,.20),rgba(128,82,25,.10));box-shadow:inset 0 1px rgba(255,255,255,.1)}

/* v2.2 Collection Design System */
.tool-tabs-4{grid-template-columns:repeat(4,1fr)}
.brand-copy em{
  display:inline-flex;margin-top:5px;padding:3px 7px;border-radius:999px;
  background:rgba(153,79,255,.12);border:1px solid rgba(181,116,255,.22);
  color:#d8b4fe;font-size:8px;font-style:normal;letter-spacing:.04em
}
.collection-list{display:grid;gap:9px;margin-top:14px}
.collection-card{
  display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;
  gap:2px 10px;text-align:left;padding:9px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015))
}
.collection-card.active{
  border-color:#a65aff;box-shadow:0 10px 28px rgba(105,50,190,.22);
  background:linear-gradient(145deg,rgba(142,73,249,.22),rgba(82,38,154,.12))
}
.collection-preview{
  grid-row:1/3;width:64px;height:76px;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(145deg,var(--c1),var(--c3));box-shadow:inset 0 0 0 2px var(--c2)
}
.collection-preview i{
  position:absolute;width:46px;height:46px;border-radius:50%;right:-10px;top:-8px;
  background:var(--c2);opacity:.4
}
.collection-preview b{position:absolute;left:0;right:0;top:20px;text-align:center;font-size:28px}
.collection-card strong{align-self:end;font-size:11px}
.collection-card small{align-self:start;color:#8f9baa;font-size:9px}
.collection-actions{display:grid;gap:8px;margin-top:14px}
.collection-info{
  margin-top:14px;padding:12px;border-radius:11px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025)
}
.collection-info b{font-size:12px;color:#e9d5ff}
.collection-info p{font-size:10px;line-height:1.5;color:#95a1af}
.collection-info span{font-size:9px;color:#e7ca82}

/* v3.0 premium generated collection library */
.asset-thumb{height:102px;background:radial-gradient(circle at 50% 35%,#354254,#10151d)}
.asset-thumb img{max-width:98%;max-height:98%}
.collection-list{grid-template-columns:1fr 1fr}.collection-card{grid-template-columns:52px 1fr;padding:7px}.collection-preview{width:52px;height:64px}.collection-card strong{font-size:10px}.collection-card small{font-size:8px}
@media(max-width:1500px){.collection-list{grid-template-columns:1fr}}

/* v3.1 Premium art direction */
#designCanvas{box-shadow:0 44px 115px rgba(0,0,0,.76),0 0 0 1px rgba(255,255,255,.18)}
.canvas-shell{padding:54px;background:radial-gradient(circle at 50% 15%,rgba(171,100,255,.12),transparent 34%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#090d13;background-size:auto,24px 24px,24px 24px,auto}
.suite-card{border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.28)}

/* v3.2 Luxury Artwork Engine */
#designCanvas{box-shadow:0 48px 125px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.20)}
.canvas-shell{padding:58px;background:radial-gradient(circle at 50% 12%,rgba(184,112,255,.14),transparent 34%),radial-gradient(circle at 80% 75%,rgba(65,188,255,.06),transparent 30%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#080c12;background-size:auto,auto,24px 24px,24px 24px,auto}.suite-card{border-radius:15px;box-shadow:0 16px 38px rgba(0,0,0,.34)}.suite-card:hover{transform:translateY(-4px) scale(1.015)}