/* Website chrome only. Article typography and export styles remain in styles.css. */
body {
  --ink: #ebebeb;
  --muted: rgba(255,255,255,.6);
  --line: rgba(255,255,255,.1);
  --paper: #0a0a0a;
  --panel: #0c0c0c;
  --di-ink: #ebebeb;
  --di-text: rgba(255,255,255,.6);
  --di-border: rgba(255,255,255,.1);
  --di-bg: #0c0c0c;
  --di-primary: #ccff00;
  --di-neutral: rgba(255,255,255,.6);
  --di-font: "Space Grotesk", "Noto Sans SC", sans-serif;
  --yooco-color-paper: #0a0a0a;
  --yooco-color-ink: #ebebeb;
  --yooco-color-surface: #0c0c0c;
  --yooco-color-soft: rgba(255,255,255,.06);
  --yooco-color-border: rgba(255,255,255,.1);
  --yooco-color-border-strong: rgba(255,255,255,.22);
  --yooco-color-muted: rgba(255,255,255,.6);
  --yooco-color-primary: #ccff00;
  --yooco-color-primary-hover: #d6ff4d;
  --yooco-color-link: #ccff00;
  --yooco-color-focus: #ccff00;
  --yooco-font-sans: "Space Grotesk", "Noto Sans SC", sans-serif;
  --yooco-font-mono: "JetBrains Mono", monospace;
  margin: 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    #000;
  background-size: 60px 60px, 60px 60px, auto;
  color: #ebebeb;
  color-scheme: dark;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}
