:root {
      --ink: #1a1410;
      --surface: #241c16;
      --panel: #2a211a;
      --line: #4a3a2c;
      --track: #120e0b;
      --fg: #f0e6d4;
      --muted: #a8947c;
      --faint: #6e5a48;
      --brand: #e8a54b;
      --brand-dim: #9a6f30;
      --teal: #7cb89a;
      --ok: #3ecf8e;
      --ok-dim: #1f6b45;
      --mid: #e0b03a;
      --bad: #ff4d6a;
      --bad-dim: #7a2030;
      --hyper: #ffc857;
      --extra: #b8f060;
      --ubk1: #5ec8ff;
      --ubk2: #ff7a45;
      --kb: #8ec8ff;
      --field: #16110e;
      --rust: #b85a2e;
      --dust: #c4a882;
      --safe-b: env(safe-area-inset-bottom, 0px);
      --safe-t: env(safe-area-inset-top, 0px);
      --font-display: "Oswald", "Bahnschrift", sans-serif;
      --font-stamp: "Special Elite", "Courier New", monospace;
      --font-ui: "Oswald", "Segoe UI", sans-serif;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body {
      margin: 0;
      min-height: 100%;
      background: #16110e;
      color: var(--fg);
      font-family: var(--font-ui);
    }
    body {
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90,50,20,0.35), transparent 60%),
        linear-gradient(180deg, #2a2018 0%, #16110e 45%, #0e0b09 100%);
      padding-bottom: calc(64px + var(--safe-b));
    }
    body.combry-mode,
    body.newbie-mode,
    body.farm-mode,
    body.dig-mode,
    body.lizards-mode {
      padding-bottom: 0;
      overflow-x: hidden;
    }
    #wallBg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    #wallBg .wall-veil {
      position: absolute;
      inset: 0;
      z-index: 4;
      background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90,50,20,0.22), transparent 60%),
        linear-gradient(180deg, rgba(22,17,14,0.42) 0%, rgba(14,11,9,0.72) 55%, rgba(10,8,7,0.88) 100%);
      transition: opacity .25s ease;
    }
    body.gate-open #wallBg .wall-veil { opacity: 0.28; }
    body:not(.gate-open) #wallBg .wall-brand { display: none; }
    body:not(.gate-open) #wallBg .wall-photo { opacity: 0.55; }
    .wrap, #hub, #app, #appCombry, #appNewbie, #appFarm, #appDig, #appLizards, #appArena {
      position: relative;
      z-index: 1;
    }
    .wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: calc(12px + var(--safe-t)) 12px 20px;
    }
    header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .brand {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.45rem;
      letter-spacing: 0.12em;
      color: var(--brand);
      font-weight: 700;
      text-transform: uppercase;
    }
    .sub {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.35;
      font-family: var(--font-stamp);
    }
    .hdr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
    .notif-chat-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      text-decoration: none;
      flex: 0 0 auto;
    }
    .notif-chat-btn svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    .notif-chat-btn:hover {
      color: var(--accent, #e0b07a);
      border-color: var(--faint, #6b5340);
    }
    button.ghost {
      background: transparent;
      border: 1px solid var(--line);
      color: var(--muted);
      padding: 8px 12px;
      border-radius: 6px;
      font: inherit;
      cursor: pointer;
    }
    button.ghost:hover { color: var(--fg); border-color: var(--faint); }
    .ghost-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: transparent;
      border: 1px solid var(--line);
      color: var(--muted);
      padding: 8px 12px;
      border-radius: 6px;
      text-decoration: none;
    }
    .ghost-link:hover { color: var(--fg); border-color: var(--faint); }
    .push-box {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }
    .push-box .hint { margin-bottom: 8px; }
    .status {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
      max-width: 55%;
    }
    .pill {
      border: 1px solid var(--line);
      background: var(--panel);
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.72rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .pill.on { border-color: var(--ok-dim); color: var(--ok); }
    .pill.off { border-color: var(--bad-dim); color: var(--bad); }
    #banner {
      display: none;
      margin-bottom: 10px;
      padding: 10px 12px;
      border: 1px solid #7a5c18;
      border-radius: 8px;
      color: var(--brand);
      background: #14100a;
      font-size: 0.82rem;
      line-height: 1.35;
    }
    #banner.show { display: block; }

    .tabs {
      display: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 30;
      background: rgba(20, 16, 12, 0.94);
      border-top: 1px solid var(--line);
      padding: 6px 8px calc(6px + var(--safe-b));
      gap: 6px;
    }
    .tabs button {
      flex: 1;
      background: transparent;
      color: var(--muted);
      border: 1px solid transparent;
      padding: 10px 6px;
      font-size: 0.78rem;
      font-weight: 650;
      border-radius: 8px;
    }
    .tabs button.active {
      color: var(--brand);
      border-color: var(--line);
      background: var(--panel);
    }

    .panel { display: block; }
    .panel.hidden { display: none !important; }

    section.box {
      background: linear-gradient(180deg, #2c231c, #1e1712);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 12px;
      box-shadow: inset 0 1px 0 rgba(255,220,160,0.05);
    }
    h2 {
      margin: 0 0 10px;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 650;
      font-family: var(--font-display);
    }
    .hint { color: var(--muted); font-size: 0.78rem; margin: 0 0 10px; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    input[type=text],
    input[type=password] {
      flex: 1;
      min-width: 0;
      background: var(--field);
      border: 1px solid var(--line);
      color: var(--fg);
      padding: 12px;
      border-radius: 8px;
      outline: none;
      font-size: 1rem;
      font-family: inherit;
    }
    input[type=text]:focus,
    input[type=password]:focus { border-color: var(--brand); }
    button {
      border: 0;
      background: var(--brand);
      color: #1a1208;
      font-weight: 700;
      padding: 12px 14px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      font-family: inherit;
    }
    button.secondary {
      background: transparent;
      color: var(--fg);
      border: 1px solid var(--line);
      font-weight: 650;
    }
    button.danger {
      background: transparent;
      color: var(--bad);
      border: 1px solid var(--bad-dim);
      font-weight: 650;
      padding: 7px 10px;
      font-size: 0.75rem;
    }
    button:disabled { opacity: 0.5; }
    .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    .actions a { text-decoration: none; }

    .cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .card {
      background: #0a0d12;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    .card.offline { opacity: 0.72; }
    .hp-bar {
      position: relative;
      height: 34px;
      background: var(--track);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .hp-fill {
      position: absolute;
      inset: 2px auto 2px 2px;
      width: 0%;
      border-radius: 2px;
      transition: width 0.25s linear;
    }
    .hp-fill::after {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 50%; bottom: 0;
      background: rgba(0,0,0,0.28);
    }
    .hp-accent {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--brand-dim);
    }
    .hp-content {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 8px 0 10px;
      pointer-events: none;
    }
    .clan-ico {
      width: 18px; height: 18px;
      object-fit: contain;
      flex: 0 0 auto;
      filter: drop-shadow(0 0 1px #000);
    }
    .hp-name {
      font-weight: 700;
      font-size: 0.92rem;
      text-shadow: 0 1px 0 #000, 1px 1px 0 #000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 42%;
    }
    .hp-stats {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
      font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
      font-size: 0.78rem;
      font-weight: 700;
      text-shadow: 0 1px 0 #000;
    }
    .hp-val { color: var(--fg); }
    .kb-val { color: var(--kb); }
    .buff-row {
      display: none;
      flex-wrap: wrap;
      gap: 5px;
      padding: 6px 8px 4px;
      background: var(--ink);
      min-height: 28px;
    }
    .buff-row.show { display: flex; }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid;
      background: #121820;
      border-radius: 4px;
      padding: 3px 6px 3px 4px;
      font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
      font-size: 0.75rem;
      font-weight: 700;
    }
    .chip img { width: 16px; height: 16px; object-fit: contain; }
    .chip .badge {
      min-width: 16px;
      text-align: center;
      border: 1px solid currentColor;
      border-radius: 3px;
      font-size: 0.65rem;
      padding: 0 3px;
      background: #1a1208;
    }
    .chip.hyper { color: var(--hyper); border-color: var(--hyper); }
    .chip.hyper.urgent { color: var(--bad); border-color: var(--bad); }
    .chip.extra2 { color: var(--extra); border-color: var(--extra); }
    .chip.ubk1 { color: var(--ubk1); border-color: var(--ubk1); }
    .chip.ubk2 { color: var(--ubk2); border-color: var(--ubk2); }
    .meta-row {
      display: none;
      padding: 2px 10px 6px;
      color: var(--faint);
      font-size: 0.7rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .meta-row.show { display: block; }
    .meta-row.has-coords { color: var(--teal); }
    .card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px 8px;
      border-top: 1px solid #12161c;
    }
    .lvl { color: var(--muted); font-size: 0.75rem; }
    .state {
      font-size: 0.7rem;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
    }
    .state.on { color: var(--ok); border-color: var(--ok-dim); }
    .empty {
      color: var(--muted);
      padding: 16px 8px;
      text-align: center;
      font-size: 0.88rem;
    }

    .logs {
      font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
      font-size: 0.75rem;
      line-height: 1.45;
      max-height: min(62vh, 560px);
      overflow: auto;
      background: #080b10;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      -webkit-overflow-scrolling: touch;
    }
    .log-line { color: #b7c0cf; margin: 0 0 4px; word-break: break-word; }
    .log-line .t { color: var(--muted); margin-right: 8px; }
    .log-line.change { color: var(--teal); }
    .log-line.buff-hyper { color: var(--hyper); }
    .log-line.buff-extra2 { color: var(--extra); }
    .log-line.buff-ubk1 { color: var(--ubk1); }
    .log-line.buff-ubk2 { color: var(--ubk2); }
    .log-line.buff-presence { color: #c4b5fd; }
    .log-line .ico {
      width: 16px; height: 16px;
      vertical-align: -3px;
      margin: 0 3px;
      image-rendering: pixelated;
    }
    .log-line .clan-ico {
      width: 14px; height: 14px;
      vertical-align: -2px;
      margin-right: 4px;
    }
    .log-nick { font-weight: 700; margin-right: 6px; }
    .c-online { color: #3ecf8e; font-weight: 700; }
    .c-offline { color: #ff4d6a; font-weight: 700; }
    .c-rad { color: #e0b03a; font-weight: 700; }
    .c-hp-up { color: #5ec8ff; font-weight: 700; }
    .c-hp-down { color: #ff4d6a; font-weight: 700; }
    .c-buff { color: #ffc857; font-weight: 700; }
    .c-killed {
      font-weight: 800;
      background: linear-gradient(90deg, #ff4d6a, #e8a54b, #3ecf8e, #5ec8ff, #c4b5fd, #ff4d6a);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: rainbow 3s linear infinite;
    }
    @keyframes rainbow {
      to { background-position: 200% center; }
    }
    .fav-btn {
      background: transparent;
      border: 1px solid var(--line);
      color: var(--muted);
      padding: 4px 8px;
      font-size: 0.85rem;
      border-radius: 6px;
      line-height: 1;
    }
    .fav-btn.on { color: var(--brand); border-color: var(--brand-dim); }
    .fx-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px 8px 2px;
    }
    .fx-row img {
      width: 16px; height: 16px;
      image-rendering: pixelated;
    }
    .fx-row .fx {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 0.7rem;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 1px 5px 1px 3px;
    }
    .log-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 0 0 8px;
    }
    .fchip {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--line);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 650;
    }
    .fchip.active {
      color: var(--brand);
      border-color: var(--brand-dim);
      background: #1a1510;
    }
    .fchip[data-filter="buffs"].active { color: var(--teal); border-color: #1a7a70; background: #0c1616; }
    .fchip[data-filter="hyper"].active { color: var(--hyper); border-color: #5a4520; background: #241c0c; }
    .fchip[data-filter="extra2"].active { color: var(--extra); border-color: #3a5a20; background: #141c0c; }
    .fchip[data-filter="ubk1"].active { color: var(--ubk1); border-color: #1a4a6a; background: #0c1820; }
    .fchip[data-filter="ubk2"].active { color: var(--ubk2); border-color: #6a3020; background: #1a100c; }

    .toast {
      position: fixed;
      left: 12px; right: 12px;
      bottom: calc(72px + var(--safe-b));
      background: var(--panel);
      border: 1px solid var(--line);
      padding: 12px 14px;
      border-radius: 10px;
      display: none;
      z-index: 40;
      text-align: center;
      font-size: 0.9rem;
    }
    .toast.show { display: block; }
    .toast.err { border-color: var(--bad-dim); color: var(--bad); }
    .toast.ok { border-color: var(--ok-dim); color: var(--ok); }

    @media (min-width: 860px) {
      body { padding-bottom: 24px; }
      .wrap { max-width: 1100px; padding: 24px 18px 40px; }
      .brand { font-size: 1.6rem; }
      .layout {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 14px;
        align-items: start;
      }
      .panel.hidden { display: block !important; }
      .tabs { display: none !important; }
      .toast { left: auto; right: 16px; bottom: 16px; max-width: 320px; text-align: left; }
      .status { max-width: none; }
    }
    @media (max-width: 859px) {
      .tabs { display: flex; }
      .layout { display: block; }
      header { flex-direction: column; }
      .status { max-width: 100%; justify-content: flex-start; }
    }

    #gate {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: start center;
      align-content: start;
      padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background: transparent;
    }
    #gate.hidden { display: none; }
    .wall-stage {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .wall-brand {
      position: absolute;
      top: max(18px, var(--safe-t));
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 9vw, 4.2rem);
      letter-spacing: 0.22em;
      color: var(--brand);
      text-shadow: 0 2px 0 #3a2410, 0 8px 24px rgba(0,0,0,0.55);
      font-weight: 700;
    }
    .wall-dust {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 40%, rgba(255,220,160,0.06), transparent 25%),
                  radial-gradient(circle at 70% 60%, rgba(255,180,80,0.05), transparent 30%);
      animation: dustPulse 7s ease-in-out infinite alternate;
      z-index: 1;
    }
    @keyframes dustPulse { from { opacity: 0.45; } to { opacity: 1; } }
    .wall-photo {
      position: absolute;
      z-index: 3;
      width: clamp(88px, 18vw, 148px);
      transform-origin: top center;
      animation: photoSwing 5.5s ease-in-out infinite alternate;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
    }
    .wall-photo img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 2px;
    }
    .wall-photo .pin {
      position: absolute;
      top: -6px;
      left: 50%;
      width: 10px;
      height: 10px;
      margin-left: -5px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #eee, #888 55%, #444);
      box-shadow: 0 1px 2px rgba(0,0,0,0.5);
      z-index: 2;
    }
    .wall-photo.p1 { left: 6%; top: 14%; transform: rotate(-8deg); animation-delay: 0s; }
    .wall-photo.p2 { left: 28%; top: 8%; transform: rotate(5deg); animation-delay: 0.4s; width: clamp(100px, 20vw, 160px); }
    .wall-photo.p3 { right: 8%; top: 12%; left: auto; transform: rotate(7deg); animation-delay: 0.8s; }
    .wall-photo.p4 { left: 10%; top: 48%; transform: rotate(4deg); animation-delay: 1.1s; }
    .wall-photo.p5 { left: 38%; top: 42%; transform: rotate(-3deg); animation-delay: 0.2s; width: clamp(110px, 22vw, 170px); }
    .wall-photo.p6 { right: 12%; top: 46%; left: auto; transform: rotate(-6deg); animation-delay: 0.6s; }
    .wall-photo.p7 { left: 58%; top: 68%; transform: rotate(8deg); animation-delay: 1.3s; width: clamp(96px, 19vw, 150px); }
    @keyframes photoSwing {
      from { translate: 0 0; }
      to { translate: 0 4px; }
    }
    .gate-box {
      position: relative;
      z-index: 10;
      width: min(400px, 100%);
      background: linear-gradient(165deg, rgba(42,33,26,0.92), rgba(22,17,14,0.94));
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 22px 18px 18px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,160,0.08);
      backdrop-filter: blur(6px);
    }
    .gate-box h1 {
      margin: 0 0 4px;
      color: var(--brand);
      letter-spacing: 0.14em;
      font-size: 1.5rem;
      font-family: var(--font-display);
      font-weight: 700;
      text-transform: uppercase;
    }
    .gate-box p {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 0.9rem;
      font-family: var(--font-stamp);
      line-height: 1.4;
    }
    .gate-err {
      display: none;
      color: var(--bad);
      font-size: 0.82rem;
      margin: 0 0 10px;
    }
    .gate-err.show { display: block; }
    .gate-box .row { margin: 0; }
    .gate-box button { letter-spacing: 0.06em; text-transform: uppercase; }
    .gate-role {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 12px 0 14px;
    }
    .gate-role label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #4a3a2c;
      background: rgba(255,255,255,0.03);
      color: #e7d8c6;
      cursor: pointer;
    }
    .gate-role input { accent-color: #d7a065; }
    .role-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(215,160,101,0.14);
      color: #f1c48e;
    }
    .viewer-lock-note {
      margin: 10px 0 0;
      color: #d8b07b;
      font-size: 0.8rem;
    }
    body.viewer-role .hub-card.admin-only {
      border-style: dashed;
    }
    @media (max-width: 640px) {
      .gate-box .row {
        display: grid;
        gap: 10px;
      }
      .gate-box .row input,
      .gate-box .row button {
        width: 100%;
      }
      .gate-role {
        display: grid;
        grid-template-columns: 1fr;
      }
      .hub-grid {
        grid-template-columns: 1fr;
      }
    }

    #hub {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: none;
      place-items: start center;
      align-content: start;
      padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
      background: transparent;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #hub.show { display: grid; }
    .hub-box {
      position: relative;
      width: min(560px, 100%);
      background: linear-gradient(180deg, #2c231c, #1a1410);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 22px 18px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.5);
    }
    .hub-box .notif-chat-btn {
      position: absolute;
      top: 14px;
      right: 14px;
    }
    .hub-box h1 {
      margin: 0 42px 6px 0;
      font-family: var(--font-display);
      letter-spacing: 0.12em;
      color: var(--brand);
      font-size: 1.4rem;
      text-transform: uppercase;
    }
    .hub-box .hub-sub {
      margin: 0 0 18px;
      color: var(--muted);
      font-family: var(--font-stamp);
      font-size: 0.9rem;
    }
    .hub-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .hub-card {
      text-align: left;
      background: #201812;
      border: 1px solid var(--line);
      color: var(--fg);
      border-radius: 4px;
      padding: 14px 12px;
      cursor: pointer;
      transition: border-color .15s, transform .15s;
    }
    .hub-card:hover {
      border-color: var(--brand);
      transform: translateY(-1px);
    }
    .hub-card strong {
      display: block;
      font-family: var(--font-display);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 4px;
    }
    .hub-card span {
      color: var(--muted);
      font-size: 0.78rem;
      font-family: var(--font-stamp);
      line-height: 1.35;
    }
    .hub-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
    @media (max-width: 560px) {
      .hub-grid { grid-template-columns: 1fr; }
      .wall-photo.p5, .wall-photo.p7 { display: none; }
    }

    #app.locked { display: none !important; }
    #appCombry.locked { display: none !important; }
    #appCombry { display: none; }
    #appCombry.show { display: block; }
    #appNewbie.locked { display: none !important; }
    #appNewbie { display: none; }
    #appNewbie.show { display: block; }
    #appNewbie {
      min-height: 100dvh;
      min-height: 100vh;
      background: transparent;
    }
    #appFarm.locked { display: none !important; }
    #appFarm { display: none; }
    #appFarm.show { display: block; }
    #appFarm {
      min-height: 100dvh;
      min-height: 100vh;
      background: transparent;
    }
    #appDig.locked { display: none !important; }
    #appDig { display: none; }
    #appDig.show { display: block; }
    #appDig {
      min-height: 100dvh;
      min-height: 100vh;
      background: transparent;
    }
    #appDig .farm-brand { color: #b8d49a; }
    #appLizards.locked { display: none !important; }
    #appLizards { display: none; }
    #appLizards.show { display: block; }
    #appLizards {
      min-height: 100dvh;
      min-height: 100vh;
      background: transparent;
    }
    #appLizards .farm-brand { color: #e2c888; }
    .newbie-wrap,
    .farm-wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: 14px 16px 20px;
    }
    .newbie-brand {
      margin: 0;
      color: #9fdf8a;
      font-size: clamp(1.4rem, 3.5vw, 1.9rem);
      letter-spacing: 0.04em;
    }
    .farm-brand {
      margin: 0;
      color: #e0b07a;
      font-size: clamp(1.4rem, 3.5vw, 1.9rem);
      letter-spacing: 0.04em;
    }
    .newbie-sub { color: #8b95a8; font-size: 0.9rem; line-height: 1.4; max-width: 40em; }
    .farm-sub { color: #a89888; font-size: 0.9rem; line-height: 1.4; max-width: 40em; }
    .farm-roster {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 16px;
    }
    @media (min-width: 640px) {
      .farm-roster { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 980px) {
      .farm-roster { grid-template-columns: 1fr 1fr 1fr; }
    }
    .farm-person-card {
      position: relative;
      text-align: left;
      width: 100%;
      border: 1px solid #3a2e24;
      border-radius: 16px;
      padding: 16px 16px 14px;
      color: #f0e6da;
      font: inherit;
      background:
        radial-gradient(280px 140px at 100% 0%, rgba(224,176,122,0.14), transparent 60%),
        linear-gradient(165deg, #221910 0%, #15100c 55%, #100c09 100%);
      transition: border-color .18s, transform .18s, box-shadow .18s;
      overflow: hidden;
    }
    .farm-person-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: #5a4a3a;
      transition: background .18s;
    }
    .farm-person-card:hover {
      border-color: #c9945a;
      box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    }
    .farm-person-card.active {
      border-color: #e0b07a;
      box-shadow: 0 0 0 1px rgba(224,176,122,0.25), 0 12px 32px rgba(0,0,0,0.3);
    }
    .farm-person-card.active::before { background: #e0b07a; }
    .farm-person-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }
    .farm-person-name {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.15rem;
      letter-spacing: 0.03em;
      color: #f3e4d2;
      line-height: 1.2;
      word-break: break-word;
    }
    .farm-person-badge {
      flex: 0 0 auto;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #1a120c;
      background: linear-gradient(180deg, #e8c090, #c9945a);
      border-radius: 999px;
      padding: 4px 8px;
      font-weight: 700;
    }
    .farm-person-meta {
      display: grid;
      gap: 8px;
    }
    .farm-person-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 0.82rem;
      color: #bba894;
    }
    .farm-person-row span { color: #8a7a6a; }
    .farm-person-row strong {
      color: #e8d2b8;
      font-weight: 650;
      text-align: right;
    }
    .farm-person-hint {
      margin: 12px 0 0;
      font-size: 0.72rem;
      color: #7a6a5a;
      letter-spacing: 0.04em;
    }
    .farm-person-add {
      min-height: 168px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-style: dashed;
      border-color: #5a4a3a;
      background: rgba(20, 14, 10, 0.55);
      color: #e0b07a;
    }
    .farm-person-add:hover {
      border-color: #e0b07a;
      background: rgba(224, 176, 122, 0.06);
      transform: translateY(-2px);
    }
    .farm-person-add .plus {
      font-size: 1.8rem;
      line-height: 1;
      color: #e0b07a;
    }
    .farm-person-add .label {
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-family: var(--font-display);
    }
    .farm-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: flex-end;
      justify-content: center;
      padding: 12px;
    }
    .farm-modal.open { display: flex; }
    @media (min-width: 720px) {
      .farm-modal { align-items: center; }
    }
    .farm-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(6, 4, 3, 0.72);
      backdrop-filter: blur(6px);
    }
    .farm-modal-sheet {
      position: relative;
      z-index: 1;
      width: min(560px, 100%);
      max-height: min(92vh, 780px);
      overflow: auto;
      border: 1px solid #4a3a2c;
      border-radius: 18px 18px 14px 14px;
      background:
        radial-gradient(420px 200px at 0% 0%, rgba(224,176,122,0.12), transparent 55%),
        linear-gradient(180deg, #1c1510, #120e0b);
      box-shadow: 0 24px 60px rgba(0,0,0,0.45);
      animation: farmModalIn .22s ease-out;
    }
    @keyframes farmModalIn {
      from { opacity: 0; transform: translateY(18px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .farm-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 8px;
      border-bottom: 1px solid #2e241c;
    }
    .farm-modal-head h2 {
      margin: 0;
      font-size: 1.15rem;
      color: #e0b07a;
      letter-spacing: 0.04em;
      text-transform: none;
      font-family: var(--font-display);
    }
    .farm-modal-head p {
      margin: 4px 0 0;
      color: #9a8a78;
      font-size: 0.8rem;
    }
    .farm-modal-close {
      appearance: none;
      border: 1px solid #3a2e24;
      background: #18120e;
      color: #cbb8a4;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 1.2rem;
      line-height: 1;
    }
    .farm-modal-close:hover { border-color: #e0b07a; color: #f0e0d0; }
    .farm-modal-body { padding: 14px 16px; display: grid; gap: 12px; }
    .farm-modal-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      padding: 12px 16px 16px;
      border-top: 1px solid #2e241c;
      position: sticky;
      bottom: 0;
      background: linear-gradient(180deg, rgba(18,14,11,0.92), #120e0b);
    }
    .farm-modal-foot .grow { margin-right: auto; }
    .farm-panel {
      border: 1px solid #3a2e24;
      border-radius: 14px;
      padding: 12px;
      background:
        radial-gradient(420px 160px at 0% 0%, rgba(224,176,122,0.08), transparent 60%),
        linear-gradient(180deg, #1c1510, #14100c);
    }
    .farm-panel-title {
      margin: 0 0 10px;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #e0b07a;
      font-family: var(--font-display);
      font-weight: 650;
    }
    .farm-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .farm-field-wide { grid-column: 1 / -1; }
    #appFarm .farm-field {
      margin: 0 !important;
      border-radius: 12px !important;
      border-color: #3a2e24 !important;
      background: linear-gradient(180deg, #221a14, #18120e) !important;
    }
    #appFarm .farm-field label { color: #a89888 !important; }
    #appFarm .farm-field input {
      background: #0e0a08 !important;
      border-color: #3a2e24 !important;
      color: #f0e6da !important;
      border-radius: 10px !important;
    }
    #appFarm button.ghost.danger {
      color: #d08070;
      border-color: #4a3028;
    }
    #appFarm button.ghost.danger:hover {
      color: #f0a090;
      border-color: #a05040;
    }
    #appDig .farm-field {
      margin: 0 !important;
      border-radius: 12px !important;
      border-color: #2e3a28 !important;
      background: linear-gradient(180deg, #1a2214, #12180e) !important;
    }
    #appDig .farm-field label { color: #98a888 !important; }
    #appDig .farm-field input {
      background: #0a0e08 !important;
      border-color: #2e3a28 !important;
      color: #e6f0da !important;
      border-radius: 10px !important;
    }
    #appLizards .farm-field {
      margin: 0 !important;
      border-radius: 12px !important;
      border-color: #3a3220 !important;
      background: linear-gradient(180deg, #221c12, #18140c) !important;
    }
    #appLizards .farm-field label { color: #b8a888 !important; }
    #appLizards .farm-field input {
      background: #100c08 !important;
      border-color: #3a3220 !important;
      color: #f0e6da !important;
      border-radius: 10px !important;
    }
    .farm-active-line {
      margin: 10px 0 0;
      color: #cbb8a4;
      font-size: 0.85rem;
    }
    .farm-active-line strong { color: #e0b07a; }
    .farm-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .farm-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #3a3028;
      background: #14100c;
      color: #d4c4b0;
      font-size: 0.82rem;
    }
    .farm-pill strong { color: #e0b07a; font-weight: 700; }
    .farm-card-stats {
      display: grid;
      gap: 4px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #2a221c;
    }
    .farm-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .farm-card-actions button {
      flex: 1 1 auto;
      min-width: 0;
      padding: 8px 10px;
      font-size: 0.78rem;
      border-radius: 8px;
    }
    .farm-person-card.is-running::before { background: #6abf7a; }
    .farm-person-card.is-log-focus {
      border-color: #8ab4e0;
      box-shadow: 0 0 0 1px rgba(138,180,224,0.2), 0 12px 32px rgba(0,0,0,0.3);
    }
    .farm-person-status {
      margin: 8px 0 0;
      color: #a89888;
      font-size: 0.75rem;
      line-height: 1.35;
      min-height: 1.35em;
    }
    .farm-person-edit {
      margin: 6px 0 0;
      padding: 0;
      border: 0;
      background: none;
      color: #8a7a6a;
      font: inherit;
      font-size: 0.72rem;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .farm-person-edit:hover { color: #e0b07a; }

    /* —— interactive person cards —— */
    .stat-meter {
      display: grid;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent),
        rgba(0,0,0,0.22);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .stat-meter:hover {
      transform: translateY(-1px);
      border-color: rgba(224,176,122,0.35);
      box-shadow: 0 8px 22px rgba(0,0,0,0.22);
    }
    .stat-meter-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #9a8a78;
    }
    .stat-meter-head strong {
      font-size: 0.92rem;
      letter-spacing: 0.02em;
      text-transform: none;
      color: #f0e2d0;
      font-weight: 700;
    }
    .stat-meter-track {
      position: relative;
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: #0a0806;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.55);
    }
    .stat-meter-fill {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      transition: width .55s cubic-bezier(.2,.8,.2,1);
      position: relative;
    }
    .stat-meter-fill::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
      transform: translateX(-120%);
      animation: meterSheen 2.8s ease-in-out infinite;
    }
    @keyframes meterSheen {
      0%, 55% { transform: translateX(-120%); }
      100% { transform: translateX(120%); }
    }
    .stat-meter.hp .stat-meter-fill {
      background: linear-gradient(90deg, #7a1f2c, #e24b5e 55%, #ff8a9a);
      box-shadow: 0 0 12px rgba(226,75,94,0.35);
    }
    .stat-meter.hp.is-mid .stat-meter-fill {
      background: linear-gradient(90deg, #7a4a12, #e0a030 55%, #f0c870);
      box-shadow: 0 0 12px rgba(224,160,48,0.3);
    }
    .stat-meter.hp.is-low .stat-meter-fill {
      background: linear-gradient(90deg, #5a1020, #c02040 50%, #ff4060);
      animation: hpPulse 1.1s ease-in-out infinite;
    }
    @keyframes hpPulse {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.25); }
    }
    .stat-meter.weight .stat-meter-fill {
      background: linear-gradient(90deg, #2a5a45, #4ecf8e 55%, #9aefc0);
      box-shadow: 0 0 12px rgba(78,207,142,0.28);
    }
    .stat-meter.weight.is-heavy .stat-meter-fill {
      background: linear-gradient(90deg, #6a3a10, #e08a30 55%, #f0b060);
      box-shadow: 0 0 12px rgba(224,138,48,0.3);
    }
    .stat-meter.weight.is-full .stat-meter-fill {
      background: linear-gradient(90deg, #6a1020, #e04060);
      box-shadow: 0 0 12px rgba(224,64,96,0.35);
    }
    .duo-meters {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .duo-block {
      display: grid;
      gap: 8px;
      padding: 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.02);
    }
    .duo-block-title {
      margin: 0;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #c9a882;
      font-family: var(--font-display);
    }
    .farm-person-card {
      backdrop-filter: blur(2px);
    }
    .farm-person-card:hover {
      transform: translateY(-2px);
    }
    .farm-person-card.is-running {
      border-color: rgba(106,191,122,0.45);
      box-shadow: 0 0 0 1px rgba(106,191,122,0.12), 0 14px 36px rgba(0,0,0,0.32);
    }
    .farm-card-chiprow {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .farm-card-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid #3a3028;
      background: rgba(0,0,0,0.28);
      color: #d4c4b0;
      font-size: 0.72rem;
      transition: border-color .15s, background .15s;
    }
    .farm-card-chip:hover { border-color: #c9945a; background: rgba(224,176,122,0.08); }
    .farm-card-chip b { color: #f0e0d0; font-weight: 700; }
    .card-cfg {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      margin-top: 12px;
    }
    @media (min-width: 420px) {
      .card-cfg { grid-template-columns: 1fr 1fr; }
    }
    .card-cfg-btn {
      appearance: none;
      border: 1px solid #4a3a2c;
      border-radius: 10px;
      padding: 9px 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
        #18120e;
      color: #e0c8a8;
      font: inherit;
      font-size: 0.78rem;
      letter-spacing: 0.02em;
      cursor: pointer;
      text-align: left;
      transition: border-color .15s, transform .15s, background .15s, color .15s;
    }
    .card-cfg-btn:hover {
      border-color: #e0b07a;
      color: #fff2e0;
      transform: translateY(-1px);
      background:
        linear-gradient(180deg, rgba(224,176,122,0.12), transparent),
        #1c1510;
    }
    .card-cfg-btn:active { transform: translateY(0); }
    .card-cfg-btn.span2 { grid-column: 1 / -1; }
    .farm-person-edit { display: none !important; }

    .farm-log-line .src { display: none !important; }
    .log-line .clan-ico,
    .log-line .ico,
    .logs .clan-ico,
    .logs .ico { display: none !important; }
    .log-nick { font-weight: 650; margin-right: 6px; }

    #appCombry .farm-roster { margin-top: 8px; }
    .combry-shared-panel {
      margin-top: 14px;
      border: 1px solid #2a3344;
      border-radius: 16px;
      padding: 14px;
      background:
        radial-gradient(420px 160px at 0% 0%, rgba(255,122,24,0.1), transparent 60%),
        linear-gradient(180deg, #171c26, #10151d);
    }
    .combry-shared-panel h3 {
      margin: 0 0 10px;
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #ff9a4a;
      font-family: var(--font-display);
    }

    .farm-targets {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .farm-target-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #3b2f24;
      border-radius: 12px;
      background: rgba(255,255,255,0.02);
      color: #d9c7b3;
    }
    .farm-target-item input {
      width: 16px;
      height: 16px;
      accent-color: #d7a065;
    }
    .farm-target-empty {
      margin: 8px 0 0;
      color: #8a7a6a;
      font-size: 0.84rem;
    }
    .farm-person-card.farm-person-add {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
      appearance: auto;
    }
    .newbie-log-wrap {
      margin-top: 14px;
      border-radius: 14px;
      border: 1px solid #2a384c;
      background: #0a0e14;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: min(58vh, 520px);
      min-height: 220px;
    }
    .farm-log-wrap {
      margin-top: 14px;
      border-radius: 14px;
      border: 1px solid #3a3028;
      background: #0e0b08;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: min(58vh, 520px);
      min-height: 220px;
    }
    .newbie-log-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 14px;
      border-bottom: 1px solid #243042;
      color: #9fdf8a;
      font-size: 0.85rem;
      letter-spacing: 0.02em;
      background: #0d121a;
    }
    .farm-log-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 14px;
      border-bottom: 1px solid #3a3028;
      color: #e0b07a;
      font-size: 0.85rem;
      letter-spacing: 0.02em;
      background: #14100c;
    }
    .newbie-log-head span { color: #7a879c; font-size: 0.78rem; }
    .farm-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 10px 0 0;
    }
    .farm-filters button {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid #3a3028;
      background: #14100c;
      color: #a89888;
      font: inherit;
      font-size: 0.82rem;
      cursor: pointer;
    }
    .farm-filters button.active {
      border-color: #e0b07a;
      color: #e0b07a;
      background: #1c1610;
    }
    .nl-line .tag {
      display: inline-block;
      margin-right: 8px;
      padding: 1px 7px;
      border-radius: 6px;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid #3a3028;
      color: #8a7a6a;
    }
    .nl-line .tag.home { color: #9fdf8a; border-color: #2a3a28; }
    .nl-line .tag.loot { color: #e0b07a; border-color: #5a4020; }
    .nl-line .tag.inv { color: #c9a0e8; border-color: #4a3560; }
    .nl-line .tag.merchant { color: #8ec8ff; border-color: #2a4058; }
    .nl-line .tag.sell { color: #ffc857; border-color: #5a4520; }

    #newbieLive {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 12px 14px 16px;
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      color: #c5d0e0;
      font-size: 0.92rem;
      line-height: 1.55;
      font-family: "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
      user-select: text;
      cursor: text;
    }
    #farmLive {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 12px 14px 16px;
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      color: #d8cfc4;
      font-size: 0.92rem;
      line-height: 1.55;
      font-family: "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
      user-select: text;
      cursor: text;
    }
    #lizardsLive {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 12px 14px 16px;
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      color: #d8cfc4;
      font-size: 0.92rem;
      line-height: 1.55;
      font-family: "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
      user-select: text;
      cursor: text;
    }
    #lizardsLive .farm-log-line {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
      padding: 3px 0;
      border-bottom: 1px solid rgba(58, 48, 40, 0.45);
    }
    #lizardsLive .farm-log-line:last-child { border-bottom: 0; }
    #lizardsLive .farm-log-line .t {
      color: #7a879c;
      font-variant-numeric: tabular-nums;
      flex: 0 0 auto;
    }
    #lizardsLive .farm-log-line .tag {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 6px;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 1px solid #3a3028;
      color: #8a7a6a;
      flex: 0 0 auto;
    }
    #lizardsLive .farm-log-line .src {
      color: #e0b07a;
      font-weight: 600;
      flex: 0 0 auto;
    }
    #lizardsLive .farm-log-line .msg {
      flex: 1 1 240px;
      min-width: 0;
    }
    #newbieLive .nl-time {
      color: #6d7f96;
      margin-right: 0.55em;
      font-variant-numeric: tabular-nums;
    }
    #newbieLive .nl-line {
      padding: 3px 0;
      border-bottom: 1px solid rgba(36, 48, 66, 0.45);
    }
    #newbieLive .nl-line:last-child { border-bottom: 0; }
    #appCombry {
      min-height: 100dvh;
      min-height: 100vh;
      background: transparent;
    }
    .combry-wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: 14px 16px 20px;
    }
    .combry-hero {
      display: grid;
      gap: 12px;
      margin-bottom: 12px;
    }
    @media (min-width: 720px) {
      .combry-hero { grid-template-columns: 1.2fr 0.8fr; align-items: stretch; }
    }
    .combry-brand-block {
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid rgba(255,106,0,0.28);
      background:
        linear-gradient(135deg, rgba(255,106,0,0.14), transparent 55%),
        linear-gradient(180deg, #161a22, #10141b);
      position: relative;
      overflow: hidden;
    }
    .combry-brand-block::after {
      content: "";
      position: absolute;
      right: -40px; top: -40px;
      width: 160px; height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,106,0,0.22), transparent 70%);
      pointer-events: none;
    }
    .combry-brand {
      margin: 0;
      font-size: clamp(1.35rem, 3.5vw, 1.85rem);
      letter-spacing: 0.03em;
      color: #ff7a18;
      font-weight: 700;
    }
    .combry-sub { margin: 6px 0 0; color: #9aa3b5; font-size: 0.86rem; line-height: 1.35; max-width: 34em; }
    .section-brand-actions {
      margin-top: 14px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    /* темы шапки для остальных разделов */
    .combry-brand-block.theme-ignore {
      border-color: rgba(232,165,75,0.30);
      background:
        linear-gradient(135deg, rgba(232,165,75,0.14), transparent 55%),
        linear-gradient(180deg, #1a1612, #12100e);
    }
    .combry-brand-block.theme-ignore::after {
      background: radial-gradient(circle, rgba(232,165,75,0.22), transparent 70%);
    }
    .combry-brand-block.theme-ignore .combry-brand { color: #e8a54b; }

    .combry-brand-block.theme-farm {
      border-color: rgba(224,176,122,0.30);
      background:
        linear-gradient(135deg, rgba(224,176,122,0.14), transparent 55%),
        linear-gradient(180deg, #1a1612, #12100e);
    }
    .combry-brand-block.theme-farm::after {
      background: radial-gradient(circle, rgba(224,176,122,0.22), transparent 70%);
    }
    .combry-brand-block.theme-farm .combry-brand { color: #e0b07a; }

    .combry-brand-block.theme-dig {
      border-color: rgba(184,212,154,0.30);
      background:
        linear-gradient(135deg, rgba(184,212,154,0.14), transparent 55%),
        linear-gradient(180deg, #141a12, #0e120e);
    }
    .combry-brand-block.theme-dig::after {
      background: radial-gradient(circle, rgba(184,212,154,0.22), transparent 70%);
    }
    .combry-brand-block.theme-dig .combry-brand { color: #b8d49a; }

    .combry-brand-block.theme-newbie {
      border-color: rgba(159,223,138,0.28);
      background:
        linear-gradient(135deg, rgba(159,223,138,0.12), transparent 55%),
        linear-gradient(180deg, #121a14, #0e1410);
    }
    .combry-brand-block.theme-newbie::after {
      background: radial-gradient(circle, rgba(159,223,138,0.20), transparent 70%);
    }
    .combry-brand-block.theme-newbie .combry-brand { color: #9fdf8a; }

    .money-card {
      padding: 18px 18px 16px;
      border-radius: 18px;
      border: 1px solid #2a3344;
      background: linear-gradient(160deg, #171c26, #10151d);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
    }
    .money-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .money-ico {
      width: 52px; height: 52px;
      image-rendering: pixelated;
      flex: 0 0 auto;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
    }
    .money-label {
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #7d8799;
      margin: 0 0 2px;
    }
    .money-value {
      margin: 0;
      font-size: 1.85rem;
      font-weight: 700;
      color: #f2f5fa;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
    }
    .combry-ctrl {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 4px 0 10px;
    }
    .combry-ctrl button {
      min-height: 44px;
      padding: 0 18px;
      border-radius: 12px;
      font-weight: 600;
    }
    #combryRunBtn {
      background: linear-gradient(180deg, #ff8a2b, #e56a00);
      border: none;
      color: #140c04;
      box-shadow: 0 8px 22px rgba(255,106,0,0.28);
    }
    #combryRunBtn:disabled { opacity: 0.45; box-shadow: none; }
    #combryStopBtn {
      background: linear-gradient(180deg, #ff5d75, #c8223f);
      border: none;
      color: #fff;
    }
    #combryStopBtn:disabled { opacity: 0.4; }
    .combry-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid #2a3344;
      background: #121820;
      color: #b8c0d0;
      font-size: 0.82rem;
    }
    .combry-status-pill .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #4a5363;
    }
    .combry-status-pill.on .dot { background: #3ecf8e; box-shadow: 0 0 8px #3ecf8e; }
    .combry-status-pill.busy .dot { background: #ff7a18; box-shadow: 0 0 8px #ff7a18; }
    .combry-grid {
      display: grid;
      gap: 12px;
    }
    @media (min-width: 720px) {
      .combry-grid { grid-template-columns: 1fr 1fr; }
      .combry-grid .span2 { grid-column: 1 / -1; }
    }
    .combry-field {
      border-radius: 16px !important;
      border-color: #243042 !important;
      background: linear-gradient(180deg, #141922, #10151c) !important;
    }
    .combry-field label {
      display: block;
      font-size: 0.74rem;
      color: #8b95a8;
      margin-bottom: 8px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .combry-field input,
    .combry-field textarea {
      width: 100%;
      background: #0a0e14;
      border: 1px solid #243042;
      color: var(--fg);
      border-radius: 12px;
      padding: 12px 12px;
      font: inherit;
      resize: vertical;
    }
    .combry-field textarea { min-height: 88px; }
    .combry-field textarea.logs { min-height: 140px; }
    .combry-field textarea.wishlist { min-height: 160px; font-size: 0.85rem; }
    .combry-field textarea.inv { min-height: 160px; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
    .combry-interval {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .combry-interval input {
      width: 72px;
      background: #0a0e14;
      border: 1px solid #243042;
      color: var(--fg);
      border-radius: 10px;
      padding: 8px 10px;
      font: inherit;
    }
    .combry-interval .hint-inline {
      color: #7d8799;
      font-size: 0.8rem;
    }
    .combry-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    #combryLive {
      margin-top: 8px;
      white-space: pre-wrap;
      max-height: 140px;
      overflow: auto;
      background: #0a0e14;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #243042;
      color: #9eabbf;
      font-size: 0.8rem;
      line-height: 1.45;
    }
    .pickup-timer {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 14px;
      border-radius: 12px;
      border: 1px solid #2a3a28;
      background: linear-gradient(160deg, #121a14, #0c1210);
      min-height: 88px;
      justify-content: center;
    }
    .pickup-timer .t-label {
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #7d8799;
    }
    .pickup-timer .t-value {
      font-size: 1.35rem;
      font-weight: 700;
      color: #3ecf8e;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }
    .pickup-timer.off .t-value { color: #7d8799; font-size: 1.05rem; font-weight: 600; }
    .pickup-timer.low .t-value { color: #ff7a18; }
    #combryPickup { display: none; }


    #appArena.locked { display: none !important; }
    #appArena { display: none; }
    #appArena.show { display: block; }