:root { color-scheme: light; --paper:#f3f6fa; --surface:#fff; --ink:#172c45; --muted:#607589; --line:#d8e2ec; --accent:#16669f; --accent-ink:#144f7d; }
body { background:#f3f6fa; color:#172c45; }
button,input,textarea,select { font:inherit; }
button { min-height:44px; border:1px solid #d4dfeb; border-radius:7px; padding:9px 13px; background:white; color:#244766; cursor:pointer; }
button:hover { border-color:#6e99bf; background:#f4f9ff; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:#16669f; border-color:#16669f; color:white; font-weight:650; }
button.primary:hover { background:#105386; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #398ad0; outline-offset:3px; }
[hidden] { display:none !important; }
.builder-shell { max-width:1240px; width:calc(100% - 3rem); margin:40px auto 70px; }
.builder-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.builder-heading h1 { max-width:none; font-size:clamp(26px,3vw,32px); line-height:1.15; font-weight:600; letter-spacing:-.025em; margin:8px 0; }
.draft-label { font-size:13px; white-space:nowrap; color:#687d92; }
.builder-intro { max-width:800px; font-size:16px; line-height:1.65; color:#586e83; }
.draft-warning { border-left:3px solid #ba873a; background:#fff9ee; padding:13px 17px; font-size:14px; line-height:1.6; color:#755521; margin:22px 0; }
.builder-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:24px; }
.menu-panel,.transfer-panel { border:1px solid #d8e2ec; border-radius:10px; background:white; overflow:hidden; }
.menu-top { min-height:66px; background:#16669f; color:white; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 17px; }
.menu-top h2 { font-size:20px; margin:0; text-align:center; overflow-wrap:anywhere; }
.menu-top button { color:white; border-color:#ffffff55; background:transparent; font-size:13px; flex-shrink:0; }
.menu-top button:hover { background:#ffffff20; }
.menu-toolbar { padding:14px 17px 0; display:flex; align-items:center; flex-wrap:wrap; gap:12px; justify-content:space-between; }
.toolbar-group { display:flex; gap:7px; flex-wrap:wrap; }
.menu-toolbar button { font-size:14px; }
.menu-toolbar button[aria-pressed=true] { background:#16669f; color:white; border-color:#16669f; }
#item-count { font-size:13px; color:#667b8e; }
.grid-help { margin:13px 17px; color:#607589; font-size:14px; min-height:40px; line-height:1.5; }
.builder-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:0 17px 17px; }
.tile { position:relative; min-width:0; aspect-ratio:1; border-radius:8px; border:1px solid #d7e2ec; background:#fff; overflow:hidden; }
.tile.empty { border:1px dashed #d2dde7; background:#fbfcfe; }
.tile-main { height:100%; width:100%; border:0; border-radius:0; display:grid; align-content:center; justify-items:center; gap:7px; padding:12px 7px 29px; background:transparent; color:inherit; }
.tile-main:hover { background:#00000009; }
.tile.empty .tile-main { color:#8397a9; padding-bottom:12px; }
.tile-main strong { font-size:clamp(12px,1.25vw,16px); line-height:1.3; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:center; }
.tile-edit { position:absolute; bottom:0; right:0; left:0; min-height:44px; padding:3px 7px; font-size:12px; border:0; border-radius:0; background:#ffffffbb; color:#254660; }
.tile:not(.empty) .tile-main { padding-bottom:47px; }
.tile.reserved { border-style:dashed; background:#f3f6f9; color:#71869a; }
.tile-symbol { width:32px; height:32px; border-radius:7px; display:grid; place-items:center; color:#517899; background:#eaf1f6; font-size:23px; }
.tile-price { font-size:12px; }
.tile-flags { font-size:10px; font-weight:750; }
.tile.selected { outline:3px solid #227bbb; outline-offset:-3px; }
.tile.drop-target { outline:3px solid #227bbb; outline-offset:-3px; background:#e8f5ff; }
.tile.dragging { opacity:.6; }
.is-arranging .tile-main { touch-action:none; user-select:none; -webkit-user-select:none; padding-bottom:12px; }
.is-arranging .tile:not(.empty) .tile-main { padding-bottom:12px; }
.is-arranging .tile-edit { display:none; }
.grid-pagination,.menu-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 17px 17px; }
.grid-pagination { font-size:13px; }
.menu-bottom { border-top:1px solid #e0e7ef; padding-top:15px; }
.danger-link { color:#9e3934; }
.transfer-panel { padding:24px; }
.transfer-panel h2 { font-size:22px; margin:9px 0 16px; }
.transfer-panel h3 { font-size:17px; }
.transfer-panel p { font-size:14px; line-height:1.65; color:#607589; }
.transfer-panel > button { width:100%; }
.transfer-panel button span { font-size:12px; font-weight:400; margin-left:8px; }
.transfer-panel hr { border:0; border-top:1px solid #dae3ec; margin:25px 0; }
.consent { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.65; margin:18px 0; }
.consent input { width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.consent a { text-decoration:underline; color:#16669f; }
.transfer-note { border-top:1px solid #dae3ec; margin-top:24px; padding-top:16px; font-size:13px; }
.transfer-note p { font-size:13px; }
#transfer-result { margin-top:20px; }
#qr { display:block; width:100%; max-width:260px; height:auto; margin:auto; image-rendering:pixelated; }
#transfer-result label { font-size:13px; display:block; }
#import-link { width:100%; margin:8px 0; border:1px solid #cddce9; border-radius:6px; padding:10px; box-sizing:border-box; font-size:13px; }
.status { overflow-wrap:anywhere; }
.status.error,#stale,#form-error { color:#a34034; }
.announcement-preview { padding:13px 17px; overflow:hidden; font-size:18px; text-align:center; background:#fafcfe; border-bottom:1px solid #e3ebf2; }
.announcement-preview span { display:inline-block; white-space:pre-wrap; overflow-wrap:anywhere; }
.announcement-preview.scrolling span { white-space:nowrap; padding-left:100%; animation:notice-scroll var(--duration,8s) linear infinite; }
@keyframes notice-scroll { to { transform:translateX(-100%); } }
dialog { border:1px solid #c7d5e3; border-radius:12px; width:min(460px,calc(100% - 32px)); max-height:85dvh; padding:0; color:#203954; box-shadow:0 20px 70px #142c4530; }
dialog::backdrop { background:#10293d60; }
dialog form { padding:22px; }
dialog header,dialog footer { display:flex; justify-content:space-between; gap:9px; align-items:center; }
dialog header h2 { font-size:22px; margin:0; }
dialog footer { margin-top:24px; flex-wrap:wrap; }
dialog footer button[type=submit] { margin-left:auto; }
dialog label:not(.check) { display:block; font-size:14px; margin:18px 0 7px; }
dialog input:not([type=checkbox]),dialog textarea,dialog select { display:block; box-sizing:border-box; width:100%; min-height:44px; border:1px solid #c7d5e3; border-radius:6px; padding:10px; background:white; color:#19324c; }
dialog textarea { resize:vertical; min-height:90px; }
dialog input[type=color] { padding:4px; }
dialog .check { display:flex; gap:9px; align-items:center; min-height:44px; font-size:14px; }
dialog .check input { width:19px; height:19px; }
dialog .field-note { font-size:13px; color:#63788c; line-height:1.6; }
.hidden-row { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid #e1e8ef; padding:10px 0; font-size:14px; }
.hidden-row span { overflow-wrap:anywhere; }
@media (max-width:1000px) { .builder-workspace { grid-template-columns:minmax(0,1fr) 290px; gap:16px; } .transfer-panel { padding:18px; } .builder-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:780px) { .builder-shell { width:calc(100% - 28px); margin-top:26px; } .builder-workspace { grid-template-columns:1fr; } .builder-heading { display:block; } .draft-label { display:block; margin:9px 0; } .builder-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .site-nav { flex-wrap:wrap; } }
@media (max-width:520px) { .builder-grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding-inline:12px; } .tile-main strong { font-size:15px; } .menu-top { padding-inline:12px; } .menu-top h2 { font-size:18px; } .menu-top button { padding-inline:8px; font-size:12px; } .menu-toolbar { padding-inline:12px; } .toolbar-group button { padding-inline:10px; } .transfer-panel { padding:22px; } }
@media (prefers-reduced-motion:reduce) { .announcement-preview.scrolling span { padding-left:0; white-space:pre-wrap; animation:none; } }