/* Copyright 2026 massivehadron.com ltd. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;
  font: 16px Barlow, system-ui, sans-serif;
  color: #eef5f7;
  background: #101820;
  --text: #eef5f7;
  --muted: #a6bac5;
  --panel: #142128;
  --border: #31434c;
  --accent: #87e2ce;
  --danger: #ff9f9e;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100dvh;
  padding: 0 clamp(8px, 3vw, 42px) 18px;
  background: radial-gradient(ellipse at 50% 14%, #253642, transparent 72%), #101820;
}
button, a { -webkit-tap-highlight-color: transparent; }
button, .action-link {
  font: 600 1rem Barlow, system-ui, sans-serif;
  color: var(--text);
  background: #21333d;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 13px;
  min-height: 39px;
  cursor: pointer;
}
button:hover:not(:disabled), .action-link:hover { background: #304753; }
button:disabled { opacity: .58; cursor: default; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid #adebdc; outline-offset: -2px; }
button.primary { background: var(--accent); color: #092522; border-color: transparent; }
button.primary:hover:not(:disabled) { background: #aef1e2; }
button.danger, .negative { color: var(--danger); }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
.muted, small { color: var(--muted); }
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 1260px; min-height: 64px; margin: auto; padding-inline: 8px;
}
.masthead h1 { font-size: clamp(1rem, 2vw, 1.28rem); font-weight: 700; }
.portal-link { text-decoration: none; font-weight: 600; }
.portal-link:hover { text-decoration: underline; }
.device {
  position: relative;
  display: flex; flex-direction: column;
  width: min(100%, 1260px); margin: auto;
  height: clamp(595px, calc(100dvh - 84px), 860px);
  padding: 18px 18px 5px;
  border: 1px solid #4d5b65; border-radius: 29px;
  background: linear-gradient(145deg, #3c4852 0%, #1a252e 23%, #151d25 69%, #273643);
  box-shadow: 0 18px 54px #0009, inset 0 0 0 3px #0c12186b;
}
.camera {
  position: absolute; top: 6px; left: 50%; width: 7px; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 36% 37%, #537088, #020407 64%);
}
.glass {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid #080d10; border-radius: 13px; background: #10191e;
}
.status-bar {
  flex: none; display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; height: 34px; padding: 0 14px;
  color: #dbe8ec; background: #0a1116; font: 500 .76rem var(--mono);
}
#app-name { text-align: center; color: #a7c1cc; }
.battery { display: flex; justify-content: end; align-items: center; gap: 6px; }
.battery i { width: 20px; height: 10px; border: 1px solid #a7bcc5; border-radius: 2px; padding: 1px; }
.battery i::before { content: ''; display: block; height: 100%; width: 20%; background: #ffb989; }
.display { min-height: 0; position: relative; flex: 1; }
.home, .app-view, .app-frame, .waiting { width: 100%; height: 100%; }
.home {
  display: flex; flex-direction: column; justify-content: center; touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(135deg, #09161ed9, #102a339e 55%, #10232edb), var(--wallpaper, none) center / cover;
}
.home-pages { flex: 1; min-height: 0; overflow: hidden; overflow: clip; }
.slide-track {
  display: flex; width: 100%; height: 100%;
  transform: translate3d(var(--slide-offset, 0%), 0, 0);
}
.home-page { flex: 0 0 100%; min-width: 0; }
.app-grid {
  display: grid; width: min(88%, 860px); height: 100%; margin: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(6px, 2vw, 36px); padding: clamp(19px, 5vh, 54px) 0 8px;
}
.app-icon {
  position: relative; align-self: center; justify-self: stretch; display: grid; justify-items: center;
  gap: 10px; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: white;
  font-size: clamp(.8rem, 1.65vw, 1.05rem); line-height: 1.1; text-align: center; text-shadow: 0 2px 5px #000;
}
.app-icon:hover:not(:disabled) { background: #d7faff16; }
.icon-art {
  position: relative; display: grid; place-items: center;
  flex: none; width: clamp(48px, 9vw, 100px); aspect-ratio: 1; border-radius: 24%;
  background: linear-gradient(145deg, #315b70, #172933);
  box-shadow: 0 5px 14px #0006, inset 0 0 0 1px #dbf7ff30;
  font-weight: 700; text-shadow: none;
}
.icon-art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.icon-image { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.icon-art img.botflix { transform: scale(1.28); }
.icon-art img.snapbot { transform: scale(1.4); }
.offloaded .icon-art img { filter: grayscale(1) brightness(.73); }
.offloaded .icon-label { color: #bfd0d6; }
.cloud, .badge {
  position: absolute; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px;
  font: 500 .73rem var(--mono); padding-inline: 4px;
}
.cloud { right: -5px; bottom: -4px; color: #19333b; background: #d2e2e8; }
.badge { right: -6px; top: -5px; color: white; background: #b82e48; }
.page-dots { display: flex; justify-content: center; flex: none; padding-bottom: 12px; }
.page-dots button { display: grid; place-items: center; width: 42px; border: 0; background: transparent; }
.page-dots button::after { content: ''; width: 9px; height: 9px; border: 1px solid #d4e8ee; border-radius: 50%; }
.page-dots button[aria-current="page"]::after { background: #d4e8ee; }
.home-button {
  flex: none; align-self: center; display: grid; place-items: center; min-height: 32px; width: 32px;
  margin-top: 4px; border: 1px solid #61727c; border-radius: 50%; padding: 0; background: #141e27;
}
.home-button:active { transform: translateY(1px); }
.home-button i { border: 1px solid #8ca4af; border-radius: 3px; width: 11px; height: 11px; }
.app-view { background: #111c22; overflow: auto; }
.app-frame { display: block; border: 0; background: #10191e; }
.app-content { width: min(100%, 890px); margin: auto; padding: clamp(12px, 3vw, 27px); }
.app-heading {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin-bottom: 17px;
}
.app-heading h2 { flex: 1; min-width: max-content; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.waiting { display: grid; place-content: center; justify-items: center; gap: 16px; padding: 20px; text-align: center; }
.actions, .tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tabs { margin-bottom: 12px; }
.tabs button[aria-pressed="true"] { color: var(--accent); border-color: #599a89; background: #1e3a3a; }
.rows { display: grid; gap: 9px; }
.row {
  display: flex; gap: 13px; align-items: center; min-width: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 11px 13px;
}
.row .icon-art { width: 50px; }
.row h3 { font-size: 1.05rem; }
.row p { line-height: 1.4; }
.row-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.avatar {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: none; width: 42px;
  aspect-ratio: 1; border-radius: 50%; color: white; font-weight: 700;
}
.avatar img { position: absolute; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.row-button {
  width: 100%; text-align: left; padding: 9px 11px; font-weight: 500;
  display: flex; align-items: center; gap: 11px; border-radius: 0; border-width: 0 0 1px; background: var(--panel);
}
.row-button[aria-pressed="true"] { background: #284239; }
.row-button .excerpt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-button .count { color: #092522; background: var(--accent); border-radius: 20px; padding: 2px 7px; font: 500 .75rem var(--mono); }
.split-view { display: grid; grid-template-columns: minmax(205px, .72fr) minmax(0, 1.5fr); height: 100%; }
.split-list { overflow: auto; background: var(--panel); border-right: 1px solid var(--border); }
.split-list h2 { font-size: 1.45rem; padding: 14px; }
.split-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.detail-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.detail-head .back { display: none; }
.detail-head .contact { flex: 1; display: flex; gap: 10px; align-items: center; text-align: left; min-width: 0; }
.detail-head small { display: block; }
.detail-empty { margin: auto; color: var(--muted); padding: 16px; }
.messages {
  flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 14px clamp(10px, 3vw, 28px); background: radial-gradient(ellipse at top, #183033, #111d22 75%);
}
.message { align-self: start; max-width: min(88%, 510px); border-radius: 10px 10px 10px 3px; padding: 7px 10px; background: #21353d; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.mine { align-self: end; border-radius: 10px 10px 3px 10px; background: #225044; }
.message.notice { align-self: center; color: #b7cbd1; font-size: .84rem; }
.message small { display: block; margin-top: 3px; text-align: right; font: .67rem var(--mono); }
.message .seen { color: #8ee6ff; }
.message .sender { display: block; color: var(--accent); margin-bottom: 2px; font-size: .86rem; }
.compose { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px; background: #17262c; border-top: 1px solid var(--border); }
.compose p { flex: 1; overflow-wrap: anywhere; }
.mail-app { container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; }
.mail-header {
  display: flex; align-items: center; gap: 10px; flex: none; min-height: 54px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.mail-header h2 { flex: 1; font-size: 1.45rem; }
.mail-header .icon-art { width: 34px; }
.mail-columns {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(138px, 21fr) minmax(180px, 32fr) minmax(0, 47fr);
  grid-template-rows: minmax(0, 1fr);
}
.mail-filters {
  display: flex; flex-direction: column; gap: 4px; padding: 9px;
  overflow: auto; border-right: 1px solid var(--border); background: #17252d;
}
.mail-filter {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex: none; text-align: left; padding: 8px 9px; border-color: transparent; background: transparent;
}
.mail-filter[aria-pressed="true"] { color: var(--accent); border-color: #599a89; background: #1e3a3a; }
.mail-filter-count { color: var(--accent); font: 500 .75rem var(--mono); }
.mail-list, .mail-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mail-list { border-right: 1px solid var(--border); background: var(--panel); }
.mail-list-header, .mail-preview-header { flex: none; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mail-list-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mail-list-header h3 { font-size: 1rem; }
.mail-messages, .mail-preview > .mail-body { flex: 1; min-height: 0; overflow: auto; }
.mail-messages .excerpt { white-space: normal; overflow-wrap: anywhere; }
.mail-subject, .mail-from { display: flex; gap: 8px 12px; align-items: baseline; justify-content: space-between; }
.mail-subject { align-items: flex-start; margin-bottom: 8px; }
.mail-subject h3 { font-size: clamp(1.08rem, 2vw, 1.35rem); overflow-wrap: anywhere; min-width: 0; }
.mail-subject button { flex: none; }
.mail-from { flex-wrap: wrap; }
.mail-from time, .mail-address { font-size: .86rem; overflow-wrap: anywhere; }
.mail-pane-nav { display: none; }
.mail-body { padding: 0 14px 14px; }
.mail-body p { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 12px; }
.mail-messages > .mail-body { padding-top: 14px; }
.mail-body .actions button { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.mail-body .link-button { padding: 0; min-height: 0; border: 0; background: transparent; text-decoration: underline; color: var(--accent); }
.statement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.statement th, .statement td { padding: 9px; text-align: left; border-bottom: 1px solid var(--border); }
.statement th { position: sticky; top: 0; background: #243439; }
.statement th:last-child, .statement td:last-child { text-align: right; }
.balance { background: #28281e; border: 1px solid #5c5332; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.balance output { display: block; font: 500 clamp(1.8rem, 5vw, 3rem) var(--mono); }
.accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; margin-bottom: 17px; }
.accounts .row { display: block; }
.gallery { height: 100%; display: flex; flex-direction: column; background: #060b0d; touch-action: pan-y; }
.gallery-stage { position: relative; flex: 1; min-height: 0; border: 0; background: #060b0d; padding: 0; overflow: hidden; border-radius: 0; }
.gallery-stage:hover:not(:disabled) { background: #060b0d; }
.gallery-stage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-stage > img, .gallery-stage .slide-track { position: absolute; inset: 0; }
.gallery-stage .slide-track { pointer-events: none; }
.gallery-stage .slide-track img { flex: 0 0 100%; min-width: 0; }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px; }
.gallery-controls output { min-width: 6ch; text-align: center; font: .86rem var(--mono); }
.love-card { width: min(100%, 390px); margin: auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #291f2a; touch-action: pan-y; }
.love-card img { width: 100%; height: clamp(180px, 44vh, 400px); object-fit: cover; object-position: center 38%; }
.love-card .placeholder { min-height: 130px; display: grid; place-items: center; }
.love-card .row-copy { padding: 14px; }
.love-actions { justify-content: center; margin-top: 12px; }
.store-capacity { font: .8rem var(--mono); }
.market .price { display: block; margin-block: 5px; font: 500 1rem var(--mono); color: var(--accent); }
.toast, .notification {
  position: absolute; z-index: 2; box-shadow: 0 4px 20px #0008;
  border: 1px solid #4e6876; border-radius: 11px; background: #152a34; color: var(--text);
}
.toast { left: 50%; bottom: 12px; translate: -50% 0; width: max-content; max-width: calc(100% - 24px); padding: 10px 14px; }
.notification { top: 42px; right: 8px; display: flex; width: min(380px, calc(100% - 16px)); }
.notification button { border: 0; background: transparent; text-align: left; }
.notification #open-notification { flex: 1; white-space: pre-line; }
dialog { width: min(445px, calc(100% - 28px)); max-height: 85dvh; border: 1px solid #4e6876; border-radius: 15px; color: var(--text); background: #17262f; padding: 20px; }
dialog::backdrop { background: #02070bc7; }
#prompt-text { margin: 12px 0 18px; line-height: 1.5; white-space: pre-line; }
#prompt-text progress { width: 100%; margin-top: 10px; accent-color: var(--accent); }
.contact-card { display: flex; gap: 13px; align-items: center; }
.contact-card .avatar { width: 74px; }
dialog .actions { justify-content: end; }
.action-link { text-decoration: none; }
.premium-entry { display: grid; gap: 8px; }
.premium-entry input {
  width: 100%; border: 1px solid #4e6876; border-radius: 8px; padding: 8px 10px;
  font: inherit; color: inherit; background: #111c22;
}
.premium-entry input[aria-invalid="true"] { border-color: var(--danger); }
.scratch-card { position: relative; width: min(100%, 680px); aspect-ratio: 1984 / 1152; margin: 18px auto; background: #1c4856 center / cover; border-radius: 10px; overflow: hidden; }
.scratch-grid { position: absolute; top: 28.12%; left: 40.52%; width: 55.15%; height: 53.13%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 1%; gap: 3%; background: #29223c; touch-action: none; }
.scratch-grid button { padding: 0; min-height: 0; border-color: #e5cf95; background: linear-gradient(150deg, #716b83, #ccc1d5, #7c748c); color: #262131; font-size: clamp(.6rem, 2vw, 1rem); }
.scratch-grid .revealed { background: #fbedd7; opacity: 1; }
.scratch-grid .winner { background: #d0f793; border-color: #87ce51; }
.fruit-board { display: grid; grid-template-columns: repeat(10, 1fr); width: min(100%, 56vh, 570px); margin: auto; gap: 2px; background: #3d2635; border: 4px solid #68464c; border-radius: 10px; padding: 4px; touch-action: none; }
.fruit-board button { display: grid; place-items: center; min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 4px; border: 0; background: #24192a; }
.fruit-board button:nth-child(even) { background: #301e31; }
.fruit-board button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #f6e69f; background: #573d4e; }
.fruit-board button.matched { background: #956167; }
.fruit-board button span { width: 92%; aspect-ratio: 1; background: url('./art/fruit-sheet.png') var(--fruit-position) 0 / 800% 800%; }
.fruit-status { text-align: center; min-height: 1.6em; margin: 9px 0; }
@container (max-width: 620px) {
  .mail-columns { grid-template-columns: minmax(0, 1fr); }
  .mail-columns:not([data-pane="filters"]) .mail-filters,
  .mail-columns:not([data-pane="list"]) .mail-list,
  .mail-columns:not([data-pane="detail"]) .mail-preview { display: none; }
  .mail-filters, .mail-list { border-right: 0; }
  .mail-pane-nav { display: inline-block; }
  .mail-filters > .mail-pane-nav, .mail-preview-header > .mail-pane-nav { margin-bottom: 8px; }
}
@media (max-width: 660px) {
  .masthead { min-height: 50px; }
  .device { height: max(510px, calc(100dvh - 66px)); padding: 15px 7px 3px; border-radius: 19px; }
  .status-bar { height: 30px; }
  .glass { border-radius: 10px; }
  .app-grid { width: 94%; }
  .app-icon { gap: 7px; }
  .row { flex-wrap: wrap; }
  .row > .actions { margin-left: auto; }
  .split-view { grid-template-columns: 1fr; }
  .split-view.has-detail .split-list, .split-view:not(.has-detail) .split-detail { display: none; }
  .detail-head .back { display: inline-block; }
  .notification { top: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .slide-track:not(.instant) { transition: transform var(--slide-duration, 280ms) ease-in-out; }
  .app-icon:hover .icon-art { transform: translateY(-2px); }
  .icon-art { transition: transform .15s ease; }
}