/* Styles du studio virtuel, repris de la maquette validée (maquette/fakescreen.html). */
:root {
  --ground: #E4E6E9; --paper: #FFFFFF; --ink: #1B1D21; --muted: #6A6F78; --hair: #E6E7EA; --rim: #D6D8DC;
  --wall: #E0412F; --gain: #17915A; --warn: #E8590C; --ask: #2F6FEB; --you: #8A4FD0;
  --web: #2F6FEB; --unity: #2B2D33; --roblox: #F2B705;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--ground); color: var(--ink); font: 14px/1.4 var(--body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--wall); outline-offset: 2px; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; }

/* Panneaux : blocs blancs avec une « épaisseur », comme les voxels de la scène */
.panel { position: fixed; z-index: 5; background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 4px 0 var(--rim), 0 14px 30px rgba(27, 29, 33, .08); }
.panel h2 { font: 700 15px/1.2 var(--display); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel h2 small { font: 500 12px var(--body); color: var(--muted); }

.brand { top: 18px; left: 18px; width: 292px; padding: 16px 18px 14px; }
.id { display: flex; align-items: center; gap: 11px; }
.mark { width: 38px; height: 38px; border-radius: 10px; background: var(--wall); color: #fff; display: grid; place-items: center; font: 800 20px/1 var(--display); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); flex: none; }
.id h1 { font: 800 19px/1.1 var(--display); letter-spacing: -.01em; }
.id p { color: var(--muted); font-size: 12.5px; }
.counts { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pill.live { color: var(--gain); background: #E9F6EF; }
.pill.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); animation: blink 1.6s infinite; }
.pill.wait { color: var(--warn); background: #FDEBDD; }
.pill.calm { color: var(--muted); background: #F1F2F4; }
@keyframes blink { 50% { opacity: .35; } }

.offline { position: fixed; z-index: 6; top: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 18px rgba(27, 29, 33, .2); }

.dock { left: 18px; bottom: 24px; width: 334px; max-height: calc(100vh - 260px); overflow: auto; padding: 14px 16px 8px; }
.dock ul { list-style: none; }
.dock li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 6px; margin: 0 -6px; border-radius: 10px; cursor: pointer; }
.dock li:hover, .dock li:focus-visible { background: #F4F5F7; outline: none; }
.dock .empty { color: var(--muted); font-size: 13px; padding: 4px 0 10px; cursor: default; display: block; }
.ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #F1F2F4; color: var(--ink); flex: none; }
.ico svg { width: 15px; height: 15px; }
.ico.web { background: var(--web); color: #fff; }
.ico.unity { background: var(--unity); color: #fff; }
.ico.roblox { background: var(--roblox); color: var(--ink); }
.nm { font-weight: 600; font-size: 13.5px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.nm small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.meter { display: block; height: 5px; border-radius: 3px; background: #ECEEF1; overflow: hidden; margin-top: 5px; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }

/* Bulles de signal */
.sig { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; font: 800 13px/1 var(--display); color: #fff; }
.sig.blocked { background: var(--warn); }
.sig.question { background: var(--ask); }
.sig.action { background: var(--you); }
.sig.done { background: var(--gain); }

/* Étiquettes flottantes au-dessus des bonshommes et des postes */
.tag { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 4px 11px 4px 4px; font: 600 12px/1 var(--body); color: var(--ink); white-space: nowrap; box-shadow: 0 2px 0 var(--rim), 0 6px 14px rgba(27, 29, 33, .14); max-width: 240px; }
.tag .name { overflow: hidden; text-overflow: ellipsis; }
/* Dans les pièces, les noms sont coupés pour que les étiquettes voisines ne se recouvrent pas (nom entier au survol). */
.stack .tag .name { max-width: 84px; }
.stack .tag:hover .name { max-width: 200px; }
.tag .ico { width: 20px; height: 20px; border-radius: 50%; }
.tag .ico svg { width: 12px; height: 12px; }
.tag .meter { width: 34px; margin: 0; flex: none; }
.tag.free { background: rgba(255, 255, 255, .72); color: var(--muted); font-weight: 500; padding: 5px 10px; box-shadow: none; }
.tag.idle { background: #F1F2F4; color: var(--muted); }
.tag.full { background: var(--warn); color: #fff; padding: 5px 10px; }
.tag.more { background: var(--ink); color: #fff; padding: 5px 10px; }
.tag.compact { padding: 4px; }
.tag.compact .name { display: none; padding-right: 6px; }
.tag.compact .note { display: none; padding-right: 6px; }
.tag.compact:hover .name, .tag.compact:hover .note { display: inline; }
.tag.compact:hover .name { padding-right: 0; }
.stack { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stack.row { flex-direction: row; }
.bubble { pointer-events: auto; cursor: pointer; transform: translateY(-4px); }
.bubble .sig { width: 30px; height: 30px; font-size: 16px; box-shadow: 0 3px 0 rgba(0, 0, 0, .15), 0 6px 14px rgba(27, 29, 33, .2); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* Popup */
#marker { position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid var(--wall); background: rgba(224, 65, 47, .18); z-index: 6; pointer-events: none; }
#pop { position: fixed; left: 0; top: 0; z-index: 7; width: 360px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 5px 0 var(--rim), 0 24px 48px rgba(27, 29, 33, .16); padding: 16px 18px 14px; animation: pop .16s ease-out; }
@keyframes pop { from { opacity: 0; scale: .96; } }
.pop-h { display: flex; align-items: center; gap: 8px; }
.chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: #F1F2F4; white-space: nowrap; }
.chip.web { background: #E6EEFE; color: #1F55C4; }
.chip.unity { background: #E9EAEC; color: #2B2D33; }
.chip.roblox { background: #FDF4D6; color: #7A5A00; }
.chip.office { background: #E6F4EC; color: #11744A; }
.chip.gestion { background: #FDEBDD; color: #B4460A; }
.x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: #F4F5F7; font: 500 18px/1 var(--body); cursor: pointer; color: var(--muted); }
.x:hover { background: #ECEDF0; color: var(--ink); }
#pop h3 { font: 800 23px/1.1 var(--display); margin-top: 10px; letter-spacing: -.01em; overflow-wrap: anywhere; }
#pop .sub { color: var(--muted); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.now { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--gain); margin-top: 10px; }
.now i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(23, 145, 90, .15); }
.now.idle, .now.paused, .now.done { color: var(--muted); }
.now.idle i, .now.paused i, .now.done i { box-shadow: none; }
.signals { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.signals li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; background: #F6F7F8; border-radius: 10px; padding: 7px 8px; font-size: 13px; }
.signals li span { overflow-wrap: anywhere; }
.btn { border: 0; border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 12.5px; cursor: pointer; background: #ECEDF0; color: var(--ink); }
.btn:hover { background: #E2E4E8; }
.btn.main { background: var(--wall); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.task { margin-top: 10px; background: #F6F7F8; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.task span { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
.cgroup { margin-top: 12px; }
.cgroup h4 { display: flex; justify-content: space-between; gap: 8px; font: 700 14px/1.2 var(--display); overflow-wrap: anywhere; }
.cgroup h4 em { font: 700 12px var(--body); font-style: normal; color: var(--muted); white-space: nowrap; }
.cgroup ul { list-style: none; margin-top: 6px; }
.cgroup li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: start; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.cgroup li:first-child { border-top: 0; }
.cgroup li .t { overflow-wrap: anywhere; }
.cgroup li .t small { display: block; color: var(--muted); font-size: 12px; }
.cgroup li .side { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; border: 2px dashed var(--rim); }
.st-done .dot { background: var(--gain); border: 0; }
.st-done .t { color: var(--muted); }
.st-active .dot { border: 2px dashed var(--ask); }
.st-waiting .dot { border: 2px dotted var(--warn); }
.st-you .dot { border: 2px solid var(--you); }
.pop-f { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.pop-f small { display: block; font-size: 11.5px; color: var(--muted); }
.pop-f strong { font: 700 15px/1.25 var(--display); }
.pop-actions { margin-top: 12px; display: flex; gap: 8px; }
.plain { margin-top: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.list { list-style: none; margin-top: 10px; }
.list li { padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
.list li:first-child { border-top: 0; }
.list li span { overflow-wrap: anywhere; }
.list li small { color: var(--muted); white-space: nowrap; }
.list-h { font: 700 13px/1.2 var(--display); color: var(--muted); margin-top: 14px; }
.linkish { border: 0; background: none; padding: 0; font: 600 13px/1.35 var(--body); color: var(--ink); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.linkish:hover { text-decoration: underline; }
.task small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
details.cgroup summary { list-style: none; cursor: pointer; }
details.cgroup summary::-webkit-details-marker { display: none; }
details.cgroup:not([open]) h4 { color: var(--muted); }
details.cgroup summary h4 span::before { content: '›'; display: inline-block; width: 12px; margin-right: 4px; color: var(--muted); transition: transform .15s; }
details.cgroup[open] summary h4 span::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details.cgroup summary h4 span::before { transition: none; } }
.pop-error { margin-top: 8px; color: var(--wall); font-size: 12.5px; font-weight: 600; }
#pop button:focus-visible, .tag:focus-visible { outline: 2px solid var(--ask); outline-offset: 2px; }

/* Page de connexion */
.login { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--ground); }
.login-card { width: min(360px, 100%); background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 5px 0 var(--rim), 0 24px 48px rgba(27, 29, 33, .1); padding: 22px; display: grid; gap: 14px; }
.login-card label { font-weight: 600; font-size: 13px; display: grid; gap: 6px; }
.login-card input { font: inherit; border: 1px solid var(--rim); border-radius: 10px; padding: 10px 12px; }
.login-card .error { color: var(--wall); font-size: 13px; min-height: 18px; }
.login-card .plain { margin: 0; }

.stage-msg { position: fixed; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; }

/* Argent (plan 4), repris de la maquette */
.plus { color: var(--gain); }
.loss { color: var(--wall) !important; }
.result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: auto minmax(40px, 1fr); align-items: end; gap: 4px 10px; }
.result[hidden] { display: none; }
.result .k { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.result .big { font: 800 36px/1 var(--display); color: var(--gain); letter-spacing: -.02em; white-space: nowrap; }
.result .big.long { font-size: 28px; }
.result svg { grid-row: 2; grid-column: 2; align-self: center; justify-self: end; width: 100%; max-width: 118px; height: auto; }
.result .split { grid-column: 1 / -1; display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); }
.result .split b { color: var(--ink); font-weight: 600; }

.renew { top: 18px; right: 18px; width: 304px; padding: 14px 16px 6px; }
.renew ul { list-style: none; }
.renew ul[hidden] { display: none; }
.renew .fold { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
.renew .fold small { margin-left: auto; }
.renew .fold::before { content: '›'; display: inline-block; width: 10px; color: var(--muted); transform: rotate(90deg); transition: transform .15s; }
.renew.folded .fold::before { transform: none; }
.renew .fold:focus-visible { outline: 2px solid var(--ask); outline-offset: 2px; border-radius: 6px; }
.renew.folded { padding-bottom: 12px; }
.renew.folded h2 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .renew .fold::before { transition: none; } }
.renew li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); cursor: pointer; }
.renew li:first-child { border-top: 0; }
.renew li:focus-visible { outline: 2px solid var(--ask); outline-offset: 2px; border-radius: 8px; }
.renew .empty { color: var(--muted); font-size: 13px; cursor: default; display: block; }
.due { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.due.hot { background: #FDEBDD; color: var(--warn); }
.due.soon { background: #FBF3D9; color: #8A6200; }
.due.ok { background: #EEF0F2; color: var(--muted); }

#pop.wide { width: 460px; }
.periods { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.periods .btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.verdict { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.verdict strong { font: 800 34px/1 var(--display); color: var(--gain); letter-spacing: -.02em; }
.chip.loss { background: #FBE3E0; color: var(--wall); }
.money { margin-top: 12px; }
.money h4 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 2px; display: flex; justify-content: space-between; }
.money ul { list-style: none; }
.money li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-top: 1px dashed var(--hair); }
.money li span { overflow-wrap: anywhere; min-width: 0; }
.money li small { display: block; color: var(--muted); font-size: 11.5px; }
.money li b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money li.more, .money li.empty { color: var(--muted); }
.ranking { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ranking caption { text-align: left; font: 700 13px/1.2 var(--display); margin-bottom: 4px; }
.ranking th, .ranking td { padding: 5px 4px; border-top: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.ranking thead th { color: var(--muted); font-weight: 600; font-size: 11.5px; border-top: 0; }
.ranking th[scope="row"], .ranking thead th:first-child { text-align: left; white-space: normal; overflow-wrap: anywhere; font-weight: 600; }
.pop-f small + small, .pop-f strong + small { margin-top: 2px; }
.rlist { list-style: none; margin-top: 10px; }
.rlist li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); }
.rlist li:first-child { border-top: 0; }
.rlist .nm .btn { margin-top: 6px; }
.rlist .price { display: block; font-size: 12px; color: var(--muted); text-align: right; margin-top: 3px; }
.tag.money { background: var(--gain); color: #fff; padding: 6px 11px; }
.tag.money.negative { background: var(--wall); }
.tag.alert { background: var(--warn); color: #fff; padding: 6px 11px; }

/* Mode édition (plan 5) */
.edit-open { right: 18px; bottom: 24px; padding: 10px 16px; font: 700 14px/1 var(--display); color: var(--ink); cursor: pointer; }
.edit-open:hover { background: #F6F7F8; }
.editor { position: fixed; z-index: 8; top: 18px; right: 18px; bottom: 18px; width: 440px; overflow: auto; background: var(--paper); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 5px 0 var(--rim), 0 24px 48px rgba(27, 29, 33, .16); padding: 16px 18px 18px; }
.editor[hidden] { display: none; }
.editor-h { display: flex; align-items: center; gap: 8px; }
.editor-h h2 { font: 800 20px/1.1 var(--display); }
.editor-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.editor-tabs .btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.editor-body h3 { font: 800 19px/1.15 var(--display); margin-top: 12px; overflow-wrap: anywhere; }
.editor-h4 { font: 700 14px/1.2 var(--display); margin-top: 16px; }
.editor-section { margin-top: 6px; }
.editor-title { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.editor-title h3 { margin-top: 0; }
.editor-actions { margin-top: 12px; }
.editor-list { list-style: none; margin-top: 10px; }
.editor-list li { border-top: 1px solid var(--hair); }
.editor-list li:first-child { border-top: 0; }
.editor-list.compact li { padding: 6px 0; }
.row-button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.row-button:hover, .row-button:focus-visible { background: #F4F5F7; outline: none; }
.row-button .money-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.editor-form { display: grid; gap: 10px; margin-top: 12px; }
.field { display: grid; gap: 4px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field small { color: var(--muted); font-size: 12px; }
.field input, .field select, .field textarea, .editor input, .editor select, .editor textarea { font: 500 14px/1.3 var(--body); color: var(--ink); background: #fff; border: 1px solid var(--rim); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.editor input[type="checkbox"] { width: 18px; height: 18px; padding: 0; }
.field input:focus, .field select:focus, .field textarea:focus, .editor input:focus, .editor select:focus { outline: 2px solid var(--ask); outline-offset: 1px; }
.field-error, .form-error { color: var(--wall); font-size: 12.5px; font-weight: 600; min-height: 0; }
.field-error:empty, .form-error:empty { display: none; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.row.spread { justify-content: space-between; flex-wrap: nowrap; }
.row input { flex: 1 1 160px; }
.row code { font-size: 12px; overflow-wrap: anywhere; }
.task-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.task-row .confirm { grid-column: 1 / -1; }
.confirm .row { margin-top: 6px; }
.confirm-text { font-size: 13px; color: var(--ink); margin-top: 6px; }
.btn.danger { background: #FBE3E0; color: var(--wall); }
.btn.danger-strong { background: var(--wall); color: #fff; }
.link-back { all: unset; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 8px; display: inline-block; }
.link-back:hover, .link-back:focus-visible { color: var(--ink); text-decoration: underline; }
.phrase { width: 100%; font: 600 14px/1.4 var(--body); border: 1px solid var(--rim); border-radius: 10px; padding: 10px; margin-top: 10px; resize: vertical; }
.subtabs { display: flex; gap: 6px; margin-top: 12px; }
.subtabs .btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.field[hidden] { display: none; }
.row-button .money-value.loss { color: var(--wall); }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-weight: 700; }
.notice { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #E3F4EA; color: #17663F; font-size: 13px; font-weight: 600; }
.token-panel { display: grid; gap: 4px; }
.token-panel .token { resize: none; }
.login-card.setup { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.login-card .step { color: var(--muted); font-size: 12.5px; font-weight: 700; margin: 0; }
.login-card h2 { font: 800 20px/1.15 var(--display); }
.login-card .editor-form { margin-top: 0; }
.login-card .field input, .login-card .field select, .login-card textarea { font: 500 14px/1.3 var(--body); padding: 9px 11px; border: 1px solid var(--rim); border-radius: 10px; background: #fff; color: var(--ink); }
.token { width: 100%; font: 600 13px/1.4 ui-monospace, monospace; padding: 10px; border: 1px solid var(--rim); border-radius: 10px; margin-top: 8px; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .dock, .renew, .tag .meter, .tag.free, .tag .name, .tag .note { display: none; }
  .editor { inset: 0; width: auto; border-radius: 0; }
  .edit-open { right: 12px; bottom: 12px; }
  #pop.wide { width: calc(100vw - 24px); }
  .tag { padding: 4px; }
  .brand { left: 12px; right: 12px; top: 12px; width: auto; }
  #pop { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }