/* ============================================================================
   Werkzeuge und Spiele, Gestaltung "Schweizer Werkstatt"
   ----------------------------------------------------------------------------
   Ein gemeinsames Blatt fuer die vierzehn Seiten, die je ein eigenes inline
   <style> mitbringen: essensrad, markdown-cheatsheet, mailto-generator,
   qrcode, bild-konverter, pdf-optimierer, snake, activity, scharade, hangman,
   startseite-editor, hochzeit-budget, erinnerungen, inventar.

   Warum das ueberhaupt funktioniert: alle diese Seiten wurden gegen dieselben
   Theme-Token gebaut (--bg-card, --border-color, --text-primary, --accent ...),
   meist mit Fallback-Werten. Wer die Token umfaerbt, faerbt die ganze Seite.
   Der Rest ist Formensprache: Rundungen, Schatten, Verlaeufe und Weichzeichner
   raus, Haarlinien und rechte Winkel rein.

   Wird NACH dem inline <style> geladen und gewinnt darum bei gleicher
   Spezifitaet. dark-override.css wird auf diesen Seiten nicht mehr geladen -
   es setzt !important auf body, h1-h3 und p und liesse sich sonst nicht
   ueberstimmen.

   GRENZE: style="..."-Attribute im Markup und per JavaScript gesetzte Stile
   schlagen auch dieses Blatt. Betroffen sind vor allem erinnerungen (71),
   hochzeit-budget (45) und startseite-editor (43).
   ============================================================================ */

/* ---------- Papier-Welt (faerbt auch die Nav aus theme.js) ---------- */
html[data-theme] {
    --sw-paper:   #F4F1EA;
    --sw-paper-2: #EEEAE0;
    --sw-paper-3: #E7E2D6;
    --sw-ink:     #14120F;
    --sw-ink-2:   #57534B;
    --sw-ink-3:   #8B867D;
    --sw-rule:    rgba(20,18,15,0.18);
    --sw-rule-2:  rgba(20,18,15,0.42);
    --sw-red:     #E23C1B;
    --sw-on-red:  #F7F5F0;
    color-scheme: light;

    /* Leiste volldeckend und ohne Milchglas. Durchscheinend wirkte sie ueber
       dem Papierkorn heller als die Seite - und Weichzeichner gehoert nicht
       in diese Welt. */
    --nav-tint: 100%;
    --nav-blur: none;

    --bg-primary:     var(--sw-paper);
    --bg-secondary:   var(--sw-paper-2);
    --bg-card:        var(--sw-paper);
    --text-primary:   var(--sw-ink);
    --text-secondary: var(--sw-ink-2);
    --text-muted:     var(--sw-ink-3);
    --border-color:   var(--sw-rule);
    --border-hover:   var(--sw-rule-2);
    --accent:         var(--sw-red);
    --accent-2:       var(--sw-red);
    --color-success:  #2F7D32;
    --color-warning:  #A66A00;
    --color-danger:   var(--sw-red);
}

html[data-theme="apple-dark"],
html[data-theme="dark"] {
    --sw-paper:   #131210;
    --sw-paper-2: #1B1916;
    --sw-paper-3: #232019;
    --sw-ink:     #F2EEE5;
    --sw-ink-2:   #A9A49A;
    --sw-ink-3:   #7B766D;
    --sw-rule:    rgba(242,238,229,0.20);
    --sw-rule-2:  rgba(242,238,229,0.44);
    --sw-red:     #FF5A32;
    --sw-on-red:  #131210;
    color-scheme: dark;
    --color-success: #5FBF63;
    --color-warning: #E0A030;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="apple"] {
        --sw-paper:   #131210;
        --sw-paper-2: #1B1916;
        --sw-paper-3: #232019;
        --sw-ink:     #F2EEE5;
        --sw-ink-2:   #A9A49A;
        --sw-ink-3:   #7B766D;
        --sw-rule:    rgba(242,238,229,0.20);
        --sw-rule-2:  rgba(242,238,229,0.44);
        --sw-red:     #FF5A32;
        --sw-on-red:  #131210;
        color-scheme: dark;
        --color-success: #5FBF63;
        --color-warning: #E0A030;
    }
}

/* Farbverlaufs-Orbs gehoeren nicht auf Papier. Es gibt zwei Sorten: die aus
   theme.js (.theme-bg-glow) und seiteneigene (.bg-glow mit .orb darin).
   Letztere wurden frueher von dark-override.css ausgeblendet - seit das auf
   diesen Seiten weg ist, muessen sie hier mit. */
.theme-bg-glow,
html[data-theme] .bg-glow,
html[data-theme] .orb { display: none !important; }

/* ---------- Grundlagen ---------- */
html[data-theme] body {
    background: var(--sw-paper);
    color: var(--sw-ink);
    font-family: "Helvetica Neue", Helvetica, Inter, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
    line-height: 1.55;
}

/* Papierkorn als data-URI, kein externer Aufruf.
   z-index: -1 statt 0 - so liegt das Korn hinter dem Inhalt, OHNE dass die
   Kinder von body positioniert werden muessen. Ein pauschales
   body > * { position: relative } wuerde jedes position:fixed auf der Seite
   aushebeln (Umschalter, Meldungen, schwebende Leisten rutschen dann in den
   Textfluss). */
html[data-theme] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="apple-dark"] body::before,
html[data-theme="dark"] body::before { opacity: 0.05; }
@media (prefers-color-scheme: dark) {
    html[data-theme="apple"] body::before { opacity: 0.05; }
}

html[data-theme] h1, html[data-theme] h2, html[data-theme] h3 {
    color: var(--sw-ink);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
html[data-theme] h1 { font-size: clamp(26px, 3.6vw, 40px); }
html[data-theme] h2 { font-size: clamp(19px, 2.4vw, 26px); }
html[data-theme] h3 { font-size: clamp(16px, 1.9vw, 19px); }
html[data-theme] p  { color: var(--sw-ink-2); }

/* ============================================================
   FORMENSPRACHE
   Rundungen, Schatten, Weichzeichner und Verlaeufe raus. Die
   Attribut-Selektoren treffen die ueblichen Bausteinnamen quer
   ueber alle vierzehn Seiten, ohne dass jede einzeln gepflegt
   werden muss.
   ============================================================ */
html[data-theme] button,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] details,
html[data-theme] summary,
html[data-theme] fieldset,
html[data-theme] table,
html[data-theme] [class*="card"],
html[data-theme] [class*="btn"],
html[data-theme] [class*="button"],
html[data-theme] [class*="panel"],
html[data-theme] [class*="box"],
html[data-theme] [class*="tile"],
html[data-theme] [class*="modal"],
html[data-theme] [class*="dialog"],
html[data-theme] [class*="popup"],
html[data-theme] [class*="sheet"],
html[data-theme] [class*="zone"],
html[data-theme] [class*="chip"],
html[data-theme] [class*="badge"],
html[data-theme] [class*="pill"],
html[data-theme] [class*="tag"],
html[data-theme] [class*="row"],
html[data-theme] [class*="item"],
html[data-theme] [class*="entry"],
html[data-theme] [class*="section"],
html[data-theme] [class*="group"],
html[data-theme] [class*="wrap"],
html[data-theme] [class*="bar"],
html[data-theme] [class*="list"],
html[data-theme] [class*="tab"],
html[data-theme] [class*="toast"],
html[data-theme] [class*="menu"],
html[data-theme] [class*="field"] {
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
}

/* ---------- Flaechen ----------
   "wrap"/"wrapper" ausgenommen: das sind Layout-Rahmen ohne eigene Flaeche.
   Ein .card-wrap bekam sonst einen Rahmen quer ueber die Seite. */
html[data-theme] [class*="card"]:not([class*="wrap"]),
html[data-theme] [class*="panel"]:not([class*="wrap"]),
html[data-theme] [class*="box"]:not([class*="checkbox"]):not([class*="wrap"]),
html[data-theme] [class*="modal"] > div,
html[data-theme] [class*="popup"] > div {
    background: var(--sw-paper);
    border: 1px solid var(--sw-rule-2);
}

/* ---------- Im Dialog ist Inhalt, keine Karte ----------
   Die Regel darueber soll dem Dialog im Overlay seine Flaeche geben. Sie
   trifft aber jedes div darin gleich mit: im Inventar bekam jedes einzelne
   Feld einen eigenen Kasten, im Hochzeitsbudget lag Kasten in Kasten in
   Kasten. Was innerhalb eines Dialogs steht, ist Inhalt - einen Rahmen
   bekommt es nur, wenn es sich selbst card, panel oder box nennt.
   Der Dialog selbst ist nicht getroffen: er ist direktes Kind des
   Overlays, hat also keinen Overlay-Vorfahren.
   Die Knopfleiste ist ausgenommen: sie klebt am unteren Rand und muss den
   Inhalt verdecken, der unter ihr durchscrollt. Ohne eigene Flaeche standen
   Speichern und Abbrechen durchsichtig ueber den Eingabefeldern. */
