/* =====================================================================
   Stammtisch – gemeinsames Design
   =====================================================================

   Die eine Stelle, an der Farben, Schriften und das geteilte Grundgeruest
   der Website stehen. Wer eine Farbe aendern will, aendert sie hier – und
   nur hier.

   WARUM ES DIESE DATEI GIBT
   Vorher stand das Design in jeder der zehn Seiten erneut. Das ist nicht
   nur Doppelung, es ist auseinandergelaufen: --parchment (die Textfarbe,
   80 Verwendungen) stand in neun Seiten auf #efe3c6 und in index.html auf
   #e9dcbe, --wine gab es in drei Varianten, --green in zwei, und die
   Schrift-Stacks hatten mal eine Rueckfallebene und mal nicht.
   Vereinheitlicht am 7. August 2026 auf die jeweils verbreitetste Variante.

   EINBINDEN
   Im <head> jeder Seite VOR dem eigenen <style>-Block:

       <link rel="stylesheet" href="design.css?v=5">

   Der Versionsanhang ist Absicht. Android-Chrome kennt kein Strg+F5, und
   eine im Cache haengende Fassung dieser Datei wuerde nicht eine Seite
   verunstalten, sondern alle. Bei jeder Aenderung hier die Zahl in ALLEN
   Seiten hochzaehlen.

   REIHENFOLGE
   Diese Datei kommt vor dem <style>-Block der Seite. Seiteneigene Regeln
   gewinnen deshalb bei gleicher Spezifitaet – eine Seite kann also
   abweichen, wenn sie es ausdruecklich tut.

   WAS HIER NICHT HINEINGEHOERT
   Seitenspezifisches: Paperdoll, Zimmerplan, Lootledger, die
   Vokations-Symbole und der Hintergrund der Startseite. Die bleiben in
   ihrer Seite, weil sie sonst jede andere Seite mitladen muesste.
   ===================================================================== */

:root{
  /* --- Flaechen, von dunkel nach hell --- */
  --ink:            #17110c;   /* Seitenhintergrund, "dungeon dark" */
  --ink-2:          #1f170f;   /* abgesetzte Flaechen, Eingabefelder */
  --stone:          #2a2018;   /* Karten, Schaltflaechen in Ruhe */
  --stone-hi:       #4d3a28;   /* Raender */

  /* --- Schrift --- */
  --parchment:      #efe3c6;   /* Grundfarbe fuer Text */
  --parchment-dim:  #c8b790;   /* Nebentext, Beschriftungen */

  /* --- Akzent --- */
  --gold:           #e8b04b;   /* Ueberschriften, Links, Hervorhebung */
  --gold-deep:      #b47f2a;   /* Verlaeufe und Raender dazu */

  /* Das hellere Gold der Schaltflaechen. Stand vorher als vier feste
     Hexwerte in leader, member, soulcores und index - eine Aenderung an
     --gold waere dort wirkungslos geblieben. */
  --gold-bright:    #f2c15c;   /* oberer Rand des Verlaufs */
  --gold-mid:       #c98f2c;   /* unterer Rand des Verlaufs */
  --gold-edge:      #ffe6a0;   /* heller Rahmen */

  /* --- Rueckmeldungen --- */
  --wine:           #9c3939;   /* Warnung, Loeschen, Fehler */
  --green:          #5aa64a;   /* Erfolg */
  --green-deep:     #3f7a34;

  /* --- Schriftfamilien ---
     Die Rueckfallebenen sind Absicht: Laedt Google Fonts nicht, ist das
     Ergebnis festgelegt statt vom Geraet abhaengig. */
  --font-display:   "Jacquard 24", serif;
  --font-body:      "Crimson Pro", Georgia, serif;
  --font-ui:        "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}

/* =====================================================================
   Geteiltes Grundgeruest
   Nur Regeln, die in mehreren Seiten wortgleich vorkamen. Bewusst NICHT
   aufgenommen: `*{…}` und `body{…}` – davon gibt es zwei verschiedene
   Fassungen im Projekt, eine gemeinsame haette Seiten still veraendert.
   ===================================================================== */

a{color:var(--gold)}

h1{font-family:var(--font-display);font-weight:400;color:var(--gold);font-size:2.4rem;line-height:1;margin:8px 0 20px}
h2{font-family:var(--font-display);font-weight:400;color:var(--gold);font-size:1.7rem;line-height:1}

/* Kopfzeile der Seiten */
header.top small{display:block;font-family:var(--font-ui);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--parchment-dim)}
header.top .sp{flex:1}