[hidden] { display:none !important; }
.studio-layout { display:grid; grid-template-columns:200px minmax(0,1fr); height:calc(100dvh - 24px); min-height:0; margin:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:2.5rem; background:#0c0c0c; box-shadow:0 25px 80px rgba(0,0,0,.45); }
.studio-navigation { position:sticky; top:0; z-index:2; display:flex; flex-direction:column; gap:32px; height:100%; min-height:0; padding:24px 16px; border-right:1px solid var(--line); background:rgba(255,255,255,.03); backdrop-filter:blur(16px); }
.studio-logo { display:inline-flex; align-items:center; gap:10px; padding:8px 0; color:#ebebeb; text-decoration:none; }
.studio-logo img { display:block; max-width:100%; height:auto; }
.studio-navigation nav { display:grid; gap:8px; flex:none; }
.studio-logo, .studio-side-foot { flex:none; }
.studio-history { flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.studio-history h2 { flex:none; margin:0; padding:0 4px; color:rgba(255,255,255,.5); font-size:12px; font-weight:600; }
.studio-history .history-status:empty { display:none; }
.studio-navigation a { color:var(--ink); text-decoration:none; font-size:14px; }
.studio-navigation nav a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:8px; }
.studio-navigation nav a[aria-current] { background:var(--yooco-color-soft); box-shadow:inset 3px 0 var(--yooco-color-primary); font-weight:600; }
.studio-home-link { margin-top: 0; padding: 12px; }
.studio-side-foot { margin-top: 0; display: grid; gap: 8px; }
.studio-account { display: flex; align-items: flex-end; gap: 8px; min-width: 0; padding: 8px; border-radius: 12px; }
.studio-account-person { position: relative; display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 8px; }
.invite-gift-row { position: relative; width: 36px; height: 36px; }
.invite-gift-label { position: absolute; left: calc(100% + 8px); top: 50%; z-index: 2; transform: translateY(-50%); color: #e6c56b; font-size: 12px; font-weight: 650; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.studio-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--avatar-color, #B6FF5C) 28%, white); color: var(--avatar-color, #5c8a22); }
.studio-avatar svg { width: 28px; height: 22px; }
.studio-account-text { min-width: 0; display: grid; line-height: 1.3; }
.studio-account-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.studio-account-text small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.studio-account-menu { position: relative; margin-left: auto; flex: none; }
.studio-account-menu > button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.studio-account-menu > button:hover { background: var(--yooco-color-soft); }
.studio-account-menu svg { width: 16px; height: 16px; }
.studio-account-popover { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 148px; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px rgba(32, 37, 31, .12); }
.studio-account-popover button { min-height: 36px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 13px/1.3 var(--yooco-font-sans); text-align: left; cursor: pointer; }
.studio-account-popover button:hover { background: var(--yooco-color-soft); }
.invite-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px 16px; background: rgba(0,0,0,.72); }
.invite-modal[hidden] { display: none !important; }
.invite-modal-card { position: relative; width: min(640px, 100%); padding: 28px 28px 22px; border: 0; border-radius: 22px; background: radial-gradient(90% 70% at 50% -10%, rgba(214,184,110,.18), transparent 58%), #12110f; color: #f3ead7; box-shadow: 0 28px 80px rgba(0,0,0,.55); font-family: "Space Grotesk", "Noto Sans SC", sans-serif; }
.invite-modal .invite-modal-card:focus, .invite-modal .invite-modal-card:focus-visible { outline: none; }
.invite-modal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: rgba(243,234,215,.7); font-size: 22px; line-height: 1; cursor: pointer; }
.invite-modal-x:hover { color: #f6e7b8; }
.invite-modal-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 36px 22px; }
.invite-modal-head svg { width: 28px; height: 28px; flex: none; }
.invite-modal-head .invite-gift-box, .invite-modal-head .invite-gift-lid { fill: #1c1914; stroke: #c6a15a; stroke-width: 1.15; }
.invite-modal-head .invite-gift-ribbon { fill: #e6c56b; stroke: none; }
.invite-modal-card h2 { margin: 0; color: #f0d48a; font-size: 26px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-align: center; }
.invite-reward-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: stretch; }
.invite-reward { margin: 0; padding: 18px 16px 16px; border: 0; border-radius: 16px; background: #1b1916; text-align: center; }
.invite-reward-kicker { margin: 0; color: rgba(240,212,138,.8); font-size: 13px; letter-spacing: .12em; }
.invite-reward-num { margin: 12px 0 6px; color: #f3e2a8; font-size: 40px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.invite-reward-who { margin: 0; color: #f6e7b8; font-size: 15px; font-weight: 650; }
.invite-reward-note { margin: 8px 0 0; color: rgba(243,234,215,.58); font-size: 12px; line-height: 1.55; }
.invite-reward-plus { align-self: center; color: #e6c56b; font-size: 22px; font-weight: 600; }
.invite-rule { margin: 14px 0 0; color: rgba(240,212,138,.92); font-size: 13px; text-align: center; }
.invite-modal-body { margin: 8px 0 0; color: rgba(243,234,215,.72); font-size: 14px; line-height: 1.6; text-align: center; }
.invite-modal-body:empty { display: none; }
.invite-share { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.invite-share-link { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border: 0; border-radius: 999px; background: rgba(0,0,0,.35); color: rgba(243,234,215,.82); font-size: 13px; }
.invite-share-link svg { flex: none; width: 16px; height: 16px; color: #e6c56b; }
.invite-share-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-share-link strong { flex: none; color: #f3e2a8; font-weight: 700; letter-spacing: .04em; }
.invite-modal-copy { flex: none; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(100deg, #f6e7b8 0%, #e4c56a 46%, #c9963e 100%); color: #1c140c; font: 700 14px/1 "Space Grotesk", "Noto Sans SC", sans-serif; cursor: pointer; box-shadow: none; }
.invite-modal-copy:hover:not(:disabled) { filter: brightness(1.06); }
.invite-modal-copy:disabled { opacity: .45; cursor: default; filter: none; }
.invite-modal-status { min-height: 1.2em; margin: 10px 0 0; color: #f0d48a; font-size: 13px; text-align: center; }
@media (max-width: 640px) {
  .invite-modal-card { padding: 24px 16px 18px; }
  .invite-reward-row { grid-template-columns: 1fr; }
  .invite-reward-plus { display: none; }
  .invite-share { flex-direction: column; align-items: stretch; }
  .invite-modal-copy { width: 100%; }
}
.studio-main .topbar-actions { margin-left: auto; }
.studio-main .trial-meter { color: rgba(255,255,255,.72); }
.studio-main .trial-meter.is-empty { color: #ccff00; }
.studio-login { margin-left: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: #fff; color: #000; font-size: 14px; font-weight: 700; text-decoration: none; }
.studio-login:hover { background: #ccff00; color: #000; }
.preview-footer { justify-content: space-between; }
.preview-footer-files { display: flex; align-items: center; gap: 6px; }
.preview-footer-files .ghost-button { gap: 4px; min-height: 32px; padding: 4px 8px; font-size: 12px; }
.preview-footer-files svg { width: 14px; height: 14px; flex: none; }
.preview-footer-tools .ai-button { min-height: 48px; min-width: 168px; padding: 10px 32px; border: 0; border-radius: 999px; background: #ccff00; color: #000; font-size: 15px; font-weight: 700; box-shadow: 0 0 30px rgba(204,255,0,.3); }
.preview-footer-tools .ai-button:hover { background: #d6ff4d; color: #000; transform: scale(1.04); }
html.studio-embedded, html.studio-embedded body { height:100%; margin:0; background:#0c0c0c; }
html.studio-embedded .studio-layout { display:block; height:100%; min-height:0; margin:0; border:0; border-radius:0; box-shadow:none; }
html.studio-embedded .studio-navigation { display:none; }
.studio-main { min-width:0; min-height:0; display:flex; flex-direction:column; height:100%; }
.studio-main .topbar { width:100%; min-height:64px; flex:none; margin:0; padding:12px 24px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--panel); box-shadow:none; backdrop-filter:none; }
.studio-title { margin:0; font-size:16px; font-weight:600; }
.topbar-actions { gap:8px; }
.studio-main .app-shell { width:100%; min-height:0; flex:1; display:flex; flex-direction:column; }
.studio-main .trial-banner { width:auto; margin:12px 24px; }
.lab-shell { flex:1; min-height:0; display:flex; padding:0; background:transparent; border-radius:0; box-shadow:none; }
.lab-grid { flex:1; grid-template-columns:minmax(0,1fr) 320px; height:auto; border:0; border-radius:0; background:var(--panel); box-shadow:none; backdrop-filter:none; }
.preview-panel { min-width:0; min-height:0; background:var(--panel); }
.preview-header { min-height:64px; flex:none; padding:12px 24px; gap:16px; border-bottom:1px solid var(--line); background:var(--panel); }
.preview-header-actions { display:flex; align-items:center; gap:12px; min-width:0; }
.copy-feedback { max-width:min(420px, 46vw); white-space:normal; overflow-wrap:anywhere; line-height:1.45; text-align:right; }
.editor-view-tabs { display:flex; flex:none; gap:4px; padding:4px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.05); backdrop-filter:blur(16px); }
.editor-view-tabs button { min-height:36px; padding:4px 14px; border:1px solid transparent; border-radius:999px; background:transparent; color:rgba(255,255,255,.6); font:500 14px/20px "Space Grotesk","Noto Sans SC",sans-serif; cursor:pointer; }
.editor-view-tabs button[aria-selected="true"] { background:#fff; border-color:#fff; color:#000; box-shadow:none; }
.preview-stage { min-height:0; flex:1; padding:0; background:var(--preview-page-color,#fff); }
.web-preview { width:100%; min-height:100%; margin:0; }
.article-page { min-height:100%; padding:40px clamp(24px,4vw,64px); background:var(--page-color,#fff); color:var(--text-color,#20231f); box-shadow:none; color-scheme:light; }
.article-page[data-style="deep-night"] { color-scheme: dark; }
.preview-footer { min-height:48px; flex:none; gap:12px; padding:12px 24px; border-top:1px solid var(--line); background:var(--panel); }
#articleStatus { color:var(--muted); font-size:12px; line-height:1.5; }
.preview-tool-toggle { color:var(--muted); font-size:12px; }
.preview-tool-toggle input { accent-color:var(--yooco-color-link); }
.source-panel { min-height:0; flex:1; display:flex; flex-direction:column; gap:8px; padding:24px; overflow:auto; }
.source-panel label { font-size:14px; font-weight:600; }
.source-panel p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.source-panel textarea { flex:1; min-height:280px; width:100%; resize:vertical; padding:16px; border:1px solid var(--yooco-color-border-strong); border-radius:8px; background:var(--panel); color:var(--ink); font:14px/1.8 var(--yooco-font-mono); }
.insight-panel { min-width:0; padding:0 16px 24px; overflow:auto; border-left:1px solid var(--line); background:var(--paper); scrollbar-color:var(--yooco-color-border-strong) transparent; }
.properties-title { position:sticky; top:0; z-index:2; display:flex; align-items:center; min-height:64px; margin:0 -16px 16px; padding:16px; border-bottom:1px solid var(--line); background:var(--paper); font-size:14px; font-weight:600; }
#stylePane { display:grid; gap:8px; margin:0; }
#stylePane > .control-group { border:1px solid rgba(255,255,255,.1); border-radius:2rem; background:rgba(255,255,255,.03); backdrop-filter:blur(16px); overflow:hidden; }
#stylePane > .control-group.is-open { background:var(--panel); }
.group-toggle { min-height:48px; padding:12px; background:transparent; }
.group-toggle:hover { background:var(--yooco-color-soft); color:var(--ink); opacity:1; }
.group-label { font-size:14px; font-weight:600; }
.group-toggle .group-hint { font-size:12px; }
.control-group.is-open .group-body-inner { padding:0 12px 16px; }
.theme-grid,.mood-grid { gap:8px; }
.theme-chip,.mood-card { border-color:var(--line); border-radius:6px; background:var(--panel); }
.theme-chip.is-active,.mood-card.is-active { border-color:var(--yooco-color-link); background:var(--yooco-color-soft); color:var(--ink); box-shadow:inset 3px 0 var(--yooco-color-primary); }
.theme-chip.is-active b,.mood-card.is-active b,.mood-card.is-active span { color:var(--ink); }
.theme-chip b,.mood-card b { font-size:12px; }
.theme-chip small,.mood-card span { font-size:12px; }
.color-control,.range-control,.toggle-control,.select-control { font-size:12px; min-height:40px; }
.select-control select,.structure-row select { min-height:40px; max-width:100%; border:1px solid var(--yooco-color-border-strong); border-radius:6px; background:var(--panel); color:var(--ink); font-size:12px; }
.ghost-button,.accent-button,.ai-button,.copy-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.03); color:#ebebeb; font-size:14px; font-weight:600; line-height:20px; text-decoration:none; cursor:pointer; font-family:"Space Grotesk","Noto Sans SC",sans-serif; }
.ai-button { border-color:transparent; background:#ccff00; color:#000; box-shadow:0 0 24px rgba(204,255,0,.28); }
.copy-button { border-color:transparent; background:#fff; color:#000; font-weight:700; }
.ghost-button:hover,.accent-button:hover { background:rgba(255,255,255,.08); color:#fff; }
.ai-button:hover { background:#d6ff4d; color:#000; opacity:1; }
.copy-button:hover { background:#ccff00; color:#000; opacity:1; }
.ai-button:disabled,.copy-button:disabled,.ghost-button:disabled { opacity:.55; cursor:not-allowed; }
.ai-button[data-busy="1"] { cursor:wait; }
.studio-main :is(button,input,select,textarea,a):focus-visible,.studio-navigation a:focus-visible { outline:2px solid var(--yooco-color-focus); outline-offset:3px; }
.studio-main button:active:not(:disabled) { filter:brightness(.97); }
.studio-help { display:block; margin-top:8px; }
.studio-help-trigger { min-height:40px; padding:8px 0; border:0; background:transparent; color:var(--yooco-color-link); font-size:12px; cursor:help; }
.studio-help-popover { display:none; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted); font-size:12px; line-height:1.6; }
.studio-help:hover .studio-help-popover,.studio-help:focus-within .studio-help-popover { display:block; }
.studio-help-popover code { font-family:var(--yooco-font-mono); }
@media(max-width:1023px) {
  .studio-account-popover { top: calc(100% + 6px); bottom: auto; }
  .studio-layout { display:block; }
  .studio-navigation { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .studio-navigation nav { display:flex; gap:4px; }
  .studio-home-link { display:none; }
  .studio-history { flex:1 1 100%; order:5; width:100%; max-height:240px; }
  .studio-side-foot { order:4; margin-left:auto; }
  .studio-main { height:auto; min-height:100dvh; }
}
@media(max-width:823px) {
  .lab-grid { display:flex; flex-direction:column; overflow:visible; }
  .lab-shell { display:block; }
  .studio-main { height:auto; }
  .studio-main .topbar { flex-wrap:wrap; padding:12px 16px; gap:12px; }
  .topbar-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topbar-actions .ghost-button:first-child { display:inline-flex; }
  .preview-panel { min-height:640px; }
  .preview-stage { max-height:75dvh; }
  .preview-header { display:flex; flex-wrap:wrap; padding:12px 16px; gap:8px; }
  .preview-header-actions { margin-left:auto; flex-wrap:wrap; }
  .copy-feedback:empty { display:none; }
  .copy-feedback { flex-basis:100%; white-space:normal; overflow-wrap:anywhere; }
  .preview-footer { padding:12px 16px; flex-wrap:wrap; }
  .source-panel { min-height:480px; padding:16px; }
  .insight-panel { overflow:visible; border-left:0; border-top:1px solid var(--line); }
  .properties-title { position:static; }
  .editor-view-tabs button,.ghost-button,.accent-button,.ai-button,.copy-button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .studio-main * { scroll-behavior:auto; transition:none; } }

.studio-layout { position:relative; }
.studio-layout::after {
  content:"YOOCO";
  position:absolute;
  right:4%;
  bottom:72px;
  z-index:0;
  color:rgba(255,255,255,.05);
  font-size:clamp(4rem,10vw,8rem);
  font-weight:700;
  letter-spacing:-.08em;
  line-height:.8;
  pointer-events:none;
}
.studio-main, .studio-navigation { position:relative; z-index:1; }
.studio-title, .properties-title { font-family:"Space Grotesk","Noto Sans SC",sans-serif; letter-spacing:-.04em; }
.properties-title { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.insight-panel { background:#0a0a0a; }
.studio-main .topbar, .preview-header, .preview-footer, .preview-panel { background:#0c0c0c; }
.preview-stage { background:var(--preview-page-color,#fff); }
.theme-chip, .mood-card {
  border-color:rgba(255,255,255,.1);
  border-radius:1rem;
  background:rgba(255,255,255,.03);
  color:#ebebeb;
}
.theme-chip:has(.theme-gem) { justify-content: flex-start; }
.theme-gem {
  display: block;
  width: 12px;
  height: 12px;
  flex: none;
  margin-left: auto;
  pointer-events: none;
}
.theme-chip.is-active .theme-gem { opacity: 1; }
.theme-chip.is-active, .theme-chip.is-classic.is-active, .mood-card.is-active {
  border-color:#ccff00;
  background:rgba(204,255,0,.12);
  color:#ebebeb;
  box-shadow:inset 3px 0 #ccff00;
}
.theme-chip.is-active b, .theme-chip.is-classic.is-active b, .mood-card.is-active b, .mood-card.is-active span { color:#ebebeb; }
.vibe-row { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.vibe-label { color:rgba(255,255,255,.55); font:600 11px/1.4 "JetBrains Mono",monospace; letter-spacing:.14em; }
.vibe-chips { display:flex; flex-wrap:wrap; gap:6px; }
.vibe-chip {
  margin:0; padding:5px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:transparent; color:#ebebeb; font:600 12px/1.3 "Noto Sans SC","Space Grotesk",sans-serif; cursor:pointer;
}
.vibe-chip:hover, .vibe-chip:focus-visible { border-color:rgba(204,255,0,.7); outline:none; }
.vibe-chip[aria-pressed="true"] { border-color:#161616; background:#161616; color:#fff; box-shadow:inset 0 0 0 1px #ccff00; }
.mood-card.is-active { background:#ccff00; color:#000; }
.mood-card.is-active b, .mood-card.is-active span { color:#000; }
.toggle-control i { background:rgba(255,255,255,.16); }
.toggle-control input:checked + i { background:#ccff00; }
.toggle-control input:checked + i::before { background:#000; }
.trial-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
  padding: 24px 28px;
  border: 1px solid rgba(204, 255, 0, 0.35);
  border-radius: 1.75rem;
  background: rgba(0, 0, 0, 0.62);
  color: #ebebeb;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.studio-main .trial-banner::before,
.studio-main .trial-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.studio-main .trial-banner::before {
  width: 180px;
  height: 180px;
  left: -48px;
  top: -90px;
  background: rgba(204, 255, 0, 0.34);
}
.studio-main .trial-banner::after {
  width: 150px;
  height: 150px;
  right: 18%;
  bottom: -90px;
  background: rgba(16, 185, 129, 0.28);
}
.trial-banner[hidden] { display: none !important; }
.trial-banner-lead, .studio-main .trial-waitlist { position: relative; z-index: 1; }
.trial-banner-lead { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.trial-banner-copy { flex: none; margin: 0; color: #ebebeb; font-size: 16px; font-weight: 500; line-height: 1.6; }
.trial-banner.is-saved { border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 72px 28px 90px rgba(204, 255, 0, 0.07), 0 18px 50px rgba(0, 0, 0, 0.35); }
.trial-banner.is-saved .trial-banner-copy { color: rgba(255, 255, 255, 0.6); opacity: 0.5; }
.trial-banner.is-saved::before, .trial-banner.is-saved::after { opacity: 0.35; }
.trial-banner-actions { position: relative; z-index: 1; display: flex; flex: 1 1 280px; flex-direction: column; align-items: flex-end; gap: 10px; min-width: min(100%, 280px); }
.trial-invite { height: 44px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #ccff00; color: #000; font: 700 15px/1 "Space Grotesk", "Noto Sans SC", sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 0 24px rgba(204, 255, 0, 0.28); }
.trial-invite:hover { background: #d6ff4d; color: #000; }
.trial-waitlist { flex: 0 1 auto; margin: 0; gap: 8px; align-items: center; padding: 6px; border-radius: 999px; }
.trial-waitlist button { background: transparent; color: rgba(255, 255, 255, 0.78); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.22); }
.trial-waitlist button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; }
.trial-waitlist button:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.trial-waitlist-feedback { flex-basis: auto; margin: 0; color: #ccff00; font-size: 13px; line-height: 1.5; }
.trial-waitlist-feedback.is-success { font-size: 15px; font-weight: 700; }
.trial-banner a { margin-left: 0; color: #ccff00; text-decoration: none; }
.trial-banner a:hover { color: #d6ff4d; }
@media (min-width: 900px) {
  .trial-banner-copy { font-size: 18px; }
}
@media (max-width: 860px) {
  .studio-main .trial-banner { margin: 12px 16px; flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; }
  .trial-banner-lead { flex: 0 1 auto; }
  .trial-banner-actions { width: 100%; align-items: stretch; }
  .trial-invite { width: 100%; }
  .trial-waitlist { width: 100%; }
  .trial-waitlist input { flex: 1 1 auto; width: auto; min-width: 0; }
}
@media (max-width: 560px) {
  .trial-waitlist { flex-direction: column; align-items: stretch; border-radius: 1.25rem; }
  .trial-waitlist input { width: 100%; flex: 0 0 auto; }
  .trial-waitlist button { width: 100%; }
}
.compliance-panel, .compliance-panel--page {
  flex:none;
  margin:0 16px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:1.5rem;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(16px);
  box-shadow:none;
  color:#ebebeb;
}
.compliance-level, .compliance-list, .compliance-list .rule { color:rgba(255,255,255,.72); }
.compliance-level[data-level="ok"] { color:#ccff00; }
.compliance-level[data-level="warn"] { color:#f5d76e; }
.compliance-level[data-level="risk"] { color:#ffb4a8; }
.compliance-tooltip { border-color:rgba(255,255,255,.12); background:#141414; color:#ebebeb; }
.source-panel textarea, .select-control select, .structure-row select {
  border-color:rgba(255,255,255,.16);
  border-radius:12px;
  background:#111;
  color:#ebebeb;
}
.preview-tool-toggle { color:rgba(255,255,255,.72); font-family:"JetBrains Mono",monospace; letter-spacing:.04em; }
.preview-tool-toggle input, input[type="checkbox"] { accent-color:#ccff00; }

/* 配置台滑动条：柔和灰轨道 + 浅色圆点。不要纯白细线，也不要暗球融进黑底。 */
.studio-main input[type="range"] {
  --range-track: rgba(255, 255, 255, 0.16);
  --range-fill: #a3aa86;
  --range-thumb: #f4f4f1;
  --range-pct: 0%;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  accent-color: #a3aa86;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.studio-main input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--range-fill) 0,
    var(--range-fill) var(--range-pct),
    var(--range-track) var(--range-pct),
    var(--range-track) 100%
  );
}
.studio-main input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 1.5px solid #f7f7f4;
  border-radius: 50%;
  background: var(--range-thumb);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72);
  cursor: pointer;
}
.studio-main input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--range-track);
}
.studio-main input[type="range"]::-moz-range-progress {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--range-fill);
}
.studio-main input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1.5px solid #f7f7f4;
  border-radius: 50%;
  background: var(--range-thumb);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.72);
  cursor: pointer;
}
.studio-main input[type="range"]:hover::-webkit-slider-thumb,
.studio-main input[type="range"]:focus-visible::-webkit-slider-thumb,
.studio-main input[type="range"]:hover::-moz-range-thumb,
.studio-main input[type="range"]:focus-visible::-moz-range-thumb {
  border-color: #d1ff52;
}
.invite-gift {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(214, 184, 110, 0.45);
  border-radius: 50%;
  background: rgba(214, 184, 110, 0.08);
  cursor: pointer;
  animation: invite-gift-glow 6.5s ease-in-out infinite;
}
.invite-gift svg { width: 20px; height: 20px; transform-origin: 50% 62%; animation: invite-gift-wobble 6.5s ease-in-out infinite; }
.invite-gift-box, .invite-gift-lid { fill: #1c1914; stroke: #c6a15a; stroke-width: 1.15; }
.invite-gift-ribbon { fill: #e6c56b; stroke: none; }
.invite-gift:hover, .invite-gift:focus-visible { border-color: rgba(230, 197, 107, 0.8); }
.invite-gift::after {
  content: "邀请好友，双方各 +5 积分";
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 30;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 1px solid rgba(214, 184, 110, 0.4);
  border-radius: 999px;
  background: #141414;
  color: #ebebeb;
  font: 600 12px/1.3 "Space Grotesk", "Noto Sans SC", sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.invite-gift-row .invite-gift::after { content: none; }
.invite-gift:hover::after, .invite-gift:focus-visible::after { opacity: 1; }
@keyframes invite-gift-wobble {
  0%, 14%, 100% { transform: rotate(0deg); }
  3% { transform: rotate(-3deg); }
  7% { transform: rotate(2.5deg); }
  11% { transform: rotate(-1deg); }
}
@keyframes invite-gift-glow {
  0%, 46%, 62%, 100% { box-shadow: 0 0 0 0 rgba(214, 184, 110, 0); }
  52% { box-shadow: 0 0 10px 1px rgba(214, 184, 110, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .invite-gift, .invite-gift svg { animation: none; }
}
@media (max-width: 1023px) {
  .invite-gift::after { display: none; }
}
.studio-account-popover { background:#141414; border-color:rgba(255,255,255,.1); }
.studio-account-popover button { color:#ebebeb; font-family:"Space Grotesk","Noto Sans SC",sans-serif; }
.studio-account-text small { color:rgba(255,255,255,.55); }
.group-label { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width: 823px) {
  .studio-layout { margin:0; border-radius:0; min-height:100dvh; }
}
.history-fallback { position:relative; }
.history-fallback[hidden] { display:none !important; }
.history-open { display:inline-flex; align-items:center; min-height:40px; padding:6px 16px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.05); color:#ebebeb; font:600 14px/20px "Space Grotesk","Noto Sans SC",sans-serif; cursor:pointer; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.history-open:hover, .history-open[aria-expanded="true"] { border-color:rgba(204,255,0,.45); color:#ccff00; }
.history-popover { position:absolute; top:calc(100% + 8px); right:0; z-index:35; display:flex; flex-direction:column; width:min(320px, calc(100vw - 32px)); max-height:min(420px, 70vh); padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(12,12,12,.96); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.history-popover[hidden] { display:none !important; }
.history-popover .studio-history { max-height:380px; }
.history-status, .history-empty { margin:0; padding:0 4px; color:rgba(255,255,255,.45); font-size:12px; line-height:1.5; }
.history-list { display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-height:0; min-width:0; margin:0; padding:0; list-style:none; overflow:auto; scrollbar-color:rgba(255,255,255,.22) transparent; }
.history-list li { min-width:0; }
.history-list button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-width:0; max-width:100%; padding:8px 10px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.03); color:inherit; text-align:left; cursor:pointer; }
.history-list button:hover, .history-list button:focus-visible, .history-list button.is-current { border-color:rgba(204,255,0,.45); outline:none; }
.history-list button.is-current { background:rgba(204,255,0,.08); }
.history-list strong, .history-list span, .history-list p { display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.history-list strong { font-size:13px; font-weight:600; line-height:1.35; white-space:nowrap; }
.history-list span { color:rgba(255,255,255,.55); font-size:11px; line-height:1.4; white-space:nowrap; }
.history-list p { margin:0; color:rgba(255,255,255,.72); font-size:12px; line-height:1.45; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break:break-word; }
.optimize-slot { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; max-width:100%; }
.optimize-hint { margin:0; padding:8px 12px; border:1px solid #ccff00; border-radius:999px; background:rgba(204,255,0,.16); color:#ccff00; font-size:13px; font-weight:700; line-height:1.35; box-shadow:0 0 18px rgba(204,255,0,.28); }
.optimize-hint[hidden] { display:none !important; }
.preview-empty { display:none; width:min(100%,440px); }
.preview-empty[hidden] { display:none !important; }
.preview-stage.is-source-empty { display:flex; align-items:center; justify-content:center; padding:28px 20px; background:#0c0c0c; }
.preview-stage.is-source-empty .web-preview { display:none; }
.preview-stage.is-source-empty .preview-empty { display:flex; }
.preview-empty-card { width:100%; padding:36px 24px; border:1px dashed rgba(204,255,0,.5); border-radius:1.75rem; background:rgba(255,255,255,.04); text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.preview-empty-icon { display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border-radius:18px; background:rgba(204,255,0,.12); color:#ccff00; }
.preview-empty-title { margin:14px 0 6px; color:#ebebeb; font-size:18px; font-weight:700; }

.tool-menu-wrap { position:relative; }
.tool-menu-button { display:inline-flex; align-items:center; min-height:40px; padding:6px 16px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.05); color:#ebebeb; font:600 14px/20px "Space Grotesk","Noto Sans SC",sans-serif; cursor:pointer; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.tool-menu-button:hover, .tool-menu-button[aria-expanded="true"] { border-color:rgba(204,255,0,.45); color:#ccff00; }
.tool-hint[hidden], .tool-menu[hidden] { display:none !important; }
.tool-hint { margin:0; padding:6px 12px; border:1px solid rgba(204,255,0,.4); border-radius:999px; background:rgba(204,255,0,.12); color:#ccff00; font:600 12px/18px "Noto Sans SC",sans-serif; }
.tool-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:min(320px, calc(100vw - 32px)); padding:8px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(18,20,22,.72); box-shadow:0 18px 50px rgba(0,0,0,.45); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.tool-menu-item { display:flex; align-items:flex-start; gap:12px; width:100%; padding:10px 12px; border:0; border-radius:12px; background:transparent; color:#f4f4f0; text-align:left; cursor:pointer; font:600 14px/1.4 "Space Grotesk","Noto Sans SC",sans-serif; }
.tool-menu-item:hover, .tool-menu-item:focus-visible { background:rgba(255,255,255,.08); outline:none; }
.tool-menu-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tool-menu-copy small { color:rgba(255,255,255,.62); font-size:12px; font-weight:400; line-height:1.45; }
.tool-menu-cost { margin-left:auto; color:#ccff00; font-size:12px; font-weight:600; white-space:nowrap; }
.tool-compare { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.55); }
.tool-compare[hidden] { display:none !important; }
.tool-compare-card { width:min(920px, 100%); max-height:min(86vh, 760px); display:flex; flex-direction:column; gap:16px; padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(16,18,20,.78); color:#f4f4f0; box-shadow:0 24px 80px rgba(0,0,0,.5); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); font-family:"Space Grotesk","Noto Sans SC",sans-serif; }
.tool-compare-head h2 { margin:0; font-size:18px; font-weight:650; }
.tool-compare-head p { margin:4px 0 0; color:rgba(255,255,255,.62); font-size:13px; }
.tool-compare-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; min-height:220px; }
.tool-compare-col { display:flex; flex-direction:column; gap:8px; min-width:0; max-height:46vh; overflow:auto; padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.04); }
.tool-compare-col h3 { margin:0; color:rgba(255,255,255,.55); font-size:12px; font-weight:600; letter-spacing:.08em; }
.tool-compare-col pre { margin:0; white-space:pre-wrap; word-break:break-word; color:#f4f4f0; font:400 14px/1.7 "Noto Sans SC",sans-serif; }
.tool-compare-loading { margin:0; color:rgba(255,255,255,.72); font-size:14px; }
.tool-compare-loading[hidden], .tool-compare-error[hidden], #toolCompareResult[hidden] { display:none !important; }
.tool-compare-error { margin:0; color:#ffb4b4; font-size:13px; line-height:1.5; }
.tool-compare-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tool-compare-primary, .tool-compare-ghost { min-height:40px; padding:6px 16px; border-radius:999px; font:600 14px/20px "Space Grotesk","Noto Sans SC",sans-serif; cursor:pointer; }
.tool-compare-primary { border:0; background:#ccff00; color:#16180f; }
.tool-compare-primary:disabled { opacity:.45; cursor:not-allowed; }
.tool-compare-ghost { border:1px solid rgba(255,255,255,.16); background:transparent; color:#ebebeb; }
.tool-compare-ghost:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width: 823px) {
  .tool-menu { right:auto; left:0; }
  .tool-compare { padding:12px; }
  .tool-compare-cols { grid-template-columns:1fr; }
  .tool-compare-col { max-height:28vh; }
}

#humanizeSelectionLayer { position:fixed; inset:0; z-index:45; pointer-events:none; }
#humanizeSelectionLayer[hidden] { display:none !important; }
.humanize-selection-frame {
  position:fixed;
  box-sizing:border-box;
  border:1.5px solid rgba(62, 158, 72, 0.62);
  border-radius:4px;
  background:rgba(62, 158, 72, 0.12);
  box-shadow:0 0 0 1px rgba(62, 158, 72, 0.14);
  pointer-events:none;
}
.humanize-float {
  position:fixed;
  z-index:1;
  display:inline-flex;
  align-items:center;
  height:28px;
  margin:0;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:#2b2b2b;
  color:#f4f4f5;
  box-shadow:0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.35);
  font:500 12px/1 "Noto Sans SC","Space Grotesk",sans-serif;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:auto;
  user-select:none;
}
.humanize-float[hidden] { display:none !important; }
.humanize-float:hover { background:#3a3a3a; }
.humanize-float:focus-visible { outline:2px solid #ccff00; outline-offset:2px; }

#previewMarkLayer { position:fixed; inset:0; z-index:46; pointer-events:none; }
#previewMarkLayer[hidden] { display:none !important; }
.mark-capsule {
  position:fixed; display:inline-flex; align-items:stretch; height:36px; overflow:hidden;
  border-radius:999px; background:#161616; color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:auto;
}
.mark-capsule button {
  margin:0; border:0; background:transparent; color:#fff; cursor:pointer;
  font:700 13px/1 "Noto Sans SC","Space Grotesk",sans-serif; padding:0 14px;
}
.mark-capsule-main { color:#fff; }
.mark-capsule-copy { color:rgba(255,255,255,.72); font-weight:500; border-left:1px solid rgba(255,255,255,.14) !important; }
.mark-capsule button:hover, .mark-capsule button:focus-visible { background:#2a2a2a; outline:none; }
.mark-capsule-main:hover, .mark-capsule-main:focus-visible { color:#ccff00; }
.preview-empty-note { margin:0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.6; }
.preview-empty-try { margin-top:16px; }
#stylePane > .more-settings { border-color:rgba(204,255,0,.32); background:linear-gradient(180deg, rgba(204,255,0,.12), rgba(255,255,255,.04) 46%, rgba(255,255,255,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 14px 32px rgba(0,0,0,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
#stylePane > .more-settings.is-open { background:rgba(10,10,10,.66); }
#stylePane > .more-settings > .group-toggle .group-hint { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.55); }
.more-settings .control-group { border:0; border-top:1px solid rgba(255,255,255,.08); border-radius:0; background:transparent; }
.more-settings .group-toggle { color:#ebebeb; }
.more-settings .group-label { color:#ebebeb; }
@media (max-width: 823px) {
  .optimize-slot { width:100%; }
  .optimize-hint { flex:1 1 160px; text-align:center; }
  .preview-empty-card { padding:28px 16px; }
}

/* 划选文字后，在选区旁边改这一块。白底深字，不跟工作台的浅色字走。 */
.article-page .is-block-style-target {
  outline: 2px solid #9ad100;
  outline-offset: 3px;
}
.block-style-panel {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 252px;
  user-select: none;
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: #fff;
  color: #1a1a1a;
  color-scheme: light;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  font-family: "Noto Sans SC", "Space Grotesk", sans-serif;
}
.block-style-panel[hidden],
.block-style-panel [hidden] { display: none !important; }
.block-style-head { display: flex; align-items: baseline; gap: 8px; }
.block-style-kicker { margin: 0; color: #6b6b6b; font-size: 11px; font-weight: 650; }
.block-style-head strong { font-size: 15px; font-weight: 750; }
.block-style-close {
  margin: 0 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #333;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.block-style-section { margin: 0; }
.block-style-section > p {
  margin: 0 0 4px;
  color: #6b6b6b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.block-style-row { display: block; color: #333; font-size: 12px; font-weight: 650; }
.block-style-row output { float: right; color: #111; font-weight: 700; font-variant-numeric: tabular-nums; }
.block-style-panel input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 6px 0 0;
  appearance: none;
  border-radius: 99px;
  background: #e6e6e6;
}
.block-style-panel input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: #161616;
  box-shadow: none;
}
.block-style-panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #161616;
  box-shadow: none;
}
.block-style-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.block-style-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  cursor: pointer;
}
.block-style-swatch.is-none {
  background:
    linear-gradient(135deg, transparent 45%, #d33 46% 54%, transparent 55%),
    #fff;
}
.block-style-swatch.is-active { outline: 2px solid #111; outline-offset: 1px; }
.block-style-color {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.block-style-hex { color: #6b6b6b; font-size: 11px; font-variant-numeric: tabular-nums; }
.block-style-reset {
  margin-top: 2px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: #f3f3f3;
  color: #161616;
  font: 650 12px/1 "Noto Sans SC", "Space Grotesk", sans-serif;
  cursor: pointer;
}
.block-style-reset:hover, .block-style-close:hover { background: #ececec; }
.block-style-actions, .block-style-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.block-style-actions button, .block-style-levels button {
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #f7f7f7;
  color: #161616;
  font: 650 12px/1 "Noto Sans SC", "Space Grotesk", sans-serif;
  cursor: pointer;
}
.block-style-levels button { flex: 1 1 0; padding-left: 0; padding-right: 0; }
.block-style-actions [data-mark-action="add"] {
  background: #161616;
  border-color: #161616;
  color: #fff;
}
.block-style-actions button.is-active, .block-style-levels button.is-active {
  background: #161616;
  border-color: #161616;
  color: #fff;
}
.block-style-actions button:disabled {
  background: #f3f3f3;
  border-color: #e2e2e2;
  color: #9a9a9a;
  cursor: default;
}
.block-style-actions button:not(:disabled):hover, .block-style-levels button:hover { background: #ececec; }
.block-style-actions [data-mark-action="add"]:not(:disabled):hover,
.block-style-actions button.is-active:hover, .block-style-levels button.is-active:hover {
  background: #2a2a2a;
  color: #fff;
}