html[data-theme] [class*="overlay"] [class*="modal"] > div:not([class*="card"]):not([class*="panel"]):not([class*="box"]):not([class*="actions"]) {
    background: transparent;
    border: 0;
}

/* Die Knopfleiste bekommt ihre Flaeche ausdruecklich, nicht als Rest der
   Flaechenregel darueber - sonst haette sie einen Kasten auf allen vier
   Seiten. Ein Strich nach oben genuegt, damit man sieht, wo der Inhalt
   darunter durchscrollt. */
html[data-theme] [class*="overlay"] [class*="modal"] > div[class*="actions"] {
    background: var(--sw-paper);
    border: 0;
    border-top: 1px solid var(--sw-rule);
}

/* ---------- Knoepfe ---------- */
html[data-theme] button,
html[data-theme] [class*="btn"] {
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    padding: 11px 18px;
    border: 1px solid var(--sw-rule-2);
    background: none;
    color: var(--sw-ink);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
/* Kein  transform: none  hier. Es war gegen die alten Anhebe-Effekte beim
   Ueberfahren gedacht, hat aber jeden Knopf getroffen, der sich mit einem
   transform positioniert - das Auge im WLAN-Feld zentriert sich per
   translateY(-50%) und fiel beim Ueberfahren um die halbe Hoehe nach unten. */
html[data-theme] button:hover,
html[data-theme] [class*="btn"]:hover {
    background: var(--sw-paper-2);
    border-color: var(--sw-ink);
}
/* Die Hauptaktion: volles Tintenfeld, Hover wird Zinnober. */
html[data-theme] .btn-primary,
html[data-theme] [class*="btn"][class*="primary"],
html[data-theme] button[type="submit"],
html[data-theme] .browse-btn,
html[data-theme] .download-all-btn {
    background: var(--sw-ink);
    border-color: var(--sw-ink);
    color: var(--sw-paper);
}
html[data-theme] .btn-primary:hover,
html[data-theme] [class*="btn"][class*="primary"]:hover,
html[data-theme] button[type="submit"]:hover,
html[data-theme] .browse-btn:hover,
html[data-theme] .download-all-btn:hover {
    background: var(--sw-red);
    border-color: var(--sw-red);
    color: #fff;
}
html[data-theme] [class*="btn"][class*="danger"] {
    background: none; border-color: var(--sw-red); color: var(--sw-red);
}
html[data-theme] [class*="btn"][class*="danger"]:hover { background: var(--sw-red); color: #fff; }
/* Knoepfe, die ihre Groesse selbst berechnen, duerfen keine Polsterung von
   aussen bekommen. Bei box-sizing:border-box kann ein Element nicht schmaler
   werden als seine Polsterung - eine per JS gesetzte Breite von 27px wird mit
   11px/18px zwangslaeufig zu 38px. Genau daran ist die Hangman-Tastatur ueber
   den Bildschirmrand gewachsen, und das Auge im WLAN-Feld verrutscht. */
html[data-theme] .key,
html[data-theme] .paste-btn,
html[data-theme] .sound-btn,
html[data-theme] .sound-toggle,
html[data-theme] .lang-toggle,
html[data-theme] .wifi-pw-wrap button,
html[data-theme] [class*="icon-btn"],
html[data-theme] [class*="btn-icon"] {
    padding: 0;
    font-size: inherit;
}
/* Die Tastengroesse haengt an --key-w, das die Seite selbst berechnet. */
html[data-theme] .key {
    font-size: clamp(11px, calc(var(--key-w, 38px) * 0.42), 16px);
}

/* ---------- Zustaende der Buchstabentasten ----------
   Die Seite bringt eigene Regeln fuer .key.correct und .key.wrong mit (0,2,0).
   Mein  html[data-theme] [class*="btn"]  ist aber (0,2,1) - ein
   Attribut-Selektor zaehlt wie eine Klasse - und hat sie ueberschrieben.
   Richtig und falsch sahen dadurch identisch aus, nur die Deckkraft war
   verschieden. Darum hier ausdruecklich und in der Farbsprache des Hauses. */
html[data-theme] .key.correct {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
    font-weight: 700;
    opacity: 1;
}
html[data-theme] .key.wrong {
    background: var(--sw-paper-3);
    border-color: var(--sw-red);
    color: var(--sw-red);
    opacity: 1;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
/* Am Spielende werden alle Tasten stillgelegt. Was schon getippt wurde, soll
   trotzdem lesbar bleiben - sonst verschwindet genau die Information, die man
   nach dem Spiel noch anschaut. */
html[data-theme] .key.disabled:not(.correct):not(.wrong) { opacity: .3; }
html[data-theme] .key.correct.disabled,
html[data-theme] .key.wrong.disabled { opacity: 1; }

html[data-theme] button:disabled,
html[data-theme] [class*="btn"]:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: none;
    color: var(--sw-ink-3);
    border-color: var(--sw-rule);
}

/* ---------- Eingaben ---------- */
html[data-theme] input[type="text"],
html[data-theme] input[type="email"],
html[data-theme] input[type="password"],
html[data-theme] input[type="number"],
html[data-theme] input[type="search"],
html[data-theme] input[type="tel"],
html[data-theme] input[type="url"],
html[data-theme] input[type="date"],
html[data-theme] input[type="time"],
html[data-theme] select,
html[data-theme] textarea {
    background: var(--sw-paper-2);
    color: var(--sw-ink);
    border: 1px solid var(--sw-rule-2);
    padding: 11px 13px;
    font-size: 15px;
    font-family: inherit;
}
html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus {
    outline: none;
    border-color: var(--sw-red);
    box-shadow: none;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--sw-ink-3); }
html[data-theme] label { color: var(--sw-ink-2); font-size: 14px; }
html[data-theme] input[type="range"] { accent-color: var(--sw-red); background: none; border: 0; padding: 0; }
html[data-theme] input[type="checkbox"],
html[data-theme] input[type="radio"] { accent-color: var(--sw-red); width: auto; padding: 0; }

/* ---------- Ablagefelder ----------
   :not([class*="icon"]) ist noetig: .drop-zone-icon enthaelt "drop" UND
   "zone" und bekam sonst selbst den gestrichelten Rahmen samt Polsterung. */
html[data-theme] [class*="drop"][class*="zone"]:not([class*="icon"]):not([class*="text"]) {
    background: none;
    border: 1px dashed var(--sw-rule-2);
    padding: clamp(34px, 5vw, 56px) 28px;
    transition: border-color .15s, background-color .15s;
}
html[data-theme] [class*="drop"][class*="zone"]:not([class*="icon"]):not([class*="text"]):hover,
html[data-theme] [class*="drop"][class*="zone"]:not([class*="icon"]):not([class*="text"]).drag-over {
    border-color: var(--sw-red);
    border-style: solid;
    background: var(--sw-paper-2);
}
html[data-theme] [class*="drop"][class*="zone"][class*="icon"] {
    border: 0;
    padding: 0;
    color: var(--sw-ink-3);
}

/* ---------- Fortschritt ----------
   NUR die Spur und die Fuellung anfassen. Ein pauschales
   [class*="progress"] > * faerbt sonst auch die Beschriftungszeile ueber dem
   Balken rot - genau das war beim Hochzeitsbudget passiert. */
html[data-theme] [class*="progress"][class*="bar"],
html[data-theme] [class*="progress"][class*="track"],
html[data-theme] [class*="progress"][class*="wrap"],
html[data-theme] .bar-wrap {
    background: var(--sw-paper-3);
    border: 0;
    overflow: hidden;
}
html[data-theme] [class*="progress"][class*="fill"],
html[data-theme] [class*="progress"][class*="bar"] > div:only-child {
    background: var(--sw-red);
}
/* Balken, die ihre Farbe als Inline-Stil mitbringen, sind Dateninhalt und
   bleiben unangetastet - Inline schlaegt hier ohnehin. */

/* ---------- Tabellen ---------- */
html[data-theme] table { border-collapse: collapse; width: 100%; font-size: 14px; }
html[data-theme] th {
    text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--sw-ink-3);
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--sw-rule-2);
}
html[data-theme] td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--sw-rule);
    color: var(--sw-ink-2);
}

