:root { color-scheme: light; --ink:#17302f; --muted:#687c7a; --faint:#91a19f; --canvas:#edf3f1; --surface:#fff; --soft:#f5f9f7; --line:#d8e5e1; --deep:#102a2a; --accent:#087d68; --accent-dark:#056653; --accent-soft:#e1f3ed; --gold:#a66d1a; --gold-soft:#fff4df; --danger:#a33f38; --danger-soft:#fff0ee; font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
* { box-sizing:border-box; }
html,body { min-width:320px; margin:0; background:var(--canvas); color:var(--ink); font-size:14px; line-height:1.5; }
[hidden] { display:none !important; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid rgba(22,127,203,.3); outline-offset:2px; }
.topbar { display:flex; align-items:center; gap:25px; min-height:70px; padding:11px max(20px,calc((100% - 1380px)/2)); color:#ecf7f4; background:var(--deep); border-bottom:3px solid var(--accent); }
.brand { display:inline-flex; align-items:center; gap:10px; min-width:210px; text-decoration:none; }
.brand-mark { display:grid; grid-template-columns:1fr 1fr; width:38px; height:38px; overflow:hidden; border:1px solid #6ba99d; border-radius:7px; font-weight:800; line-height:1; }
.brand-mark span { display:grid; place-items:center; }
.brand-mark span+span { border-left:1px solid #6ba99d; color:#86d9be; }
.brand-copy { display:grid; gap:0; }
.brand-copy strong { font-size:14px; letter-spacing:.5px; }
.brand-copy small { color:#a9c2bd; font-size:11px; }
.main-nav { display:flex; align-items:center; gap:4px; flex:1; }
.main-nav a { padding:7px 10px; border-radius:4px; color:#b8ceca; font-size:13px; text-decoration:none; }
.main-nav a:hover,.main-nav a.active { color:#f3fffb; background:#1d4542; }
.version-badge { display:inline-flex; align-items:center; min-height:27px; padding:3px 9px; border:1px solid #426a65; border-radius:4px; color:#c8eee3; background:#17423f; font-size:11px; font-weight:800; white-space:nowrap; }
.page-shell { width:min(1380px,100%); margin:0 auto; padding:25px 20px 30px; }
.intro-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:stretch; padding:27px clamp(20px,4vw,45px); border:1px solid var(--line); background:var(--surface); box-shadow:0 12px 32px rgba(24,55,50,.07); }
.eyebrow,.section-kicker { margin:0; color:var(--accent); font-size:10px; font-weight:850; letter-spacing:1.2px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:5px 0 8px; color:var(--deep); font-size:clamp(25px,3vw,38px); line-height:1.2; }
.lede { max-width:680px; margin:0; color:var(--muted); font-size:15px; }
.quick-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }
.quick-links a,.text-link { color:var(--accent-dark); font-weight:750; text-decoration:none; }
.quick-links a:hover,.text-link:hover { text-decoration:underline; }
.membership-card { display:grid; align-content:center; min-height:170px; padding:20px 22px; border:1px solid #32655e; border-radius:7px; color:#e7f7f2; background:#143534; box-shadow:0 10px 20px rgba(8,36,33,.15); }
.membership-top { display:flex; justify-content:space-between; gap:10px; color:#91d0bd; font-size:10px; font-weight:800; letter-spacing:1px; }
.plan-state { color:#ffd882; letter-spacing:0; }
.price { display:block; margin:8px 0 3px; color:#fff; font-size:31px; line-height:1.1; }
.price small { margin-left:4px; color:#b8d5cd; font-size:13px; font-weight:500; }
.membership-card p { margin:0 0 12px; color:#bad2cd; font-size:12px; }
.secure-line { display:inline-flex; align-items:center; gap:6px; color:#8fe0c2; font-size:11px; }
.secure-dot { width:6px; height:6px; border-radius:50%; background:#62d9af; }
.notice { display:flex; gap:12px; align-items:flex-start; margin-top:15px; padding:12px 15px; border:1px solid var(--line); border-left:3px solid var(--accent); color:var(--muted); background:var(--surface); }
.notice strong { display:block; color:var(--ink); }
.notice p { margin:2px 0 0; font-size:12px; }
.notice-mark { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:50%; color:var(--accent-dark); background:var(--accent-soft); font-weight:800; }
.notice.error { border-left-color:var(--danger); background:var(--danger-soft); }.notice.error .notice-mark { color:var(--danger); background:#ffdcd8; }
.notice.success { border-left-color:var(--accent); }.notice.success .notice-mark { color:#fff; background:var(--accent); }
.workspace-grid { display:grid; grid-template-columns:minmax(280px,390px) minmax(0,1fr); gap:15px; align-items:start; margin-top:15px; }
.panel { min-width:0; padding:20px; border:1px solid var(--line); background:var(--surface); box-shadow:0 8px 22px rgba(24,55,50,.045); }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }.panel-heading h2 { margin:3px 0 0; color:var(--deep); font-size:18px; line-height:1.25; }.panel-note { margin:0 0 16px; color:var(--muted); font-size:12px; }
.status-pill { display:inline-flex; align-items:center; min-height:25px; padding:3px 8px; border-radius:4px; color:var(--accent-dark); background:var(--accent-soft); font-size:11px; font-weight:800; white-space:nowrap; }.status-pill.muted { color:#788987; background:#eef3f1; }
.form-stack { display:grid; gap:12px; }.form-stack label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }.form-stack input { width:100%; min-height:40px; padding:8px 10px; border:1px solid #bfceca; border-radius:4px; color:var(--ink); background:#fff; }.form-stack input::placeholder { color:#a3b0ae; font-weight:400; }.two-col { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.form-actions { display:flex; gap:8px; }.form-actions button,.secondary { min-height:38px; padding:7px 13px; border:1px solid #aac4bd; border-radius:4px; font-weight:750; }.primary { border-color:var(--accent); color:#fff; background:var(--accent); }.primary:hover { border-color:var(--accent-dark); background:var(--accent-dark); }.quiet { color:var(--muted); background:#fff; }.quiet:hover,.secondary:hover { color:var(--accent-dark); background:var(--accent-soft); }.secondary { width:100%; color:var(--accent-dark); background:var(--accent-soft); border-color:#a9d2c5; }.rule { height:1px; margin:20px 0; background:var(--line); }.form-message { min-height:18px; margin:11px 0 0; color:var(--muted); font-size:12px; }.form-message.error { color:var(--danger); }
.text-button { margin-top:10px; padding:0; border:0; color:var(--accent-dark); background:transparent; font-size:12px; font-weight:750; }.text-button:hover { text-decoration:underline; }.register-form { margin-top:12px; padding-top:13px; border-top:1px solid var(--line); }.membership-action { width:100%; min-height:34px; margin:0 0 12px; padding:6px 11px; border:1px solid #8dd6be; border-radius:4px; color:#0d3934; background:#bcebd9; font-weight:800; }.membership-action:hover { background:#d4f5e8; }
.session-tools { margin-top:12px; color:var(--muted); font-size:11px; }.session-tools summary { display:inline-flex; cursor:pointer; color:var(--faint); }.session-tools summary:hover { color:var(--accent-dark); }.session-tools p { margin:7px 0 9px; color:var(--faint); }.session-tools .form-stack { gap:9px; }.session-tools input { min-height:35px; font-size:12px; }
.profile-panel { grid-column:2; grid-row:1 / span 2; }.profile-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 13px; padding:13px 14px; border:1px solid #cfe4dc; background:#f5fbf8; }.profile-summary strong { color:var(--deep); font-size:22px; }.profile-summary span { color:var(--muted); font-size:13px; }.score-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:15px; border:1px solid var(--line); background:var(--line); }.score-cell { padding:13px 14px; background:var(--surface); }.score-cell span { display:block; color:var(--muted); font-size:11px; }.score-cell strong { display:block; margin-top:2px; color:var(--deep); font-size:24px; font-variant-numeric:tabular-nums; }.score-cell small { color:var(--faint); font-size:11px; }.profile-meta { display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:12px; color:var(--muted); font-size:12px; }.profile-meta span { display:inline-flex; gap:4px; }.profile-meta b { color:var(--ink); }.equipment-section { margin-top:22px; }.subheading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px; }.subheading h3 { margin:0; color:var(--deep); font-size:15px; }.subheading span { color:var(--accent); font-size:11px; }.table-wrap { overflow-x:auto; border:1px solid var(--line); }.table-wrap table { width:100%; min-width:450px; border-collapse:collapse; font-size:12px; }.table-wrap th,.table-wrap td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.table-wrap th { color:var(--muted); background:var(--soft); font-weight:700; white-space:nowrap; }.table-wrap tr:last-child td { border-bottom:0; }.table-score { color:var(--accent-dark); font-weight:800; }.empty-panel { display:grid; justify-items:center; align-content:center; min-height:260px; color:var(--muted); text-align:center; }.empty-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:8px; border:1px solid #b8d9d0; border-radius:50%; color:var(--accent); background:var(--accent-soft); font-size:23px; }.empty-panel h2 { margin:0 0 6px; color:var(--deep); font-size:18px; }.empty-panel p { max-width:300px; margin:0 0 13px; font-size:12px; }.page-footer { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px; color:var(--faint); font-size:11px; }.page-footer a { margin-left:auto; color:var(--accent-dark); text-decoration:none; }.page-footer a:hover { text-decoration:underline; }
@media (max-width:900px) { .topbar { flex-wrap:wrap; gap:8px 15px; }.main-nav { order:3; flex-basis:100%; overflow:auto; }.intro-grid { grid-template-columns:1fr; }.membership-card { min-height:145px; }.workspace-grid { grid-template-columns:1fr; }.profile-panel { grid-column:auto; grid-row:auto; }.empty-panel { min-height:190px; } }
@media (max-width:560px) { .page-shell { padding:14px 12px 24px; }.intro-grid { padding:20px 16px; }.panel { padding:16px; }.topbar { padding:10px 13px; }.brand { min-width:0; flex:1; }.version-badge { font-size:10px; }.two-col { grid-template-columns:1fr; }.score-grid { grid-template-columns:1fr 1fr; }.score-cell strong { font-size:20px; }.page-footer a { margin-left:0; }.main-nav a { padding-left:7px; padding-right:7px; } }

/* Public player surface: the same classic HUD language as the home page. */
body {
  --ink: #eff8ff;
  --muted: #93a9bf;
  --faint: #657d96;
  --canvas: #080e1b;
  --surface: #101d30;
  --soft: #14253b;
  --line: #294562;
  --deep: #eff8ff;
  --accent: #65f1cf;
  --accent-dark: #21b996;
  --accent-soft: #123d35;
  --gold: #ffc75d;
  --gold-soft: #3f3522;
  --danger: #ff8c83;
  --danger-soft: #3b2529;
  color: var(--ink);
  background: var(--canvas);
}
html { background: #080e1b; }
body::before { position: fixed; inset: 0; z-index: -1; opacity: .16; pointer-events: none; content: ""; background-size: 4px 4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%236a8aa7' fill-opacity='.22' d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E"); }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 74px; padding: 11px max(20px, calc((100% - 1240px) / 2)); border-bottom: 1px solid #294562; background: rgba(8, 14, 27, .96); box-shadow: 0 8px 30px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
.brand { min-width: 230px; gap: 12px; }
.brand-mark { width: 44px; height: 44px; border: 2px solid #65f1cf; border-radius: 0; color: #65f1cf; background: #0e2430; clip-path: polygon(0 5px,5px 5px,5px 0,calc(100% - 5px) 0,calc(100% - 5px) 5px,100% 5px,100% calc(100% - 5px),calc(100% - 5px) calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,5px calc(100% - 5px),0 calc(100% - 5px)); }
.brand-mark span+span { border-color: #3c6485; color: #ffc75d; }
.brand-copy strong { color: #eff8ff; font-size: 14px; letter-spacing: .14em; }
.brand-copy small { color: #93a9bf; }
.main-nav { gap: 4px; }
.main-nav a { position: relative; padding: 10px 13px; border: 1px solid transparent; border-radius: 0; color: #93a9bf; }
.main-nav a:hover, .main-nav a.active { border-color: #294562; color: #eff8ff; background: #12233a; }
.main-nav a.active::after { position: absolute; right: 12px; bottom: 4px; left: 12px; height: 2px; background: #65f1cf; content: ""; }
.version-badge { border-color: #37677a; border-radius: 0; color: #65f1cf; background: #102d39; }
.page-shell { width: min(1240px, calc(100% - 48px)); padding: 30px 0 42px; }
.intro-grid { gap: 35px; padding: 34px 38px; border-color: #294562; background: #0e1b2c; box-shadow: 12px 14px 0 rgba(3,8,17,.3); }
.eyebrow, .section-kicker { color: #65f1cf; letter-spacing: .14em; }
h1 { color: #eff8ff; font-size: clamp(31px, 4vw, 52px); text-shadow: 4px 4px 0 #12243b; }
.lede { color: #93a9bf; line-height: 1.8; }
.quick-links a, .text-link { color: #65f1cf; }
.membership-card { border-color: #5e6c4a; border-radius: 0; color: #eff8ff; background: #152431; box-shadow: 10px 10px 0 rgba(3,8,17,.42); }
.membership-top { color: #65f1cf; }
.plan-state { color: #ffc75d; }
.price { color: #ffc75d; }
.price small { color: #93a9bf; }
.membership-card p { color: #93a9bf; }
.secure-line { color: #65f1cf; }
.notice { border-color: #294562; border-left-color: #65f1cf; color: #93a9bf; background: #101d30; }
.notice strong { color: #eff8ff; }
.notice-mark { border-radius: 0; color: #07131e; background: #65f1cf; }
.notice.error { border-left-color: #ff8c83; background: #3b2529; }
.notice.error .notice-mark { color: #ff8c83; background: #542e35; }
.workspace-grid { gap: 14px; }
.panel { border-color: #294562; background: #101d30; box-shadow: 8px 9px 0 rgba(3,8,17,.22); }
.panel-heading h2 { color: #eff8ff; }
.panel-note, .form-stack label { color: #93a9bf; }
.status-pill { border-radius: 0; color: #65f1cf; background: #123d35; }
.status-pill.muted { color: #93a9bf; background: #17283d; }
.form-stack input { border-color: #3c6485; border-radius: 0; color: #eff8ff; background: #0b1728; }
.form-stack input:focus { border-color: #65f1cf; outline: 2px solid rgba(101,241,207,.14); }
.form-stack input::placeholder { color: #657d96; }
.form-actions button, .secondary { border-color: #3c6485; border-radius: 0; }
.primary { border-color: #65f1cf; color: #07131e; background: #65f1cf; }
.primary:hover { border-color: #a2ffe8; background: #a2ffe8; }
.quiet { color: #93a9bf; background: #12253b; }
.quiet:hover, .secondary:hover { color: #07131e; border-color: #65f1cf; background: #65f1cf; }
.secondary { color: #65f1cf; background: #123d35; }
.text-button { color: #65f1cf; }
.membership-action { border-color: #65f1cf; border-radius: 0; color: #07131e; background: #65f1cf; }
.membership-action:hover { background: #a2ffe8; }
.session-tools { color: #93a9bf; }
.session-tools summary:hover { color: #65f1cf; }
.rule { background: #294562; }
.form-message { color: #93a9bf; }
.form-message.error { color: #ff8c83; }
.profile-summary { border-color: #3c6485; background: #14253b; }
.profile-summary strong, .score-cell strong, .subheading h3 { color: #eff8ff; }
.profile-summary span, .score-cell span, .score-cell small, .profile-meta { color: #93a9bf; }
.score-grid { border-color: #294562; background: #294562; }
.score-cell { background: #101d30; }
.score-cell strong { color: #ffc75d; }
.profile-meta b { color: #eff8ff; }
.table-wrap { border-color: #294562; }
.table-wrap th { color: #93a9bf; background: #14253b; }
.table-wrap td { border-color: #294562; color: #eff8ff; background: #101d30; }
.table-score { color: #65f1cf; }
.empty-panel { color: #93a9bf; background: #101d30; }
.empty-icon { border-color: #3e806f; border-radius: 0; color: #65f1cf; background: #123d35; }
.empty-panel h2 { color: #eff8ff; }
.page-footer { color: #657d96; }
.page-footer a { color: #65f1cf; }

/* Read-only character sheet: ability totals and individual equipment observations. */
.page-shell { max-width: 1740px; }
.workspace-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
.own-characters { margin: 20px 0; padding: 16px 0; border-block: 1px solid #294562; }
.own-characters select { width: 100%; min-height: 42px; background: #0c1928; color: #eaf5ff; border: 1px solid #42637b; font: inherit; padding: 8px; }
.own-characters .subheading { gap: 10px; }
.profile-panel { min-width: 0; }
.ability-section { margin-top: 24px; }
.ability-section .subheading, .equipment-section .subheading { flex-wrap: wrap; gap: 8px; }
.ability-section .subheading span, #equipment-status { color: #b3cadd; font-size: 12px; }
.ability-panel { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ability-group { min-width: 0; margin: 0; padding: 12px; background: #0c1929; border-top: 2px solid #396580; }
.ability-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; padding: 8px 0; border-bottom: 1px solid #20364c; font-size: 14px; }
.ability-row dt { color: #a8c0d4; }
.ability-row dd { margin: 0; color: #f1f7ff; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ability-row.resource-hp dd { color: #ffb4b4; }.ability-row.resource-mp dd { color: #8bd2ff; }
.primary-stat dd { font-size: 17px; color: #ffe19d; }
.panel-note, .equipment-help { color: #b0c4d5; font-size: 12px; line-height: 1.7; margin: 12px 0 0; }
.equipment-help { margin: 0 0 14px; }
.loadout-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.85fr); gap: 16px; align-items: start; }
.equipment-slots { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.equipment-slot { min-width: 0; min-height: 124px; display: grid; grid-template-rows: auto 36px auto auto; align-content: start; gap: 4px; padding: 10px; color: #edf5ff; border: 1px solid #2f4b62; border-radius: 4px; background: #0d1b2c; text-align: left; cursor: pointer; }
.equipment-slot.is-selected, .equipment-slot:hover:not(:disabled) { border-color: #69edd2; background: #153631; }
.equipment-slot:focus-visible { outline: 2px solid #ffe3a5; outline-offset: 2px; }
.equipment-slot.is-missing { opacity: .7; border-style: dashed; cursor: default; }
.slot-label { display: block; color: #b2c6d8; font-size: 12px; }
.slot-name { font-size: 14px; overflow-wrap: anywhere; }.slot-score { color: #ffe19d; font-size: 13px; font-weight: 800; }
.slot-empty { color: #567c95; font-size: 26px; }
.loadout-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; color: #8ed4e8; font-size: 25px; }
.loadout-icon img { max-width: 36px; max-height: 36px; object-fit: contain; }
.equipment-detail { padding: 17px; background: #101c2b; border: 1px solid #56708d; border-top: 3px solid #e1bc70; min-width: 0; }
.equipped-title { display: flex; align-items: center; gap: 12px; }.equipped-title h4 { margin: 3px 0 0; font-size: 18px; overflow-wrap: anywhere; }
.equipped-score { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; color: #bbcddc; }.equipped-score strong { color: #ffdc92; font-size: 28px; }
.equipped-stats { margin: 0; }.equipped-stats .ability-row { font-size: 15px; }.natural-range { display: block; color: #9dc9d8; font-size: 12px; font-weight: 600; }
.shop-price dd { color: #ffd382; }.scroll-candidates { margin-top: 16px; border-top: 1px solid #35536a; }.scroll-candidates h4 { font-size: 14px; }.scroll-candidates p { color: #d5e5f0; font-size: 13px; line-height: 1.65; }
@media (max-width: 1200px) { .ability-panel { grid-template-columns: repeat(2,minmax(0,1fr)); } .ability-group:last-child { grid-column: 1 / -1; } .loadout-layout { grid-template-columns: 1fr; } .equipment-slots { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 900px) { .workspace-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ability-panel { grid-template-columns: 1fr; } .equipment-slots { grid-template-columns: repeat(3,minmax(0,1fr)); } .equipment-detail { scroll-margin-top: 20px; } .equipment-slot { padding: 8px; }.ability-row { font-size: 15px; } }

@media (max-width: 900px) {
  .page-shell { width: min(100% - 28px, 680px); }
  .intro-grid { padding: 25px 22px; }
}
@media (max-width: 560px) {
  .page-shell { width: calc(100% - 28px); padding-top: 18px; }
  .topbar { padding-inline: 14px; }
  .brand-copy strong { font-size: 12px; letter-spacing: .1em; }
  .brand-copy small { font-size: 10px; }
  .version-badge { display: none; }
  .main-nav a { padding-inline: 8px; }
  h1 { font-size: 33px; }
}

/* Shared cyber-cute identity; account and character controls retain their hooks. */
body.cyber-cute {
  color-scheme: dark;
  --ink: #f4f2fa;
  --muted: #c2bdcd;
  --faint: #92909f;
  --canvas: #121216;
  --surface: #1b1b23;
  --soft: #202029;
  --line: #35333e;
  --deep: #f4f2fa;
  --accent: #69ece5;
  --accent-dark: #69ece5;
  --accent-soft: #203335;
  --gold: #d8f58b;
  --gold-soft: #2b3124;
  --danger: #ff9fb4;
  --danger-soft: #2a2028;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0;
}
body.cyber-cute::before { content: none; }
body.cyber-cute [hidden] { display: none !important; }
body.cyber-cute .player-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; margin-top: 26px; }
body.cyber-cute .player-tabs button { flex: 0 0 auto; padding: 14px 2px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font: inherit; font-size: 13px; background: transparent; cursor: pointer; }
body.cyber-cute .player-tabs button.is-active { color: var(--accent); border-bottom-color: var(--accent); }
body.cyber-cute .sms-code-row { display: grid; grid-template-columns: minmax(0,1fr) 108px; gap: 8px; }
body.cyber-cute .sms-code-row input { width: 100%; }
body.cyber-cute #phone-login-button { min-height: 42px; border-radius: 4px; border: 1px solid var(--accent); font: inherit; font-size: 13px; }
body.cyber-cute button:disabled { cursor: not-allowed; opacity: .5; }
body.cyber-cute .growth-panel { padding-block: 30px; min-height: 400px; }
body.cyber-cute .growth-form { max-width: 730px; }
body.cyber-cute .growth-form :is(input,select,textarea) { width: 100%; min-width: 0; min-height: 42px; padding: 10px; border: 1px solid #45414e; border-radius: 4px; color: var(--ink); background: var(--surface); font: inherit; }
body.cyber-cute .growth-form input[type=file] { font-size: 12px; }
body.cyber-cute .growth-form input[type=file]::file-selector-button { padding: 5px 9px; margin-right: 10px; border: 1px solid #575160; border-radius: 3px; color: #ded4e8; background: #292431; }
body.cyber-cute .growth-form input[readonly] { color: var(--faint); }
body.cyber-cute .growth-form .growth-consent { display: flex; align-items: start; gap: 10px; line-height: 1.8; }
body.cyber-cute .growth-consent input { width: 16px; min-height: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
body.cyber-cute .growth-empty { padding: 25px 0; color: var(--faint); font-size: 13px; }
body.cyber-cute .growth-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); margin: 22px 0; }
body.cyber-cute .growth-stats > div { padding: 23px 18px; border-right: 1px solid var(--line); }
body.cyber-cute .growth-stats > div:first-child { padding-left: 0; }
body.cyber-cute .growth-stats > div:last-child { border-right: 0; }
body.cyber-cute .growth-stats span { display: block; color: var(--muted); font-size: 12px; }
body.cyber-cute .growth-stats strong { display: block; margin-top: 8px; color: var(--accent); font-size: 25px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.cyber-cute .growth-stats > div:nth-child(2) strong { color: #ff8ac5; }
body.cyber-cute .growth-stats > div:nth-child(3) strong { color: #d8f58b; }
body.cyber-cute .invite-line { display: grid; gap: 8px; max-width: 730px; padding: 12px 0; }
body.cyber-cute .invite-line > span { color: var(--faint); font-size: 12px; }
body.cyber-cute .invite-line > strong { color: #ff8ac5; font: 27px Consolas,monospace; overflow-wrap: anywhere; }
body.cyber-cute .invite-line label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }
body.cyber-cute .copy-line { display: grid; grid-template-columns: minmax(0,1fr) 72px; gap: 8px; }
body.cyber-cute .copy-line input { min-width: 0; min-height: 40px; padding: 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--accent); background: var(--surface); }
body.cyber-cute .growth-rules { max-width: 850px; padding-top: 10px; }
body.cyber-cute :is(.growth-rules h3,.growth-subtitle) { margin: 22px 0 14px; font-size: 16px; color: var(--ink); }
body.cyber-cute .growth-rules dl { margin: 0; }
body.cyber-cute .growth-rules dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
body.cyber-cute .growth-rules dt { color: var(--muted); }
body.cyber-cute .growth-rules dd { margin: 0; color: var(--ink); }
body.cyber-cute .growth-rules p { color: var(--faint); font-size: 12px; line-height: 1.9; }
body.cyber-cute .growth-records { display: grid; gap: 0; }
body.cyber-cute .growth-records article { padding: 20px 0; border-bottom: 1px solid var(--line); }
body.cyber-cute .growth-records header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
body.cyber-cute .growth-records header strong { color: var(--ink); font-size: 16px; }
body.cyber-cute .growth-records header span { color: var(--accent); font-size: 12px; }
body.cyber-cute .growth-records p { color: var(--muted); font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
body.cyber-cute .growth-records small { color: var(--faint); font-size: 11px; }
body.cyber-cute .growth-records blockquote { margin: 16px 0; padding: 10px 15px; border-left: 2px solid #ff8ac5; background: #241f2a; }
body.cyber-cute .growth-records blockquote b { font-size: 12px; color: #ff8ac5; }
@media(max-width:760px) { body.cyber-cute .player-tabs { gap: 20px; } body.cyber-cute .growth-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } body.cyber-cute .growth-stats>div { padding: 16px 10px; } body.cyber-cute .growth-stats>div:nth-child(odd) { padding-left: 0; } body.cyber-cute .growth-stats>div:nth-child(even) { border: 0; } body.cyber-cute .growth-stats strong { font-size: 23px; } }
@media(max-width:480px) { body.cyber-cute .growth-form .two-col { grid-template-columns: 1fr; } }
body.cyber-cute * { letter-spacing: 0; }
body.cyber-cute :is(button,a,input,select,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.cyber-cute .topbar { gap: 26px; min-height: 76px; padding: 14px max(24px,calc((100% - 1220px)/2)); border-bottom: 1px solid var(--line); background: #101014; box-shadow: none; backdrop-filter: none; }
body.cyber-cute .brand { gap: 11px; min-width: 230px; }
body.cyber-cute .brand-mark { width: 36px; height: 38px; padding: 0 4px; border: 0; border-radius: 0; color: #35202d; background: #ff8ac5; clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px)); }
body.cyber-cute .brand-mark span+span { border: 0; color: inherit; }
body.cyber-cute .brand-copy { gap: 3px; }
body.cyber-cute .brand-copy strong { color: var(--ink); font-size: 14px; }
body.cyber-cute .brand-copy small { color: var(--faint); font-size: 10px; }
body.cyber-cute .main-nav { justify-content: center; gap: 4px; min-width: 0; }
body.cyber-cute .main-nav a { flex-shrink: 0; padding: 10px 11px; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
body.cyber-cute .main-nav a:hover { color: var(--ink); background: var(--surface); }
body.cyber-cute .main-nav a.active { color: var(--accent); background: transparent; }
body.cyber-cute .main-nav a.active::after { right: 11px; bottom: -15px; left: 11px; height: 2px; background: var(--accent); }
body.cyber-cute .version-badge { gap: 6px; padding: 0; border: 0; color: var(--faint); background: transparent; font-size: 10px; }
body.cyber-cute .version-badge::before { width: 4px; height: 4px; background: var(--accent); content: ""; }
body.cyber-cute .page-shell { width: min(1220px,calc(100% - 48px)); max-width: 1220px; padding: 38px 0 28px; }
body.cyber-cute .intro-grid { grid-template-columns: minmax(0,1fr) 290px; gap: 48px; align-items: center; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; }
body.cyber-cute .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 10px; }
body.cyber-cute .eyebrow::before { width: 6px; height: 6px; background: #ff8ac5; content: ""; }
body.cyber-cute h1 { margin: 12px 0; color: var(--ink); font-size: 34px; line-height: 1.35; text-shadow: none; }
body.cyber-cute .lede { max-width: 630px; color: var(--muted); font-size: 13px; line-height: 1.9; }
body.cyber-cute .quick-links { gap: 24px; margin-top: 20px; font-size: 12px; }
body.cyber-cute :is(.quick-links a,.text-link) { color: var(--accent); }
body.cyber-cute .quick-links a span { margin-left: 5px; }
body.cyber-cute .membership-card { min-height: 0; padding: 12px 0 12px 26px; border: 0; border-left: 1px solid var(--line); border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; }
body.cyber-cute .membership-top { color: #ff8ac5; font-size: 10px; }
body.cyber-cute .plan-state { color: var(--faint); }
body.cyber-cute .price { margin: 12px 0 8px; color: var(--ink); font-size: 32px; font-variant-numeric: tabular-nums; }
body.cyber-cute .price small { color: var(--faint); }
body.cyber-cute .membership-card p { color: var(--muted); line-height: 1.8; }
body.cyber-cute .secure-line { color: #d8f58b; }
body.cyber-cute .secure-dot { width: 4px; height: 4px; border-radius: 0; background: #d8f58b; }
body.cyber-cute .notice { gap: 10px; margin-top: 20px; padding: 13px 15px; border-color: var(--line); border-left-color: var(--accent); border-radius: 0 4px 4px 0; color: var(--muted); background: var(--surface); }
body.cyber-cute .notice strong { color: var(--ink); font-size: 12px; }
body.cyber-cute .notice p { color: var(--muted); font-size: 12px; line-height: 1.8; }
body.cyber-cute .notice-mark { flex-basis: 24px; width: 24px; height: 24px; border-radius: 3px; color: var(--accent); background: var(--accent-soft); }
body.cyber-cute .notice.error { border-color: var(--line); border-left-color: var(--danger); background: #211c23; }
body.cyber-cute .notice.error .notice-mark { color: var(--danger); background: #3b2732; }
body.cyber-cute .notice.success .notice-mark { color: #122526; background: var(--accent); }
body.cyber-cute .workspace-grid { grid-template-columns: 320px minmax(0,1fr); gap: 28px; align-items: stretch; margin-top: 28px; }
body.cyber-cute .panel { padding: 0; border: 0; color: var(--ink); background: transparent; box-shadow: none; }
body.cyber-cute .access-panel { padding-right: 28px; border-right: 1px solid var(--line); }
body.cyber-cute .panel-heading { align-items: center; margin-bottom: 16px; }
body.cyber-cute .section-kicker { color: var(--accent); font-size: 10px; }
body.cyber-cute .panel-heading h2 { margin-top: 6px; color: var(--ink); font-size: 19px; }
body.cyber-cute :is(.panel-note,.equipment-help) { margin: 0 0 18px; color: var(--faint); font-size: 12px; line-height: 1.8; }
body.cyber-cute .status-pill { min-height: 23px; padding: 3px 7px; border: 1px solid #3b5a57; border-radius: 3px; color: var(--accent); background: #20302f; font-size: 10px; }
body.cyber-cute .status-pill.muted { border-color: var(--line); color: var(--faint); background: var(--surface); }
body.cyber-cute .form-stack { gap: 13px; }
body.cyber-cute .form-stack label { gap: 7px; color: var(--muted); font-size: 12px; font-weight: 500; }
body.cyber-cute :is(.form-stack input,.own-characters select) { min-width: 0; min-height: 42px; border: 1px solid #45414e; border-radius: 4px; color: var(--ink); background: var(--surface); }
body.cyber-cute .form-stack input::placeholder { color: #898491; }
body.cyber-cute .form-stack input:focus { border-color: var(--accent); outline: 2px solid #294545; }
body.cyber-cute .form-actions { flex-wrap: wrap; }
body.cyber-cute :is(.form-actions button,.secondary,.membership-action) { min-height: 39px; padding: 9px 13px; border: 1px solid #45414e; border-radius: 4px; font-size: 12px; }
body.cyber-cute :is(.primary,.membership-action) { color: #142726; border-color: #a4f6f1; background: var(--accent); box-shadow: 0 2px 0 #377b78; }
body.cyber-cute :is(.primary,.membership-action):hover { color: #142726; border-color: #c4fff9; background: #a3f5ee; }
body.cyber-cute .form-actions .primary { flex: 1; }
body.cyber-cute .secondary { color: var(--accent); background: #203335; border-color: #395958; }
body.cyber-cute .secondary:hover { color: var(--ink); background: #294241; border-color: var(--accent); }
body.cyber-cute .quiet { min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--surface); font-size: 11px; }
body.cyber-cute .quiet:hover { color: var(--ink); background: #292631; border-color: #696473; }
body.cyber-cute .text-button { color: #ff8ac5; }
body.cyber-cute .session-tools { margin-top: 17px; color: var(--muted); }
body.cyber-cute .session-tools :is(summary,p) { color: var(--faint); }
body.cyber-cute .session-tools summary:hover { color: var(--accent); }
body.cyber-cute .rule { margin: 24px 0; background: var(--line); }
body.cyber-cute .own-characters { margin: 0 0 20px; padding: 0; border: 0; }
body.cyber-cute .form-message { color: var(--faint); line-height: 1.8; }
body.cyber-cute .form-message.error { color: var(--danger); }
body.cyber-cute .profile-panel { grid-row: auto; }
body.cyber-cute .profile-summary { padding: 18px 0; border: 0; border-block: 1px solid var(--line); background: transparent; }
body.cyber-cute .profile-summary strong { color: var(--ink); font-size: 24px; }
body.cyber-cute .profile-summary span { color: var(--muted); }
body.cyber-cute .score-grid { gap: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
body.cyber-cute .score-cell { padding: 16px 18px; background: transparent; }
body.cyber-cute .score-cell:first-child { padding-left: 0; border-right: 1px solid var(--line); }
body.cyber-cute .score-cell strong { margin: 5px 0; color: #ff8ac5; font-size: 30px; }
body.cyber-cute .score-cell:nth-child(2) strong { color: #d8f58b; }
body.cyber-cute :is(.score-cell span,.profile-meta) { color: var(--muted); }
body.cyber-cute .score-cell small { color: var(--faint); }
body.cyber-cute .profile-meta b { color: var(--ink); }
body.cyber-cute .subheading h3 { color: var(--ink); font-size: 14px; }
body.cyber-cute :is(.subheading span,#equipment-status) { color: var(--faint); font-size: 11px; }
body.cyber-cute .ability-panel { gap: 16px; }
body.cyber-cute .ability-group { padding: 0; border-top: 2px solid #45414e; background: transparent; }
body.cyber-cute .ability-group:first-child { border-top-color: var(--accent); }
body.cyber-cute .ability-group:nth-child(2) { border-top-color: #ff8ac5; }
body.cyber-cute .ability-group:nth-child(3) { border-top-color: #d8f58b; }
body.cyber-cute .ability-row { padding: 9px 0; border-color: var(--line); font-size: 12px; }
body.cyber-cute .ability-row dt { color: var(--muted); }
body.cyber-cute .ability-row dd { color: var(--ink); }
body.cyber-cute .ability-row.resource-hp dd { color: #ff8ac5; }
body.cyber-cute .ability-row.resource-mp dd { color: var(--accent); }
body.cyber-cute .primary-stat dd { color: #d8f58b; font-size: 16px; }
body.cyber-cute .loadout-layout { gap: 16px; }
body.cyber-cute .equipment-slot { min-height: 126px; border-color: var(--line); border-radius: 4px; color: var(--ink); background: var(--surface); }
body.cyber-cute .equipment-slot.is-selected,body.cyber-cute .equipment-slot:hover:not(:disabled) { border-color: var(--accent); background: #20302f; }
body.cyber-cute .slot-label { color: var(--faint); }
body.cyber-cute .slot-name { font-size: 12px; line-height: 1.7; }
body.cyber-cute .slot-score { color: #d8f58b; font-size: 12px; }
body.cyber-cute .slot-empty { color: #666170; }
body.cyber-cute .loadout-icon { color: var(--accent); }
body.cyber-cute .equipment-detail { padding: 17px; border: 1px solid var(--line); border-top: 2px solid #ff8ac5; border-radius: 4px; background: var(--surface); }
body.cyber-cute .equipped-title h4 { color: var(--ink); font-size: 16px; }
body.cyber-cute .equipped-score { color: var(--muted); }
body.cyber-cute .equipped-score strong { color: #ff8ac5; }
body.cyber-cute .equipped-stats .ability-row { font-size: 13px; }
body.cyber-cute .natural-range { color: var(--accent); font-size: 11px; }
body.cyber-cute .shop-price dd { color: #d8f58b; }
body.cyber-cute .scroll-candidates { border-color: var(--line); }
body.cyber-cute .scroll-candidates p { color: var(--muted); }
body.cyber-cute .table-wrap { border-color: var(--line); border-radius: 4px; }
body.cyber-cute .table-wrap th { color: var(--muted); background: #22212a; }
body.cyber-cute .table-wrap td { border-color: var(--line); color: var(--ink); background: var(--surface); }
body.cyber-cute .table-score { color: var(--accent); }
body.cyber-cute .empty-panel { align-self: stretch; min-height: 420px; padding: 32px; color: var(--muted); background: transparent; }
body.cyber-cute .empty-icon { width: 48px; height: 48px; margin-bottom: 18px; border: 1px solid #665061; border-radius: 6px; color: #ff8ac5; background: #30232e; }
body.cyber-cute .empty-panel h2 { margin-bottom: 10px; color: var(--ink); font-size: 17px; }
body.cyber-cute .empty-panel p { max-width: 320px; margin-bottom: 20px; line-height: 1.9; }
body.cyber-cute .empty-panel .text-link { font-size: 12px; }
body.cyber-cute .page-footer { justify-content: space-between; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); }
body.cyber-cute .page-footer a { color: var(--accent); }
@media (max-width: 1000px) {
  body.cyber-cute .topbar { flex-wrap: wrap; gap: 12px; }
  body.cyber-cute .brand { flex: 1; }
  body.cyber-cute .main-nav { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; }
  body.cyber-cute .main-nav a.active::after { bottom: 0; }
  body.cyber-cute .intro-grid { grid-template-columns: minmax(0,1fr) 240px; gap: 28px; }
  body.cyber-cute .workspace-grid { grid-template-columns: 290px minmax(0,1fr); gap: 24px; }
  body.cyber-cute .access-panel { padding-right: 24px; }
  body.cyber-cute .profile-panel { grid-column: 2; grid-row: 1; }
  body.cyber-cute .equipment-slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body.cyber-cute .intro-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  body.cyber-cute .membership-card { grid-template-columns: 1fr auto; column-gap: 20px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
  body.cyber-cute .membership-top { grid-column: 1; align-self: center; }
  body.cyber-cute .price { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 28px; }
  body.cyber-cute .membership-card p { grid-column: 1; margin: 6px 0 10px; }
  body.cyber-cute .membership-action { grid-column: 1 / -1; }
  body.cyber-cute .secure-line { grid-column: 1 / -1; }
  body.cyber-cute .workspace-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
  body.cyber-cute .access-panel { padding-right: 0; border-right: 0; }
  body.cyber-cute .profile-panel { grid-column: auto; grid-row: auto; }
  body.cyber-cute .empty-panel { min-height: 250px; padding: 28px 16px; border-top: 1px solid var(--line); }
  body.cyber-cute .two-col { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  body.cyber-cute .topbar { min-height: 66px; padding: 12px 16px 7px; }
  body.cyber-cute .brand { min-width: 0; }
  body.cyber-cute .brand-copy strong { font-size: 13px; }
  body.cyber-cute .main-nav { gap: 0; }
  body.cyber-cute .main-nav a { padding: 10px 8px; font-size: 11px; }
  body.cyber-cute .page-shell { width: calc(100% - 32px); padding: 28px 0 24px; }
  body.cyber-cute h1 { font-size: 27px; }
  body.cyber-cute .intro-grid { padding-bottom: 24px; }
  body.cyber-cute .quick-links { gap: 20px; }
  body.cyber-cute .membership-card { column-gap: 12px; }
  body.cyber-cute .membership-top { flex-wrap: wrap; gap: 6px 10px; }
  body.cyber-cute .membership-card p { max-width: 200px; }
  body.cyber-cute .score-cell strong { font-size: 26px; }
  body.cyber-cute .equipment-slot { min-height: 126px; padding: 8px; }
}

/* RELEASE BRAND IDENTITY */
body.cyber-cute .site-brand-mark,
body.cyber-cute .brand-mark,
.access-gate .brand-mark,
.ops-sidebar .brand-mark,
.brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  overflow: visible;
}
.site-brand-mark img,
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.cyber-cute .site-footer-brand .site-brand-mark.small {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
@media (max-width: 600px) {
  body.cyber-cute .site-brand-mark,
  body.cyber-cute .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}
.owner-login{margin-top:18px;padding-top:16px;border-top:1px solid #34333e}.owner-login summary{cursor:pointer;color:#aeb4c2;font-size:13px;padding:8px 0}.owner-login form{padding-top:12px}.owner-login input{min-width:0;max-width:100%}
body.cyber-cute .payment-methods input[type="radio"]{appearance:auto;flex:0 0 16px;width:16px;height:16px;min-width:16px;min-height:16px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;accent-color:#75e1cf}
body.cyber-cute .checkout-dialog button{min-height:40px}
.service-action-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:24px 0;border-block:1px solid var(--line);margin-bottom:24px}.service-action-section[hidden]{display:none}.service-action-section h2,.checkout-dialog h2{font-size:20px;margin:6px 0 12px}.service-action-section p{color:var(--muted);line-height:1.7}.service-facts{margin:0 0 16px;display:grid;gap:10px}.service-facts>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;font-size:13px}.service-facts dt{color:var(--muted)}.service-facts dd{margin:0;overflow-wrap:anywhere}.service-action-buttons{display:flex;gap:12px;flex-wrap:wrap}.checkout-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #595363;border-radius:8px;background:#191a21;color:#f3f5f7;padding:24px;box-shadow:0 20px 80px #0009}.checkout-dialog::backdrop{background:#080a10b8}.checkout-dialog .panel-heading{margin:0}.checkout-price{font-size:28px;color:#a4eddf}.payment-methods{border:0;padding:0;margin:0;display:flex;gap:12px;flex-wrap:wrap}.payment-methods legend{font-size:13px;color:#b3b7c2;margin-bottom:12px}.payment-methods label{flex:1;display:flex;align-items:center;gap:9px;border:1px solid #434654;border-radius:4px;padding:14px;cursor:pointer}.payment-methods label:has(:checked){border-color:#75e1cf;background:#1f3535}.payment-methods input{width:16px;height:16px;accent-color:#75e1cf}.checkout-dialog .form-message{min-height:44px;line-height:1.6}.checkout-dialog button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:600px){.service-action-section{grid-template-columns:minmax(0,1fr);gap:14px}.checkout-dialog{padding:20px}.service-facts>div{grid-template-columns:76px minmax(0,1fr)}}