/* Aufklappbare Abschnitte */
.panel__bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,214,150,.12);background:rgba(255,214,150,.04)}
.panel__bar .rune{color:var(--gold)}
.panel__body{padding:18px}

/* Text und Rueckmeldungen */
.muted{color:var(--parchment-dim);font-size:.92rem}
.status.err{color:#e0794f}
.hidden{display:none!important}

/* Tabellen */
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,214,150,.1)}

/* Schaltflaechen – nur der gemeinsame Hover-Effekt; das Aussehen der
   Schaltflaechen selbst unterscheidet sich je Seite noch. */
.btn:hover{filter:brightness(1.12)}

/* Kalender- und Uhrsymbol in Datums- und Zeitfeldern.

   Es ist KEINE eigene Schaltflaeche: Der Browser zeichnet das Symbol selbst
   in das <input> hinein, und zwar klein und schwarz. Auf dem dunklen
   Pergamentgrund war davon so gut wie nichts zu sehen.

   Der erste Versuch war ein Farbfilter auf das eingebaute Symbol. Das
   funktioniert grundsaetzlich, hat aber zwei Haken: Aus Schwarz laesst sich
   per `invert` nur Grau machen, das getoente Ergebnis bleibt matt – und an
   der Groesse aendert der Filter gar nichts. Deshalb hier der direkte Weg:
   `appearance:none` nimmt dem Browser die Zeichnung ab, und wir legen unsere
   eigene als Hintergrundbild hinein. Farbe und Groesse sind damit exakt
   bestimmt.

   Die Farbe steht als fester Hexwert im Bild, weil eine Daten-URL keine
   CSS-Variablen kennt: Sie muss von Hand mitwandern, wenn sich --gold
   (#e8b04b) aendert.

   Nur WebKit und Blink kennen diesen Pseudo-Selektor. Firefox zeichnet gar
   kein Symbol in das Feld; dort faellt die Regel weg, und das Feld laesst
   sich weiterhin per Tastatur und Klick bedienen. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin:0 2px 0 6px;padding:0;
  cursor:pointer;opacity:1;
  border-radius:5px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3.5V6.5M16 3.5V6.5'/%3E%3C/svg%3E") center/19px no-repeat;
}
input[type="time"]::-webkit-calendar-picker-indicator{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b04b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover{background-color:rgba(255,214,150,.16)}

/* Die Ziffern daneben sind ein eigenes Problem: Ohne diese Zeile bleiben sie
   in der Browserfarbe stehen, waehrend das Feld dunkel ist. */
input[type="date"],input[type="time"],input[type="datetime-local"]{color-scheme:dark}

/* Breite: so schmal wie der laengstmoegliche Inhalt.

   Diese Felder haben ein festes Format – ein Datum ist immer "31.12.2026",
   eine Uhrzeit immer "22:00". Trotzdem standen sie ueber die halbe Zeile,
   weil die Seiten ihre Eingabefelder pauschal auf `width:100%` setzen:
   `label.fld input`, `.admin-form input` und `.rooms td input`. Fuer ein
   Textfeld ist das richtig, fuer ein Datumsfeld nicht.

   `width:auto` gibt die Groesse an den Browser zurueck, und der kennt das
   Format samt Laenge der Monatsnamen in der eingestellten Sprache. Eine feste
   Angabe in `ch` waere schlechter: Sie muesste fuer jedes Datumsformat und
   jede Schrift erneut geraten werden.

   ZUR DOPPELUNG DES SELEKTORS: `input[type="date"][type="date"]` prueft
   zweimal dasselbe und aendert am Treffer nichts – nur an der Spezifitaet.
   Die muss hoeher liegen als bei `.rooms td input` und `label.fld input`
   (beide 0-1-2), sonst gewinnt die Seite, weil ihr <style> nach dieser Datei
   kommt. Das ist die uebliche Alternative zu `!important` und laesst sich von
   einer Seite bei Bedarf weiterhin gezielt ueberschreiben. */
input[type="date"][type="date"],
input[type="time"][type="time"],
input[type="datetime-local"][type="datetime-local"],
input[type="month"][type="month"],
input[type="week"][type="week"]{
  width:auto;min-width:0;max-width:100%;
}


/* =====================================================================
   Geteilte Komponenten (zweite Runde, 7. August)
   =====================================================================
   Regeln, die in mindestens drei Seiten WORTGLEICH standen. Sie sind hier
   zusammengezogen, damit eine Aenderung nur noch an einer Stelle noetig ist.

   Bewusst NICHT aufgenommen: .center, .row .fld, label.fld und
   header.top img. Diese Selektoren sind spezifischer als die gleichnamigen
   Regeln mancher Seiten (etwa `label.fld` gegenueber `.fld`) und wuerden
   sie damit ueberstimmen - eine stille Aenderung des Aussehens.
   ===================================================================== */
