/* dexpanel — pluginová administrace ve stylu, na jaký jsou lidi z Discord botů
   zvyklí. Jeden CSS soubor, nula JavaScriptu: i přepínač u pluginu je
   formulářové tlačítko, které se odešle a stránka se překreslí. */

@font-face { font-family: Poppins; src: url(/fonts/Poppins-Regular.ttf) format("truetype");
             font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(/fonts/Poppins-Medium.ttf) format("truetype");
             font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(/fonts/Poppins-Bold.ttf) format("truetype");
             font-weight: 700; font-display: swap; }

:root {
  --bg: #12141b;
  --panel: #1b1e28;
  --panel-2: #232734;
  --line: #2b3042;
  --text: #f3f5fa;
  --muted: #8d93a8;

  --brand: #4c6fff;
  --brand-dark: #3555e6;
  --on: #3ecf8e;
  --orange: #ff7a3d;
  --sky: #38bdf8;
  --green: #3ecf8e;
  --gold: #f5b13d;
  --red: #f2555a;
  --violet: #9b6bff;
  --grey: #7c869e;

  --r: 18px;
  --r-sm: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 14.5px/1.6 Poppins, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 18px;
  border-radius: 8px; background: var(--text); color: var(--bg); }
.skip-link:focus { top: 12px; }
.logout-form { margin: 0; }
.logout-form button { border: 0; background: none; padding: 0; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; }
.logout-form button:hover { color: var(--text); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* ---------------------------------------------------------------- kostra */
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
/* minmax(0, 1fr) mist 1fr: `1fr` se nesmi zmensit pod min-content sveho obsahu,
   takze siroky pruh uvnitr roztahoval celou stranku misto sebe. */
.side { background: var(--panel); padding: 16px 12px; position: sticky; top: 0;
        height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.main { padding: 30px 40px 60px; max-width: 1240px; width: 100%; min-width: 0; }

.side-server {
  display: flex; align-items: center; gap: 11px; padding: 12px;
  background: var(--panel-2); border-radius: var(--r-sm); margin-bottom: 8px;
}
.side-server b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.side-server span { font-size: 11.5px; color: var(--muted); }
.side-server img, .avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ico-fallback { width: 34px; height: 34px; border-radius: 50%; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }

.side-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
              color: var(--muted); margin: 20px 0 6px 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
         border-radius: var(--r-sm); color: var(--muted); font-size: 14px; }
.nav a em { font-style: normal; width: 20px; text-align: center; font-size: 15px; }
.nav a:hover { background: var(--panel-2); color: var(--text); }
.nav a.on { background: var(--brand); color: #fff; font-weight: 600; }
.nav .count { margin-left: auto; background: var(--orange); color: #17110c;
              font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.nav a.on .count { background: rgba(255,255,255,.22); color: #fff; }

.nav a.obnovit { font-size: 12.5px; opacity: .75; }
.nav a.obnovit:hover { opacity: 1; }

.side-foot { margin-top: auto; padding-top: 14px; }
.user { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
        background: var(--panel-2); border-radius: var(--r-sm); }
.user b { display: block; font-size: 13.5px; font-weight: 600; }
.user a { font-size: 12px; color: var(--muted); }
.user a:hover { color: var(--text); }

/* ---------------------------------------------------------------- hlavička */
.head { display: flex; align-items: flex-end; justify-content: space-between;
        gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.head h1 { font-size: 30px; }
.head .lead { color: var(--muted); margin-top: 6px; max-width: 620px; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.crumb a:hover { color: var(--text); }

.seg { display: flex; gap: 4px; background: var(--panel); border-radius: 999px; padding: 4px; }
.seg a { padding: 6px 15px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.seg a:hover { color: var(--text); }
.seg a.on { background: var(--brand); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- dlaždice pluginů */
.plugins { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.plugin {
  background: var(--panel); border-radius: var(--r); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; position: relative;
  border: 1px solid transparent; transition: border-color .12s, transform .12s;
}
.plugin:hover { border-color: var(--line); transform: translateY(-2px); }
.plugin .top { display: flex; align-items: flex-start; gap: 13px; }
.plugin .tile {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 23px; flex: 0 0 auto; background: var(--panel-2);
}
.plugin .tile.sky { background: rgba(56,189,248,.16); }
.plugin .tile.orange { background: rgba(255,122,61,.16); }
.plugin .tile.green { background: rgba(62,207,142,.16); }
.plugin .tile.red { background: rgba(242,85,90,.16); }
.plugin .tile.gold { background: rgba(245,177,61,.16); }
.plugin .tile.violet { background: rgba(155,107,255,.16); }
.plugin .tile.grey { background: rgba(124,134,158,.16); }
.plugin h3 { font-size: 16.5px; }
.plugin .popis { color: var(--muted); font-size: 13.5px; flex: 1; }
.plugin .bottom { display: flex; align-items: center; justify-content: space-between;
                  gap: 12px; padding-top: 4px; }
.plugin .fields { font-size: 12.5px; color: var(--muted); }
.plugin.off { opacity: .62; }
.plugin.off:hover { opacity: 1; }

/* Přepínač je odesílací tlačítko — bez JS se jinak stav změnit nedá. */
.toggle { border: 0; padding: 0; background: none; cursor: pointer; display: inline-flex;
          align-items: center; gap: 9px; font: inherit; color: var(--muted); font-size: 12.5px; }
.toggle .sw { width: 44px; height: 25px; border-radius: 999px; background: var(--panel-2);
              position: relative; transition: background .14s; flex: 0 0 auto; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
                     border-radius: 50%; background: var(--muted); transition: transform .14s, background .14s; }
.toggle.on .sw { background: var(--on); }
.toggle.on .sw::after { transform: translateX(19px); background: #0d2a1e; }
.toggle.on { color: var(--on); }
.toggle:hover .sw { filter: brightness(1.12); }

/* ---------------------------------------------------------------- panely */
.panel { background: var(--panel); border-radius: var(--r); padding: 24px; margin-bottom: 18px; }
.panel h2 { font-size: 17px; }
.panel .lead { color: var(--muted); font-size: 13.5px; margin: 5px 0 18px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.split-2-1 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }

/* ---------------------------------------------------------------- poptávka */
.demand { background: linear-gradient(135deg, rgba(255,122,61,.13), transparent 55%), var(--panel); }
.demand .kicker { color: var(--orange); font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }
.demand-row { display: grid; grid-template-columns: 50px 1fr auto auto; align-items: center;
              gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.demand-row:first-of-type { border-top: 0; }
.demand-row .hits { font-weight: 700; font-size: 16px; color: var(--orange);
                    text-align: right; font-variant-numeric: tabular-nums; }
.demand-row .q { font-weight: 500; font-size: 15.5px; }
.demand-row .when { color: var(--muted); font-size: 12px; }
.demand-more { padding-top: 14px; border-top: 1px solid var(--line); display: flex;
               justify-content: space-between; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- čísla */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
         margin-bottom: 18px; }
.stat { background: var(--panel); border-radius: var(--r); padding: 18px 20px; }
.stat .v { font-size: 27px; font-weight: 700; letter-spacing: -0.03em;
           font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
           color: var(--muted); margin-top: 4px; }
.stat .s { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.stat.brand .v { color: var(--brand); }
/* Dve cisla vedle nadpisu (bazar) — na mobilu je prebije mobilni sekce. */
.stats-mini { grid-template-columns: auto auto; }
.stat.green .v { color: var(--green); }
.stat .s.hot { color: var(--orange); }

/* ---------------------------------------------------------------- graf a pruhy */
.chart { display: flex; align-items: stretch; gap: 4px; height: 150px; margin-top: 8px; }
.chart .day { flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 2px; min-width: 5px; }
.chart .bar { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; }
.chart .bar.a { background: var(--brand); }
.chart .bar.b { background: var(--green); }
.axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 8px; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; }

.bars { display: flex; flex-direction: column; }
.bar-row { display: grid; grid-template-columns: 1fr 3fr auto auto; align-items: center;
           gap: 16px; padding: 10px 0; }
.bar-row + .bar-row { border-top: 1px solid var(--line); }
.bar-row .name { font-weight: 500; }
.track { height: 9px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.track > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.track.hot > span { background: var(--orange); }
.bar-row .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-row .n.hot { color: var(--orange); }

/* ---------------------------------------------------------------- tabulky */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
     color: var(--muted); font-weight: 500; padding: 0 10px 12px; }
td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
td b { font-weight: 600; }

.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px;
        background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: rgba(62,207,142,.15); color: var(--on); }
.pill.warn { background: rgba(245,177,61,.15); color: var(--gold); }
.pill.bad { background: rgba(242,85,90,.15); color: var(--red); }
.pill.sky { background: rgba(76,111,255,.18); color: #93a7ff; }
.pill.hot { background: var(--orange); color: #17110c; font-weight: 600; }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
       background: var(--brand); color: #fff; font: inherit; font-weight: 600;
       padding: 11px 22px; border-radius: 999px; }
.btn:hover { background: var(--brand-dark); }
.btn.ghost { background: var(--panel-2); color: var(--text); font-weight: 500;
             padding: 8px 16px; font-size: 13px; }
.btn.ghost:hover { background: var(--line); }
.btn.discord { background: #5865f2; padding: 14px 30px; }
.btn.discord:hover { background: #4752c4; }

.plus { color: var(--on); font-weight: 600; font-variant-numeric: tabular-nums; }
.minus { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); text-align: center; padding: 30px 0; }
.note { color: var(--muted); font-size: 12.5px; }

/* ---------------------------------------------------------------- formulář */
input[type=text], input[type=number], select {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 13px; font: inherit; font-size: 13.5px;
}
select { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus { outline: none; border-color: var(--brand);
                            box-shadow: 0 0 0 3px rgba(76,111,255,.18); }

.switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .sw { width: 44px; height: 25px; border-radius: 999px; background: var(--panel-2);
              position: relative; transition: background .14s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
                     border-radius: 50%; background: var(--muted); transition: transform .14s, background .14s; }
.switch input:checked + .sw { background: var(--on); }
.switch input:checked + .sw::after { transform: translateX(19px); background: #0d2a1e; }
.switch input:focus-visible + .sw { box-shadow: 0 0 0 3px rgba(62,207,142,.25); }
.switch span { font-size: 13px; color: var(--muted); }

.field { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: center;
         padding: 14px 0; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; }
.field label { font-size: 14px; }
.field .key { display: block; color: var(--muted); font-size: 11px; margin-top: 3px;
              font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

.savebar { position: sticky; bottom: 0; margin-top: 6px; padding: 16px 0;
           background: var(--bg); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.flash { border-radius: var(--r-sm); padding: 13px 17px; margin-bottom: 18px; font-size: 13.5px; }
.flash.ok { background: rgba(62,207,142,.12); color: var(--on); }
.flash.bad { background: rgba(242,85,90,.12); color: var(--red); }

/* ---------------------------------------------------------------- přihlášení */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(60% 50% at 25% 15%, rgba(76,111,255,.16), transparent 70%),
              radial-gradient(55% 45% at 80% 80%, rgba(255,122,61,.10), transparent 70%), var(--bg); }
.login .card { width: 100%; max-width: 420px; background: var(--panel);
               border-radius: 22px; padding: 38px 32px; text-align: center; }
.login h1 { font-size: 24px; margin: 20px 0 10px; }
.login p { color: var(--muted); margin: 0 0 24px; font-size: 14px; }

.brand { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.brand i { font-style: normal; color: var(--brand); }
.brand small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------- moderátorský nástroj */
.stat.red .v { color: var(--red); }

.stupen { display: block; font-size: 10.5px; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--brand); font-weight: 600; margin: 1px 0 2px; }

.hledatko { display: flex; gap: 10px; }
.hledatko input { flex: 1; }

.osoba { display: flex; align-items: center; gap: 16px; }
.avatar.velky { width: 64px; height: 64px; }

.fakta { display: flex; flex-direction: column; }
.fakta > div { display: flex; align-items: baseline; justify-content: space-between;
               gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.fakta > div:first-child { border-top: 0; padding-top: 0; }
.fakta span { color: var(--muted); font-size: 13px; }

.role-seznam { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
               padding-top: 14px; border-top: 1px solid var(--line); }

.vysledek { margin-top: 14px; padding: 13px 15px; background: var(--panel-2);
             border-radius: var(--r-sm); word-break: break-all; font-size: 13px; }
.vysledek a { color: #93a7ff; }

.kanaly { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: 2px; max-height: 320px; overflow-y: auto; margin-top: 4px; }
.kanal { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
         border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; }
.kanal:hover { background: var(--panel-2); }
.kanal input { accent-color: var(--brand); width: 17px; height: 17px; flex: 0 0 auto; }
.kanal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn.nebezpecne { background: rgba(242,85,90,.16); color: var(--red); font-weight: 600; }
.btn.nebezpecne:hover { background: var(--red); color: #fff; }

.odebrat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
           padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- mobil
   Sidebar se na mobilu nezahazuje — jen se z něj stane vysouvací zásuvka.
   Jinak by na telefonu zmizelo odhlášení, přepínání serverů i „Všechna
   nastavení“, protože nikde jinde na ně odkaz není. Přepíná ji checkbox,
   protože celý panel schválně jede bez JavaScriptu. */
.menu-prepinac { position: absolute; width: 1px; height: 1px; opacity: 0;
                 pointer-events: none; }
.topbar, .dock, .zaves, .zavrit, .burger { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 0 14px 100px; }

  /* --- horní lišta --- */
  .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
            padding-top: calc(10px + env(safe-area-inset-top));
            background: var(--panel); margin: 0 -14px 14px;
            position: sticky; top: 0; z-index: 20; }
  .topbar .pill { margin-left: auto; max-width: 46%; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
  .burger { display: grid; place-items: center; width: 44px; height: 44px;
            margin-left: -10px; border-radius: var(--r-sm); cursor: pointer; }
  .burger span, .burger span::before, .burger span::after {
    content: ""; display: block; width: 19px; height: 2px;
    border-radius: 2px; background: var(--text); }
  .burger span { position: relative; }
  .burger span::before { position: absolute; top: -6px; }
  .burger span::after { position: absolute; top: 6px; }

  /* --- zásuvka --- */
  .side { display: flex; position: fixed; top: 0; left: 0; bottom: 0;
          width: min(300px, 86vw); height: auto; z-index: 60; padding: 14px 12px;
          transform: translateX(-102%); transition: transform .22s ease;
          box-shadow: 0 0 40px rgba(0,0,0,.5); overscroll-behavior: contain;
          padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .zaves { display: block; position: fixed; inset: 0; z-index: 50;
           background: rgba(6,8,13,.62); opacity: 0; pointer-events: none;
           transition: opacity .22s ease; }
  .menu-prepinac:checked ~ .shell .side { transform: translateX(0); }
  .menu-prepinac:checked ~ .shell .zaves { opacity: 1; pointer-events: auto; }
  .zavrit { display: grid; place-items: center; position: absolute; top: 10px; right: 10px;
            width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2);
            color: var(--muted); font-size: 15px; cursor: pointer; z-index: 2; }
  .side-server { padding-right: 52px; }
  .side-label { margin-top: 18px; }
  .nav a { padding: 13px 12px; font-size: 15px; }
  .user { padding: 13px 12px; }
  .user a { display: inline-block; padding: 11px 0; font-size: 13px; }

  /* --- spodní lišta --- */
  .dock { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed;
          left: 0; right: 0; bottom: 0; z-index: 40; background: var(--panel);
          border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .dock a, .dock label { display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: 3px; height: 62px; position: relative;
          font-size: 10.5px; color: var(--muted); cursor: pointer; }
  .dock em { font-style: normal; font-size: 19px; line-height: 1; }
  .dock a.on { color: var(--brand); }
  .dock .tecka { position: absolute; top: 11px; margin-left: 18px; width: 7px; height: 7px;
                 border-radius: 50%; background: var(--orange); }

  /* --- obsah --- */
  .head { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .head h1 { font-size: 23px; }
  .head .lead { font-size: 13.5px; }
  /* Nadpis a poznámka vedle sebe se na úzkém displeji rvou o místo
     a nadpis se zalomí doprostřed. Poznámka jde radši pod něj. */
  .panel-head { flex-wrap: wrap; gap: 4px 14px; }
  .panel-head > .note, .panel-head > .pill { width: auto; }
  .panel-head > h2 + .note { width: 100%; }
  .crumb { margin-bottom: 10px; }
  .crumb a { display: inline-block; padding: 10px 0; }
  .demand-more a, .panel > a:not(.btn) { display: inline-block; padding: 10px 0; }
  .panel { padding: 18px 15px; border-radius: 15px; }
  .plugins { grid-template-columns: minmax(0, 1fr); }
  .split, .split-2-1 { grid-template-columns: minmax(0, 1fr); }
  .field { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 15px 16px; }
  .stat .v { font-size: 23px; }
  .stats-mini { grid-template-columns: 1fr 1fr; width: 100%; gap: 12px; padding: 0; }
  .demand-row { grid-template-columns: 46px 1fr; gap: 8px 12px; }
  .demand-row .when { display: none; }
  .demand-row .btn { grid-column: 2; justify-self: start; }
  .demand-more { flex-direction: column; gap: 7px; }
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-row .track, .bar-row .when { display: none; }
  .seg { width: 100%; }
  .seg a { flex: 1; text-align: center; padding: 10px 12px; }
  .savebar { bottom: calc(62px + env(safe-area-inset-bottom));
             padding: 14px 0; gap: 10px; }
  .savebar .btn { width: 100%; justify-content: center; }

  /* Safari přiblíží stránku vždycky, když má políčko písmo menší než 16px. */
  input[type=text], input[type=number], select { font-size: 16px; padding: 12px 13px; }
  select { background-position: calc(100% - 17px) 22px, calc(100% - 12px) 22px; }
  .btn { padding: 13px 22px; }
  .btn.ghost { padding: 11px 18px; font-size: 13.5px; }
  .switch, .toggle { min-height: 44px; }

  .hledatko { flex-direction: column; }
  .hledatko .btn { width: 100%; justify-content: center; }
  .osoba { gap: 13px; }
  .avatar.velky { width: 52px; height: 52px; }

  .kanaly { grid-template-columns: 1fr; max-height: 260px; }
  .kanal { padding: 12px 10px; }

  /* --- tabulky jako karty ---
     Vodorovné scrollování uvnitř tabulky je na telefonu k ničemu, protože
     člověk nevidí, že se scrollovat dá. Řádek se proto překreslí na kartu
     a každá buňka si nese název svého sloupce v atributu data-l. */
  table.karty, table.karty tbody, table.karty tr, table.karty td { display: block; width: 100%; }
  table.karty tr:first-child { display: none; }
  table.karty tr { background: var(--panel-2); border-radius: var(--r-sm);
                   padding: 13px 15px; margin-bottom: 10px; }
  table.karty tr:last-child { margin-bottom: 0; }
  table.karty td { border-top: 0; padding: 5px 0; display: flex; align-items: center;
                   justify-content: space-between; gap: 14px; text-align: left; }
  table.karty td::before { content: attr(data-l); color: var(--muted); font-size: 10.5px;
                           letter-spacing: 0.1em; text-transform: uppercase; flex: 0 0 auto; }
  table.karty td:first-child { display: block; padding: 0 0 9px; margin-bottom: 6px;
                               border-bottom: 1px solid var(--line); }
  table.karty td:first-child::before { display: none; }
  table.karty td:first-child.rank { display: flex; padding: 5px 0; margin-bottom: 0;
                                    border-bottom: 0; }
  table.karty td:first-child.rank::before { display: block; }
  table.karty td:empty { display: none; }
  table.karty td input[type=text] { max-width: 60%; }
  table.wide { display: block; overflow-x: auto; }
}

/* ---------------------------------------------------------------- všechna nastavení
   Stránka „Všechna nastavení" zůstává pro případ, že člověk hledá klíč a neví,
   pod který plugin patří. Běžně se chodí přes dlaždice. */
.settings { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.groupnav { position: sticky; top: 26px; display: flex; flex-direction: column; gap: 2px; }
.groupnav a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px;
              border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px; }
.groupnav a:hover { background: var(--panel-2); color: var(--text); }
.groupnav a i { font-style: normal; font-size: 11.5px; opacity: .7; }
.group { scroll-margin-top: 20px; }
.group:target { box-shadow: 0 0 0 2px var(--brand); }
.group:target > .panel-head h2 { color: var(--brand); }

/* Tenhle blok musi zustat na konci souboru: `.settings` a `.groupnav` se
   definuji az za mobilni sekci, takze by je mobilni sekce neprebila. */
@media (max-width: 900px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .groupnav { position: static; flex-direction: row; overflow-x: auto; gap: 7px;
              padding-bottom: 4px; margin-bottom: 6px; scrollbar-width: none; }
  .groupnav::-webkit-scrollbar { display: none; }
  .groupnav a { white-space: nowrap; background: var(--panel); padding: 14px 15px; }
}

/* ================================================================== profil
   Osobní stránka „Občanka" — návrh z Claude Design (varianta A).
   Hero vychází z kreslené karty, kterou bot posílá do Discordu: prsten kolem
   avataru v barvě hodnosti, velké skóre, vodoznak čínského znaku. Barvu řídí
   třída `tier-*` na wrapperu, kterou dosadí šablona podle skóre.
   Zůstává nula JavaScriptu. */

/* Varianta A — „Občanka". Přidává se k panel.css.
   Hero inspirovaný kreslenou kartou bota: prsten kolem avataru, pill hodnosti,
   velké skóre v barvě hodnosti, vodoznak znaků. Jeden scroll, vzdušné. */

.tier-dobry    { --tier:#3ecf8e; --tier-soft:rgba(62,207,142,.14); --tier-faint:rgba(62,207,142,.55); }
.tier-prumerny { --tier:#bab280; --tier-soft:rgba(186,178,128,.12); --tier-faint:rgba(186,178,128,.55); }
.tier-vzorny   { --tier:#3ecf8e; --tier-soft:rgba(62,207,142,.14); --tier-faint:rgba(62,207,142,.55); }
.tier-modelovy { --tier:#f5b13d; --tier-soft:rgba(245,177,61,.14); --tier-faint:rgba(245,177,61,.55); }
.tier-hrdina   { --tier:#ff7a3d; --tier-soft:rgba(255,122,61,.14); --tier-faint:rgba(255,122,61,.55); }
.tier-nizky    { --tier:#ff7a3d; --tier-soft:rgba(255,122,61,.12); --tier-faint:rgba(255,122,61,.55); }
.tier-cernalistina,
.tier-hanba    { --tier:#f2555a; --tier-soft:rgba(242,85,90,.12); --tier-faint:rgba(242,85,90,.55); }

.pa code { background:var(--panel-2); padding:2px 9px; border-radius:8px;
           font-family:ui-monospace,Consolas,monospace; font-size:12.5px; }

/* ------------------------------------------------------------------ hero */
.pa-hero { position:relative; overflow:hidden; background:var(--panel);
           border-radius:var(--r); padding:30px 34px 28px; margin-bottom:14px; }
.pa-hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(65% 100% at 88% 0%, var(--tier-soft), transparent 65%); }
.pa-znak { position:absolute; right:8px; top:-34px; font-size:200px; font-weight:700;
           line-height:1; color:var(--tier); opacity:.07; pointer-events:none;
           user-select:none; letter-spacing:-.06em; white-space:nowrap; }
.pa-osoba { position:relative; display:flex; align-items:center; gap:18px; }
.pa-avatar { width:70px; height:70px; border-radius:50%; flex:0 0 auto;
             box-shadow:0 0 0 3px var(--tier), 0 6px 30px var(--tier-soft); }
.pa-jmeno { font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.pa-radka { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:7px; }
.pa-pill { display:inline-flex; align-items:center; gap:9px; padding:4px 15px;
           border:1.5px solid var(--tier); border-radius:999px; color:var(--tier);
           font-size:13.5px; font-weight:600; background:rgba(0,0,0,.2); }
.pa-pill b { font-weight:700; letter-spacing:.06em; }
.pa-poradi { color:var(--muted); font-size:13px; }

.pa-skore { position:relative; margin-top:24px; display:flex; align-items:flex-end;
            gap:28px; flex-wrap:wrap; }
.pa-kicker { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
             color:var(--muted); margin-bottom:6px; }
.pa-cislo { font-size:64px; font-weight:700; line-height:.95; letter-spacing:-.04em;
            color:var(--tier); font-variant-numeric:tabular-nums; }
.pa-tyden { color:var(--muted); font-size:13px; padding-bottom:6px; }
.pa-tyden b { color:var(--green); font-weight:600; }

.pa-progress { position:relative; margin-top:22px; }
/* `.track` uz v panel.css je; prepisujeme jen vysku a barvu vyplne. */
.pa-progress .track { height:8px; }
.pa-progress .track > span { background:var(--tier); }
.pa-dalsi { display:flex; justify-content:space-between; gap:14px; margin-top:8px;
            color:var(--muted); font-size:12.5px; }

/* pás faktů pod hero — pilulky, ne mřížka */
.pa-fakta { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px; }
.pa-fakt { display:inline-flex; align-items:baseline; gap:8px; background:var(--panel);
           border-radius:999px; padding:10px 19px; font-size:13px; color:var(--muted); }
.pa-fakt b { color:var(--text); font-size:15px; font-variant-numeric:tabular-nums; }
.pa-fakt .gold { color:var(--gold); }

/* ------------------------------------------------------------------ sekce */
.pa-sekce { margin-bottom:30px; }
.pa-sekce > h2 { display:flex; align-items:baseline; gap:11px; font-size:15.5px;
                 margin-bottom:11px; }
.pa-sekce > h2 .cn { color:var(--muted); font-weight:400; font-size:11.5px;
                     letter-spacing:.3em; opacity:.8; }
.pa-sekce > h2 .vic { margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:400; }
.pa-sekce > h2 .vic:hover { color:var(--text); }

/* zápisy kreditu — jako na kartě, žádná tabulka */
.pa-zapisy { background:var(--panel); border-radius:var(--r); padding:6px 24px; }
.pa-zapis { display:grid; grid-template-columns:72px 1fr auto; gap:16px;
            align-items:baseline; padding:14px 0; }
.pa-zapis + .pa-zapis { border-top:1px solid var(--line); }
.pa-zapis .delta { font-weight:700; font-size:15.5px; font-variant-numeric:tabular-nums; }
.pa-zapis .kdy { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }

/* sbírka — dlaždice s fotkou, poslední je výzva přidat */
.pa-sbirka { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:12px; }
.pa-kousek { background:var(--panel); border-radius:var(--r); overflow:hidden; }
.pa-foto { aspect-ratio:4/3; display:grid; place-items:center; font-size:34px;
           font-weight:700; color:rgba(243,245,250,.14); }
.pa-kousek .info { padding:12px 15px 14px; }
.pa-kousek .nazev { font-weight:600; font-size:13.5px; line-height:1.35; }
.pa-kousek .znacka { color:var(--muted); font-size:12px; margin-top:1px; }
.pa-kousek .spodek { display:flex; align-items:center; justify-content:space-between;
                     gap:8px; margin-top:9px; }
.pa-kousek .cena { font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.pa-stav { font-size:11px; color:var(--muted); letter-spacing:.04em; }
.pa-stav.doma { color:var(--green); }
.pa-stav.leti { color:var(--sky); }
.pa-pridat { border:1.5px dashed var(--line); border-radius:var(--r); display:grid;
             place-items:center; text-align:center; padding:20px 16px; color:var(--muted);
             font-size:12.5px; line-height:1.5; background:none; min-height:150px; }
.pa-pridat b { display:block; color:var(--text); font-size:13.5px; margin-bottom:4px; }
.pa-pridat:hover { border-color:var(--tier-faint); color:var(--text); }

/* bazar — reputace v hlavičce, inzeráty jako řádky */
.pa-rep { color:var(--muted); font-size:13px; }
.pa-rep b { color:var(--gold); }
.pa-inzeraty { background:var(--panel); border-radius:var(--r); padding:6px 24px; }
.pa-inzerat { display:grid; grid-template-columns:1fr auto auto; gap:16px;
              align-items:center; padding:13px 0; }
.pa-inzerat + .pa-inzerat { border-top:1px solid var(--line); }
.pa-inzerat .nazev { font-weight:600; font-size:14px; }
.pa-inzerat .kdy { display:block; color:var(--muted); font-size:11.5px; font-weight:400; margin-top:1px; }
.pa-inzerat .cena { font-weight:700; font-variant-numeric:tabular-nums; }
.pa-inzerat .pill { min-width:96px; text-align:center; }
.pill.klid { background:var(--panel-2); color:var(--muted); }

/* zásilka — jeden provozní řádek */
.pa-zasilka { background:var(--panel); border-radius:var(--r); padding:17px 24px;
              display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pa-zasilka .hlida { margin-left:auto; display:inline-flex; align-items:center; gap:8px;
                     color:var(--muted); font-size:12.5px; }
.pa-zasilka .hlida i { width:8px; height:8px; border-radius:50%; background:var(--green);
                       box-shadow:0 0 8px rgba(62,207,142,.8); }
.pa-pozn { color:var(--muted); font-size:12px; margin-top:9px; }

/* nastavení — tichý dvouřádek */
.pa-nastaveni { background:var(--panel); border-radius:var(--r); padding:6px 24px; }
.pa-volba { display:grid; grid-template-columns:1fr auto auto; gap:16px;
            align-items:center; padding:13px 0; font-size:13.5px; }
.pa-volba + .pa-volba { border-top:1px solid var(--line); }
.pa-volba .co { color:var(--muted); }
.pa-volba .jak { font-weight:600; text-align:right; }

/* nováček — checklist prvních kroků */
.pa-kroky { background:var(--panel); border-radius:var(--r); padding:8px 24px; }
.pa-krok { display:grid; grid-template-columns:28px 1fr auto; gap:16px;
           align-items:center; padding:15px 0; }
.pa-krok + .pa-krok { border-top:1px solid var(--line); }
.pa-krok .c { width:27px; height:27px; border-radius:50%; border:1.5px solid var(--line);
              display:grid; place-items:center; color:var(--muted); font-size:12.5px;
              font-weight:600; }
.pa-krok .t { font-size:13.5px; line-height:1.5; }
.pa-krok .t small { display:block; color:var(--muted); font-size:12px; }
.pa-krok .odmena { color:var(--green); font-weight:700; font-variant-numeric:tabular-nums;
                   font-size:14px; }
.pa-prazdno { border:1.5px dashed var(--line); border-radius:var(--r);
              padding:19px 22px; color:var(--muted); font-size:13.5px; line-height:1.6; }

/* ------------------------------------------------------------------ mobil */
@media (max-width:900px) {
  .pa-hero { padding:22px 18px 22px; }
  .pa-znak { font-size:130px; top:-20px; right:-6px; }
  .pa-avatar { width:56px; height:56px; }
  .pa-jmeno { font-size:22px; }
  .pa-cislo { font-size:52px; }
  .pa-skore { gap:18px; margin-top:20px; }
  .pa-fakta { margin-bottom:24px; }
  .pa-fakt { padding:9px 15px; }
  .pa-sekce { margin-bottom:24px; }
  .pa-zapisy, .pa-inzeraty, .pa-nastaveni, .pa-kroky { padding-left:17px; padding-right:17px; }
  .pa-zapis { grid-template-columns:58px 1fr auto; gap:11px; }
  .pa-zapis .kdy { font-size:11px; }
  .pa-sbirka { grid-template-columns:1fr 1fr; gap:10px; }
  .pa-inzerat { grid-template-columns:1fr auto; row-gap:3px; }
  .pa-inzerat .pill { grid-row:1 / span 2; grid-column:2; align-self:center; min-width:0; }
  .pa-inzerat .cena { grid-column:1; text-align:left; font-size:13px; }
  .pa-zasilka { padding:15px 17px; }
}

/* --------------------------------------------------- formuláře na profilu
   Rozbalení je checkbox + sourozenecký selektor, ne <details> — kvůli tomu,
   aby spouštěč mohl být dlaždice „Přidej kousek" uvnitř mřížky sbírky.
   Panel pořád neobsahuje ani řádek JavaScriptu. */

.pa-spinac { position: absolute; opacity: 0; pointer-events: none; }
.pa-spinac ~ .pa-formular { display: none; }
.pa-spinac:checked ~ .pa-formular { display: grid; }
/* Klávesnicí: fokus na skrytém přepínači se musí projevit na jeho popisku. */
.pa-spinac:focus-visible ~ .pa-tlacitko,
.pa-spinac:focus-visible ~ .pa-sbirka .pa-pridat { outline: 2px solid var(--brand);
                                                   outline-offset: 2px; }

.pa-tlacitko { display: inline-block; margin-top: 12px; padding: 11px 22px;
               border-radius: 999px; background: var(--brand); color: #fff;
               font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pa-tlacitko:hover { background: var(--brand-dark); }

.pa-formular { grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 14px;
               background: var(--panel); border-radius: var(--r); padding: 22px 24px; }
.pa-pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-pole.siroke { grid-column: 1 / -1; }
.pa-pole label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
                 color: var(--muted); }
.pa-pole input, .pa-pole select, .pa-pole textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); padding: 11px 13px; font: inherit;
  /* 16px, jinak na iPhonu stránka při kliknutí do pole skočí a zvětší se. */
  font-size: 16px; width: 100%; min-width: 0; }
.pa-pole textarea { resize: vertical; line-height: 1.5; }
.pa-pole input:focus, .pa-pole select:focus, .pa-pole textarea:focus {
  outline: none; border-color: var(--brand); }
.pa-pole input[type="file"] { padding: 9px 11px; font-size: 13.5px; color: var(--muted); }
.pa-spolu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pa-spolu select { width: auto; }

.pa-akce { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
           flex-wrap: wrap; margin-top: 4px; }
.pa-akce button { background: var(--brand); color: #fff; border: 0;
                  border-radius: 999px; padding: 12px 26px; font: inherit;
                  font-size: 14px; font-weight: 600; cursor: pointer; }
.pa-akce button:hover { background: var(--brand-dark); }
.pa-akce .pa-pozn { margin: 0; }

.pa-hlaska { border-radius: var(--r-sm); padding: 13px 18px; margin-bottom: 16px;
             font-size: 14px; border-left: 3px solid; }
.pa-hlaska.ok { background: rgba(62, 207, 142, .12); border-color: var(--green);
                color: var(--green); }
.pa-hlaska.spatne { background: rgba(242, 85, 90, .12); border-color: var(--red);
                    color: var(--red); }

@media (max-width: 900px) {
  .pa-formular { grid-template-columns: 1fr; padding: 18px 17px; }
  .pa-akce button { width: 100%; }
}

/* ------------------------------------------------- úpravy přímo v seznamu */

button.mala { background: var(--panel-2); border: 1px solid var(--line);
              color: var(--text); border-radius: 999px; padding: 7px 15px;
              font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
button.mala:hover { border-color: var(--brand); }
button.mala.tise { color: var(--muted); background: none; }
button.mala.tise:hover { color: var(--red); border-color: var(--red); }

.pa-radek-akce { display: flex; gap: 7px; align-items: center; }
.pa-kousek-akce { display: flex; gap: 6px; margin-top: 10px; }
.pa-kousek-akce select { flex: 1 1 auto; min-width: 0; background: var(--panel-2);
                         border: 1px solid var(--line); border-radius: var(--r-sm);
                         color: var(--text); padding: 7px 9px; font: inherit;
                         font-size: 12.5px; }
.pa-kousek-akce button { flex: 0 0 auto; padding: 7px 11px; }

.pa-pridat-radek { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.pa-pridat-radek input { flex: 1 1 220px; min-width: 0; background: var(--panel);
                         border: 1px solid var(--line); border-radius: var(--r-sm);
                         color: var(--text); padding: 12px 14px; font: inherit;
                         font-size: 16px; }
.pa-pridat-radek input:focus { outline: none; border-color: var(--brand); }
.pa-pridat-radek button { background: var(--brand); color: #fff; border: 0;
                          border-radius: 999px; padding: 12px 24px; font: inherit;
                          font-size: 14px; font-weight: 600; cursor: pointer; }
.pa-pridat-radek button:hover { background: var(--brand-dark); }

.pa-nastaveni-form { display: grid; gap: 16px; background: var(--panel);
                     border-radius: var(--r); padding: 22px 24px; }
.pa-legenda { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
              color: var(--muted); }
/* `.pa-pole label` je verzálkový popisek pole a je specifičtější (třída +
   element) než samotné `.pa-zaskrt`. Tenhle label je ale celý řádek s textem,
   takže se to musí přebít dvěma třídami — jinak řve celá zaškrtávačka. */
.pa-pole .pa-zaskrt { display: flex; align-items: flex-start; gap: 11px;
                      padding: 9px 0; cursor: pointer; text-transform: none;
                      letter-spacing: normal; font-size: 13.5px;
                      color: var(--text); }
.pa-pole .pa-zaskrt + .pa-zaskrt { border-top: 1px solid var(--line); }
.pa-pole .pa-zaskrt input { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 auto;
                   accent-color: var(--brand); }
.pa-pole .pa-zaskrt b { display: block; font-size: 13.5px; font-weight: 600; }
.pa-pole .pa-zaskrt small { display: block; color: var(--muted); font-size: 12.5px;
                   margin-top: 1px; }

@media (max-width: 900px) {
  .pa-inzerat .pa-radek-akce { grid-column: 1 / -1; margin-top: 8px; }
  .pa-zasilka .pa-radek-akce { width: 100%; }
  .pa-nastaveni-form { padding: 18px 17px; }
}


/* ==================================================================== pa2
   Druhé kolo členské části podle návrhu z Claude Design („Rozcestník").
   Profil je rozcestník, seznamy a formuláře jsou samostatné stránky.
   Všechno jede i bez JavaScriptu — `profil.js` to jenom vylepšuje.
   Prefixy: pa2f formuláře, pa2a rozcestník a hauly.
   ==================================================================== */
/* ---------------------------------------------------------------- animace */
@media (prefers-reduced-motion: no-preference) {
  .pa2-anim { animation: pa2-nahoru .5s cubic-bezier(.2,.7,.2,1) both; }
  .pa2f-thumb { animation: pa2-pop .35s cubic-bezier(.2,.9,.3,1.3) both; }
}
@keyframes pa2-nahoru { from { opacity:0; transform:translateY(14px); } }
@keyframes pa2-pop { from { opacity:0; transform:scale(.7); } }
@keyframes pa2-tocit { to { transform:rotate(1turn); } }
@keyframes pa2-pulz { 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) {
  .pa2 *, .pa2b-sheet, .pa2b-zaves { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.pa2-toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px); opacity:0; pointer-events:none; z-index:90;
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
  padding:11px 20px; font-size:13.5px; display:flex; gap:8px; align-items:baseline;
  box-shadow:0 12px 40px rgba(0,0,0,.5); transition:.35s; }
.pa2-toast.on { opacity:1; transform:translate(-50%,0); }
.pa2-toast b { color:var(--green); }
@media (min-width:901px) { .pa2-toast { bottom:28px; } }

/* ---------------------------------------------------------------- dock — spodní menu konečně k něčemu:
   skok mezi místnostmi, ikony jsou znaky sekcí, aktivní svítí barvou hodnosti */
.dock .cnico { font-style:normal; font-size:17px; font-weight:700; line-height:1; transition:transform .2s, color .2s; }
.dock a { transition:color .2s; }
.dock a.on { color:var(--text); }
.dock a.on::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 99px 99px; background:var(--tier, var(--brand)); }
.dock a.on .cnico { color:var(--tier, var(--brand)); transform:translateY(-1px); }
.dock a:active .cnico { transform:scale(.85); }

/* mise nováčka — karty úkolů s průběhem */
.pa2-mise-track { height:6px; background:var(--panel); border-radius:99px; overflow:hidden; margin:0 0 12px; }
.pa2-mise-track span { display:block; height:100%; background:var(--tier, var(--brand)); border-radius:99px; }
.pa2-mise { display:flex; flex-direction:column; gap:9px; }
.pa2-misekarta { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  background:var(--panel); border-radius:var(--r); padding:15px 18px; color:inherit; transition:background .2s; }
a.pa2-misekarta:hover, label.pa2-misekarta:hover { background:var(--panel-2); color:inherit; cursor:pointer; }
.pa2-misekarta .c { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--muted); }
.pa2-misekarta b { display:block; font-size:14px; font-weight:600; }
.pa2-misekarta small { color:var(--muted); font-size:12px; line-height:1.45; }
.pa2-misekarta .odmena { color:var(--green); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.pa2-misekarta.hotovo { opacity:.6; }
.pa2-misekarta.hotovo .c { background:var(--green); border-color:var(--green); color:#12141b; }
.pa2-misekarta.hotovo b { text-decoration:line-through; text-decoration-thickness:1.5px; }

/* strop podstránek — každá místnost má vlastní malou hlavu se znakem, ze světa hero */
.pa2-strop { position:relative; overflow:hidden; background:var(--panel); border-radius:var(--r);
  padding:22px 22px 20px; margin-bottom:16px; }
.pa2-strop .znak { position:absolute; right:2px; top:-30px; font-size:124px; font-weight:700;
  line-height:1; color:var(--tier, var(--brand)); opacity:.07; pointer-events:none;
  user-select:none; letter-spacing:-.06em; white-space:nowrap; }
.pa2-strop .radka { position:relative; display:flex; align-items:center; gap:14px; }
.pa2-strop h1 { margin:0; font-size:23px; letter-spacing:-.02em; line-height:1.15; }
.pa2-strop .sub { color:var(--muted); font-size:12.5px; margin-top:3px; }
.pa2-strop .sub b { color:var(--text); font-weight:600; }
.pa2-strop .kraj { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.pa2-strop .pa2f-zpet { background:var(--panel-2); }

/* tlačítka */
.pa2-cta { display:flex; align-items:baseline; justify-content:center; gap:10px;
  background:var(--brand); color:#fff; border:0; border-radius:999px; padding:13px 24px;
  font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; margin-bottom:16px;
  transition:filter .2s, transform .15s; }
.pa2-cta:hover { filter:brightness(1.12); color:#fff; }
.pa2-cta:active { transform:scale(.98); }
.pa2-cta small { font-weight:600; font-size:12px; opacity:.75; }
@media (min-width:901px) { .pa2-cta { width:max-content; padding-inline:30px; } }

.pa2-mala { background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:7px 14px; font:inherit; font-size:12px; cursor:pointer;
  transition:border-color .2s, color .2s; }
.pa2-mala:hover { border-color:var(--muted); }
.pa2-mala.tise { background:none; border-color:transparent; color:var(--muted); }
.pa2-mala.tise:hover { color:var(--red); }

/* ---------------------------------------------------------------- formuláře */
.pa2f-hlava { display:flex; align-items:center; gap:13px; margin:2px 0 16px; }
.pa2f-zpet { width:38px; height:38px; border-radius:50%; background:var(--panel); flex:0 0 auto;
  display:grid; place-items:center; color:var(--muted); font-size:17px; transition:.2s; }
.pa2f-zpet:hover { color:var(--text); background:var(--panel-2); }
.pa2f-hlava h1 { font-size:21px; margin:0; letter-spacing:-.02em; display:flex;
  align-items:baseline; gap:10px; }
.pa2f-hlava .cn { color:var(--muted); font-weight:400; font-size:11px; letter-spacing:.28em; }
.pa2f-hlava .odmena { margin-left:auto; color:var(--green); font-weight:700; font-size:13px;
  background:rgba(62,207,142,.12); padding:5px 13px; border-radius:999px; white-space:nowrap; }
.pa2f-hlava .pocet { margin-left:auto; color:var(--muted); font-size:12.5px; white-space:nowrap; }

.pa2f-mrizka { display:grid; grid-template-columns:1fr 1fr; gap:15px 12px;
  background:var(--panel); border-radius:var(--r); padding:20px; transition:opacity .3s; }
.pa2f-pole { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pa2f-pole.siroke, .pa2f-mrizka > .siroke { grid-column:1 / -1; }
.pa2f-pole > label, .pa2f-legenda { font-size:12px; color:var(--muted); font-weight:500; }
.pa2f input:not([type=checkbox]):not([type=file]), .pa2f select, .pa2f textarea {
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm, 12px);
  color:var(--text); font:inherit; font-size:14px; padding:11px 13px; width:100%;
  box-sizing:border-box; transition:border-color .2s, box-shadow .2s; }
.pa2f :is(input,select,textarea):focus { outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(76,111,255,.18); }
.pa2f ::placeholder { color:#565d73; }
.pa2f-spolu { display:grid; grid-template-columns:1fr auto; gap:8px; }
.pa2f textarea { resize:vertical; min-height:76px; }

.pa2f-fotky { display:flex; gap:10px; flex-wrap:wrap; }
.pa2f-thumb { position:relative; width:82px; height:82px; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; font-weight:700; font-size:17px; color:rgba(243,245,250,.28); }
.pa2f-thumb img { width:100%; height:100%; object-fit:cover; }
.pa2f-thumb .x { position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:10px;
  font-style:normal; cursor:pointer; }
.pa2f-nahraj { width:82px; height:82px; border:1.5px dashed var(--line); border-radius:12px;
  display:grid; place-items:center; text-align:center; color:var(--muted); font-size:10.5px;
  line-height:1.4; cursor:pointer; padding:6px; box-sizing:border-box; transition:.2s; }
.pa2f-nahraj:hover { border-color:var(--brand); color:var(--text); }
.pa2f-nahraj b { display:block; font-size:15px; }
.pa2f-nahraj input { display:none; }

.pa2f-odeslat { position:sticky; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:20;
  margin-top:14px; padding-top:12px; display:flex; align-items:center; gap:14px;
  background:linear-gradient(transparent, var(--bg) 40%); }
@media (min-width:901px) { .pa2f-odeslat { bottom:0; } }
.pa2f-odeslat button[type=submit] { background:var(--brand); color:#fff; border:0;
  border-radius:999px; padding:13px 26px; font:inherit; font-weight:700; font-size:14.5px;
  cursor:pointer; display:inline-flex; gap:10px; align-items:center;
  transition:transform .15s, filter .2s; }
.pa2f-odeslat button[type=submit]:hover { filter:brightness(1.12); }
.pa2f-odeslat button[type=submit]:active { transform:scale(.97); }
.pa2f-pozn { color:var(--muted); font-size:12px; line-height:1.45; }

/* ---------------------------------------------------------------- kroky — formulář po částech (radio, nula JS) */
.pa2-krok-prepinac { position:absolute; left:-9999px; }
.pa2-rail { display:flex; align-items:center; gap:9px; margin:2px 4px 16px; }
.pa2-rail label { display:flex; align-items:center; gap:8px; font-size:12.5px;
  color:var(--muted); cursor:pointer; transition:color .25s; }
.pa2-rail i { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--panel); display:grid; place-items:center; font-style:normal;
  font-size:12px; font-weight:600; transition:.25s; }
.pa2-rail .spoj { flex:1; height:1.5px; background:var(--line); }
#kr1:checked ~ .pa2-rail label[for="kr1"], #kr2:checked ~ .pa2-rail label[for="kr2"],
#kr3:checked ~ .pa2-rail label[for="kr3"] { color:var(--text); }
#kr1:checked ~ .pa2-rail label[for="kr1"] i, #kr2:checked ~ .pa2-rail label[for="kr2"] i,
#kr3:checked ~ .pa2-rail label[for="kr3"] i { border-color:var(--tier, var(--brand)); color:var(--tier, var(--brand)); }
#kr2:checked ~ .pa2-rail label[for="kr1"] i, #kr3:checked ~ .pa2-rail label[for="kr1"] i,
#kr3:checked ~ .pa2-rail label[for="kr2"] i { background:var(--tier, var(--brand));
  border-color:var(--tier, var(--brand)); color:#12141b; }
.pa2-panel { display:none !important; }
#kr1:checked ~ .p1, #kr2:checked ~ .p2, #kr3:checked ~ .p3 { display:grid !important; }
@media (prefers-reduced-motion: no-preference) {
  #kr1:checked ~ .p1, #kr2:checked ~ .p2, #kr3:checked ~ .p3 { animation:pa2-nahoru .4s cubic-bezier(.2,.7,.2,1) both; }
}
.pa2-kroknav { grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin-top:6px; }
.pa2-kroknav .dal { display:inline-flex; align-items:center; gap:9px; background:var(--brand);
  color:#fff; border-radius:999px; padding:12px 24px; font-weight:700; font-size:14px;
  cursor:pointer; transition:filter .2s, transform .15s; }
.pa2-kroknav .dal:hover { filter:brightness(1.12); }
.pa2-kroknav .dal:active { transform:scale(.97); }
.pa2-kroknav .zpet { color:var(--muted); font-size:13px; cursor:pointer; padding:10px 4px; transition:color .2s; }
.pa2-kroknav .zpet:hover { color:var(--text); }
.pa2-rekap { grid-column:1 / -1; background:var(--panel-2); border-radius:12px; padding:4px 16px; }
.pa2-rekap > div { display:flex; align-items:baseline; gap:10px; padding:10px 0; font-size:13px; }
.pa2-rekap > div + div { border-top:1px solid var(--line); }
.pa2-rekap b { font-weight:600; }
.pa2-rekap .co { color:var(--muted); flex:0 0 64px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.pa2-rekap .uprav { margin-left:auto; color:var(--muted); font-size:12px; cursor:pointer; }
.pa2-rekap .uprav:hover { color:var(--text); }
/* artboard „nahrávám": ukázat rovnou třetí krok */
#nahravam:target .pa2-panel { display:none !important; }
#nahravam:target .p3 { display:grid !important; }
#nahravam:target .pa2-rail label i { background:var(--tier, var(--brand));
  border-color:var(--tier, var(--brand)); color:#12141b; }

/* stav „nahrávám" — přes :target (mockup) i třídu .nahravam (profil.js) */.vrtule { display:none; width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:pa2-tocit .7s linear infinite; }
.kdyz-bezi { display:none; }
#nahravam:target .pa2f-mrizka, form.nahravam .pa2f-mrizka { opacity:.45; pointer-events:none; }
#nahravam:target .pa2f-odeslat button, form.nahravam .pa2f-odeslat button { pointer-events:none; filter:saturate(.55); }
#nahravam:target .vrtule, form.nahravam .vrtule { display:inline-block; }
#nahravam:target .kdyz-klid, form.nahravam .kdyz-klid { display:none; }
#nahravam:target .kdyz-bezi, form.nahravam .kdyz-bezi { display:inline; }

.pa2f-zaskrt { display:flex; gap:11px; align-items:flex-start; padding:9px 0; cursor:pointer; }
.pa2f-zaskrt input { width:17px; height:17px; margin-top:2px; accent-color:var(--brand); }
.pa2f-zaskrt b { display:block; font-size:13.5px; font-weight:600; }
.pa2f-zaskrt small { color:var(--muted); font-size:12px; }

/* ---------------------------------------------------------------- A · rozcestník */
.pa2a-dum { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
@media (min-width:901px) { .pa2a-dum { display:grid; grid-template-columns:1fr 1fr; gap:12px; } }
.pa2a-dvere { display:grid; grid-template-columns:1fr auto; gap:3px 14px; align-items:center;
  position:relative; overflow:hidden; background:var(--panel); border-radius:var(--r);
  padding:17px 20px; transition:transform .18s, background .2s; }
.pa2a-dvere:hover { background:var(--panel-2); transform:translateY(-2px); color:inherit; }
.pa2a-dvere .cn { position:absolute; right:12px; top:-16px; font-size:76px; font-weight:700;
  color:var(--text); opacity:.05; pointer-events:none; user-select:none; }
.pa2a-dvere .titul { grid-column:1; font-weight:700; font-size:15.5px; }
.pa2a-dvere .ziva { grid-column:1; color:var(--muted); font-size:12.5px; display:flex; align-items:center;
  gap:8px; min-width:0; white-space:nowrap; }
.pa2a-dvere .ziva > span { overflow:hidden; text-overflow:ellipsis; }
.pa2a-dvere .ziva b { color:var(--text); font-weight:600; }
.pa2a-dvere .plus { color:var(--green); font-weight:700; }
.pa2a-dvere .sipka { grid-column:2; grid-row:1 / span 2; color:var(--muted); font-size:18px; transition:transform .18s; }
.pa2a-dvere:hover .sipka { transform:translateX(3px); color:var(--text); }
.pa2a-mini { display:flex; gap:5px; flex:0 0 auto; }
.pa2a-mini i { width:28px; height:28px; border-radius:8px; font-style:normal; display:grid;
  place-items:center; font-size:9.5px; font-weight:700; color:rgba(243,245,250,.32); }
.pa2-tecka { width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 auto;
  box-shadow:0 0 8px rgba(62,207,142,.8); animation:pa2-pulz 2s infinite; }
.pa2a-tichy { display:flex; gap:10px; justify-content:space-between; align-items:center;
  border:1px solid var(--line); border-radius:var(--r); padding:13px 20px;
  color:var(--muted); font-size:12.5px; transition:.2s; }
.pa2a-tichy:hover { color:var(--text); border-color:var(--muted); }
.pa2a-tichy b { color:var(--text); font-weight:600; }

.pa2a-sprava { display:grid; grid-template-columns:auto auto; justify-content:start; gap:8px 7px; margin-top:11px; }
.pa2a-sprava select { grid-column:1 / -1; width:100%; min-width:0; padding:8px 10px !important; font-size:12px !important; border-radius:9px !important; }

/* sbírka = mřížka haul karet; kliknutí vede na stránku haulu */
.pa2a-haulgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:901px) { .pa2a-haulgrid { grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); } }
.pa2a-hkarta { display:block; color:inherit; background:var(--panel); border-radius:var(--r);
  overflow:hidden; transition:background .2s; }
.pa2a-hkarta:hover { color:inherit; background:var(--panel-2); }
.pa2a-hkarta:hover .kolaz > div { background:#282d3d; }
.pa2a-hkarta .kolaz { aspect-ratio:4 / 3; display:grid; gap:2px; position:relative; }
.pa2a-hkarta .kolaz .pill { position:absolute; top:9px; right:9px; z-index:2; backdrop-filter:blur(4px); }
.pa2a-hkarta .kolaz .hlogo { position:absolute; top:9px; left:9px; z-index:2; width:30px; height:30px;
  border-radius:9px; background:rgba(18,20,27,.74); backdrop-filter:blur(4px); display:grid;
  place-items:center; font-size:15px; font-weight:700; color:var(--text); }
.pa2a-hkarta .kolaz.dva { grid-template-columns:1fr 1fr; }
.pa2a-hkarta .kolaz > div { display:grid; place-items:center; font-weight:700; font-size:26px;
  color:rgba(243,245,250,.16); }
.pa2a-hkarta .info { padding:12px 15px 14px; }
.pa2a-hkarta .nazev { font-weight:700; font-size:14.5px; letter-spacing:-.01em; }
.pa2a-hkarta .sub { color:var(--muted); font-size:12px; margin-top:1px; }
.pa2a-hkarta .spodek { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.pa2a-hkarta .cena { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }

/* placeholder fotek — plochý, žádné barevné přechody ani iniciály */
.pa2 .pa-foto, .pa2a-hkarta .kolaz > div, .pa2 .pa2f-thumb, .pa2 .pa2a-mini i {
  background:var(--panel-2); color:#565d73; font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; transition:background .2s; }

/* čísla haulu — mřížka parametrů */
.pa2a-parametry { display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:14px; }
@media (min-width:901px) { .pa2a-parametry { grid-template-columns:repeat(3,1fr); } }
.pa2a-parametry > div { background:var(--panel); padding:11px 16px 12px; }
.pa2a-parametry span { display:block; color:var(--muted); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:2px; }
.pa2a-parametry b { font-size:14px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pa2a-parametry small { color:var(--muted); font-size:11.5px; font-weight:400; }
.pa2f-jednotka { align-self:center; color:var(--muted); font-size:13px; padding-right:2px; }

/* logo haulu — fotka, nebo znaková ikona */
.pa2-haullogo { width:46px; height:46px; border-radius:14px; background:var(--panel-2); flex:0 0 auto;
  display:grid; place-items:center; overflow:hidden; font-size:9px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#565d73; }
.pa2-haullogo img { width:100%; height:100%; object-fit:cover; }
.pa2-loga { display:flex; gap:10px; flex-wrap:wrap; }
.pa2-logo { position:relative; width:58px; height:58px; border-radius:16px; background:var(--panel-2);
  border:1.5px solid var(--line); display:grid; place-items:center; cursor:pointer;
  font-size:23px; font-weight:700; color:var(--muted); transition:border-color .2s, color .2s, box-shadow .2s; }
.pa2-logo input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.pa2-logo:hover { border-color:var(--muted); }
.pa2-logo:has(input:checked) { border-color:var(--tier, var(--brand));
  color:var(--tier, var(--brand)); box-shadow:0 0 0 3px var(--tier-soft, rgba(76,111,255,.15)); }
.pa2-logo.nahraj { border-style:dashed; font-size:9.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; text-align:center; line-height:1.5; }
.pa2-logo.nahraj b { display:block; font-size:16px; line-height:1; }

/* stránka haulu — sdílení */
.pa2a-sdilet { display:flex; align-items:center; gap:12px; background:var(--panel);
  border-radius:var(--r); padding:13px 18px; margin:14px 0 6px; }
.pa2a-sdilet code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:none; padding:0; color:var(--muted); font-size:12.5px; }

/* Rekapitulace v posledním kroku formuláře žije z JavaScriptu — bez něj by
   byla prázdná, tak se neukáže vůbec. */
.pa2-rekap { display: none; }
.pa2-rekap.zive { display: block; }

/* Fotky v dlaždicích jdou přes `background-image`, aby se daly skládat do
   koláže bez měření — bez `cover` by se opakovaly ve své vlastní velikosti. */
.pa2a-hkarta .kolaz > div, .pa2a-mini i, .pa2 .pa-foto {
  background-size: cover; background-position: center;
}
/* Malá varianta hlavního tlačítka — sedí do hlavičky místnosti. */
.pa2-cta-mala { margin: 0; padding: 11px 20px; font-size: 13.5px; }
/* Odměna v hlavičce formuláře. */
.pa2f-odmena { color: var(--green); font-weight: 700; font-size: 13px;
  background: rgba(62,207,142,.12); padding: 5px 13px; border-radius: 999px;
  white-space: nowrap; }
/* Prázdná sbírka: jedna velká dlaždice, která rovnou vede na založení. */
.pa2-prazdno-karta { display: block; text-align: center; padding: 46px 24px;
  border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--muted);
  transition: border-color .2s, transform .2s; }
.pa2-prazdno-karta:hover { border-color: var(--tier, var(--brand)); color: var(--muted);
  transform: translateY(-2px); }
.pa2-prazdno-karta .znak { display: block; font-size: 46px; font-weight: 700;
  color: var(--line); line-height: 1; margin-bottom: 12px; }
.pa2-prazdno-karta b { display: block; color: var(--text); font-size: 17px;
  margin-bottom: 6px; }
.pa2-prazdno-karta span:not(.znak) { display: block; max-width: 460px; margin: 0 auto;
  font-size: 13.5px; }
/* Úprava haulu je schovaná pod rozklikávátkem — na stránce haulu je hlavní
   obsah to, co je uvnitř, ne formulář. */
.hl-sprava { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.hl-sprava summary { cursor: pointer; color: var(--muted); font-size: 13px;
  list-style: none; transition: color .18s; }
.hl-sprava summary::-webkit-details-marker { display: none; }
.hl-sprava summary::before { content: "⚙ "; }
.hl-sprava summary:hover { color: var(--text); }
.hl-sprava[open] .pa2f-mrizka { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .hl-sprava[open] .pa2f-mrizka { animation: pa2-nahoru .3s ease both; }
}

/* Na mobilu se dlouhý název haulu a odznak stavu perou o jeden řádek —
   „Kakobuy · srpen" se zalomil a stav mu skončil přes text. */
.pa2-strop .radka > div:not(.kraj) { min-width: 0; }
@media (max-width: 560px) {
  .pa2-strop .radka { flex-wrap: wrap; }
  .pa2-strop .kraj { margin-left: 0; width: 100%; flex-direction: row;
                     align-items: center; justify-content: flex-start; }
  .pa2-strop .kraj .pa2-cta { width: 100%; }
}

/* ---------------------------------------------------------- sdílený haul
   Veřejná stránka bez menu a bez přihlášení. Vlastní kostra, ale ze
   stejných dílů jako zbytek panelu — kdo přijde z odkazu, má vidět, odkud
   to je. */
.sd { max-width: 760px; margin: 0 auto; padding: 26px 18px 48px; }
.sd-hlava { position: relative; overflow: hidden; display: flex; align-items: center;
  gap: 14px; background: var(--panel); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 14px; }
.sd-znak { position: absolute; right: 4px; top: -26px; font-size: 116px; font-weight: 700;
  line-height: 1; color: var(--brand); opacity: .07; pointer-events: none;
  user-select: none; letter-spacing: -.06em; }
.sd-logo { width: 54px; height: 54px; border-radius: 16px; object-fit: cover;
  flex: 0 0 auto; position: relative; }
.sd-kdo { position: relative; min-width: 0; flex: 1; }
.sd-kdo h1 { margin: 0; font-size: 23px; letter-spacing: -.02em; line-height: 1.15; }
.sd-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.sd-sub b { color: var(--text); font-weight: 600; }
.sd-hlava .pill { position: relative; flex: 0 0 auto; }
.sd-pata { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.sd-pata b { color: var(--text); font-weight: 600; }
.sd-pata a { font-weight: 700; color: var(--text); }
.sd-pata a i { font-style: normal; color: var(--brand); }
.sd .pa2a-parametry { margin-bottom: 14px; }
.sd .pa-foto { background-size: cover; background-position: center; }
@media (max-width: 560px) {
  /* Dlouhý název haulu se zalomí a odznak stavu mu skončil přes text. */
  .sd-hlava { flex-wrap: wrap; }
  .sd-hlava .pill { width: max-content; }
}

/* Komentáře pod sdíleným haulem. */
.sd-komentare { margin-top: 26px; }
.sd-komentare h2 { display: flex; align-items: baseline; gap: 10px; font-size: 16px;
  margin: 0 0 12px; }
.sd-komentare h2 .cn { color: var(--muted); font-weight: 400; font-size: 11px;
  letter-spacing: .28em; }
.sd-komentare h2 .pocet { margin-left: auto; color: var(--muted); font-size: 13px;
  font-weight: 400; }
.sd-vlakno { display: flex; flex-direction: column; gap: 2px; }
.sd-koment { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.sd-koment + .sd-koment { border-top: 1px solid var(--line); }
.sd-koment img, .sd-bezavataru { width: 34px; height: 34px; border-radius: 50%;
  flex: 0 0 auto; object-fit: cover; }
.sd-bezavataru { background: var(--panel-2); display: grid; place-items: center;
  color: var(--muted); font-size: 13px; }
.sd-koment .telo { flex: 1; min-width: 0; }
.sd-koment .kdo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted); }
.sd-koment .kdo b { color: var(--text); font-size: 13.5px; font-weight: 600; }
.sd-koment .znacka { color: var(--brand); font-size: 11px; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; }
.sd-koment .text { font-size: 13.5px; margin-top: 3px; overflow-wrap: anywhere; }
.sd-psat { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.sd-psat textarea { flex: 1; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: 14px;
  padding: 11px 13px; resize: vertical; min-height: 44px; }
.sd-psat textarea:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(76,111,255,.18); }
.sd-psat button { background: var(--brand); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 22px; font: inherit; font-weight: 700; cursor: pointer;
  transition: filter .2s, transform .15s; }
.sd-psat button:hover { filter: brightness(1.12); }
.sd-psat button:active { transform: scale(.97); }
.sd-prihlas { display: block; margin-top: 14px; text-align: center; padding: 13px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  font-weight: 600; font-size: 13.5px; transition: border-color .2s; }
.sd-prihlas:hover { border-color: var(--brand); }
.sd-duvod { margin-top: 14px; padding: 13px 18px; background: var(--panel);
  border-radius: var(--r); color: var(--muted); font-size: 13px; line-height: 1.55; }
/* „Prodat" u doručeného kousku — vede rovnou do předvyplněného inzerátu. */
.hl-prodat { display: inline-block; margin-top: 7px; color: var(--text);
  text-decoration: none; }
.hl-prodat:hover { border-color: var(--brand); color: var(--brand); }
/* Odznak stavu leží na fotce, ne na panelu — bez vlastního tmavého podkladu
   je na světlé fotce nečitelný. */
.pa2a-hkarta .kolaz .pill { background: rgba(18, 20, 27, .78); color: var(--text); }
.pa2a-hkarta .kolaz .pill.ok { color: var(--green); }
.pa2a-hkarta .kolaz .pill.sky { color: var(--sky); }

/* Nastavení sdílení na stránce haulu — co uvidí lidi mimo server. */
.sd-nastaveni { background: var(--panel); border-radius: var(--r); padding: 18px 20px;
  margin-top: 18px; }
.sd-nastaveni .hlava b { display: block; font-size: 15px; }
.sd-nastaveni .hlava span { display: block; color: var(--muted); font-size: 12.5px;
  line-height: 1.5; margin-top: 2px; }
.sd-nastaveni .skupiny { display: grid; gap: 0 18px; margin: 10px 0 4px;
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .sd-nastaveni .skupiny { grid-template-columns: 1fr 1fr; } }
.sd-nastaveni .pa2f-zaskrt { border-top: 1px solid var(--line); }
.sd-nastaveni .pa2a-sdilet { margin: 14px 0 0; background: var(--panel-2); }

/* Přihlášení a kredit navazují na členskou kartu: inkoust, modrá, jasná čísla. */
.member-login { background: var(--bg); }
.member-login .card { max-width: 480px; padding: 38px; border: 1px solid var(--line);
  border-radius: 20px; position: relative; overflow: hidden; text-align: left; }
.member-login .login-label { color: #a8b7ed; font: 12px/1.5 ui-monospace, Consolas, monospace;
  margin-bottom: 34px; }
.member-login h1 { font-size: clamp(30px, 6vw, 40px); letter-spacing: -.04em; }
.member-login .login-stamp { position: absolute; right: 30px; top: 24px;
  color: #a8b7ed; border: 1px solid #536494; padding: 0 8px; font: 28px/1.6 serif; }
.member-login .login-return { border-left: 2px solid #8ca3fb; padding: 4px 0 4px 14px;
  margin: 24px 0; color: var(--text); font-size: 13px; }
.member-login .discord { width: 100%; margin-top: 8px; min-height: 48px; justify-content: center; }
.member-login .login-note { color: var(--muted); font-size: 12px; margin-top: 20px; }
.credit-tabs { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
  margin: 0 0 24px; }
.credit-tabs a { padding: 12px 0; color: var(--muted); font-size: 13px; }
.credit-tabs a[aria-current] { color: var(--text); border-bottom: 2px solid #8ca3fb; }
.credit-tabs a:hover { color: var(--text); }
.credit-standing { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 18px 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.credit-standing span { color: var(--muted); }
.credit-standing strong { margin-left: auto; font-size: 13px; font-weight: 500; }
.credit-standing progress { display: block; flex-basis: 100%; width: 100%; height: 6px;
  border: 0; border-radius: 3px; background: var(--panel-2); accent-color: #8ca3fb; }
.credit-standing progress::-webkit-progress-bar { background: var(--panel-2); border-radius: 3px; }
.credit-standing progress::-webkit-progress-value { background: #8ca3fb; border-radius: 3px; }
.credit-standing progress::-moz-progress-bar { background: #8ca3fb; border-radius: 3px; }
.credit-history-title { font-size: 15px; margin: 0 0 16px; }
.credit-board { max-width: 850px; }
.credit-ranking .num, .pa-zapis .delta { font-variant-numeric: tabular-nums; }
.credit-ranking .is-me { background: #28344e; }
.credit-ranking .pill { margin-left: 10px; }
@media (max-width: 500px) {
  .member-login .card { padding: 28px 24px; }
  .credit-standing strong { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}