:root {
  --ink: #251e1a;
  --paper: #fffaf0;
  --cream: #fff1d8;
  --yellow: #ffd84d;
  --yellow-deep: #f6bb2d;
  --blue: #88a8ff;
  --teal: #5cc8bd;
  --purple: #9a7cf4;
  --coral: #ff7c78;
  --pink: #ff8db4;
  --green: #73c95c;
  --muted: #6f675f;
  --line: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --small-shadow: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; min-width: 320px; background: #dce7ff; color: var(--ink); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif; line-height: 1.55; }
button, input, summary { font: inherit; }
button { color: inherit; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 4px solid #1c64f2; outline-offset: 3px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); grid-template-rows: 76px 1fr; }
.topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 244px 1fr auto; align-items: center; gap: 18px; min-height: 76px; padding: 10px 24px 10px 16px; border-bottom: var(--line); background: var(--paper); }
.brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: 900 1.34rem/1 ui-monospace, monospace; cursor: pointer; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; padding: 3px; background: #d9ecff; border: 3px solid #102d68; box-shadow: 3px 3px 0 #102d68; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.project-chip { justify-self: start; display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 12px; border: 2px solid var(--ink); background: #fff; border-radius: 99px; font-weight: 800; }
.project-dot { width: 10px; height: 10px; background: var(--green); border: 2px solid var(--ink); border-radius: 50%; }
.platforms { color: var(--muted); font-size: .78rem; font-weight: 800; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.demo-label { color: var(--muted); font-size: .78rem; font-weight: 800; }
.icon-button, .avatar-button { position: relative; width: 40px; height: 40px; border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); font-weight: 900; cursor: pointer; }
.avatar-button { border-radius: 50%; background: var(--purple); color: #fff; }
.notification-dot { position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: var(--coral); }.notification-dot[hidden] { display: none; }

.sidebar { position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; flex-direction: column; gap: 20px; padding: 24px 16px; border-right: var(--line); background: #c9d9fb; background-image: linear-gradient(#fff7 1px, transparent 1px), linear-gradient(90deg, #fff7 1px, transparent 1px); background-size: 28px 28px; }
.main-nav { display: grid; gap: 8px; }
.nav-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid transparent; background: transparent; text-align: left; font-weight: 800; cursor: pointer; }
.nav-item:hover { background: #ffffff99; border-color: var(--ink); }
.nav-item.is-active { background: var(--paper); border: var(--line); box-shadow: 4px 4px 0 var(--ink); }
.nav-pixel { font-family: ui-monospace, monospace; font-size: 1.2rem; }
.nav-badge { padding: 2px 5px; background: var(--pink); border: 1px solid var(--ink); font: 900 .62rem/1 ui-monospace, monospace; }
.count-badge { min-width: 24px; padding: 2px 5px; border: 1px solid var(--ink); border-radius: 99px; background: #fff; font-size: .72rem; text-align: center; }
.sidebar-card { margin-top: auto; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; padding: 12px; border: var(--line); background: var(--paper); box-shadow: var(--small-shadow); }
.sidebar-card p { margin: 3px 0 0; font-size: .76rem; color: var(--muted); }
.mini-sprite { width: 56px; aspect-ratio: 1; background-image: url('./assets/plarrybook-field-guide-v3.png'); background-size: 400% 300%; image-rendering: pixelated; }
.settings-link { border: 0; background: none; padding: 8px; text-align: left; font-weight: 800; cursor: pointer; }

.content { min-width: 0; padding: 42px clamp(22px, 4vw, 58px) 80px; background: var(--paper); }
.view { display: none; max-width: 1220px; margin: 0 auto; }
.view.is-active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.compact-heading { margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 4px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; letter-spacing: -.05em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 1rem; }
.eyebrow { display: block; color: #605750; font: 900 .74rem/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.primary-button, .secondary-button { min-height: 44px; padding: 9px 15px; border: var(--line); background: var(--yellow); box-shadow: var(--small-shadow); font-weight: 900; cursor: pointer; }
.primary-button:active, .secondary-button:active, .icon-button:active, .folder-card:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.secondary-button { background: #fff; }
.secondary-button.full { width: 100%; }
.text-button { border: 0; padding: 4px 0; background: none; text-decoration: underline; text-underline-offset: 4px; font-weight: 800; cursor: pointer; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 22px; }
.window-card { border: var(--line); background: #fff; box-shadow: var(--shadow); }
.window-bar { min-height: 38px; display: flex; justify-content: space-between; align-items: center; padding: 6px 11px; border-bottom: var(--line); background: var(--teal); font: 900 .8rem/1 ui-monospace, monospace; }
.window-controls { letter-spacing: .15em; }
.window-body { padding: 22px; }
.verdict-line { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.verdict-line strong { font-size: clamp(1.1rem, 2.3vw, 1.55rem); }
.pixel-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 7px; border: 2px solid var(--ink); background: var(--yellow); font: 900 .68rem/1 ui-monospace, monospace; box-shadow: 2px 2px 0 var(--ink); }
.pixel-badge.positive { background: #a7e695; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.metric-row div { padding: 12px; border: 2px solid var(--ink); background: var(--paper); }
.metric-row span, .metric-row em { display: block; font-size: .76rem; color: var(--muted); font-style: normal; }
.metric-row strong { display: block; margin: 2px 0; font-size: 1.45rem; }
.metric-row em { color: #246b35; font-weight: 900; }
.companion-card { min-height: 270px; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px 10px 20px; border: var(--line); background: var(--yellow); box-shadow: var(--shadow); overflow: hidden; }
.speech-bubble { align-self: start; position: relative; padding: 16px; border: var(--line); border-radius: 12px; background: #fff; }
.speech-bubble::after { content: ""; position: absolute; right: 44px; bottom: -14px; width: 22px; height: 22px; background: #fff; border-right: var(--line); border-bottom: var(--line); transform: rotate(45deg); }
.speech-bubble strong { display: block; margin: 7px 0; font-size: 1rem; line-height: 1.45; }
.speech-bubble p { margin: 0; color: var(--muted); font-size: .84rem; }
.companion-wrap { position: relative; z-index: 1; align-self: flex-end; text-align: center; font-weight: 900; }
.companion { width: 112px; aspect-ratio: 1; margin: 0 auto; background-image: url('./assets/plarrybook-field-guide-v3.png'); background-size: 400% 300%; image-rendering: pixelated; }

.section-block { margin-top: 38px; }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-title-row h2 { margin: 2px 0 0; font-size: 1.55rem; }
.section-note { color: var(--muted); font-size: .83rem; }
.folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.folder-card { position: relative; min-height: 158px; display: grid; grid-template-columns: auto 1fr; align-content: end; gap: 4px 10px; padding: 22px 16px 16px; border: var(--line); background: #fff; box-shadow: var(--small-shadow); text-align: left; cursor: pointer; }
.folder-tab { position: absolute; left: 12px; top: -17px; width: 45%; height: 20px; border: var(--line); border-bottom: 0; background: var(--folder-color); }
.folder-icon { width: 38px; height: 38px; grid-row: 1 / 3; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--folder-color); font-size: 1.2rem; }
.folder-count { align-self: center; color: var(--muted); font-size: .74rem; }
.folder-card strong { font-size: 1rem; }
.folder-card small { grid-column: 1 / -1; margin-top: 7px; color: var(--muted); }
.folder-blue { --folder-color: var(--blue); }.folder-purple { --folder-color: var(--purple); }.folder-yellow { --folder-color: var(--yellow); }.folder-pink { --folder-color: var(--pink); }
.two-column-section { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.paper-card { padding: 22px; border: var(--line); background: #fff; box-shadow: var(--small-shadow); }
.paper-heading { display: flex; align-items: center; gap: 12px; }
.paper-heading h2 { margin: 2px 0 0; font-size: 1.2rem; }
.paper-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--yellow); font: 900 1rem ui-monospace, monospace; }
.large-copy { min-height: 58px; margin: 18px 0; font-size: 1.05rem; font-weight: 800; }
.post-preview { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 13px; padding-top: 14px; border-top: 2px dashed #aaa29a; }
.post-preview p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }
.post-thumb { width: 76px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--purple); font: 900 .72rem ui-monospace, monospace; }
.progress-label { display: flex; justify-content: space-between; font-size: .8rem; }
.progress-track { height: 14px; overflow: hidden; border: 2px solid var(--ink); background: #fff; }
.progress-track span { display: block; height: 100%; background: var(--green); }
.mission-preview .secondary-button { margin-top: 16px; }

.heading-actions { display: flex; gap: 10px; align-items: center; }
.report-archive-button { display: block; margin-bottom: 18px; }
.status-chip { display: inline-flex; align-items: center; padding: 4px 8px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.status-chip.success { background: #a7e695; }.status-chip.warning { background: #ffd2a1; }.status-chip.normal { background: #cddaff; }.status-chip.muted { background: #e5e0da; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.metric-card { min-height: 150px; padding: 15px; border: var(--line); box-shadow: var(--small-shadow); background: #fff; }
.metric-card > span, .metric-card > em { display: block; font-size: .78rem; font-style: normal; font-weight: 800; }
.metric-card > strong { display: block; margin: 5px 0 0; font: 900 1.8rem/1.2 ui-monospace, monospace; }
.metric-card > em { color: #246b35; }
.metric-card.blue { border-top: 10px solid var(--blue); }.metric-card.purple { border-top: 10px solid var(--purple); }.metric-card.yellow { border-top: 10px solid var(--yellow); }.metric-card.coral { border-top: 10px solid var(--coral); }
.mini-bars { height: 35px; display: flex; align-items: end; gap: 4px; margin-top: 9px; }
.mini-bars i { flex: 1; height: 30%; background: currentColor; opacity: .65; }
.mini-bars i:nth-child(2) { height: 50%; }.mini-bars i:nth-child(3) { height: 42%; }.mini-bars i:nth-child(4) { height: 74%; }.mini-bars i:nth-child(5) { height: 65%; }.mini-bars i:nth-child(6) { height: 90%; }.mini-bars i:nth-child(7) { height: 78%; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 22px; }
.chart-card .window-bar { background: var(--blue); }
.chart-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: .74rem; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid var(--ink); }
.legend-save { background: var(--purple); }.legend-share { background: var(--yellow); }
.bar-chart { height: 220px; display: flex; justify-content: space-around; align-items: stretch; gap: 10px; padding-top: 18px; border-bottom: 2px solid var(--ink); }
.bar-group { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 7px; text-align: center; }
.bars { display: flex; justify-content: center; align-items: end; gap: 4px; }
.bars i { width: 24px; border: 2px solid var(--ink); border-bottom: 0; }
.bars .save { background: var(--purple); }.bars .share { background: var(--yellow); }
.bar-group small { font-weight: 800; }
.guide-card { padding: 22px; border: var(--line); background: var(--cream); box-shadow: var(--shadow); }
.guide-card h2 { margin: 16px 0; }
.guide-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.guide-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.guide-list p { margin: 0; font-size: .88rem; }.guide-list strong { display: block; }
.list-marker { width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--ink); font-weight: 900; }.list-marker.good { background: #a7e695; }.list-marker.warn { background: #ffd2a1; }.list-marker.next { background: var(--blue); }
.table-section { margin-top: 32px; }
.table-wrap { overflow-x: auto; border: var(--line); box-shadow: var(--small-shadow); }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 13px 15px; border-bottom: 2px solid var(--ink); text-align: left; white-space: nowrap; }
th { background: var(--cream); font: 900 .74rem ui-monospace, monospace; }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; color: var(--muted); }

.trend-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: var(--line); background: var(--purple); color: #fff; box-shadow: var(--small-shadow); }
.trend-summary > div:first-child { display: flex; align-items: center; gap: 14px; }.trend-summary p { margin: 2px 0 0; }.radar-icon { font-size: 2rem; }
.trend-scale { display: flex; gap: 5px; }.trend-scale span { width: 26px; height: 13px; border: 2px solid #fff; }.trend-scale .active { background: var(--yellow); }
.trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.trend-card { padding: 18px; border: var(--line); background: #fff; box-shadow: var(--small-shadow); }.trend-card.recommended { background: #fff9d8; }
.trend-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.trend-number { font: 900 .72rem ui-monospace, monospace; }
.trend-art { min-height: 150px; display: grid; place-items: center; margin: 14px 0; border: 2px solid var(--ink); background-image: linear-gradient(#fff7 1px, transparent 1px), linear-gradient(90deg, #fff7 1px, transparent 1px); background-size: 20px 20px; }
.trend-art span { padding: 10px; border: var(--line); background: var(--paper); box-shadow: var(--small-shadow); font: 900 1.4rem ui-monospace, monospace; }.trend-a { background-color: var(--yellow); }.trend-b { background-color: var(--coral); }.trend-c { background-color: var(--teal); }
.trend-card h2 { min-height: 58px; margin: 0 0 8px; font-size: 1.12rem; }.trend-card > p { min-height: 66px; color: var(--muted); font-size: .86rem; }
.trend-card dl { margin: 16px 0; border-top: 2px dashed #bdb4aa; }.trend-card dl div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #d8d0c7; font-size: .78rem; }.trend-card dt { color: var(--muted); }.trend-card dd { margin: 0; font-weight: 900; }

.level-chip { padding: 9px 12px; border: var(--line); background: var(--yellow); box-shadow: var(--small-shadow); font-weight: 900; }
.mission-list { display: grid; gap: 18px; }
.mission-card { display: grid; grid-template-columns: 58px 1fr; border: var(--line); background: #fff; box-shadow: var(--small-shadow); }.mission-card.active { border-left: 11px solid var(--yellow); }
.mission-check { display: grid; place-items: start center; padding-top: 24px; border-right: 2px solid var(--ink); background: var(--cream); }.mission-check input { position: absolute; opacity: 0; }.mission-check label { width: 28px; height: 28px; border: var(--line); background: #fff; cursor: pointer; }.mission-check input:checked + label { background: var(--green); }.mission-check input:checked + label span::after { content: "✓"; display: grid; place-items: center; font-weight: 900; }
.mission-main { padding: 20px; }.mission-main header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.mission-level { font: 900 .72rem ui-monospace, monospace; }.mission-main h2 { margin: 10px 0 4px; }.mission-main > p { margin: 0; color: var(--muted); }
.mission-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }.mission-meta span { padding: 9px; border: 2px solid var(--ink); background: var(--paper); font-weight: 800; }.mission-meta small { display: block; color: var(--muted); font-weight: 500; }
details { margin-top: 16px; } summary { cursor: pointer; font-weight: 900; }.detail-box { margin-top: 10px; padding: 14px; border: 2px solid var(--ink); background: var(--cream); }.detail-box p { margin: 2px 0 12px; }

.collection-progress { min-width: 112px; padding: 10px 14px; border: var(--line); background: var(--yellow); box-shadow: var(--small-shadow); text-align: center; }.collection-progress strong, .collection-progress span { display: block; }.collection-progress strong { font: 900 1.4rem ui-monospace, monospace; }.collection-progress span { font-size: .72rem; }
.collection-banner { display: grid; grid-template-columns: 140px minmax(220px, 1fr) minmax(220px, .7fr); align-items: center; gap: 22px; padding: 18px 26px; border: var(--line); background: var(--yellow); box-shadow: var(--shadow); }.collection-banner h2 { margin: 8px 0 0; }.collection-banner p { margin: 3px 0 0; }.next-unlock span, .next-unlock strong { display: block; }.next-unlock strong { margin: 4px 0 9px; }
.collection-filters { display: flex; gap: 8px; margin: 30px 0 16px; }.filter-button { padding: 7px 13px; border: 2px solid var(--ink); background: #fff; font-weight: 800; cursor: pointer; }.filter-button.is-active { background: var(--ink); color: #fff; }
.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.animal-card { position: relative; padding: 13px; overflow: hidden; border: var(--line); background: #fff; box-shadow: var(--small-shadow); text-align: center; }.animal-number { display: block; text-align: left; color: var(--muted); font: 900 .68rem ui-monospace, monospace; }.animal-sprite { width: 100%; aspect-ratio: 1; background-image: url('./assets/plarrybook-field-guide-v3.png'); background-size: 400% 300%; background-repeat: no-repeat; image-rendering: pixelated; }.animal-card h2 { margin: 3px 0 0; font-size: 1.1rem; }.animal-card p { margin: 0; color: var(--muted); font-size: .78rem; }.unlock-note { display: block; min-height: 36px; margin-top: 10px; padding-top: 7px; border-top: 1px dashed #aaa; font-size: .73rem; }.animal-card.locked .animal-sprite { filter: grayscale(1) brightness(.22); opacity: .28; }.animal-card.locked::after { content: "?"; position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper); font: 900 1rem ui-monospace, monospace; box-shadow: 3px 3px 0 var(--ink); }.animal-card.selected { background: #fff9d8; outline: 4px solid var(--yellow); outline-offset: -7px; }
.favorite-button { width: 100%; margin-top: 9px; padding: 7px; border: 2px solid var(--ink); background: var(--paper); font-size: .72rem; font-weight: 900; cursor: pointer; }.animal-card.selected .favorite-button { background: var(--yellow); }
.sprite-1 { background-position: 0% 0%; }.sprite-2 { background-position: 33.333% 0%; }.sprite-3 { background-position: 66.666% 0%; }.sprite-4 { background-position: 100% 0%; }.sprite-5 { background-position: 0% 50%; }.sprite-6 { background-position: 33.333% 50%; }.sprite-7 { background-position: 66.666% 50%; }.sprite-8 { background-position: 100% 50%; }.sprite-9 { background-position: 0% 100%; }.sprite-10 { background-position: 33.333% 100%; }.sprite-11 { background-position: 66.666% 100%; }.sprite-12 { background-position: 100% 100%; }

.pixel-dialog { width: min(580px, calc(100vw - 32px)); padding: 0; border: var(--line); background: var(--paper); box-shadow: 10px 10px 0 var(--ink); }.pixel-dialog::backdrop { background: #1a16308f; backdrop-filter: blur(2px); }.dialog-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: var(--line); background: var(--teal); font: 900 .8rem ui-monospace, monospace; }.dialog-bar button { width: 30px; height: 30px; border: 2px solid var(--ink); background: #fff; font-weight: 900; cursor: pointer; }.dialog-body { padding: 24px; }.dialog-body h2 { margin-top: 0; }.callout { margin-top: 16px; padding: 13px; border-left: 7px solid var(--yellow); background: var(--cream); font-size: .85rem; }.dialog-action { margin-top: 18px; }.wide-dialog { width: min(760px, calc(100vw - 32px)); }
.social-login-button { width: 100%; min-height: 50px; margin-top: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border: var(--line); color: var(--ink); font: 900 .9rem/1.2 inherit; text-decoration: none; box-shadow: var(--small-shadow); cursor: pointer; }.social-login-button span { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff; font: 900 .78rem ui-monospace, monospace; }.google-login { background: #fff; }.social-login-button:disabled, .social-login-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; pointer-events: none; }.account-details { margin: 18px 0 0; border: var(--line); background: #fff; }.account-details div { display: grid; grid-template-columns: 125px 1fr; gap: 12px; padding: 11px 13px; border-bottom: 2px solid var(--ink); }.account-details div:last-child { border-bottom: 0; }.account-details dt { color: var(--muted); font-weight: 800; }.account-details dd { margin: 0; font-weight: 900; overflow-wrap: anywhere; }.auth-error { margin: 16px 0 0; padding: 11px 13px; border: 2px solid var(--ink); background: #ffd5df; font-weight: 800; }
.connection-panel { margin-top: 18px; border: var(--line); background: var(--cream); }.connection-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; border-bottom: 2px solid var(--ink); }.connection-row:last-child { border-bottom: 0; }.connection-row strong, .connection-row small { display: block; }.connection-row small { margin-top: 3px; color: var(--muted); }.connection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.compact-action { min-width: 118px; padding: 9px 12px; text-align: center; text-decoration: none; }.compact-action[aria-disabled="true"], .compact-action:disabled { opacity: .5; pointer-events: none; box-shadow: none; }
.report-archive-list { display: grid; gap: 12px; margin-top: 20px; }.archive-report { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 2px solid var(--ink); background: #fff; text-align: left; cursor: pointer; }.archive-report:hover { background: var(--cream); }.archive-report strong, .archive-report small { display: block; }.archive-report small { margin-top: 4px; color: var(--muted); }.archive-report .status-chip { justify-self: end; }
.notification-list { display: grid; gap: 12px; margin-top: 20px; }.notification-item { width: 100%; display: grid; gap: 5px; padding: 14px; border: 2px solid var(--ink); background: #fff; text-align: left; cursor: pointer; }.notification-item.unread { background: #eaf4ff; box-shadow: var(--small-shadow); }.notification-item:disabled { opacity: .75; cursor: wait; }.notification-meta { color: var(--muted); font: 900 .7rem/1.3 ui-monospace, monospace; letter-spacing: .04em; }.notification-item strong { font-size: 1rem; }.notification-item small, .notification-empty { color: var(--muted); }
.schedule-list { display: grid; gap: 10px; margin-top: 20px; }.schedule-row { display: grid; grid-template-columns: 110px minmax(210px, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--ink); background: #fff; }.schedule-row label { display: flex; align-items: center; gap: 8px; }.schedule-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--green); }.schedule-row select, .schedule-row input[type="number"] { min-height: 40px; padding: 6px 9px; border: 2px solid var(--ink); background: var(--paper); font: inherit; }.schedule-row > span { color: var(--muted); font-weight: 800; }.schedule-status { margin: 14px 0 0; color: var(--muted); font-weight: 800; }


.youtube-report-section { margin-top: 32px; }
.youtube-summary-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr); gap: 22px; }
.youtube-summary-card .paper-icon { background: var(--coral); }
.youtube-video-card .paper-icon { background: var(--blue); }
.youtube-metrics { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.youtube-video-list { display: grid; gap: 10px; margin-top: 16px; }
.youtube-video-list > p { margin: 0; color: var(--muted); }
.youtube-video-item { padding: 12px; border: 2px solid var(--ink); background: var(--paper); }
.youtube-video-item strong, .youtube-video-item small { display: block; }
.youtube-video-item a { color: inherit; }
.youtube-video-item small { margin-top: 5px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
@media (max-width: 820px) { .youtube-summary-grid { grid-template-columns: 1fr; } .youtube-metrics { grid-template-columns: repeat(2, 1fr); } }


.youtube-analytics-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.youtube-analytics-strip div { padding: 9px; border: 2px solid var(--ink); background: #fff; }
.youtube-analytics-strip span, .youtube-analytics-strip strong { display: block; }
.youtube-analytics-strip span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.youtube-analytics-strip strong { margin-top: 3px; font: 900 .98rem/1.2 ui-monospace, monospace; }
.youtube-analytics-note { margin: 12px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.youtube-strategy-box { margin-top: 12px; padding: 10px 12px; border: 2px solid var(--ink); background: #e8f3ff; box-shadow: 3px 3px 0 var(--ink); } .youtube-strategy-box[hidden] { display: none; } .youtube-strategy-box strong { display: block; margin-bottom: 5px; } .youtube-strategy-box p { margin: 3px 0; color: var(--ink); font-size: .8rem; line-height: 1.5; }
.youtube-traffic-box { margin-top: 16px; padding-top: 12px; border-top: 2px dashed #aaa29a; }
.youtube-traffic-box strong { display: block; margin-bottom: 8px; }
.youtube-traffic-box p { margin: 4px 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
@media (max-width: 560px) { .youtube-analytics-strip { grid-template-columns: 1fr; } }

@media (max-width: 1050px) {
  .folder-grid, .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .trend-grid { grid-template-columns: 1fr; }
  .trend-card h2, .trend-card > p { min-height: 0; }
}
@media (max-width: 820px) {
  .app-shell { display: block; padding-bottom: 72px; }
  .topbar { grid-template-columns: 1fr auto; padding: 10px 14px; }
  .project-chip { display: none; }.demo-label { display: none; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; width: auto; height: 68px; padding: 7px 8px; border: 0; border-top: var(--line); background: var(--paper); }
  .main-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
  .nav-item { min-height: 50px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 3px; border-width: 0; text-align: center; font-size: .66rem; }
  .nav-item.is-active { border: 2px solid var(--ink); box-shadow: none; }.nav-pixel { font-size: 1rem; }.nav-badge, .count-badge, .sidebar-card, .settings-link { display: none; }
  .content { padding: 28px 18px 54px; }
  .page-heading { align-items: flex-start; flex-direction: column; }.page-heading h1 { font-size: 2.2rem; }
  .home-grid, .report-grid, .two-column-section { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-banner { grid-template-columns: 110px 1fr; padding: 14px; }.collection-banner .companion { width: 110px; }.next-unlock { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .brand { font-size: 1.02rem; }.brand-mark { width: 36px; height: 36px; }.top-actions { gap: 7px; }.icon-button, .avatar-button { width: 36px; height: 36px; }
  .page-heading .primary-button, .page-heading .secondary-button { width: 100%; }
  .folder-grid, .collection-grid { grid-template-columns: 1fr; }.folder-card { min-height: 132px; }
  .companion { width: 104px; }
  .speech-bubble::after { display: none; }.metric-row { grid-template-columns: 1fr; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.metric-card { min-height: 132px; }.metric-card > strong { font-size: 1.35rem; }
  .bar-chart { height: 190px; }.bars i { width: 16px; }.bar-group small { font-size: .66rem; }
  .schedule-row { grid-template-columns: 1fr; }.schedule-row > span { font-size: .8rem; }
  .trend-summary { align-items: flex-start; flex-direction: column; }.mission-card { grid-template-columns: 44px 1fr; }.mission-main { padding: 15px; }.mission-meta { grid-template-columns: 1fr; }.collection-banner { grid-template-columns: 90px 1fr; }.collection-banner .companion { width: 90px; }.collection-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.animal-card { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

.account-danger-zone { margin-top: 18px; padding: 14px; border: var(--line); background: #fff5ef; }
.account-danger-zone strong { display: block; margin-bottom: 6px; }
.account-danger-zone p { margin: 0 0 10px; color: var(--muted); }

.policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.policy-grid article { border: var(--line); background: #fff; padding: 13px; box-shadow: var(--small-shadow); }
.policy-grid h3 { margin: 0 0 8px; font-size: 1rem; }
.policy-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .policy-grid { grid-template-columns: 1fr; } }

.ops-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.ops-list { display: grid; gap: 10px; }
.ops-item { border: 2px solid var(--ink); background: #fff; padding: 12px; box-shadow: var(--small-shadow); }
.ops-item strong, .ops-item small { display: block; }
.ops-item small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.ops-checklist { margin: 0; padding-left: 22px; line-height: 1.9; }
@media (max-width: 1050px) { .ops-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ops-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

.onboarding-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.onboarding-actions { margin-top: 14px; justify-content: flex-start; }
.flow-next-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 13px; border: var(--line); background: var(--cream); box-shadow: var(--small-shadow); }
.flow-next-card strong, .flow-next-card small { display: block; }
.flow-next-card small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.ops-item.done { background: #edffe9; }
.ops-item.waiting { background: #fff9df; }
.ops-item.blocked { background: #fff0f0; }
@media (max-width: 1050px) { .onboarding-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .onboarding-grid { grid-template-columns: 1fr; } .onboarding-actions { flex-direction: column; } .onboarding-actions .secondary-button { width: 100%; } }

.qa-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.qa-card { border: var(--line); background: #fff; padding: 13px; box-shadow: var(--small-shadow); }
.qa-card.done { background: #edffe9; }
.qa-card.waiting { background: #fff9df; }
.qa-card.blocked { background: #fff0f0; }
.qa-card strong, .qa-card small { display: block; }
.qa-card small { margin-top: 5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 1050px) { .qa-route { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .qa-route { grid-template-columns: 1fr; } }

.feedback-field { display: grid; gap: 6px; margin-top: 12px; font-weight: 900; }
.feedback-field select, .feedback-field textarea { width: 100%; border: 2px solid var(--ink); background: #fff; padding: 10px; font: inherit; }
.feedback-field textarea { resize: vertical; line-height: 1.5; }
.launch-readiness-block .qa-card { min-height: 132px; }