:root {
  --ink: #1f261e;
  --ink-soft: #4c5549;
  --muted: #8d978a;
  --line: #e9e8e1;
  --paper: #fbfaf7;
  --paper-deep: #f3f0e8;
  --cream: #f5ead7;
  --orange: #ea764b;
  --orange-deep: #d95c38;
  --yellow: #f5c85c;
  --green: #315647;
  --sage: #dce7d9;
  --shadow: 0 24px 70px rgba(31, 38, 30, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Noto Sans SC', 'Manrope', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(234, 118, 75, .28); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 252px; flex: 0 0 252px; min-height: 100vh; padding: 30px 20px 22px; background: #f5f4ee; border-right: 1px solid #e9e8e1; display: flex; flex-direction: column; }
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 8px 28px; }
.brand-mark { width: 30px; height: 30px; display: inline-flex; align-items: flex-end; gap: 3px; padding: 4px; border-radius: 10px; background: var(--ink); transform: rotate(-7deg); }
.brand-mark span, .brand-mark i { width: 5px; border-radius: 4px; background: #f7d36c; display: block; }
.brand-mark span:nth-child(1), .brand-mark i:nth-child(1) { height: 9px; }
.brand-mark span:nth-child(2), .brand-mark i:nth-child(2) { height: 15px; background: #ea794d; }
.brand-mark span:nth-child(3), .brand-mark i:nth-child(3) { height: 20px; background: #dbe6d6; }
.brand-mark.large { width: 38px; height: 38px; margin-bottom: 12px; }
.brand-name { font-weight: 800; font-size: 16px; line-height: 1.1; letter-spacing: -.04em; }
.brand-sub, .section-kicker, .modal-kicker { font-family: 'DM Mono', monospace; letter-spacing: .13em; font-size: 9px; color: var(--muted); text-transform: uppercase; }
.brand-sub { margin-top: 4px; font-size: 8px; letter-spacing: .16em; }
.new-project-btn { height: 46px; border-radius: 14px; background: var(--ink); color: white; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px rgba(31, 38, 30, .14); transition: transform .2s, box-shadow .2s; }
.new-project-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(31, 38, 30, .18); }
.plus { font-size: 22px; font-weight: 400; line-height: 1; margin-top: -2px; }
.primary-nav { margin-top: 24px; display: grid; gap: 5px; }
.nav-item { width: 100%; height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 12px; color: #747d71; background: transparent; text-align: left; border-radius: 11px; transition: .2s; }
.nav-item:hover { background: rgba(255,255,255,.65); color: var(--ink); }
.nav-item.active { background: white; color: var(--ink); box-shadow: 0 4px 14px rgba(31, 38, 30, .05); font-weight: 700; }
.nav-icon { width: 18px; text-align: center; font-size: 17px; font-weight: 600; }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 20px; color: white; background: var(--orange); font: 10px 'DM Mono', monospace; }
.nav-count.muted { color: var(--ink-soft); background: #e2e9df; }
.sidebar-divider { height: 1px; background: #e5e4dc; margin: 27px 8px 19px; }
.sidebar-label { padding: 0 9px; font: 10px 'DM Mono', monospace; color: #9ca39a; text-transform: uppercase; letter-spacing: .13em; }
.mini-projects { display: grid; gap: 5px; margin-top: 12px; }
.mini-project { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; color: #687167; background: transparent; border-radius: 9px; text-align: left; font-size: 11px; }
.mini-project:hover { background: rgba(255,255,255,.75); color: var(--ink); }
.mini-dot { width: 6px; height: 6px; border-radius: 50%; }
.mini-dot.coral { background: #e97b58; }.mini-dot.yellow { background: #e8b745; }.mini-dot.green { background: #6f9278; }
.mini-time { color: #b1b6ae; font: 9px 'DM Mono', monospace; }
.sidebar-bottom { margin-top: auto; }
.usage-card { border: 1px solid #e7e5da; border-radius: 14px; background: rgba(255,255,255,.55); padding: 13px 12px 11px; }
.usage-head, .usage-foot { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #7e877c; }.usage-pct { font: 10px 'DM Mono', monospace; color: var(--orange); }
.usage-bar { height: 5px; background: #e3e7df; border-radius: 10px; overflow: hidden; margin: 10px 0 8px; }.usage-bar span { height: 100%; display: block; border-radius: 10px; background: var(--orange); }
.usage-foot { font-size: 9px; color: #a6aba2; }
.profile-row { width: 100%; display: flex; gap: 9px; align-items: center; background: transparent; margin-top: 16px; padding: 5px 7px; text-align: left; border-radius: 12px; }.profile-row:hover { background: rgba(255,255,255,.75); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: white; background: #5f7c65; font-weight: 700; }.profile-copy { display: grid; gap: 2px; flex: 1; }.profile-copy strong { font-size: 11px; }.profile-copy small { font-size: 9px; color: var(--muted); }.profile-more { color: #9ba39b; letter-spacing: 1px; }
.main-content { min-width: 0; flex: 1; padding: 0 48px 64px; max-width: 1600px; margin: 0 auto; width: 100%; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.breadcrumb { color: #9da49a; font-size: 11px; }.crumb-current { color: var(--ink); font-weight: 700; }.crumb-sep { margin: 0 8px; color: #c2c7c0; }.topbar-actions { display: flex; align-items: center; gap: 14px; }.icon-btn { width: 29px; height: 29px; display: grid; place-items: center; background: white; color: #7c867a; border: 1px solid #ecebe5; border-radius: 50%; font-weight: 700; position: relative; }.icon-btn:hover { color: var(--ink); border-color: #d6d7cf; }.icon-btn.has-dot::after { content: ''; position: absolute; width: 5px; height: 5px; top: 2px; right: 1px; border-radius: 50%; background: var(--orange); border: 2px solid var(--paper); }.top-divider { height: 24px; width: 1px; background: var(--line); }.top-date { color: #a3aaa1; font: 10px 'DM Mono', monospace; }
.view-panel { display: none; animation: fadeUp .35s ease both; }.view-panel.active { display: block; }
.hero-block { min-height: 332px; padding: 52px 48px 42px; margin-top: 34px; border-radius: 25px; position: relative; overflow: hidden; display: flex; align-items: center; background: #dce7d9; }.hero-copy { position: relative; z-index: 2; max-width: 520px; }.eyebrow { display: flex; align-items: center; gap: 8px; color: #68816f; font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(234,118,75,.13); }.eyebrow-code { margin-left: auto; color: #8aa08b; }.hero-copy h1 { margin: 18px 0 13px; color: #2b4736; font-size: clamp(34px, 4vw, 56px); line-height: 1.12; letter-spacing: -.065em; font-weight: 800; }.hero-copy h1 em { color: #e26942; font-style: normal; }.hero-copy p { max-width: 360px; margin: 0; color: #6d8371; line-height: 1.75; font-size: 13px; }.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 26px; }.primary-btn { height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 0 18px; color: white; border-radius: 11px; background: var(--ink); font-weight: 700; transition: .2s; box-shadow: 0 8px 18px rgba(31,38,30,.12); }.primary-btn:hover { background: #344334; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(31,38,30,.17); }.primary-btn span { font-size: 16px; font-weight: 400; }.text-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #59705e; font-weight: 700; padding: 8px 0; }.text-btn:hover { color: var(--orange-deep); }.play-icon { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; color: #6c8b70; background: rgba(255,255,255,.6); font-size: 9px; padding-left: 1px; }
.hero-art { position: absolute; right: 4%; top: 0; width: 43%; height: 100%; min-width: 410px; }.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one { width: 340px; height: 340px; right: 30px; top: -90px; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(174,201,171,.3) 46%, rgba(145,175,145,.13) 70%, transparent 71%); }.orb-two { width: 180px; height: 180px; right: -18px; bottom: -66px; background: rgba(247,214,158,.45); }.hero-card { position: absolute; border-radius: 14px; width: 207px; height: 278px; overflow: hidden; box-shadow: 0 25px 50px rgba(43,71,54,.22); }.card-back { right: 84px; top: 53px; transform: rotate(9deg); background: #9bb29d; opacity: .58; }.card-front { right: 122px; top: 28px; transform: rotate(-6deg); background: #2e4134; padding: 11px; }.hero-card-top { display:flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.82); font: 8px 'DM Mono', monospace; }.live-pill { color: #fff5e3; }.live-pill i { width: 5px; height: 5px; display:inline-block; margin-right: 3px; border-radius:50%; background: #f1a05e; }.hero-food-image { height: 138px; margin-top: 9px; border-radius: 9px; background: linear-gradient(160deg, rgba(47,26,19,.18), transparent), none center/cover; }.hero-card-caption { color: white; display: grid; gap: 4px; padding: 11px 3px 8px; }.hero-card-caption span { font: 8px 'DM Mono', monospace; color: #f0b465; letter-spacing: .08em; }.hero-card-caption strong { font-size: 16px; line-height: 1.15; letter-spacing: -.05em; }.hero-card-footer { display: flex; justify-content: space-between; color: #9db8a0; font: 7px 'DM Mono', monospace; letter-spacing: .1em; }.float-note { position:absolute; z-index: 4; display: flex; align-items: center; gap: 9px; min-width: 160px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.86); box-shadow: 0 12px 25px rgba(43,71,54,.12); backdrop-filter: blur(10px); }.float-note strong { display:block; font-size: 10px; }.float-note small { display:block; color: #93a096; font: 8px 'DM Mono', monospace; margin-top: 3px; }.note-top { right: 4px; top: 51px; }.note-bottom { right: 15px; bottom: 23px; }.spark { color: var(--orange); font-size: 18px; }.waveform { color: #6d946e; font-size: 9px; letter-spacing: -2px; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 24px 0 49px; padding: 0 5px; }.stat-item { min-height: 80px; padding: 0 25px; display: grid; align-content: center; gap: 4px; border-right: 1px solid var(--line); position: relative; }.stat-item:first-child { padding-left: 0; }.stat-item:last-child { border-right: 0; }.stat-label { color: #a2aaa0; font: 9px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.stat-item strong { font-size: 26px; letter-spacing: -.05em; }.stat-item strong small { font-size: 12px; font-weight: 500; color: #8e988b; margin-left: 2px; letter-spacing: 0; }.stat-trend { position: absolute; right: 25px; bottom: 4px; font: 9px 'DM Mono', monospace; }.stat-trend.up { color: #6b9a72; }.stat-trend.down { color: #d78366; }.stat-trend.neutral { color: #a7aea4; }.stat-cta { padding-left: 25px; }.stat-cta button { justify-self: start; background: transparent; color: var(--orange-deep); font-weight: 700; padding: 3px 0; }.stat-cta button span { margin-left: 7px; font-size: 16px; }
.content-section { margin-top: 42px; }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 18px; }.section-kicker { color: #a7afa3; }.section-heading h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.05em; }.view-all-btn { color: var(--orange-deep); background: transparent; font-weight: 700; font-size: 11px; padding-bottom: 2px; }.view-all-btn span { margin-left: 7px; font-size: 16px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.project-card { border-radius: 16px; background: white; border: 1px solid #ecebe5; overflow: hidden; transition: transform .2s, box-shadow .2s; }.project-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(31,38,30,.08); }.project-thumb { height: 202px; position: relative; overflow: hidden; }.project-thumb::before, .review-thumb::before, .shot-image::before, .delivery-preview::before { content: ''; position:absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s; }.project-card:hover .project-thumb::before { transform: scale(1.04); }.thumb-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17,21,17,.34), transparent 45%, rgba(17,21,17,.7)); }
.status-pill { position:absolute; z-index:2; left: 13px; top: 13px; height: 22px; display:flex; align-items:center; gap:5px; padding:0 8px; border-radius:20px; color: white; font: 8px 'DM Mono', monospace; letter-spacing: .05em; background: rgba(23,28,23,.42); backdrop-filter: blur(5px); }.status-pill i { width: 5px; height: 5px; display:inline-block; border-radius:50%; background: #f4b84e; }.status-pill.done i { background: #8bc28d; }.status-pill.preview { background: rgba(255,255,255,.18); }.thumb-duration { position:absolute; z-index:2; right: 36px; top: 16px; color: rgba(255,255,255,.88); font: 9px 'DM Mono', monospace; }.card-more { position:absolute; z-index:2; right: 13px; top: 10px; color: white; background: transparent; font-size: 12px; letter-spacing: 1px; }.project-thumb-copy { position:absolute; z-index:2; bottom: 15px; left: 15px; right: 15px; display:grid; gap:5px; color: white; }.project-thumb-copy span { color: rgba(255,255,255,.72); font: 8px 'DM Mono', monospace; letter-spacing: .09em; text-transform: uppercase; }.project-thumb-copy strong { font-size: 17px; letter-spacing: -.05em; }.project-meta { display:flex; justify-content:space-between; align-items:center; min-height: 63px; padding: 11px 14px; }.project-meta > div { display:grid; gap: 4px; color: #737d71; font-size: 10px; }.meta-label { color: #abb1a9; font: 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.outline-small { height: 28px; padding: 0 9px; color: #6c776c; background: white; border: 1px solid #e5e7e0; border-radius: 8px; font-size: 9px; font-weight: 700; }.outline-small:hover { color: var(--orange-deep); border-color: #e9b4a0; }.outline-small span { font-size: 12px; margin-left: 3px; }
.template-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.template-card { min-height: 142px; position: relative; padding: 20px 20px 18px; border-radius: 16px; text-align: left; overflow: hidden; transition: .2s; }.template-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31,38,30,.1); }.template-card > div { position: absolute; left: 20px; bottom: 20px; display:grid; gap: 6px; }.template-card strong { font-size: 16px; letter-spacing: -.04em; }.template-card small { font-size: 10px; color: rgba(31,38,30,.58); }.template-card-orange { background: #f2a26e; color: #583321; }.template-card-cream { background: #f4e4c9; color: #6d5540; }.template-card-dark { background: #344e3f; color: #eef1dd; }.template-card-dark small { color: rgba(238,241,221,.62); }.template-card-orbit { background: linear-gradient(135deg, #c7d9ca, #e9edda); color: #284c3d; }.template-card-orbit small { color: rgba(40,76,61,.65); }.template-number { position: absolute; top: 18px; left: 20px; font: 9px 'DM Mono', monospace; opacity: .55; }.template-icon { position: absolute; top: 13px; right: 20px; font-size: 29px; opacity: .6; }.template-arrow { position: absolute; bottom: 21px; right: 20px; font-size: 19px; opacity: .6; }
.empty-view { padding: 86px 10px 30px; max-width: 1020px; }.empty-symbol { width: 58px; height:58px; display:grid; place-items:center; border-radius:18px; color: #f3a465; background: #f9e6d3; font-size: 24px; margin-bottom: 23px; }.empty-view h2 { margin: 7px 0 10px; font-size: 36px; letter-spacing: -.07em; }.empty-view > p { color: #8b9588; line-height: 1.7; margin: 0; }.library-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }.library-card { min-height: 190px; border-radius: 16px; padding: 18px; text-align:left; display:flex; flex-direction:column; color: var(--ink); transition:.2s; }.library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.library-card > span { font: 10px 'DM Mono', monospace; opacity:.55; }.library-card strong { margin-top:auto; font-size:18px; letter-spacing:-.05em; }.library-card small { margin-top:6px; font-size:10px; opacity:.65; }.library-card b { margin-top:17px; font-size:10px; }.library-card.orange { background:#efaa7a; }.library-card.cream { background:#f4e2bd; }.library-card.dark { background:#354d3f; color:#fff7e9; }.library-card.green { background:#d8e7d6; }.library-card.orbit { background:linear-gradient(135deg,#c7d9ca,#e9edda); color:#284c3d; }.asset-showcase { margin-top:39px; display:grid; grid-template-columns: 1fr 1fr auto; gap:14px; }.asset-logo-box, .asset-palette { min-height: 150px; padding:20px; border-radius:17px; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; }.asset-logo-box strong { font-size:18px; }.asset-logo-box small, .asset-palette small { margin-top:auto; color:#9da69b; font-size:10px; }.asset-palette { flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:7px; }.asset-palette span { width:32px; height:32px; border-radius:8px; }.asset-palette small { flex-basis:100%; }.asset-showcase .primary-btn { align-self:end; }.delivery-list { display:grid; gap:10px; margin-top:38px; }.delivery-row { display:flex; align-items:center; gap:13px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:15px; }.delivery-preview { width:55px; height:55px; flex:0 0 55px; position:relative; border-radius:9px; overflow:hidden; }.delivery-row > div:nth-child(2) { display:grid; gap:4px; flex:1; }.delivery-row strong { font-size:13px; }.delivery-row small { color:#929b91; font-size:10px; }.delivery-state { color:#60966c; background:#ecf5ea; padding:5px 8px; border-radius:8px; font:9px 'DM Mono', monospace; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(24,31,25,.34); backdrop-filter:blur(7px); }.modal-backdrop.open { display:flex; animation: fadeIn .2s ease both; }.modal { width:min(650px, 100%); position:relative; background:var(--paper); border-radius:22px; box-shadow:0 28px 90px rgba(22,31,23,.25); }.wizard-modal { padding: 30px 34px 24px; }.modal-close { position:absolute; top:17px; right:18px; width:29px; height:29px; border-radius:50%; color:#899287; background:#f0f1eb; font-size:20px; line-height:1; }.modal-close:hover { color:var(--ink); background:#e5e8df; }.modal-kicker { color:#acb3aa; }.modal-kicker span { color:var(--orange); }.modal h2 { margin:10px 0 7px; font-size:27px; letter-spacing:-.065em; }.modal-intro { margin:0; color:#8d968b; font-size:12px; line-height:1.7; }.wizard-steps { display:flex; align-items:center; gap:10px; margin:27px 0 26px; }.wizard-step { display:flex; align-items:center; gap:7px; color:#aab0a8; font-size:10px; }.wizard-step i { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#a4aca2; border:1px solid #dfe3da; font:10px 'DM Mono', monospace; font-style:normal; }.wizard-step.active { color:var(--ink); font-weight:700; }.wizard-step.active i { color:white; border-color:var(--ink); background:var(--ink); }.wizard-line { flex:1; height:1px; background:#e8e9e3; }.wizard-pane { display:none; min-height: 300px; }.wizard-pane.active { display:block; animation: fadeUp .3s ease both; }.field-grid { display:grid; gap:14px; }.field-grid.two { grid-template-columns:1fr 1fr; }.field { display:grid; gap:7px; margin-bottom:14px; }.field > span, .field-label { color:#667266; font-size:10px; font-weight:700; }.field em { color:#b5bdb3; font-size:9px; font-style:normal; font-weight:400; }.field input, .field select, .field textarea { width:100%; border:1px solid #e2e5dd; border-radius:10px; background:#fff; color:var(--ink); padding:0 12px; height:40px; outline:0; font-size:12px; }.field textarea { height:auto; resize:vertical; padding:10px 12px; }.field input:focus, .field select:focus, .field textarea:focus { border-color:#a7c1a9; box-shadow:0 0 0 3px rgba(122,164,126,.12); }.field-label { margin:22px 0 10px; }.choice-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; }.choice-card { position:relative; min-height:76px; display:grid; justify-items:start; align-content:center; gap:3px; padding:10px 12px 10px 41px; text-align:left; color:#707b6e; background:#fff; border:1px solid #e4e7df; border-radius:11px; }.choice-card:hover { border-color:#b6cdb9; }.choice-card.selected { border-color:#4b7455; background:#eff6ee; color:var(--ink); box-shadow:0 0 0 2px rgba(75,116,85,.12); }.choice-logo { position:absolute; left:13px; top:17px; font-size:17px; color:#6a906f; }.choice-card strong { font-size:11px; }.choice-card small { font-size:9px; color:#a6ada5; }.duration-row { display:flex; gap:9px; }.duration-btn { height:36px; padding:0 15px; border:1px solid #e5e6df; border-radius:9px; background:#fff; color:#758074; font-size:11px; }.duration-btn.selected { color:var(--ink); border-color:#4b7455; background:#eff6ee; font-weight:700; }.duration-btn small { color:var(--orange); font-size:8px; margin-left:4px; }.upload-zone { min-height:150px; display:grid; justify-items:center; align-content:center; gap:6px; border:1.5px dashed #cfd8cb; border-radius:14px; background:#f7faf5; color:#788579; transition:.2s; }.upload-zone.dragover { border-color:var(--orange); background:#fff7f0; }.upload-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--orange); background:#fff0e6; font-size:18px; }.upload-zone strong { color:var(--ink); font-size:12px; }.upload-zone span { font-size:9px; color:#a2ada0; }.upload-link { background:transparent; color:var(--orange-deep); font-size:10px; font-weight:700; margin-top:2px; }.upload-previews { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 13px; }.upload-preview { width:56px; height:56px; position:relative; border-radius:8px; overflow:hidden; border:1px solid #e5e6df; background:#eee; }.upload-preview img { width:100%; height:100%; object-fit:cover; }.upload-preview b { position:absolute; right:3px; top:3px; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(31,38,30,.7); font-size:9px; }.compact { margin-top:7px; }.review-card { min-height:145px; display:flex; gap:17px; padding:13px; border-radius:14px; background:#edf3ea; }.review-thumb { width:112px; flex:0 0 112px; position:relative; overflow:hidden; border-radius:10px; }.review-thumb .status-pill { top:8px; left:8px; }.review-copy { display:grid; align-content:center; gap:6px; }.review-template { display:flex; align-items:center; gap:6px; color:#719070; font:9px 'DM Mono', monospace; }.template-dot { width:5px; height:5px; border-radius:50%; background:var(--orange); }.review-copy h3 { margin:0; font-size:21px; letter-spacing:-.06em; }.review-copy p { margin:0; color:#839080; font-size:10px; }.review-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }.review-tags span { padding:4px 6px; border-radius:5px; background:rgba(255,255,255,.66); color:#728171; font-size:8px; }.storyboard-mini { margin-top:17px; padding:14px; border:1px solid #e9e9e3; border-radius:13px; background:#fff; }.mini-timeline-head { display:flex; justify-content:space-between; color:#8e988d; font:9px 'DM Mono', monospace; }.mini-shots { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }.mini-shots > div { display:grid; gap:5px; padding:9px 8px; border-radius:9px; background:#f6f7f2; }.mini-shots b { color:#bb8670; font:9px 'DM Mono', monospace; }.mini-shots span { font-size:10px; font-weight:700; }.mini-shots small { color:#9ba69a; font:8px 'DM Mono', monospace; }.consent-check { display:flex; align-items:flex-start; gap:8px; margin-top:17px; color:#8a9488; font-size:9px; line-height:1.6; }.consent-check input { accent-color:var(--orange); margin-top:1px; }.modal-footer { min-height:52px; display:flex; align-items:end; gap:10px; margin-top:20px; }.footer-spacer { flex:1; }.secondary-btn { height:43px; padding:0 16px; border-radius:11px; color:#7f897d; background:transparent; font-weight:700; }.secondary-btn:hover { background:#eff1eb; color:var(--ink); }
.storyboard-modal { width:min(780px, 100%); padding:30px 34px 24px; }.storyboard-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.storyboard-title-row h2 { margin-top:8px; }.storyboard-title-row p { color:#8c968b; font-size:10px; margin:0; }.version-badge { padding:6px 8px; border-radius:7px; color:#789177; background:#eef5eb; font:9px 'DM Mono', monospace; white-space:nowrap; }.storyboard-track { position:relative; display:grid; gap:9px; margin-top:23px; }.track-line { position:absolute; left:20px; top:29px; bottom:29px; width:1px; background:#e1e7dc; }.shot-card { position:relative; z-index:1; display:grid; grid-template-columns:93px 1fr; gap:13px; padding:9px; border:1px solid #ecede7; border-radius:12px; background:#fff; }.shot-card.active-shot { border-color:#b8cdb6; background:#f5faf2; }.shot-image { position:relative; height:72px; overflow:hidden; border-radius:8px; }.shot-image span { position:absolute; z-index:2; left:7px; top:6px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:white; background:rgba(31,38,30,.45); font:9px 'DM Mono', monospace; }.shot-copy { display:grid; grid-template-columns:auto auto 1fr; align-content:center; align-items:center; column-gap:9px; }.shot-copy b { font-size:12px; }.shot-copy > span { color:#9ba59a; font:8px 'DM Mono', monospace; }.shot-copy p { grid-column:1 / -1; margin:6px 0 5px; color:#8a9589; font-size:10px; line-height:1.5; }.shot-action { justify-self:start; grid-column:1 / -1; background:transparent; padding:0; color:var(--orange-deep); font-size:9px; font-weight:700; }.storyboard-footer { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }.storyboard-footer > span { color:#819280; font-size:10px; }.tiny-dot { width:5px; height:5px; display:inline-block; margin-right:5px; border-radius:50%; background:#6ca276; }
.toast { position:fixed; z-index:40; right:24px; bottom:24px; display:flex; align-items:center; gap:9px; padding:12px 15px; border-radius:11px; color:#fff; background:#28352a; box-shadow:0 12px 30px rgba(31,38,30,.2); transform:translateY(18px); opacity:0; pointer-events:none; transition:.25s; font-size:11px; }.toast.show { opacity:1; transform:translateY(0); }.toast-icon { color:#f2b66a; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@media (max-width: 1150px) { .main-content { padding:0 28px 52px; }.hero-block { padding-left:36px; }.hero-art { right:-8%; transform:scale(.88); transform-origin:right center; }.stat-item { padding-left:15px; padding-right:15px; }.stat-item:first-child { padding-left:0; }.stat-trend { right:15px; }.project-thumb { height:180px; } }
@media (max-width: 900px) { .sidebar { width:74px; flex-basis:74px; padding-left:12px; padding-right:12px; }.brand-lockup { padding-left:8px; }.brand-name, .brand-sub, .new-project-btn:not(.plus), .nav-item span:not(.nav-icon), .sidebar-label, .mini-project span:not(.mini-dot), .usage-card, .profile-copy, .profile-more { display:none; }.brand-lockup { justify-content:center; }.new-project-btn { width:46px; padding:0; margin:0 auto; font-size:0; }.new-project-btn .plus { display:block; }.nav-item { justify-content:center; padding:0; }.nav-count { position:absolute; margin:0 0 26px 22px; transform:scale(.75); }.mini-project { grid-template-columns:1fr; justify-items:center; padding:0; }.mini-time { display:none; }.profile-row { justify-content:center; padding:0; }.hero-art { opacity:.72; right:-15%; }.hero-copy { max-width:56%; }.template-row, .project-grid { grid-template-columns:repeat(2,1fr); }.project-card:last-child { display:none; }.library-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 650px) { .main-content { padding:0 16px 42px; }.topbar { height:70px; }.top-date, .top-divider { display:none; }.hero-block { margin-top:18px; padding:28px 24px 190px; min-height:525px; align-items:flex-start; }.hero-copy { max-width:100%; }.hero-copy h1 { font-size:36px; }.hero-art { width:100%; min-width:0; height:220px; top:auto; bottom:0; right:0; transform:scale(.72); transform-origin:bottom right; opacity:1; }.stat-strip { grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 39px; }.stat-item { min-height:68px; border-right:0; padding:0 !important; }.stat-trend { right:auto; left:0; bottom:0; }.stat-cta { display:none; }.content-section { margin-top:32px; }.project-grid, .template-row { grid-template-columns:1fr; }.project-card:last-child { display:block; }.project-thumb { height:210px; }.template-card { min-height:132px; }.choice-grid { grid-template-columns:1fr; }.choice-card { min-height:58px; }.wizard-modal, .storyboard-modal { padding:25px 20px 18px; }.field-grid.two, .asset-showcase { grid-template-columns:1fr; }.wizard-steps { gap:6px; }.wizard-step b { display:none; }.mini-shots { grid-template-columns:repeat(2,1fr); }.shot-card { grid-template-columns:80px 1fr; }.shot-image { height:75px; }.storyboard-footer { align-items:flex-start; gap:15px; flex-direction:column; }.storyboard-footer .primary-btn { width:100%; }.empty-view { padding-top:55px; }.library-grid { grid-template-columns:1fr; } }

/* Live data surfaces: media is inserted only when returned by the API. */
.hero-live-surface { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; color:rgba(255,255,255,.72); background:linear-gradient(135deg,#4d6653,#a8bda2); font-size:11px; }
.hero-live-surface video, .real-task-preview video { width:100%; height:100%; object-fit:cover; }
.real-thumb { background:linear-gradient(135deg,#e7eee4,#cbd8c8); }
.real-thumb::before { display:none !important; }
.live-empty, .live-empty-card { color:#98a198; font-size:11px; line-height:1.6; }
.live-empty-card { min-height:120px; display:grid; place-items:center; padding:25px; border:1px dashed #d9ded5; border-radius:14px; background:#fafcf8; }
.real-task-detail { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; margin-top:23px; }
.real-task-preview { min-height:220px; display:grid; place-items:center; overflow:hidden; border-radius:12px; color:#9aa69a; background:#eef3eb; font-size:11px; }
.real-task-copy { display:grid; align-content:center; gap:12px; }
.real-task-copy p { margin:0; color:#7f8a7f; font-size:11px; line-height:1.7; white-space:pre-wrap; max-height:180px; overflow:auto; }
.real-task-copy .primary-btn { width:max-content; }
.asset-showcase { grid-template-columns:repeat(4,1fr); }
.asset-item { display:grid; gap:7px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.asset-media { height:130px; overflow:hidden; border-radius:9px; background:#eef2eb; }
.asset-media img, .asset-media video { width:100%; height:100%; object-fit:cover; }
.asset-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.asset-item small { color:#9aa399; font-size:9px; }
.delivery-row { cursor:pointer; text-align:left; width:100%; }
.delivery-preview { display:grid; place-items:center; color:#738675; font:9px 'DM Mono',monospace; }
.template-card.dessert { background:linear-gradient(135deg,#f1d2c1,#f7eadc); color:#6b4031; }
.library-card.dessert { background:linear-gradient(135deg,#e9b99e,#f7e8d8); color:#613d30; }
.template-card.recipe { background:linear-gradient(135deg,#f5c66f,#fff0c8); color:#70451d; }
.library-card.recipe { background:linear-gradient(135deg,#efbd58,#fff0c7); color:#68451d; }
.template-card.creative { background:linear-gradient(135deg,#d8c6ed,#f5eafc); color:#4b3a69; }
.library-card.creative { background:linear-gradient(135deg,#c8b3e1,#f3e8fa); color:#493660; }
.template-card.product { background:linear-gradient(135deg,#d6a36b,#f6dfb5); color:#5f3a20; }
.template-card.product small { color:rgba(95,58,32,.68); }
.library-card.product { background:linear-gradient(135deg,#c98c4e,#f4dbad); color:#583719; }
.template-card.asmr { background:linear-gradient(135deg,#151719,#34383a); color:#f4eadb; }
.template-card.asmr small { color:rgba(244,234,219,.68); }
.library-card.asmr { background:linear-gradient(135deg,#111315,#3b4142); color:#f8eee0; }
.recipe-detail-field, .creative-idea-field, .creative-audio-field, .asmr-settings-field { display:none; }
.recipe-detail-field.visible { display:grid; }
.creative-idea-field.visible, .creative-audio-field.visible { display:grid; }
.asmr-settings-field.visible { display:grid; }
.asmr-settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; margin-top:2px; padding:11px; border:1px solid #e8e7df; border-radius:11px; background:#f8f8f3; }
.asmr-settings-grid label { display:grid; gap:5px; }
.asmr-settings-grid label small { color:#8f988b; font-size:9px; }
.asmr-settings-grid input, .asmr-settings-grid select { width:100%; height:35px; padding:0 9px; border:1px solid #e1e4db; border-radius:8px; background:#fff; color:var(--ink); font-size:11px; outline:0; }
.asmr-settings-grid input:focus, .asmr-settings-grid select:focus { border-color:#a7c1a9; box-shadow:0 0 0 3px rgba(122,164,126,.12); }
.asmr-settings-grid .asmr-output-format { grid-column:1 / -1; }
@media (max-width: 900px) { .asset-showcase { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 650px) { .real-task-detail { grid-template-columns:1fr; }.asset-showcase { grid-template-columns:1fr; }.asmr-settings-grid { grid-template-columns:1fr; }.asmr-settings-grid .asmr-output-format { grid-column:auto; } }