/* Ardot-inspired visual refresh: luminous surfaces, precise strokes and restrained motion. */
:root {
  --accent: #6d4aff;
  --accent-dim: #5637df;
  --violet: #7258ff;
  --cyan: #5ddcff;
  --mint: #adff5c;
  --ink: #17151f;
  --muted: #7d7a88;
  --surface: rgba(255, 255, 255, .78);
  --surface-strong: rgba(255, 255, 255, .94);
  --hairline: rgba(27, 23, 39, .1);
}

body { background: #f7f7fb; }
button, .gen-tab, .ratio-chip, .layer-item, .side-tool, .icon-btn { -webkit-tap-highlight-color: transparent; }
/* Use the alpha-cleaned, tightly cropped wordmark so it reads as an interface mark rather than a placed image. */
.kairos-lockup { overflow: hidden; }
.kairos-logo-image {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  transform: none; filter: saturate(.82) contrast(1.06) brightness(.83);
}

/* Landing: a quiet editorial stage behind the AI-made image. */
.intro-screen {
  background: #f5f3ff;
  isolation: isolate;
}
.intro-screen::before, .intro-screen::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);
}
.intro-screen::before {
  width: min(72vw, 1050px); height: min(72vw, 1050px);
  right: -19vw; bottom: -45vw;
  border-radius: 48% 52% 58% 42%;
  background: radial-gradient(circle at 35% 35%, rgba(100, 77, 255, .48), rgba(109, 87, 255, .12) 43%, transparent 70%);
  animation: auraDrift 12s ease-in-out infinite alternate;
}
.intro-screen::after {
  width: 38vw; height: 38vw; left: -14vw; top: 11vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 247, 255, .38), transparent 67%);
  animation: auraDrift 15s ease-in-out -6s infinite alternate-reverse;
}
.intro-art { opacity: .42; mix-blend-mode: multiply; filter: saturate(.84) contrast(.95); }
.intro-grain { opacity: .07; }
.intro-nav { height: 84px; padding: 0 42px; }
.intro-logo { width: 136px; height: 38px; }
.intro-logo .kairos-logo-image { filter: saturate(.86) contrast(1.08) brightness(.76); }
.intro-nav-meta { color: rgba(23,21,31,.58); letter-spacing: .12em; }
.intro-nav-dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(109,74,255,.12); }
.intro-guide {
  min-height: 34px; padding: 0 15px; border: 1px solid rgba(23,21,31,.12); border-radius: 999px;
  background: rgba(255,255,255,.45); color: #25212e; font-size: 11px; transition: .25s ease;
}
.intro-guide:hover { background: #17151f; border-color: #17151f; color: #fff; transform: translateY(-2px); }
.intro-hero { width: min(870px, calc(100% - 48px)); transform: translate(-50%, -50%); }
.intro-kicker { padding: 6px 11px; border: 1px solid rgba(23,21,31,.1); border-radius: 999px; background: rgba(255,255,255,.43); color: rgba(23,21,31,.62); }
.intro-kicker span { width: 16px; background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.intro-hero h1 {
  font-size: clamp(72px, 10.6vw, 148px); font-weight: 750; line-height: .8; letter-spacing: -.085em;
  background: linear-gradient(118deg, #16131d 16%, #5136bc 50%, #a46eff 87%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.intro-hero p { margin: 30px 0; color: #4f4a59; font-size: 16px; letter-spacing: .04em; }
.intro-start {
  min-width: 178px; min-height: 53px; border: 0; border-radius: 999px; overflow: hidden;
  background: #1b1726; box-shadow: 0 14px 32px rgba(83,53,189,.24); color: #fff;
}
.intro-start::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(110deg,#5c3bff,#b46cff 55%,#70e7ff); opacity: 0; transition: opacity .3s ease; }
.intro-start span, .intro-start svg { position: relative; z-index: 1; }
.intro-start:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 40px rgba(83,53,189,.34); }
.intro-start:hover::before { opacity: 1; }
.intro-coordinate { color: rgba(23,21,31,.46); }

/* Workspace: layered translucent chrome without obscuring the creative surface. */
.topbar {
  height: 62px; padding: 0 20px; border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,.74); box-shadow: none; backdrop-filter: blur(22px) saturate(1.2);
}
.main { height: calc(100vh - 62px); grid-template-columns: 270px minmax(360px, 1fr) 292px; }
body.left-collapsed .main { grid-template-columns: 0 minmax(360px,1fr) 292px; }
body.right-collapsed .main { grid-template-columns: 270px minmax(360px,1fr) 0; }
.brand { min-width: 232px; }
.brand-logo { width: 112px; height: 32px; }
.topbar-divider { background: var(--hairline); }
.workspace-dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(173,255,92,.21); }
.topbar-actions > .icon-btn, .panel-toggle, .project-btn {
  border: 1px solid var(--hairline); background: rgba(255,255,255,.57); transition: .2s ease;
}
.topbar-actions > .icon-btn:hover, .panel-toggle:hover, .project-btn:hover { border-color: rgba(109,74,255,.34); background: #fff; color: var(--accent-dim); transform: translateY(-1px); }
#exportBtn { background: linear-gradient(120deg,#6443f5,#915bff 55%,#59d9ff); box-shadow: 0 8px 19px rgba(94,59,235,.25); }

.left-panel, .right-panel { background: rgba(255,255,255,.72); border-color: var(--hairline); backdrop-filter: blur(20px); }
.panel-header { min-height: 60px; }
.panel-title { letter-spacing: -.02em; }
.panel-spark { color: var(--accent); text-shadow: 0 0 14px rgba(109,74,255,.28); }
.gen-tabs { margin-inline: 16px; gap: 18px; border-color: var(--hairline); }
.gen-tab { transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.gen-tab:hover { transform: translateY(-1px); }
.gen-tab.active, .right-tab.active { color: var(--accent-dim); border-bottom-color: var(--accent); }
.field-label { color: #625d6d; }
.input, .select { background: rgba(244,242,250,.82); border: 1px solid transparent; }
.input:focus, .select:focus { border-color: rgba(109,74,255,.36); box-shadow: 0 0 0 4px rgba(109,74,255,.1); }
.ratio-chip { border-color: rgba(27,23,39,.11); background: rgba(255,255,255,.72); }
.ratio-chip.active { background: linear-gradient(120deg, rgba(106,70,255,.14), rgba(92,219,255,.18)); border-color: rgba(109,74,255,.32); }
.primary-btn { position: relative; overflow: hidden; background: linear-gradient(110deg,#6241f4,#8856ff 48%,#54d9ff); box-shadow: 0 10px 25px rgba(94,59,235,.22); }
.primary-btn::after { content: ''; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent,rgba(255,255,255,.32),transparent); transition: transform .5s ease; }
.primary-btn:hover:not(:disabled)::after { transform: translateX(110%); }

.canvas-area {
  background-color: #f1eff7;
  background-image: linear-gradient(rgba(75,63,106,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(75,63,106,.065) 1px,transparent 1px);
}
.canvas-area::before { background: radial-gradient(circle at 52% 41%, rgba(255,255,255,.94),rgba(255,255,255,.2) 42%, transparent 72%); }
.canvas-area::after { content:''; position:absolute; width:52vw; height:52vw; left:50%; top:48%; pointer-events:none; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle,rgba(122,85,255,.1),transparent 63%); filter:blur(20px); }
.canvas-side-tools, .canvas-toolbar, .canvas-status, .canvas-zoom, .element-toolbar {
  border-color: rgba(31,23,54,.11); background: rgba(255,255,255,.76); backdrop-filter: blur(18px) saturate(1.25);
}
.canvas-side-tools { left: 14px; top: 76px; border-radius: 14px; box-shadow: 0 16px 38px rgba(58,45,89,.12); }
.side-tool { border-radius: 9px; }
.side-tool.active { background: linear-gradient(135deg,rgba(101,65,245,.16),rgba(83,218,255,.15)); color: var(--accent-dim); }
.canvas-toolbar { top: 16px; border-radius: 14px; box-shadow: 0 15px 40px rgba(58,45,89,.12); }
.tool-btn.active { background: linear-gradient(135deg,rgba(101,65,245,.16),rgba(83,218,255,.15)); color: var(--accent-dim); }
.canvas-doc { box-shadow: 0 28px 70px rgba(45,34,73,.18), 0 2px 6px rgba(45,34,73,.1); }
.canvas-layer.selected { outline-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,74,255,.12); }
.canvas-status, .canvas-zoom { box-shadow: 0 12px 30px rgba(58,45,89,.1); }

.right-tabs { border-color: var(--hairline); }
.right-tab { transition: .2s ease; }
.layer-item { border: 1px solid transparent; }
.layer-item:hover { background: rgba(106,70,255,.055); }
.layer-item.selected { background: linear-gradient(120deg,rgba(105,71,249,.13),rgba(86,216,255,.12)); }
.properties-panel { background: linear-gradient(180deg,rgba(250,249,253,.45),rgba(244,242,250,.78)); }

.modal-backdrop { background: rgba(30,22,49,.22); }
.modal { border-color: rgba(31,23,54,.12); background: rgba(255,255,255,.91); backdrop-filter: blur(24px); }
.toast { background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }

/* Put layer management on the left and creation controls on the right. */
.main { grid-template-columns: 292px minmax(360px, 1fr) 270px; }
.right-panel { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid var(--hairline); }
.canvas-area { grid-column: 2; grid-row: 1; }
.left-panel { grid-column: 3; grid-row: 1; border-right: 0; border-left: 1px solid var(--hairline); }
body.left-collapsed .main { grid-template-columns: 292px minmax(360px, 1fr) 0; }
body.right-collapsed .main { grid-template-columns: 0 minmax(360px, 1fr) 270px; }
body.left-collapsed .left-panel { transform: translateX(16px); }
body.right-collapsed .right-panel { transform: translateX(-16px); }

/* The AI rail is on the right and can be resized from its canvas-facing edge. */
:root { --ai-panel-width: 340px; --layers-panel-width: 292px; }
.main { grid-template-columns: var(--layers-panel-width) minmax(360px, 1fr) var(--ai-panel-width) !important; }
body.left-collapsed .main { grid-template-columns: var(--layers-panel-width) minmax(360px, 1fr) 0 !important; }
body.right-collapsed .main { grid-template-columns: 0 minmax(360px, 1fr) var(--ai-panel-width) !important; }
body.left-collapsed.right-collapsed .main { grid-template-columns: 0 minmax(360px, 1fr) 0 !important; }
.left-panel-resizer { right: auto; left: -5px; }

.platform-panel-head { gap: 10px; }
.platform-panel-head a { margin-left: 0; }
.platform-fullscreen-btn {
  margin-left: auto; padding: 4px 8px; border: 1px solid rgba(109,74,255,.24); border-radius: 5px;
  background: rgba(109,74,255,.08); color: var(--accent-dim); font-size: 10px;
}
.platform-fullscreen-btn:hover { background: var(--accent); color: #fff; }
.platform-panel { position: relative; }
.platform-panel .platform-frame[aria-hidden="true"] { visibility: hidden; }
.platform-login-notice {
  position: absolute; inset: 38px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; padding: 28px; background: linear-gradient(145deg, rgba(249,247,255,.95), rgba(238,247,255,.97)); text-align: center;
}
.platform-login-notice strong { color: var(--ink); font-size: 14px; }
.platform-login-notice span { max-width: 230px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.platform-login-notice button { min-height: 34px; padding: 0 14px; border-radius: 7px; background: linear-gradient(115deg, #6241f4, #9059ff); color: #fff; box-shadow: 0 8px 18px rgba(94,59,235,.2); }
body.xiaohongshu-fullscreen .platform-login-notice { inset: 48px 0 0; }

.topbar-generation-status { display: flex; gap: 6px; margin-left: 10px; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.generation-job { display: inline-flex; align-items: center; gap: 5px; max-width: 170px; min-height: 28px; padding: 4px 5px 4px 9px; border: 1px solid rgba(109,74,255,.26); border-radius: 999px; color: var(--accent-dim); background: rgba(109,74,255,.08); animation: generationStatusPulse 1.4s ease-in-out infinite; }
.generation-job-label { overflow: hidden; text-overflow: ellipsis; }
.generation-job-cancel { width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: transparent; font: 18px/17px sans-serif; cursor: pointer; }
.generation-job-cancel:hover { color: #fff; background: rgba(109,74,255,.72); }
.generation-job-succeeded { color: #208257; border-color: rgba(32,130,87,.28); background: rgba(32,130,87,.08); animation: none; }
.generation-job-failed, .generation-job-cancelled { color: #b14a54; border-color: rgba(177,74,84,.25); background: rgba(177,74,84,.08); animation: none; }
@keyframes generationStatusPulse { 50% { opacity: .62; } }
@keyframes generationSpin { to { transform: rotate(360deg); } }

.photopea-modal.minimized { align-items: end; justify-items: end; padding: 18px; background: transparent; backdrop-filter: none; pointer-events: none; }
.photopea-modal.minimized .photopea-shell { width: 286px; height: 42px; min-height: 42px; border-radius: 8px; pointer-events: auto; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.photopea-modal.minimized .photopea-head { height: 42px; }
.photopea-modal.minimized #photopeaFrame { display: none; }
body.xiaohongshu-fullscreen .main { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
body.xiaohongshu-fullscreen .left-panel {
  position: fixed; inset: 62px 0 0; z-index: 100; display: flex; opacity: 1; pointer-events: auto;
  transform: none !important; border: 0; background: #fff;
}
body.xiaohongshu-fullscreen .left-panel > .panel-header,
body.xiaohongshu-fullscreen .left-panel > .gen-tabs,
body.xiaohongshu-fullscreen .left-panel-resizer { display: none; }
body.xiaohongshu-fullscreen .left-panel > .scroll-area { padding: 0; overflow: hidden; }
body.xiaohongshu-fullscreen .platform-panel { display: flex; height: 100%; min-height: 0; }
body.xiaohongshu-fullscreen .platform-frame { flex: 1; height: auto; }
body.xiaohongshu-fullscreen .platform-panel-head { height: 48px; padding: 0 22px; }
body.xiaohongshu-fullscreen .platform-panel-head span { font-weight: 600; }

@keyframes auraDrift { from { transform: translate3d(-2%, -2%,0) rotate(-8deg) scale(.96); } to { transform: translate3d(4%, 4%,0) rotate(10deg) scale(1.06); } }
@media (max-width: 1180px) {
  .main { grid-template-columns:262px minmax(340px,1fr) 244px; }
  body.left-collapsed .main { grid-template-columns:262px minmax(340px,1fr) 0; }
  body.right-collapsed .main { grid-template-columns:0 minmax(340px,1fr) 244px; }
}
@media (max-width: 860px) {
  .topbar { height:56px; padding-inline:10px; } .main { height:calc(100vh - 56px); }
  .intro-nav { height:70px; padding-inline:18px; } .intro-hero h1 { letter-spacing:-.06em; }
}
@media (prefers-reduced-motion: no-preference) {
  .left-panel, .right-panel { animation: panelReveal .5s cubic-bezier(.2,.8,.2,1) both; }
  .right-panel { animation-delay:.08s; }
}
@keyframes panelReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }