.pixel-glyph { display:none; }
.theme-option { min-height:86px; gap:15px; }
.theme-thumbnail { width:46px; height:62px; flex:none; border:1px solid var(--line); border-radius:9px; background-color:var(--surface-alt); background-size:cover; background-position:center; }
.theme-thumbnail.sea-salt { background-image:url('assets/sea-salt-wallpaper.jpg'); }
.theme-thumbnail.blackpink { background-image:url('assets/blackpink-wallpaper.jpg'); }
.theme-option-copy { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; }
.theme-option-copy strong { font-size:15px; font-weight:550; }
.theme-option-copy small { color:var(--muted); font-size:10px; line-height:1.6; }
.wallpaper-original { display:block; width:100%; height:auto; border-radius:0; }

:root[data-theme="sea-salt"] {
  --wallpaper:url('assets/sea-salt-wallpaper.jpg');
  --pixel-frame:url('assets/sea-salt-frame.svg?v=2');
  --pixel-line:#8daabc;
  --bar-bg:#ecf8fef5;
  --header-bg:#ecf8fee6;
  --panel-bg:#fffef5;
  --meter-track:#e1eaf0;
  --pixel-shadow:#7797ad30;
}
:root[data-theme="blackpink"] {
  color-scheme:dark;
  --bg:#1f1f1f; --surface:#282329; --surface-alt:#3c303a;
  --ink:#fce9f3; --muted:#c9a9bb; --line:#735667;
  --accent:#e5adca; --accent-dark:#f6c0dc; --tint:#543b4b; --soft:#362a33;
  --green:#ce99b8; --green-bg:#3e303c; --gold:#e6b5cb;
  --shadow:0 24px 90px #0004;
  --wallpaper:url('assets/blackpink-wallpaper.jpg');
  --pixel-frame:url('assets/blackpink-frame.svg?v=2');
  --pixel-line:#ad7992;
  --bar-bg:#211d23fa;
  --header-bg:#1f1f1fed;
  --panel-bg:#282329ed;
  --meter-track:#493443;
  --pixel-shadow:#0005;
}

/* Light pixel style: keep stepped frames, but use smooth text and thin vector icons. */
:root[data-pixel="true"] .app-shell {
  background-color:var(--bg);
  background-image:var(--wallpaper);
  background-size:cover;
  background-position:center;
  border-color:var(--pixel-line);
}
:root[data-pixel="true"] .telegram-bar,
:root[data-pixel="true"] .bottom-nav { background:var(--bar-bg); border-color:var(--pixel-line); }
:root[data-pixel="true"] .line-glyph { display:block; }
:root[data-pixel="true"] .pixel-glyph { display:none; }
:root[data-pixel="true"] .icon { fill:none; stroke:currentColor; stroke-width:1.5; shape-rendering:geometricPrecision; }
:root[data-pixel="true"] .preview-intro h1,
:root[data-pixel="true"] .page-head h1,
:root[data-pixel="true"] .context-percent,
:root[data-pixel="true"] .quota-value,
:root[data-pixel="true"] .days-number,
:root[data-pixel="true"] .telegram-title strong,
:root[data-pixel="true"] .room-name,
:root[data-pixel="true"] .section-title h2,
:root[data-pixel="true"] .card-kicker,
:root[data-pixel="true"] .nav-item,
:root[data-pixel="true"] .segmented button,
:root[data-pixel="true"] .anniversary-hero h2,
:root[data-pixel="true"] .modal-head h2,
:root[data-pixel="true"] .home-avatar,
:root[data-pixel="true"] .mini-avatar,
:root[data-pixel="true"] .post-avatar {
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:500;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:root[data-pixel="true"] .preview-intro h1 { font-size:48px; line-height:1.5; }
:root[data-pixel="true"] .brand-mark { font-family:inherit; font-weight:500; border-radius:0; border:1px solid var(--pixel-line); background:var(--surface); color:var(--accent); box-shadow:2px 2px 0 var(--pixel-shadow); }
:root[data-pixel="true"] .page-head { min-height:100px; padding:12px; margin:-6px -2px 22px; background:var(--header-bg); border-left:3px solid var(--pixel-line); }
:root[data-pixel="true"] .page-head h1 { font-size:24px; line-height:1.35; font-weight:600; }
:root[data-pixel="true"] .page-head p { font-size:11px; }
:root[data-pixel="true"] .telegram-title strong { font-size:16px; }
:root[data-pixel="true"] .telegram-title span { font:9px/20px -apple-system,'PingFang SC',sans-serif; letter-spacing:0; }
:root[data-pixel="true"] .home-avatar { width:56px; height:56px; border-radius:0; box-shadow:2px 2px 0 var(--pixel-shadow); border:1px solid var(--pixel-line); background:var(--soft); font-size:30px; transform:none; margin-right:1px; }
:root[data-pixel="true"] .home-avatar::after { content:'+'; font-family:ui-monospace,monospace; font-size:23px; top:-13px; right:-8px; color:var(--accent); }
:root[data-theme="blackpink"] .home-avatar { background-image:var(--wallpaper); background-size:98px auto; background-position:50% 70%; font-size:0; border-color:var(--accent); }
:root[data-pixel="true"] .card {
  border:6px solid transparent;
  border-image-source:var(--pixel-frame);
  border-image-slice:6 fill;
  border-image-width:6px;
  border-image-repeat:stretch;
  border-radius:0;
  background:none;
  box-shadow:none;
  filter:drop-shadow(1px 2px 0 var(--pixel-shadow));
}
:root[data-pixel="true"] button.card:hover { filter:drop-shadow(1px 2px 0 var(--pixel-shadow)); }
:root[data-pixel="true"] .context-card { padding:14px 15px; }
:root[data-pixel="true"] .card-kicker { font-size:14px; }
:root[data-pixel="true"] .context-numbers { margin-top:12px; }
:root[data-pixel="true"] .context-percent { font-size:44px; font-weight:550; letter-spacing:-1.5px; }
:root[data-pixel="true"] .context-percent span { font-size:24px; }
:root[data-pixel="true"] .context-note { font-size:10px; }
:root[data-pixel="true"] .context-note strong { font-size:11px; }
:root[data-pixel="true"] .quota-card { margin-top:15px; padding:12px 0; }
:root[data-pixel="true"] .quota-half { padding:0 13px; }
:root[data-pixel="true"] .quota-value { font-size:30px; }
:root[data-pixel="true"] .quota-value small { font-family:-apple-system,'PingFang SC',sans-serif; }
:root[data-pixel="true"] .meter { height:9px; position:relative; border-radius:0; background:var(--meter-track); }
:root[data-pixel="true"] .meter-fill { border-radius:0; }
:root[data-pixel="true"] .meter::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to right,transparent 0 calc(10% - 2px),var(--meter-track) calc(10% - 2px) 10%); }
:root[data-pixel="true"] .context-card .meter { height:10px; margin:14px 0 11px; }
:root[data-pixel="true"] .quota-half .meter { height:6px; }
:root[data-pixel="true"] .section-title { background:var(--header-bg); padding:9px 10px; border-left:3px solid var(--pixel-line); margin:20px 0 13px; }
:root[data-pixel="true"] .section-title h2 { font-size:14px; }
:root[data-pixel="true"] .section-title > span { font:8px ui-monospace,monospace; letter-spacing:.5px; }
:root[data-pixel="true"] .room-grid { gap:14px; margin-top:18px; }
:root[data-pixel="true"] .room-card { padding:13px 12px; min-height:112px; }
:root[data-pixel="true"] .room-icon { width:32px; height:28px; margin-bottom:8px; }
:root[data-pixel="true"] .room-icon .icon { width:26px; height:26px; }
:root[data-pixel="true"] .room-name { font-size:15px; }
:root[data-pixel="true"] .room-desc { font-size:10px; line-height:1.6; }
:root[data-pixel="true"] .room-badge { top:10px; right:9px; border-radius:0; padding:3px 5px; border:1px solid var(--line); background:var(--soft); }
:root[data-pixel="true"] .terminal-entry { margin-top:14px; padding:10px 12px; }
:root[data-pixel="true"] .terminal-icon { border-radius:0; border:1px solid var(--line); background:var(--soft); }
:root[data-pixel="true"] .quiet-footer { background:var(--header-bg); padding:7px; width:fit-content; max-width:100%; margin:16px auto 0; }
:root[data-pixel="true"] .preview-label { border-radius:0; border-color:var(--line); background:var(--surface); }
:root[data-pixel="true"] .preview-label::before { border-radius:0; }
:root[data-pixel="true"] .nav-item { font-size:12px; }
:root[data-pixel="true"] .nav-item,:root[data-pixel="true"] .nav-item .nav-symbol { transition:none; }
:root[data-pixel="true"] .nav-item.active .nav-symbol { box-shadow:none; background:none; outline:none; }
:root[data-pixel="true"] .nav-item .icon { width:20px; height:20px; }
:root[data-pixel="true"] .nav-symbol { height:20px; }
:root[data-pixel="true"] .segmented { border:1px solid var(--pixel-line); border-radius:0; background:var(--bar-bg); padding:4px; gap:6px; }
:root[data-pixel="true"] .segmented button { border-radius:0; font-size:14px; }
:root[data-pixel="true"] .segmented button.active { box-shadow:2px 2px 0 var(--pixel-shadow); background:var(--soft); outline:1px solid var(--line); }
:root[data-pixel="true"] .mini-avatar,:root[data-pixel="true"] .post-avatar { border-radius:0; border:1px solid var(--pixel-line); background:var(--soft); color:var(--accent-dark); }
:root[data-pixel="true"] .mini-avatar { font-size:18px; }
:root[data-pixel="true"] .post-avatar { font-size:24px; }
:root[data-pixel="true"] .mail-tabs { padding:0 10px; background:var(--header-bg); border:1px solid var(--line); margin-top:18px; }
:root[data-pixel="true"] .letter { padding:17px 15px; margin-top:13px; background:var(--panel-bg); border:1px solid var(--pixel-line); box-shadow:3px 3px 0 var(--pixel-shadow); }
:root[data-pixel="true"] .unread-dot { border-radius:0; }
:root[data-pixel="true"] .search-field,
:root[data-pixel="true"] .letter-paper,
:root[data-pixel="true"] .comment-form input,
:root[data-pixel="true"] .comment-form button,
:root[data-pixel="true"] .session-picker,
:root[data-pixel="true"] .form-label input,
:root[data-pixel="true"] .form-label select,
:root[data-pixel="true"] .primary-button,
:root[data-pixel="true"] .secondary-button,
:root[data-pixel="true"] dialog { border-radius:0; border-color:var(--pixel-line); }
:root[data-pixel="true"] .back-link { background:var(--header-bg); padding:10px; margin-bottom:16px; }
:root[data-pixel="true"] .mail-end,:root[data-pixel="true"] .empty { padding:15px; background:var(--header-bg); }
:root[data-pixel="true"] .daily-top { background:var(--header-bg); padding:8px 10px; }
:root[data-pixel="true"] .post { padding:15px 13px; margin-bottom:20px; }
:root[data-pixel="true"] .post-art { border-radius:0; background:var(--soft); color:var(--ink); border:1px dashed var(--pixel-line); }
:root[data-pixel="true"] .post-art-text { font-family:inherit; font-size:22px; letter-spacing:.5px; }
:root[data-pixel="true"] .plant { color:var(--accent); }
:root[data-pixel="true"] .anniversary-hero { padding:24px 18px; }
:root[data-pixel="true"] .anniversary-hero h2 { font-size:24px; }
:root[data-pixel="true"] .days-number { font-size:60px; }
:root[data-pixel="true"] .days-number small { font-family:-apple-system,'PingFang SC',sans-serif; }
:root[data-pixel="true"] .event-list { background:var(--panel-bg); padding:0 12px; border:1px solid var(--pixel-line); }
:root[data-pixel="true"] .event:last-child { border-bottom:0; }
:root[data-pixel="true"] .event-icon { border-radius:0; border:1px solid var(--line); background:var(--soft); }
:root[data-pixel="true"] .terminal-status { width:fit-content; background:var(--header-bg); padding:7px 8px; }
.terminal-status-row { display:flex; align-items:center; justify-content:space-between; margin:4px 0; }
.terminal-status-row .terminal-status { margin:0; }
.terminal-status-row .icon-button { background:var(--header-bg); border-radius:0; }
:root[data-pixel="true"] .terminal-status::before { border-radius:0; }
:root[data-pixel="true"] .terminal-window { border:2px solid var(--pixel-line); border-radius:0; background:#20232a; }
:root[data-theme="blackpink"] .terminal-window { background:#1f1d23; }
:root[data-pixel="true"] .terminal-dots i,
:root[data-pixel="true"] .terminal-form button,
:root[data-pixel="true"] .terminal-keys button { border-radius:0; }
:root[data-pixel="true"] .terminal-form input { font-size:13px; }
:root[data-pixel="true"] .modal-head h2 { font-size:21px; }
:root[data-pixel="true"] dialog { border-width:2px; box-shadow:6px 6px 0 var(--pixel-shadow); }
:root[data-pixel="true"] .theme-thumbnail { border-radius:0; border-color:var(--pixel-line); }
:root[data-pixel="true"] .theme-option-copy strong { font-family:inherit; font-size:16px; font-weight:550; }
:root[data-pixel="true"] #toast { border-radius:0; border:1px solid var(--pixel-line); }
@media (max-width:370px) {
  :root[data-pixel="true"] .page { padding-left:14px; padding-right:14px; }
  :root[data-pixel="true"] .page-head { padding:10px; gap:8px; }
  :root[data-pixel="true"] .page-head h1 { font-size:24px; }
  :root[data-pixel="true"] .home-avatar { width:44px; height:44px; font-size:24px; flex:none; }
  :root[data-theme="blackpink"] .home-avatar { font-size:0; }
  :root[data-pixel="true"] .context-card { padding:12px 10px; }
  :root[data-pixel="true"] .context-percent { font-size:36px; }
  :root[data-pixel="true"] .context-note { font-size:9px; }
  :root[data-pixel="true"] .context-note strong { font-size:10px; }
  :root[data-pixel="true"] .quota-half { padding:0 9px; }
  :root[data-pixel="true"] .room-grid { gap:12px; }
  :root[data-pixel="true"] .room-card { padding:12px 9px; }
  :root[data-pixel="true"] .room-name { font-size:14px; }
  :root[data-pixel="true"] .room-desc { font-size:9px; }
  :root[data-pixel="true"] .room-badge { font-size:8px; }
  :root[data-pixel="true"] .section-title > span { display:none; }
  :root[data-pixel="true"] .post-art-text { font-size:18px; }
}