/* SyncroOS visual contract, measured from the live studio on 2026-10-15.
   One scale for companion, wallet, dialogs and administration. */
:root {
  --surface-0: #0e0c12;
  --surface-1: #121016;
  --surface-2: #18151e;
  --surface-3: #211b2a;
  --stroke: rgba(255,255,255,.10);
  --accent: #a855f7;
  --accent-text: #c997ff;
  --ink: #f5f5f7;
  --muted: #9896a5;
  --paper: var(--surface-0);
  --bg: var(--surface-0);
  --panel: var(--surface-1);
  --line: var(--stroke);
  --coral: var(--accent);
  --soft: #241735;
  --text: var(--ink);
  --sans: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
  --serif: var(--sans);
  --studio-sidebar: 188px;
  color-scheme: dark;
}
html { background:var(--surface-0); scroll-padding-top:110px; }
body, body.admin-body {
  margin:0; background:var(--surface-0); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:400; line-height:1.47;
  letter-spacing:0; -webkit-font-smoothing:antialiased;
  --paper:var(--surface-0); --ink:#f5f5f7; --muted:#9896a5; --line:var(--stroke); --accent:#a855f7;
}
body::before { display:none; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { transition:background-color .16s,color .16s,border-color .16s; box-shadow:none; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent-text); outline-offset:3px;
}
h1,h2,h3 { font-family:var(--sans); color:var(--ink); letter-spacing:0; font-weight:600; }
.studio-strip { position:fixed; inset:0 0 auto; z-index:45; height:30px; display:flex; align-items:center; gap:7px; padding:0 12px; background:linear-gradient(180deg,#17141d,#131019); border-bottom:1px solid #a855f733; font-size:12px; }
.studio-strip img { width:15px; height:15px; object-fit:contain; }
.studio-strip b { font-size:12px; font-weight:700; }
.studio-strip small { font-size:8px; letter-spacing:.16em; color:var(--accent-text); }
.header, .admin-body .header {
  position:sticky; top:30px; z-index:30; min-height:64px;
  width:calc(100% - var(--studio-sidebar) - 56px); max-width:none;
  margin:30px 28px 0 calc(var(--studio-sidebar) + 28px); padding:10px 17px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--stroke); border-radius:24px;
  background:var(--surface-0); backdrop-filter:none; filter:none; transform:none;
}
.header .brand {
  position:fixed; left:0; top:30px; z-index:35; width:var(--studio-sidebar); min-width:0;
  height:104px; margin:0; padding:24px 20px 28px; border:0; border-right:1px solid var(--stroke);
  display:flex; align-items:center; background:#111016;
}
.header .brand-logo { display:block; width:147px; height:auto; object-fit:contain; }
.workspace-identity { display:flex; flex-direction:column; min-width:0; gap:2px; }
.workspace-identity small { color:#8f8c9a; font-size:13px; font-weight:600; }
.workspace-identity strong { font-size:15px; font-weight:600; line-height:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header > nav, .admin-menu {
  position:fixed; left:0; top:134px; bottom:0; width:var(--studio-sidebar); height:auto;
  margin:0; padding:6px 12px 60px; display:flex; flex-direction:column;
  justify-content:flex-start; gap:4px; overflow-y:auto; background:#111016;
  border:0; border-right:1px solid var(--stroke); border-radius:0;
}
.header > nav::after, .admin-menu::after {
  content:'•  SyncroOS'; position:fixed; left:0; bottom:0; width:var(--studio-sidebar);
  height:48px; padding:17px 22px; font-size:10px; color:#8f8c9a;
  background:#111016; border-right:1px solid var(--stroke); pointer-events:none; box-sizing:border-box;
}
.header .nav, .admin-menu button {
  min-height:38px; width:100%; margin:0; padding:8px 12px;
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  border:1px solid transparent; border-radius:8px; background:transparent;
  color:#8f8c9a; font-size:14px; font-weight:500; line-height:20px;
  text-align:left; white-space:normal;
}
.nav svg,.admin-menu svg { width:18px; height:18px; flex:none; stroke-width:1.7; }
.header .nav:hover,.admin-menu button:hover { color:var(--ink); background:#1b1821; }
.header .nav.active,.admin-menu button.active { color:var(--accent-text); background:#241735; border-color:transparent; font-weight:600; }
.header .nav::after { display:none; }
.header-right { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.balance-button,.profile-button,.secondary-button,.text-link,.round,.admin-main button {
  background:#1b1821; border:1px solid var(--stroke); color:#d7d3df;
  border-radius:12px; font-size:13px; line-height:20px; font-weight:500;
}
.balance-button { padding:8px 12px; min-height:36px; white-space:nowrap; }
.coin { display:inline-flex; color:var(--accent-text); margin-right:5px; }
.coin svg { width:15px; height:15px; }
.profile-button { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:50%; padding:8px; }
.profile-button svg { width:18px; height:18px; }
.mode-tag { color:var(--muted); font-size:12px; padding:4px 7px; background:var(--surface-2); border-radius:6px; }
.mode-tag:empty { display:none; }
#languageSelect { max-width:112px; min-height:36px; padding:7px 10px; font-size:12px; }
body:not(.admin-body) > main {
  width:calc(100% - var(--studio-sidebar)); max-width:1590px;
  margin:0 0 0 var(--studio-sidebar); padding:26px 28px 40px;
  min-height:calc(100dvh - 176px);
}
.wall-hero { padding:0 0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wall-hero > div { min-width:0; }
.eyebrow,.wall-hero .eyebrow { font-family:var(--sans); color:#8f8c9a; font-size:11px; font-weight:500; letter-spacing:.08em; gap:8px; }
.eyebrow::before { display:none; }
.live-dot { width:6px; height:6px; background:var(--accent); box-shadow:none; }
.wall-hero h1 { font-size:28px; line-height:1.35; font-weight:600; margin:8px 0 10px; letter-spacing:0; max-width:none; }
.wall-hero h1 span,.wall-hero h1 em { color:var(--ink); font-style:normal; }
.wall-hero p { color:var(--muted); font-size:14px; line-height:1.65; margin:0; max-width:680px; }
.wall-hero p.language-hint { color:#918d9d!important; font-size:12px!important; margin-top:4px; }
.trial-card {
  flex:none; min-width:225px; max-width:300px; padding:16px 18px; margin:0;
  border:1px solid var(--stroke); border-radius:16px; background:var(--surface-1); text-align:left;
}
.trial-card span { color:var(--muted); font-size:12px; display:block; }
.trial-card strong { color:var(--accent-text); font-size:17px; font-weight:600; line-height:1.5; display:block; margin:6px 0; }
.trial-card small { color:#918d9d; font-size:12px; }
.trial-card:hover { border-color:#a855f766; background:var(--surface-2); }
.wall-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--stroke); flex-wrap:wrap; }
.wall-tabs { display:flex; gap:4px; padding:3px; background:var(--surface-2); border:1px solid var(--stroke); border-radius:10px; }
.wall-tabs button { padding:7px 14px; min-height:34px; border:0; border-radius:7px; color:var(--muted); font-size:13px; line-height:20px; }
.wall-tabs button.selected { background:#30223e; color:#e5d4f8; }
.wall-tabs button::after { display:none; }
.filters { display:flex; gap:8px; margin:0; }
.filters select { min-width:120px; width:auto; max-width:190px; font-size:13px; padding:8px 10px; }
.girl-wall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.girl-tile { background:var(--surface-1); border:1px solid var(--stroke); border-radius:16px; overflow:hidden; box-shadow:none; transition:border-color .16s; }
.girl-tile:hover { border-color:#a855f780; transform:none; box-shadow:none; }
.tile-image { display:block; height:auto; aspect-ratio:3/4; background:var(--surface-2); }
.tile-image > img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.girl-tile:hover .tile-image > img { transform:none; }
.tile-image::after { inset:48% 0 0; background:linear-gradient(transparent,rgba(14,12,18,.9)); }
.ai-tag { left:12px; top:12px; padding:4px 7px; font-size:11px; line-height:16px; border-radius:6px; background:#121016b3; border:1px solid #ffffff26; color:#f5f5f7; }
.tile-heart { right:10px; top:10px; width:30px; height:30px; font-size:20px; color:#f5f5f7; background:#121016a3; }
.tile-caption { left:16px; right:16px; bottom:16px; }
.tile-caption h2 { font-size:20px; font-weight:600; line-height:1.4; margin:0 0 5px; color:#fff; letter-spacing:0; }
.tile-caption h2 small { font-size:13px; margin-left:7px; font-weight:400; color:#e0dce6; }
.tile-caption > span { color:#d7d3df; font-size:12px; line-height:18px; }
.tile-bottom { padding:14px; }
.tile-bottom p { font-size:13px; line-height:1.6; color:var(--muted); margin:0 0 12px; white-space:normal; height:42px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.primary-button,.video-button,.round.primary,.admin-body .admin-main button.primary-button {
  background:var(--accent); background-image:none; color:#fff; border:1px solid transparent;
  border-radius:12px; font-size:14px; line-height:20px; font-weight:600;
  padding:10px 16px; min-height:40px; box-shadow:0 0 20px #a855f71a;
}
.video-button { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; }
.video-button svg { width:17px; height:17px; }
.video-button > span:last-child { margin-left:0; }
.primary-button:hover,.video-button:hover,.round.primary:hover,.admin-body .admin-main button.primary-button:hover { background:#b76bf9; transform:none; color:#fff; }
.secondary-button,.text-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; min-height:38px; }
.secondary-button:hover,.text-link:hover,.balance-button:hover,.profile-button:hover,.admin-main button:hover { background:#27222e; color:#fff; border-color:#ffffff29; }
.wall-footnote { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:16px 0 24px; color:#918d9d; font-size:12px; line-height:1.6; }
.daily-banner { display:flex; gap:16px; align-items:center; padding:20px; margin:24px 0; background:var(--surface-1); border:1px solid var(--stroke); border-radius:16px; }
.banner-symbol { color:var(--accent-text); font-size:27px; }
.daily-banner h3 { font-size:15px; line-height:1.5; margin:0 0 4px; }
.daily-banner p { font-size:13px; color:var(--muted); line-height:1.65; margin:0; }
.daily-banner button { margin-left:auto; white-space:nowrap; }
.seo-content { max-width:none; margin:36px 0 0; padding-top:24px; border-top:1px solid var(--stroke); color:#918d9d; font-size:13px; line-height:1.8; }
.seo-content h2 { font-size:18px; font-weight:600; color:#d7d3df; margin:24px 0 10px; }
.seo-content summary { font-size:14px; color:#b8b4c3; }
.seo-content details { border-color:var(--stroke); }
.match-zone { width:100%; max-width:330px; margin:4px auto 24px; }
.match-zone .host-card { height:auto; aspect-ratio:3/4; border:1px solid var(--stroke); border-radius:18px; background:var(--surface-2); box-shadow:none; }
.host-card .badge { background:#121016b3; color:#f5f5f7; border:1px solid #ffffff26; font-size:11px; padding:5px 8px; border-radius:7px; }
.host-info { bottom:20px; left:20px; right:20px; }
.host-info h2 { font-family:var(--sans); font-size:24px; line-height:1.4; font-weight:600; letter-spacing:0; margin:0 0 6px; }
.host-info h2 small { font-size:14px; font-weight:400; }
.host-info .location { font-size:13px; margin-bottom:8px; }
.host-info p { font-size:13px; line-height:1.6; }
.tag-row span { font-size:11px; padding:4px 8px; background:#18151e80; }
.swipe-controls { margin-top:16px; gap:18px; }
.swipe-controls .round { width:44px; height:44px; padding:10px; border-radius:50%; background:#1b1821; border-color:var(--stroke); color:#d7d3df; }
.swipe-controls .round.primary { width:54px; height:54px; background:var(--accent); color:#fff; border-color:transparent; }
.card-caption { margin-top:10px; font-size:12px; line-height:1.6; color:#918d9d; }
.page-title,.profile-page h1,.admin-main h1 { font-family:var(--sans); font-size:26px; line-height:1.35; font-weight:600; letter-spacing:0; margin:8px 0 12px; color:var(--ink); }
.subtitle { color:var(--muted); font-size:13px; line-height:1.7; }
.wallet-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr); gap:20px; margin:24px 0; }
.wallet-panel,.stat-card,.profile-panel,.wallet-card,.recharge-identity,.manual-summary {
  background:var(--surface-1); border:1px solid var(--stroke); color:var(--ink); border-radius:16px; box-shadow:none;
}
.wallet-panel { padding:24px; }
.wallet-panel h3 { font-size:15px; }
.big-balance { font-family:var(--sans); font-size:40px; font-weight:600; color:var(--ink); letter-spacing:-.5px; }
.big-balance span { font-size:14px; font-weight:400; color:var(--muted); margin-left:10px; }
.package,.package:nth-child(2) { background:var(--surface-2); border:1px solid var(--stroke); color:var(--ink); border-radius:12px; }
.package:hover { border-color:var(--accent); }
.package .coins { font-family:var(--sans); font-size:24px; }
.package small { color:var(--muted); font-size:12px; }
.packages:empty { display:none; }
.checkin-grid { gap:6px; margin:20px 0; }
.day { background:var(--surface-2); color:var(--muted); border:1px solid var(--stroke); padding:10px 3px; font-size:13px; border-radius:8px; }
.day.milestone { background:#241735; border-color:#a855f74d; color:var(--accent-text); }
.day.done { background:#30223e; color:#e5d4f8; }
.day b { font-size:11px; margin-top:4px; color:var(--accent-text); }
.ledger-row { border-color:var(--stroke); font-size:13px; padding:14px 0; }
.ledger-row small { font-size:12px; }
.positive { color:#b994df; }
.negative { color:#ffaba8; }
.character-detail { grid-template-columns:minmax(240px,380px) minmax(0,1fr); gap:36px; max-width:1000px; margin:24px auto; }
.character-detail > img { width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:18px; }
.character-detail p { font-size:14px; line-height:1.75; color:var(--muted); }
.favorites-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
dialog, .admin-body dialog { background:#1e1b23; color:var(--ink); border:1px solid var(--stroke); border-radius:20px; padding:28px; width:calc(100vw - 32px); max-width:560px; max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 24px 80px #0006; }
dialog::backdrop { background:#0009; backdrop-filter:blur(8px); }
dialog h2 { font-family:var(--sans); font-size:22px; font-weight:600; line-height:1.4; padding-right:20px; }
dialog p,dialog .legal,.admin-body dialog p { font-size:13px; line-height:1.8; color:var(--muted); }
dialog label,.admin-body dialog label { color:#d7d3df; font-size:13px; }
dialog form > label { display:block; margin-top:12px; }
dialog form > label select { display:block; width:100%; margin:8px 0 16px; }
.modal-close { right:12px; top:10px; width:32px; height:32px; display:grid; place-items:center; background:transparent; color:var(--muted); border-radius:8px; font-size:24px; padding:0; }
input:not([type=checkbox]),select,textarea,.admin-body input:not([type=checkbox]),.admin-body select,.admin-body textarea,dialog input:not([type=checkbox]),dialog select,dialog textarea {
  background:#1b1821; color:var(--ink); border:1px solid var(--stroke); border-radius:10px; padding:10px 12px; max-width:100%; font-size:14px; line-height:20px; box-shadow:none;
}
input::placeholder,textarea::placeholder { color:#716d7a; }
input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; vertical-align:middle; margin-right:7px; }
dialog input:not([type=checkbox]),dialog textarea { width:100%; margin:8px 0 16px; }
.error,[role=alert] { color:#ffaba8; font-size:13px; line-height:1.65; }
.success { color:#90dcb4; }
#toast { background:#251f2d; border:1px solid var(--stroke); color:var(--ink); border-radius:12px; font-size:13px; line-height:1.6; }
.call-page { max-width:900px; }
.call-heading h2 { font-family:var(--sans); font-size:22px; font-weight:600; }
.call-heading .status-label,.call-note { font-size:12px; color:var(--muted); }
.call-stage { background:#08070b; border:1px solid var(--stroke); border-radius:18px; }
.call-text input { min-width:0; width:100%; }
.call-controls button { display:flex; align-items:center; justify-content:center; border:1px solid #ffffff26; }
.call-controls .hangup { background:#ff453a; border-color:transparent; }
.call-wait { background:#0e0c1280; }
.local-video { background:var(--surface-3); }
body > footer { margin-left:var(--studio-sidebar); width:calc(100% - var(--studio-sidebar)); max-width:none; padding:20px 28px; background:var(--surface-0); border-color:var(--stroke); color:#918d9d; font-size:12px; gap:16px; }
footer button,footer a { color:var(--muted); font-size:12px; }
.language-links { margin-top:4px; gap:16px; }
.language-links a { font-size:12px; }
/* Administration uses the same shell and surface hierarchy. */
.admin-shell { display:block; max-width:none; margin:0; padding:0; }
.admin-body .admin-main { width:calc(100% - var(--studio-sidebar)); max-width:1440px; min-width:0; min-height:calc(100dvh - 94px); margin:0 0 0 var(--studio-sidebar); padding:28px; color:var(--ink); background:var(--surface-0); }
.admin-menu { gap:3px; }
.admin-menu button { font-size:13px; padding:9px 12px; }
.admin-menu [hidden] { display:none!important; }
.admin-main > .eyebrow { margin-bottom:6px; }
.stat-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.stat-card { padding:22px; }
.stat-card small { color:var(--muted); font-size:13px; }
.stat-card b { font-family:var(--sans); font-size:30px; font-weight:600; margin-top:12px; font-variant-numeric:tabular-nums; color:var(--ink); }
.admin-main .table-wrap { overflow:auto; max-width:100%; background:var(--surface-1); border:1px solid var(--stroke); border-radius:14px; }
.admin-main th { background:var(--surface-2); color:var(--muted); font-weight:500; }
.admin-main th,.admin-main td { border-color:var(--stroke); padding:14px 16px; text-align:left; font-size:13px; line-height:1.6; }
.admin-main tbody tr:last-child td { border-bottom:0; }
.admin-main tbody tr:hover { background:#ffffff03; }
.admin-main button { padding:8px 12px; min-height:34px; }
.admin-body .secondary-button { background:#1b1821; border:1px solid var(--stroke); color:#d7d3df; box-shadow:none; }
.admin-body .secondary-button:hover { background:#27222e; color:#fff; border-color:#ffffff29; }
.admin-main form { max-width:780px; }
.admin-main label { display:block; margin:18px 0 8px; color:#d7d3df; font-size:14px; }
.admin-main label input:not([type=checkbox]),.admin-main label select,.admin-main textarea { display:block; width:100%; margin-top:8px; }
.admin-main fieldset { border:1px solid var(--stroke); border-radius:14px; margin:18px 0; padding:20px; }
.admin-main legend { font-size:14px; color:var(--muted); }
.admin-main form > p { color:var(--muted); font-size:13px; line-height:1.7; }
.admin-main form > .primary-button { margin-top:14px; }
.admin-main .host-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:24px; }
.admin-main .host-grid .host-card { height:auto; background:var(--surface-1); border:1px solid var(--stroke); padding-bottom:16px; user-select:auto; border-radius:16px; box-shadow:none; }
.admin-main .host-grid .host-card > img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
.admin-main .host-card::after { display:none; }
.admin-main .host-card h3,.admin-main .host-card p,.admin-main .host-card button { margin-left:16px; margin-right:16px; }
.admin-main .host-card h3 { margin-top:14px; margin-bottom:6px; font-size:16px; }
.admin-main .host-card p { color:var(--muted); font-size:13px; }
.api-panel { max-width:780px; padding:24px; margin-top:24px; background:var(--surface-1); border:1px solid var(--stroke); border-radius:18px; }
.api-status { background:var(--surface-2); color:#d7d3df; padding:14px 16px; border:1px solid var(--stroke); border-radius:10px; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.api-status::before { content:''; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:middle; }
.api-note { font-size:13px; color:var(--muted); line-height:1.8; }
.api-panel #platformApiKey { display:block; width:100%; box-sizing:border-box; }
.api-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.api-panel #apiFeedback { min-height:24px; margin:16px 0 0; font-size:13px; line-height:1.7; }
.manual-summary,.admin-body .recharge-identity { background:var(--surface-2); border:1px solid var(--stroke); }
.dashboard-chart a { background:#a855f7; }
.dashboard-chart a:hover { background:#c997ff; }
.pill { background:#241735; color:var(--accent-text); font-size:12px; }
.pill.off { background:var(--surface-2); color:var(--muted); }
.metric-bar { background:var(--surface-3); }
.metric-bar i { background:var(--accent); }
@media(min-width:1700px) { .girl-wall { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1180px) {
  .girl-wall { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .trial-card { min-width:200px; }
  .wall-hero h1 { font-size:26px; }
  .admin-main .host-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1000px) {
  .wall-hero { align-items:flex-start; }
  .trial-card { min-width:180px; max-width:210px; }
  .trial-card strong { font-size:15px; }
  .wallet-layout { grid-template-columns:1fr; }
  .stat-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  :root { --studio-sidebar:0px; }
  html { scroll-padding-top:136px; }
  .studio-strip { display:none; }
  .header,.admin-body .header {
    top:0; margin:0; width:100%; min-height:0; max-width:none; padding:10px 16px 0;
    border:0; border-bottom:1px solid var(--stroke); border-radius:0; background:#111016;
    flex-wrap:wrap; gap:10px;
  }
  .header .brand { position:static; top:auto; width:auto; min-width:0; height:36px; padding:0; border:0; background:transparent; }
  .header .brand-logo { width:118px; height:auto; }
  .workspace-identity { display:none; }
  .header-right { margin-left:auto; gap:6px; flex-wrap:nowrap; }
  #languageSelect { max-width:88px; min-height:34px; padding:6px; font-size:12px; }
  .balance-button { min-height:34px; padding:6px 8px; font-size:12px; border-radius:10px; }
  #coinLabel { display:none; }
  .profile-button { width:32px; height:32px; padding:6px; display:grid; }
  .mode-tag { display:none; }
  .header > nav {
    position:static; order:3; width:100%; height:auto; margin:0; padding:0 0 8px;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
    border:0; background:transparent; overflow:visible;
  }
  .header .nav { min-height:52px; padding:6px 4px; flex-direction:column; justify-content:center; gap:4px; font-size:12px; font-weight:500; text-align:center; white-space:normal; line-height:18px; }
  .header .nav span { max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
  .header .nav svg { width:15px; height:15px; }
  .header > nav::after,.admin-menu::after { display:none; }
  body:not(.admin-body) > main { width:100%; margin:0; padding:22px 16px 28px; min-height:calc(100dvh - 200px); }
  .wall-hero { display:block; padding:0 0 20px; }
  .wall-hero .eyebrow { font-size:11px; }
  .wall-hero h1 { font-size:24px; margin:8px 0 10px; line-height:1.4; }
  .wall-hero p { font-size:13px; line-height:1.7; }
  .wall-hero p.language-hint { font-size:12px!important; }
  .trial-card { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; max-width:none; min-width:0; width:100%; padding:12px 14px; margin-top:16px; border-radius:12px; }
  .trial-card span { flex:1; font-size:12px; }
  .trial-card strong { font-size:14px; margin:0; }
  .trial-card small { display:none; }
  .wall-toolbar { gap:12px; margin:0 0 16px; padding-bottom:14px; align-items:center; }
  .wall-tabs { display:none; }
  .wall-tabs button { flex:1; min-height:36px; font-size:13px; padding:8px; }
  .filters { width:100%; margin:0; gap:10px; }
  .filters select { flex:1; min-width:0; width:calc(50% - 5px); max-width:none; min-height:38px; padding:8px 10px; font-size:13px; }
  .girl-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .girl-tile { border-radius:12px; }
  .tile-image { height:auto; aspect-ratio:3/4; }
  .tile-caption { left:12px; right:10px; bottom:12px; }
  .tile-caption h2 { font-size:18px; line-height:1.4; margin-bottom:4px; }
  .tile-caption h2 small { font-size:12px; margin-left:5px; }
  .tile-caption > span { display:block; font-size:11px; line-height:16px; }
  .ai-tag { left:8px; top:8px; font-size:10px; padding:3px 5px; line-height:15px; }
  .tile-heart { right:7px; top:7px; width:25px; height:25px; font-size:18px; }
  .tile-bottom { padding:12px 10px; }
  .tile-bottom p { font-size:12px; line-height:1.65; height:40px; margin-bottom:10px; }
  .video-button { min-height:38px; font-size:12px; padding:8px 5px; gap:5px; }
  .wall-footnote { font-size:12px; margin:14px 0 20px; }
  .daily-banner { gap:12px; padding:16px; flex-wrap:wrap; margin:20px 0; }
  .daily-banner > div { flex:1; min-width:180px; }
  .daily-banner h3 { font-size:14px; }
  .daily-banner p { font-size:12px; }
  .daily-banner button { margin:4px 0 0; width:100%; }
  .seo-content { margin-top:28px; padding-top:10px; }
  .seo-content h2 { font-size:17px; }
  .seo-content summary { font-size:13px; }
  .match-zone { max-width:340px; }
  .match-zone .host-card { height:auto; aspect-ratio:3/4; }
  .host-info { left:18px; right:18px; bottom:18px; }
  .host-info h2 { font-size:24px; }
  .host-info .location { font-size:13px; }
  .host-info p { font-size:13px; }
  .card-caption { font-size:12px; }
  .page-title,.profile-page h1,.admin-main h1 { font-size:24px; }
  .wallet-panel { padding:20px; margin-bottom:0; }
  .wallet-layout { display:grid; grid-template-columns:1fr; gap:16px; margin:20px 0; }
  .packages { grid-template-columns:1fr; }
  .package { padding:16px; }
  .character-detail { display:block; margin:20px 0; }
  .character-detail > img { width:100%; max-height:none; aspect-ratio:3/4; height:auto; }
  .character-detail > div { padding-top:20px; }
  .favorites-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .favorites-grid .host-card { height:300px; }
  dialog,.admin-body dialog { padding:24px; }
  dialog input:not([type=checkbox]),dialog select,dialog textarea { font-size:16px; }
  dialog h2 { font-size:20px; }
  .call-heading { flex-wrap:wrap; gap:4px; }
  .call-heading h2 { font-size:18px; }
  .call-text { gap:8px; }
  body > footer { width:100%; margin:0; padding:20px 16px; flex-direction:column; align-items:flex-start; font-size:12px; }
  footer > div { gap:16px; flex-wrap:wrap; }
  .admin-body .header { padding-bottom:10px; }
  .admin-header .header-right .text-link,.admin-header .header-right button { min-height:34px; font-size:12px; padding:6px 8px; }
  .admin-menu { position:sticky; z-index:25; top:57px; bottom:auto; width:100%; flex-direction:row; padding:8px 12px; gap:4px; border:0; border-bottom:1px solid var(--stroke); overflow-x:auto; }
  .admin-menu button { width:auto; white-space:nowrap; padding:8px 12px; min-height:38px; font-size:13px; }
  .admin-menu svg { display:none; }
  .admin-body .admin-main { width:100%; margin:0; padding:24px 16px; min-height:calc(100dvh - 120px); }
  .stat-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
  .stat-card { padding:18px; }
  .stat-card b { font-size:27px; }
  .admin-main .host-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .admin-main th,.admin-main td { padding:12px; }
  .api-panel { padding:18px; margin-top:20px; border-radius:16px; }
  .api-actions { gap:10px; }
  .api-actions button { flex:1; min-width:130px; }
  .api-status { padding:12px; }
}
@media(max-width:370px) {
  .header,.admin-body .header { padding-left:12px; padding-right:12px; }
  .header .brand-logo { width:103px; }
  #languageSelect { max-width:76px; }
  .header .nav { gap:3px; font-size:11px; }
  .header .nav svg { width:14px; height:14px; }
  .balance-button .coin { margin-right:2px; }
  .wall-hero h1 { font-size:22px; }
}
@media(max-height:500px) and (min-width:761px) {
  .header .brand { height:84px; padding-top:14px; padding-bottom:14px; }
  .header > nav,.admin-menu { top:114px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}


/* User correction: the companion keeps its original dating layout.
   Only the visual tokens and control styling come from the digital human. */
body:not(.admin-body) .header {
  position:relative; top:auto; width:100%; max-width:1360px; min-height:0;
  margin:0 auto; padding:22px 40px; border:0; border-bottom:1px solid var(--stroke);
  border-radius:0; display:flex; flex-wrap:nowrap; align-items:center;
  justify-content:space-between; gap:24px; background:var(--surface-0);
}
body:not(.admin-body) .header .brand {
  position:static; width:auto; min-width:0; height:auto; padding:0; margin:0;
  border:0; background:transparent; flex:none;
}
body:not(.admin-body) .header .brand-logo { width:160px; height:48px; }
body:not(.admin-body) .header > nav {
  position:static; inset:auto; width:auto; height:auto; margin:0; padding:0;
  border:0; background:transparent; display:flex; flex-direction:row;
  align-items:center; justify-content:center; gap:4px; overflow:visible;
}
body:not(.admin-body) .header > nav::after { display:none; }
body:not(.admin-body) .header .nav {
  width:auto; min-height:38px; padding:9px 14px; display:block;
  text-align:center; white-space:nowrap; font-size:13px; line-height:20px;
}
body:not(.admin-body) .header-right { margin-left:0; }
body:not(.admin-body) > main {
  width:100%; max-width:1320px; margin:0 auto; padding:32px 40px 40px;
  min-height:65vh;
}
body:not(.admin-body) > footer {
  width:100%; max-width:1320px; margin:0 auto; padding:24px 40px;
}
body:not(.admin-body) .girl-wall { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
body:not(.admin-body) .tile-image { height:365px; aspect-ratio:auto; }
body:not(.admin-body) .match-zone { max-width:380px; margin:15px auto 35px; }
body:not(.admin-body) .match-zone .host-card { height:500px; aspect-ratio:auto; }
@media(min-width:1550px) { body:not(.admin-body) .tile-image { height:410px; } }
@media(max-width:1100px) {
  body:not(.admin-body) .header { padding:20px 25px; gap:16px; flex-wrap:wrap; }
  body:not(.admin-body) .header > nav { order:3; width:100%; justify-content:center; }
  body:not(.admin-body) .header-right { margin-left:auto; }
  body:not(.admin-body) .girl-wall { gap:17px; }
  body:not(.admin-body) .tile-image { height:315px; }
}
@media(max-width:760px) {
  body:not(.admin-body) .header { padding:14px 16px; gap:12px; }
  body:not(.admin-body) .header .brand-logo { width:118px; height:auto; }
  body:not(.admin-body) .header > nav { order:3; width:100%; gap:4px; display:flex; flex-direction:row; }
  body:not(.admin-body) .header .nav { flex:1; min-width:0; padding:9px 6px; font-size:12px; white-space:normal; }
  body:not(.admin-body) > main { padding:24px 16px 30px; }
  body:not(.admin-body) > footer { padding:22px 16px; }
  body:not(.admin-body) .girl-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  body:not(.admin-body) .tile-image { height:240px; }
  body:not(.admin-body) .match-zone { max-width:380px; }
  body:not(.admin-body) .match-zone .host-card { height:480px; }
  body:not(.admin-body) .wall-tabs { display:flex; width:auto; }
  body:not(.admin-body) .wall-tabs button { min-height:34px; flex:none; padding:7px 10px; }
  body:not(.admin-body) .filters { width:auto; margin-left:auto; gap:6px; }
  body:not(.admin-body) .filters select { width:100px; min-height:36px; font-size:12px; padding:7px; }
}
@media(max-width:370px) {
  body:not(.admin-body) .header { padding-left:12px; padding-right:12px; }
  body:not(.admin-body) .header .brand-logo { width:103px; }
  body:not(.admin-body) .header .nav { font-size:11px; padding:9px 4px; }
  body:not(.admin-body) .filters { width:100%; margin-left:0; }
  body:not(.admin-body) .filters select { width:calc(50% - 3px); }
}