:root {
  --ink: #17261f;
  --muted: #708078;
  --line: #e2eae4;
  --soft: #f5f8f5;
  --paper: #ffffff;
  --green: #1e7b5a;
  --green-dark: #135b42;
  --green-light: #e9f5ef;
  --coral: #e17b58;
  --shadow: 0 20px 60px rgba(28, 61, 45, .09);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: #f7faf8;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  width: 248px;
  background: #173d30;
  border-right: 1px solid #173d30;
  padding: 28px 18px 20px;
  display: flex;
  flex-direction: column;
}
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 10px; }
.brand-lockup strong { display: block; color: #f4fbf6; font-size: 16px; line-height: 1.3; }
.brand-lockup span { display: block; color: #a9c8b4; font-size: 12px; margin-top: 3px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: #174332; background: #c6e7d1; font-weight: 800; font-size: 20px; border-radius: 12px; box-shadow: 0 8px 18px rgba(4, 28, 19, .2); }
.main-nav { display: grid; gap: 8px; margin-top: 48px; }
.nav-item { border: 0; background: transparent; color: #b1cbbc; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; text-align: left; font-weight: 700; transition: .18s ease; }
.nav-item:hover { background: rgba(221, 245, 229, .1); color: #f2fff5; }
.nav-item.is-active { color: #f4fff6; background: rgba(201, 237, 213, .16); box-shadow: inset 3px 0 #c6e7d1; }
.nav-icon { width: 22px; text-align: center; color: #c6e7d1; font-size: 20px; }
.sidebar-bottom { margin-top: auto; }
.help-card { display: flex; gap: 10px; align-items: center; margin: 0 4px 18px; padding: 13px; background: rgba(216, 244, 224, .12); border: 1px solid rgba(198, 231, 209, .18); border-radius: 12px; }
.help-card strong { display: block; color: #e8f8ec; font-size: 12px; }
.help-card span:not(.help-icon) { display: block; color: #a8c5b1; font-size: 11px; margin-top: 3px; }
.help-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #c6e7d1; color: #174332; font-weight: 800; }
.user-chip { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 8px 6px; color: #effbf2; text-align: left; }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #f0c8af; color: #764733; font-weight: 800; }
.user-copy { flex: 1; }
.user-copy strong, .user-copy small { display: block; }
.user-copy strong { font-size: 12px; }
.user-copy small { color: #a8c5b1; font-size: 11px; margin-top: 2px; }
.more { color: #9bbbaa; letter-spacing: 2px; }

.main-content { flex: 1; min-width: 0; padding: 32px clamp(24px, 4vw, 64px) 60px; background: #f7faf8; }
.topbar { max-width: 1240px; margin: 0 auto 31px; padding-bottom: 22px; border-bottom: 1px solid #e4ece6; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.eyebrow, .section-kicker { margin: 0; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 31px; letter-spacing: 0; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.account-summary { display: grid; gap: 2px; text-align: right; color: var(--muted); font-size: 11px; }
.account-summary b { color: var(--green-dark); font-size: 12px; }
.quiet-button, .primary-button { border-radius: 9px; border: 1px solid var(--line); padding: 11px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; transition: .18s ease; }
.quiet-button { background: var(--paper); color: #65736a; }
.quiet-button:hover { border-color: #bdd2c4; color: var(--green-dark); }
.primary-button { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 9px 20px rgba(30,123,90,.16); }
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.primary-button.compact { padding: 10px 14px; }

.account-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(19, 48, 37, .26); backdrop-filter: blur(2px); }
.account-modal { position: fixed; z-index: 21; top: 50%; left: 50%; width: min(420px, calc(100vw - 32px)); transform: translate(-50%, -46%); opacity: 0; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 24px 70px rgba(28, 61, 45, .2); transition: .18s ease; }
.account-modal.is-open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.account-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.account-modal-head h2 { margin: 5px 0 0; font-size: 22px; }
.account-note { color: var(--muted); font-size: 13px; margin: 14px 0 20px; }
.account-modal form { display: grid; gap: 14px; }
.account-modal input { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; color: var(--ink); background: #fbfdfb; }
.account-modal input:focus { outline: 2px solid rgba(30,123,90,.18); border-color: var(--green); }
.account-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.account-current { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 15px; color: var(--muted); font-size: 12px; }
.account-current strong { color: var(--ink); }

.view { display: none; max-width: 1240px; margin: 0 auto; }
.view.is-visible { display: block; }
.intro-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.intro-row h2 { margin-bottom: 6px; font-size: 22px; }
.intro-row p { color: var(--muted); margin-bottom: 0; font-size: 14px; }
.step-pill { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #eef6f0; color: var(--green-dark); border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.step-pill span { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 11px; }
.step-pill i { width: 15px; height: 1px; background: #c8dbce; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(330px, .87fr); gap: 22px; align-items: start; }
.creation-panel, .preview-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.creation-panel { padding: 26px 28px 22px; }
.preview-panel { padding: 22px; position: sticky; top: 20px; }
.panel-heading, .preview-heading, .upload-heading, .form-footer, .preview-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.panel-heading, .preview-heading { margin-bottom: 22px; }
.panel-heading h3, .preview-heading h3 { margin: 5px 0 0; font-size: 18px; }
.optional-note, .label-soft { color: #94a197; font-size: 11px; font-weight: 600; }
.field-label { display: block; margin-bottom: 8px; color: #35453b; font-size: 13px; font-weight: 800; }
.required { color: var(--coral); }
.idea-input, input, select { width: 100%; border: 1px solid #d9e5dc; border-radius: 9px; background: #fbfdfb; color: var(--ink); outline: 0; transition: .18s ease; }
.idea-input { min-height: 114px; resize: vertical; padding: 14px; line-height: 1.65; }
input, select { height: 42px; padding: 0 12px; }
.idea-input:focus, input:focus, select:focus { border-color: #75ae90; box-shadow: 0 0 0 3px #e4f2e9; background: #fff; }
.idea-input::placeholder, input::placeholder { color: #a4b0a8; }
.field-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 19px; color: #7b9083; font-size: 11px; }
.field-hint span { color: var(--coral); font-size: 14px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.field-group { min-width: 0; }
.upload-block { margin-top: 20px; padding-top: 19px; border-top: 1px solid #edf2ee; }
.upload-heading { align-items: flex-start; margin-bottom: 11px; }
.upload-heading .field-label { margin-bottom: 3px; }
.upload-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.upload-count { color: var(--green); background: var(--green-light); border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; }
.dropzone { min-height: 116px; border: 1px dashed #a9cdb5; border-radius: 11px; background: #f7fbf8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: .18s ease; }
.dropzone:hover, .dropzone.is-dragging { border-color: var(--green); background: #eef8f1; }
.dropzone input { display: none; }
.upload-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #dfefe4; color: var(--green); font-size: 19px; font-weight: 800; }
.drop-title { color: var(--green-dark); font-size: 13px; font-weight: 800; }
.drop-subtitle { color: #93a49a; font-size: 11px; }
.upload-status { min-height: 22px; padding-top: 7px; font-size: 12px; font-weight: 700; }
.upload-status.success { color: #21845d; }
.upload-status.error { color: #bd563d; }
.asset-list { display: grid; gap: 8px; }
.asset-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid #e5eee7; border-radius: 9px; background: #fbfdfb; }
.asset-thumb { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #edf4ef; color: var(--green); font-size: 19px; }
.asset-thumb img, .asset-thumb video { width: 100%; height: 100%; object-fit: cover; }
.asset-name { min-width: 0; color: #3d4d43; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-size { color: #96a49b; font-size: 10px; margin-top: 3px; }
.remove-asset { width: 25px; height: 25px; border: 0; border-radius: 6px; background: transparent; color: #a0ada5; font-size: 18px; }
.remove-asset:hover { color: #b94d37; background: #fff0eb; }
.form-footer { margin-top: 22px; padding-top: 17px; border-top: 1px solid #edf2ee; }
.secure-note { color: #7e9185; font-size: 11px; }
.secure-note span { color: var(--green); font-weight: 900; margin-right: 5px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; color: #8b9990; font-size: 11px; }
.status-dot i { width: 7px; height: 7px; border-radius: 50%; background: #bfcac2; }
.preview-stage { min-height: 342px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: #f7faf8; border: 1px solid #edf2ee; border-radius: 12px; text-align: center; }
.preview-empty-art { width: 157px; padding: 15px 17px; margin-bottom: 22px; border: 1px solid #dce9df; border-radius: 10px; background: #fff; box-shadow: 0 12px 24px rgba(48, 86, 64, .06); }
.art-window { height: 110px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 7px; background: #e8f3eb; overflow: hidden; }
.art-window::before, .art-window::after { content: ""; position: absolute; bottom: -17px; width: 67px; height: 67px; border-radius: 50% 50% 0 0; background: #bdd9c7; }
.art-window::before { left: -7px; }
.art-window::after { right: -8px; background: #d8e9dc; }
.art-window span { position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #bed8c6; }
.art-window span:nth-child(1) { left: 17px; }.art-window span:nth-child(2) { left: 31px; }.art-window span:nth-child(3) { left: 45px; }
.art-window b { z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--green); font-size: 22px; }
.art-line { height: 7px; width: 72%; margin: 11px auto 0; border-radius: 99px; background: #e4eee7; }.art-line.wide { width: 86%; margin-top: 15px; }.art-line.short { width: 45%; }
.preview-stage > strong { font-size: 14px; }.preview-stage > p { margin: 7px 0 0; color: #8b9a90; font-size: 12px; }
.preview-stage > video { width: min(100%, 300px); max-height: 430px; margin-bottom: 15px; border-radius: 10px; background: #17191f; object-fit: contain; }
.preview-meta { margin-top: 15px; padding-top: 14px; border-top: 1px solid #edf2ee; }
.preview-meta div { flex: 1; text-align: center; }.preview-meta div + div { border-left: 1px solid #edf2ee; }
.preview-meta span, .preview-meta strong { display: block; }.preview-meta span { color: #91a097; font-size: 10px; }.preview-meta strong { margin-top: 4px; color: #496253; font-size: 12px; }
.placeholder-view { min-height: 540px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-align: center; box-shadow: var(--shadow); }
.placeholder-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 17px; background: var(--green-light); color: var(--green); font-size: 28px; }
.placeholder-view h2 { margin: 8px 0 7px; font-size: 25px; }.placeholder-view p { max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 9px; background: #193b2c; color: #fff; font-size: 13px; box-shadow: 0 12px 30px rgba(20, 49, 35, .22); transition: .2s ease; }.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 980px) {
  .sidebar { width: 210px; }.workspace-grid { grid-template-columns: 1fr; }.preview-panel { position: static; }.preview-stage { min-height: 280px; }
}
@media (max-width: 720px) {
  .app-shell { display: block; }.sidebar { width: 100%; padding: 14px 16px 12px; border-right: 0; border-bottom: 1px solid #173d30; }.main-nav { grid-template-columns: repeat(3, 1fr); margin-top: 16px; }.sidebar-bottom { display: none; }.main-content { padding: 24px 14px 42px; }.topbar { align-items: flex-start; margin-bottom: 25px; }.topbar-actions .quiet-button { display: none; } h1 { font-size: 27px; }.intro-row { display: block; }.step-pill { margin-top: 16px; width: fit-content; }.creation-panel { padding: 20px 16px 18px; }.field-grid { grid-template-columns: 1fr; gap: 15px; margin-bottom: 15px; }.form-footer { align-items: stretch; flex-direction: column; }.form-footer .primary-button { width: 100%; }.preview-panel { padding: 16px; }.preview-stage { min-height: 250px; }
}

/* Dashboard visual language: a calm canvas, compact chrome, and one clear hero. */
:root {
  --ink: #29283a;
  --muted: #7e7f91;
  --line: #e8e8f0;
  --soft: #f7f7fb;
  --paper: #ffffff;
  --green: #6979ca;
  --green-dark: #4d5aa7;
  --green-light: #eef0fc;
  --coral: #d07c75;
  --shadow: 0 18px 50px rgba(78, 80, 132, .08);
}
body, .main-content { background: #f7f7fb; }
.sidebar { background: #fff; border-right-color: #e8e8f0; }
.brand-lockup strong { color: #29283a; }
.brand-lockup span { color: #8b8b9e; }
.brand-mark { color: #fff; background: #6979ca; box-shadow: 0 8px 18px rgba(105,121,202,.2); }
.nav-item { color: #7e7f91; }
.nav-item:hover { background: #f1f2fc; color: #4d5aa7; }
.nav-item.is-active { color: #4d5aa7; background: #eef0fc; box-shadow: inset 3px 0 #6979ca; }
.nav-icon { color: #6979ca; }
.help-card { background: #f1f1fb; border-color: #e6e6f4; }
.help-card strong { color: #4d5aa7; }
.help-card span:not(.help-icon) { color: #85869c; }
.help-icon { background: #e3e5f8; color: #5968b4; }
.user-chip { color: #29283a; }
.user-copy small { color: #8b8b9e; }
.topbar { border-bottom-color: #e8e8f0; }
.topbar-tools { display: flex; align-items: center; gap: 10px; }
.search-box { width: 205px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #e5e5ed; border-radius: 999px; background: #fff; color: #8b8b9e; box-shadow: 0 5px 15px rgba(72, 73, 116, .04); }
.search-box span { font-size: 20px; line-height: 1; }
.search-box input { height: auto; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box input:focus { box-shadow: none; }
.icon-button, .mini-profile { border: 0; display: grid; place-items: center; }
.icon-button { width: 36px; height: 36px; border-radius: 50%; color: #88899a; background: transparent; font-size: 18px; }
.icon-button:hover { background: #eef0fc; color: #5968b4; }
.mini-profile { width: 32px; height: 32px; border-radius: 50%; color: #5a3f31; background: #f1cdb8; font-size: 12px; font-weight: 800; }
.workspace-hero { min-height: 190px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; margin-bottom: 24px; padding: 28px 34px; position: relative; border: 1px solid #dddff1; border-radius: 14px; background: #e2e3f6; }
.hero-copy { position: relative; z-index: 1; max-width: 560px; }
.hero-label { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: #5e68ac; font-size: 11px; font-weight: 800; }
.hero-copy h2 { margin: 13px 0 7px; color: #3e467c; font-size: 26px; letter-spacing: 0; }
.hero-copy p { max-width: 440px; margin: 0; color: #6a6d9a; font-size: 13px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: #5c68b0; font-size: 11px; font-weight: 800; }
.hero-actions i { width: 18px; height: 1px; background: #b2b6e0; }
.hero-illustration { width: 225px; height: 155px; position: relative; flex: 0 0 auto; margin-right: 22px; }
.hero-paper { position: absolute; width: 92px; height: 112px; border-radius: 8px; background: #f9f7ff; box-shadow: 0 14px 24px rgba(83, 82, 145, .14); transform: rotate(-12deg); }
.paper-one { left: 15px; top: 17px; }.paper-two { right: 17px; top: 8px; background: #f2ccd0; transform: rotate(13deg); }
.hero-film { position: absolute; left: 57px; top: 31px; width: 112px; height: 92px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 11px; border-radius: 10px; background: #7785d2; box-shadow: 0 16px 28px rgba(81, 82, 155, .26); transform: rotate(-3deg); }
.hero-film span { height: 8px; border-radius: 3px; background: rgba(255,255,255,.38); }.hero-film b { grid-column: 1 / -1; align-self: center; justify-self: center; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: #faf9ff; color: #6979ca; font-size: 18px; }
.intro-row { margin-bottom: 15px; }.intro-row h2 { color: #302f42; }.intro-row p { color: #7b7d90; }
.creation-panel, .preview-panel { border-color: #e8e8f0; box-shadow: 0 16px 44px rgba(78, 80, 132, .07); }
.preview-stage { background: #fbfafd; border-color: #ededf3; }
.placeholder-view { border-color: #e8e8f0; box-shadow: 0 16px 44px rgba(78, 80, 132, .07); }
.history-placeholder .placeholder-icon, .placeholder-icon { background: #eef0fc; color: #6979ca; }

.primary-button, .quiet-button { border-radius: 999px; border-color: transparent; box-shadow: none; }
.primary-button { background: #6979ca; box-shadow: 0 8px 18px rgba(105,121,202,.18); padding-inline: 20px; }
.primary-button:hover { background: #5968b4; box-shadow: 0 10px 22px rgba(105,121,202,.23); }
.quiet-button { background: #f1f1f7; color: #68697a; padding-inline: 15px; }
.quiet-button:hover { background: #e9e9f3; color: #505272; }
.dropzone { border-style: solid; border-color: #e3e4ef; background: #fafaff; }
.dropzone:hover, .dropzone.is-dragging { border-color: #aeb6e3; background: #f4f5ff; }

@media (max-width: 720px) {
  .topbar-tools { display: none; }
  .workspace-hero { min-height: 0; padding: 24px 22px; }
  .hero-copy h2 { font-size: 22px; }
  .hero-illustration { display: none; }
}

/* Reference-inspired finish: airy blue canvas, warm pink accents, and softer controls. */
:root {
  --ink: #2d3042;
  --muted: #85879a;
  --line: #e9eaf3;
  --soft: #f8f8fc;
  --paper: #ffffff;
  --green: #6281e8;
  --green-dark: #4d68c8;
  --green-light: #eef2ff;
  --coral: #e3828f;
  --shadow: 0 16px 44px rgba(75, 91, 151, .07);
}

body, .main-content { background: #f8f8fc; }
.sidebar { background: #fff; border-right-color: #ececf3; }
.brand-lockup strong { color: #2d3042; }
.brand-lockup span { color: #9294a5; }
.brand-mark { color: #fff; background: #6281e8; box-shadow: 0 8px 18px rgba(98,129,232,.2); }
.nav-item { color: #85879a; border-radius: 12px; }
.nav-item:hover { background: #f3f5ff; color: #4d68c8; }
.nav-item.is-active { color: #4d68c8; background: #eef2ff; box-shadow: none; }
.nav-icon { color: #6281e8; }
.help-card { background: #f7f7fd; border-color: #e9e9f4; }
.help-card strong { color: #5365b4; }
.help-card span:not(.help-icon) { color: #8d8fa2; }
.help-icon { background: #e7ecff; color: #5872d0; }
.user-chip { color: #2d3042; }
.user-copy small { color: #9294a5; }
.topbar { border-bottom-color: #e9eaf1; }
.eyebrow, .section-kicker { color: #6281e8; }
.search-box { border-color: #e8e9f1; box-shadow: 0 5px 15px rgba(72, 81, 130, .04); }
.icon-button { color: #8b8da0; }
.icon-button:hover { background: #eef2ff; color: #5872d0; }
.mini-profile { background: #f2c7c7; }
.workspace-hero { border-color: #dfe3f6; background: linear-gradient(115deg, #e3eaff 0%, #e8e8fb 54%, #f4e2f0 100%); }
.hero-label { color: #5365b4; }
.hero-copy h2 { color: #3d4f91; }
.hero-copy p { color: #70799f; }
.hero-actions { color: #5872d0; }
.hero-actions i { background: #b7c2ec; }
.hero-paper { background: #fbfaff; box-shadow: 0 14px 24px rgba(82, 91, 150, .13); }
.paper-two { background: #f2cfd8; }
.hero-film { background: #6e86e8; box-shadow: 0 16px 28px rgba(81, 101, 190, .24); }
.hero-film b { background: #fbfaff; color: #6281e8; }
.intro-row h2 { color: #303246; }
.intro-row p { color: #818397; }
.step-pill { background: #f0f3ff; color: #5365b4; }
.step-pill span { background: #6281e8; }
.step-pill i { background: #c6cff0; }
.creation-panel, .preview-panel, .placeholder-view { border-color: #e9eaf3; box-shadow: var(--shadow); }
.panel-heading h3, .preview-heading h3 { color: #303246; }
.optional-note, .label-soft { color: #9a9bab; }
.field-label { color: #45485c; }
.idea-input, input, select { border-color: #e1e3ee; background: #fcfcff; }
.idea-input:focus, input:focus, select:focus { border-color: #91a8ed; box-shadow: 0 0 0 3px #edf1ff; }
.idea-input::placeholder, input::placeholder { color: #adb0bf; }
.field-hint { color: #8a8da1; }
.field-hint span { color: #e3828f; }
.upload-block, .form-footer, .preview-meta { border-color: #eef0f5; }
.upload-count { color: #5872d0; background: #eef2ff; }
.dropzone { border-color: #d9deef; background: #fcfcff; }
.dropzone:hover, .dropzone.is-dragging { border-color: #9aaceb; background: #f3f6ff; }
.upload-symbol { background: #edf1ff; color: #6281e8; }
.drop-title { color: #5365b4; }
.drop-subtitle, .secure-note, .status-dot { color: #9799aa; }
.asset-item { border-color: #eceef4; background: #fcfcff; }
.asset-thumb { background: #f0f3fb; color: #6281e8; }
.asset-name { color: #4a4d60; }
.asset-size { color: #9fa1b1; }
.remove-asset { color: #a9abba; border-radius: 50%; }
.remove-asset:hover { color: #d16877; background: #fff0f3; }
.preview-stage { background: #fcfcff; border-color: #eef0f5; }
.preview-empty-art { border-color: #e6e8f2; box-shadow: 0 12px 24px rgba(82, 91, 150, .06); }
.art-window { background: #edf2ff; }
.art-window::before, .art-window::after { background: #cdd8fa; }
.art-window::after { background: #e5d9f2; }
.art-window span { background: #c4d0f5; }
.art-window b { color: #6281e8; }
.art-line { background: #e9ecf6; }
.preview-stage > p { color: #9699ab; }
.preview-meta div + div { border-color: #eef0f5; }
.preview-meta span { color: #9a9cac; }
.preview-meta strong { color: #56617f; }
.placeholder-icon { background: #eef2ff; color: #6281e8; }

/* Controls use a soft pill with a small lift instead of a hard rectangular block. */
.primary-button, .quiet-button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.primary-button { background: #6281e8; box-shadow: 0 8px 18px rgba(98,129,232,.18); }
.primary-button:hover { background: #5573d8; box-shadow: 0 11px 22px rgba(98,129,232,.24); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); box-shadow: 0 5px 12px rgba(98,129,232,.18); }
.quiet-button { background: #f1f2f8; color: #6d7084; }
.quiet-button:hover { background: #e9ebf5; color: #53566d; transform: translateY(-1px); }
.nav-item:focus-visible, .primary-button:focus-visible, .quiet-button:focus-visible, .icon-button:focus-visible { outline: 3px solid #d7dfff; outline-offset: 2px; }

.asset-source-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: #f4f5fb; }
.source-tab { border: 0; border-radius: 999px; padding: 8px 14px; background: transparent; color: #8a8da0; font-size: 12px; font-weight: 800; transition: .18s ease; }
.source-tab:hover { color: #5872d0; }
.source-tab.is-active { background: #fff; color: #5872d0; box-shadow: 0 4px 12px rgba(80, 94, 155, .09); }
.mode-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 20px; }
.mode-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 14px; border: 1.5px solid #e6e9f2; border-radius: 14px; background: #fff; color: #4a4d60; text-align: left; transition: .2s ease; position: relative; }
.mode-card:hover { border-color: #b9c6ef; background: #fafbff; transform: translateY(-1px); }
.mode-card.is-active { border-color: #8f9fe8; background: #f3f6ff; box-shadow: 0 10px 24px rgba(98, 129, 232, .13); }
.mode-card-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: #fff; }
.mode-card-icon.plain { background: linear-gradient(145deg, #6f8be6, #5a73d2); }
.mode-card-icon.combo { background: linear-gradient(145deg, #58a885, #3e8c6a); }
.mode-card-copy { min-width: 0; display: grid; gap: 4px; }
.mode-card-copy strong { font-size: 14px; color: #3d4052; }
.mode-card-copy small { color: #8b8fa1; font-size: 11px; line-height: 1.5; }
.mode-card-flag { position: absolute; top: 9px; right: 9px; padding: 2px 8px; border-radius: 999px; background: #eef1fb; color: #8a93c8; font-size: 9px; font-weight: 800; }
.mode-card.is-active .mode-card-flag { background: #dfe6fa; color: #5f76d4; }
.combo-mode { margin-bottom: 14px; }
.combo-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.combo-mode-option { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid #eceef5; border-radius: 12px; background: #fff; color: #55586c; cursor: pointer; transition: .18s ease; }
.combo-mode-option:hover { border-color: #c3cdf0; background: #fafbff; }
.combo-mode-option input { display: none; }
.combo-mode-option:has(input:checked) { border-color: #98aaeb; background: #f4f6ff; box-shadow: 0 5px 14px rgba(98,129,232,.1); }
.combo-mode-option span { font-size: 12px; font-weight: 800; }
.combo-mode-option small { color: #9a9cac; font-size: 10px; line-height: 1.5; }
.combo-source-panel { margin-bottom: 14px; }
.combo-script-block { margin: 2px 0 14px; }
.asset-name-row { min-width: 0; flex: 1; display: grid; gap: 4px; }
.asset-label-input { width: 100%; border: 1px solid #e6e9f2; border-radius: 8px; padding: 5px 8px; font-size: 10px; color: #55586c; background: #fafbff; box-sizing: border-box; }
.asset-label-input:focus { outline: 2px solid #e8ecfb; border-color: #9aaceb; }
.preview-empty-art .art-film { width: 74px; height: 88px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #7f97e8, #5e75cf); color: #fff; font-size: 26px; box-shadow: 0 12px 26px rgba(92, 115, 205, .25); }
.combo-matching { margin: 16px 0; padding: 13px 13px 10px; border: 1px solid #eceef5; border-radius: 13px; background: #fafbff; }
.combo-matching-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.combo-matching-head .field-label { margin-bottom: 3px; }
.combo-matching-head p { margin: 0; color: #9a9cac; font-size: 10px; line-height: 1.5; }
.combo-matching-empty { padding: 16px 10px; color: #9a9cac; font-size: 11px; text-align: center; background: #f6f7fb; border-radius: 10px; }
.combo-match-item { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 9px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed #e7eaf4; }
.combo-match-item:last-child { border-bottom: 0; }
.combo-match-sentence { min-width: 0; color: #55586c; font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-match-select { width: 100%; border: 1px solid #e1e3ee; border-radius: 9px; padding: 7px 8px; font-size: 11px; color: #55586c; background: #fff; }
.ai-script-block { margin: 14px 0; padding: 13px 13px 11px; border: 1px solid #e8ebf4; border-radius: 13px; background: #fafbff; }
.ai-script-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ai-script-head .field-label { margin-bottom: 0; }
.ai-script-box { min-height: 96px; resize: vertical; }
.voice-intro { margin-bottom: 18px; }
.voice-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.voice-tips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.voice-tips span { padding: 5px 10px; border-radius: 999px; background: #eef1fb; color: #7c88bd; font-size: 10px; font-weight: 700; }
.voice-list-empty { padding: 26px 12px; color: #9a9cac; font-size: 12px; text-align: center; background: #f7f8fb; border-radius: 12px; }
.voice-list { display: grid; gap: 9px; }
.voice-list-item { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #eceef5; border-radius: 12px; background: #fff; }
.voice-list-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #7f97e8, #5e75cf); color: #fff; font-size: 16px; }
.voice-list-copy { min-width: 0; flex: 1; }
.voice-list-copy strong, .voice-list-copy small { display: block; }
.voice-list-copy strong { color: #4a4d60; font-size: 12px; }
.voice-list-copy small { margin-top: 3px; color: #9a9cac; font-size: 10px; }
.voice-list-item audio { width: 120px; height: 30px; }
.voice-price-card { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #e4e9f4; border-radius: 12px; background: #f6f8ff; }
.voice-price-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #7f97e8, #5e75cf); color: #fff; font-size: 15px; font-weight: 800; }
.voice-price-copy { min-width: 0; }
.voice-price-copy strong, .voice-price-copy small { display: block; }
.voice-price-copy strong { color: #4a4d60; font-size: 12px; }
.voice-price-copy small { margin-top: 3px; color: #8b8fa1; font-size: 11px; }
.asset-source-panel { display: none; }
.asset-source-panel.is-visible { display: block; }
.online-search { display: flex; gap: 9px; margin-bottom: 11px; }
.online-search input { flex: 1; min-width: 0; }
.quiet-button.compact { min-height: 38px; padding: 9px 15px; white-space: nowrap; }
.online-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.online-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px; border: 1px solid #eceef5; border-radius: 12px; background: #fff; }
.online-card img { width: 58px; height: 58px; border-radius: 8px; object-fit: cover; background: #edf1ff; }
.online-card-copy { min-width: 0; }
.online-card-copy strong, .online-card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-card-copy strong { color: #4a4d60; font-size: 11px; }
.online-card-copy span { margin-top: 4px; color: #9a9cac; font-size: 10px; }
.online-card .quiet-button { grid-column: 1 / -1; width: 100%; min-height: 32px; padding: 7px 12px; font-size: 11px; }
.online-note, .online-empty { margin: 10px 0 0; color: #9a9cac; font-size: 10px; line-height: 1.5; }
.online-empty { padding: 18px 0; text-align: center; }
.online-fallback-note { grid-column: 1 / -1; margin: 0; padding: 2px 2px 1px; color: #9a9cac; font-size: 10px; }
.voice-block { margin-top: 20px; padding-top: 19px; border-top: 1px solid #eef0f5; }
.voice-grid { margin-bottom: 13px; }
.toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control { width: 35px; height: 20px; flex: 0 0 auto; position: relative; border-radius: 999px; background: #dfe2ed; transition: .18s ease; }
.toggle-control::after { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(55, 65, 111, .15); transition: .18s ease; }
.toggle-row input:checked + .toggle-control { background: #6281e8; }
.toggle-row input:checked + .toggle-control::after { transform: translateX(15px); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { color: #55586c; font-size: 12px; }
.toggle-row small { margin-top: 3px; color: #9a9cac; font-size: 10px; }

@media (max-width: 520px) {
  .online-results { grid-template-columns: 1fr; }
  .online-search { align-items: stretch; flex-direction: column; }
  .online-search .quiet-button { width: 100%; }
}

.digital-intro { margin-bottom: 18px; }
.digital-intro .quiet-button { min-height: 38px; padding-inline: 16px; }
.digital-workspace { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(330px, .87fr); gap: 22px; align-items: start; }
.digital-setup { padding: 26px 28px 22px; }
.digital-field { margin-bottom: 20px; }
.digital-field-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 9px; }
.digital-field-heading .field-label { margin-bottom: 0; }
.avatar-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 280px; overflow-y: auto; padding: 2px; align-content: start; }
.avatar-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 999px; background: #f4f5fb; }
.avatar-tab { border: 0; border-radius: 999px; padding: 7px 14px; background: transparent; color: #8a8da0; font-size: 12px; font-weight: 800; transition: .18s ease; }
.avatar-tab:hover { color: #5872d0; }
.avatar-tab.is-active { background: #fff; color: #5872d0; box-shadow: 0 4px 12px rgba(80, 94, 155, .09); }
.avatar-empty.is-mine { text-align: left; }
.clone-panel { margin-top: 10px; padding: 12px; border: 1px dashed #cbd6ec; border-radius: 12px; background: #fafbff; }
.clone-dropzone { display: grid; gap: 2px; place-items: center; padding: 12px 8px; border: 1px dashed #cbd6ec; border-radius: 11px; text-align: center; cursor: pointer; color: #8a8da0; transition: .18s ease; }
.clone-dropzone:hover { border-color: #98aaeb; background: #fff; }
.clone-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.clone-dropzone > span { font-size: 18px; color: #98aaeb; }
.clone-dropzone strong { margin-top: 6px; color: #56617f; font-size: 12px; }
.clone-dropzone small { margin-top: 4px; color: #9a9cac; font-size: 10px; }
.clone-panel .quiet-button { margin-top: 10px; width: 100%; justify-content: center; }
.clone-status { margin-top: 9px; color: #85879a; font-size: 11px; line-height: 1.6; }
.clone-status.is-error { color: #d4577f; }
.clone-status.is-success { color: #3e9b6f; }
.clone-tasks { margin-top: 10px; display: grid; gap: 7px; }
.clone-task-item { padding: 9px 11px; border: 1px solid #eceef5; border-radius: 10px; background: #fff; color: #85879a; font-size: 11px; }
.clone-task-item.is-done { color: #3e9b6f; border-color: #cfe8da; background: #f4fbf7; }
.clone-task-item.is-error { color: #d4577f; border-color: #f2d2dd; background: #fdf5f8; }
.avatar-choice { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid #eceef5; border-radius: 12px; background: #fff; color: #55586c; text-align: left; transition: .18s ease; }
.avatar-choice:hover { border-color: #becaf1; background: #fafbff; }
.avatar-choice.is-active { border-color: #98aaeb; background: #f4f6ff; box-shadow: 0 5px 14px rgba(98,129,232,.1); }
.avatar-face { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; }
.avatar-face-blue { background: #7292eb; }.avatar-face-pink { background: #e49aa7; }.avatar-face-sand { background: #d0a77f; }.avatar-face-green { background: #62a883; }.avatar-face-violet { background: #9d87d6; }
.avatar-role { display: block; margin-top: 3px; color: #b0b3c4; font-style: normal; font-size: 9px; letter-spacing: 0; }
.avatar-image { object-fit: cover; background: #e8eee9; }
.avatar-empty { grid-column: 1 / -1; border: 1px dashed #cbdad0; border-radius: 12px; padding: 20px 14px; color: var(--muted); text-align: center; font-size: 12px; background: #fbfdfb; }
.avatar-choice strong, .avatar-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-choice strong { font-size: 11px; }.avatar-choice small { margin-top: 3px; color: #9a9cac; font-size: 10px; }
.digital-script { min-height: 136px; }
.digital-options { margin-bottom: 13px; }
.digital-caption-toggle { padding: 9px 0; }
.digital-reference { margin-top: 17px; padding-top: 18px; border-top: 1px solid #eef0f5; }
.reference-dropzone { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #d9deef; border-radius: 12px; background: #fcfcff; color: #8b8ea1; cursor: pointer; transition: .18s ease; }
.reference-dropzone:hover { border-color: #9aaceb; background: #f4f6ff; }
.reference-dropzone input { display: none; }
.reference-dropzone > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #edf1ff; color: #6281e8; font-size: 18px; }
.reference-dropzone strong { color: #5968b4; font-size: 11px; }.reference-dropzone small { color: #9a9cac; font-size: 10px; }
.reference-file { min-height: 19px; padding-top: 7px; font-size: 11px; }.reference-file.is-success { color: #5d73c7; }.reference-file.is-error { color: #d16877; }
.digital-preview-panel { position: sticky; top: 20px; }
.digital-preview-stage { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 24px 20px 28px; overflow: hidden; position: relative; border: 1px solid #eef0f5; border-radius: 12px; background: linear-gradient(155deg, #f4f6ff 0%, #fcf8fc 100%); text-align: center; }
.digital-preview-stage::before { content: ""; position: absolute; width: 245px; height: 245px; top: 34px; border-radius: 50%; background: #e8edff; }
.digital-figure { width: 150px; height: 218px; position: relative; z-index: 1; margin-bottom: 22px; }
.figure-hair { position: absolute; left: 39px; top: 11px; width: 72px; height: 78px; border-radius: 46% 46% 42% 42%; background: #405078; }
.figure-face { position: absolute; left: 47px; top: 25px; width: 56px; height: 66px; display: grid; place-items: center; border-radius: 48% 48% 44% 44%; background: #f2c6b7; color: #a26357; font-size: 16px; font-weight: 800; }
.figure-body { position: absolute; left: 19px; bottom: 0; width: 112px; height: 132px; border-radius: 52px 52px 18px 18px; background: #7090e8; box-shadow: inset 0 15px 22px rgba(255,255,255,.16); }
.digital-preview-stage > strong, .digital-preview-stage > p { position: relative; z-index: 1; }.digital-preview-stage > strong { font-size: 14px; }.digital-preview-stage > p { margin: 7px 0 0; color: #9699ab; font-size: 12px; }.digital-preview-stage > video { position: relative; z-index: 1; width: min(100%, 300px); max-height: 330px; border-radius: 10px; background: #161821; object-fit: contain; }
.digital-avatar-preview { position: relative; z-index: 1; width: min(100%, 240px); height: 300px; object-fit: cover; border-radius: 12px; background: #e8eee9; box-shadow: 0 12px 26px rgba(72, 83, 133, .16); margin-bottom: 18px; }
.preview-download { position: relative; z-index: 1; display: inline-flex; align-items: center; margin-top: 14px; padding: 8px 12px; border-radius: 8px; color: var(--green-dark); background: var(--green-light); font-size: 12px; font-weight: 800; text-decoration: none; }

@media (max-width: 980px) {
  .digital-workspace { grid-template-columns: 1fr; }.digital-preview-panel { position: static; }
}
@media (max-width: 620px) {
  .avatar-choices { grid-template-columns: 1fr; }.avatar-choice { padding: 10px; }.digital-intro .quiet-button { margin-top: 14px; }
}

.remix-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 2px 0 18px; padding: 13px 15px; border: 1px solid #e6e9f5; border-radius: 14px; background: linear-gradient(100deg, #f8f9ff, #fff8fb); }
.remix-card strong, .remix-card span { display: block; }.remix-card strong { color: #4d5d9e; font-size: 12px; }.remix-card span { margin-top: 4px; color: #9295a8; font-size: 10px; }
.remix-card .quiet-button { flex: 0 0 auto; min-height: 34px; padding: 8px 13px; font-size: 11px; }
.digital-intro-actions { display: flex; align-items: center; gap: 9px; }.digital-intro-actions .primary-button, .digital-intro-actions .quiet-button { min-height: 38px; padding-inline: 15px; font-size: 11px; }
.text-button { border: 0; padding: 0; background: transparent; color: #6281e8; font-size: 11px; font-weight: 800; cursor: pointer; }.text-button:hover { color: #4d68c8; }

.history-board { padding: 29px 31px 30px; border: 1px solid #e9eaf3; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 23px; border-bottom: 1px solid #eef0f5; }.history-head h2 { margin: 7px 0 5px; color: #303246; font-size: 24px; }.history-head p { margin: 0; color: #85879a; font-size: 13px; }
.history-retention-note { margin: 14px 0 0; color: #8d91a4; font-size: 11px; }
.history-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 0; }.history-stats div { padding: 15px 17px; border-radius: 12px; background: #f8f9fe; }.history-stats span, .history-stats strong { display: block; }.history-stats span { color: #9295a8; font-size: 11px; }.history-stats strong { margin-top: 5px; color: #5365b4; font-size: 23px; }
.history-list { display: grid; gap: 9px; }.history-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #eceef5; border-radius: 12px; background: #fff; }.history-item-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #eef2ff; color: #6281e8; font-size: 17px; }.history-item-icon.is-digital { background: #fff0f3; color: #d47e91; }.history-item-copy { min-width: 0; }.history-item-copy strong, .history-item-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.history-item-copy strong { color: #4a4d60; font-size: 12px; }.history-item-copy span { margin-top: 4px; color: #9a9cac; font-size: 10px; }.history-item-state { text-align: right; }.history-item-state b, .history-item-state small { display: block; }.history-item-state b { color: #5f77cf; font-size: 11px; }.history-item-state small { margin-top: 4px; color: #a0a2b0; font-size: 10px; }.history-view-button { min-height: 32px; padding: 7px 13px; font-size: 10px; }.history-empty { padding: 42px 15px 24px; text-align: center; }.history-empty[hidden] { display: none; }.history-empty > span { width: 45px; height: 45px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 14px; background: #eef2ff; color: #6281e8; font-size: 22px; }.history-empty strong { color: #55586c; font-size: 13px; }.history-empty p { margin: 6px 0 0; color: #9a9cac; font-size: 11px; }

.drawer-open { overflow: hidden; }.drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(44, 48, 74, .18); backdrop-filter: blur(2px); }.remix-drawer { width: min(470px, 100vw); height: 100vh; position: fixed; z-index: 21; top: 0; right: 0; display: flex; flex-direction: column; padding: 30px 25px 24px; background: #fff; box-shadow: -18px 0 50px rgba(61, 70, 125, .16); transform: translateX(102%); transition: transform .24s ease; }.remix-drawer.is-open { transform: translateX(0); }.remix-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid #eef0f5; }.remix-drawer-head h2 { margin: 7px 0 6px; color: #303246; font-size: 20px; }.remix-drawer-head p { margin: 0; color: #85879a; font-size: 11px; line-height: 1.6; }.remix-drawer-head .icon-button { flex: 0 0 auto; font-size: 23px; }.remix-search { padding: 20px 0 15px; }.remix-search .field-label { margin-bottom: 8px; }.remix-search-row { display: flex; gap: 8px; }.remix-search-row input { flex: 1; min-width: 0; }.remix-search-row .primary-button { min-height: 42px; padding-inline: 19px; }.remix-platforms { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; }.remix-platforms .source-tab { white-space: nowrap; }.remix-results { flex: 1; overflow: auto; padding: 2px 2px 15px; }.remix-result-card { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; padding: 11px; border: 1px solid #eceef5; border-radius: 14px; background: #fff; }.remix-result-card:hover { border-color: #cbd4f4; box-shadow: 0 7px 18px rgba(84, 101, 178, .08); }.remix-thumb { width: 55px; height: 74px; display: grid; place-items: center; grid-row: span 2; border-radius: 9px; color: #fff; font-size: 17px; }.remix-thumb.is-blue { background: linear-gradient(145deg, #84a1f2, #5e75d2); }.remix-thumb.is-pink { background: linear-gradient(145deg, #f0b5c1, #dd8297); }.remix-thumb.is-sand { background: linear-gradient(145deg, #ddb68f, #bf8d76); }.remix-result-copy { min-width: 0; }.remix-result-platform { color: #7183ca; font-size: 10px; }.remix-result-copy strong, .remix-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.remix-result-copy strong { margin-top: 4px; color: #4a4d60; font-size: 12px; }.remix-result-copy small { margin-top: 3px; color: #9a9cac; font-size: 10px; }.remix-result-copy p { margin: 7px 0 0; color: #85879a; font-size: 10px; line-height: 1.5; }.remix-result-card > .quiet-button { grid-column: 2; justify-self: start; min-height: 32px; padding: 7px 12px; font-size: 10px; }.remix-empty { padding: 35px 12px; color: #9a9cac; font-size: 12px; text-align: center; }.remix-output { padding-top: 14px; border-top: 1px solid #eef0f5; }.remix-output[hidden] { display: none; }.remix-output-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }.remix-output-head .quiet-button { min-height: 34px; padding: 7px 13px; font-size: 10px; }.remix-output textarea { width: 100%; min-height: 145px; resize: vertical; border: 1px solid #e1e3ee; border-radius: 11px; padding: 11px; background: #fcfcff; color: #55586c; font-size: 11px; line-height: 1.7; outline: 0; }

@media (max-width: 720px) {
  .digital-intro-actions { align-items: stretch; flex-direction: column; margin-top: 14px; }.digital-intro-actions button { width: 100%; }.history-board { padding: 22px 17px; }.history-head { align-items: stretch; flex-direction: column; }.history-head .primary-button { width: 100%; }.history-stats { gap: 7px; }.history-stats div { padding: 12px 10px; }.history-stats strong { font-size: 20px; }.history-item { grid-template-columns: 36px minmax(0, 1fr) auto; }.history-item-state { display: block; grid-column: 2; grid-row: 2; text-align: left; }.history-item-state b { display: none; }.history-item-state small { margin-top: 5px; }.history-view-button { grid-column: 3; grid-row: 1; }.remix-card { align-items: flex-start; flex-direction: column; }.remix-card .quiet-button { width: 100%; }
}

.remix-mode-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 17px; border-radius: 999px; background: #f4f5fb; }
.remix-mode-tab { flex: 1; border: 0; border-radius: 999px; padding: 9px 12px; background: transparent; color: #8a8da0; font-size: 12px; font-weight: 800; cursor: pointer; transition: .18s ease; }
.remix-mode-tab:hover { color: #5872d0; }.remix-mode-tab.is-active { background: #fff; color: #5872d0; box-shadow: 0 4px 12px rgba(80, 94, 155, .09); }
.remix-mode-panel { display: none; }.remix-mode-panel.is-visible { display: block; }
.remix-link-hint { margin: 8px 0 0; color: #9a9cac; font-size: 10px; }
.remix-search-row .primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.link-analysis-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #dfe7ff; border-radius: 13px; background: #f7f9ff; }.link-analysis-card.is-warning { border-color: #f1e2e5; background: #fff9fa; }.link-analysis-icon { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e7edff; color: #6281e8; font-weight: 800; }.link-analysis-card.is-warning .link-analysis-icon { background: #fff0f3; color: #d47e91; }.link-analysis-card strong { display: block; color: #4f5570; font-size: 12px; }.link-analysis-card p { margin: 5px 0 0; color: #9295a8; font-size: 10px; line-height: 1.5; }