body.onium-workspace-dashboard { background: var(--bg); }

:root{
  --bg:#f6f8fb; --panel:#ffffff; --panel2:#fbfcfe;
  --text:#0f172a; --muted:#64748b; --border:#e6ebf2;
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --accent:#f97316; --accent2:#ffb04a;
  --radius:16px;
  --sidebar-w:180px;
  --assistant-w:280px;
  --studio-text-font:"Vazirmatn","Inter","SF Pro Text","Segoe UI","Noto Sans Arabic","Noto Sans",Arial,sans-serif;
  --studio-latin-font:"Inter","SF Pro Text","Segoe UI","Noto Sans",Arial,sans-serif;
  --studio-rtl-font:"Vazirmatn","Noto Naskh Arabic","Noto Sans Arabic","Tahoma","Segoe UI",sans-serif;
}
body.onium-workspace-dashboard{
  --sidebar-w:259px;
  --assistant-w:320px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:auto; min-height:100dvh}
body{
  margin:0; font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--text); background:var(--bg);
  overflow-x:hidden;
}
body.onium-workspace-dashboard{
  height:100dvh;
  overflow:hidden;
}
body.usage-coach-scroll-lock{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
.app{display:flex; min-height:100dvh}
body.onium-workspace-dashboard .app{
  min-height:0;
  height:100dvh;
}
/* Sidebar */
body.onium-workspace-dashboard .sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  max-width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.96) 100%);
  border-right:1px solid var(--border);
  padding:16px 14px;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.65);
  transition: transform .22s cubic-bezier(.16,1,.3,1), width .22s cubic-bezier(.16,1,.3,1), min-width .22s cubic-bezier(.16,1,.3,1), max-width .22s cubic-bezier(.16,1,.3,1), padding .18s ease, box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-height:68px;
  padding:11px 10px; border-radius:18px;
  background:linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border:1px solid rgba(226,232,240,.82);
  box-shadow:0 14px 34px rgba(15,23,42,.045);
}
.brand__logo{
  width:42px; height:42px; border-radius:14px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.4) 0 18%, transparent 19%),
    linear-gradient(135deg, #7c3aed 0%, #8b5cf6 46%, #f97316 100%);
  box-shadow:0 14px 28px rgba(124,58,237,.22);
}
.brand__meta{display:flex; flex-direction:column; min-width:0}
.brand__title{
  font-size:15px;
  font-weight:850;
  letter-spacing:.1px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__sub{
  margin-top:3px;
  font-size:12px;
  font-weight:650;
  color:#7c8aa0;
}
.nav{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:4px 0;
}
.nav::before{
  content:"Workspace";
  margin:0 8px 2px;
  color:#94a3b8;
  font-size:10px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.nav a{
  position:relative;
  display:flex; align-items:center; gap:12px;
  min-height:42px;
  padding:10px 12px; border-radius:14px;
  border:1px solid transparent;
  color:#334155;
  font-size:14px;
  font-weight:720;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.nav__action{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 8px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:#1f2937;
  cursor:pointer;
  text-align:left;
}
.nav a:hover{
  background:#fff;
  border-color:rgba(226,232,240,.86);
  color:#0f172a;
}
.nav__action:hover{background:var(--panel2)}
.nav__action:focus-visible{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 2px rgba(59,130,246,.18);
}
.nav a.active{
  background:linear-gradient(135deg, rgba(255,247,237,.98), rgba(255,237,213,.74));
  color:#9a3412;
  border-color:rgba(251,146,60,.34);
  box-shadow:0 10px 22px rgba(249,115,22,.09);
}
.nav a.active::before{
  content:"";
  position:absolute;
  left:5px;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:999px;
  background:#f97316;
}
.dot{width:8px;height:8px;border-radius:999px;background:#22c55e; opacity:.9}
.presence-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;}
.dot-online{background:#22c55e;}
.dot-recent{background:#f59e0b;}
.dot-offline{background:#cbd5e1;}
.presence-legend{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);margin-top:6px;}
.role-status{
  margin-left:8px;
  font-size:12px;
  color:var(--muted);
}
.role-status.is-success{color:#16a34a;}
.role-status.is-warn{color:#b45309;}
.ico{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  flex:0 0 24px;
  border-radius:9px;
  color:#64748b;
  background:#f1f5f9;
  font-size:13px;
  line-height:1;
}
.nav a:hover .ico{
  color:#334155;
  background:#eaf0f7;
}
.nav a.active .ico{
  color:#c2410c;
  background:#fff7ed;
}
.nav small{color:var(--muted)}
.sidebar__spacer{flex:1}
.sidebar__spacer::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:8px;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.28), transparent);
}
.sidebar__footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px; border-radius:14px;
  border:1px solid var(--border); background:var(--panel2);
}
.user{display:flex; align-items:center; gap:10px}
.avatar{width:30px;height:30px;border-radius:12px;background:#e2e8f0}
.account-trigger{
  min-width:0;
  flex:1;
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.account-trigger:focus-visible{
  outline:2px solid rgba(37,99,235,.5);
  outline-offset:4px;
  border-radius:12px;
}
.account-trigger__avatar{
  position:relative;
  flex:0 0 30px;
  background:linear-gradient(135deg,#e2e8f0,#c7d2fe);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}
.account-trigger__avatar::after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  border:2px solid var(--panel2);
}
.account-trigger[data-authenticated="0"] .account-trigger__avatar{
  background:linear-gradient(135deg,#f8fafc,#dbeafe);
}
.account-trigger[data-authenticated="0"] .account-trigger__avatar::after{background:#94a3b8}
.account-trigger__name{
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  line-height:1.15;
}
.account-trigger__meta{
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:var(--muted);
  line-height:1.25;
}
.kbd{
  font-size:12px; color:var(--muted);
  border:1px solid var(--border); background:#fff; border-radius:10px;
  padding:6px 8px;
}
/* Main */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
body.onium-workspace-dashboard .main{
  min-height:0;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.topbar{
  height:64px; display:flex; align-items:center; gap:12px;
  padding:0 18px; border-bottom:1px solid var(--border);
  background:rgba(246,248,251,.95);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:30;
}
.hamb{display:none}
.tabs{
  display:inline-flex; gap:4px; padding:4px; border-radius:14px;
  background:var(--panel); border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.tab{
  padding:9px 12px; border-radius:12px;
  color:var(--muted); cursor:pointer;
  border:1px solid transparent; background:transparent;
}
.tab.active{
  background:var(--panel2);
  color:var(--text);
  border-color:var(--border);
}
.crumb{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:14px;
  background:var(--panel); border:1px solid var(--border);
}
.workspace-switcher{
  position:relative;
}
.workspace-switcher__trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  min-height:32px;
  width:170px;
  max-width:170px;
}
.workspace-switcher__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--muted);
  text-transform:uppercase;
}
.workspace-switcher__current-avatar{
  position:relative;
  margin-left:10px;
  width:24px;
  height:24px;
  border-radius:7px;
  border:1px solid #dbe5f1;
  background:#eef4ff;
  color:#1d4ed8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  line-height:1;
  overflow:hidden;
  flex:0 0 auto;
}
.workspace-switcher__current-avatar.has-image{
  background:#fff;
}
.workspace-switcher__current-avatar .workspace-switcher__avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:transparent;
}
.workspace-switcher__value{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.workspace-switcher__chevron{
  font-size:12px;
  color:var(--muted);
  margin-left:auto;
}
.workspace-switcher__panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:min(480px, calc(100vw - 48px));
  max-height:min(70vh, 540px);
  overflow:auto;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:0 16px 34px rgba(15,23,42,.18);
  z-index:65;
  opacity:0;
  transform:translateY(6px) scale(.985);
  pointer-events:none;
  transition:opacity .17s ease, transform .17s ease;
}
.workspace-switcher__panel.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.workspace-switcher__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 8px;
}
.workspace-switcher__header strong{
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.workspace-switcher__create{
  position:relative;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  cursor:pointer;
}
.workspace-switcher__create:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.workspace-switcher__create[data-pending-tooltip]:disabled:hover::after{
  content:attr(data-pending-tooltip);
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  padding:5px 8px;
  border-radius:8px;
  border:1px solid #dbe3f2;
  background:rgba(248,250,252,.98);
  color:#475569;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 10px 20px rgba(15,23,42,.1);
  z-index:8;
}
.workspace-switcher__search-wrap{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:0 2px 8px;
}
.workspace-switcher__quota{
  padding:0 2px 8px;
  font-size:11px;
  font-weight:600;
  color:#64748b;
}
.workspace-switcher__quota.is-at-limit{
  color:#b45309;
}
.workspace-switcher__search{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  height:34px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  padding:0 10px;
  font-size:13px;
  outline:none;
}
.workspace-switcher__search:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.workspace-switcher__sort-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 112px;
}
.workspace-switcher__sort-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#64748b;
  padding-left:2px;
}
.workspace-switcher__sort{
  width:100%;
  height:34px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  padding:0 28px 0 10px;
  font-size:12px;
  font-weight:600;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 14px,
    calc(100% - 9px) 14px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.workspace-switcher__sort:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
@media (max-width: 640px){
  .workspace-switcher__search-wrap{
    flex-direction:column;
    align-items:stretch;
  }
  .workspace-switcher__sort-wrap{
    flex:0 0 auto;
  }
}
.workspace-switcher__create-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 8px;
  margin:0;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  overflow:hidden;
  opacity:0;
  transform:translateY(-10px);
  max-height:0;
  transition:opacity .18s cubic-bezier(.22,.9,.24,1), transform .18s cubic-bezier(.22,.9,.24,1), max-height .18s cubic-bezier(.22,.9,.24,1), padding .18s cubic-bezier(.22,.9,.24,1), margin .18s cubic-bezier(.22,.9,.24,1), border-color .18s ease, background .18s ease;
  will-change:opacity, transform, max-height;
}
.workspace-switcher__create-form.is-open{
  padding:8px;
  margin:0 0 10px;
  border-color:var(--border);
  background:var(--panel2);
  opacity:1;
  transform:translateY(0);
  max-height:220px;
}
.workspace-switcher__create-form.is-pending .workspace-switcher__create-input{
  background:#f8fafc;
  color:#64748b;
  cursor:not-allowed;
}
.workspace-switcher__create-form.is-pending .workspace-switcher__create-submit{
  background:#f8fafc;
  border-color:#dbe3f2;
  color:#94a3b8;
}
.workspace-switcher__create-input{
  width:100%;
  min-width:0;
  height:34px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:var(--text);
  padding:0 10px;
  font-size:13px;
  outline:none;
}
.workspace-switcher__create-input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.workspace-switcher__create-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}
.workspace-switcher__create-submit,
.workspace-switcher__create-cancel{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:9px;
  font-size:12px;
  font-weight:700;
  height:30px;
  padding:0 10px;
  cursor:pointer;
}
.workspace-switcher__create-submit{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
.workspace-switcher__create-submit:disabled,
.workspace-switcher__create-cancel:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.workspace-switcher__create-error{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:#b91c1c;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:8px;
  padding:6px 8px;
}
.workspace-switcher__create-error.is-pending{
  color:#475569;
  background:#f8fafc;
  border-color:#dbe3f2;
}
.workspace-switcher__request-more{
  border:1px solid #f59e0b;
  background:#fffbeb;
  color:#92400e;
  border-radius:8px;
  height:24px;
  padding:0 8px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.workspace-switcher__request-more:hover:not(:disabled){
  background:#fef3c7;
}
.workspace-switcher__request-more:disabled{
  opacity:.7;
  cursor:not-allowed;
}
.workspace-switcher__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:8px;
  transition:opacity .16s ease, transform .16s ease;
}
.workspace-switcher__grid.is-page-leave-next{
  opacity:0;
  transform:translateX(-8px);
}
.workspace-switcher__grid.is-page-leave-prev{
  opacity:0;
  transform:translateX(8px);
}
.workspace-switcher__grid.is-page-enter-next{
  opacity:0;
  transform:translateX(8px);
}
.workspace-switcher__grid.is-page-enter-prev{
  opacity:0;
  transform:translateX(-8px);
}
.workspace-switcher__pager{
  margin-top:10px;
  padding:0 2px 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.workspace-switcher__pager-btn{
  height:28px;
  min-width:62px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.workspace-switcher__pager-btn:hover:not(:disabled){
  background:#f8fafc;
  border-color:#bfdbfe;
  box-shadow:0 8px 16px rgba(15,23,42,.08);
}
.workspace-switcher__pager-btn:active:not(:disabled){
  transform:translateY(1px);
}
.workspace-switcher__pager-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.workspace-switcher__pager-label{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.workspace-switcher__item{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:12px;
  padding:10px;
  text-align:left;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.workspace-switcher__item:hover{
  border-color:#bfdbfe;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.workspace-switcher__item:focus-visible,
.workspace-switcher__item.is-keyboard-focus{
  outline:none;
  border-color:#3b82f6;
  background:#fff;
  box-shadow:0 0 0 2px rgba(59,130,246,.22), 0 10px 24px rgba(15,23,42,.08);
}
.workspace-switcher__item.is-active{
  border-color:#d3dfef;
  background:#f8fbff;
  box-shadow:0 8px 24px rgba(15,23,42,.07), 0 0 0 2px rgba(37,99,235,.18);
}
.workspace-switcher__item.is-view-only{
  background:#f8fafc;
}
.workspace-switcher__item.is-locked{
  opacity:.6;
  cursor:not-allowed;
}
.workspace-switcher__avatar{
  position:relative;
  overflow:hidden;
  width:32px;
  height:32px;
  border-radius:10px;
  background:#dbeafe;
  color:#1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  flex-shrink:0;
}
.workspace-switcher__avatar.has-image{
  color:#1d4ed8;
}
.workspace-switcher__avatar-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:transparent;
}
.workspace-switcher__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.workspace-switcher__name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.workspace-switcher__chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}
.workspace-switcher__chip{
  border-radius:999px;
  border:1px solid #dbe3f2;
  background:#fff;
  color:#64748b;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  padding:2px 7px;
  line-height:1.35;
}
.workspace-switcher__chip-icon{
  width:12px;
  height:12px;
  display:block;
  flex:0 0 auto;
}
.workspace-switcher__chip-label{
  line-height:1.2;
}
.workspace-switcher__chip.is-role-owner{
  border-color:#bfdbfe;
  color:#1d4ed8;
  background:#f1f6ff;
}
.workspace-switcher__chip.is-role-editor{
  border-color:#a7f3d0;
  color:#047857;
  background:#f1fdf7;
}
.workspace-switcher__chip.is-role-viewer{
  border-color:#e2e8f0;
  color:#64748b;
  background:#f8fafc;
}
.workspace-switcher__empty{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:12px;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}
.notes-toggle{
  position:relative;
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.notes-toggle svg{
  width:18px;
  height:18px;
}
.notes-toggle:hover{
  background:var(--panel2);
  color:var(--text);
}
.notes-toggle.has-new::after{
  content:"";
  position:absolute;
  top:4px;
  right:4px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 2px #fff;
}
.preview-device-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:12px;
}
.preview-device-toggle{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.preview-device-toggle svg{
  width:20px;
  height:20px;
  color:var(--muted);
}
.preview-device-toggle:hover{
  background:var(--panel2);
  border-color:var(--border);
}
.preview-device-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:220px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 18px 40px rgba(15,23,42,.15);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:40;
}
.preview-device-hint{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  padding:6px 10px;
  border-radius:8px;
  background:var(--panel);
  border:1px solid var(--border);
  font-size:0.75rem;
  color:var(--muted);
  box-shadow:0 12px 20px rgba(15,23,42,0.2);
  white-space:nowrap;
  transform:translateY(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.preview-device-control:hover .preview-device-hint,
.preview-device-control:focus-within .preview-device-hint,
.preview-device-menu button[aria-pressed="true"] + .preview-device-hint{
  opacity:1;
  transform:translateY(0);
}
.preview-device-menu__icon{
  width:32px;
  height:32px;
  color:var(--muted);
}
.preview-device-menu__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.preview-device-menu button{
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--text);
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.preview-device-menu button:hover,
.preview-device-menu button:focus-visible{
  background:var(--panel2);
}
.preview-device-menu button[aria-pressed="true"]{
  border:1px solid rgba(15,23,42,.08);
  background:var(--panel2);
}
.preview-device-menu__label{
  font-weight:600;
  font-size:0.9rem;
  color:var(--text);
}
.preview-device-menu__scale{
  font-size:0.75rem;
  color:var(--muted);
}
.preview-scroll-btn{
  position:absolute;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  right:12px;
  width:36px;
  height:36px;
  border-radius:12px;
  background:rgba(15,23,42,0.18);
  color:#fff;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,0.25);
  transition:transform 0.16s ease, opacity 0.16s ease;
}
.preview-scroll-btn:hover{
  transform:translateY(-2px);
}
.preview-context-fab{
  position:absolute;
  left:12px;
  right:auto;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:50px;
  height:50px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(255,255,255,0.92);
  color:#334155;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(15,23,42,0.18);
  transition:background 0.16s ease, color 0.16s ease, transform 0.16s ease;
  z-index:32;
  pointer-events:auto;
}
.preview-context-fab svg{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}
.preview-context-fab .preview-context-fab__icon--compass{
  display:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.preview-context-fab.is-visual-active{
  background:rgba(37,99,235,0.14);
  border-color:rgba(37,99,235,0.42);
  color:#1d4ed8;
}
.preview-context-fab.is-visual-active .preview-context-fab__icon--dots{
  display:none;
}
.preview-context-fab.is-visual-active .preview-context-fab__icon--compass{
  display:block;
}
.preview-context-fab:hover,
.preview-context-fab:focus-visible{
  background:#ffffff;
  color:#0f172a;
  transform:translateY(-1px);
}
.preview-context-fab.is-visual-active:hover,
.preview-context-fab.is-visual-active:focus-visible{
  background:#dbeafe;
  color:#1e40af;
}
@media (max-width: 980px), (hover: none), (pointer: coarse) {
  .preview-context-fab{
    display:inline-flex;
  }
}
.preview-device-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.15);
  z-index:20;
}
.grow{flex:1}
.actions{display:flex; align-items:center; gap:10px}
.topbar-history-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.topbar-history-btn{
  font-size:15px;
  font-weight:700;
  line-height:1;
}
.topbar-history-btn:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.topbar-history-changes{
  position:relative;
}
.topbar-history-changes-btn{
  position:relative;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.topbar-history-changes-btn.is-open{
  background:var(--panel2);
}
.topbar-history-changes__icon{
  width:18px;
  height:18px;
  display:block;
}
.topbar-history-changes__badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  border:1px solid #fff;
  background:var(--accent);
  color:#fff;
  font-size:10px;
  line-height:14px;
  font-weight:700;
  text-align:center;
  pointer-events:none;
}
.topbar-history-changes__popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:220px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:0 16px 36px rgba(15,23,42,.16);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.topbar-history-changes__title{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.topbar-history-changes__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.topbar-history-changes__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel2);
  font-size:12px;
  color:var(--muted);
}
.topbar-history-changes__row strong{
  color:var(--text);
  font-size:13px;
  font-weight:700;
}
.topbar-history-changes__empty{
  padding:6px 8px;
  border:1px dashed var(--border);
  border-radius:10px;
  font-size:12px;
  color:var(--muted);
  text-align:left;
}
.topbar-history-changes__hint{
  font-size:11px;
  color:var(--muted);
}
.creative-ad-trigger{
  position:relative;
  width:64px;
  height:64px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.creative-ad-trigger__icon{
 width: 26px;
  height: 26px;
  display:block;
}
.creative-ad-trigger__ring{
  position:absolute;
  width:42px;
  height:42px;
  left:50%;
  top:50%;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.98);
  transition:opacity 0.16s ease, transform 0.16s ease;
  pointer-events:none;
}
.creative-ad-trigger__track,
.creative-ad-trigger__progress{
  fill:none;
  stroke-width:2;
}
.creative-ad-trigger__track{
  stroke:rgba(15,23,42,0.14);
}
.creative-ad-trigger__progress{
  stroke:var(--accent);
  stroke-linecap:butt;
  stroke-linejoin:round;
  stroke-dasharray:0 999;
  transition:stroke-dasharray 0.16s ease;
}
.creative-ad-trigger.is-busy .creative-ad-trigger__ring{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.creative-ad-trigger.is-busy .creative-ad-trigger__icon{
  color:var(--accent);
}
.creative-ad-trigger .assistant__history-tooltip{
  top:50%;
  right:74px;
  transform:translateY(calc(-50% + 4px)) scale(0.98);
}
.creative-job-chip{
  position:fixed;
  top:0;
  left:0;
  z-index:180;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:6px 12px;
  border-radius:999px;
  font-size:0.74rem;
  letter-spacing:0.01em;
  cursor:pointer;
  transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.creative-job-chip[hidden]{
  display:none;
}
.creative-job-chip__status{
  color:var(--muted);
}
.creative-job-chip.is-done{
  background:#ecfdf3;
  border-color:#bbf7d0;
  color:#166534;
}
.creative-job-chip.is-done .creative-job-chip__status{
  color:inherit;
}
.creative-job-chip.is-failed{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#9f1239;
}
.creative-job-chip.is-failed .creative-job-chip__status{
  color:inherit;
}
.creative-job-chip__close{
  border:none;
  background:transparent;
  color:inherit;
  font-size:0.7rem;
  line-height:1;
  padding:2px 4px;
  border-radius:8px;
  cursor:pointer;
}
.creative-job-chip__close:hover{
  background:rgba(15,23,42,0.06);
}
.creative-ad-trigger:hover .assistant__history-tooltip,
.creative-ad-trigger:focus-visible .assistant__history-tooltip{
  transform:translateY(-50%) scale(1);
}
.creative-ad-trigger:hover .assistant__history-tooltip,
.creative-ad-trigger:focus-visible .assistant__history-tooltip{
  opacity:1;
}
.creative-ad-trigger:disabled .assistant__history-tooltip{
  display:none;
}
.iconbtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid var(--border); background:var(--panel);
  display:grid; place-items:center; color:var(--muted);
  cursor:pointer;
}
.iconbtn:hover{background:var(--panel2)}
.btn{
  height:38px; padding:0 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel);
  cursor:pointer; font-weight:600;
}
.btn:hover{background:var(--panel2)}
.btn.primary{
  border:none;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; box-shadow:0 14px 30px rgba(249,115,22,.22);
}
.btn.primary:hover{filter:saturate(1.05) brightness(1.02)}
/* Content */
.content{
  padding:5px 5px 13px;
  width:100%;
  max-width:none;
  margin:0;
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero{
  display:flex; align-items:flex-start; gap:20px;
  padding:22px 24px;
  border-color:transparent;
  box-shadow:none;
}
.hero--with-delete{
  position:relative;
  padding-bottom:64px;
}
.appicon{
  width:92px; height:92px; border-radius:20px;
  background:transparent;
  display:grid; place-items:center; border:0;
  position:relative;
  cursor:pointer;
  box-shadow:none;
  margin-top:20px;
}
.appicon.has-image{
  background:transparent;
}
.appicon__img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  border-radius:10px;
}
.appicon__img[hidden]{
  display:none;
}
.appicon__emoji{
  font-size:30px; line-height:1;
}
.appicon__action{
  position:absolute;
  width:28px;height:28px;border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.92);
  color:#111;
  display:grid;place-items:center;
  box-shadow:0 8px 16px rgba(15,23,42,.12);
  padding:0;
  box-sizing:border-box;
  opacity:0; pointer-events:none;
  transform:translateY(4px);
  transition:opacity 160ms ease, transform 160ms ease;
  cursor: pointer;
}
.workspace-rename-icon.workspace-rename-icon--edit{
  display: flex;
  width: 20px;
}
.appicon__action{
  left:50%;
  top:50%;
}
.appicon__action svg{
  width:15px;height:15px;
}
.appicon:hover .appicon__action,
.appicon:focus-within .appicon__action{
  opacity:1; pointer-events:auto;
  transform:translate(-50%, -50%);
}
.appicon__action{
  transform:translate(-50%, calc(-50% + 4px));
}
.hero h1{margin:0; font-size:26px; line-height:1.15; letter-spacing:0}
.pencil{color:var(--muted); font-weight:600; margin-left:6px}
.workspace-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
  margin-top:17px;
}
.workspace-title-heading{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  min-width:0;
}
.workspace-rename-btn{
display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 20px;
  color: green;
}
.workspace-rename-icon--done{
  display:none;
}
#workspaceTitle.is-editing .workspace-rename-icon--edit{
  display:none;
}
#workspaceTitle.is-editing .workspace-rename-icon--done{
  display:inline;
}
.workspace-rename-icon.workspace-rename-icon--edit{
  width:19px;
}
.workspace-rename-btn:disabled{
  cursor:not-allowed;
  opacity:0.6;
}
.workspace-title-row .badge{
  flex:0 0 auto;
  font-size:0.8rem;
  padding:6px 10px;
}
#workspaceTitle.is-editing #workspaceNameText{
  outline:none;
  padding-bottom:2px;
  position:relative;
  display:inline-block;
}
#workspaceNameText{
  white-space:nowrap;
}
#workspaceTitle.is-editing #workspaceNameText::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  animation:workspace-underline-reveal 0.24s ease forwards;
}
@keyframes workspace-underline-reveal{
  to{transform:scaleX(1);}
}
.workspace-rename-status{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.workspace-description-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  max-width:860px;
}
.workspace-description-text{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.workspace-description-edit-btn{
  flex:0 0 auto;
  margin-top:1px;
}
.hero p{margin:7px 0 0; color:var(--muted); max-width:860px}
.workspace-description-row .workspace-description-text{
  margin:0;
  max-width:none;
}
.meta{margin-top:10px; color:#94a3b8; font-size:13px}
.hero__right{margin-left:auto; display:flex; align-items:flex-start; gap:10px}
.star{width:36px;height:36px;border-radius:12px;border:1px solid var(--border); background:var(--panel2)}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.hero-delete-btn{
  position:absolute;
  right:16px;
  bottom:16px;
  height:29px;
  border-radius:8px;
  border:1px solid rgba(220,38,38,.08);
  background:rgba(220,38,38,.08);
  color:rgba(153,27,27,.82);
  font-size:10px;
  font-weight:700;
  letter-spacing:.01em;
  padding:0 11px;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.hero-delete-btn:hover:not(:disabled){
  background:rgba(220,38,38,.11);
  border-color:rgba(220,38,38,.16);
  color:rgba(127,29,29,.88);
}
.hero-delete-btn:active:not(:disabled){
  transform:translateY(.5px);
}
.hero-delete-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel2);
  color:var(--text); font-weight:600;
}
.badge{
  font-size:12px; font-weight:700;
  padding:4px 8px; border-radius:999px;
  background:rgba(34,197,94,.12); color:#166534;
  border:1px solid rgba(34,197,94,.18);
}
.grid2{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  margin-top:10px;
}
.section{padding:16px}
.section h3{margin:0; font-size:16px}
.section p{margin:6px 0 14px; color:var(--muted)}
.dashboard-settings-card{
  min-height:196px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  border-color:rgba(148,163,184,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)),
    var(--panel);
  box-shadow:none;
}
.dashboard-settings-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.dashboard-settings-card__copy{
  min-width:0;
}
.dashboard-settings-card__copy h3{
  font-size:17px;
  line-height:1.2;
  letter-spacing:0;
}
.dashboard-settings-card__copy p{
  margin:8px 0 0;
  max-width:460px;
  font-size:14px;
  line-height:1.45;
}
.dashboard-settings-card__meta{
  color:#94a3b8!important;
  font-size:12px!important;
  margin-top:12px!important;
}
.dashboard-settings-card__icon{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:#0f8f35;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  box-shadow:none;
}
button.dashboard-settings-card__icon{
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
button.dashboard-settings-card__icon:hover{
  background:#f8fafc;
  border-color:rgba(34,197,94,.30);
}
.dashboard-settings-card__icon--static{
  color:#0b84ff;
}
.dashboard-settings-card__icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-select-control{
  min-height:58px;
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.dashboard-select-control__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(14,165,233,.10);
  color:#0284c7;
  flex:0 0 auto;
}
.dashboard-select-control__icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-select-control__body{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dashboard-select-control__label{
  font-size:11px;
  font-weight:700;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.dashboard-native-select{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.dashboard-select-control select{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#0f172a;
  font-size:15px;
  font-weight:700;
  padding:0;
}
.dashboard-visibility-menu{
  position:relative;
  width:100%;
}
.dashboard-visibility-menu__trigger{
  width:100%;
  min-height:25px;
  border:0;
  background:transparent;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}
.dashboard-visibility-menu__trigger:disabled{
  cursor:not-allowed;
  opacity:.65;
}
.dashboard-visibility-menu__trigger svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .16s ease;
}
.dashboard-visibility-menu.is-open .dashboard-visibility-menu__trigger svg{
  transform:rotate(180deg);
}
.dashboard-visibility-menu__list{
  position:absolute;
  z-index:30;
  left:-46px;
  right:-12px;
  top:calc(100% + 12px);
  padding:6px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.12);
}
.dashboard-visibility-menu__list[hidden]{
  display:none;
}
.dashboard-visibility-menu__list button{
  width:100%;
  min-height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#334155;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.dashboard-visibility-menu__list button:hover,
.dashboard-visibility-menu__list button[aria-selected="true"]{
  background:#f1f5f9;
  color:#0f172a;
}
.dashboard-visibility-menu__list button[aria-selected="true"]{
  box-shadow:inset 3px 0 0 #0ea5e9;
}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.select{
  flex:1; min-width:240px;
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:12px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.select select{border:none; outline:none; background:transparent; width:100%}
.check{display:flex; align-items:center; gap:10px; color:var(--muted); margin-top:10px}
.check input{width:16px;height:16px}
.check__text{display:flex; flex-direction:column; gap:2px}
.check__title{color:var(--text); font-weight:600}
.check__hint{font-size:12px; color:var(--muted)}
.check--coming-soon{opacity:.65; cursor:not-allowed}
.check--coming-soon input{pointer-events:none; cursor:not-allowed}
.coming-soon-note{margin-top:10px; color:var(--muted); font-size:12px; opacity:.75}
.inviteBtns{display:flex; gap:10px; flex-wrap:wrap}
.dashboard-invite-actions{
  gap:12px;
  margin-top:2px;
}
.dashboard-action-btn{
  height:42px;
  border-radius:14px;
  padding:0 18px;
  font-size:13px;
  font-weight:800;
  letter-spacing:0;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.dashboard-action-btn--secondary{
  background:#fff!important;
  border:1px solid rgba(148,163,184,.30)!important;
  color:#0f172a;
  box-shadow:none;
}
.dashboard-action-btn--secondary:hover:not(:disabled){
  border-color:rgba(15,23,42,.18)!important;
  background:#f8fafc!important;
}
.dashboard-action-btn--primary{
  border:none!important;
  background:#ff7a1a!important;
  color:#fff;
  box-shadow:none;
}
.dashboard-action-btn--primary:hover:not(:disabled){
  background:#f36d12!important;
}
.dashboard-invite-note{
  margin:2px 0 0!important;
  color:#64748b!important;
  font-size:12px!important;
  line-height:1.45;
}
.dashboard-members-card{
  padding:20px;
  border-color:rgba(148,163,184,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)),
    var(--panel);
  box-shadow:none;
}
.dashboard-members-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.dashboard-members-card__copy h3{
  font-size:17px;
  line-height:1.2;
  letter-spacing:0;
}
.dashboard-members-card__copy p{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.45;
}
.dashboard-members-card .presence-legend{
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.dashboard-members-card .presence-legend .presence-dot{
  margin-right:2px;
}
.dashboard-members-table-wrap{
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.btn.outline{background:var(--panel2)}
.wide{margin-top:10px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.wide p{margin:6px 0 0; color:var(--muted)}
.hideBtn{height:34px; padding:0 12px; border-radius:12px; border:1px solid var(--border); background:var(--panel2); cursor:pointer; font-weight:600}
.hideBtn:hover{background:#fff}
.access-blocker{
  display:none;
  margin:12px 12px 0;
}
.access-blocker.is-active{display:block;}
.access-blocker__card{
  background:#fffaf0;
  border:1px solid #fed7aa;
  border-radius:12px;
  padding:10px 12px;
  box-shadow:0 4px 12px rgba(15,23,42,.05);
  max-width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.access-blocker__title{font-weight:700; font-size:14px; margin:0; color:#9a3412;}
.access-blocker__text{color:#a16207; margin:2px 0 0; font-size:13px;}
.access-blocker__actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.access-empty{margin:12px 12px 0;}
.access-empty__card{
  background:#fffaf0;
  border:1px solid #fed7aa;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.access-empty__title{font-weight:700;font-size:14px;color:#9a3412;}
.access-empty__text{color:#a16207;font-size:13px;}
.access-empty__actions{display:flex;gap:8px;}
/* Responsive */
@media (max-width: 900px){
  .hero{
    gap:16px;
    padding:22px;
  }
  .hero--with-delete{
    padding-bottom:58px;
  }
  .appicon{
    width:78px;
    height:78px;
    margin-top:8px;
  }
  .workspace-title-row{
    margin-top:8px;
  }
  .hero h1{
    font-size:24px;
  }
  .workspace-description-text{
    max-width:520px;
  }
}
@media (max-width: 720px){
  .hero{
    flex-direction:column;
    gap:14px;
    padding:24px;
  }
  .hero--with-delete{
    padding-bottom:24px;
  }
  .appicon{
    width:78px;
    height:78px;
    margin-top:0;
  }
  .workspace-title-row{
    margin-top:0;
  }
  .workspace-description-row{
    margin-top:10px;
    max-width:100%;
  }
  .workspace-description-text{
    max-width:100%;
  }
  .hero__right{
    position:absolute;
    right:22px;
    top:22px;
    margin-left:0;
  }
  .hero-delete-btn{
    position:static;
    margin-top:2px;
    align-self:flex-start;
  }
}
@media (max-width: 560px){
  .hero{
    padding:22px;
    gap:13px;
  }
  .appicon{
    width:72px;
    height:72px;
  }
  .hero h1{
    font-size:24px;
  }
  .workspace-title-row{
    gap:9px;
  }
  .workspace-description-row{
    gap:8px;
  }
  .workspace-description-text{
    font-size:14px;
    line-height:1.45;
  }
  .crumb{display:none}
  .tabs{flex:1}
  .tab{flex:1}
}
/* Overlay */
.overlay{
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:40;
}
.overlay.show{display:block}


/* ===== Left Builder Chat (Base44-like) ===== */
.frame{
  display:grid;
  grid-template-columns: var(--assistant-w) var(--sidebar-w) 1fr;
  height:100dvh;
  min-height:100dvh;
  max-width:100vw;
  overflow:hidden;
}
.frame > .app{grid-column: 2 / -1;}
.assistant{
  background:var(--panel);
  border-right:1px solid var(--border);
  height:100vh;
  position:sticky; top:0;
  display:flex; flex-direction:column;
  min-width:var(--assistant-w);
  width:var(--assistant-w);
  transition: transform .24s cubic-bezier(.16,1,.3,1), width .24s cubic-bezier(.16,1,.3,1), min-width .24s cubic-bezier(.16,1,.3,1), max-width .24s cubic-bezier(.16,1,.3,1), padding .18s ease, box-shadow .24s cubic-bezier(.16,1,.3,1);
}

/* prevent initial flash until JS applies persisted state */
body.onium-workspace-dashboard.ui-init .sidebar,
body.onium-workspace-dashboard.ui-init .assistant{
  transition: none !important;
  opacity: 0;
  visibility: hidden;
}
body.onium-workspace-dashboard.ui-init .frame{
  opacity:0;
  visibility:hidden;
  transition:none !important;
}
body.onium-workspace-dashboard.ui-init{
  visibility:hidden;
}
body.onium-workspace-dashboard.studio-soft-navigating .frame{
  opacity:.08;
  transform:translateY(4px) scale(.998);
  transition:opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.assistant__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid var(--border);
  background:var(--panel2);
}
.assistant__brand{display:flex; gap:10px; align-items:center}
.assistant__logo-link{
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:16px;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
}
.assistant__logo-link:hover{
  background:rgba(15,23,42,.04);
  transform:translateY(-1px);
}
.assistant__logo-link:active{transform:translateY(0) scale(.98)}
.assistant__logo-link:focus-visible{
  outline:2px solid rgba(124,58,237,.38);
  outline-offset:3px;
}
.assistant__logo{
  position:relative;
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:visible;
  background:conic-gradient(from 215deg,#ec4899 0 24%,#8b5cf6 38% 66%,#38bdf8 82%,#ec4899 100%);
  box-shadow:0 9px 20px rgba(124,58,237,.22);
}
.assistant__logo::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  background:var(--panel2,#fff);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);
}
.assistant__logo::after{
  content:"";
  position:absolute;
  right:-3px;
  bottom:4px;
  width:13px;
  height:13px;
  border-radius:3px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95) 0 42%,transparent 43% 57%,rgba(255,255,255,.95) 58%),
    linear-gradient(180deg,rgba(255,255,255,.95) 0 42%,transparent 43% 57%,rgba(255,255,255,.95) 58%),
    linear-gradient(135deg,#0f172a,#312e81);
  box-shadow:0 5px 11px rgba(15,23,42,.20);
}
.assistant__title{font-weight:800}
.assistant__sub{font-size:12px;color:var(--muted)}
.assistant__actions{display:flex; align-items:center; gap:8px}
.assistant__collapse{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--border); background:#fff;
  cursor:pointer; color:var(--muted);
}
.assistant__collapse:hover{background:var(--panel2)}
.assistant__history-btn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--border); background:#fff;
  cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.assistant__history-btn svg{width:18px;height:18px;display:block}
.assistant__history-btn:hover{background:var(--panel2)}
.assistant__history-btn.is-disabled{
  opacity:0.4;
  cursor:default;
}
.assistant__history-btn.is-disabled:hover{background:#fff}
.assistant__history-tooltip{
  position:absolute;
  top:2px;
  right:38px;
  padding:6px 10px;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:11px;
  font-weight:600;
  border:1px solid #e2e8f0;
  box-shadow:0 10px 20px rgba(15,23,42,.12);
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px) scale(0.98);
  transition:opacity 160ms ease, transform 160ms ease;
  pointer-events:none;
}
.assistant__history-tooltip::after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  width:10px;
  height:10px;
  background:#fff;
  border-right:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  transform:translateY(-50%) rotate(45deg);
}
.assistant__history-btn:hover .assistant__history-tooltip,
.assistant__history-btn:focus-visible .assistant__history-tooltip{
  opacity:1;
  transform:translateY(0) scale(1);
}
.assistant__history-btn.is-disabled .assistant__history-tooltip{
  display:none;
}
.assistant__feed{
  padding:14px 14px 28px;
  overflow:auto;
  display:flex; flex-direction:column; gap:10px;
  flex:1;
}
.bubble{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
}
.bubble--user{background:#eef2ff}
.bubble--ai{background:#f8fafc}
.bubble--sys{background:#fff}
.bubble--tool{background:#fff}
.sysline{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; margin:4px 0}
.toolitem{font-size:12px; color:var(--muted); padding:4px 0}
.credits{
  margin-top:auto;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:12px;
}
.credits__title{font-weight:800; margin-bottom:8px}
.credits__bar{height:10px;border-radius:999px;background:var(--bg); overflow:hidden; border:1px solid var(--border)}
.credits__bar span{display:block;height:100%; background:linear-gradient(135deg,var(--accent),var(--accent2))}
.credits__meta{margin-top:8px;color:var(--muted);font-size:12px}
.credits__btn{
  margin-top:10px; width:100%; height:36px;
  border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-weight:800; cursor:pointer;
}
.assistant__composer{
  padding:12px;
  border-top:1px solid #e2e8f0;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#fff;
  position:relative;
}
.assistant__resize-handle{
  position:absolute;
  top:0;
  right:0;
  width:6px;
  height:100%;
  cursor:ew-resize;
  background:transparent;
  touch-action:none;
}
.assistant__resize-handle::after{
  content:"";
  position:absolute;
  right:2px;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:2px;
  background:transparent;
}
.assistant__resize-handle:hover::after{
  background:rgba(15,23,42,0.15);
}
@media (max-width: 900px){
  .assistant__resize-handle{display:none;}
}
.builder-input{
  border: 1px solid #cacfd4;
  border-radius:18px;
  padding:12px;
  background: #f2f2f299;
  /* box-shadow:0 -10px 20px 8px rgba(248,250,252,1); */
}
.builder-input__field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  /* background:#fff; */
  border-radius:14px;
  /* border:1px solid #e2e8f0; */
  position:relative;
  overflow:hidden;
}
.builder-input__field textarea{
  flex:1;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  min-height:113px;
  border:none;
  outline:none;
  padding:10px 56px 12px 12px;
  font-family:var(--studio-text-font);
  font-size:0.94rem;
  font-weight:500;
  letter-spacing:0;
  text-align:left;
  padding-top:10px;
  background:transparent;
  color:#0f172a;
  resize:none;
  line-height:1.72;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  caret-color:#3b82f6;
}
.builder-input__field textarea[dir="rtl"]{
  font-family:var(--studio-rtl-font);
  text-align:right;
  line-height:1.9;
}
.builder-input__field textarea[dir="ltr"]{
  font-family:var(--studio-latin-font);
  text-align:left;
  line-height:1.65;
}
.builder-input__field textarea::-webkit-scrollbar{
  display:none;
}
.builder-input__field textarea::placeholder{
  font-family:var(--studio-text-font);
  font-weight:500;
  color:#94a3b8;
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}
.builder-send{
  position:absolute;
  right:11px;
  top:11px;
  width:32px;
  height:32px;
  border-radius:11px;
  border:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(145deg,#eef4ff,#f8fbff);
  color:#64748b;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
  box-shadow:0 10px 22px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
}
.builder-send__icon{
  width:17px;
  height:17px;
  display:block;
  transform:translateX(0);
  transition:transform 0.16s ease;
}
.builder-send__stop{
  width:10px;
  height:10px;
  border-radius:3px;
  background:currentColor;
  display:block;
}
.builder-send.is-active{
  background:linear-gradient(145deg,#111827,#1f2937);
  color:#fff;
  border-color:rgba(15,23,42,0.18);
  box-shadow:0 12px 24px rgba(15,23,42,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
}
.builder-send.is-active:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(15,23,42,0.26), inset 0 1px 0 rgba(255,255,255,0.12);
}
.builder-send.is-active:hover .builder-send__icon{
  transform:translateX(2px);
}
.builder-send:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(59,130,246,0.22), 0 12px 24px rgba(15,23,42,0.18);
}
.builder-send:disabled{
  opacity:0.62;
  cursor:not-allowed;
  transform:none;
  box-shadow:0 6px 14px rgba(15,23,42,0.08);
}
.builder-send.is-loading{
  background:linear-gradient(145deg,#64748b,#475569);
  color:#fff;
}
.builder-send.is-stop{
  background:linear-gradient(145deg,#334155,#1f2937);
  color:#fff;
  cursor:pointer;
}
.builder-send.is-stop:hover{
  background:#1f2937;
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(15,23,42,0.24);
}
.builder-send.is-stop:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(15,23,42,0.18);
}
.builder-gear,
.builder-plus,
.builder-visual,
.builder-discuss,
.builder-mode-pill,
.builder-mic{
  height:26px;
  border-radius:7px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#111827;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:0.72rem;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(15,23,42,0.08);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.builder-gear:hover,
.builder-plus:hover,
.builder-visual:hover,
.builder-discuss:hover,
.builder-mode-pill:hover,
.builder-mic:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(15,23,42,0.12);
}
.builder-gear:active,
.builder-plus:active,
.builder-visual:active,
.builder-discuss:active,
.builder-mode-pill:active,
.builder-mic:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(15,23,42,0.08);
}
.builder-gear,
.builder-plus,
.builder-mic{
  width:26px;
  font-size:14px;
}
.builder-visual,
.builder-discuss{
  padding:0 10px;
}
.builder-mode-pill{
  padding:0 10px;
  text-transform:lowercase;
  font-weight:600;
  letter-spacing:0.01em;
  min-width:62px;
  justify-content:center;
}
.builder-mode-pill[data-mode="auto"]{
  border-color:#dbeafe;
  background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(14,165,233,0.1));
  color:#0f172a;
}
.builder-mode-pill[data-mode="build"]{
  border-color:#86efac;
  background:linear-gradient(135deg,rgba(34,197,94,0.14),rgba(74,222,128,0.16));
  color:#14532d;
}
.builder-mode-pill[data-mode="discuss"]{
  border-color:#fde68a;
  background:linear-gradient(135deg,rgba(251,191,36,0.16),rgba(252,211,77,0.18));
  color:#78350f;
}
.builder-mic{
  padding:0;
}
.builder-visual svg,
.builder-discuss svg,
.builder-gear svg,
.builder-mic svg{width:14px;height:14px}
.builder-mic.is-recording{
  border-color:#38bdf8;
  background:linear-gradient(135deg,rgba(56,189,248,0.18),rgba(125,211,252,0.22));
  box-shadow:0 0 0 1px rgba(56,189,248,0.35), 0 10px 16px rgba(14,165,233,0.18);
  color:#0f172a;
}
.voice-box{
  position:absolute;
  right:16px;
  bottom:80px;
  min-width:200px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.35);
  background:rgba(255,255,255,0.72);
  box-shadow:0 18px 34px rgba(15,23,42,0.12);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(6px) scale(0.98);
  pointer-events:none;
  transition:opacity 0.16s ease, transform 0.16s ease;
  z-index:5;
}
.voice-box.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.voice-box__wave{
  width:56px;
  height:26px;
  border-radius:9px;
  background:rgba(15,23,42,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.voice-box__canvas{
  width:100%;
  height:100%;
}
.voice-box__status{
  font-size:0.72rem;
  font-weight:600;
  color:#0f172a;
  letter-spacing:0.01em;
}
.voice-box.is-error .voice-box__status{
  color:#b91c1c;
}
.builder-discuss.is-active{
  border-color:#22d3ee;
  color:#0f172a;
  box-shadow:0 0 0 1px rgba(34,211,238,0.45), 0 0 18px rgba(34,211,238,0.45);
  background:linear-gradient(135deg,rgba(34,211,238,0.14),rgba(56,189,248,0.18));
}
.builder-discuss.is-active svg{
  color:#0f172a;
}
.builder-discuss.is-disabled,
.builder-discuss:disabled{
  opacity:0.45;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  background:#f8fafc;
}
.builder-visual.is-disabled,
.builder-visual:disabled{
  opacity:0.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
  background:#f8fafc;
  border-color:#d7e0ec;
  color:#64748b;
}
.builder-visual.is-disabled:hover,
.builder-visual:disabled:hover{
  transform:none;
  box-shadow:none;
}
.builder-visual.is-active{
  border-color:#3b82f6;
  color:#0f172a;
  box-shadow:0 0 0 1px rgba(59,130,246,0.45), 0 0 16px rgba(59,130,246,0.35);
  background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(147,197,253,0.16));
}
.bubble--discuss{
  white-space:pre-wrap;
  line-height:1.5;
}
.bubble--discuss .bubble__body{
  min-width:0;
}
.bubble--discuss .bubble__body[dir="rtl"],
.bubble--ai.bubble--discuss p[dir="rtl"],
.bubble--ai.bubble--discuss h3[dir="rtl"],
.bubble--ai.bubble--discuss h4[dir="rtl"],
.bubble--ai.bubble--discuss ul[dir="rtl"],
.bubble--ai.bubble--discuss ol[dir="rtl"],
.bubble--ai.bubble--discuss li[dir="rtl"]{
  text-align:right;
}
.bubble--discuss .bubble__body[dir="ltr"],
.bubble--ai.bubble--discuss p[dir="ltr"],
.bubble--ai.bubble--discuss h3[dir="ltr"],
.bubble--ai.bubble--discuss h4[dir="ltr"],
.bubble--ai.bubble--discuss ul[dir="ltr"],
.bubble--ai.bubble--discuss ol[dir="ltr"],
.bubble--ai.bubble--discuss li[dir="ltr"]{
  text-align:left;
}
.bubble--ai.bubble--discuss{
  border-color:transparent;
  background:transparent;
  padding:8px 4px;
  color:#172033;
  box-shadow:none;
}
.bubble--ai.bubble--discuss .bubble__body{
  font-size:0.92rem;
  line-height:1.65;
  letter-spacing:0;
  white-space:normal;
}
.bubble--ai.bubble--discuss p{
  margin:0 0 0.72rem;
}
.bubble--ai.bubble--discuss p:last-child,
.bubble--ai.bubble--discuss ul:last-child,
.bubble--ai.bubble--discuss ol:last-child,
.bubble--ai.bubble--discuss pre:last-child{
  margin-bottom:0;
}
.bubble--ai.bubble--discuss h3,
.bubble--ai.bubble--discuss h4{
  margin:0.15rem 0 0.65rem;
  color:#0f172a;
  font-weight:800;
  line-height:1.18;
  letter-spacing:0;
}
.bubble--ai.bubble--discuss h3{font-size:1.02rem}
.bubble--ai.bubble--discuss h4{font-size:0.95rem}
.bubble--ai.bubble--discuss strong{
  color:#0f172a;
  font-weight:800;
}
.bubble--ai.bubble--discuss ul,
.bubble--ai.bubble--discuss ol{
  margin:0.35rem 0 0.85rem;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.48rem;
}
.bubble--ai.bubble--discuss li{
  position:relative;
  padding-inline-start:1.15rem;
  color:#25324a;
}
.bubble--ai.bubble--discuss ul li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0.62em;
  width:0.42rem;
  height:0.42rem;
  border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  box-shadow:0 0 0 3px rgba(124,58,237,0.1);
}
.bubble--ai.bubble--discuss ol{
  counter-reset:studio-ai-list;
}
.bubble--ai.bubble--discuss ol li{
  counter-increment:studio-ai-list;
  padding-inline-start:1.6rem;
}
.bubble--ai.bubble--discuss ol li::before{
  content:counter(studio-ai-list);
  position:absolute;
  inset-inline-start:0;
  top:0.08rem;
  min-width:1.05rem;
  height:1.05rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eef2ff;
  color:#4338ca;
  font-size:0.64rem;
  font-weight:800;
}
.bubble--ai.bubble--discuss code{
  border:1px solid #dbe5f2;
  border-radius:6px;
  background:#f8fafc;
  color:#0f172a;
  padding:0.08rem 0.32rem;
  font-size:0.84em;
}
.bubble--ai.bubble--discuss pre{
  margin:0.55rem 0 0.85rem;
  padding:0.75rem 0.85rem;
  border-radius:12px;
  border:1px solid #dbe5f2;
  background:#0f172a;
  color:#e5edf8;
  overflow:auto;
  white-space:pre;
}
.bubble--ai.bubble--discuss pre code{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
}
.bubble--user.bubble--discuss{
  align-self:flex-end;
  max-width:92%;
}
.assistant-discuss-card{
  margin-top:0.85rem;
  padding:0.78rem;
  border:1px solid #dbe5f2;
  border-radius:14px;
  background:linear-gradient(135deg,#ffffff 0%,#f8faff 100%);
  box-shadow:0 12px 28px rgba(15,23,42,0.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.85rem;
}
.assistant-discuss-card__copy{
  min-width:0;
}
.assistant-discuss-card__title{
  color:#0f172a;
  font-size:0.84rem;
  font-weight:850;
  line-height:1.2;
}
.assistant-discuss-card__text{
  margin-top:0.18rem;
  color:#64748b;
  font-size:0.75rem;
  line-height:1.35;
}
.assistant-discuss-card__actions{
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex:0 0 auto;
}
.assistant-discuss-card__btn{
  min-height:34px;
  padding:0 0.78rem;
  border:1px solid #dbe5f2;
  border-radius:11px;
  background:#fff;
  color:#334155;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.assistant-discuss-card__btn:hover{
  transform:translateY(-1px);
  border-color:#cbd5e1;
  box-shadow:0 8px 16px rgba(15,23,42,0.08);
}
.assistant-discuss-card__btn.is-primary{
  border-color:#172033;
  background:#172033;
  color:#fff;
  box-shadow:0 10px 18px rgba(15,23,42,0.14);
}
.assistant-docs{
  margin-top:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.assistant-doc{
  border:1px solid #dbe5f2;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}
.assistant-doc__toggle{
  width:100%;
  min-height:40px;
  border:0;
  background:#fff;
  color:#172033;
  padding:0.55rem 0.7rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.7rem;
  cursor:pointer;
  font:inherit;
  text-align:start;
  transition:background 150ms ease;
}
.assistant-doc__toggle:hover{
  background:#f8fafc;
}
.assistant-doc__toggle::after{
  content:"";
  width:0.48rem;
  height:0.48rem;
  border-inline-end:2px solid #64748b;
  border-bottom:2px solid #64748b;
  transform:rotate(45deg);
  transition:transform 150ms ease;
  flex:0 0 auto;
}
.assistant-doc.is-open .assistant-doc__toggle::after{
  transform:rotate(225deg);
}
.assistant-doc__label{
  min-width:0;
  color:#172033;
  font-size:0.8rem;
  font-weight:850;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.assistant-doc__meta{
  margin-inline-start:auto;
  color:#64748b;
  font-size:0.7rem;
  font-weight:800;
  line-height:1.2;
  text-transform:capitalize;
  white-space:nowrap;
}
.assistant-doc__content{
  border-top:1px solid #edf2f7;
  padding:0.7rem;
}
.assistant-doc__body{
  color:#334155;
  font-size:0.78rem;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.assistant-doc__article-link{
  margin-top:0.65rem;
  display:flex;
  align-items:center;
  gap:0.55rem;
  color:#172033;
  font-size:0.78rem;
  font-weight:850;
  line-height:1.25;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.assistant-doc__article-link:hover{
  text-decoration:underline;
}
.assistant-doc__article-image{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:8px;
  object-fit:cover;
  background:#eef2f7;
}
.builder-mic-placeholder{
  width:32px;
  height:32px;
  display:inline-block;
}
.builder-input__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 2px 0;
}
.builder-visual-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.builder-visual-action__label{
  font-size:0.82rem;
  color:#475569;
}
.builder-visual-action__btn{
  border:none;
  border-radius:10px;
  padding:6px 12px;
  background:#111827;
  color:#fff;
  font-size:0.8rem;
  cursor:pointer;
  transition:transform 0.16s ease, box-shadow 0.16s ease;
  box-shadow:0 10px 18px rgba(15,23,42,0.18);
}
.builder-visual-action__buttons{
  display:flex;
  align-items:center;
  gap:8px;
}
.builder-visual-action__btn--ghost{
  background:#fff;
  color:#0f172a;
  border:1px solid #e2e8f0;
  box-shadow:none;
}
.builder-visual-action__btn:active{
  transform:scale(0.98);
}
.builder-visual-action__btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
}
.builder-advanced{
  position:relative;
}
.builder-devbtn{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.builder-devbtn:hover{
  background:var(--accent-soft);
}
.builder-advanced__panel{
  display:none;
  position:absolute;
  top:34px;
  right:0;
  width:280px;
  max-height:260px;
  overflow:auto;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(15,23,42,0.16);
  padding:10px;
  z-index:1200;
}
.builder-advanced__panel.is-open{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.builder-advanced__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.builder-advanced__btn{
  height:28px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size:0.75rem;
  padding:0 10px;
  cursor:pointer;
}
.builder-advanced__btn--ghost{
  background:#fff;
}
.builder-advanced__viewer{
  width:100%;
  min-height:140px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:10px;
  font-size:12px;
  color:#0f172a;
  background:#f8fafc;
  resize:vertical;
}
.builder-advanced__viewer--small{
  min-height:90px;
}
.builder-advanced__hint{
  font-size:11px;
  color:#94a3b8;
}
.builder-advanced__status{
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#ffffff;
  color:#64748b;
  font-size:11px;
  line-height:1.35;
  padding:6px 8px;
  transition:border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.builder-advanced__status.is-forced{
  border-color:#86efac;
  background:#f0fdf4;
  color:#166534;
}
.builder-advanced__status.is-muted{
  border-color:#e2e8f0;
  background:#ffffff;
  color:#64748b;
}
.builder-input__left,
.builder-input__right{
  display:flex;
  align-items:center;
  gap:8px;
}
.builder-input__row button{
position: relative;
  border: none;
  padding: 5px 5px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(214,211,209,0.4), rgba(0,0,0,0));
  box-shadow: 0px 0px 0px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: 0.4s;
  border: 1px solid #998f8f1c;
}
.builder-input__row button::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(245,245,244,0.9), rgba(231,229,228,0.4));
  z-index:0;
}
.builder-input__row button > svg,
.builder-input__row button > span{
  position:relative;
  z-index:1;
}
.builder-input__row button{
  display:flex;
  align-items:center;
  gap:6px;
}
.builder-input__row button:active{
  transform:scale(0.995);
  box-shadow:0 0 1px rgba(0,0,0,0.5);
}
.builder-input__row button:hover{
  box-shadow:none;
  /* border:1px solid #00000024; */
}
.builder-input__row button svg{
  width:16px;
  height:16px;
}
.builder-divider{
  width:1px;
  height:22px;
  background:#e2e8f0;
  display:inline-block;
  margin:0 2px;
}
.builder-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#475569;
}
.builder-chip{
  border:1px solid #e2e8f0;
  background:#f1f5f9;
  color:#0f172a;
  padding:6px 12px;
  border-radius:999px;
  font-size:0.78rem;
  cursor:pointer;
}
#promptInput::placeholder{
  font-size:0.79rem;
  line-height:1.3;
  letter-spacing:0;
  font-weight:400;
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
}

.builder-status{
  font-size:0.85rem;
  color:#94a3b8;
  padding-left:6px;
  opacity:0.9;
  transition:opacity 0.2s ease;
}
.builder-status.is-busy,
.builder-status.is-ok,
.builder-status.is-warn,
.builder-status.is-err{opacity:1}

.assistant__feed{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:6px 21px 0;
}
.assistant__feed.is-empty-chat{
  justify-content:center;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(56,189,248,0.11), transparent 56%),
    radial-gradient(110% 90% at 100% 100%, rgba(59,130,246,0.09), transparent 54%),
    linear-gradient(180deg, rgba(248,250,252,0.82), rgba(241,245,249,0.86));
  border-radius:0;
}
.assistant__feed.is-empty-chat + .assistant__composer{
  background:
    radial-gradient(150% 100% at 0% 0%, rgba(56,189,248,0.09), transparent 58%),
    radial-gradient(130% 100% at 100% 100%, rgba(59,130,246,0.08), transparent 56%),
    linear-gradient(180deg, rgba(248,250,252,0.84), rgba(241,245,249,0.9));
  border-top:0;
}
.assistant-empty-state{
  margin:auto 0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 14px 16px;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
}
.assistant-empty-state.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.assistant-empty-state__art{
  width:min(174px, 72%);
  max-width:174px;
}
.assistant-empty-state__art svg{
  width:100%;
  height:auto;
  display:block;
}
.assistant-empty-state__title{
  margin:4px 0 0;
  color:#0f172a;
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:-0.01em;
}
.assistant-empty-state__text{
  margin:0;
  max-width:270px;
  color:#475569;
  font-size:0.82rem;
  line-height:1.55;
}
.assistant-empty-state__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.assistant-empty-state__btn{
  height:31px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#334155;
  font-size:0.76rem;
  font-weight:700;
  padding:0 11px;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.assistant-empty-state__btn:hover{
  transform:translateY(-1px);
}
.assistant-empty-state__btn--primary{
  border-color:#2563eb;
  background:#2563eb;
  color:#ffffff;
}
.assistant-empty-state__btn--primary:hover{
  border-color:#1d4ed8;
  background:#1d4ed8;
}
.assistant-empty-state__btn--ghost:hover{
  border-color:#b8c7dd;
  background:#f8fafc;
}
.assistant-empty-state__chips{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:290px;
}
.assistant-empty-state__chip{
  height:26px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.42);
  background:rgba(255,255,255,0.82);
  color:#475569;
  padding:0 10px;
  font-size:0.72rem;
  font-weight:700;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.assistant-empty-state__chip:hover{
  border-color:rgba(100,116,139,0.42);
  background:#ffffff;
  color:#334155;
}
.assistant-awaiting-state{
  margin:auto 0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding:18px 12px;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
}
.assistant-awaiting-state.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.assistant-awaiting-state__pulse{
  width:80px;
  height:80px;
  border-radius:999px;
  border:0;
  background:transparent;
  padding:0;
  position:relative;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.assistant-awaiting-state__pulse-ring{
  position:absolute;
  inset:8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,0.44);
  box-shadow:0 0 0 6px rgba(59,130,246,0.1);
  animation:assistant-awaiting-breathe 2200ms cubic-bezier(0.45, 0.05, 0.2, 0.95) infinite;
}
.assistant-awaiting-state__pulse-core{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-size:17px;
  font-weight:800;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  box-shadow:0 8px 16px rgba(37,99,235,0.34);
  animation:assistant-awaiting-core 2200ms cubic-bezier(0.45, 0.05, 0.2, 0.95) infinite;
}
.assistant-awaiting-state__pulse:hover .assistant-awaiting-state__pulse-ring{
  border-color:rgba(37,99,235,0.56);
}
.assistant-awaiting-state__title{
  margin:2px 0 0;
  color:#0f172a;
  font-size:0.9rem;
  font-weight:800;
  letter-spacing:0.01em;
}
.assistant-awaiting-state__text{
  margin:0;
  color:#64748b;
  font-size:0.76rem;
  line-height:1.45;
}
@keyframes assistant-awaiting-breathe{
  0%{
    transform:scale(0.985);
    opacity:0.56;
  }
  50%{
    transform:scale(1.025);
    opacity:0.82;
  }
  100%{
    transform:scale(0.985);
    opacity:0.56;
  }
}
@keyframes assistant-awaiting-core{
  0%{
    transform:scale(0.985);
  }
  50%{
    transform:scale(1.01);
  }
  100%{
    transform:scale(0.985);
  }
}
@media (prefers-reduced-motion: reduce){
  .assistant-awaiting-state__pulse-ring,
  .assistant-awaiting-state__pulse-core{
    animation:none;
  }
}
.builder-chat__message{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.builder-chat__prompt-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.builder-chat__prompt{
  flex:1;
  font-size:0.9rem;
  color:#0f172a;
}
.builder-chat__prompt[dir="rtl"]{
  text-align:right;
}
.builder-chat__prompt[dir="ltr"]{
  text-align:left;
}
.builder-chat__time{
  font-size:0.72rem;
  color:#94a3b8;
  white-space:nowrap;
}
.builder-agent{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:6px 0 4px;
  color:#0f172a;
}
.builder-agent__thought{
  font-size:0.78rem;
  color:#64748b;
}
.builder-agent__thought::before{
  content:"›";
  display:inline-block;
  margin-right:7px;
  color:#94a3b8;
}
.builder-agent__activity{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:7px;
  color:#64748b;
  font-size:0.86rem;
  font-weight:600;
  min-height:24px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.builder-agent__activity[hidden]{
  display:none;
}
.builder-agent__activity-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  border:none;
  background:#94a3b8;
  animation:builder-agent-pulse 1500ms ease-in-out infinite;
}
.builder-agent__activity-text{
  color:#64748b;
  animation:builder-agent-wave 1500ms ease-in-out infinite;
  transform-origin:50% 70%;
}
.builder-agent__text{
  font-size:0.9rem;
  line-height:1.7;
  color:#0f172a;
}
.builder-agent__text[data-text-dir="rtl"]{
  text-align:right;
}
.builder-agent__text.is-updating{
  animation:builder-agent-fade 180ms ease-out both;
}
.builder-agent__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.builder-agent__action{
  display:flex;
  align-items:center;
  gap:8px;
  color:#475569;
  font-size:0.84rem;
}
.builder-agent__action-icon{
  width:17px;
  height:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  font-size:0.78rem;
}
.builder-agent__action[data-status="running"] .builder-agent__action-icon{
  color:#64748b;
}
.builder-agent__action[data-status="done"] .builder-agent__action-icon{
  color:#94a3b8;
}
.builder-agent__action-label{
  color:#0f172a;
  font-weight:600;
}
.builder-agent__chip{
  display:inline-flex;
  align-items:center;
  max-width:180px;
  min-height:21px;
  padding:2px 7px;
  border-radius:5px;
  background:#e5e7eb;
  color:#475569;
  font-size:0.76rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.builder-timeline{
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: transparent;
  padding: 6px 8px;
  font-size: 0.82rem;
  color: #475569;
  margin: 8px 0 0;
}
.builder-timeline__summary{
  display:flex;
  align-items:center;
  gap:10px;
  border:none;
  background:transparent;
  width:100%;
  cursor:pointer;
  color:inherit;
  padding:0;
}
.builder-progress{
  margin:10px 0 6px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.82rem;
  color:#475569;
}
.builder-progress__line{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.35;
}
.builder-progress__spinner{
  width:11px;
  height:11px;
  border:1.5px solid rgba(148,163,184,0.45);
  border-top-color:#64748b;
  border-radius:50%;
  display:none;
  animation:builder-progress-spin 1.1s linear infinite;
}
.builder-progress__icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  color:#0f172a;
}
.builder-approve-icon{
  width:18px;
  height:18px;
  display:block;
  border-radius:50%;
  stroke-width:2;
  stroke:#80d100;
  stroke-miterlimit:10;
  fill:none;
  background:transparent;
  box-shadow:inset 0 0 0 0 rgba(128,209,0,0.2);
}
.builder-approve-circle{
  stroke-dasharray:166;
  stroke-dashoffset:166;
}
.builder-approve-check{
  stroke-dasharray:48;
  stroke-dashoffset:48;
  transform-origin:50% 50%;
  stroke:#fff;
  stroke-width:8.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.builder-approve-icon.is-animating{
  animation:builder-approve-fill 200ms ease-in-out 80ms forwards,
    builder-approve-scale 200ms ease-in-out 140ms both;
}
.builder-approve-icon.is-animating .builder-approve-circle{
  animation:builder-approve-stroke 200ms cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.builder-approve-icon.is-animating .builder-approve-check{
  animation:builder-approve-stroke 180ms cubic-bezier(0.65, 0, 0.45, 1) 140ms forwards;
}
.builder-progress__label{
  color:#334155;
}
.builder-progress__status{
  font-size:0.74rem;
  color:#94a3b8;
}
.builder-progress__line.is-pending .builder-progress__spinner{
  display:inline-block;
}
.builder-progress__line.is-pending .builder-progress__icon{
  display:none;
}
.builder-typewriter__text{
  display:inline;
}
.builder-typewriter__cursor{
  display:inline-block;
  margin-left:2px;
  color:#94a3b8;
  animation:builder-cursor-blink 900ms ease-in-out infinite;
}
.builder-jump{
  align-self:flex-end;
  padding:4px 10px;
  font-size:0.72rem;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#475569;
  cursor:pointer;
  display:none;
}
.builder-jump.is-visible{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.builder-jump:hover{
  background:#f8fafc;
}
.builder-progress__complete{
  margin-top:6px;
  color:#1f2937;
  font-weight:600;
}
.builder-summary{
  margin:8px 0 10px;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  font-size:0.82rem;
  color:#334155;
}
.builder-insight{
  margin:8px 0 10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  font-size:0.82rem;
  color:#334155;
  overflow:hidden;
}
.builder-insight.is-collecting{
  opacity:0.65;
}
.builder-insight.is-disabled{
  background:#f1f5f9;
}
.builder-insight.is-disabled .builder-insight__summary{
  cursor:default;
}
.builder-insight.is-compact{
  margin-top:4px;
}
.builder-insight.is-compact .builder-insight__summary{
  cursor:default;
}
.builder-insight.is-compact .builder-insight__chevron,
.builder-insight.is-compact .builder-insight__body{
  display:none;
}
.builder-insight:not(.is-ready) .builder-insight__chevron{
  opacity:0;
  transform:translateX(6px);
}
.builder-insight.is-typing .builder-insight__chevron{
  opacity:0;
  transform:translateX(6px);
}
.builder-insight__cue{
  display:none;
  align-items:center;
  gap:6px;
  font-size:0.68rem;
  color:#b45309;
  padding:6px 10px 0;
}
.builder-insight__cue.is-active{
  display:flex;
}
.builder-insight__decision{
  display:none;
  align-items:center;
  gap:6px;
  font-size:0.7rem;
  color:#64748b;
  padding:0 10px 6px;
}
.builder-insight__decision.is-active{
  display:flex;
}
.builder-insight__summary{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:inherit;
}
.builder-insight__summary:disabled{
  opacity:1;
}
.builder-insight__icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0.9rem;
}
.builder-insight__title{
  font-weight:600;
  color:#0f172a;
}
.builder-insight__text{
  flex:1;
  font-size:0.78rem;
  color:#475569;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.builder-insight__chevron{
  font-size:0.8rem;
  color:#64748b;
  transition:transform 160ms ease;
}
.builder-insight__body{
  max-height:0;
  transform:translateY(-4px);
  transition:max-height 160ms ease, transform 160ms ease;
  padding:0 10px;
  overflow:hidden;
}
.builder-insight.is-open .builder-insight__body{
  max-height:520px;
  transform:translateY(0);
  padding-bottom:8px;
  overflow:auto;
}
.builder-insight.is-open .builder-insight__chevron{
  transform:rotate(180deg);
}
.builder-insight__section{
  margin-top:6px;
}
.builder-insight__label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#64748b;
  margin-bottom:4px;
}
.builder-insight ul{
  margin:0;
  padding-left:16px;
}
.builder-insight li{
  margin:2px 0;
}
.builder-insight__item{
  opacity:1;
}
.builder-insight.is-animating .builder-insight__item{
  opacity:1;
  animation:none;
}
.files-reveal{
  animation:files-reveal 180ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-bottom{
  animation:slide-bottom 180ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.notes-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.28);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
  z-index:60;
}
.notes-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.notes-modal{
  position:fixed;
  top:88px;
  right:24px;
  width:min(560px, calc(100% - 48px));
  max-height:calc(100vh - 140px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,0.2);
  opacity:0;
  transform:translateY(-8px) scale(0.98);
  pointer-events:none;
  transition:opacity 0.16s ease, transform 0.16s ease;
  z-index:61;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.notes-modal.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.notes-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.notes-modal__title{
  font-weight:700;
  color:#0f172a;
}
.notes-modal__actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.notes-modal__btn{
  height:30px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:#0f172a;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.16s ease, color 0.16s ease;
}
.notes-modal__btn:hover{
  background:var(--panel2);
}
.notes-modal__btn--ghost{
  background:#fff;
}
.notes-modal__body{
  padding:16px;
  overflow:auto;
  background:
    linear-gradient(#fff, #fff),
    repeating-linear-gradient(
      to bottom,
      rgba(148,163,184,0.2) 0,
      rgba(148,163,184,0.2) 1px,
      transparent 1px,
      transparent 26px
    );
}
.notes-empty{
  font-size:12px;
  color:var(--muted);
  margin-bottom:12px;
}
.notes-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.notes-item{
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border);
  border-left:4px solid #c7d2fe;
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
}
.notes-item__input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  line-height:1.5;
  color:#0f172a;
  resize:none;
}
.notes-item__delete{
  align-self:flex-end;
  border:none;
  background:none;
  color:#94a3b8;
  font-size:12px;
  cursor:pointer;
  padding:0;
}
.notes-item__delete:hover{
  color:#64748b;
}
.notes-toast{
  position:absolute;
  top:10px;
  right:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.4);
  background:#fff;
  color:#0f172a;
  font-size:12px;
  font-weight:600;
  box-shadow:0 8px 18px rgba(15,23,42,0.08);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.notes-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}
.studio-toast{
  position:fixed;
  top:16px;
  right:16px;
  max-width:min(460px, calc(100vw - 24px));
  min-width:220px;
  display:inline-flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #dbe3f2;
  background:rgba(255,255,255,.98);
  color:#0f172a;
  box-shadow:0 14px 30px rgba(15,23,42,.16);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:4200;
}
.studio-toast.is-visible{
  opacity:1;
  transform:translateY(0);
}
.studio-toast__icon{
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  flex:0 0 auto;
}
.studio-toast__message{
  font-size:13px;
  font-weight:600;
  line-height:1.4;
}

.studio-auth-open{overflow:hidden}
.studio-auth-modal{
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms ease;
}
.studio-auth-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.studio-auth-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.38);
  backdrop-filter:blur(8px);
}
.studio-auth-modal__panel{
  position:relative;
  width:min(420px,100%);
  max-height:min(680px,calc(100vh - 32px));
  overflow:auto;
  border:1px solid rgba(148,163,184,.38);
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 24px 80px rgba(15,23,42,.26);
  padding:22px;
  transform:translateY(8px) scale(.985);
  transition:transform 160ms ease;
}
.studio-auth-modal.is-open .studio-auth-modal__panel{transform:translateY(0) scale(1)}
.studio-auth-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:#334155;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.studio-auth-modal__header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding-right:34px;
  margin-bottom:18px;
}
.studio-auth-modal__mark,
.studio-auth-profile__avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:14px;
  background:linear-gradient(135deg,#e0f2fe,#c7d2fe 55%,#d1fae5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}
.studio-auth-modal__header h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
  letter-spacing:0;
  color:#0f172a;
}
.studio-auth-modal__header p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.45;
}
.studio-auth-status{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:13px;
  line-height:1.45;
}
.studio-auth-status[data-tone="error"]{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}
.studio-auth-status[data-tone="success"]{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.studio-auth-view{
  display:grid;
  gap:14px;
}
.studio-auth-field{
  display:grid;
  gap:7px;
  color:#334155;
  font-size:13px;
  font-weight:700;
}
.studio-auth-field input{
  width:100%;
  min-width:0;
  height:44px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font:inherit;
  font-weight:600;
  padding:0 12px;
  outline:none;
}
.studio-auth-field input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.studio-auth-button{
  width:100%;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease;
}
.studio-auth-button:hover{transform:translateY(-1px)}
.studio-auth-button:disabled{
  cursor:wait;
  opacity:.68;
  transform:none;
}
.studio-auth-button--primary{
  background:#2563eb;
  color:#fff;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
}
.studio-auth-button--danger{
  background:#fff;
  border-color:#fecaca;
  color:#b91c1c;
}
.studio-auth-link{
  justify-self:center;
  border:0;
  background:transparent;
  color:#2563eb;
  font-weight:800;
  cursor:pointer;
  padding:3px 6px;
}
.studio-auth-methods{
  display:grid;
  gap:10px;
}
.studio-auth-method{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  min-height:54px;
  border:1px solid #dbe3ee;
  border-radius:14px;
  background:#fff;
  color:#0f172a;
  padding:10px 12px;
  cursor:pointer;
  text-align:left;
}
.studio-auth-method[aria-pressed="true"]{
  border-color:#2563eb;
  background:#eff6ff;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.studio-auth-method span{font-weight:800}
.studio-auth-method small{
  color:#64748b;
  font-weight:700;
  white-space:nowrap;
}
.studio-auth-profile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
}
.studio-auth-profile__name{
  font-weight:800;
  color:#0f172a;
  overflow-wrap:anywhere;
}
.studio-auth-profile__meta{
  margin-top:2px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
@media (max-width:540px){
  .studio-auth-modal{padding:12px}
  .studio-auth-modal__panel{
    border-radius:16px;
    padding:18px;
  }
  .studio-auth-method{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .studio-auth-method small{white-space:normal}
}
.studio-toast__action{
  margin-left:8px;
  border:1px solid rgba(15,23,42,.18);
  background:transparent;
  color:inherit;
  border-radius:8px;
  height:26px;
  padding:0 8px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  flex:0 0 auto;
}
.studio-toast__action:hover{
  background:rgba(255,255,255,.55);
}
.studio-toast--success{
  border-color:#bbf7d0;
  background:#f0fdf4;
  color:#166534;
}
.studio-toast--success .studio-toast__icon{
  background:#dcfce7;
  color:#166534;
}
.studio-toast--warning{
  border-color:#fde68a;
  background:#fffbeb;
  color:#92400e;
}
.studio-toast--warning .studio-toast__icon{
  background:#fef3c7;
  color:#92400e;
}
.studio-toast--error{
  border-color:#fecaca;
  background:#fef2f2;
  color:#991b1b;
}
.studio-toast--error .studio-toast__icon{
  background:#fee2e2;
  color:#991b1b;
}
.image-gen-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
  z-index:62;
}
.image-gen-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.image-gen-modal{
  position:fixed;
  top:50%;
  left:50%;
  width:min(520px, calc(100% - 36px));
  max-height:calc(100vh - 120px);
  transform:translate(-50%, -50%) scale(0.98);
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(15,23,42,0.24);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:63;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.image-gen-modal.is-open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
.image-gen-modal__header{
  padding:16px 18px 8px;
  border-bottom:1px solid var(--border);
}
.image-gen-modal__title{
  font-weight:700;
  color:#0f172a;
}
.image-gen-modal__subtitle{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}
.image-gen-modal__body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.image-gen-modal__label{
  font-size:12px;
  font-weight:600;
  color:#334155;
}
.image-gen-modal__input{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  resize:vertical;
  min-height:70px;
}
.image-gen-modal__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.image-gen-modal__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.image-gen-modal__select{
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  font-size:13px;
  background:#fff;
}
.image-gen-modal__ratio{
  border:1px dashed rgba(148,163,184,0.8);
  border-radius:12px;
  padding:8px 10px;
  font-size:13px;
  color:#475569;
  background:#f8fafc;
}
.image-gen-progress{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
}
.image-gen-progress__stage{
  font-size:11px;
  text-align:center;
  padding:6px 6px;
  border-radius:999px;
  background:#f1f5f9;
  color:#94a3b8;
  transition:background 0.16s ease, color 0.16s ease;
}
.image-gen-progress__stage.is-active{
  background:#111827;
  color:#fff;
}
.image-gen-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
}
.image-gen-modal__btn{
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
  transition:background 0.16s ease, color 0.16s ease;
}
.image-gen-modal__btn--ghost{
  color:#475569;
}
.image-gen-modal__btn--primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.image-gen-modal__btn--confirmed{
  background:#86efac;
  color:#0f172a;
  border-color:#86efac;
}
.image-gen-modal__btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.app-logo-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
  z-index:64;
}
.app-logo-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.app-logo-modal{
  position:fixed;
  top:50%;
  left:50%;
  width:min(520px, calc(100% - 36px));
  max-height:calc(100vh - 120px);
  transform:translate(-50%, -50%) scale(0.98);
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(15,23,42,0.24);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:65;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.app-logo-modal.is-open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
.app-logo-modal__header{
  padding:16px 18px 8px;
  border-bottom:1px solid var(--border);
}
.app-logo-modal__title{
  font-weight:700;
  color:#0f172a;
}
.app-logo-modal__subtitle{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}
.app-logo-modal__body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.app-logo-preview{
  width:120px;
  height:120px;
  border-radius:28px;
  background:linear-gradient(135deg, #ffd1e8, #ffe4b5);
  border:1px solid rgba(15,23,42,0.08);
  display:grid;
  place-items:center;
  overflow:hidden;
  margin:0 auto;
  position:relative;
}
.app-logo-preview__reset{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.92);
  color:#111;
  display:grid;
  place-items:center;
  box-shadow:0 8px 16px rgba(15,23,42,.12);
  padding:0;
  cursor:pointer;
}
.app-logo-preview__reset svg{
  width:14px;
  height:14px;
}
.app-logo-preview__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.app-logo-preview__img[hidden]{
  display:none;
}
.app-logo-preview__emoji{
  font-size:32px;
  line-height:1;
}
.app-logo-modal__field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.app-logo-modal__label{
  font-size:12px;
  font-weight:600;
  color:#334155;
}
.app-logo-modal__input{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  resize:vertical;
  min-height:70px;
}
.app-logo-modal__row{
  display:flex;
  gap:12px;
}
.app-logo-modal__row .app-logo-modal__btn{
  flex:1;
}
.app-logo-modal__status{
  font-size:12px;
  font-weight:600;
  color:#475569;
  background:#f8fafc;
  border:1px dashed rgba(148,163,184,0.8);
  border-radius:999px;
  padding:6px 10px;
  width:max-content;
}
.app-logo-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 18px 18px;
}
.app-logo-modal__btn{
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
  transition:background 0.16s ease, color 0.16s ease;
}
.app-logo-modal__btn--ghost{
  color:#475569;
}
.app-logo-modal__btn--primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.app-logo-modal__btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.ad-pack-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
  z-index:66;
}
.ad-pack-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.ad-pack-modal{
  position:fixed;
  top:50%;
  left:50%;
  width:min(980px, calc(100% - 36px));
  max-height:calc(100vh - 120px);
  transform:translate(-50%, -50%) scale(0.98);
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(15,23,42,0.24);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:67;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.ad-pack-modal.is-open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
.ad-pack-modal__header{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ad-pack-modal__title{
  font-weight:700;
  color:#0f172a;
}
.ad-pack-modal__subtitle{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}
.ad-pack-modal__history{
  margin-left:auto;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
  color:#334155;
}
.ad-pack-modal__history--ghost{
  margin-left:0;
  background:transparent;
  border-color:transparent;
  color:#64748b;
}
.ad-pack-modal__history:disabled{
  opacity:0.5;
  cursor:default;
}
.ad-pack-modal__close{
  border:none;
  background:#f1f5f9;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  color:#334155;
}
.ad-pack-modal__close:hover{
  background:#e2e8f0;
}
.ad-pack-modal__body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:auto;
  position:relative;
}
.ad-pack-modal.is-config-open .ad-pack-modal__body,
.ad-pack-modal.is-config-open .ad-pack-modal__actions,
.ad-pack-modal.is-config-open .ad-pack-modal__history{
  pointer-events:none;
}
.ad-pack-modal.is-config-open .ad-pack-modal__history{
  opacity:0.55;
}
.ad-pack-modal__body::after,
.ad-pack-modal__actions::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.08);
  opacity:0;
  transition:opacity 0.16s ease;
  pointer-events:none;
}
.ad-pack-modal.is-config-open .ad-pack-modal__body::after,
.ad-pack-modal.is-config-open .ad-pack-modal__actions::after{
  opacity:1;
}
.ad-pack-progress{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
}
.ad-pack-progress__stage{
  font-size:11px;
  text-align:center;
  padding:6px 6px;
  border-radius:999px;
  background:#f1f5f9;
  color:#94a3b8;
  transition:background 0.16s ease, color 0.16s ease;
}
.ad-pack-progress__stage.is-active{
  background:#111827;
  color:#fff;
}
.ad-pack-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.ad-pack-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ad-pack-modal.is-creative .ad-pack-card{
  /* transition:border-color 160ms ease, box-shadow 160ms ease; */
  transition: 0.4s !important;
}
.ad-pack-modal.is-creative .ad-pack-card:hover,
.ad-pack-modal.is-creative .ad-pack-card:focus-within{
  border-color:rgba(148,163,184,0.45);
  box-shadow:0 0 0 1px rgba(148,163,184,0.16), 0 16px 32px rgba(15,23,42,0.08);
}
.ad-pack-card__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:#334155;
}
.ad-pack-card__label-text{
  flex:1;
}
.ad-pack-card__actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.ad-pack-download{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  color:#64748b;
  cursor:pointer;
  transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ad-pack-download svg{
  width:14px;
  height:14px;
  display:block;
}
.ad-pack-modal.is-creative .ad-pack-download{
  display:inline-flex;
}
.ad-pack-download:hover{
  background:var(--panel2);
  color:#0f172a;
}
.ad-pack-download:disabled{
  opacity:0.4;
  cursor:not-allowed;
}
.ad-pack-info-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.ad-pack-info-wrap[hidden]{
  display:none;
}
.ad-pack-info{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  color:#64748b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ad-pack-info:hover{
  background:var(--panel2);
  color:#0f172a;
}
.ad-pack-info__popover{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  z-index:15;
  min-width:180px;
  max-width:240px;
  padding:8px 10px;
  border-radius:10px;
  background:#111827;
  color:#f8fafc;
  font-size:11px;
  line-height:1.35;
  box-shadow:0 12px 24px rgba(15,23,42,0.2);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity 0.16s ease, transform 0.16s ease;
  transition-delay:0.14s;
  word-break:break-word;
}
.ad-pack-info__popover[aria-hidden="true"]{
  opacity:0 !important;
  transform:translateY(-4px) !important;
  pointer-events:none !important;
}
.ad-pack-info-wrap:hover .ad-pack-info__popover,
.ad-pack-info-wrap:focus-within .ad-pack-info__popover,
.ad-pack-info-wrap.is-open .ad-pack-info__popover{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.ad-pack-info-wrap:hover .ad-pack-info__popover,
.ad-pack-info-wrap:focus-within .ad-pack-info__popover{
  transition-delay:0.18s;
}
.ad-pack-info-wrap.is-open .ad-pack-info__popover{
  transition-delay:0s;
}
.ad-pack-info-wrap.is-close-immediate .ad-pack-info__popover{
  transition-delay:0s;
}
.ad-pack-preview{
  border-radius:14px;
  background:#0f172a;
  overflow:hidden;
  position:relative;
}
.creative-preview-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.02em;
  color:#f8fafc;
  background:rgba(15,23,42,0.72);
  border:1px solid rgba(148,163,184,0.35);
  display:flex;
  align-items:center;
  gap:6px;
  pointer-events:none;
}
.creative-preview-badge[hidden]{
  display:none;
}
.creative-preview-status{
  font-size:11px;
  color:#64748b;
}
.ad-pack-preview.is-interactive{
  cursor:zoom-in;
}
.ad-pack-preview.is-interactive::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.18);
  opacity:0;
  transition:opacity 160ms ease;
  z-index:3;
}
.ad-pack-preview.is-interactive::after{
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  width:32px;
  height:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14 V6 H14'/><path d='M30 6 H38 V14'/><path d='M38 30 V38 H30'/><path d='M14 38 H6 V30'/><path d='M22 19 V25'/><path d='M19 22 H25'/></svg>");
  background-size:contain;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 160ms ease;
  z-index:3;
  filter:drop-shadow(0 2px 6px rgba(15,23,42,0.55));
  pointer-events:none;
}
.ad-pack-preview.is-interactive:hover::before,
.ad-pack-preview.is-interactive:hover::after{
  opacity:1;
}
.ad-pack-preview.is-swapping{
  animation:creative-preview-swap 620ms cubic-bezier(.16,1,.3,1);
  animation-fill-mode:both;
}
.ad-pack-card[data-pack-format="story"] .ad-pack-preview.is-swapping{animation-delay:0ms;}
.ad-pack-card[data-pack-format="post"] .ad-pack-preview.is-swapping{animation-delay:140ms;}
.ad-pack-card[data-pack-format="banner"] .ad-pack-preview.is-swapping{animation-delay:280ms;}

.ad-pack-preview.is-saved [data-pack-role="template"]{
  display:none !important;
}
.ad-pack-preview__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:2;
}
.ad-pack-preview__badge{
  position:absolute;
  right:10px;
  bottom:10px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  pointer-events:none;
}
.ad-pack-card[data-pack-format="story"] .ad-pack-preview{aspect-ratio:9 / 16;}
.ad-pack-card[data-pack-format="post"] .ad-pack-preview{aspect-ratio:1 / 1;}
.ad-pack-card[data-pack-format="banner"] .ad-pack-preview{aspect-ratio:1200 / 628;}
.ad-pack-template{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  color:#f8fafc;
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
}
.ad-pack-template__bg{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(15,23,42,0.6));
  background-size:cover;
  background-position:center;
}
.ad-pack-template__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0.1) 0%, rgba(15,23,42,0.8) 100%);
  opacity:0.35;
  z-index:1;
  pointer-events:none;
}
.ad-pack-template__content{
  position:absolute;
  left:10%;
  right:10%;
  bottom:10%;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2;
}
.ad-pack-template__eyebrow{
  font-size:10px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(248,250,252,0.75);
}
.ad-pack-template__headline{
  font-size:clamp(18px, 4vw, 34px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.02em;
}
.ad-pack-template__subline{
  font-size:clamp(11px, 2.2vw, 15px);
  color:rgba(248,250,252,0.78);
  max-width:90%;
}
.ad-pack-template__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  background:rgba(248,250,252,0.92);
  color:#0f172a;
  width:max-content;
}
.ad-pack-modal.is-creative .ad-pack-template__content{
  display:none;
}
.ad-pack-modal.is-creative .ad-pack-template__bg{
  background:
    radial-gradient(140% 120% at 12% 8%, rgba(255,255,255,0.18), rgba(255,255,255,0) 46%),
    radial-gradient(120% 120% at 85% 18%, rgba(148,163,184,0.35), rgba(15,23,42,0) 58%),
    linear-gradient(135deg, #0f172a 0%, #1f2937 48%, #0b1220 100%);
}
.ad-pack-modal.is-creative .ad-pack-template__shade{
  opacity:0.65;
}
.creative-placeholder{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:10%;
  z-index:2;
  pointer-events:none;
}
.ad-pack-modal.is-creative .creative-placeholder{
  display:flex;
}
.creative-placeholder__hero{
  position:relative;
  width:64%;
  aspect-ratio:4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  transform:translateY(4%);
}
.creative-hero{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.27);
  background: linear-gradient(145deg, rgba(248,250,252,0.16), rgba(148,163,184,0.08) 55%, rgba(15,23,42,0.32) 100%);
  box-shadow: 0 20px 32px rgba(15,23,42,0.3);
  overflow: hidden;
  opacity: 0.28;
  transform: scale(0.94);
}
.creative-hero::before{
  content:"";
  position:absolute;
  top:14%;
  right:14%;
  width:20%;
  aspect-ratio:1 / 1;
  border-radius:50%;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(248,250,252,0.22);
  box-shadow:inset 0 6px 12px rgba(15,23,42,0.2);
}
.creative-hero::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:14%;
  height:44%;
  background:linear-gradient(180deg, rgba(248,250,252,0.24), rgba(148,163,184,0.1));
  clip-path:polygon(0% 100%, 18% 68%, 36% 82%, 52% 52%, 72% 74%, 100% 40%, 100% 100%);
  opacity:0.85;
}
.creative-placeholder__shadow{
  position:absolute;
  left:8%;
  right:8%;
  bottom:-10%;
  height:18%;
  border-radius:999px;

}
.ad-pack-modal.is-creative .ad-pack-card[data-pack-format="story"] .creative-placeholder__hero{
  width:78%;
  aspect-ratio:4 / 3;
  transform:translateY(-6%);
}
.ad-pack-modal.is-creative .ad-pack-card[data-pack-format="post"] .creative-placeholder__hero{
  width:62%;
  aspect-ratio:4 / 3;
  transform:translateY(-2%);
}
.ad-pack-modal.is-creative .ad-pack-card[data-pack-format="banner"] .creative-placeholder__hero{
  width:50%;
  aspect-ratio:4 / 3;
  transform:translateY(-2%);
}
.creative-empty-hint{
  font-size:12px;
  color:#94a3b8;
  margin-top:-6px;
}
@keyframes creative-preview-swap{
  0%{opacity:0; transform:translateY(16px) scale(0.975);}
  55%{opacity:0.85; transform:translateY(-4px) scale(1.005);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.ad-pack-card__status{
  font-size:11px;
  color:#64748b;
}
.ad-pack-fields{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.ad-pack-modal.is-creative #adPackFields{
  display:none;
}
.ad-pack-modal.is-creative #creativeAdFields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.creative-config{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 22px 50px rgba(15,23,42,0.18);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100% - 140px);
  z-index:30;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.creative-config[hidden]{
  display:none;
}
.ad-pack-modal.is-config-open .creative-config{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.creative-config__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.creative-config__title{
  font-weight:700;
  color:#0f172a;
}
.creative-config__subtitle{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}
.creative-config__close{
  border:none;
  background:#f1f5f9;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  color:#334155;
}
.creative-config__close:hover{
  background:#e2e8f0;
}
.creative-config__body{
  overflow:auto;
  padding-right:2px;
}
.creative-config__actions{
  display:flex;
  justify-content:flex-end;
}
.ad-pack-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ad-pack-field__label{
  font-size:12px;
  font-weight:600;
  color:#334155;
}
.ad-pack-field__optional{
  font-weight:500;
  color:#94a3b8;
}
.ad-pack-field__input{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
}
.creative-ad-group{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--panel);
}
.creative-ad-group__title{
  font-size:11px;
  font-weight:700;
  color:#64748b;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.creative-ad-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:#334155;
}
.creative-ad-toggle__input{
  width:16px;
  height:16px;
}
.creative-ad-helper{
  font-size:11px;
  color:#64748b;
  margin-top:-2px;
  margin-bottom:4px;
}
.creative-dropzone{
  position:relative;
  border:1px dashed rgba(148,163,184,0.6);
  border-radius:12px;
  padding:10px;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#f8fafc;
  cursor:pointer;
  transition:border-color 0.16s ease, background 0.16s ease;
}
.creative-dropzone.is-dragover{
  border-color:#fb923c;
  background:#fff7ed;
}
.creative-dropzone.is-uploading{
  opacity:0.75;
  cursor:progress;
}
.creative-dropzone__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:1;
}
.creative-dropzone__body{
  position:relative;
  z-index:0;
  pointer-events:none;
}
.creative-dropzone__body[hidden],
.creative-dropzone__preview[hidden]{
  display:none;
}
.creative-dropzone__title{
  font-size:12px;
  font-weight:600;
  color:#0f172a;
}
.creative-dropzone__meta{
  margin-top:4px;
  font-size:11px;
  color:#64748b;
}
.creative-dropzone__preview{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  position:relative;
  z-index:2;
}
.creative-dropzone__error{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  color:#b91c1c;
  background:#fee2e2;
  border:1px solid #fecaca;
  z-index:3;
  text-align:left;
}
.creative-dropzone__thumb{
  width:56px;
  height:56px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(148,163,184,0.5);
}
.creative-dropzone__preview .creative-dropzone__meta{
  flex:1;
  min-width:0;
  margin-top:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.creative-dropzone__clear{
  margin-left:auto;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  font-size:11px;
  font-weight:600;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
}
.creative-dropzone__clear:hover{
  background:var(--panel2);
}
.ad-pack-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 18px 18px;
  position:relative;
}
.ad-pack-modal__btn{
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
  transition:background 0.16s ease, color 0.16s ease;
}
.ad-pack-modal__btn--ghost{
  color:#475569;
}
.ad-pack-modal__btn--primary{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.ad-pack-modal__btn.is-success{
  background:linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff;
  border:none;
}
.creative-lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.78);
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  z-index:2200;
}
.creative-lightbox.is-open{
  opacity:1;
  pointer-events:auto;
}
.creative-lightbox__backdrop{
  position:absolute;
  inset:0;
}
.creative-lightbox__img{
  position:relative;
  z-index:2;
  max-width:92vw;
  max-height:92vh;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(15,23,42,0.45);
  background:#0f172a;
}
.creative-lightbox__close{
  position:fixed;
  top:24px;
  right:24px;
  border:1px solid rgba(148,163,184,0.3);
  background:#0f172a;
  color:#e2e8f0;
  border-radius:999px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.creative-lightbox__close:hover{
  background:#111827;
}
.ad-pack-modal__btn:disabled,
.ad-pack-trigger:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.ad-pack-trigger:disabled{
  pointer-events:none;
}
@media (max-width: 980px){
  .ad-pack-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .ad-pack-fields{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  .ad-pack-grid{grid-template-columns:1fr;}
}
.assets-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
  z-index:64;
}
.assets-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.assets-modal{
  position:fixed;
  top:50%;
  left:50%;
  width:min(820px, calc(100% - 36px));
  max-height:calc(100vh - 120px);
  transform:translate(-50%, -50%) scale(0.98);
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(15,23,42,0.24);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:65;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.assets-modal.is-open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
.assets-modal__header{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.assets-modal__title{
  font-weight:700;
  color:#0f172a;
}
.assets-modal__subtitle{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}
.assets-modal__close{
  border:none;
  background:#f1f5f9;
  border-radius:10px;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
}
.assets-modal__body{
  padding:16px 18px 20px;
  overflow:auto;
}
.confirm-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
  z-index:70;
}
.confirm-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.confirm-modal{
  position:fixed;
  top:50%;
  left:50%;
  width:min(420px, calc(100% - 36px));
  transform:translate(-50%, -50%) scale(0.98);
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,0.22);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
  z-index:71;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.confirm-modal.is-open{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
  pointer-events:auto;
}
.confirm-modal__header{
  padding:16px 18px;
  border-bottom:1px solid var(--border);
}
.confirm-modal__title{
  font-weight:700;
  color:#0f172a;
}
.confirm-modal__subtitle{
  font-size:12px;
  color:#64748b;
  margin-top:4px;
}
.confirm-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 18px 18px;
}
.confirm-modal__btn{
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
  transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.confirm-modal__btn--ghost{
  color:#475569;
}
.confirm-modal__btn--danger{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
}
.confirm-modal__btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.workspace-delete-modal{
  width:min(468px, calc(100% - 36px));
  border-radius:14px;
}
.workspace-delete-modal .confirm-modal__header{
  padding:15px 18px 13px;
}
.workspace-delete-modal .confirm-modal__subtitle{
  margin-top:6px;
  line-height:1.45;
  white-space:pre-line;
}
.workspace-delete-modal__body{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:15px 18px 6px;
}
.workspace-delete-modal__label{
  font-size:13px;
  color:#1e293b;
  font-weight:600;
}
.workspace-delete-modal__input{
  height:40px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  padding:0 12px;
  font-size:13px;
  outline:none;
}
.workspace-delete-modal__input:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.workspace-delete-modal__hint{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:#73839a;
}
.workspace-delete-modal__error{
  min-height:18px;
  margin:0;
  font-size:12px;
  color:#b42318;
}
.workspace-delete-modal .confirm-modal__actions{
  border-top:1px solid #edf2f7;
  padding:12px 18px 16px;
  gap:8px;
}
.workspace-delete-modal .confirm-modal__btn{
  height:33px;
  border-radius:8px;
  padding:0 14px;
  font-size:12px;
  font-weight:700;
}
.workspace-delete-modal .confirm-modal__btn--ghost{
  border-color:#cbd5e1;
  color:#334155;
  background:#fff;
}
.workspace-delete-modal .confirm-modal__btn--ghost:hover:not(:disabled){
  background:#f9fafb;
  border-color:#b9c6d8;
}
.workspace-delete-modal .confirm-modal__btn--danger{
  background:#dc6a6a;
  border-color:#dc6a6a;
  color:#fff;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.workspace-delete-modal .confirm-modal__btn--danger:disabled{
  opacity:1;
  background:#efc9c9;
  border-color:#efc9c9;
  color:rgba(255,255,255,.9);
  box-shadow:none;
}
.workspace-delete-modal .confirm-modal__btn--danger:not(:disabled){
  background:#d85c5c;
  border-color:#d85c5c;
}
.workspace-delete-modal .confirm-modal__btn--danger:hover:not(:disabled){
  background:#cc5151;
  border-color:#cc5151;
}
.workspace-delete-modal .confirm-modal__btn--danger:active:not(:disabled){
  transform:translateY(.5px);
}
.workspace-limit-request-modal{
  width:min(460px, calc(100% - 36px));
}
.workspace-limit-request-modal__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 18px 6px;
}
.workspace-limit-request-modal__label{
  font-size:13px;
  color:#1e293b;
  font-weight:600;
}
.workspace-limit-request-modal__input,
.workspace-limit-request-modal__textarea{
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  padding:9px 11px;
  font-size:13px;
  outline:none;
}
.workspace-limit-request-modal__input{
  height:38px;
}
.workspace-limit-request-modal__textarea{
  resize:vertical;
  min-height:74px;
  max-height:180px;
}
.workspace-limit-request-modal__input:focus,
.workspace-limit-request-modal__textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.workspace-limit-request-modal__error{
  font-size:12px;
  color:#b42318;
  min-height:18px;
}
.workspace-description-modal{
  width:min(520px, calc(100% - 36px));
}
.workspace-description-modal .confirm-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.workspace-description-modal__close{
  width:28px;
  height:28px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#475569;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.workspace-description-modal__close:hover{
  background:#f8fafc;
}
.workspace-description-modal__close:focus-visible{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.workspace-description-modal__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 18px 6px;
}
.workspace-description-modal__textarea{
  width:100%;
  min-height:110px;
  max-height:260px;
  resize:vertical;
  border:1px solid #94a3b8;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  padding:11px 12px;
  font-size:15px;
  line-height:1.45;
  outline:none;
}
.workspace-description-modal__textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.workspace-description-modal__meta{
  display:flex;
  justify-content:flex-end;
  font-size:12px;
  color:#64748b;
}
.workspace-description-modal__error{
  min-height:18px;
  font-size:12px;
  color:#b42318;
}
.workspace-description-modal .confirm-modal__actions{
  border-top:1px solid #edf2f7;
  padding:12px 18px 16px;
}
.workspace-description-modal .confirm-modal__btn{
  min-width:70px;
  height:37px;
  border-radius:10px;
  padding:0 16px;
}
.workspace-description-modal .confirm-modal__btn--ghost{
  border-color:#cbd5e1;
  color:#334155;
}
.workspace-description-modal__save{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.workspace-description-modal__save:hover:not(:disabled){
  background:#1f2937;
  border-color:#1f2937;
}
.trace-viewer-btn{
  min-width:68px;
  height:34px;
  border-radius:8px;
  padding:0 12px;
  font-size:12px;
  font-weight:700;
}
.studio-tools-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.studio-tools-menu__trigger{
  height:34px;
  min-width:76px;
  border-radius:8px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.studio-tools-menu__trigger::-webkit-details-marker{
  display:none;
}
.studio-tools-menu__panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:90;
  width:210px;
  padding:8px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:10px;
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.studio-tools-menu__item{
  width:100%;
  justify-content:flex-start;
}
.studio-tools-menu__separator{
  height:1px;
  background:rgba(15,23,42,.08);
  margin:2px 0;
}
.studio-tools-menu__access{
  min-height:28px;
  border-radius:8px;
  background:#0f172a;
  color:#fff;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-size:12px;
  font-weight:700;
}
.wordpress-export-trigger{
  height:34px;
  min-width:106px;
  border:1px solid rgba(2,132,199,.18);
  border-radius:10px;
  padding:0 12px 0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#f8fcff;
  color:#0b4f6c;
  box-shadow:none;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.wordpress-export-trigger:hover{
  background:#eef9ff;
  border-color:rgba(2,132,199,.34);
  color:#07577a;
}
.wordpress-export-trigger:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.wordpress-export-trigger__mark{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#21759b;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.wordpress-export-trigger__mark svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
@media (max-width: 1180px){
  .wordpress-export-trigger{
    min-width:44px;
    width:44px;
    padding:0;
  }
  .wordpress-export-trigger > span:last-child{
    display:none;
  }
}
.studio-export-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.studio-export-link.is-loading{
  opacity:.65;
  pointer-events:none;
}
.studio-export-feedback{
  min-height:30px;
  max-width:260px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(180,35,24,0.24);
  background:rgba(180,35,24,0.08);
  color:#b42318;
  font-size:12px;
  line-height:1.35;
}
.studio-export-feedback[hidden]{
  display:none;
}
.trace-viewer-modal{
  width:min(760px, calc(100% - 36px));
}
.trace-viewer-modal .confirm-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.trace-viewer-modal__close{
  width:28px;
  height:28px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#475569;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.trace-viewer-modal__close:hover{
  background:#f8fafc;
}
.trace-viewer-modal__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 18px 6px;
  max-height:min(70vh, 640px);
  overflow:auto;
}
.trace-viewer-modal__state{
  font-size:13px;
  color:#475569;
  min-height:18px;
}
.trace-viewer-modal__state.is-error{
  color:#b42318;
}
.wp-export-modal{
  width:min(520px, calc(100vw - 32px));
}
.wp-export-modal .confirm-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.wp-export-modal__close{
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:#475569;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.wp-export-modal__body{
  padding:18px;
  display:grid;
  gap:16px;
}
.wp-export-modal__brand{
  display:flex;
  justify-content:center;
}
.wp-export-modal__logo{
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#21759b,#135e78);
  color:#fff;
  box-shadow:0 18px 36px rgba(24,119,151,.24);
}
.wp-export-modal__logo svg{
  width:46px;
  height:46px;
  fill:currentColor;
}
.wp-export-modal__steps{
  display:grid;
  gap:10px;
}
.wp-export-step{
  min-height:68px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px;
  background:#f8fafc;
  color:#64748b;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.wp-export-step.is-active{
  border-color:rgba(24,119,151,.32);
  background:#f0fbff;
  color:#0f4257;
  transform:translateY(-1px);
}
.wp-export-step.is-complete{
  border-color:rgba(22,163,74,.26);
  background:#f0fdf4;
  color:#166534;
}
.wp-export-step__dot{
  width:26px;
  height:26px;
  border-radius:999px;
  display:block;
  position:relative;
  background:#e2e8f0;
}
.wp-export-step.is-active .wp-export-step__dot{
  background:#21759b;
  box-shadow:0 0 0 6px rgba(33,117,155,.12);
}
.wp-export-step.is-active .wp-export-step__dot::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:999px;
  background:#fff;
  animation:wpExportPulse 1.1s ease-in-out infinite;
}
.wp-export-step.is-complete .wp-export-step__dot{
  background:#16a34a;
}
.wp-export-step.is-complete .wp-export-step__dot::after{
  content:"";
  position:absolute;
  left:8px;
  top:6px;
  width:7px;
  height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.wp-export-step strong{
  display:block;
  color:inherit;
  font-size:13px;
}
.wp-export-step p{
  margin:4px 0 0;
  color:inherit;
  font-size:12px;
  line-height:1.45;
}
.wp-export-modal__progress{
  height:8px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.wp-export-modal__progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#21759b,#16a34a);
  transition:width .22s ease;
}
.wp-export-modal__status{
  min-height:36px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background:#f8fafc;
  color:#334155;
  font-size:13px;
  line-height:1.45;
}
.wp-export-modal__status.is-error{
  background:#fef2f2;
  color:#b91c1c;
}
.wp-export-modal__actions{
  align-items:center;
}
.wp-export-modal__start{
  background:#21759b;
  border-color:#21759b;
  color:#fff;
}
.wp-export-modal__start:hover:not(:disabled){
  background:#135e78;
  border-color:#135e78;
}
@keyframes wpExportPulse{
  0%,100%{transform:scale(.75);opacity:.68}
  50%{transform:scale(1.05);opacity:1}
}
.trace-viewer-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.trace-viewer-meta__item{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:8px 10px;
  background:#f8fafc;
  font-size:12px;
  color:#334155;
}
.trace-viewer-section{
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.trace-viewer-section__title{
  font-size:12px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:8px;
}
.trace-viewer-section__content{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:#334155;
}
.trace-viewer-kv{
  display:flex;
  gap:6px;
  align-items:flex-start;
}
.trace-viewer-kv__key{
  font-weight:700;
  min-width:96px;
  color:#1f2937;
}
.trace-viewer-kv__value{
  color:#475569;
  overflow-wrap:anywhere;
}
.trace-viewer-raw{
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fff;
  padding:8px 10px;
}
.trace-viewer-raw summary{
  font-size:12px;
  font-weight:700;
  color:#1f2937;
  cursor:pointer;
  user-select:none;
}
.trace-viewer-raw pre{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.45;
  color:#334155;
  background:#f8fafc;
  border-radius:8px;
  border:1px solid #e2e8f0;
  padding:10px;
  max-height:300px;
  overflow:auto;
}
.validation-viewer-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d0d5dd;
  border-radius:999px;
  min-height:28px;
  padding:0 12px;
  font-size:12px;
  font-weight:700;
  color:#334155;
  background:#f8fafc;
}
.validation-viewer-status.is-ok{
  color:#067647;
  border-color:#a6f4c5;
  background:#ecfdf3;
}
.validation-viewer-status.is-error{
  color:#b42318;
  border-color:#fecdca;
  background:#fef3f2;
}
.validation-viewer-list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  color:#475569;
}
.validation-viewer-list li{
  line-height:1.45;
}
@media (max-width: 860px){
  .trace-viewer-meta{
    grid-template-columns:1fr;
  }
}
.assets-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.assets-usage{
  margin:-2px 0 12px;
  padding:8px 10px;
  border:1px solid #d9e2ef;
  border-radius:6px;
  background:#f8fbff;
  font-size:12px;
  font-weight:600;
  color:#33415591;
}
.assets-usage[hidden]{
  display:none;
}
.assets-tab{
  border:1px solid var(--border);
  background:#f8fafc;
  color:#0f172a;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all 160ms ease;
}
.assets-tab.is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.assets-filters{
  margin-bottom:12px;
}
.assets-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.assets-chip{
  border:1px solid var(--border);
  background:#fff;
  color:#334155;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  cursor:pointer;
  transition:all 160ms ease;
}
.assets-chip.is-active{
  background:#e2e8f0;
  color:#0f172a;
  border-color:#cbd5e1;
}
.assets-empty{
  font-size:13px;
  color:#64748b;
  text-align:center;
  padding:20px 0;
}
.assets-empty[hidden]{
  display:none;
}
.assets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.assets-grid[hidden]{
  display:none;
}
.assets-filters[hidden]{
  display:none;
}
.asset-card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:visible;
  display:flex;
  flex-direction:column;
  background:#fff;
}
.asset-card__image{
  width:100%;
  aspect-ratio:4 / 3;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  position:relative;
}
.asset-card__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform 180ms ease, opacity 180ms ease;
}
.assets-modal.is-icon-picker .asset-card__image{
  aspect-ratio:1 / 1;
  background:#f8fafc;
}
.assets-modal.is-icon-picker .asset-card__image img{
  width:auto;
  height:auto;
  max-width:72px;
  max-height:72px;
  object-fit:contain;
  transform:scale(1);
}
.asset-card:hover .asset-card__image img{
  transform:scale(1.03);
}
.asset-card__body{
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
  background:#fff;
}
.asset-card__meta{
  font-size:11px;
  color:#64748b;
  display:flex;
  justify-content:space-between;
  gap:6px;
}
.asset-card__prompt{
  font-size:12px;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:32px;
}
.asset-card__label{
  font-size:12px;
  font-weight:600;
  color:#0f172a;
}
.asset-card__advanced{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.asset-card__advanced-toggle{
  border:none;
  background:none;
  padding:0;
  font-size:11px;
  color:#2563eb;
  cursor:pointer;
  text-align:left;
}
.asset-card__advanced-overlay{
  position:absolute;
  inset:0;
  padding:10px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  background:rgba(15, 23, 42, 0.58);
  backdrop-filter:blur(2px);
  z-index:1;
}
.asset-card__advanced-overlay[hidden]{
  display:none;
}
.asset-card__advanced-panel{
  border:1px solid rgba(148, 163, 184, 0.4);
  background:rgba(255, 255, 255, 0.92);
  border-radius:8px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color:#475569;
  width:100%;
}
.asset-card__advanced-panel[hidden]{
  display:none;
}
.asset-card__advanced-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.asset-card__advanced-key{
  color:#64748b;
}
.asset-card__advanced-value{
  text-align:right;
  word-break:break-all;
}
.asset-card__actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex-direction:column;
}
.asset-card__btn{
  border:none;
  border-radius:10px;
  padding:5px 10px;
  font-size:11px;
  cursor:pointer;
  background:#f1f5f9;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.asset-card__btn--primary{
  background:#111827;
  color:#fff;
  width:100%;
  justify-content:center;
  padding:7px 14px;
  font-size:12px;
}
.asset-card__btn--loading{
  background:#0f172a;
  color:#fff;
  opacity:0.8;
}
.asset-card__btn--confirmed{
  background:#86efac;
  color:#0f172a;
}
.asset-card__btn--ghost{
  background:#f8fafc;
}
.asset-card__btn--danger{
  background:#fff1f2;
  color:#dc2626;
  border:1px solid #fecdd3;
}
.asset-card__icon{
  display:block;
}
.asset-card__menu{
  align-self:flex-end;
  position:relative;
}
.asset-card__menu-toggle{
  min-width:34px;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  line-height:1;
  height:34px;
  padding:0 10px;
}
.asset-card__menu-panel{
  position:absolute;
  top:-7%;
  right:41px;
  margin-top:6px;
  min-width:150px;
  padding:6px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 24px rgba(15, 23, 42, 0.12);
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:2;
}
.asset-card__menu-panel[hidden]{
  display:none;
}
.asset-card__menu-item{
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:8px;
  padding:6px 10px;
  font-size:11px;
  cursor:pointer;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:6px;
  text-align:left;
}
.asset-card__menu-item--danger{
  background:#fff1f2;
  color:#dc2626;
  border-color:#fecdd3;
}
.asset-card__btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
@keyframes builder-progress-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes builder-cursor-blink{
  0%, 100%{opacity:0.25;}
  50%{opacity:1;}
}
@keyframes builder-agent-fade{
  from{opacity:0.35;transform:translateY(2px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes builder-agent-pulse{
  0%,100%{opacity:0.35;transform:translateY(0) scale(0.9);}
  50%{opacity:1;transform:translateY(-1px) scale(1);}
}
@keyframes builder-agent-wave{
  0%,100%{opacity:0.58;transform:translateY(0);}
  35%{opacity:1;transform:translateY(-1px);}
  70%{opacity:0.72;transform:translateY(1px);}
}
@keyframes builder-approve-stroke{
  100%{stroke-dashoffset:0;}
}
@keyframes builder-approve-scale{
  0%, 100%{transform:none;}
  50%{transform:scale3d(1.06, 1.06, 1);}
}
@keyframes builder-approve-fill{
  100%{
    box-shadow:inset 0 0 0 10px rgba(128,209,0,1);
    background:#80d100;
  }
}
@keyframes insight-line-in{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes files-reveal{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes slide-bottom{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .builder-typewriter__cursor{
    animation:none;
  }
  .builder-progress__spinner{
    animation:none;
  }
  .builder-approve-icon.is-animating{
    animation:none;
  }
  .builder-approve-icon.is-animating .builder-approve-circle,
  .builder-approve-icon.is-animating .builder-approve-check{
    animation:none;
    stroke-dashoffset:0;
  }
  .builder-approve-icon{
    background:#80d100;
    box-shadow:inset 0 0 0 10px rgba(128,209,0,1);
  }
  .slide-bottom{
    animation:none;
  }
  .files-reveal{
    animation:none;
  }
}
.builder-summary__title{
  font-weight:600;
  margin-bottom:6px;
  color:#0f172a;
}
.builder-summary__section{
  margin-top:6px;
}
.builder-summary__label{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#64748b;
  margin-bottom:4px;
}
.builder-summary ul{
  margin:0;
  padding-left:16px;
}
.builder-summary li{
  margin:2px 0;
}
.builder-summary__note{
  margin-top:6px;
  font-size:0.72rem;
  color:#64748b;
}
.builder-files{
  margin:10px 0 12px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,0.04);
  overflow:hidden;
}
.builder-files__header{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:0;
  background:#f8fafc;
  color:#0f172a;
  text-align:left;
  cursor:pointer;
}
.builder-files__header:hover{
  background:#f1f5f9;
}
.builder-files__header:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:-2px;
}
.builder-files__heading{
  font-weight:700;
  font-size:0.84rem;
}
.builder-files__meta{
  color:#64748b;
  font-size:0.74rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.builder-files__chevron{
  color:#64748b;
  transition:transform 160ms ease;
}
.builder-files.is-open .builder-files__chevron{
  transform:rotate(180deg);
}
.builder-files__preview{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:8px 10px 10px;
  border-top:1px solid #e2e8f0;
}
.builder-files.is-open .builder-files__preview{
  display:none;
}
.builder-files__preview span{
  max-width:100%;
  padding:4px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:0.72rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.builder-files__list{
  display:flex;
  flex-direction:column;
  gap:0;
  max-height:260px;
  overflow:auto;
  border-top:1px solid #e2e8f0;
}
.builder-files__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border:0;
  border-bottom:1px solid #eef2f7;
  border-radius:0;
  background:#fff;
  font-size:0.82rem;
  color:#334155;
}
.builder-files__card:last-child{
  border-bottom:0;
}
.builder-files__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.builder-files__card.is-clickable{
  cursor:pointer;
  transition:background 160ms ease;
}
.builder-files__card.is-clickable:hover{
  background:#f8fafc;
}
.builder-files__card.is-clickable:focus-visible{
  outline:2px solid #93c5fd;
  outline-offset:-2px;
}
.builder-files__status{
  flex:0 0 auto;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#475569;
}

.usage-content{
  width:min(100%, 1120px);
  margin:0 auto;
  padding:24px 22px 40px;
  display:grid;
  gap:16px;
}
.usage-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(124,58,237,0.12), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
  box-shadow:0 18px 45px rgba(15,23,42,0.06);
}
.usage-hero h2{
  margin:2px 0 6px;
  font-size:1.45rem;
  line-height:1.15;
}
.usage-hero__actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.usage-help-link{
  min-height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #bfdbfe;
  border-radius:999px;
  background:rgba(239,246,255,0.76);
  color:#1d4ed8;
  font-size:0.84rem;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(37,99,235,0.07);
  transition:background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.usage-help-link::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(180,83,9,0.34);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.95) 0 14%, transparent 15%),
    radial-gradient(circle at 62% 68%, rgba(180,83,9,0.2) 0 10%, transparent 11%),
    linear-gradient(145deg,#fde68a 0%,#facc15 44%,#f59e0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 3px rgba(146,64,14,0.22),
    0 6px 12px rgba(245,158,11,0.22);
}
.usage-help-link:hover{
  border-color:#93c5fd;
  background:#eff6ff;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(37,99,235,0.11);
}
.usage-action{
  min-width:86px;
  height:40px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
  border-radius:14px;
  border-color:#dbe3ef;
  background:#fff;
  color:#0f172a;
  font-size:0.9rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(15,23,42,0.045);
  transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, color 160ms ease, opacity 160ms ease;
}
.usage-action:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  box-shadow:0 12px 28px rgba(15,23,42,0.075);
  transform:translateY(-1px);
}
.usage-action:disabled{
  cursor:wait;
  opacity:.74;
  transform:none;
}
.usage-action.is-loading,
.usage-action.is-cooling{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:0 10px 24px rgba(37,99,235,0.08);
}
.usage-action.is-loading::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor;
  box-shadow:14px 0 0 rgba(29,78,216,.45);
  animation:usageRefreshPulse 720ms ease-in-out infinite alternate;
}
@keyframes usageRefreshPulse{
  from{opacity:.45; transform:translateX(0)}
  to{opacity:1; transform:translateX(4px)}
}
.usage-action--primary{
  border-color:#182235;
  color:#fff;
  background:linear-gradient(135deg,#111827,#334155);
}
.usage-action--primary:hover{
  border-color:#111827;
  background:linear-gradient(135deg,#0f172a,#1e293b);
}
.usage-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) repeat(3, minmax(0, 1fr));
  gap:12px;
}
.usage-card{
  min-width:0;
  min-height:118px;
  padding:16px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,0.055);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.usage-card--primary{
  color:#fff;
  border-color:#182235;
  background:
    radial-gradient(circle at 92% 16%, rgba(251,146,60,0.3), transparent 26%),
    linear-gradient(135deg,#111827 0%,#1e293b 100%);
}
.usage-card--primary .usage-label,
.usage-card--primary .usage-sub{
  color:#cbd5e1;
}
.usage-card--primary .usage-value{
  color:#fff;
}
.usage-pending{
  min-width:0;
  padding:14px 16px;
  display:grid;
  grid-template-columns:minmax(170px, 0.72fr) minmax(0, 1.8fr);
  align-items:start;
  gap:14px;
  border:1px solid #bfdbfe;
  border-radius:16px;
  background:linear-gradient(135deg,#eff6ff 0%,#fff 100%);
  box-shadow:0 14px 34px rgba(37,99,235,0.08);
}
.usage-pending[hidden]{
  display:none;
}
.usage-pending__header,
.usage-pending__title,
.usage-pending__row span{
  min-width:0;
}
.usage-pending__header{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.usage-pending__title span,
.usage-pending__title strong,
.usage-pending__header > small,
.usage-pending__row strong,
.usage-pending__row small{
  display:block;
}
.usage-pending__title span{
  color:#2563eb;
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.usage-pending__title strong{
  margin-top:4px;
  color:#0f172a;
  font-size:0.98rem;
}
.usage-pending__header > small,
.usage-pending__row small{
  margin-top:3px;
  color:#64748b;
  font-size:0.8rem;
}
.usage-pending__list{
  min-width:0;
  display:grid;
  gap:8px;
}
.usage-pending__row{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:rgba(255,255,255,0.82);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.usage-pending__row:hover{
  border-color:#93c5fd;
  background:#fff;
  transform:translateY(-1px);
}
.usage-pending__row.is-resolved{
  border-color:rgba(34,197,94,0.22);
  background:
    radial-gradient(circle at 4% 15%, rgba(187,247,208,0.8), transparent 34%),
    linear-gradient(135deg,#f0fdf4 0%,#fff 100%);
  box-shadow:0 12px 28px rgba(22,163,74,0.08);
}
.usage-pending__row--rejected{
  border-color:rgba(248,113,113,0.28) !important;
  background:
    radial-gradient(circle at 4% 15%, rgba(254,202,202,0.75), transparent 34%),
    linear-gradient(135deg,#fef2f2 0%,#fff 100%) !important;
  box-shadow:0 12px 28px rgba(220,38,38,0.06);
}
.usage-pending__row strong{
  color:#0f172a;
  font-size:0.92rem;
}
.usage-pending__row.is-resolved strong{
  color:#166534;
  font-size:0.98rem;
}
.usage-pending__row--rejected strong{
  color:#991b1b !important;
}
.usage-pending__row.is-resolved small{
  color:#475569;
}
.usage-pending__actions{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.usage-pending__actions a,
.usage-pending__actions button{
  min-height:32px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#1d4ed8;
  font-size:0.82rem;
  font-weight:800;
  cursor:pointer;
}
.usage-pending__actions a:hover,
.usage-pending__actions button:hover{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.usage-pending__actions button{
  color:#b91c1c;
}
.usage-pending__actions button:hover{
  background:#fef2f2;
  border-color:#fecaca;
}
.usage-pending__actions button:disabled{
  cursor:wait;
  opacity:.64;
}
.usage-pending__row.is-resolved .usage-pending__actions button{
  min-height:30px;
  padding:0 12px;
  border-color:#dbe3ef;
  background:#fff;
  color:#475569;
  box-shadow:0 8px 18px rgba(15,23,42,0.05);
}
.usage-pending__row.is-resolved .usage-pending__actions button:hover{
  border-color:#cbd5e1;
  background:#f8fafc;
}
.usage-label{
  color:#64748b;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.usage-value{
  color:#0f172a;
  font-size:2.05rem;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  overflow-wrap:anywhere;
  transition:color .22s ease, transform .22s ease, text-shadow .22s ease;
  will-change:transform;
}
.usage-value.is-updating{
  color:#2563eb;
  transform:translateY(-1px);
  text-shadow:0 10px 24px rgba(37,99,235,.16);
}
.studio-guest__wallet strong.is-updating{
  color:#2563eb;
  transform:translateY(-1px);
}
.usage-value--small{
  font-size:1.2rem;
}
.usage-sub{
  color:#64748b;
  font-size:0.8rem;
  line-height:1.35;
}
.usage-toggle{
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.usage-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.usage-toggle__track{
  width:38px;
  height:22px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#e2e8f0;
  position:relative;
  transition:background 160ms ease, border-color 160ms ease;
}
.usage-toggle__track::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 7px rgba(15,23,42,0.22);
  transition:transform 160ms ease;
}
.usage-toggle input:checked + .usage-toggle__track{
  border-color:#7c3aed;
  background:#7c3aed;
}
.usage-toggle input:checked + .usage-toggle__track::after{
  transform:translateX(16px);
}
.usage-toggle strong,
.usage-toggle small{
  display:block;
}
.usage-toggle strong{
  color:#0f172a;
  font-size:0.82rem;
  line-height:1.2;
}
.usage-toggle small{
  color:#64748b;
  font-size:0.72rem;
  line-height:1.3;
  margin-top:3px;
}
.usage-coach-target{
  position:relative;
  z-index:1302;
  box-shadow:0 0 0 4px rgba(37,99,235,0.18), 0 24px 70px rgba(37,99,235,0.28);
}
.usage-coach-overlay{
  position:fixed;
  inset:0;
  z-index:1290;
  pointer-events:none;
}
.usage-coach-overlay__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(15,23,42,0.46);
  backdrop-filter:blur(3px);
  pointer-events:auto;
  cursor:pointer;
}
.usage-coach-overlay--soft .usage-coach-overlay__backdrop{
  background:rgba(15,23,42,0.26);
  backdrop-filter:blur(2px);
}
.usage-coachmark{
  position:fixed;
  z-index:1320;
  padding:18px;
  border:1px solid rgba(191,219,254,0.95);
  border-radius:18px;
  background:rgba(255,255,255,0.96);
  box-shadow:0 24px 80px rgba(15,23,42,0.24);
  pointer-events:auto;
}
.usage-attention{
  position:fixed;
  left:50%;
  top:50%;
  width:min(390px, calc(100vw - 32px));
  z-index:1320;
  padding:20px;
  border:1px solid rgba(226,232,240,0.95);
  border-radius:20px;
  background:rgba(255,255,255,0.96);
  box-shadow:0 24px 80px rgba(15,23,42,0.22);
  transform:translate(-50%,-50%);
  pointer-events:auto;
}
.usage-coachmark::before{
  content:"";
  position:absolute;
  left:var(--coach-arrow-left, 50%);
  top:-10px;
  width:18px;
  height:18px;
  border-left:1px solid rgba(191,219,254,0.95);
  border-top:1px solid rgba(191,219,254,0.95);
  background:rgba(255,255,255,0.96);
  transform:translateX(-50%) rotate(45deg);
}
.usage-coachmark--above::before{
  top:auto;
  bottom:-10px;
  border:0;
  border-right:1px solid rgba(191,219,254,0.95);
  border-bottom:1px solid rgba(191,219,254,0.95);
}
.usage-coachmark--mobile{
  border-radius:20px;
}
.usage-coachmark--mobile::before{
  display:none;
}
.usage-coachmark__eyebrow{
  margin-bottom:7px;
  color:#2563eb;
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.usage-coachmark h3{
  margin:0 0 8px;
  color:#0f172a;
  font-size:1.08rem;
  line-height:1.2;
}
.usage-coachmark p{
  margin:0;
  color:#64748b;
  font-size:0.9rem;
  line-height:1.55;
}
.usage-coachmark__actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
}
.usage-coachmark__actions button{
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}
.usage-coachmark__primary{
  border:1px solid #172033;
  color:#fff;
  background:#172033;
}
.usage-coachmark__secondary{
  border:1px solid #dbe3ef;
  color:#172033;
  background:#fff;
}
.usage-split{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap:16px;
}
.usage-chart,
.usage-recent{
  min-width:0;
  min-height:0;
  padding:18px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,0.045);
  display:grid;
  gap:14px;
}
.usage-recent{
  grid-template-rows:auto minmax(0, 1fr);
  max-height:420px;
}
.usage-bars{
  height:190px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:14px 8px 0;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);
  border:1px solid #edf2f7;
}
.usage-bar{
  flex:1 1 0;
  min-width:14px;
  height:150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
}
.usage-bar span{
  display:block;
  height:var(--usage-bar-height,8%);
  min-height:8px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#7c3aed,#2563eb);
}
.usage-bar small{
  color:#94a3b8;
  font-size:0.68rem;
  text-align:center;
}
.usage-empty,
.usage-recent-empty{
  color:#64748b;
  font-size:0.9rem;
  padding:20px;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#f8fafc;
}
.usage-table{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  overflow:auto;
  padding-right:2px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}
.usage-table::-webkit-scrollbar{
  width:8px;
}
.usage-table::-webkit-scrollbar-track{
  background:transparent;
}
.usage-table::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#cbd5e1;
}
.usage-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  padding:12px 14px;
  border:1px solid #edf2f7;
  border-radius:12px;
  background:#f8fafc;
}
.usage-row strong,
.usage-row span{
  display:block;
}
.usage-row strong{
  color:#0f172a;
  font-size:0.9rem;
}
.usage-row span{
  color:#64748b;
  font-size:0.76rem;
  margin-top:3px;
}
.studio-topup-modal[hidden]{
  display:none;
}
.studio-topup-modal{
  position:fixed;
  inset:0;
  z-index:1400;
  display:grid;
  place-items:center;
  padding:24px;
}
.studio-topup-modal__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(15,23,42,0.54);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.studio-topup{
  position:relative;
  width:min(1040px, calc(100vw - 32px));
  max-height:min(760px, calc(100vh - 32px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:1px solid rgba(226,232,240,0.86);
  border-radius:18px;
  background:#f8fafc;
  box-shadow:0 28px 80px rgba(15,23,42,0.28);
  overflow:hidden;
}
.studio-topup__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}
.studio-topup__close{
  width:36px;
  height:36px;
  border:1px solid #dbe3ef;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.studio-topup__body{
  min-height:0;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:0;
}
.studio-topup__side{
  min-height:0;
  padding:18px;
  display:grid;
  grid-template-rows:auto minmax(0,auto) auto auto;
  gap:16px;
  background:#111827;
  color:#fff;
}
.studio-topup__eyebrow{
  margin-bottom:10px;
  color:#cbd5e1;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.studio-topup__methods{
  display:grid;
  gap:10px;
}
.studio-topup-method{
  min-height:54px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(148,163,184,0.28);
  border-radius:12px;
  background:rgba(30,41,59,0.74);
  color:#fff;
  cursor:pointer;
}
.studio-topup-method.is-active{
  border-color:#60a5fa;
  background:#2563eb;
  box-shadow:0 10px 24px rgba(37,99,235,0.26);
}
.studio-topup-method:disabled{
  cursor:not-allowed;
  opacity:0.46;
}
.studio-topup-method strong,
.studio-topup-method span{
  display:block;
}
.studio-topup-method strong{
  font-size:0.9rem;
}
.studio-topup-method span{
  color:#cbd5e1;
  font-size:0.75rem;
  font-weight:800;
}
.studio-topup__summary{
  padding:14px;
  border:1px solid rgba(148,163,184,0.18);
  border-radius:14px;
  background:rgba(30,41,59,0.58);
}
.studio-topup-summary-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(148,163,184,0.18);
  color:#94a3b8;
  font-size:0.82rem;
}
.studio-topup-summary-row:last-child{
  border-bottom:0;
}
.studio-topup-summary-row strong{
  color:#fff;
  text-align:right;
}
.studio-topup__pay{
  width:100%;
}
.studio-topup__pay:disabled{
  opacity:0.56;
  cursor:not-allowed;
  transform:none;
}
.studio-topup__status{
  min-height:20px;
  color:#bfdbfe;
  font-size:0.78rem;
  line-height:1.35;
}
.studio-topup__status[data-tone="error"]{
  color:#fecaca;
}
.studio-topup__packages{
  min-height:0;
  padding:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  overflow:auto;
}
.studio-topup-pack{
  min-height:166px;
  padding:18px;
  display:grid;
  align-content:space-between;
  gap:8px;
  text-align:left;
  border:1px solid #dbe3ef;
  border-radius:16px;
  background:
    linear-gradient(160deg, rgba(37,99,235,0.13), transparent 42%),
    #fff;
  color:#0f172a;
  box-shadow:0 12px 28px rgba(15,23,42,0.065);
  cursor:pointer;
  transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.studio-topup-pack:hover{
  border-color:#93c5fd;
  box-shadow:0 18px 38px rgba(15,23,42,0.1);
  transform:translateY(-1px);
}
.studio-topup-pack.is-active{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.16), 0 18px 38px rgba(37,99,235,0.16);
}
.studio-topup-pack:disabled{
  cursor:not-allowed;
  opacity:0.55;
  transform:none;
}
.studio-topup-pack__amount{
  display:flex;
  align-items:center;
  gap:9px;
  color:#1d4ed8;
  font-size:2rem;
  font-weight:900;
  line-height:1;
}
.studio-topup-pack__coin{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:999px;
  object-fit:cover;
  box-shadow:0 8px 18px rgba(15,118,110,0.18);
}
.studio-topup-pack__amount-unit{
  color:#1d4ed8;
  font-size:0.48em;
  font-weight:900;
  line-height:1;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.studio-topup-pack__label{
  display:block;
  color:#64748b;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.studio-topup-pack__price{
  display:flex;
  align-items:center;
  gap:8px;
  color:#0f172a;
  font-size:0.92rem;
  font-weight:900;
}
.studio-topup-pack__was{
  color:#94a3b8;
  font-size:0.78rem;
  text-decoration:line-through;
}
.studio-topup-pack strong{
  display:block;
  color:#334155;
  font-size:0.9rem;
}
.studio-topup-pack__lock{
  color:#b45309;
  font-size:0.72rem;
  font-weight:800;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup{
  width:min(1040px, calc(100vw - 32px));
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup__body{
  grid-template-columns:280px minmax(0,1fr);
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup__packages{
  align-content:start;
  grid-template-columns:repeat(2,minmax(260px,1fr));
  justify-content:stretch;
  padding:24px;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack{
  position:relative;
  min-height:162px;
  align-content:stretch;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "amount price"
    "label label"
    "name name"
    "review review";
  gap:9px 18px;
  padding:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 96% 10%, rgba(124,58,237,0.12), transparent 30%),
    linear-gradient(145deg, rgba(37,99,235,0.12), transparent 48%),
    #fff;
  box-shadow:0 16px 34px rgba(15,23,42,0.055);
  transition:
    background 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms ease;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:4px;
  border-radius:inherit;
  background:#2563eb;
  opacity:0;
  transform:scaleY(0.45);
  transform-origin:center;
  transition:opacity 300ms ease, transform 300ms ease;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack.is-active{
  border-color:#dbeafe;
  background:
    radial-gradient(circle at 96% 10%, rgba(124,58,237,0.12), transparent 30%),
    linear-gradient(145deg, rgba(37,99,235,0.16), rgba(255,255,255,0) 54%),
    #fff;
  box-shadow:
    inset 0 0 0 1px rgba(37,99,235,0.08),
    0 18px 40px rgba(37,99,235,0.12);
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack.is-active::before{
  opacity:1;
  transform:scaleY(1);
  animation:studioTopupSelectRail 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.74), transparent 52%);
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack > *{
  position:relative;
  z-index:1;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__card-mark{
  position:absolute;
  top:18px;
  right:18px;
  z-index:1;
  width:46px;
  height:32px;
  border:1px solid rgba(219,234,254,0.92);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.18)),
    url("/static/workspaces/images/visa-card.jpg") center / cover no-repeat;
  box-shadow:0 10px 22px rgba(15,23,42,0.08);
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__selected{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:1;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:0.78rem;
  font-weight:900;
  opacity:0;
  transform:scale(0.86);
  transition:opacity 320ms ease, transform 320ms ease;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack.is-active .studio-topup-pack__selected{
  opacity:1;
  transform:scale(1);
  animation:studioTopupSelectCheck 440ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack.is-active .studio-topup-pack__review{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#1d4ed8;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__amount{
  grid-area:amount;
  padding-right:64px;
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
  white-space:nowrap;
  font-size:2.05rem;
  letter-spacing:0;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__amount-value{
  font:inherit;
  line-height:1;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__amount-unit{
  color:#2563eb;
  font-size:0.58em;
  font-weight:900;
  line-height:1;
  letter-spacing:0.04em;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__price{
  grid-area:price;
  justify-self:end;
  align-self:start;
  margin-top:42px;
  padding:7px 9px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__label{
  grid-area:label;
  align-self:start;
  color:#7c3aed;
  font-size:0.78rem;
  font-weight:900;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack strong{
  grid-area:name;
  align-self:end;
  color:#0f172a;
  font-size:1rem;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-pack__review{
  grid-area:review;
  justify-self:start;
  padding:6px 9px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#f8fafc;
  color:#475569;
  font-size:0.74rem;
  font-weight:800;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup__summary{
  padding:12px;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-summary-row{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  align-items:start;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup-summary-row strong{
  overflow-wrap:anywhere;
}
.studio-topup-modal[data-method="bank_transfer"] .studio-topup__pay{
  min-height:42px;
  border-radius:12px;
}
@keyframes studioTopupSelectRail{
  from{
    opacity:0;
    transform:scaleY(0.18);
  }
  to{
    opacity:1;
    transform:scaleY(1);
  }
}
@keyframes studioTopupSelectCheck{
  0%{
    opacity:0;
    transform:scale(0.68);
  }
  70%{
    opacity:1;
    transform:scale(1.05);
  }
  100%{
    opacity:1;
    transform:scale(1);
  }
}
.studio-topup__empty{
  color:#94a3b8;
  font-size:0.86rem;
  line-height:1.45;
}
.usage-help-modal[hidden]{
  display:none;
}
.usage-help-modal{
  position:fixed;
  inset:0;
  z-index:1410;
  display:grid;
  place-items:center;
  padding:24px;
}
.usage-help-modal__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(15,23,42,0.52);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.usage-help{
  position:relative;
  width:min(920px, calc(100vw - 32px));
  max-height:min(720px, calc(100vh - 32px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(226,232,240,0.9);
  border-radius:22px;
  background:#f8fafc;
  box-shadow:0 28px 90px rgba(15,23,42,0.3);
}
.usage-help__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:24px 26px;
  border-bottom:1px solid #e2e8f0;
  background:
    radial-gradient(circle at 7% 0%, rgba(124,58,237,0.13), transparent 33%),
    linear-gradient(135deg,#fff 0%,#f8fafc 100%);
}
.usage-help__eyebrow{
  margin:0 0 8px;
  color:#2563eb;
  font-size:0.76rem;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.usage-help__head h2{
  margin:0;
  color:#0f172a;
  font-size:1.7rem;
  line-height:1.08;
  letter-spacing:0;
}
.usage-help__head p:last-child{
  max-width:560px;
  margin:10px 0 0;
  color:#64748b;
  font-size:0.94rem;
  line-height:1.5;
}
.usage-help__close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.usage-help__body{
  min-height:0;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
}
.usage-help__nav{
  min-height:0;
  padding:18px;
  display:grid;
  align-content:start;
  gap:10px;
  border-right:1px solid #e2e8f0;
  background:#fff;
  overflow:auto;
}
.usage-help__tab{
  width:100%;
  padding:13px 14px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:10px;
  text-align:left;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
  color:#334155;
  cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.usage-help__tab span{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#e0e7ff;
  color:#3730a3;
  font-size:0.74rem;
  font-weight:900;
}
.usage-help__tab strong{
  display:block;
  color:inherit;
  font-size:0.84rem;
  line-height:1.25;
}
.usage-help__tab.is-active{
  border-color:#93c5fd;
  background:#eff6ff;
  color:#0f172a;
  box-shadow:0 10px 24px rgba(37,99,235,0.08);
}
.usage-help__content{
  min-height:0;
  padding:22px;
  overflow:auto;
}
.usage-help-panel{
  min-height:100%;
  padding:26px;
  display:grid;
  align-content:start;
  gap:18px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 36px rgba(15,23,42,0.06);
}
.usage-help-panel--blue{
  background:linear-gradient(150deg, rgba(37,99,235,0.12), transparent 40%), #fff;
}
.usage-help-panel--violet{
  background:linear-gradient(150deg, rgba(124,58,237,0.12), transparent 40%), #fff;
}
.usage-help-panel--cyan{
  background:linear-gradient(150deg, rgba(6,182,212,0.12), transparent 40%), #fff;
}
.usage-help-panel--green{
  background:linear-gradient(150deg, rgba(22,163,74,0.12), transparent 40%), #fff;
}
.usage-help-panel--amber{
  background:linear-gradient(150deg, rgba(245,158,11,0.14), transparent 40%), #fff;
}
.usage-help-panel--slate{
  background:linear-gradient(150deg, rgba(15,23,42,0.09), transparent 40%), #fff;
}
.usage-help-panel__kicker{
  color:#2563eb;
  font-size:0.72rem;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.usage-help-panel h3{
  max-width:640px;
  margin:0;
  color:#0f172a;
  font-size:1.45rem;
  line-height:1.14;
  letter-spacing:0;
}
.usage-help-panel p{
  max-width:660px;
  margin:0;
  color:#475569;
  font-size:0.98rem;
  line-height:1.62;
}
.usage-help-panel ul{
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  list-style:none;
}
.usage-help-panel li{
  position:relative;
  padding-left:18px;
  color:#334155;
  font-size:0.92rem;
  line-height:1.55;
}
.usage-help-panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.65em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,0.1);
}
.usage-help-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.usage-help-stats span,
.usage-help-callout{
  min-width:0;
  padding:14px;
  border:1px solid #dbeafe;
  border-radius:16px;
  background:rgba(255,255,255,0.82);
}
.usage-help-stats strong,
.usage-help-stats small,
.usage-help-callout strong,
.usage-help-callout span{
  display:block;
}
.usage-help-stats strong{
  color:#0f172a;
  font-size:1.35rem;
  line-height:1;
}
.usage-help-stats small,
.usage-help-callout span{
  margin-top:7px;
  color:#64748b;
  font-size:0.78rem;
  line-height:1.35;
}
.usage-help-callout strong{
  color:#0f172a;
  font-size:0.9rem;
}
.usage-help-callout a{
  color:#1648d8;
  font-weight:850;
  text-decoration:none;
}
.usage-help-callout a:hover{
  text-decoration:underline;
}
@media (max-width: 980px){
  .usage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .usage-split{
    grid-template-columns:1fr;
  }
  .usage-recent{
    max-height:380px;
  }
  .studio-topup__body{
    grid-template-columns:1fr;
  }
  .studio-topup-modal[data-method="bank_transfer"] .studio-topup__body{
    grid-template-columns:1fr;
  }
  .studio-topup__side{
    grid-template-columns:1fr;
  }
  .studio-topup__packages{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .studio-topup-modal[data-method="bank_transfer"] .studio-topup__packages{
    grid-template-columns:repeat(2,minmax(240px,1fr));
  }
  .usage-help__body{
    grid-template-columns:1fr;
  }
  .usage-help__nav{
    grid-template-columns:repeat(5,minmax(160px,1fr));
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid #e2e8f0;
  }
}
@media (max-width: 1280px){
  .usage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .usage-content{
    padding:18px 14px 32px;
  }
  .usage-hero{
    align-items:flex-start;
    flex-direction:column;
  }
  .usage-hero__actions,
  .usage-help-link,
  .usage-action{
    width:100%;
  }
  .usage-grid{
    grid-template-columns:1fr;
  }
  .usage-row{
    grid-template-columns:1fr;
  }
  .usage-recent{
    max-height:340px;
  }
  .usage-pending{
    grid-template-columns:1fr;
  }
  .usage-pending__row{
    align-items:flex-start;
    flex-direction:column;
  }
  .usage-pending__actions{
    width:100%;
  }
  .usage-pending__actions a,
  .usage-pending__actions button{
    flex:1 1 0;
  }
  .usage-attention{
    top:auto;
    bottom:16px;
    transform:translateX(-50%);
    width:calc(100vw - 32px);
  }
  .usage-coachmark__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .usage-coachmark__actions button{
    width:100%;
  }
  .studio-topup-modal{
    padding:12px;
  }
  .studio-topup{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    border-radius:14px;
  }
  .studio-topup__head,
  .studio-topup__packages,
  .studio-topup__side{
    padding:14px;
  }
  .studio-topup__packages{
    grid-template-columns:1fr;
  }
  .studio-topup-modal[data-method="bank_transfer"] .studio-topup{
    width:calc(100vw - 16px);
  }
  .studio-topup-modal[data-method="bank_transfer"] .studio-topup__packages{
    grid-template-columns:1fr;
  }
  .usage-help-modal{
    padding:10px;
  }
  .usage-help{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    border-radius:16px;
  }
  .usage-help__head{
    padding:18px;
  }
  .usage-help__head h2{
    font-size:1.28rem;
  }
  .usage-help__body{
    grid-template-rows:auto minmax(0,1fr);
  }
  .usage-help__nav{
    padding:12px;
    grid-template-columns:1fr;
    max-height:210px;
  }
  .usage-help__content{
    padding:12px;
  }
  .usage-help-panel{
    padding:18px;
    border-radius:16px;
  }
  .usage-help-panel h3{
    font-size:1.15rem;
  }
  .usage-help-stats{
    grid-template-columns:1fr;
  }
}
.builder-files__status.is-skip{
  color:#64748b;
}
.builder-timeline__badge{
  padding:2px 8px;
  border-radius:999px;
  font-size:0.7rem;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
}
.builder-timeline__badge.is-ok{
  border-color:#bbf7d0;
  background:#ecfdf3;
  color:#166534;
}
.builder-timeline__badge.is-low{
  border-color:#fed7aa;
  background:#fff7ed;
  color:#9a3412;
}
.builder-timeline__badge.is-complete{
  border-color:#e2e8f0;
  background:#f8fafc;
  color:#334155;
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.08);
}
.builder-timeline__badge.is-failed{
  border-color:#cbd5f5;
  background:#f1f5f9;
  color:#1e293b;
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.12);
}
.builder-timeline__body{
  margin-top:10px;
  display:none;
  gap:10px;
  flex-direction:column;
}
.builder-timeline.is-open .builder-timeline__body{
  display:flex;
}
.builder-timeline__entry{
  border-top:1px dashed #e2e8f0;
  padding-top:8px;
}
.builder-timeline__entry-title{
  font-weight:600;
  color:#0f172a;
}
.builder-timeline__entry-meta{
  display:flex;
  gap:6px;
  margin-top:4px;
}
.builder-timeline__pill{
  padding:2px 6px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size:0.68rem;
}
.builder-timeline__list{
  margin-top:6px;
}
.builder-timeline__list-label{
  font-size:0.72rem;
  color:#64748b;
  margin-bottom:2px;
}
.builder-timeline__list ul{
  margin:0;
  padding-left:16px;
}
.builder-timeline__note{
  margin-top:6px;
  font-size:0.74rem;
  color:#94a3b8;
}
.builder-timeline__empty{
  color:#94a3b8;
}
.assistant__wrote{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.assistant__wrote-row{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  padding-left:22px;
}
.assistant__wrote-row::before{
  content:"";
  position:absolute;
  left:0;
  width:14px;
  height:16px;
  border:1px solid #cbd5e1;
  border-radius:3px;
  background:linear-gradient(180deg,#ffffff,#f1f5f9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
}
.assistant__wrote-row::after{
  content:"";
  position:absolute;
  left:3px;
  top:4px;
  width:8px;
  height:2px;
  background:#cbd5e1;
  border-radius:2px;
}
.assistant__wrote-label{
  font-weight:700;
  color:#0f172a;
  font-size:0.88rem;
}
.assistant__wrote-pill{
  background:#e5e7eb;
  color:#334155;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.78rem;
  border:1px solid #d1d5db;
}
.assistant__note{
  color:#0f172a;
  font-size:0.88rem;
  line-height:1.6;
}
.assistant__meta{
  color:#94a3b8;
  font-size:0.78rem;
}
.assistant__suggestions{
  margin-top:6px;
}
.assistant__suggestions-title{
  font-size:0.75rem;
  color:#94a3b8;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.assistant__suggestions-icon{font-size:0.85rem}
.assistant__suggestions-list{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.assistant__suggestions-link{
  border:none;
  background:transparent;
  padding:4px 2px;
  font-size:0.78rem;
  cursor:pointer;
  color:#64748b;
}
.assistant__suggestions-divider{
  width:1px;
  height:18px;
  background:#e2e8f0;
  display:inline-block;
}
.assistant__new-workspace{
  margin-top:8px;
  padding:12px;
  border-radius:14px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.assistant__new-workspace-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.assistant__new-workspace-title{
  font-size:0.86rem;
  font-weight:700;
  color:#0f172a;
}
.assistant__new-workspace-cancel{
  border:none;
  background:transparent;
  color:#94a3b8;
  font-size:0.72rem;
  cursor:pointer;
  padding:2px 4px;
}
.assistant__new-workspace-cancel:hover{
  color:#64748b;
}
.assistant__new-workspace-text{
  font-size:0.78rem;
  color:#64748b;
  line-height:1.5;
}
.assistant__new-workspace-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.assistant__new-workspace-btn{
  border:1px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  border-radius:999px;
  padding:6px 12px;
  font-size:0.76rem;
  cursor:pointer;
  transition:background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.assistant__new-workspace-btn:hover{
  border-color:#cbd5e1;
  background:#f8fafc;
}
.assistant__new-workspace-btn.is-primary{
  border-color:#0f172a;
  background:#0f172a;
  color:#ffffff;
}
.assistant__new-workspace-btn.is-primary:hover{
  border-color:#1f2937;
  background:#1f2937;
}
.assistant__new-workspace-btn:disabled{
  cursor:default;
  opacity:0.6;
}
.assistant__build-confirm{
  margin-top:8px;
  padding:12px;
  border-radius:14px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.assistant__build-confirm-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.assistant__build-confirm-title{
  font-size:0.86rem;
  font-weight:700;
  color:#0f172a;
}
.assistant__build-confirm-cancel{
  border:none;
  background:transparent;
  color:#94a3b8;
  font-size:0.72rem;
  cursor:pointer;
  padding:2px 4px;
}
.assistant__build-confirm-cancel:hover{
  color:#64748b;
}
.assistant__build-confirm-text{
  font-size:0.78rem;
  color:#64748b;
  line-height:1.5;
}
.assistant__build-confirm-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.assistant__build-confirm-btn{
  border:1px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  border-radius:999px;
  padding:6px 12px;
  font-size:0.76rem;
  cursor:pointer;
  transition:background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.assistant__build-confirm-btn:hover{
  border-color:#cbd5e1;
  background:#f8fafc;
}
.assistant__build-confirm-btn.is-primary{
  border-color:#0f172a;
  background:#0f172a;
  color:#ffffff;
}
.assistant__build-confirm-btn.is-primary:hover{
  border-color:#1f2937;
  background:#1f2937;
}

/* collapse */
.frame.assistant-collapsed{grid-template-columns: 40px var(--sidebar-w) 1fr;}
.frame.assistant-collapsed .assistant__feed,
.frame.assistant-collapsed .assistant__composer,
.frame.assistant-collapsed .assistant__sub{display:none;}
.frame.assistant-collapsed .assistant__top{justify-content:center}
.frame.assistant-collapsed .assistant__collapse{transform:rotate(180deg)}
.frame.assistant-collapsed .assistant__history-btn{display:none;}
.frame.assistant-collapsed .assistant{
  width:40px;
  min-width:40px;
  max-width:40px;
  padding:6px 4px;
  border-right:1px solid var(--border);
  align-items:flex-start;
}
.frame.assistant-collapsed .assistant__brand{display:none;}
.frame.assistant-collapsed .assistant__top{
  padding:6px 0;
  justify-content:center;
}
.frame.assistant-collapsed .assistant__collapse{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  display:grid;
  place-items:center;
  padding:0;
  margin:0 auto;
}

/* collapse workspace sidebar on desktop */
.frame.sidebar-collapsed{
  grid-template-columns: var(--assistant-w) 0 1fr;
}
.frame.sidebar-collapsed .sidebar{
  width:0;
  min-width:0;
  max-width:0;
  flex:0 0 0;
  padding:0;
  border-right:0;
  overflow:hidden;
}

/* if both collapses are active */
.frame.assistant-collapsed.sidebar-collapsed{
  grid-template-columns: 56px 0 1fr;
}

.chatbtn{display:none}

.member-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.member-table th,
.member-table td{
  border-bottom:1px solid rgba(148,163,184,.18);
  padding:12px 14px;
  text-align:left;
}
.member-table thead th{
  color:#64748b;
  background:#f8fafc;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.member-table tbody tr{
  background:#fff;
}
.member-table tbody tr:hover{
  background:#f8fafc;
}
.member-table tbody tr:last-child td{
  border-bottom:0;
}
.member-table td{
  color:#0f172a;
  vertical-align:middle;
}
.member-table th:last-child,
.member-table td:last-child{text-align:right;}
.member-table .pill.slim.ghost{
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,.28);
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
.member-table .memberRoleSelect{
  height:34px;
  border:1px solid rgba(148,163,184,.26);
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:700;
  padding:0 28px 0 10px;
}
.member-table .memberRemoveBtn{
  height:32px;
  border-radius:10px;
  background:#fff!important;
  border:1px solid rgba(220,38,38,.18)!important;
  color:#991b1b;
  font-size:12px;
  font-weight:800;
}
.member-table .memberRemoveBtn:hover{
  background:#fff1f2!important;
}
.member-table__empty{
  color:#94a3b8!important;
  text-align:center!important;
  padding:18px 14px!important;
}

.btn.is-disabled{
  pointer-events:none;
  opacity:0.7;
  cursor:not-allowed;
}
.btn.is-success{
  background:linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff;
  border:none;
}

@media (max-width: 1180px){
  .frame{grid-template-columns: max(320px, var(--assistant-w)) var(--sidebar-w) 1fr;}
}

@media (max-width: 1400px){
  body.onium-workspace-dashboard{
    min-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .frame{display:block; min-height:100dvh; height:auto; overflow-x:hidden;}
  .app{display:block; width:100%; min-height:100dvh; height:auto; overflow-x:hidden;}
  .frame > .app{grid-column:auto;}
  body.onium-workspace-dashboard .main{
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  body.onium-workspace-dashboard .sidebar{
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    height: 100dvh !important;

    display: none !important;
    transform: translateX(-102%) !important;
    pointer-events: none !important;

    width:var(--sidebar-w);
    box-shadow:0 20px 60px rgba(15,23,42,.18);
    background:var(--panel);
    border-right:1px solid var(--border);
    padding:14px 12px;
    transition:transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s cubic-bezier(.16,1,.3,1); z-index:50;
  }
  body.onium-workspace-dashboard .sidebar.open{
    display: flex !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  body.onium-workspace-dashboard .assistant{
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    height: 100dvh !important;

    display: none !important;
    transform: translateX(-102%) !important;
    pointer-events: none !important;

    width:var(--assistant-w);
    box-shadow:0 20px 60px rgba(15,23,42,.18);
    background:var(--panel);
    border-right:1px solid var(--border);
    transition:transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s cubic-bezier(.16,1,.3,1); z-index:60;
  }
  body.onium-workspace-dashboard .assistant.open{
    display: flex !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .hamb{display:inline-grid}
  .content{padding:18px}
  .grid2{grid-template-columns:1fr}
  .chatbtn{display:inline-grid}
}




#creativeAdTrigger{
  height: 34px;
  border-radius: 8px;

}