/* --- Quest-Uebersicht und Quest-Board --- */
.q-body{padding:4px 14px 12px;border-top:1px dashed rgba(255,214,150,.12)}
.q-card{border:1px solid var(--stone-hi);border-radius:12px;padding:14px 16px;background:linear-gradient(180deg,var(--stone),var(--ink-2))}
.q-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.q-card-h .q-name{font-family:var(--font-ui);font-weight:700;color:var(--parchment)}
.q-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.q-item{border-bottom:1px solid rgba(255,214,150,.08)}
.q-item summary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 12px;cursor:pointer;list-style:none;font-family:var(--font-ui)}
.q-item summary::-webkit-details-marker{display:none}
.q-item summary:hover{background:rgba(255,214,150,.05)}
.q-item:last-child{border-bottom:0}
.q-item[open] .q-name{color:var(--gold)}
.q-item[open] summary{background:rgba(255,214,150,.07)}
.q-list{max-height:520px;overflow-y:auto;border:1px solid var(--stone-hi);border-radius:10px}
.q-name{font-weight:600;color:var(--parchment);flex:1;min-width:160px}
.q-offer{display:inline-flex;align-items:center;gap:5px;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);border-radius:6px;padding:2px 8px;margin-right:8px;cursor:pointer;white-space:nowrap}
.q-offer input{cursor:pointer;margin:0}
.qi-add{margin-top:10px}
.qi-form .qi-sel,.qi-form .qi-extern{font-family:var(--font-ui);color:var(--parchment);background:var(--ink-2);border:1px solid var(--stone-hi);border-radius:6px;padding:6px 8px;margin-right:6px;margin-bottom:6px}
.qi-x{background:none;border:1px solid var(--stone-hi);color:var(--gold-deep);border-radius:5px;padding:0 6px;cursor:pointer;font-size:.7rem;line-height:1.6}
.qi-x:hover{color:var(--gold);border-color:var(--gold-deep)}
/* --- Trainingsdummy-Tabellen --- */
.daygrid{display:block;overflow:auto}
.dgrid{overflow-x:auto}
.dtable .bk{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(232,176,75,.14);border:1px solid var(--gold-deep);border-radius:6px;padding:3px 8px}
.dtable .bk .who{font-weight:700;color:var(--gold)}
.dtable .daysep td{background:rgba(255,214,150,.06);color:var(--gold);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.dtable td.slot{cursor:default;min-width:150px}
.dtable2{border-collapse:collapse;font-family:var(--font-ui);font-size:.7rem}
.dtable2 td{padding:1px 4px;border:1px solid rgba(255,214,150,.06);text-align:center;height:16px;min-width:80px}
.dtable2 td.bkc{background:rgba(232,176,75,.17);color:var(--gold);position:relative;vertical-align:middle;line-height:1.05;font-weight:700;font-size:.66rem}
.dtable2 td.bkc .hrs{display:block;font-size:.5rem;color:var(--parchment-dim);font-weight:400}
.dtable2 td.bkc .who{display:block;word-break:break-word}
.dtable2 td.bkc .x{position:absolute;top:0;right:2px;background:none;border:0;color:var(--gold-deep);cursor:pointer;font-size:.6rem;line-height:1;padding:0}
.dtable2 td.bkc .x:hover{color:var(--gold)}
.dtable2 td.off{background:repeating-linear-gradient(45deg,#1b1610 0 5px,#161009 5px 10px)}
.dtable2 td.t{color:var(--parchment-dim);white-space:nowrap;min-width:auto;font-variant-numeric:tabular-nums;position:sticky;left:0;background:#191209;z-index:1}
/* Kopfzeile war kleiner als der Inhalt (.7rem), den sie beschriftet -> Lesbarkeitsfehler, nicht Absicht */
.dtable2 th{padding:5px 8px;font-size:.74rem;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(255,214,150,.14);white-space:nowrap;background:rgba(255,214,150,.05)}
.dtable2 th.dayh{background:rgba(255,214,150,.09);font-size:.84rem;font-weight:700}
.dtable2 thead th{position:sticky;top:0;z-index:2}
/* --- Loot-Listen --- */
.loot-list .lr-rare, .loot-list .lr-veryrare{color:var(--gold)}
/* --- Schaltflaechen und Chips --- */
.btn--green{background:linear-gradient(180deg,var(--green),var(--green-deep));color:#0f1a0c;border-color:var(--green-deep);font-weight:700}
.btn-d{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:11px;font-family:var(--font-ui);font-weight:600;text-decoration:none;background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#241708;border:1px solid var(--gold-deep)}
.btn-d.alt{background:linear-gradient(180deg,var(--stone),var(--ink-2));color:var(--gold)}
.chip.sel{background:var(--gold);color:#241708;border-color:var(--gold-deep);font-weight:700}
/* --- Karten und Layout --- */
.acc-card{border:1px solid var(--stone-hi);border-radius:10px;padding:14px;background:rgba(255,214,150,.03)}
.rooms td input{font-family:var(--font-ui);font-size:.86rem;color:var(--parchment);background:var(--ink-2);border:1px solid var(--stone-hi);border-radius:6px;padding:5px 7px;width:100%}


/* =====================================================================
   Standardfassungen (dritte Runde, 7. August)
   =====================================================================
   Regeln, die in mehreren Seiten unterschiedlich standen. Hier steht die
   Fassung, die die MEHRHEIT der Seiten benutzt - der Standard fuer alles
   Neue.

   Seiten, die bewusst oder historisch abweichen, behalten ihre eigene
   Regel im Seiten-<style>. Weil der dort NACH dieser Datei steht, gewinnt
   sie weiterhin: Das Aussehen aendert sich durch diesen Umzug nirgends.
   Wer eine solche Abweichung findet und sie fuer versehentlich haelt,
   loescht sie einfach - dann greift der Standard von hier.
   ===================================================================== */
*{box-sizing:border-box}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:.8rem;background:var(--ink-2);border:1px solid var(--stone-hi);border-radius:8px;padding:4px 9px;margin:3px 4px 0 0;cursor:pointer}
.discord-links{display:flex;flex-wrap:wrap;gap:12px}
.discord-sub{margin:18px 0 10px;font-family:var(--font-ui);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--parchment-dim)}
.loot-list{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0}
.loot-list span{font-family:var(--font-ui);font-size:.72rem;color:var(--parchment-dim)}
.qi-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.qi-list li{display:inline-flex;align-items:center;gap:6px}
/* Resistenz-Chips im Bestiary. Der Wert ist der Schaden, den die Kreatur
   ERHAELT: ueber 100 % nimmt sie mehr (verwundbar, gut fuer den Spieler),
   unter 100 % weniger (resistent). Die Farben folgen dem Nutzen fuer den
   Spieler - gruen heisst "dieses Element lohnt sich".

   Sie waren in chars.html vertauscht: `weak` (ueber 100 %) war rot und
   `strong` gruen. Am 7. August gedreht.

   Benutzt wird das nur von chars.html; member.html und soulcores.html
   hatten die Regeln, aber nie ein Element dazu. Deren tote Fassung stand
   hier zuvor als vermeintliche Mehrheit und wurde von der einzigen Seite,
   die sie braucht, ueberstimmt. */
.res-grid{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.res-chip{font-family:var(--font-ui);font-size:.72rem;border:1px solid var(--stone-hi);border-radius:6px;padding:2px 7px;color:var(--parchment-dim)}
.res-chip.weak{color:#7ec06e;border-color:#3f6a34}
.res-chip.strong{color:#e0794f;border-color:#7a3a2a}
body{margin:0;background:linear-gradient(180deg,#1a130c,#120d08);color:var(--parchment);font-family:var(--font-body);font-size:18px;line-height:1.6;min-height:100vh}
footer{border-top:1px solid var(--stone-hi);margin-top:20px}
footer .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
h3{font-family:var(--font-ui);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
header.top{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--stone-hi);position:sticky;top:0;background:rgba(18,13,8,.94);backdrop-filter:blur(4px);z-index:20;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:.9rem}
th{color:var(--gold);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}


/* =====================================================================
   Vereinheitlichte Komponenten (vierte Runde, 7. August)
   =====================================================================
   Diese zwoelf Regeln standen in zwei Fassungen im Projekt: chars/loot/
   settings gegen leader/member/soulcores, jeweils drei zu drei. Beide
   stammen aus demselben Import-Commit vom 24. Juli - es gab also keine
   juengere und keine "richtige" Fassung, nur zwei Generationen Kopiererei.

   Uebernommen wurde leader/member/soulcores. Ausschlaggebend war .btn:
   Nur diese Fassung setzt inline-flex mit gap und richtet damit
   Schaltflaechen mit Symbol sauber aus. Die uebrigen Unterschiede betragen
   ein bis vier Pixel.

   index.html und notifications.html haben bei mehreren dieser Regeln eine
   dritte, eigene Fassung. Die behalten sie - ihr <style> steht nach dieser
   Datei und gewinnt.
   ===================================================================== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;border-radius:9px;border:1px solid var(--stone-hi);background:linear-gradient(180deg,var(--stone),var(--ink-2));color:var(--parchment);cursor:pointer;text-decoration:none;transition:filter .12s}
.btn--gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold-mid));color:#2a1c0a;border-color:var(--gold-edge)}
.btn--sm{padding:5px 10px;font-size:.68rem}
.btn[disabled]{opacity:.5;cursor:default}
.note{font-family:var(--font-ui);font-size:.8rem;color:var(--parchment-dim);margin-top:10px}
.panel{background:linear-gradient(180deg,#241a10,#1b140c);border:1px solid var(--stone-hi);border-radius:14px;margin:0 0 26px;overflow:hidden}
.row{display:flex;gap:12px;flex-wrap:wrap}
.status{font-family:var(--font-ui);font-size:.78rem;margin-top:8px;min-height:1em}
.status.ok{color:#6ec06e}
.tag{display:inline-block;font-family:var(--font-ui);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);border-radius:20px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.wrap{max-width:1000px;margin:0 auto;padding:22px 18px 60px}
header.top b{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);font-weight:400;letter-spacing:.02em}


/* =====================================================================
   Geteilt von je zwei Seiten (fuenfte Runde, 7. August)
   =====================================================================
   Regeln, die in genau zwei Seiten wortgleich standen. Nicht aufgenommen
   wurden zwoelf weitere, die eine dritte Seite NEU getroffen haetten -
   etwa `textarea` (wirkt ueberall) oder `details.hist>summary`, das
   inzwischen auch die Rankings im Memberbereich benutzen.
   ===================================================================== */

/* --- loot + settings --- */
.modal-body{padding:18px}
.modal-body select{max-width:100%}
.modal-box{width:100%;background:linear-gradient(180deg,#241a10,#1b140c);border:1px solid var(--gold-deep);border-radius:14px;box-shadow:0 20px 55px rgba(0,0,0,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--stone-hi)}
.modal-head h2{margin:0}
.modal-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow:auto;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.neg{color:#7ec06e}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink-2);border:1px solid var(--stone-hi);border-radius:20px;padding:3px 10px;font-size:.82rem;margin:3px 4px 0 0}
.pos{color:#e0794f}
.tag.extern{color:var(--parchment-dim);border-color:var(--stone-hi)}
.transfer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid rgba(255,214,150,.08)}
.transfer .tmsg{flex:1;font-family:var(--font-ui);font-size:.9rem;min-width:220px}

/* --- member + soulcores --- */
.floor{border:1px solid var(--stone-hi);border-radius:10px;padding:10px;background:rgba(255,214,150,.03)}
.floor-lbl{font-family:var(--font-ui);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.floor-map{position:relative;width:100%}
.floor-map img{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:6px;user-select:none;-webkit-user-drag:none}
.floors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.hs{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(232,176,75,.85);background:rgba(232,176,75,.22);border-radius:4px;cursor:pointer;padding:0;font-family:var(--font-ui);color:#fff;text-shadow:0 1px 2px #000;transition:filter .15s}
.hs .hn{font-weight:700;font-size:.72rem;line-height:1.15}
.hs .ho{font-size:.58rem;line-height:1.15;max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs.free{border-color:rgba(120,205,110,.9);background:rgba(90,200,110,.24)}
.hs.free .ho{color:#b9f0a6;font-weight:700}
.hs:hover{filter:brightness(1.3);z-index:2}
.qi-name{display:inline-block;background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#241708;font-weight:700;font-size:.82rem;padding:3px 10px;border-radius:20px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.rq-actions{display:flex;gap:10px;flex-wrap:wrap}
.rq-dialog{width:100%;max-width:420px;background:linear-gradient(180deg,var(--stone),var(--ink-2));border:1px solid var(--gold-deep);border-radius:14px;box-shadow:0 20px 55px rgba(0,0,0,.6);padding:20px 22px}
.rq-dialog .fld{display:block;margin-bottom:12px}
.rq-dialog textarea{width:100%;box-sizing:border-box}
.rq-head{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.rq-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.w-img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;flex:none}
.w-img.big{width:48px;height:48px}
.w-meta{font-family:var(--font-ui);font-size:.68rem;color:var(--parchment-dim);white-space:nowrap}