/* ---------- Ueberlagerungen ---------- */
html[data-theme] [class*="overlay"] {
    background: color-mix(in srgb, var(--sw-ink) 46%, transparent);
    backdrop-filter: none;
}
html[data-theme] [class*="toast"] {
    background: var(--sw-ink);
    color: var(--sw-paper);
    border: 0;
}
/* Die Seiten blenden Meldungen ueber .toast.visible ein und schieben sie
   sonst per transform aus dem Bild. Nach dem Umbau reichte der Versatz nicht
   mehr - ein schwarzes Kaestchen klebte in der Ecke. Sichtbarkeit darum an
   genau die Klasse binden, mit der die Seiten ohnehin arbeiten. Opacity statt
   display, damit das Einblenden weiterhin weich laeuft. */
html[data-theme] [class*="toast"]:not(.visible):not(.show) {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Links und Fokus ---------- */
html[data-theme] a { color: var(--sw-red); }
html[data-theme] a:focus-visible,
html[data-theme] button:focus-visible,
html[data-theme] input:focus-visible,
html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible {
    outline: 2px solid var(--sw-red);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] button, html[data-theme] [class*="btn"],
    html[data-theme] [class*="drop"][class*="zone"] { transition: none; }
}

/* ============================================================
   EIGENSTAENDIG (data-standalone)
   Fuer Werkzeuge, die man einem Kunden schickt: die geteilte
   Navigation oben verschwindet, damit nur das Werkzeug bleibt.
   Setzen ueber <body data-standalone>. theme.js haengt die Leiste
   erst zur Laufzeit ein, darum !important.

   Der Hinweis unten ("alles laeuft lokal") bleibt bewusst stehen -
   das ist fuer einen Kunden ein Vertrauenssignal, kein Ballast.
   ============================================================ */
html[data-theme] body[data-standalone] .site-nav,
html[data-theme] body[data-standalone] .theme-back-link { display: none !important; }
/* Die Werkzeuge tragen ihren Datenschutz-Hinweis direkt unter der Ablage.
   theme.js haengt denselben Satz nochmal als Fusszeile an - im Kiosk-Modus
   stand er dadurch zweimal auf der Seite. */
html[data-theme] body[data-standalone] .theme-footer { display: none !important; }
/* Ohne Leiste fehlt oben der Abstand, den sie sonst schafft. */
html[data-theme] body[data-standalone] { padding-top: clamp(62px, 7vw, 84px); }

/* Offline-Knopf: sitzt oben links, gegenueber dem Hell/Dunkel-Schalter von
   theme.js. Gleiche Machart bei allen drei Werkzeugen. */
html[data-theme] .offline-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--sw-rule-2);
    background: var(--sw-paper);
    color: var(--sw-ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: border-color .15s, color .15s;
}
html[data-theme] .offline-link:hover { border-color: var(--sw-red); color: var(--sw-red); }
html[data-theme] .offline-link svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 560px) {
    html[data-theme] .offline-link .label-long { display: none; }
    html[data-theme] .offline-link { padding: 8px 11px; }
}

/* ============================================================
   SPIELE
   Schluesselbild oben, danach das Spielfeld. Die Bilder liegen
   unter /shared/game-<name>.png und werden per .game-key
   eingebunden.
   ============================================================ */
/* Als volles Bild dominiert das Schluesselbild die Seite und schneidet auf
   schmalen Fenstern ab. Als flaches Band ueber die Inhaltsbreite ist es ein
   Kopf und kein Plakat - und im Dunkelmodus liest sich die helle Flaeche
   dank Rahmen als bewusste Platte statt als Loch. */
html[data-theme] .game-key {
    display: block;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto clamp(26px, 4vw, 44px);
    padding: 0 clamp(20px, 5vw, 56px);
}
/* Kein Zuschnitt: Das Schluesselbild ist eine komponierte Grafik, ein
   beschnittener Ausschnitt trifft je nach Fensterbreite ins Leere. Statt
   dessen ganz zeigen und ueber die Hoehe deckeln, damit es Kopf bleibt und
   nicht zum Plakat wird. */
html[data-theme] .game-key img {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(130px, 24vh, 280px);
    object-fit: contain;
    object-position: center;
    background: var(--sw-paper-2);
    border: 1px solid var(--sw-rule-2);
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Portal-Chrome bleibt Portal-Chrome ----------
   Der Theme-Umschalter und der Zurueck-Link kommen aus shared/theme.js und
   sind bewusst klein und rund. Hier trifft sie aber die allgemeine
   button-Regel weiter oben (11px/18px Polsterung, 15px Schrift) - auf der
   Startseite sitzt derselbe Knopf dann klein und abgerundet oben rechts, im
   Inventar gross und eckig. Beides ist dieselbe Schaltflaeche, also bekommt
   sie hier ihre Masse aus theme.js zurueck. */
html[data-theme] .theme-toggle {
    height: 32px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 8px;
    border-color: var(--border-color, var(--sw-rule-2));
    background: var(--sw-paper);
}
html[data-theme] .theme-back-link {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 8px;
    border-color: var(--border-color, var(--sw-rule-2));
}
@media (max-width: 640px) {
    html[data-theme] .theme-toggle { height: 28px; padding: 0 10px; font-size: 14px; }
    html[data-theme] .theme-back-link { height: 28px; padding: 0 10px; font-size: 12px; }
}