:root { color-scheme: light; --paper: #fbfaf7; --ink: #17212b; --sub: #68717a; --line: #e1e3e4; --blue: #113e69; --blue-soft: #e9f0f6; --sage: #667e63; --sage-soft: #e6eee4; --orange: #b36a28; --orange-soft: #f7ecdf; --red: #bd514d; --red-soft: #f8e8e7; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #f5f4f1; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button, a { touch-action: manipulation; }
.api-settings-modal, .auth-modal, .wallet-modal, .admin-users-modal { overscroll-behavior: contain; }
.app-shell { width: min(1440px, 100%); margin: 0 auto; min-height: 100vh; background: var(--paper); }
.report-nav { min-height: 72px; padding: 0 38px; display: flex; align-items: center; gap: 38px; border-bottom: 1px solid var(--line); background: rgba(251,250,247,.94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.account-brand { display: flex; align-items: center; gap: 12px; min-width: 235px; color: var(--ink); text-decoration: none; }
.fixed-avatar { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #c9d5df; border-radius: 50%; color: var(--blue); background: #edf3f6; font-family: Georgia, "Songti SC", serif; font-size: 17px; }
.brand-copy { display: grid; gap: 4px; }
.brand-copy strong { font-size: 14px; letter-spacing: .01em; }
.brand-copy small { color: var(--sub); font-size: 11px; }
.nav-links { display: flex; align-self: stretch; align-items: center; gap: 32px; flex: 1; }
.nav-links a { display: flex; align-items: center; height: 100%; color: var(--sub); text-decoration: none; font-size: 14px; position: relative; }
.nav-links a.active, .nav-links a:hover { color: var(--ink); }
.nav-links a.active::after { content: ""; position: absolute; height: 2px; width: 34px; left: 50%; bottom: 0; transform: translateX(-50%); background: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.settings-wrap { position: relative; }
.settings-button { min-width: 64px; }
.settings-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 45; width: 168px; padding: 6px; border: 1px solid #dfe5eb; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 18px 45px rgba(23,33,43,.16); backdrop-filter: blur(16px); }
.settings-menu button { display: block; width: 100%; height: 38px; border: 0; border-radius: 8px; color: #26384d; background: transparent; cursor: pointer; text-align: left; padding: 0 12px; font-size: 13px; }
.settings-menu button:hover { background: #f0f4f8; color: var(--blue); }
.landing .account-brand { min-width: 0; }
.landing .nav-links, .landing .nav-actions { display: none; }
.report-meta { color: var(--sub); font-size: 11px; }
.report-meta b { color: var(--ink); font-weight: 650; margin-left: 5px; }
.download-button { padding: 10px 14px; border: 1px solid #aeb8c1; border-radius: 6px; color: var(--ink); background: transparent; cursor: pointer; font-size: 12px; }
.download-button:hover { color: white; background: var(--blue); border-color: var(--blue); }
.api-settings-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding: 96px 20px 20px; background: rgba(17, 24, 39, .18); backdrop-filter: blur(12px); }
.api-settings-card { width: min(430px, 100%); max-height: calc(100vh - 132px); overflow: auto; padding: 22px; border: 1px solid rgba(255,255,255,.86); border-radius: 18px; background: rgba(251,250,247,.96); box-shadow: 0 24px 70px rgba(23,33,43,.22); }
.api-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.api-settings-head h2 { margin: 6px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
#api-settings-close { width: 34px; height: 34px; border: 1px solid #d7dde3; border-radius: 50%; color: #657181; background: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
.api-config-stack { display: grid; gap: 22px; }
.api-config-group { display: grid; gap: 10px; }
.api-config-group h3 { margin: 0 0 4px; color: #143e68; font-size: 14px; font-weight: 700; }
.api-config-group input[type="password"], .api-config-group input[type="url"], .api-config-group input[type="text"] { display: block; width: 100%; height: 46px; padding: 0 12px; border: 1px solid #e2d7c8; border-radius: 10px; color: var(--ink); background: #fff; outline: 0; font-size: 17px; }
.api-config-group input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17,62,105,.11); }
.api-check { display: flex; align-items: center; gap: 10px; color: #426485; font-size: 13px; line-height: 1.5; }
.api-check input { width: 15px; height: 15px; accent-color: #0b79e4; }
.api-settings-note { margin: 13px 0 0; color: var(--sub); font-size: 12px; line-height: 1.7; }
.api-settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.entry-panel { min-height: calc(100vh - 72px); display: grid; place-content: center; gap: 36px; padding: 80px 24px 120px; border-bottom: 0; background: var(--paper); text-align: center; }
.entry-copy { max-width: 760px; margin: 0 auto; }
.entry-panel h1 { max-width: 760px; margin: 18px 0 18px; font-family: Georgia, "Songti SC", serif; font-size: clamp(42px, 6.3vw, 78px); line-height: 1.08; font-weight: 500; letter-spacing: -.075em; }
.entry-panel h1 em { color: var(--blue); font-style: normal; }
.entry-copy p { max-width: 520px; margin: 0 auto; color: var(--sub); font-size: 15px; line-height: 1.8; }
.entry-form { width: min(560px, 100%); margin: 0 auto; text-align: left; }
.entry-form label { display: block; margin-bottom: 7px; color: var(--sub); font-size: 11px; }
.entry-form > div { display: flex; gap: 8px; }
.entry-form input { min-width: 0; flex: 1; height: 52px; padding: 0 16px; border: 1px solid #bdc7cf; border-radius: 7px; outline: none; color: var(--ink); background: white; font-size: 15px; box-shadow: 0 5px 18px rgba(23,33,43,.04); }
.entry-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17,62,105,.1); }
.entry-form button { height: 52px; padding: 0 22px; border: 0; border-radius: 7px; color: white; background: var(--blue); cursor: pointer; font-size: 13px; white-space: nowrap; box-shadow: 0 7px 18px rgba(17,62,105,.16); transition: transform .18s ease, background .18s ease; }
.entry-form button:hover { background: #0a3156; transform: translateY(-1px); }
.entry-form button:disabled { opacity: .6; cursor: wait; }
.report-page { padding: 54px 44px 26px; }
.report-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr) 150px; gap: 46px; min-height: 355px; padding: 5px 10px 46px; border-bottom: 1px solid var(--line); }
.micro-label { display: block; color: var(--sub); font-size: 12px; letter-spacing: .04em; }
.score-rail { position: relative; padding-top: 4px; }
.score-rail > strong { display: inline-block; margin-top: 14px; color: var(--ink); font-size: 86px; line-height: .86; letter-spacing: -.08em; font-weight: 650; }
.out-of { margin-left: 7px; color: var(--sub); font-size: 18px; }
.score-line { height: 8px; max-width: 255px; margin-top: 22px; overflow: hidden; border-radius: 99px; background: #e7e8e7; }
.score-line i { display: block; width: var(--score); height: 100%; border-radius: inherit; background: var(--blue); }
.score-rail > p { margin: 13px 0 0; color: var(--sub); font-size: 12px; }
blockquote { margin: 50px 0 0; padding: 19px 21px 21px; max-width: 275px; background: #f3eee6; color: #39434a; }
.quote-mark { display: block; height: 22px; color: #a38c6e; font-family: Georgia, serif; font-size: 42px; line-height: 1; }
blockquote p { margin: 4px 0 16px; font-family: Georgia, "Songti SC", serif; font-size: 16px; line-height: 1.75; }
blockquote cite { color: #917e66; font-size: 11px; font-style: normal; }
.diagnosis-hero { position: relative; padding-top: 2px; }
.vertical-marker { display: flex; align-items: center; gap: 14px; height: 30px; color: var(--sub); font-size: 12px; }
.vertical-marker i { display: block; width: 2px; height: 124px; margin-top: 142px; background: var(--blue); position: absolute; left: 1px; top: 0; }
.vertical-marker i::before { content: ""; display: block; width: 8px; height: 8px; margin-left: -3px; border-radius: 50%; background: var(--blue); }
.vertical-marker span { padding-left: 31px; }
.diagnosis-hero h1 { max-width: 700px; margin: 24px 0 20px 31px; font-family: Georgia, "Songti SC", "STSong", serif; font-size: clamp(31px, 3.35vw, 48px); line-height: 1.18; letter-spacing: -.045em; font-weight: 500; }
.diagnosis-hero > p { max-width: 680px; margin: 0 0 0 31px; color: var(--sub); font-size: 14px; line-height: 1.9; }
.positioning { max-width: 570px; margin: 42px 0 0 31px; padding: 15px 18px; background: #f2f5f1; border: 1px solid #d9e5db; border-radius: 8px; }
.positioning strong { display: block; margin-top: 7px; color: var(--sage); font-size: 15px; line-height: 1.5; }
.positioning p { margin: 7px 0 0; color: var(--sub); font-size: 12px; line-height: 1.7; }
.sprig-wrap { display: flex; align-items: center; justify-content: center; }
.sprig-wrap img { width: 132px; height: 230px; object-fit: contain; mix-blend-mode: multiply; opacity: .82; }
.lenses-section { padding: 39px 10px 33px; border-bottom: 1px solid var(--line); }
.signal-section { padding: 32px 10px 34px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.signal-grid { display: grid; grid-template-columns: minmax(300px, 1.8fr) repeat(3, minmax(130px, .72fr)); gap: 12px; }
.judgment-card, .metric-card { min-height: 132px; padding: 20px; border: 1px solid #e4e8e8; border-radius: 10px; background: rgba(255,255,255,.72); box-shadow: 0 8px 25px rgba(23,33,43,.035); }
.judgment-card { border-color: #cfdbea; }
.card-label { display: block; color: var(--sub); font-size: 11px; letter-spacing: .04em; }
.judgment-card p { max-width: 610px; margin: 17px 0 0; color: var(--ink); font-family: Georgia, "Songti SC", serif; font-size: 17px; line-height: 1.65; }
.metric-card { display: flex; flex-direction: column; justify-content: space-between; }
.metric-card strong { margin-top: 12px; font-size: 30px; letter-spacing: -.05em; }
.metric-card small { color: var(--sub); font-size: 11px; }
.profile-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; margin-top: 12px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.5); }
.profile-strip div { min-width: 0; }
.profile-strip span, .profile-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-strip span { color: var(--sub); font-size: 10px; }
.profile-strip strong { margin-top: 7px; font-size: 12px; font-weight: 550; }
.section-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.section-title h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.section-title span { color: var(--sub); font-size: 11px; }
.lens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.lens { min-height: 174px; padding: 4px 30px 0; border-right: 1px solid var(--line); }
.lens:first-child { padding-left: 0; }
.lens:last-child { border-right: 0; }
.lens-index { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 700; }
.lens.sage .lens-index { color: var(--sage); background: var(--sage-soft); }
.lens.orange .lens-index { color: var(--orange); background: var(--orange-soft); }
.lens.red .lens-index { color: var(--red); background: var(--red-soft); }
.lens h3 { margin: 17px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 500; }
.lens-score { font-family: Georgia, serif; font-size: 27px; }
.lens-score small { color: var(--sub); font-family: inherit; font-size: 12px; }
.lens-status { margin-left: 8px; font-size: 12px; }
.lens-status.low { color: var(--red); }
.lens-status.mid { color: var(--orange); }
.lens-status.good { color: var(--sage); }
.lens p { max-width: 210px; margin: 14px 0 0; color: var(--sub); font-size: 12px; line-height: 1.65; }
.evidence-route { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: 54px; padding: 38px 10px 30px; border-bottom: 1px solid var(--line); }
.content-evidence, .route-panel { min-width: 0; }
.works-table { overflow-x: auto; }
table { width: 100%; min-width: 630px; border-collapse: collapse; }
th, td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; white-space: nowrap; }
th { color: var(--sub); font-weight: 500; }
td { color: #3c454b; }
td:first-child { max-width: 245px; overflow: hidden; text-overflow: ellipsis; }
td a { color: var(--blue); text-decoration: none; }
.evidence-footnote { margin: 15px 0 0; color: var(--sub); font-size: 11px; line-height: 1.6; }
.route-list { display: grid; gap: 0; }
.route-item { display: grid; grid-template-columns: 46px 1fr 190px; gap: 12px; align-items: start; min-height: 132px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.route-item:last-child { border-bottom: 0; }
.route-number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: white; background: var(--blue); font-size: 12px; font-weight: 700; }
.route-item:nth-child(2) .route-number { background: var(--sage); }
.route-item:nth-child(3) .route-number { background: #23313b; }
.route-copy h3 { margin: 0; font-size: 14px; font-weight: 650; }
.route-kicker { margin-bottom: 7px; color: var(--sage); font-size: 10px; letter-spacing: .03em; }
.route-copy p { margin: 7px 0 0; color: var(--sub); font-size: 11px; line-height: 1.6; }
.route-copy p b { color: var(--ink); font-weight: 600; }
.route-target { padding: 12px 13px; border: 1px solid #ece8df; border-radius: 6px; color: #88795f; background: #faf7f1; font-size: 11px; line-height: 1.5; }
.route-target strong { display: block; color: #a28a67; font-weight: 500; }
.benchmark-section { padding: 38px 10px 30px; border-bottom: 1px solid var(--line); }
.benchmark-intro { max-width: 760px; margin: -5px 0 22px; color: var(--sub); font-size: 12px; line-height: 1.7; }
.benchmark-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.benchmark-item { display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 13px 12px; border: 1px solid #e7e6e1; border-radius: 7px; color: var(--ink); background: #fdfcf9; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.benchmark-item:hover { border-color: #aab9c5; transform: translateY(-2px); }
.benchmark-index { color: var(--blue); font-family: Georgia, serif; font-size: 16px; }
.benchmark-item strong, .benchmark-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benchmark-item strong { font-size: 12px; }
.benchmark-item small { max-width: 110px; margin-top: 4px; color: var(--sub); font-size: 10px; }
.benchmark-arrow { margin-left: auto; color: var(--sub); font-size: 15px; }
.takeaways-section { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; padding: 38px 10px 30px; border-bottom: 1px solid var(--line); }
.takeaway-column ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.takeaway-column li { position: relative; padding: 14px 16px 14px 34px; border: 1px solid #e6e9e8; border-radius: 8px; color: #4a555c; background: #f7faf8; font-size: 12px; line-height: 1.65; }
.takeaway-column li::before { content: "✓"; position: absolute; left: 14px; top: 14px; color: var(--sage); font-weight: 700; }
.takeaway-column.weakness li { background: #fbf8f4; }
.takeaway-column.weakness li::before { content: "!"; color: var(--orange); }
.bottom-note { display: flex; gap: 8px; padding: 20px 10px 0; color: var(--sub); font-size: 11px; }
.bottom-note p { margin: 0; }
footer { padding: 20px 44px 28px; color: #9aa0a5; font-size: 11px; }
@media (max-width: 980px) { .report-nav { gap: 20px; padding: 0 22px; } .nav-links { gap: 15px; } .entry-panel { padding: 70px 25px 100px; } .report-page { padding: 38px 25px 25px; } .report-hero { grid-template-columns: 235px minmax(0, 1fr); gap: 28px; } .sprig-wrap { display: none; } .signal-grid { grid-template-columns: 1.5fr repeat(3, 1fr); } .profile-strip { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 12px; } .evidence-route { grid-template-columns: 1fr; gap: 35px; } .benchmark-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .report-nav { flex-wrap: wrap; padding: 12px 16px; } .account-brand { min-width: 0; } .nav-links { order: 3; width: 100%; height: 37px; gap: 21px; overflow-x: auto; } .nav-actions { margin-left: auto; } .report-meta { display: none; } .api-settings-modal { padding-top: 82px; } .api-settings-actions { flex-direction: column-reverse; } .api-settings-actions button { width: 100%; } .entry-panel { min-height: calc(100vh - 62px); padding: 50px 16px 80px; gap: 30px; } .entry-panel h1 { font-size: clamp(40px, 12vw, 58px); } .entry-copy p { font-size: 14px; } .entry-form > div { flex-direction: column; } .entry-form button { width: 100%; } .report-hero { display: block; padding-bottom: 32px; } .diagnosis-hero { margin-top: 45px; } .score-rail > strong { font-size: 72px; } blockquote { margin-top: 34px; max-width: none; } .signal-grid { grid-template-columns: repeat(3, 1fr); } .judgment-card { grid-column: 1 / -1; } .profile-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; } .lenses-section, .evidence-route, .benchmark-section, .signal-section, .takeaways-section { padding-left: 0; padding-right: 0; } .lens-grid { grid-template-columns: repeat(2, 1fr); gap: 25px 0; } .lens { min-height: 150px; padding: 4px 17px; } .lens:nth-child(2) { border-right: 0; } .lens:nth-child(3) { padding-left: 0; } .route-item { grid-template-columns: 40px 1fr; padding: 16px 0; } .route-target { grid-column: 2; } .benchmark-list { grid-template-columns: 1fr; } .takeaways-section { grid-template-columns: 1fr; gap: 26px; } footer { padding-left: 20px; padding-right: 20px; } }
@media print { .report-nav { position: static; } .download-button { display: none; } body, .app-shell { background: white; } .report-page { padding-top: 20px; } }

/* Mobile reading layout: preserve hierarchy and let dense evidence scroll safely. */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  .app-shell { width: 100%; }
  .report-nav { min-height: 64px; padding: 11px 16px; gap: 0; }
  .account-brand { gap: 9px; max-width: calc(100vw - 32px); }
  .fixed-avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 16px; }
  .brand-copy { min-width: 0; gap: 2px; }
  .brand-copy strong, .brand-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { font-size: 10px; }
  .has-report .nav-actions { display: flex; margin-left: auto; }
  .has-report .nav-links { order: 3; flex: 0 0 100%; width: 100%; height: 34px; gap: 25px; overflow-x: auto; border-top: 1px solid var(--line); }
  .has-report .nav-links a { flex: 0 0 auto; height: 34px; font-size: 12px; white-space: nowrap; }
  .download-button { padding: 8px 10px; font-size: 11px; }
  .entry-panel { min-height: calc(100svh - 64px); padding: 45px 16px 70px; gap: 30px; }
  .entry-panel h1 { margin-top: 15px; font-size: clamp(39px, 12vw, 56px); line-height: 1.1; }
  .entry-copy p { max-width: 340px; font-size: 14px; line-height: 1.75; }
  .entry-form { width: 100%; }
  .entry-form > div { flex-direction: column; gap: 10px; }
  .entry-form input, .entry-form button { width: 100%; height: 50px; }
  .report-page { padding: 30px 16px 22px; }
  .report-hero { min-height: auto; padding: 0 0 32px; }
  .score-rail > strong { margin-top: 12px; font-size: 72px; }
  .score-line { width: 100%; max-width: none; }
  blockquote { max-width: none; margin: 30px 0 0; }
  .diagnosis-hero { margin-top: 37px; padding: 0; }
  .vertical-marker span, .diagnosis-hero h1, .diagnosis-hero > p, .positioning { margin-left: 23px; }
  .vertical-marker i { height: 150px; margin-top: 138px; }
  .diagnosis-hero h1 { max-width: none; margin-top: 22px; margin-bottom: 16px; font-size: clamp(32px, 10vw, 48px); line-height: 1.17; }
  .diagnosis-hero > p { font-size: 13px; line-height: 1.8; }
  .positioning { margin-top: 30px; margin-right: 0; padding: 14px 15px; }
  .sprig-wrap { display: none; }
  .lenses-section, .evidence-route, .benchmark-section { padding-left: 0; padding-right: 0; }
  .lenses-section { padding-top: 30px; padding-bottom: 27px; }
  .section-title { align-items: baseline; gap: 9px; margin-bottom: 18px; }
  .section-title h2 { font-size: 20px; }
  .section-title span { font-size: 10px; }
  .lens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .lens { min-height: 150px; padding: 0 14px; }
  .lens:first-child, .lens:nth-child(3) { padding-left: 0; }
  .lens:nth-child(2) { border-right: 0; }
  .lens h3 { margin-top: 13px; font-size: 16px; }
  .lens-score { font-size: 25px; }
  .lens p { margin-top: 11px; font-size: 11px; line-height: 1.55; }
  .evidence-route { display: block; padding-top: 30px; padding-bottom: 26px; }
  .route-panel { margin-top: 39px; }
  .works-table { width: 100%; padding-bottom: 3px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 630px; }
  th, td { padding: 10px 7px; font-size: 10px; }
  .route-item { grid-template-columns: 36px minmax(0, 1fr); min-height: 0; gap: 9px; padding: 16px 0; }
  .route-number { width: 30px; height: 30px; }
  .route-copy h3 { font-size: 14px; line-height: 1.4; }
  .route-kicker { line-height: 1.4; }
  .route-copy p { font-size: 11px; line-height: 1.65; }
  .route-target { grid-column: 2; margin-top: 4px; padding: 10px 12px; font-size: 11px; }
  .benchmark-section { padding-top: 30px; padding-bottom: 25px; }
  .benchmark-intro { margin-top: -3px; font-size: 11px; line-height: 1.7; }
  .benchmark-list { grid-template-columns: 1fr; gap: 8px; }
  .benchmark-item { min-height: 58px; padding: 10px 12px; }
  .bottom-note { padding: 17px 0 0; font-size: 10px; line-height: 1.6; }
  footer { padding: 18px 16px 24px; font-size: 10px; }
}

@media (max-width: 380px) {
  .has-report .nav-actions { gap: 0; }
  .download-button { padding: 7px 8px; }
  .entry-panel h1 { font-size: 38px; }
  .diagnosis-hero h1 { font-size: 32px; }
  .lens { padding-right: 10px; }
  .lens-status { display: block; margin: 4px 0 0; }
}
.workbench-page { max-width: 1180px; margin: 0 auto; padding: 78px 34px 96px; }
.morning-generator-page { max-width: 1380px; margin: 0 auto; padding: 42px 24px 70px; }
.generator-frame { display: block; width: 100%; min-height: calc(100vh - 190px); border: 1px solid #e2e8ee; border-radius: 22px; background: #f7f9fb; box-shadow: 0 18px 55px rgba(31, 52, 73, .055); }
.workbench-intro { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.workbench-intro h1 { margin: 18px 0 14px; color: #172033; font-size: clamp(38px, 5vw, 64px); font-weight: 650; letter-spacing: -.055em; line-height: 1.08; }
.workbench-intro p { margin: 0; color: #718096; font-size: 17px; line-height: 1.8; }
.app-tabs { gap: 10px; }
.app-tabs a { text-decoration: none; }
.app-tabs a.active { color: #14589a; }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 730px; margin: 0 auto 28px; padding: 5px; border: 1px solid #e3e8ef; border-radius: 16px; background: #f7f9fb; }
.mode-option { border: 0; border-radius: 12px; padding: 13px 14px; background: transparent; color: #738096; cursor: pointer; text-align: left; transition: .2s ease; }
.mode-option.active { background: #fff; color: #143e68; box-shadow: 0 3px 14px rgba(28, 54, 82, .08); }
.mode-option strong, .mode-option small { display: block; }
.mode-option strong { font-size: 14px; margin-bottom: 4px; }
.mode-option small { font-size: 12px; }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); gap: 20px; }
.creator-card, .workflow-card, .workbench-result { border: 1px solid #e4e9ef; border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: 0 18px 55px rgba(31, 52, 73, .055); }
.creator-card { padding: 34px; }
.workflow-card { padding: 28px; }
.card-topline, .result-head, .editor-head, .result-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.card-topline { margin-bottom: 28px; color: #8a96a6; font-size: 13px; }
.card-label { color: #162338; font-size: 14px; font-weight: 650; }
.status-pill { padding: 6px 10px; border-radius: 999px; color: #5b7690; background: #edf5fb; font-size: 12px; }
.creator-card > label { display: block; margin-bottom: 10px; color: #243348; font-size: 14px; font-weight: 600; }
#workbench-topic { display: block; width: 100%; min-height: 150px; box-sizing: border-box; resize: vertical; border: 1px solid #cbd5e1; border-radius: 14px; padding: 18px; color: #1f2937; background: #fff; font: inherit; outline: 0; transition: .2s; }
#workbench-topic:focus, #article-editor:focus { border-color: #2475b8; box-shadow: 0 0 0 4px rgba(36,117,184,.1); }
.creator-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 22px; }
.creator-options label { color: #7c8795; font-size: 12px; }
.creator-options select { display: block; width: 100%; margin-top: 7px; border: 1px solid #d9e0e8; border-radius: 9px; padding: 10px; color: #26384d; background: #fff; }
.primary-action, .secondary-action { border: 0; border-radius: 11px; padding: 14px 20px; cursor: pointer; font: inherit; font-weight: 650; }
.primary-action { color: white; background: #14588f; box-shadow: 0 8px 20px rgba(20,88,143,.18); }
.primary-action:hover { background: #0e4674; }
.primary-action.compact { padding: 11px 15px; font-size: 13px; }
.secondary-action { border: 1px solid #d8e0e8; color: #315370; background: #fff; font-size: 13px; }
.helper-copy { margin: 13px 0 0; color: #94a0ad; font-size: 12px; }
.workflow-steps { display: grid; gap: 6px; }
.workflow-step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 11px; color: #8a96a4; }
.workflow-step > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dfe5eb; border-radius: 50%; color: #83909e; font-size: 11px; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { color: #526174; font-size: 13px; }
.workflow-step small { margin-top: 3px; font-size: 11px; }
.workflow-step.active { background: #f1f7fc; }
.workflow-step.active > span, .workflow-step.done > span { border-color: #2d78b4; color: #fff; background: #2d78b4; }
.workflow-step.active strong { color: #15598e; }
.workflow-step.done strong { color: #637589; }
.workflow-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid #edf0f3; color: #8a96a4; font-size: 12px; line-height: 1.7; }
.workflow-note strong, .workflow-note span { display: block; }
.workflow-note strong { margin-bottom: 5px; color: #37475b; }
.workbench-result { margin-top: 20px; padding: 30px; }
.result-head { align-items: flex-end; padding-bottom: 22px; border-bottom: 1px solid #edf0f3; }
.result-head h2 { margin: 8px 0 0; color: #18263a; font-size: 26px; letter-spacing: -.03em; }
.result-actions { display: flex; gap: 9px; }
.topic-list { padding: 18px 0; }
.topic-head { display: flex; justify-content: space-between; margin-bottom: 10px; color: #566579; font-size: 13px; }
.topic-head span { color: #9aa5b2; }
.topic-item { display: grid; grid-template-columns: 34px 1fr 20px; gap: 12px; width: 100%; margin: 7px 0; padding: 13px 12px; border: 1px solid #e7ebef; border-radius: 12px; color: #1f3550; background: #fff; text-align: left; cursor: pointer; }
.topic-item:hover { border-color: #93b8d5; background: #f7fbfe; }
.topic-number { color: #6c94b4; font-size: 12px; }
.topic-item strong, .topic-item small { display: block; }
.topic-item small { margin-top: 5px; color: #8996a4; font-size: 12px; }
.framework-summary { padding: 17px; border-radius: 13px; background: #f6f9fb; color: #647387; }
.framework-summary strong { display: block; margin: 5px 0; color: #1d4f78; font-size: 18px; }
.framework-summary p { margin: 0 0 13px; font-size: 13px; }
.framework-summary > div { display: flex; flex-wrap: wrap; gap: 8px; }
.framework-summary > div span { padding: 6px 9px; border-radius: 7px; background: #fff; font-size: 12px; }
.editor-wrap { border: 1px solid #e2e8ee; border-radius: 14px; overflow: hidden; }
.editor-head { padding: 12px 15px; color: #657488; background: #f8fafb; font-size: 12px; }
#article-editor { display: block; width: 100%; min-height: 390px; box-sizing: border-box; resize: vertical; border: 0; padding: 20px; color: #27364a; background: #fff; font: 15px/1.9 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; outline: 0; }
.result-foot { margin-top: 15px; color: #8c98a6; font-size: 12px; }
.text-action { border: 0; color: #1769a4; background: transparent; cursor: pointer; font: inherit; }
.generated-images { margin: 4px 0 22px; padding: 20px; border: 1px solid #e2e8ee; border-radius: 15px; background: #f8fafb; }
.image-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: #8491a0; font-size: 12px; }
.image-section-head h3 { margin: 6px 0 0; color: #203248; font-size: 18px; }
.image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.image-grid a { overflow: hidden; border: 1px solid #dfe6ed; border-radius: 12px; color: #203248; background: #fff; text-decoration: none; }
.image-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #edf1f4; }
.image-grid a > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.image-grid strong, .image-grid small { font-size: 12px; }
.image-grid small { color: #8b97a5; }
@media (max-width: 780px) { .workbench-page, .morning-generator-page { padding: 48px 16px 70px; } .generator-frame { min-height: 760px; border-radius: 16px; } .workbench-grid { grid-template-columns: 1fr; } .mode-switch { grid-template-columns: 1fr; } .mode-option { text-align: center; } .creator-card, .workflow-card, .workbench-result { padding: 22px; } .result-head { align-items: flex-start; flex-direction: column; } .result-actions { width: 100%; } .result-actions button { flex: 1; } .creator-options { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .image-grid { grid-template-columns: 1fr; } .image-section-head { align-items: flex-start; flex-direction: column; } }

/* 2026-08-30 creator studio: App Store-inspired desktop workspace. */
:root {
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #f7f7f9;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --hairline: rgba(60, 60, 67, .16);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --xhs: #ff3158;
  --tie: #19a974;
  --hit: #e76f00;
}
body * { letter-spacing: 0 !important; }
body { color: var(--text); background: var(--canvas); }
.app-shell { width: 100%; max-width: none; min-height: 100vh; background: var(--canvas); }
.app-shell > section, .app-shell > main, .app-shell > footer { width: calc(100% - 252px); margin-left: 252px; }
.report-nav.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 252px;
  height: 100vh;
  min-height: 0;
  padding: 26px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  border: 0;
  border-right: 1px solid var(--hairline);
  background: rgba(248, 248, 250, .92);
  backdrop-filter: blur(24px) saturate(140%);
}
.account-brand { min-width: 0; padding: 0 8px; gap: 11px; }
.fixed-avatar { width: 40px; height: 40px; border: 0; border-radius: 10px; color: #fff; background: #1d1d1f; font-family: inherit; font-size: 16px; font-weight: 700; }
.brand-copy strong { font-size: 14px; }
.brand-copy small { color: #8e8e93; font-size: 10px; }
.nav-links { width: 100%; flex: 0 0 auto; display: grid; align-self: auto; align-items: stretch; gap: 4px; }
.nav-links a { min-width: 0; height: 52px; padding: 0 11px; gap: 11px; border-radius: 8px; color: #515154; font-size: 13px; }
.nav-links a::after { display: none !important; }
.nav-links a > svg { width: 19px; height: 19px; flex: 0 0 auto; color: #77777c; }
.nav-links a > span { min-width: 0; display: grid; gap: 2px; }
.nav-links a strong, .nav-links a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-links a strong { font-size: 13px; font-weight: 600; }
.nav-links a small { color: #929298; font-size: 10px; }
.nav-links a:hover { background: rgba(118, 118, 128, .08); }
.nav-links a.active { color: #fff; background: #1d1d1f; }
.nav-links a.active svg, .nav-links a.active small { color: rgba(255,255,255,.7); }
.nav-actions { margin-top: auto; width: 100%; display: grid; gap: 8px; }
.settings-wrap { width: 100%; }
.download-button { width: 100%; min-width: 0; height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; border: 1px solid var(--hairline); border-radius: 8px; color: #424245; background: rgba(255,255,255,.72); font-size: 12px; }
.download-button svg { width: 16px; height: 16px; }
.download-button:hover { color: var(--text); border-color: rgba(60,60,67,.24); background: #fff; }
.config-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #c7c7cc; }
.config-dot.partial { background: #ff9f0a; }
.config-dot.ready { background: #30d158; }
.settings-menu { inset: auto auto 50px 0; width: 100%; border-radius: 8px; }
.settings-menu button { display: flex; align-items: center; gap: 9px; }
.settings-menu svg { width: 15px; height: 15px; }

.entry-panel { min-height: 100vh; padding: 72px 56px; place-content: center; background: var(--canvas); }
.entry-panel h1 { margin: 16px 0; font-family: inherit; font-size: 44px; line-height: 1.12; font-weight: 720; }
.entry-copy p { font-size: 16px; line-height: 1.7; }
.entry-form { width: min(620px, 100%); padding: 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 40px rgba(0,0,0,.06); }
.entry-form label { padding: 0 4px; }
.entry-form input { height: 54px; border-radius: 8px; box-shadow: none; }
.entry-form button { height: 54px; border-radius: 8px; background: var(--accent); box-shadow: none; }

.workbench-page, .morning-generator-page, .skill-page { min-height: 100vh; padding: 52px 46px 80px; background: var(--canvas); }
.workbench-intro, .skill-page-head { width: min(1160px, 100%); margin: 0 auto 30px; }
.workbench-intro h1, .skill-page-head h1 { margin: 8px 0 10px; font-family: inherit; font-size: 34px; line-height: 1.16; font-weight: 720; }
.workbench-intro p, .skill-page-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.skill-page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.skill-kicker { color: var(--accent); font-size: 12px; font-weight: 650; }
.skill-badge { width: 60px; height: 60px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #fff; background: var(--accent); }
.skill-badge.xhs { background: var(--xhs); }
.skill-badge.tie { background: var(--tie); }
.skill-badge.hit { background: var(--hit); }
.skill-badge svg { width: 29px; height: 29px; }

.skill-workspace { width: min(1160px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.skill-form, .skill-output { min-width: 0; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); }
.skill-form { padding: 24px; position: sticky; top: 22px; }
.skill-output { min-height: 650px; padding: 24px; }
.form-section-title { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.form-section-title > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #1d1d1f; font-size: 11px; }
.form-section-title strong, .form-section-title small { display: block; }
.form-section-title strong { font-size: 15px; }
.form-section-title small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.skill-form > label, .skill-form .field-grid label { display: grid; gap: 7px; color: #5d5d62; font-size: 11px; font-weight: 600; }
.skill-form textarea, .skill-form input, .skill-form select { width: 100%; border: 1px solid var(--hairline); border-radius: 8px; color: var(--text); background: #fff; outline: 0; }
.skill-form input, .skill-form select { height: 44px; padding: 0 12px; }
.skill-form textarea { min-height: 110px; padding: 12px; resize: vertical; line-height: 1.6; }
.skill-form textarea.compact-area { min-height: 82px; }
.skill-form textarea.article-area { min-height: 300px; }
.skill-form input:focus, .skill-form select:focus, .skill-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,113,227,.1); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.field-wide { margin-top: 14px; }
.skill-primary { width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: var(--accent); box-shadow: none; }
.skill-primary svg { width: 17px; height: 17px; }
.button-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.output-empty { min-height: 590px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }
.output-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; color: #737379; background: var(--surface-soft); }
.output-empty svg { width: 27px; height: 27px; }
.output-empty h2 { margin: 16px 0 7px; color: var(--text); font-size: 18px; }
.output-empty p { max-width: 360px; margin: 0; font-size: 12px; line-height: 1.7; }
.output-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.output-head h2 { margin: 10px 0 5px; font-size: 23px; line-height: 1.3; }
.output-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.output-head button { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.output-head button svg { width: 16px; height: 16px; }
.result-status { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px; color: #9a6200; background: #fff4ce; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.result-status.ready { color: #137333; background: #e6f4ea; }
.result-status.blocked { color: #b3261e; background: #fce8e6; }
.result-status.revise { color: #9a6200; background: #fff4ce; }
.result-section { padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.result-section:last-child { border-bottom: 0; }
.result-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.result-section-title strong { font-size: 14px; }
.result-section-title span { color: var(--muted); font-size: 11px; }
.title-options { display: grid; gap: 8px; }
.title-option { min-height: 66px; padding: 12px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: center; border: 1px solid var(--hairline); border-radius: 8px; }
.title-option.selected { border-color: rgba(0,113,227,.42); background: #f2f8ff; }
.title-option > span { color: var(--accent); font-size: 11px; }
.title-option strong, .title-option small { display: block; }
.title-option strong { font-size: 13px; }
.title-option small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.creator-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.creator-output-card { overflow: hidden; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; }
.card-image-slot { position: relative; aspect-ratio: 3 / 4; display: grid; place-content: center; justify-items: center; gap: 6px; color: #94949a; background: #f4f4f6; }
.card-image-slot > span { font-size: 28px; font-weight: 700; }
.card-image-slot > small { font-size: 10px; }
.card-image-slot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card-image-slot a { position: absolute; right: 8px; bottom: 8px; padding: 6px 9px; border-radius: 6px; color: #fff; background: rgba(0,0,0,.65); text-decoration: none; font-size: 10px; }
.creator-card-copy { padding: 12px; }
.creator-card-copy > span { color: var(--accent); font-size: 10px; }
.creator-card-copy strong { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; }
.creator-card-copy p { margin: 7px 0; color: #5d5d62; font-size: 11px; line-height: 1.55; }
.creator-card-copy small { color: #919197; font-size: 10px; line-height: 1.45; }
.result-editor { width: 100%; min-height: 260px; padding: 14px; resize: vertical; border: 1px solid var(--hairline); border-radius: 8px; color: var(--text); background: #fbfbfc; line-height: 1.8; outline: 0; }
.result-editor.compact { min-height: 120px; }
.copy-result { display: flex; align-items: center; gap: 6px; border: 0; color: var(--accent); background: transparent; cursor: pointer; font-size: 11px; }
.copy-result svg { width: 14px; height: 14px; }
.result-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.result-meta-grid > div { padding: 12px; border-radius: 8px; background: var(--surface-soft); }
.result-meta-grid span { color: var(--muted); font-size: 10px; }
.result-meta-grid p { margin: 6px 0 0; font-size: 11px; line-height: 1.6; }
.issue-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.issue-list li { padding: 10px 12px; border: 1px solid #f0d9ad; border-radius: 7px; background: #fff8e8; font-size: 11px; line-height: 1.55; }
.issue-list li.ok { border-color: #bce3c7; background: #ecf9ef; }
.plan-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }
.plan-summary > div { padding: 12px; border-radius: 8px; background: var(--surface-soft); }
.plan-summary span, .plan-summary strong { display: block; }
.plan-summary span { color: var(--muted); font-size: 10px; }
.plan-summary strong { margin-top: 6px; font-size: 13px; }
.cta-line { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.generation-progress { margin: 18px 0; padding: 14px; border: 1px solid rgba(0,113,227,.22); border-radius: 8px; background: #f2f8ff; }
.generation-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.progress-track { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: #dbe9f8; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.cancel-generation { margin-top: 10px; padding: 0; border: 0; color: #c93400; background: transparent; cursor: pointer; font-size: 11px; }
.generation-progress.done { border-color: rgba(48,209,88,.26); background: #ecf9ef; }

.detector-hero { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 22px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.detector-hero h2 { margin: 12px 0 0; font-size: 58px; line-height: 1; }
.detector-hero > div > p, .detector-verdict p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.detector-verdict strong { display: block; font-size: 16px; line-height: 1.6; }
.detector-verdict button { margin-top: 14px; display: flex; align-items: center; gap: 7px; }
.detector-verdict button svg { width: 15px; height: 15px; }
.detector-score { display: grid; grid-template-columns: 64px minmax(0,1fr) 52px; gap: 12px; align-items: center; margin: 11px 0; font-size: 11px; }
.detector-score > div { height: 7px; overflow: hidden; border-radius: 5px; background: #e8e8ed; }
.detector-score i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.detector-score strong { text-align: right; }
.detector-score small { color: var(--muted); font-weight: 400; }
.suggestion-list { display: grid; gap: 8px; }
.suggestion-list article { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; padding: 12px; border: 1px solid var(--hairline); border-radius: 8px; }
.suggestion-list article > span { color: #c93400; font-size: 10px; font-weight: 700; }
.suggestion-list strong { font-size: 12px; }
.suggestion-list p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ledger-list { display: grid; gap: 7px; }
.ledger-list > div { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 8px; background: var(--surface-soft); }
.ledger-list span { color: var(--hit); font-size: 10px; }
.ledger-list p, .muted-copy { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.api-settings-modal { place-items: center; padding: 28px; background: rgba(0,0,0,.28); backdrop-filter: blur(18px) saturate(120%); }
.api-settings-card { width: min(760px, 100%); max-height: calc(100vh - 56px); padding: 28px; border: 1px solid var(--hairline); border-radius: 14px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.22); }
.api-settings-head { margin-bottom: 20px; }
.api-settings-head h2 { margin: 6px 0 5px; font-family: inherit; font-size: 28px; font-weight: 720; }
.api-settings-head p { margin: 0; color: var(--muted); font-size: 11px; }
#api-settings-close { display: grid; place-items: center; border-radius: 50%; }
#api-settings-close svg { width: 17px; height: 17px; }
.api-config-stack { grid-template-columns: 1fr 1fr; gap: 12px; }
.api-config-group { padding: 18px; border: 1px solid var(--hairline); border-radius: 8px; align-content: start; }
.api-config-group > label:not(.api-check) { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.api-config-group input[type="password"], .api-config-group input[type="url"], .api-config-group input[type="text"] { height: 42px; border-color: var(--hairline); border-radius: 8px; font-size: 13px; }
.config-group-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.config-group-head > div { display: flex; gap: 9px; }
.config-group-head h3 { margin: 2px 0 0; color: var(--text); font-size: 13px; }
.config-group-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.config-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--accent); }
.config-icon.image { background: var(--tie); }
.config-icon svg { width: 17px; height: 17px; }
.connection-status { height: fit-content; padding: 4px 7px; border-radius: 5px; color: #8e8e93; background: #f0f0f2; font-size: 9px; }
.connection-status.ready { color: #137333; background: #e6f4ea; }
.api-field-row { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; }
.test-provider { height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--hairline); border-radius: 8px; color: #3a3a3c; background: #f7f7f9; cursor: pointer; font-size: 11px; }
.test-provider svg { width: 14px; height: 14px; }
.api-settings-note { display: flex; gap: 8px; align-items: flex-start; }
.api-settings-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

.app-toast { position: fixed; left: calc(50% + 126px); bottom: 28px; z-index: 80; max-width: min(460px, calc(100vw - 40px)); min-height: 44px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #fff; background: rgba(29,29,31,.94); box-shadow: 0 14px 40px rgba(0,0,0,.22); opacity: 0; transform: translate(-50%, 12px); transition: .22s; font-size: 12px; }
.app-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.app-toast.error { background: rgba(156,24,24,.96); }
.app-toast svg { width: 17px; height: 17px; flex: 0 0 auto; }
.signal-section { background: #f7f8f8; }

@media (max-width: 1040px) {
  .skill-workspace { grid-template-columns: 1fr; }
  .skill-form { position: static; }
  .skill-output { min-height: 480px; }
  .output-empty { min-height: 420px; }
}

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .app-shell > section, .app-shell > main, .app-shell > footer { width: 100%; margin-left: 0; }
  .report-nav.app-sidebar { position: sticky; top: 0; width: 100%; height: auto; padding: 10px 12px; flex-direction: row; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--hairline); background: #fafafc; backdrop-filter: none; }
  .account-brand { padding: 0; }
  .fixed-avatar { width: 34px; height: 34px; }
  .brand-copy small { display: none; }
  .brand-copy strong { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-links { order: 3; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: 66px; padding: 5px 6px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(6, minmax(54px,1fr)); gap: 2px; border-top: 1px solid var(--hairline); background: rgba(250,250,252,.96); backdrop-filter: blur(20px); overflow-x: auto; }
  .nav-links a { height: 54px; min-width: 54px; padding: 5px 2px; display: grid; place-items: center; gap: 2px; text-align: center; }
  .nav-links a > span { display: block; }
  .nav-links a strong { display: block; font-size: 9px; }
  .nav-links a small { display: none; }
  .nav-links a.active { color: var(--accent); background: transparent; }
  .nav-links a.active svg { color: var(--accent); }
  .nav-actions { margin: 0 0 0 auto; width: auto; display: flex; }
  .download-button { width: 40px; padding: 0; justify-content: center; }
  .download-button span { display: none; }
  .settings-menu { left: auto; right: 0; top: 48px; bottom: auto; width: 170px; }
  .entry-panel { min-height: calc(100vh - 58px); padding: 50px 18px 110px; }
  .entry-panel h1 { font-size: 38px; }
  .entry-form { padding: 9px; }
  .entry-form > div { flex-direction: column; }
  .workbench-page, .morning-generator-page, .skill-page { padding: 34px 14px 100px; }
  .workbench-intro h1, .skill-page-head h1 { font-size: 27px; }
  .skill-badge { width: 48px; height: 48px; border-radius: 11px; }
  .skill-badge svg { width: 23px; height: 23px; }
  .skill-form, .skill-output { padding: 18px; }
  .field-grid, .result-meta-grid, .api-config-stack { grid-template-columns: 1fr; }
  .creator-card-grid { grid-template-columns: 1fr; }
  .output-head { flex-direction: column; }
  .output-head button { width: 100%; justify-content: center; }
  .detector-hero { grid-template-columns: 1fr; }
  .api-settings-modal { padding: 12px; }
  .api-settings-card { max-height: calc(100vh - 24px); padding: 20px; }
  .api-field-row { grid-template-columns: 1fr; }
  .app-toast { left: 50%; bottom: 82px; }
  footer { padding-bottom: 90px; }
}

/* RC accessibility and interaction guardrails. */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

:where(.account-modal, .api-settings-modal) {
  overscroll-behavior: contain;
}

button, a {
  touch-action: manipulation;
}

@media print {
  .report-nav.app-sidebar { display: none; }
  .app-shell > main { width: 100%; margin-left: 0; }
}

/* Premium crystal workspace */
:root {
  --glass-bg: #070c11;
  --glass-panel: rgba(22, 29, 35, .72);
  --glass-panel-strong: rgba(25, 33, 40, .91);
  --glass-soft: rgba(255, 255, 255, .035);
  --glass-line: rgba(214, 226, 235, .13);
  --glass-line-bright: rgba(255, 255, 255, .22);
  --glass-text: #f1f3f5;
  --glass-muted: #929aa3;
  --glass-gold: #e7bf7a;
  --glass-green: #56d49c;
  --accent: #e2bd7c;
  --xhs: #e2bd7c;
  --tie: #e2bd7c;
  --hit: #e2bd7c;
}

html { background: var(--glass-bg); }
body {
  color: var(--glass-text);
  background: #0b1218;
  background-image: url('/static/assets/crystal-workspace-bg.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.app-shell { padding-top: 0; background: transparent; }
.app-shell > section, .app-shell > main, .app-shell > footer { width: calc(100% - 180px); margin-left: 180px; }

.report-nav.app-sidebar {
  width: 180px;
  padding: 18px 13px 20px;
  gap: 18px;
  border-right: 1px solid var(--glass-line);
  background: rgba(13, 20, 26, .9);
  box-shadow: inset -1px 0 rgba(255,255,255,.025), 18px 0 60px rgba(0,0,0,.18);
  backdrop-filter: blur(28px) saturate(135%);
}
.account-brand { padding: 0 7px 14px; gap: 9px; border-bottom: 1px solid var(--glass-line); }
.fixed-avatar {
  width: 29px; height: 29px; border-radius: 7px;
  color: #15120d; background: #e2c083;
  box-shadow: inset 0 1px rgba(255,255,255,.65), 0 6px 18px rgba(199,155,87,.16);
}
.fixed-avatar svg { width: 17px; height: 17px; }
.brand-copy strong { color: #f8f9fa; font-size: 14px; font-weight: 650; }
.brand-copy small { color: #69727b; font-size: 8px; text-transform: uppercase; }
.nav-links { gap: 5px; }
.nav-links a {
  height: 48px; padding: 0 10px; gap: 10px; border: 1px solid transparent;
  color: #adb4bb; background: transparent;
}
.nav-links a > svg { width: 18px; height: 18px; color: #78828c; }
.nav-links a strong { font-size: 12px; font-weight: 520; }
.nav-links a small { color: #626b74; font-size: 8px; }
.nav-links a:hover { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
.nav-links a.active {
  color: #f4d79f; border-color: rgba(231,191,122,.24);
  background: rgba(231,191,122,.09);
  box-shadow: inset 2px 0 #e7bf7a, inset 0 1px rgba(255,255,255,.04), 0 8px 28px rgba(0,0,0,.16);
}
.nav-links a.active svg { color: var(--glass-gold); }
.nav-links a.active small { color: #9e8a67; }
.nav-actions { gap: 7px; }
.download-button {
  height: 40px; color: #9ca4ac; border-color: var(--glass-line);
  background: rgba(255,255,255,.025); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.download-button:hover { color: #f4f5f6; border-color: var(--glass-line-bright); background: rgba(255,255,255,.06); }

.command-bar {
  position: fixed; top: 0; left: 180px; right: 0; z-index: 29; height: 66px;
  display: grid; grid-template-columns: minmax(190px,1fr) minmax(280px,420px) minmax(190px,1fr) 40px;
  align-items: center; gap: 14px; padding: 0 20px;
  border-bottom: 1px solid var(--glass-line); background: rgba(13, 20, 26, .9);
  box-shadow: 0 12px 40px rgba(0,0,0,.15); backdrop-filter: blur(28px) saturate(135%);
}
.command-context { display: grid; gap: 2px; }
.command-context span { color: #626d77; font-size: 8px; }
.command-context strong { color: #e8ebed; font-size: 12px; font-weight: 600; }
.command-search {
  height: 38px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px;
  padding: 0 10px; border: 1px solid var(--glass-line); border-radius: 8px;
  background: rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.command-search svg { width: 15px; color: #69737d; }
.command-search input { min-width: 0; border: 0; outline: 0; color: #dce0e3; background: transparent; font: inherit; font-size: 11px; }
.command-search input::placeholder { color: #59636d; }
.command-search kbd { padding: 3px 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; color: #636d77; font-size: 9px; }
.command-status { justify-self: end; display: flex; align-items: center; gap: 7px; color: #abb2b9; font-size: 10px; }
.api-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--glass-green); box-shadow: 0 0 12px rgba(86,212,156,.75); }
.api-live-dot { background: var(--glass-gold); box-shadow: 0 0 12px rgba(231,191,122,.55); }
.api-live-dot.offline { background: #747e87; box-shadow: none; }
.icon-command { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--glass-line); border-radius: 8px; color: #aab2ba; background: rgba(255,255,255,.03); cursor: pointer; }
.icon-command:hover { color: #fff; border-color: var(--glass-line-bright); background: rgba(255,255,255,.07); }
.icon-command svg { width: 16px; }

.entry-panel, .workbench-page, .morning-generator-page, .skill-page, .report-page {
  color: var(--glass-text); background: rgba(7, 12, 17, .5);
}
.entry-panel { min-height: 100vh; padding: 136px 7vw 100px; }
.entry-panel h1 { color: #f3f5f6; }
.entry-panel h1 em, .micro-label, .skill-kicker { color: var(--glass-gold); }
.entry-copy p, .workbench-intro p, .skill-page-head p, .helper-copy { color: var(--glass-muted); }
.entry-form, .skill-form, .skill-output, .creator-card, .workflow-card, .workbench-result, .mode-switch, .generator-frame {
  border: 1px solid var(--glass-line);
  background: var(--glass-panel);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 24px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(26px) saturate(125%);
}
.entry-form input, .skill-form textarea, .skill-form input, .skill-form select,
.creator-card textarea, .creator-card select, .result-editor, #article-editor {
  color: #edf0f2; border-color: var(--glass-line); background: rgba(5,10,14,.42);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.16);
}
input::placeholder, textarea::placeholder { color: #59636c !important; }
.entry-form input:focus, .skill-form input:focus, .skill-form select:focus, .skill-form textarea:focus {
  border-color: rgba(231,191,122,.55); box-shadow: 0 0 0 3px rgba(231,191,122,.09);
}
.entry-form button, .primary-action, .skill-primary {
  color: #17130d; border-color: #f0cc8a;
  background: #e4bd79;
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 10px 30px rgba(211,165,94,.15);
}
.entry-form button:hover, .primary-action:hover, .skill-primary:hover { background: #efca88; }
.workbench-page, .morning-generator-page, .skill-page { padding: 100px 28px 70px; }
.workbench-intro, .skill-page-head { width: min(1380px,100%); margin-bottom: 20px; }
.workbench-intro h1, .skill-page-head h1 { color: #f2f4f5; font-size: 28px; }
.skill-workspace { width: min(1380px,100%); grid-template-columns: minmax(300px, 360px) minmax(0,1fr); gap: 10px; }
.skill-form, .skill-output { border-radius: 9px; }
.skill-form { top: 82px; padding: 18px; }
.skill-output { min-height: 680px; padding: 18px; }
.skill-form > label, .skill-form .field-grid label, .creator-card > label { color: #adb4ba; }
.form-section-title strong, .output-empty h2, .output-head h2, .result-section-title strong { color: #eef0f2; }
.form-section-title small, .output-empty, .output-head p, .result-section-title span { color: var(--glass-muted); }
.form-section-title > span { color: var(--glass-gold); background: rgba(231,191,122,.09); }
.skill-badge { color: #17130d; background: #dfb875 !important; }
.field-grid { gap: 9px; margin-top: 11px; }
.field-wide { margin-top: 11px; }
.output-empty > span { color: #9ca5ad; background: var(--glass-soft); }
.output-head, .result-section { border-color: var(--glass-line); }
.title-option, .creator-output-card, .suggestion-list article { color: #dce0e3; border-color: var(--glass-line); background: rgba(255,255,255,.025); }
.title-option.selected { border-color: rgba(231,191,122,.4); background: rgba(231,191,122,.07); }
.creator-card-copy p, .creator-card-copy small, .muted-copy { color: var(--glass-muted); }
.result-meta-grid > div, .plan-summary > div, .ledger-list > div { background: var(--glass-soft); }
.card-image-slot { color: #78828b; background: rgba(255,255,255,.035); }

.workbench-page { max-width: none; }
.workbench-grid { grid-template-columns: minmax(0,1fr) 320px; gap: 10px; }
.creator-card, .workflow-card, .workbench-result { border-radius: 9px; }
.mode-option { color: #8e979f; }
.mode-option.active { color: #f0d09a; background: rgba(231,191,122,.09); box-shadow: inset 0 0 0 1px rgba(231,191,122,.2); }
.creator-options label, .card-topline, .workflow-note, .editor-head, .result-foot { color: var(--glass-muted); }
.status-pill, .result-status { color: #ddbd83; background: rgba(231,191,122,.1); }
.secondary-action, .text-action, .copy-result { color: #d3b57e; border-color: var(--glass-line); background: rgba(255,255,255,.03); }
.workflow-step, .topic-item, .editor-wrap { border-color: var(--glass-line); }
.workflow-step.active { border-color: rgba(231,191,122,.3); background: rgba(231,191,122,.07); }

.morning-generator-page { padding: 76px 10px 10px; }
.morning-generator-page .workbench-intro { display: none; }
.generator-frame { width: 100%; min-height: calc(100vh - 86px); border-radius: 9px; filter: none; }
.api-settings-modal { background: rgba(0,4,7,.7); }
.api-settings-card { color: var(--glass-text); border-color: var(--glass-line-bright); background: rgba(18,25,31,.96); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 38px 110px rgba(0,0,0,.62); }
.api-config-group { border-color: var(--glass-line); background: rgba(255,255,255,.025); }
.api-settings-head h2, .config-group-head h3 { color: #f1f3f4; }
.api-settings-head p, .config-group-head p, .api-config-group > label:not(.api-check), .api-settings-note { color: var(--glass-muted); }
.api-config-group input[type="password"], .api-config-group input[type="url"], .api-config-group input[type="text"] { color: #eef0f2; border-color: var(--glass-line); background: rgba(4,8,12,.55); }
.test-provider { color: #c3c9ce; border-color: var(--glass-line); background: var(--glass-soft); }
.settings-menu { color: #e9ecee; border-color: var(--glass-line); background: rgba(20,27,33,.98); box-shadow: 0 20px 50px rgba(0,0,0,.42); }
.settings-menu button { color: #e9ecee; }

.report-page, .report-hero, .signal-section, .lenses-section, .evidence-route, .benchmark-section, .takeaways-section { background: transparent; }
.report-hero, .signal-grid > article, .profile-strip, .lens-card, .content-evidence, .route-panel, .benchmark-list, .takeaway-column {
  color: var(--glass-text); border-color: var(--glass-line); background: var(--glass-panel); box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.section-title span, .profile-strip span, .evidence-footnote { color: var(--glass-muted); }
footer { color: #59636d; border-color: var(--glass-line); background: transparent; }

@media (prefers-reduced-transparency: reduce) {
  .report-nav.app-sidebar, .command-bar, .entry-form, .skill-form, .skill-output,
  .creator-card, .workflow-card, .workbench-result, .mode-switch, .generator-frame,
  .api-settings-card { background: #141c23; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 1040px) {
  .command-bar { grid-template-columns: 1fr minmax(220px,360px) auto 40px; }
  .command-context span { display: none; }
}
@media (max-width: 760px) {
  .app-shell { padding-top: 0; }
  .app-shell > section, .app-shell > main, .app-shell > footer { width: 100%; margin-left: 0; }
  .report-nav.app-sidebar { height: 58px; background: #090f14; border-color: var(--glass-line); backdrop-filter: none; }
  .command-bar { top: 58px; left: 0; height: 52px; padding: 0 12px; grid-template-columns: 1fr auto 38px; }
  .command-search { display: none; }
  .command-status span:last-child { display: none; }
  .nav-links { border-color: var(--glass-line); background: rgba(8,14,19,.96); }
  .nav-links a.active { color: var(--glass-gold); background: rgba(231,191,122,.08); }
  .entry-panel { padding-top: 82px; }
  .workbench-page, .morning-generator-page, .skill-page { padding-top: 70px; }
  .brand-copy strong { max-width: 128px; font-size: 12px; }
  .skill-page-head { display: block; width: 100%; }
  .skill-page-head > div, .workbench-intro { min-width: 0; width: 100%; }
  .skill-page-head .skill-badge { display: none; }
  .workbench-intro h1, .skill-page-head h1 { width: 100%; max-width: 100%; font-size: 25px; white-space: normal !important; overflow-wrap: anywhere; word-break: break-all; }
  .workbench-intro p, .skill-page-head p { width: 100%; max-width: 100%; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
}

/* Final cascade guard: this file contains legacy theme layers above. */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid #e7bf7a !important;
  outline-offset: 3px;
}

:where(.account-modal, .api-settings-modal) {
  overscroll-behavior: contain;
}

button, a {
  touch-action: manipulation;
}