/* Restrained category accents; typography, layout and status semantics stay shared. */
:root {
  --coral: #b85b49;
  --coral-wash: #faeae3;
  --blue: #397b99;
  --blue-wash: #e8f1f7;
  --violet: #7c67a7;
  --violet-wash: #f0ebf8;
  --teal: #397f73;
  --teal-wash: #e6f2ed;
  --gold: #987329;
  --gold-wash: #f8f0dc;
}

/* Color lives behind the welcome area, away from the writing surfaces. */
.main-wrap[data-view="home"] {
  background:
    radial-gradient(ellipse 380px 220px at 67% 170px, #e8f0f67a, transparent),
    radial-gradient(ellipse 340px 190px at 34% 125px, #f7e3d57a, transparent);
}
.composer { border-color: #e6dfd7; box-shadow: 0 8px 28px #85654b08; }
.add-tile { position: relative; isolation: isolate; background: #fffcf8; color: var(--coral); border-color: #dec6b4; }
.add-tile::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: #f8ecdf;
  border: 1px solid #eadac9;
  border-radius: 7px;
  transform: rotate(-7deg);
  pointer-events: none;
}
.add-tile svg, .add-tile span { position: relative; }
.add-tile svg { background: #fffaf4; border-radius: 6px; padding: 3px; width: 28px; height: 28px; }

/* One family of thin icons, with a quiet second tone inside closed shapes. */
.tool-item { --tone: var(--violet); --wash: var(--violet-wash); }
.tool-item[data-name="剪辑台"] { --tone: var(--gold); --wash: var(--gold-wash); }
.tool-item[data-name="画质增强"] { --tone: var(--coral); --wash: var(--coral-wash); }
.tool-item[data-name="水印擦除"] { --tone: var(--teal); --wash: var(--teal-wash); }
.tool-item[data-name="字幕擦除"] { --tone: var(--blue); --wash: var(--blue-wash); }
.tool-item[data-name="图片精修"] { --tone: var(--blue); --wash: var(--blue-wash); }
.tool-item > span { background: var(--wash); color: var(--tone); border: 1px solid #ffffffb3; transition: transform 160ms ease, box-shadow 160ms ease; }
.tool-item svg { stroke-width: 1.65; }
.tool-item:hover > span, .tool-item:focus-visible > span { background: var(--wash); color: var(--tone); transform: translateY(-2px); box-shadow: 0 5px 12px #30333b0a; }

.nav [data-view="agent"] svg { color: var(--violet); }
.nav [data-view="video"] svg { color: var(--coral); }
.nav [data-view="image"] svg { color: var(--blue); }
.nav [data-view="canvas"] svg { color: var(--gold); }
.nav [data-view="assets"] svg { color: var(--teal); }
.nav button svg { stroke-width: 1.7; }
.nav button.active { background: var(--coral-wash); }
.nav button.active svg { color: var(--accent); }

/* Simple framed symbols give non-photo scenes an identity without extra artwork. */
.scene { --tone: var(--violet); --wash: var(--violet-wash); }
.scene[data-scene="detail"] { --tone: var(--blue); --wash: var(--blue-wash); }
.scene[data-scene="commerce"] { --tone: var(--coral); --wash: var(--coral-wash); }
.scene[data-scene="store"] { --tone: var(--teal); --wash: var(--teal-wash); }
.scene[data-scene="brand"] { --tone: var(--gold); --wash: var(--gold-wash); }
.scene[data-scene="story"] { --tone: var(--coral); --wash: var(--coral-wash); }
.scene-media { position: relative; isolation: isolate; background: var(--wash); color: var(--tone); }
.scene-media:has(> svg)::before, .scene-media:has(> svg)::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 72px;
  border-radius: 14px;
  pointer-events: none;
}
.scene-media:has(> svg)::before { border: 1px solid currentColor; opacity: .18; transform: rotate(-10deg) translate(-8px, -2px); }
.scene-media:has(> svg)::after { background: #ffffff91; border: 1px solid #ffffffd9; transform: rotate(5deg) translate(6px, 1px); box-shadow: 0 5px 15px #30333b04; }
.scene-media svg { z-index: 1; color: var(--tone); stroke-width: 1.5; }
.scene-info { background: #fffefa; }
.scene-info strong { display: inline-flex; align-items: center; gap: 7px; }
.scene-info strong::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }
.scene:hover { border-color: color-mix(in srgb, var(--tone) 35%, white); }

/* Workspace accents identify assets and creative tools, never task outcomes. */
.input-panel > .panel-heading > svg { color: var(--violet); }
.upload-area { background: #fbfdfc; border-color: #c5dcd4; }
.upload-area > svg { color: var(--teal); background: var(--teal-wash); width: 36px; height: 36px; padding: 8px; border-radius: 10px; }
.upload-area:hover { border-color: var(--teal); background: #f2f8f5; }
.workspace-empty .empty-icon { color: var(--coral); background: var(--coral-wash); }
.queue-empty > svg { color: var(--blue); }
.draft > svg { color: var(--violet); }
.flow-mode { background: #f7f4fb; border-color: #e6def0; color: #725b92; }
.flow-asset-picture { background: var(--teal-wash); color: #316e64; }
.flow-asset-picture svg { stroke-width: 1.6; }
.flow-shot h3 { display: flex; align-items: center; gap: 8px; }
.flow-shot h3::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: #b9aad1; flex-shrink: 0; }

/* Sculpted color, one soft light source. Labels and editing surfaces remain quiet. */
.material-icon {
  --icon-light: color-mix(in srgb, currentColor 38%, #fff9ed);
  --icon-mid: color-mix(in srgb, currentColor 82%, #ffffff);
  --icon-dark: currentColor;
  overflow: visible;
  fill: none;
  stroke: none;
  filter: drop-shadow(0 2px 1px color-mix(in srgb, currentColor 20%, transparent))
          drop-shadow(0 0 7px color-mix(in srgb, currentColor 29%, transparent));
}
.material-icon .icon-light { stop-color: var(--icon-light); }
.material-icon .icon-mid { stop-color: var(--icon-mid); }
.material-icon .icon-dark { stop-color: var(--icon-dark); }
.material-icon .icon-face { fill: var(--icon-face); }
.material-icon .icon-back { fill: var(--icon-back); }
.material-icon .icon-cut { fill: #fff9f0; fill-opacity: .94; }
.material-icon .icon-shine { fill: none; stroke: #fffdf6; stroke-opacity: .78; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.material-icon .icon-wire { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav button { padding: 5px 2px; gap: 5px; }
.nav button .material-icon { width: 28px; height: 28px; transition: filter 180ms ease, transform 180ms ease; }
.nav button.active { background: #f7eee7; box-shadow: inset 0 0 0 1px #ead8cc80; }
.nav button:hover .material-icon, .nav button:focus-visible .material-icon, .nav button.active .material-icon {
  filter: drop-shadow(0 2px 2px color-mix(in srgb, currentColor 22%, transparent))
          drop-shadow(0 0 9px color-mix(in srgb, currentColor 42%, transparent));
}
.tool-item > span { background: linear-gradient(145deg, #fffefc, var(--wash)); border-color: #ffffff; box-shadow: inset 0 -1px 2px #5f483b08, 0 3px 8px #5f483b06; }
.tool-item .material-icon { width: 29px; height: 29px; }
.tool-item:hover > span, .tool-item:focus-visible > span { background: linear-gradient(145deg, #fffefc, var(--wash)); box-shadow: 0 5px 14px color-mix(in srgb, var(--tone) 15%, transparent); }
.scene-media .material-icon { width: 46px; height: 46px; }
.scene-media:has(> svg)::before { opacity: .12; }
.scene-media:has(> svg)::after { background: #ffffff66; box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 10%, transparent); }
.upload-area > .material-icon { padding: 5px; }
.flow-asset-picture > .material-icon { width: 30px; height: 30px; }
.workspace-empty .empty-icon .material-icon { width: 32px; height: 32px; }

@media (max-width: 760px) {
  .main-wrap[data-view="home"] { background: radial-gradient(ellipse 220px 180px at 90% 120px, #e8f0f66b, transparent); }
  .scene-media:has(> svg)::before, .scene-media:has(> svg)::after { width: 55px; height: 48px; border-radius: 10px; }
  .scene-info strong { gap: 5px; }
  .nav button { padding: 4px 2px; }
  .nav button .material-icon { width: 26px; height: 26px; }
  .tool-item .material-icon { width: 26px; height: 26px; }
  .scene-media .material-icon { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-item > span { transition: none; }
  .nav button .material-icon { transition: none; }
  .tool-item:hover > span, .tool-item:focus-visible > span { transform: none; }
}