@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --panel: #fffdf9;
  --bg: #f7f5ef;
  --border: #e3ded4;
  --text: #2b2725;
  --text-muted: #8d857d;
  --yellow: #ffcc33;
  --yellow-hover: #f2bd1f;
  --green: #2fb344;
  --red: #d64545;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter Tight', -apple-system, sans-serif;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

a { color: inherit; }

/* ---- Layout shell ---- */
.shell {
  min-height: 100vh;
}

.topbar {
  min-height: 70px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-brand {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.topbar-separator { color:var(--border); font-size:22px; }.topbar-location { font-size:13px; }.topbar-account { margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--text-muted); font-size:12px; }.topbar-account a { color:var(--text); }

.main {
  padding: 34px 30px 30px;
  max-width: 720px;
  margin: 0 auto;
}

.launchpad-head { max-width:720px; margin:0 auto; padding:0 0 22px; }.launchpad-head h1 { margin:0; font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.15; }.launchpad-head .page-sub { max-width:440px; margin:8px 0 0; font-size:13.5px; line-height:1.6; }
.launchpad-grid { max-width:720px; margin:0 auto; column-count:3; column-gap:12px; }
.launchpad-section { max-width:720px; margin:0 auto; }.launchpad-section + .launchpad-section { margin-top:26px; }
.launchpad-section-heading { display:flex; align-items:center; gap:11px; margin:0 0 11px; font:500 9.5px var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:#a9a29b; }
.launchpad-section-heading::after { content:""; height:1px; flex:1; background:#e3ded4; }.launchpad-section-other { margin-top:26px; }
.launchpad-card-wrap { break-inside:avoid; margin-bottom:12px; cursor:grab; }
.launchpad-card-wrap.is-dragging { opacity:.4; }
.launchpad-card-wrap:active { cursor:grabbing; }
.launchpad-card { position:relative; display:flex; min-height:132px; flex-direction:column; gap:11px; padding:15px 16px; border-radius:19px; background:var(--panel); border:1px solid var(--border); box-shadow:0 1px 2px rgba(60,34,18,.06); color:var(--text); transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s; }
.launchpad-card:hover { transform:translateY(-2px); box-shadow:0 3px 8px rgba(60,34,18,.09),0 20px 40px -22px rgba(60,34,18,.5); }
.launchpad-card-featured { min-height:176px; background:#fff5d6; border-color:#e5b91f; }
.launchpad-card-studio { min-height:210px; }.launchpad-card-media { min-height:176px; }.launchpad-card-plugin { min-height:148px; }.launchpad-card-people { min-height:152px; }.launchpad-card-plugins { min-height:132px; }.launchpad-card-settings { min-height:136px; }
.launchpad-card-link { position:absolute; inset:0; border-radius:inherit; z-index:0; }
.launchpad-card-top { position:relative; z-index:1; display:flex; align-items:flex-start; gap:9px; }
.launchpad-card-copy,.launchpad-preview,.launchpad-avatars { position:relative; z-index:1; }
.launchpad-card-top,.launchpad-card-copy,.launchpad-preview,.launchpad-avatars,.launchpad-media-grid,.launchpad-studio-preview { pointer-events:none; }
.launchpad-card-actions { position:relative; z-index:1; display:flex; align-items:center; margin-left:auto; }.launchpad-pin-form { position:absolute; z-index:3; top:15px; right:16px; margin:0; }
.launchpad-pin { width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:9px; background:var(--panel); color:#a9a29b; font-size:13px; line-height:1; cursor:pointer; opacity:0; transform:scale(.92); box-shadow:0 1px 2px rgba(60,34,18,.06); transition:opacity .16s,transform .16s,background .16s,color .16s; }
.launchpad-card:hover .launchpad-pin,.launchpad-pin:focus-visible { opacity:1; transform:scale(1); }.launchpad-pin:hover { background:#fff3c9; color:#8a6500; }.launchpad-pin.is-pinned { color:#a87900; }
.launchpad-card-featured .launchpad-pin.is-pinned,.launchpad-card-featured .launchpad-pin:hover { color:#b88a08; }
.launchpad-icon { width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:#f1ede4; color:#5c554f; font-size:16px; }
.launchpad-icon-media { background:#fff8df; color:#a87900; }
.launchpad-icon-studio { background:#fffdf9; color:#b88a08; }
.launchpad-card-plugin .launchpad-icon { background:#f1edfa; color:#7864a8; }
.launchpad-card-people .launchpad-icon { background:#f1ede4; color:#5c554f; }
.launchpad-card-plugins .launchpad-icon { background:#fff3c9; color:#8a6500; }
.launchpad-card-settings .launchpad-icon { background:#eaf1f7; color:#46708f; }
.launchpad-card-ai .launchpad-icon,.launchpad-icon-ai { background:#edf4ff; color:#3568a8; }.launchpad-card-ai { min-height:164px; background:#f7faff; border-color:#cad9ec; }
.launchpad-badge { font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:8px; background:#fff3c9; color:#8a6500; white-space:nowrap; }
.launchpad-card-ai .launchpad-badge { background:#eaf2ff; color:#3568a8; }
.launchpad-card:hover .launchpad-badge { opacity:0; }
.launchpad-card-featured .launchpad-badge { background:#fffdf9; color:#9a7000; }
.launchpad-arrow { margin-left:auto; color:#a9a29b; font-size:14px; }
.launchpad-card-copy { display:flex; flex-direction:column; gap:3px; margin-top:auto; }
.launchpad-card strong { font-size:14px; font-weight:600; letter-spacing:-.016em; color:var(--text); }
.launchpad-card-featured strong { font-size:15px; }
.launchpad-card small { font-size:11.5px; line-height:1.45; color:#a9a29b; }
.launchpad-media-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:1px; }
.launchpad-media-grid img,.launchpad-media-grid i { display:block; width:100%; aspect-ratio:1/1; min-width:0; border:1px solid #e3ded4; border-radius:7px; background:#f1ede4; object-fit:cover; }
.launchpad-studio-preview { position:relative; z-index:1; display:grid; grid-template-columns:36% 1fr; height:54px; margin-top:2px; overflow:hidden; border:1px solid #e8d9a8; border-radius:9px; background:#fffdf9; }.launchpad-studio-preview > i { border-right:1px solid #e8d9a8; background:#f3eedf; }.launchpad-studio-preview > span { display:flex; flex-direction:column; gap:5px; padding:10px; }.launchpad-studio-preview b { display:block; height:4px; border-radius:4px; background:#e8e0cc; }.launchpad-studio-preview b:nth-child(2) { width:72%; }.launchpad-studio-preview b:nth-child(3) { width:45%; background:#e5b91f; }
.launchpad-preview { display:flex; gap:6px; margin-top:11px; }
.launchpad-preview i,.launchpad-preview img { flex:1 1 0; min-width:0; height:34px; border-radius:9px; background:#f1ede4; border:1px solid var(--border); object-fit:cover; }
.launchpad-avatars { display:flex; align-items:center; margin-top:11px; }
.launchpad-avatars i { width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:9px; font-weight:700; font-style:normal; border:1.5px solid var(--panel); margin-left:-7px; }
.launchpad-avatars i:first-child { margin-left:0; }
.launchpad-avatars i.you { background:#e9f2ec; color:#3f7d54; }
.launchpad-avatars i.a { background:#fff3c9; color:#8a6500; }
.launchpad-avatars i.b { background:#fdf3df; color:#8a5a06; }
.launchpad-foot { max-width:720px; margin:8px auto 0; padding:16px 2px 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; color:var(--text-muted); font-size:12px; }
.launchpad-utilities { max-width:720px; margin:28px auto 0; }.launchpad-utility-list { border-top:1px solid var(--border); }
.launchpad-utility-wrap { position:relative; border-bottom:1px solid var(--border); cursor:grab; }.launchpad-utility-wrap:active { cursor:grabbing; }
.launchpad-utility { display:flex; align-items:center; gap:13px; min-height:65px; padding:10px 42px 10px 2px; text-decoration:none; transition:background .16s; }.launchpad-utility:hover { background:rgba(241,237,228,.42); }
.launchpad-utility .launchpad-icon { width:32px; height:32px; flex-basis:32px; border-radius:10px; font-size:15px; }.launchpad-utility-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:1px; }.launchpad-utility-copy strong { font-size:13px; font-weight:600; letter-spacing:-.012em; }.launchpad-utility-copy small { overflow:hidden; color:#a9a29b; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.launchpad-utility-badge { margin-left:auto; padding:3px 8px; border-radius:7px; background:#fff3c9; color:#8a6500; font-size:10px; font-weight:600; white-space:nowrap; }.launchpad-utility-arrow { color:#c3bcb3; font-size:13px; }
.launchpad-utility-pin-form { position:absolute; z-index:2; top:50%; right:20px; margin:0; transform:translateY(-50%); }.launchpad-utility-pin { display:grid; width:24px; height:24px; place-items:center; border:0; border-radius:7px; background:var(--panel); color:#a9a29b; cursor:pointer; font-size:12px; opacity:0; transition:opacity .16s; }.launchpad-utility-wrap:hover .launchpad-utility-pin,.launchpad-utility-pin:focus-visible { opacity:1; }.launchpad-utility-pin:hover { background:#fff3c9; color:#8a6500; }

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}

h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
.page-sub { color: var(--text-muted); margin: 0 0 24px; }

/* ---- Panels ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(60,34,18,.06);
  padding: 20px;
  margin-bottom: 16px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* ---- Row list (people/plugins rosters) ---- */
.row-list { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border); }
.row-item:last-child { border-bottom: none; }
.row-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: #e9f2ec; color: #3f7d54; }
.row-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.row-copy strong { font-size: 14px; font-weight: 600; letter-spacing: -.014em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-copy small { font-size: 12px; color: #a9a29b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-trailing { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.row-status { font-size: 13px; font-weight: 600; white-space: nowrap; }
.row-status.is-active, .row-status.is-you { color: var(--green); }
.row-status.is-inactive { color: var(--text-muted); }
.row-item form { margin: 0; }

/* ---- Status dot ---- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.dot.off { background: #c7c7c7; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--yellow);
  color: #16171a;
}
.btn-primary:hover { background: var(--yellow-hover); }

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover { background: #f5f5f5; }
.btn-danger { background: transparent; border-color: #efcccc; color: var(--red); }
.btn-danger:hover { background: #fff1f1; }

.btn-block { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: .45; }

/* ---- Forms ---- */
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text-muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  background: #fff;
  margin-bottom: 14px;
}

input[type="search"], input[type="file"] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; font: inherit;
}

/* ---- Core media library ---- */
.media-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.media-heading .page-sub { margin-bottom:0; }.media-count { padding:5px 9px; border-radius:9px; background:#f1ede4; color:var(--text-muted); font:10px var(--font-mono); }.media-create-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr); gap:12px; margin:25px 0 30px; }.media-generate,.media-upload-card { display:flex; min-width:0; flex-direction:column; padding:19px; border:1px solid var(--border); border-radius:19px; background:var(--panel); }.media-generate { border-color:#cad9ec; background:#f7faff; }.media-create-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; }.media-create-head > div { display:flex; flex-direction:column; }.media-create-head strong { font-size:15px; }.media-create-head small { color:var(--text-muted); font-size:11px; }.media-create-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f1ede4; font-size:17px; }.media-create-icon.is-ai { background:#e4efff; color:#3568a8; }.media-generate textarea { min-height:104px; resize:vertical; }.media-generation-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.media-generate .btn,.media-upload-card .btn { align-self:flex-start; margin-top:auto; }.media-upload-card input { margin-bottom:14px; }.media-upload { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: end; gap: 14px; }
.media-upload input { margin: 0; }.media-upload label span { font-weight: 400; }
.media-library-bar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:12px; }.media-library-bar h2 { margin:0; }.media-search { position:relative; display:flex; gap:8px; margin:0; }.media-search > i { position:absolute; z-index:1; left:11px; top:50%; color:var(--text-muted); transform:translateY(-50%); }.media-search input { width:230px; margin:0; padding-left:32px; }
.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.media-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: var(--panel); }
.media-preview { display: grid; aspect-ratio: 4/3; overflow: hidden; background: #f0f0f0; place-items: center; }
.media-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-card-body { padding: 13px; }.media-card-body > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card-body > small { display: block; margin: 3px 0 12px; color: var(--text-muted); font-size: 11px; }
.media-card-body input { margin-bottom: 8px; }.media-card-body form { margin: 0; }
.media-actions { display: flex; align-items: center; gap: 7px; margin-top: 9px; }.media-actions form { margin-left: auto; }
.media-ai-label { display:inline-flex; align-items:center; gap:5px; width:fit-content; margin:-4px 0 10px; padding:3px 7px; border-radius:7px; background:#edf4ff; color:#3568a8; font-size:9.5px; font-weight:600; }
.media-empty { grid-column: 1/-1; color: var(--text-muted); text-align: center; }
@media (max-width: 800px) { .media-create-grid,.media-upload { grid-template-columns: 1fr; }.media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .launchpad-grid { column-count:2; } }
@media (max-width: 560px) { .main { padding: 22px 18px; }.media-grid { grid-template-columns: 1fr; }.launchpad-grid { column-count:1; }.topbar { padding:12px 18px; }.topbar-account span,.topbar-separator { display:none; }.launchpad-head { padding-top:28px; } }

/* ---- Media workspace ---- */
.main-media { max-width:720px; }.media-heading-actions { display:flex; gap:8px; }.media-heading-actions .btn { border-radius:11px; }.media-action-panel { margin:22px 0 28px; padding:20px; border:1px solid var(--border); border-radius:19px; background:var(--panel); }.media-action-panel[hidden],.media-folder-form[hidden],.media-card-details[hidden] { display:none!important; }.media-prompt-panel { border-color:#cad9ec; background:#f7faff; }.media-panel-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:15px; }.media-panel-head h2 { margin:0; }.media-panel-head > button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--text-muted); cursor:pointer; }.media-panel-head > button:hover { background:#f1ede4; }.media-drop-zone { min-height:190px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:24px; border:1px dashed #cfc7bb; border-radius:15px; background:#faf8f3; color:var(--text-muted); cursor:pointer; text-align:center; transition:border-color .15s,background .15s; }.media-drop-zone:hover,.media-drop-zone.is-dragging { border-color:#3568a8; background:#edf4ff; }.media-drop-zone > i { margin-bottom:8px; color:#5c554f; font-size:25px; }.media-drop-zone strong { color:var(--text); font-size:14px; }.media-drop-zone span,.media-drop-zone small { font-size:11px; }.media-drop-zone small { margin-top:9px; color:#3568a8; }.media-drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }.media-upload-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; margin-top:12px; }.media-upload-meta input { margin:0; }.media-prompt-form textarea { min-height:100px; margin:0; border:0; background:transparent; font-size:17px; resize:vertical; }.media-prompt-form textarea:focus { outline:0; }.media-prompt-tools { display:flex; align-items:end; gap:9px; padding-top:12px; border-top:1px solid #dce5f0; }.media-prompt-tools > div { width:150px; }.media-prompt-tools select { margin:0; }.media-prompt-tools .btn { margin-left:auto; }.media-folders { margin:28px 0 30px; }.media-section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px; }.media-section-heading h2 { margin:0; }.media-new-folder { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:0; background:transparent; color:var(--text-muted); cursor:pointer; font:11px var(--font-body); }.media-new-folder:hover { color:var(--text); }.media-folder-form { display:flex; gap:8px; max-width:370px; margin:0 0 10px; }.media-folder-form input { margin:0; }.media-folder-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; }.media-folder-tile { width:176px; min-width:176px; min-height:72px; display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-content:center; column-gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--panel); text-decoration:none; }.media-folder-tile:hover,.media-folder-tile.is-active { border-color:#cabf70; background:#fffaf0; }.media-folder-tile > span { width:34px; height:34px; grid-row:1/3; display:grid; place-items:center; border-radius:10px; background:#fdf3df; color:#8a5a06; font-size:16px; }.media-folder-tile strong { align-self:end; overflow:hidden; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }.media-folder-tile small { align-self:start; color:var(--text-muted); font-size:10px; }.media-library-section { padding-top:2px; }.media-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.media-preview { aspect-ratio:1/1; }.media-card-body { padding:10px 11px 11px; }.media-card-title { display:flex; align-items:center; gap:7px; }.media-card-title strong { min-width:0; flex:1; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.media-card-title button { width:25px; height:25px; display:grid; flex:0 0 25px; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--text-muted); cursor:pointer; }.media-card-title button:hover { background:#f1ede4; }.media-card-details { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }.media-card-details select,.media-card-details input { margin-bottom:8px; }.media-card-details label { font-size:10px; }.media-empty { grid-column:1/-1; padding:40px; border:1px dashed #d2cabd; border-radius:17px; background:var(--panel); color:var(--text-muted); text-align:center; }
@media (max-width:900px) { .media-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .media-heading { align-items:flex-start; flex-direction:column; }.media-heading-actions { width:100%; }.media-heading-actions .btn { flex:1; }.media-upload-meta { grid-template-columns:1fr; }.media-prompt-tools { align-items:stretch; flex-wrap:wrap; }.media-prompt-tools > div { width:calc(50% - 5px); }.media-prompt-tools .btn { width:100%; margin-left:0; justify-content:center; }.media-library-bar { align-items:stretch; flex-direction:column; }.media-search input { width:100%; }.media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .media-grid { grid-template-columns:1fr; }.media-folder-tile { width:155px; min-width:155px; } }

/* Media Library standalone baseline — Kovi yellow edition */
.main-media { max-width:720px; padding-top:30px; padding-bottom:70px; }.ml-head { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }.ml-head h1 { margin-top:6px; font-size:27px; letter-spacing:-.03em; }.ml-head > div:first-child > p:last-child { margin:6px 0 0; color:#5c554f; font-size:13.5px; }.ml-add { margin-left:auto; display:flex; align-items:center; gap:11px; }.ml-add > span { color:#a9a29b; font-size:12.5px; }.ml-add button { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:14px; background:#ffcc33; color:#241a06; cursor:pointer; font-size:19px; box-shadow:0 1px 2px rgba(60,34,18,.14),0 10px 20px -14px rgba(60,34,18,.5); }.ml-add button i { transition:transform .36s cubic-bezier(.22,.61,.36,1); }.ml-add button.is-open { background:#f1ede4; color:#5c554f; box-shadow:none; }.ml-add button.is-open i { transform:rotate(135deg); }.ml-composer { margin-top:20px; overflow:hidden; border:1px solid #e3ded4; border-radius:20px; background:#fffdf9; box-shadow:0 1px 2px rgba(60,34,18,.05),0 20px 40px -28px rgba(60,34,18,.35); }.ml-composer[hidden],.ml-pane[hidden],.ml-details[hidden] { display:none!important; }.ml-composer > header { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #f1ede4; }.ml-composer > header > span { color:#a9a29b; font-size:11px; }.ml-composer > header > button { width:28px; height:28px; display:grid; margin-left:auto; place-items:center; border:0; border-radius:8px; background:transparent; color:#a9a29b; cursor:pointer; }.ml-segments { display:flex; gap:3px; padding:3px; border-radius:11px; background:#f4f1ea; }.ml-segments button { height:30px; display:flex; align-items:center; gap:7px; padding:0 13px; border:0; border-radius:9px; background:transparent; color:#8b8379; cursor:pointer; font:600 12.5px var(--font-body); }.ml-segments button.is-active { background:#fffdf9; color:#2b2725; box-shadow:0 1px 2px rgba(60,34,18,.14); }.ml-prompt { padding:18px; }.ml-prompt textarea { width:100%; min-height:100px; margin:0; padding:3px 4px 16px; border:0; background:transparent; font-size:18px; resize:vertical; }.ml-prompt textarea:focus { outline:0; }.ml-prompt footer { display:flex; align-items:end; gap:9px; padding-top:12px; border-top:1px solid #f1ede4; }.ml-option { min-width:155px; }.ml-option label { font-size:9px; }.ml-option select { height:34px; margin:0; padding:0 30px 0 10px; border-radius:10px; font-size:12px; }.ml-send { width:40px; height:40px; display:grid; margin-left:auto; place-items:center; border:0; border-radius:13px; background:#ffcc33; color:#241a06; cursor:pointer; font-size:16px; }.ml-upload { padding:16px; }.ml-drop { display:flex; align-items:center; gap:14px; padding:13px 14px; border:1px dashed #d8d2c6; border-radius:14px; background:#f7f4ed; cursor:pointer; }.ml-drop.is-dragging { border-color:#ffcc33; background:#fff8dc; }.ml-drop input { position:absolute; width:1px; height:1px; opacity:0; }.ml-file-icon { width:36px; height:36px; display:grid; flex:0 0 36px; place-items:center; border-radius:10px; background:#fffdf9; color:#8b8379; }.ml-drop > div { min-width:0; display:flex; flex:1; flex-direction:column; }.ml-drop strong { font-size:13px; }.ml-drop small { color:#a9a29b; font-size:10.5px; }.ml-drop > b { height:30px; display:flex; align-items:center; padding:0 13px; border:1px solid #d2cabd; border-radius:9px; background:#fffdf9; font-size:12.5px; font-weight:500; }.ml-upload footer { display:flex; align-items:center; gap:8px; margin-top:12px; }.ml-upload footer input { flex:1; margin:0; }.ml-collections { margin-top:34px; }.ml-collections > header,.ml-library > header { display:flex; align-items:flex-end; gap:14px; }.ml-collections h2,.ml-library h2 { margin:5px 0 0; font-size:17px; letter-spacing:-.02em; }.ml-collections > header > div:last-child { margin-left:auto; display:flex; align-items:center; gap:10px; }.ml-collections > header > div:last-child > span { color:#a9a29b; font-size:12px; }.ml-collections > header button { height:32px; display:flex; align-items:center; gap:6px; padding:0 13px 0 11px; border:1px solid #e3ded4; border-radius:10px; background:#fffdf9; color:#2b2725; cursor:pointer; font:500 12.5px var(--font-body); }.ml-folder-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; margin-top:14px; }.ml-folder { overflow:hidden; border:1px solid #e3ded4; border-radius:17px; background:#fffdf9; color:#2b2725; text-decoration:none; box-shadow:0 1px 2px rgba(60,34,18,.05); transition:transform .22s,box-shadow .22s,border-color .2s; }.ml-folder:hover { transform:translateY(-2px); }.ml-folder.is-active { border-color:#ffcc33; box-shadow:0 0 0 3px rgba(255,204,51,.2),0 1px 2px rgba(60,34,18,.06); }.ml-folder-cover { position:relative; height:126px; display:grid; overflow:hidden; place-items:center; background:#f1ede4; color:#a9a29b; font-size:22px; }.ml-folder-cover img { width:100%; height:100%; object-fit:cover; }.ml-folder-cover > span { position:absolute; right:9px; bottom:9px; height:20px; display:flex; align-items:center; padding:0 8px; border-radius:6px; background:rgba(255,253,249,.92); color:#5c554f; font:9px var(--font-mono); letter-spacing:.1em; backdrop-filter:blur(6px); }.ml-folder footer { display:flex; align-items:center; gap:10px; padding:11px 13px 12px; }.ml-folder footer > div { min-width:0; display:flex; flex-direction:column; }.ml-folder footer strong { overflow:hidden; font-size:13.5px; text-overflow:ellipsis; white-space:nowrap; }.ml-folder footer small { margin-top:3px; color:#c3bcb3; font:9.5px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }.ml-folder footer > i { width:8px; height:8px; margin-left:auto; border-radius:50%; background:#e3ded4; }.ml-folder.is-active footer > i { background:#ffcc33; }.ml-folder-new { min-height:126px; display:flex; align-items:center; justify-content:center; align-self:stretch; flex-direction:column; gap:9px; border:1px dashed #d2cabd; border-radius:17px; background:transparent; color:#a9a29b; cursor:pointer; font:500 12.5px var(--font-body); }.ml-folder-new:hover { border-color:#c4a222; background:rgba(255,204,51,.05); color:#5c554f; }.ml-library { margin-top:38px; }.ml-library h2 small { margin-left:6px; color:#c3bcb3; font:10px var(--font-mono); }.ml-library-tools { margin-left:auto; display:flex; align-items:center; gap:9px; }.ml-library-tools form { position:relative; display:flex; align-items:center; min-width:250px; height:36px; padding:0 14px; border:1px solid #e3ded4; border-radius:12px; background:#fffdf9; }.ml-library-tools form > i { color:#c3bcb3; }.ml-library-tools form input:not([type=hidden]) { min-width:0; height:auto; margin:0; padding:0 0 0 8px; border:0; background:transparent; }.ml-library-tools form input:focus { outline:0; }.ml-library-tools > a { height:36px; display:flex; align-items:center; gap:7px; padding:0 13px; border:1px solid #e3ded4; border-radius:12px; background:#fffdf9; color:#5c554f; font-size:12.5px; font-weight:500; text-decoration:none; }.ml-masonry { margin-top:16px; column-count:3; column-gap:14px; }.ml-tile { position:relative; break-inside:avoid; margin-bottom:14px; overflow:hidden; border:1px solid #e3ded4; border-radius:16px; background:#f1ede4; box-shadow:0 1px 2px rgba(60,34,18,.05); transition:transform .22s,box-shadow .22s; }.ml-tile:hover { transform:translateY(-2px); box-shadow:0 10px 24px -18px rgba(60,34,18,.6); }.ml-tile > a { display:block; }.ml-tile > a img { display:block; width:100%; height:auto; min-height:150px; object-fit:cover; }.ml-caption { position:absolute; right:0; bottom:0; left:0; padding:34px 13px 12px; background:linear-gradient(to top,rgba(24,18,14,.82),rgba(24,18,14,.35) 55%,transparent); color:#fffdf9; pointer-events:none; }.ml-caption strong,.ml-caption small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ml-caption strong { font-size:12.5px; }.ml-caption small { margin-top:3px; color:rgba(255,253,249,.7); font:9.5px var(--font-mono); letter-spacing:.05em; }.ml-ai { position:absolute; top:9px; left:9px; height:21px; display:flex; align-items:center; padding:0 8px; border-radius:7px; background:rgba(255,253,249,.9); color:#8f6a12; font:9px var(--font-mono); letter-spacing:.12em; backdrop-filter:blur(6px); }.ml-more { position:absolute; top:9px; right:9px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:9px; background:rgba(24,18,14,.5); color:#fffdf9; cursor:pointer; opacity:0; backdrop-filter:blur(6px); transition:opacity .2s; }.ml-tile:hover .ml-more,.ml-more:focus { opacity:1; }.ml-details { position:relative; z-index:3; padding:12px; border-top:1px solid #e3ded4; background:#fffdf9; }.ml-details label { font-size:9px; }.ml-details input,.ml-details select { margin-bottom:8px; }.ml-details > div { display:flex; gap:7px; }.ml-details > div form { margin-left:auto; }.media-folder-form { margin-top:12px; }
@media (max-width:780px) { .ml-masonry { column-count:2; }.ml-collections > header > div:last-child > span { display:none; }.ml-library > header { align-items:stretch; flex-direction:column; }.ml-library-tools { margin-left:0; }.ml-library-tools form { flex:1; } }
@media (max-width:560px) { .main-media { padding-top:24px; }.ml-add > span { display:none; }.ml-prompt footer { flex-wrap:wrap; }.ml-option { width:calc(50% - 5px); min-width:0; }.ml-send { margin-left:auto; }.ml-upload footer { align-items:stretch; flex-direction:column; }.ml-folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.ml-folder-cover { height:105px; }.ml-library-tools { align-items:stretch; flex-direction:column; }.ml-library-tools form { width:100%; min-width:0; }.ml-library-tools > a { justify-content:center; }.ml-masonry { column-count:1; } }
.plugin-upload { display:grid; grid-template-columns:1fr minmax(220px,1fr) auto; align-items:center; gap:16px; }.plugin-upload h2,.plugin-upload p { margin:0; }.plugin-upload p { margin-top:4px; color:var(--text-muted); font-size:12px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }.settings-grid small { display:block; margin:-9px 0 14px; color:var(--text-muted); font-size:10px; }.settings-wide { grid-column:1/-1; }.check-row { display:flex; align-items:center; gap:8px; color:var(--text); }.check-row input { margin:0; }
@media (max-width: 760px) { .plugin-upload,.settings-grid { grid-template-columns:1fr; }.settings-wide { grid-column:auto; } }
.publish-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; }.publish-panel h2,.publish-panel p { margin:0; }.publish-panel p { max-width:650px; margin-top:5px; color:var(--text-muted); }.publish-panel small { display:block; margin-top:9px; color:var(--text-muted); }.seo-warnings { margin:0; padding-left:20px; color:var(--text-muted); }
.main-studio { max-width:1380px; padding:26px 30px 44px; }.studio-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; }.studio-heading .page-sub { margin-bottom:0; }.studio-heading-actions { display:flex; align-items:center; gap:8px; }.studio-heading-actions form { margin:0; }.studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:stretch; }.studio-preview-panel,.studio-compose-panel,.studio-queue { background:var(--panel); border:1px solid var(--border); border-radius:19px; box-shadow:0 1px 2px rgba(60,34,18,.06); }.studio-preview-panel { min-width:0; overflow:hidden; }.studio-browser-bar { height:48px; display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:1px solid var(--border); background:#f1ede4; }.studio-browser-bar > span { width:8px; height:8px; border-radius:50%; background:#cfc7bb; }.studio-browser-bar > div { min-width:0; flex:1; margin-left:6px; padding:6px 10px; border:1px solid #ded8ce; border-radius:8px; background:var(--panel); color:#8d857d; font:10px var(--font-mono); }.studio-browser-bar button { width:30px; height:30px; display:grid; place-items:center; border:0; background:transparent; color:#8d857d; cursor:pointer; }.studio-preview-panel iframe { display:block; width:100%; height:650px; border:0; background:#fff; }.studio-compose-panel { display:flex; flex-direction:column; padding:20px; }.studio-compose-panel h2 { margin-bottom:4px; }.studio-help { margin:0 0 18px; color:var(--text-muted); font-size:12px; }.studio-request-form textarea { resize:vertical; }.studio-request-form .btn { margin-top:2px; }.studio-connection { display:flex; gap:10px; margin-top:auto; padding-top:18px; border-top:1px solid var(--border); color:var(--text-muted); }.studio-connection .dot { flex:0 0 7px; margin-top:6px; }.studio-connection strong,.studio-connection small { display:block; }.studio-connection strong { color:var(--text); font-size:12px; }.studio-connection small { margin-top:2px; font-size:10.5px; line-height:1.45; }.studio-queue { margin-top:16px; padding:20px; }.studio-queue-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }.studio-queue-head small { color:var(--text-muted); }.studio-status { padding:4px 8px; border-radius:8px; background:#fdf3df; color:#8a5a06; font-size:10.5px; font-weight:600; }.studio-empty { display:flex; flex-direction:column; align-items:center; padding:34px 20px; color:var(--text-muted); text-align:center; }.studio-empty i { margin-bottom:8px; font-size:20px; }.studio-empty strong { color:var(--text); }.studio-empty span { margin-top:3px; font-size:12px; }
@media (max-width:900px) { .studio-layout { grid-template-columns:1fr; }.studio-preview-panel iframe { height:500px; }.studio-compose-panel { min-height:430px; } }
@media (max-width:600px) { .main-studio { padding:22px 18px; }.studio-heading { align-items:flex-start; flex-direction:column; }.studio-heading-actions { width:100%; }.studio-heading-actions .btn { flex:1; }.studio-preview-panel iframe { height:420px; } }
.studio-devices { display:flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }.studio-devices button { width:34px; height:32px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#a9a29b; cursor:pointer; }.studio-devices button.is-active { background:#f1ede4; color:var(--text); }.studio-workspace { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:stretch; transition:grid-template-columns .22s ease; }.studio-workspace.comments-closed { grid-template-columns:minmax(0,1fr) 0; gap:0; }.studio-workspace.comments-closed .studio-comments-panel { visibility:hidden; opacity:0; transform:translateX(12px); }.studio-frame-stage { display:flex; min-height:680px; justify-content:center; overflow:auto; padding:0; background:#ded8ce; }.studio-frame-stage iframe { width:100%; height:680px; flex:0 0 auto; transition:width .25s ease; }.studio-workspace[data-viewport="tablet"] .studio-frame-stage iframe { width:768px; }.studio-workspace[data-viewport="mobile"] .studio-frame-stage iframe { width:390px; }.studio-comments-panel { min-width:0; display:flex; max-height:729px; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:19px; background:var(--panel); box-shadow:0 1px 2px rgba(60,34,18,.06); transition:opacity .18s,transform .18s; }.studio-comments-head { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 18px 12px; }.studio-comments-head h2 { margin:0; }.studio-comments-head h2 span { color:#b8320a; }.studio-comments-head button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#8d857d; cursor:pointer; }.studio-comments-head button:hover { background:#f1ede4; }.studio-place-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin:0 18px 12px; border:1px dashed #d2cabd; border-radius:12px; background:#f7f5ef; color:#5c554f; cursor:pointer; font:500 12px var(--font-body); }.studio-place-button.is-active { border-style:solid; border-color:#e8410d; background:#fdeee8; color:#b8320a; }.studio-comment-form { padding:0 18px 16px; border-bottom:1px solid var(--border); }.studio-selection { margin-bottom:8px; color:#a9a29b; font-size:10.5px; line-height:1.4; }.studio-comment-form textarea { margin-bottom:8px; resize:vertical; }.studio-upload { display:flex; align-items:center; gap:7px; min-width:0; margin:0 0 10px; color:#8d857d; cursor:pointer; font-weight:500; }.studio-upload span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.studio-upload input { position:absolute; width:1px; height:1px; opacity:0; }.studio-comment-list { min-height:0; flex:1; overflow:auto; padding:2px 18px 18px; }.studio-comment-item { display:grid; grid-template-columns:26px minmax(0,1fr) 26px; gap:9px; padding:13px 0; border-bottom:1px solid var(--border); }.studio-comment-item.is-resolved { opacity:.48; }.studio-comment-number { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#e8410d; color:#fff; font-size:10px; font-weight:600; }.studio-comment-copy { min-width:0; }.studio-comment-copy p { margin:0; font-size:12.5px; line-height:1.45; }.studio-comment-copy small { display:block; margin-top:4px; color:#a9a29b; font-size:9.5px; }.studio-comment-copy a { display:inline-flex; align-items:center; gap:4px; max-width:100%; margin-top:6px; color:#b8320a; font-size:10.5px; text-decoration:none; }.studio-comment-item form { margin:0; }.studio-comment-item form button { width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#a9a29b; cursor:pointer; }.studio-comment-item form button:hover { background:#e9f2ec; color:#3f7d54; }.studio-comment-empty { display:flex; flex-direction:column; align-items:center; padding:30px 12px; color:#a9a29b; text-align:center; }.studio-comment-empty i { margin-bottom:7px; font-size:20px; }.studio-comment-empty strong { color:var(--text); }.studio-comment-empty span { margin-top:3px; font-size:11px; }.studio-action-strip { position:sticky; z-index:20; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; padding:10px 12px; border:1px solid #d2cabd; border-radius:16px; background:rgba(255,253,249,.96); box-shadow:0 10px 30px -18px rgba(60,34,18,.55); backdrop-filter:blur(12px); }.studio-action-strip > div { display:flex; align-items:center; gap:8px; }.studio-action-strip form { margin:0; }.studio-action-strip .btn span { color:#b8320a; }.studio-save-state { display:flex; align-items:center; gap:6px; color:#8d857d; font-size:10.5px; }
.studio-heading-tools { justify-content:flex-end; margin-bottom:10px; }
.studio-submit-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.studio-submit-actions .btn { justify-content:center; }.studio-comment-status { display:inline-flex; margin-top:6px; padding:3px 7px; border-radius:7px; background:#f1ede4; color:#716a63; font-size:9px; font-weight:700; text-transform:uppercase; }.studio-comment-status.is-queued { background:#fdf3df; color:#8a5a06; }.studio-comment-status.is-resolved { background:#e9f2ec; color:#3f7d54; }
.studio-browser-bar .studio-devices { flex:0 0 auto; gap:2px; padding:2px; border:0; border-radius:9px; background:rgba(255,253,249,.72); }.studio-browser-bar .studio-devices button { width:27px; height:26px; border-radius:7px; font-size:12px; }
.main-studio { padding-bottom:88px; }.studio-frame-stage { min-height:max(420px,calc(100dvh - 225px)); height:max(420px,calc(100dvh - 225px)); }.studio-frame-stage iframe { height:100%; }.studio-comments-panel { height:calc(100dvh - 177px); max-height:none; }.studio-action-strip { position:fixed; z-index:20; left:max(18px,calc((100vw - 1380px)/2 + 30px)); right:max(18px,calc((100vw - 1380px)/2 + 30px)); bottom:5px; margin-top:0; padding:10px 12px; border:1px solid #d2cabd; border-radius:16px; background:rgba(255,253,249,.7); box-shadow:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
@media (max-width:900px) { .studio-comments-panel { height:auto; }.studio-frame-stage,.studio-frame-stage iframe { min-height:max(420px,calc(100dvh - 225px)); height:max(420px,calc(100dvh - 225px)); } }
@media (max-width:600px) { .main-studio { padding-bottom:82px; }.studio-action-strip { left:8px; right:8px; bottom:5px; }.studio-action-strip > div { min-width:0; }.studio-action-strip > div:last-child { margin-left:auto; }.studio-frame-stage,.studio-frame-stage iframe { min-height:max(380px,calc(100dvh - 210px)); height:max(380px,calc(100dvh - 210px)); } }
@media (max-width:900px) { .studio-workspace { grid-template-columns:1fr; }.studio-comments-panel { max-height:none; }.studio-workspace.comments-closed { grid-template-columns:1fr; }.studio-workspace.comments-closed .studio-comments-panel { display:none; }.studio-frame-stage,.studio-frame-stage iframe { min-height:max(420px,calc(100dvh - 225px)); height:max(420px,calc(100dvh - 225px)); }.studio-save-state { display:none; } }
@media (max-width:600px) { .studio-devices { align-self:flex-end; }.studio-action-strip { bottom:5px; }.studio-action-strip .btn { padding:9px 11px; }.studio-action-strip > div:first-child .btn { font-size:0; }.studio-action-strip > div:first-child .btn i,.studio-action-strip > div:first-child .btn span { font-size:13px; }.studio-frame-stage,.studio-frame-stage iframe { min-height:max(380px,calc(100dvh - 210px)); height:max(380px,calc(100dvh - 210px)); }.studio-workspace[data-viewport="tablet"] .studio-frame-stage iframe,.studio-workspace[data-viewport="mobile"] .studio-frame-stage iframe { width:390px; } }
.panel-copy { color:var(--text-muted); max-width:760px; }.redirect-form { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:end; gap:12px; margin-top:18px; }.redirect-form input { margin:0; }.redirect-form > span { padding-bottom:10px; color:var(--text-muted); }.redirect-list { margin-top:20px; border-top:1px solid var(--border); }.redirect-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }.redirect-row code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.redirect-row form { margin:0; }.redirect-status { color:var(--text-muted); font:11px var(--font-mono); }.empty-note { color:var(--text-muted); margin:18px 0 0; }
@media (max-width:760px) { .publish-panel { align-items:flex-start; flex-direction:column; }.redirect-form { grid-template-columns:1fr; }.redirect-form > span { display:none; }.redirect-row { grid-template-columns:1fr auto; }.redirect-row > span:first-of-type { display:none; }.redirect-row code:nth-of-type(2) { grid-column:1/-1; }.redirect-status { display:none; } }

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 1px;
  border-color: var(--yellow);
}

.field-error {
  color: var(--red);
  font-size: 12px;
  margin: -10px 0 12px;
}

/* ---- Auth screens ---- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.auth-box {
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.auth-brand {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
}

/* ---- Flash messages ---- */
.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.flash-error { background: #fdecec; color: #a12727; border-color: #f5c6c6; }
.flash-info { background: #eef6ff; color: #1c5a96; border-color: #c9e2fb; }
.flash-success { background: #edf9ef; color: #1e7a30; border-color: #c7ecc9; }

/* ---- Table ---- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
tr:last-child td { border-bottom: none; }

/* ---- Toggle switch (plugin enable/disable) ---- */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d8d8d8;
  border-radius: 999px;
  transition: 0.15s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.15s;
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

.main-ai { max-width:720px; }.ai-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }.ai-head .page-sub { margin:6px 0 0; }.ai-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.ai-summary-card { min-height:136px; display:flex; min-width:0; flex-direction:column; padding:16px; border:1px solid var(--border); border-radius:17px; background:var(--panel); }.ai-summary-card.is-primary { border-color:#e5b91f; background:#fff5d6; color:#2b2725; }.ai-summary-card.is-primary > span { color:#8a6500; opacity:1; }.ai-summary-card.is-primary > small { color:#756f60; }.ai-summary-card > span { font:500 9px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.7; }.ai-summary-card > strong { margin-top:17px; font-size:30px; line-height:1; letter-spacing:-.04em; }.ai-summary-card > small { margin-top:auto; color:#a9a29b; font-size:10.5px; line-height:1.35; }.ai-pools { margin-top:28px; }.ai-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:12px; }.ai-section-head h2 { margin:0; }.ai-section-head > span { color:var(--text-muted); font-size:11px; }.ai-pool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.ai-pool-card { padding:16px; border:1px solid var(--border); border-radius:17px; background:var(--panel); }.ai-pool-card header { display:flex; align-items:center; gap:11px; }.ai-pool-icon { width:38px; height:38px; display:grid; flex:0 0 38px; place-items:center; border-radius:12px; background:#f1ede4; color:#5c554f; font-size:17px; }.ai-pool-card header > div { display:flex; min-width:0; flex-direction:column; }.ai-pool-card header strong { font-size:14px; }.ai-pool-card header small { color:var(--text-muted); font-size:11px; }.ai-pool-card header b { margin-left:auto; font-size:25px; letter-spacing:-.04em; }.ai-progress { height:7px; margin:18px 0 11px; overflow:hidden; border-radius:10px; background:#eeeae2; }.ai-progress i { display:block; height:100%; border-radius:inherit; background:#ffcc33; }.ai-pool-card footer { display:flex; justify-content:space-between; gap:12px; color:var(--text-muted); font-size:10.5px; }.ai-connection-error,.ai-empty { padding:26px; border:1px dashed #d2cabd; border-radius:18px; background:var(--panel); color:var(--text-muted); }.ai-connection-error { display:flex; gap:13px; }.ai-connection-error i { font-size:22px; }.ai-connection-error strong { color:var(--text); }.ai-connection-error p { margin:3px 0 0; }
@media (max-width:800px) { .ai-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.ai-pool-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .ai-summary-grid { grid-template-columns:1fr; }.ai-summary-card { min-height:125px; }.ai-pool-card footer { flex-direction:column; gap:2px; } }

/* Polished media controls */
.ml-reference { display:flex; align-items:center; gap:11px; width:fit-content; max-width:100%; margin:2px 0 14px; padding:9px 10px; border:1px dashed #d8d1c5; border-radius:12px; background:#f8f5ef; color:#625b54; cursor:pointer; }
.ml-reference:hover,.ml-reference.has-file { border-color:#d1a900; background:#fff8dc; }
.ml-reference > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ml-reference > span { min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:9px; align-items:center; }
.ml-reference > span > i { grid-row:1/3; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:#fffdf9; color:#8f6a12; }
.ml-reference b,.ml-reference small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-reference b { font-size:11.5px; font-weight:600; }.ml-reference small { color:#a39b91; font-size:9.5px; }
.ml-reference > button { display:none; width:27px; height:27px; flex:0 0 27px; place-items:center; border:0; border-radius:8px; background:transparent; color:#8b8379; cursor:pointer; }
.ml-reference.has-file > button { display:grid; }
.ml-modal-backdrop[hidden] { display:none!important; }
.ml-modal-backdrop { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:rgba(43,39,37,.24); backdrop-filter:blur(5px); }
.ml-folder-dialog { width:min(430px,100%); padding:22px; border:1px solid #ded7ca; border-radius:22px; background:#fffdf9; box-shadow:0 24px 80px -42px rgba(43,39,37,.65); }
.ml-folder-dialog > header { display:flex; align-items:center; justify-content:space-between; }
.ml-folder-dialog > header > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#fff4c9; color:#8f6a12; font-size:19px; }
.ml-folder-dialog > header button,.ml-detail-head button { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:10px; background:transparent; color:#9b9389; cursor:pointer; font-size:17px; }
.ml-folder-dialog > header button:hover,.ml-detail-head button:hover { background:#f3efe7; color:#2b2725; }
.ml-folder-dialog h2 { margin:20px 0 6px; font-size:22px; letter-spacing:-.03em; }
.ml-folder-dialog > p { margin:0 0 22px; color:#746d65; font-size:13.5px; line-height:1.55; }
.ml-folder-dialog form > label,.ml-detail-form > label { display:block; margin:0 0 7px; color:#6c655e; font:600 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.ml-folder-name,.ml-select-wrap { position:relative; display:flex; align-items:center; border:1px solid #d8d1c5; border-radius:12px; background:#fff; transition:border-color .18s,box-shadow .18s; }
.ml-folder-name:focus-within,.ml-select-wrap:focus-within { border-color:#d1a900; box-shadow:0 0 0 3px rgba(255,204,51,.2); }
.ml-folder-name > i,.ml-select-wrap > i:first-child { position:absolute; left:13px; z-index:1; color:#a39b91; pointer-events:none; }
.ml-folder-name input { width:100%; height:46px; margin:0; padding:0 14px 0 39px; border:0; border-radius:inherit; background:transparent; color:#2b2725; font:500 14px var(--font-body); }
.ml-folder-name input:focus,.ml-select-wrap select:focus { outline:0; }
.ml-folder-dialog footer { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.ml-folder-dialog footer button { height:40px; padding:0 17px; border:1px solid #d8d1c5; border-radius:11px; background:#fffdf9; color:#4d4741; cursor:pointer; font:600 13px var(--font-body); }
.ml-folder-dialog footer button[type="submit"] { border-color:#ffcc33; background:#ffcc33; color:#241a06; }
.ml-tile-image { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }.ml-tile-image img { display:block; width:100%; height:auto; min-height:150px; object-fit:cover; }
.ml-image-modal[hidden] { display:none!important; }.ml-image-modal { position:fixed; z-index:1000; inset:0; display:grid; overflow:auto; place-items:center; padding:28px; background:rgba(43,39,37,.28); backdrop-filter:blur(5px); }
.ml-image-dialog { width:min(580px,100%); max-height:calc(100vh - 56px); overflow:auto; padding:18px; border:1px solid #ded7ca; border-radius:20px; background:#fffdf9; box-shadow:0 24px 70px -32px rgba(43,39,37,.68); }
.ml-image-dialog-preview { display:grid; max-height:330px; margin:0 -2px 18px; overflow:hidden; place-items:center; border-radius:14px; background:#f1ede4; }.ml-image-dialog-preview img { display:block; max-width:100%; max-height:330px; object-fit:contain; }
.ml-more { background:transparent; color:#4d4741; text-shadow:0 1px 2px rgba(255,255,255,.75); backdrop-filter:none; }
.ml-more:hover,.ml-more:focus,.ml-tile.is-options-open .ml-more { background:rgba(255,253,249,.88); color:#2b2725; }
.ml-detail-head { display:flex; align-items:center; gap:10px; margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid #eee9e0; }
.ml-detail-head > div { min-width:0; flex:1; }.ml-detail-head small { display:block; margin-bottom:3px; color:#a39b91; font:600 9px var(--font-mono); letter-spacing:.12em; }.ml-detail-head strong { display:block; overflow:hidden; color:#2b2725; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.ml-detail-form .ml-select-wrap select { width:100%; height:40px; margin:0; padding:0 37px 0 38px; appearance:none; border:0; border-radius:inherit; background:transparent; color:#393430; cursor:pointer; font:500 13px var(--font-body); }
.ml-select-wrap > i:last-child { position:absolute; right:12px; color:#a39b91; pointer-events:none; }
.ml-detail-form > small { display:block; margin-top:6px; color:#aaa299; font-size:10.5px; }
.ml-detail-form textarea { width:100%; min-height:76px; margin:0; padding:11px 12px; border:1px solid #d8d1c5; border-radius:11px; background:#fff; color:#393430; font:400 12.5px/1.45 var(--font-body); resize:vertical; }
.ml-detail-form textarea:focus { outline:0; border-color:#d1a900; box-shadow:0 0 0 3px rgba(255,204,51,.2); }
.ml-detail-form .ml-select-wrap { margin-bottom:15px; }
.ml-save-detail { width:100%; height:37px; margin-top:8px; border:1px solid #ffcc33; border-radius:10px; background:#ffcc33; color:#241a06; cursor:pointer; font:600 12.5px var(--font-body); }
.ml-detail-actions { display:flex; align-items:center; gap:7px; margin-top:15px; padding-top:12px; border-top:1px solid #eee9e0; }
.ml-detail-actions button { height:34px; padding:0 11px; border:1px solid #d8d1c5; border-radius:9px; background:#fffdf9; color:#625b54; cursor:pointer; font:500 11.5px var(--font-body); }
.ml-detail-actions form { margin-left:auto; }.ml-detail-actions button.is-danger { border-color:#ead8d2; color:#a3442b; }
@media (max-width:600px) { .ml-modal-backdrop { padding:14px; align-items:end; }.ml-folder-dialog { border-radius:20px 20px 16px 16px; }.ml-image-modal { align-items:end; padding:14px; }.ml-image-dialog { max-height:calc(100vh - 28px); border-radius:20px 20px 16px 16px; }.ml-image-dialog-preview,.ml-image-dialog-preview img { max-height:245px; } }

/* Narrow content columns for the media and AI workspaces. */
.main-media {
  max-width: 720px;
  padding-top: 30px;
  padding-bottom: 70px;
}

.main-ai {
  max-width: 720px;
}

.ml-composer {
  box-shadow: none;
}

.ml-upload footer input[name="alt_text"] {
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #d8d1c5;
  border-radius: 12px;
  background: #fffdf9;
  color: #393430;
  font: 400 13px var(--font-body);
  box-shadow: none;
}

.ml-upload footer input[name="alt_text"]::placeholder {
  color: #aaa299;
}

.ml-upload footer input[name="alt_text"]:focus {
  outline: none;
  border-color: #d1a900;
  box-shadow: 0 0 0 3px rgba(255, 204, 51, .2);
}

.agency-assist-trigger { position:fixed; z-index:90; right:20px; bottom:20px; width:48px; height:48px; display:grid; place-items:center; border:1px solid #e6b81d; border-radius:50%; background:var(--yellow); color:#2b2927; font-size:19px; cursor:pointer; }
.agency-assist { position:fixed; z-index:100; right:20px; bottom:78px; width:min(360px,calc(100vw - 24px)); height:min(520px,calc(100dvh - 110px)); overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--panel); }
.agency-assist[hidden] { display:none; }.agency-assist header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }.agency-assist header small,.agency-assist header strong { display:block; }.agency-assist header small { color:var(--text-muted); font:9px var(--font-mono); letter-spacing:.12em; }.agency-assist header strong { margin-top:3px; }.agency-assist header button { border:0; background:transparent; cursor:pointer; }.agency-assist-log { height:calc(100% - 126px); overflow:auto; padding:16px; }.agency-assist-note { color:var(--text-muted); font-size:12px; }.agency-assist-message { width:fit-content; max-width:88%; margin:8px 0; padding:9px 11px; border-radius:12px; background:#f1ede4; font-size:12px; line-height:1.45; }.agency-assist-message.is-user { margin-left:auto; background:#fff0bd; }.agency-assist-message.is-error { color:#a12727; }.agency-assist form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); }.agency-assist form input { min-width:0; flex:1; margin:0; }.agency-assist form button { width:38px; border:0; border-radius:10px; background:var(--yellow); cursor:pointer; }

.provider-list { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.provider-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }
.provider-row-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.provider-row-main strong { font:600 14px var(--font-body); }
.provider-row-main small { color:var(--text-muted); font:12px var(--font-mono); word-break:break-all; }
.provider-row-actions { display:flex; gap:6px; flex-shrink:0; }
.provider-badge { display:inline-block; width:fit-content; margin-top:4px; padding:2px 8px; border-radius:6px; font:9px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.provider-badge-ok { background:#e3f5e8; color:#1a7a3e; }
.provider-badge-failed { background:#fbe4e4; color:#a12727; }
.provider-badge-pending { background:#f1ede4; color:var(--text-muted); }
.provider-add-row { margin-top:16px; }
.provider-form .settings-grid { grid-template-columns:1fr 1fr; }
.provider-form #preset-note { display:block; margin-top:4px; color:var(--text-muted); }