/* Client panel (my.peyman.studio): on top of app.css — bigger and calmer, and works left-to-right for English. */
body.client { font-size: 16.5px; }
body.client h1 { font-size: 1.45rem; }
.flash.info { background: var(--info-bg); color: var(--accent); }
.flash ul { margin: .4rem 0 0; padding-inline-start: 1.2rem; }

/* English: menu on the left */
html[dir="ltr"] nav.side { right: auto; left: 0; border-inline-start: 0; border-inline-end: 1px solid var(--line); }
html[dir="ltr"] main.with-nav { margin-right: 0; margin-left: 210px; }
html[dir="ltr"] th, html[dir="ltr"] td { text-align: left; }
@media (max-width: 820px) { html[dir="ltr"] main.with-nav { margin-left: 0; } }

/* language links on the login page */
.langs { display: flex; gap: .4rem; justify-content: center; margin: 0 0 1rem; }
.langs a { padding: .25rem .8rem; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: var(--card); }
.langs a.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* home: today's numbers */
.tiles { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.tile { display: grid; gap: .2rem; padding: 1rem; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
a.tile:not(.plain):hover { text-decoration: none; border-color: var(--accent); }
.tile b { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { color: var(--muted); font-size: .9rem; }

/* waiting for you */
.waits { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wait { display: grid; gap: .45rem; margin: 0; }
.wait-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* settings forms: the save button stays in view */
form.settings .savebar { position: sticky; bottom: 0; padding: .7rem 0; background: var(--bg); border-top: 1px solid var(--line); margin-top: 1rem; }
.savebar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.savebar .btn.big { width: auto; min-width: 220px; }

/* confirm page: before → after */
table.changes td.was { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
table.changes td.now { color: var(--ok); font-weight: 600; }

/* home: platforms */
table.channels tr.off td { color: var(--muted); }
table.channels .badge { white-space: normal; }

/* home: numbers by platform */
.periods { display: inline-flex; gap: .3rem; }
.periods a { padding: .2rem .8rem; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); background: var(--card); }
.periods a.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
table.stats-table td, table.stats-table th { text-align: center; }
table.stats-table td:first-child, table.stats-table th:first-child { text-align: start; }
table.stats-table tr.total td { border-top: 2px solid var(--line); }

/* one-time links: wrap on a phone, select all on one tap */
code.select-all { word-break: break-all; user-select: all; -webkit-user-select: all; }