/* /panel – the Nore Bot configuration panel. Operate surface: the launcher's grammar on the web (cover rail with
   index tabs, sheets, slots, switches, a floating save bar). Shared parts: /assets/album.css. */
body.panel { font: 400 16px/1.5 var(--nore-font-text); }
.bar { display: flex; align-items: center; gap: 16px; height: 72px; padding-inline: var(--nore-web-margin); position: relative; z-index: 2; }
.bar .mark { display: flex; align-items: center; gap: 10px; font: 400 22px/1 var(--nore-font-display); text-decoration: none; white-space: nowrap; }
.bar .mark img { width: 36px; height: 36px; }
.bar .mark small { font: 500 16px/1 var(--nore-font-text); color: var(--nore-ink-soft); }
.bar .lang { margin-left: auto; padding: 4px; }
.bar .lang button { min-height: 34px; padding: 0 12px; font-size: 14px; }
.user { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--nore-font-text); }
.user[hidden] { display: none; }
.user img { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--nore-vinyl); background: var(--nore-slot); }
.user button { margin-left: 4px; border: 0; background: none; padding: 6px 2px; color: var(--nore-ink-soft); font: 500 15px/1 var(--nore-font-text); cursor: pointer; text-decoration: underline 2px transparent; text-underline-offset: 4px; }
.user button:hover { color: var(--nore-ink); text-decoration-color: var(--nore-accent-light); }
#app { position: relative; z-index: 1; padding: 0 var(--nore-web-margin) 40px; }

/* centred states: loading, login, errors */
.center { min-height: calc(100svh - 160px); display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.center h1 { margin: 0; font: 400 clamp(34px, 4vw, 56px)/1.05 var(--nore-font-display); letter-spacing: -.02em; }
.center p { max-width: 46ch; color: var(--nore-ink-soft); }
.center .spin { width: 96px; animation: sway 1.4s var(--nore-ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .center .spin { animation: none; } }
.login { display: grid; gap: 22px; justify-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 6px; background: var(--nore-paper); color: var(--nore-vinyl-ink); rotate: -1deg; max-width: 520px; }
.login p { color: var(--nore-vinyl-ink-soft); }
.login .pill { background: #5865f2; }
.err-line { display: flex; align-items: center; gap: 10px; color: #ffb4ad; font: 500 15px/1.35 var(--nore-font-text); }
.login .err-line { color: #a3241a; }

/* guild picker */
.picker { max-width: 1100px; margin: 20px auto 0; }
.picker h1 { margin: 0; font: 400 clamp(32px, 3.6vw, 52px)/1.05 var(--nore-font-display); letter-spacing: -.02em; }
.picker > p { margin-top: 10px; color: var(--nore-ink-soft); }
.picker .find { width: 100%; max-width: 420px; height: 48px; margin-top: 22px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--nore-slot); color: var(--nore-ink); font: 500 16px/1 var(--nore-font-text); }
.guilds { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.g { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--nore-page-raised); }
.g .gi { width: 52px; height: 52px; flex: none; border-radius: 14px; border: 3px solid var(--nore-vinyl); background: var(--nore-cover); display: grid; place-items: center; font: 400 20px/1 var(--nore-font-display); color: var(--nore-cover-ink); overflow: hidden; }
.g .gi img { width: 100%; height: 100%; object-fit: cover; }
.g b { display: block; font: 600 16px/1.25 var(--nore-font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 500 14px/1.2 var(--nore-font-text); color: var(--nore-ink-soft); }
.g > div { min-width: 0; flex: 1; }
.g .pill { flex: none; }
.g.off { background: var(--nore-slot); outline: 2px dashed var(--nore-ghost); outline-offset: -7px; color: var(--nore-ink-faint); }
.g.off .gi { border-color: var(--nore-ghost); }
a.g { text-decoration: none; transition: translate var(--nore-dur-quick) var(--nore-ease-out), background-color var(--nore-dur-quick); }
a.g:hover { translate: 0 -2px; background: var(--nore-page-raised-2); }

/* the editor: cover rail + page */
.app { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100svh - 112px); border-radius: 22px; overflow: hidden; background: var(--nore-page-raised); }
.rail { padding: 20px 0 20px 14px; color: var(--nore-cover-ink); background-color: var(--nore-cover);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='.22'/%3E%3C/svg%3E"); }
.guild { display: flex; align-items: center; gap: 12px; padding: 0 14px 18px 4px; }
.guild .gi { width: 48px; height: 48px; flex: none; border-radius: 14px; border: 3px solid var(--nore-vinyl); background: var(--nore-page); display: grid; place-items: center; font: 400 18px/1 var(--nore-font-display); overflow: hidden; }
.guild .gi img { width: 100%; height: 100%; object-fit: cover; }
.guild b { display: block; font: 600 16px/1.2 var(--nore-font-text); overflow-wrap: anywhere; }
.guild small { display: flex; align-items: center; gap: 7px; margin-top: 5px; font: 500 14px/1.25 var(--nore-font-text); color: var(--nore-cover-ink-soft); }
.rail nav { display: grid; gap: 2px; }
.rail .grp { margin: 14px 0 6px 12px; font: 600 14px/1 var(--nore-font-text); color: var(--nore-cover-ink-soft); }
.tab { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 12px 0 0 12px; background: transparent; color: color-mix(in oklab, var(--nore-cover-ink) 82%, transparent); font: 500 15px/1.2 var(--nore-font-text); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--nore-dur-quick), color var(--nore-dur-quick); }
.tab:hover { background: var(--nore-cover-tab); color: var(--nore-cover-ink); }
.tab .dot { margin-left: auto; }
.tab .cnt { margin-left: auto; font: 600 13px/1 var(--nore-font-text); color: #ffb4ad; }
.tab[aria-current="page"] { background: var(--nore-page); color: var(--nore-ink); font-weight: 600; }
.tab[aria-current="page"]::before, .tab[aria-current="page"]::after { content: ''; position: absolute; right: 0; width: 12px; height: 12px; background: var(--nore-page); }
.tab[aria-current="page"]::before { top: -12px; -webkit-mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px); mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px); } /* taste-skill-ignore: the concave join of the active index tab (DESIGN.md §5) */
.tab[aria-current="page"]::after { bottom: -12px; -webkit-mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px); mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px); } /* taste-skill-ignore: the concave join of the active index tab */

.main { position: relative; min-width: 0; background: var(--nore-page); padding: 28px clamp(18px, 3vw, 44px) 130px; }
.head { display: flex; align-items: flex-start; gap: 20px; }
.head h1 { margin: 0; font: 400 clamp(28px, 3vw, 44px)/1.05 var(--nore-font-display); letter-spacing: -.02em; }
.head p { margin-top: 10px; max-width: 60ch; color: var(--nore-ink-soft); }
.head .switch { margin-left: auto; margin-top: 8px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; margin-top: 30px; align-items: start; }
.form { display: grid; gap: 24px; min-width: 0; }

/* fields */
.f { display: grid; gap: 8px; min-width: 0; }
.f > .lbl { font: 600 15px/1.25 var(--nore-font-text); }
.f > .help { margin-top: -4px; font: 400 15px/1.4 var(--nore-font-text); color: var(--nore-ink-soft); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row .lbl { font: 600 15px/1.25 var(--nore-font-text); }
.row .help { display: block; margin-top: 3px; font: 400 15px/1.4 var(--nore-font-text); color: var(--nore-ink-soft); }
.inp, .area, select.inp { width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--nore-slot); color: var(--nore-ink); font: 500 16px/1.4 var(--nore-font-text); }
.area { min-height: 116px; padding: 12px 16px; resize: vertical; }
.inp:focus-visible, .area:focus-visible { outline: 2px solid var(--nore-accent); outline-offset: 0; }
.inp.bad, .area.bad { box-shadow: inset 0 0 0 2px var(--nore-dot-error); } /* taste-skill-ignore: inset error ring on a form field */
select.inp { appearance: none; cursor: pointer; background-image: none; padding-right: 36px; }
.sel-wrap { position: relative; }
.sel-wrap::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--nore-ink-soft); border-bottom: 2px solid var(--nore-ink-soft); rotate: 45deg; translate: 0 -70%; pointer-events: none; }
.vars { display: flex; flex-wrap: wrap; gap: 6px; }
.var { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border: 2px solid var(--nore-vinyl); border-radius: 8px; background: var(--nore-vinyl); color: var(--nore-vinyl-ink); font: 600 14px/1 var(--nore-font-text); cursor: pointer; transition: translate var(--nore-dur-quick) var(--nore-ease-out); }
.var:hover { translate: 0 -2px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--nore-page-raised); font: 500 15px/1 var(--nore-font-text); }
.chip button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--nore-page-raised-2); color: var(--nore-ink-soft); font: 600 16px/1 var(--nore-font-text); cursor: pointer; }
.chip button:hover { color: var(--nore-ink); background: color-mix(in oklab, var(--nore-dot-error) 30%, var(--nore-page-raised-2)); }
.chip.add { padding: 0; background: transparent; }
.chip.add select, .chip.add input { height: 36px; min-height: 0; padding: 0 14px; border-radius: 999px; background: var(--nore-slot); border: 0; color: var(--nore-ink-soft); font: 500 15px/1 var(--nore-font-text); }
.sw { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sw button { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 3px solid var(--nore-vinyl); background: var(--c); cursor: pointer; transition: scale var(--nore-dur-quick) var(--nore-ease-out); }
.sw button:hover { scale: 1.1; }
.sw button[aria-pressed="true"] { outline: 3px solid var(--nore-accent-light); outline-offset: 3px; }
.sw input[type="color"] { width: 46px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.sw code { font: 500 14px/1 var(--nore-font-code); color: var(--nore-ink-soft); }
.group { display: grid; gap: 20px; padding: 20px; border: 0; border-radius: 18px; background: var(--nore-page-raised); min-width: 0; margin: 0; }
.group > legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 17px/1.25 var(--nore-font-text); }
.group > legend + * { clear: both; }
.group .group { background: var(--nore-page-raised-2); }
.group.off > :not(legend) { opacity: .55; }
.items { display: grid; gap: 10px; }
.item { position: relative; display: grid; gap: 16px; padding: 16px 16px 16px; border-radius: 16px; background: var(--nore-page-raised); }
.group .item { background: var(--nore-page-raised-2); }
.item-head { display: flex; align-items: center; gap: 10px; font: 600 15px/1.2 var(--nore-font-text); color: var(--nore-ink-soft); }
.item-head .rm { margin-left: auto; }
.empty { padding: 18px; border-radius: 16px; background: var(--nore-slot); outline: 2px dashed var(--nore-ghost); outline-offset: -7px; color: var(--nore-ink-faint); font: 500 15px/1.4 var(--nore-font-text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--nore-page-raised-2); color: var(--nore-ink); font: 600 15px/1 var(--nore-font-text); cursor: pointer; transition: background-color var(--nore-dur-quick), scale var(--nore-dur-tap); justify-self: start; }
.btn:hover { background: color-mix(in oklab, var(--nore-page-raised-2) 80%, #fff); }
.btn:active { scale: .97; }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 14px; }
.btn.danger { background: color-mix(in oklab, var(--nore-dot-error) 18%, var(--nore-page-raised)); color: #ffd9d5; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.ferr { display: flex; align-items: center; gap: 8px; color: #ffb4ad; font: 500 15px/1.35 var(--nore-font-text); }
.ferr .dot { flex: none; }
.ferr.slap .dot { animation: dot-slap var(--nore-dur-stick) var(--nore-ease-out) backwards; }
.state { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--nore-font-text); color: var(--nore-ink-soft); }

/* the side column */
.side { position: sticky; top: 16px; display: grid; gap: 16px; min-width: 0; }
.side h3 { margin: 0; font: 600 15px/1.2 var(--nore-font-text); color: var(--nore-ink-soft); }
.discord { padding: 16px 16px 18px; border-radius: 16px; background: #313338; color: #dbdee1; font: 400 15px/1.4 var(--nore-font-text); }
.discord .who { display: flex; align-items: center; gap: 10px; }
.discord .who img { width: 38px; height: 38px; border-radius: 50%; }
.discord .who b { color: #fff; font-weight: 600; }
.discord .who em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: #5865f2; color: #fff; }
.discord .who small { color: #949ba4; font-size: 13px; }
.discord .msg { margin: 8px 0 0 48px; white-space: pre-wrap; overflow-wrap: anywhere; }
.discord .msg.embed { padding: 10px 12px; border-radius: 4px; background: #2b2d31; border-left: 4px solid var(--embed, #9d5cff); }
.discord .men { color: #c9cdfb; background: rgba(88, 101, 242, .3); border-radius: 3px; padding: 0 2px; }
.events { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--nore-page-raised); display: grid; gap: 10px; list-style: none; font: 400 15px/1.35 var(--nore-font-text); max-height: 520px; overflow-y: auto; }
.events li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.events li .dot { align-self: center; }
.events li span { overflow-wrap: anywhere; }
.events li time { color: var(--nore-ink-soft); white-space: nowrap; font-size: 14px; }
.events .none { display: block; color: var(--nore-ink-soft); }
.quick { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--nore-page-raised); }
.quick p { color: var(--nore-ink-soft); font-size: 15px; }

/* the floating save bar: a white sticker */
.save { position: fixed; left: 50%; bottom: 20px; z-index: 30; translate: -50% 0; width: min(760px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 999px; border: 3px solid var(--nore-vinyl); background: var(--nore-vinyl); color: var(--nore-vinyl-ink); font: 600 15px/1.25 var(--nore-font-text); box-shadow: var(--nore-shadow-float); animation: sheet-in var(--nore-dur-overlay) var(--nore-ease-out) backwards; } /* taste-skill-ignore: the save bar floats */
.save[hidden] { display: none; }
.save small { display: block; font-weight: 500; color: var(--nore-vinyl-ink-soft); }
.save .grow { flex: 1; min-width: 0; }
.save .ghost { background: transparent; color: var(--nore-vinyl-ink); border-color: transparent; }
.save.conflict { border-radius: 24px; flex-wrap: wrap; }
.save.conflict .dot { flex: none; }
@keyframes sheet-in { from { opacity: 0; translate: -50% var(--nore-shift-drop); } }

@media (max-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr); } .side { position: static; } }
@media (max-width: 760px) {
  .bar .mark small, .user span { display: none; }
  #app { padding: 0 0 40px; }
  .app { grid-template-columns: minmax(0, 1fr); border-radius: 0; min-height: 0; }
  .rail { padding: 14px 0 0 12px; }
  .rail nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; padding-right: 12px; }
  .rail .grp { display: none; }
  .tab { flex: none; border-radius: 12px 12px 0 0; padding: 0 14px; }
  .tab[aria-current="page"]::before, .tab[aria-current="page"]::after { display: none; }
  .tab .dot { margin-left: 4px; }
  .main { padding: 22px 16px 120px; }
  .head { flex-wrap: wrap; }
  .picker, .center { padding: 0 16px; }
  .save { border-radius: 20px; flex-wrap: wrap; padding: 12px 14px; }
  .save .grow { flex-basis: 100%; }
  .save small { display: none; }
}

/* builder look preview (Kreator – wygląd) */
.bprev{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px;padding:14px;border-radius:12px;background:#1e1f22;color:#dbdee1;font:14px/1.45 "gg sans","Noto Sans",system-ui,sans-serif}
.bprev b{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#949ba4}
.bp-cat{margin-top:8px;font-size:12px;font-weight:700;color:#949ba4;letter-spacing:.02em}
.bp-ch{padding:3px 8px;border-radius:4px;color:#949ba4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-ch:hover{background:#2e3035;color:#dbdee1}
.bp-role{display:flex;align-items:center;gap:8px;padding:2px 0;font-weight:600}
.bp-role i{flex:none;width:12px;height:12px;border-radius:50%}

/* ================================================================== panel.noreclient.pl – full-page app shell
   The panel is an Operate surface: one dark workspace, a fixed sidebar with grouped sections, a top bar,
   cards for the overview and the builder. Same tokens as the site; Discord colours only in previews. */
body.panel { background: var(--nore-slot); min-height: 100svh; }
.bar { height: 60px; padding-inline: 18px; border-bottom: 1px solid var(--nore-ghost); background: var(--nore-slot); position: sticky; top: 0; z-index: 20; }
.bar .mark { font-size: 19px; }
.bar .mark img { width: 30px; height: 30px; }
.bar .navtoggle { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--nore-page-raised); color: var(--nore-ink); font: 600 18px/1 var(--nore-font-text); cursor: pointer; }
.bar .links { display: flex; gap: 18px; margin-left: 24px; }
.bar .links a { color: var(--nore-ink-soft); text-decoration: none; font: 500 15px/1 var(--nore-font-text); }
.bar .links a:hover { color: var(--nore-ink); }
#app { padding: 0; }
.app { grid-template-columns: 288px minmax(0, 1fr); min-height: calc(100svh - 60px); border-radius: 0; background: var(--nore-page); }
.rail { position: sticky; top: 60px; height: calc(100svh - 60px); overflow-y: auto; padding: 16px 12px 12px; background: var(--nore-slot); background-image: none; border-right: 1px solid var(--nore-ghost); display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.guild { padding: 10px; border-radius: 14px; background: var(--nore-page-raised); text-decoration: none; color: var(--nore-ink); transition: background-color var(--nore-dur-quick); }
.guild:hover { background: var(--nore-page-raised-2); }
.guild > div { min-width: 0; flex: 1; }
.guild b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.guild small { color: var(--nore-ink-soft); }
.guild .swap { color: var(--nore-ink-faint); font-size: 18px; }
.guild .gi { border-color: var(--nore-ghost); background: var(--nore-cover); color: var(--nore-cover-ink); }
.navfind { width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--nore-page-raised); color: var(--nore-ink); font: 500 14px/1 var(--nore-font-text); }
.navfind:focus-visible { outline: 2px solid var(--nore-accent); }
.rail nav { display: grid; gap: 4px; }
.ngrp { display: grid; gap: 1px; }
.ngrp summary { list-style: none; cursor: pointer; margin: 10px 0 4px; padding: 0 10px; font: 600 12px/1 var(--nore-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--nore-ink-faint); }
.ngrp summary::-webkit-details-marker { display: none; }
.ngrp summary::after { content: '▾'; float: right; transition: rotate var(--nore-dur-quick); }
.ngrp:not([open]) summary::after { rotate: -90deg; }
.tab { min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--nore-ink-soft); font-size: 14.5px; }
.tab:hover { background: var(--nore-page-raised); color: var(--nore-ink); }
.tab[aria-current="page"] { background: color-mix(in oklab, var(--nore-accent) 22%, var(--nore-page-raised)); color: var(--nore-ink); }
.tab[aria-current="page"]::before, .tab[aria-current="page"]::after { display: none; }
.tab .ti { width: 22px; text-align: center; flex: none; }
.tab .tl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[hidden], .ngrp[hidden] { display: none; }
.rail-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 10px 4px; border-top: 1px solid var(--nore-ghost); }
.rail-foot a { color: var(--nore-ink-faint); font: 500 13px/1.3 var(--nore-font-text); text-decoration: none; }
.rail-foot a:hover { color: var(--nore-ink); }
.main { padding: 28px clamp(18px, 3vw, 48px) 130px; }
.head h1 { font-size: clamp(26px, 2.6vw, 38px); }
.head.hero .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--nore-ink-soft); font: 500 14px/1.2 var(--nore-font-text); }
.cols.wide { grid-template-columns: minmax(0, 1fr) 380px; }
.card { display: grid; gap: 14px; padding: 20px; border-radius: 18px; background: var(--nore-page-raised); min-width: 0; }
.card h2 { margin: 0; font: 700 18px/1.25 var(--nore-font-text); }
.card h3 { margin: 0; font: 600 15px/1.2 var(--nore-font-text); color: var(--nore-ink-soft); }
.card-h p { margin-top: 4px; color: var(--nore-ink-soft); font-size: 15px; }
.card .events { padding: 0; background: none; max-height: 420px; }
.events.big { max-height: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 24px; }
.stat { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--nore-page-raised); }
.stat small { color: var(--nore-ink-soft); font: 500 13px/1.2 var(--nore-font-text); }
.stat b { font: 400 28px/1.1 var(--nore-font-display); letter-spacing: -.01em; }
.stat span { color: var(--nore-ink-faint); font-size: 13px; }
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.modgrid li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--nore-page-raised-2); }
.modgrid li a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--nore-ink-soft); text-decoration: none; font: 500 14.5px/1.2 var(--nore-font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modgrid li.on a { color: var(--nore-ink); }
.modgrid li a:hover { color: var(--nore-ink); text-decoration: underline; text-underline-offset: 3px; }
.switch.sm { scale: .82; transform-origin: right center; }
.qa { display: grid; gap: 8px; }
.qa .btn { justify-self: stretch; justify-content: flex-start; text-decoration: none; }
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tpl { position: relative; display: block; cursor: pointer; }
.tpl input { position: absolute; opacity: 0; }
.tpl span { display: grid; gap: 6px; height: 100%; padding: 14px 16px; border-radius: 14px; background: var(--nore-page-raised-2); outline: 2px solid transparent; transition: outline-color var(--nore-dur-quick), background-color var(--nore-dur-quick); }
.tpl b { font: 600 16px/1.2 var(--nore-font-text); }
.tpl small { color: var(--nore-ink-soft); font: 400 14px/1.4 var(--nore-font-text); }
.tpl input:checked + span { outline-color: var(--nore-accent); background: color-mix(in oklab, var(--nore-accent) 14%, var(--nore-page-raised-2)); }
.tpl input:focus-visible + span { outline-color: var(--nore-accent-light); }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.buildbar { display: flex; flex-wrap: wrap; gap: 10px; }
.pill.ghost { background: var(--nore-page-raised-2); color: var(--nore-ink); border-color: transparent; }
.jobs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 14.5px/1.4 var(--nore-font-text); }
.jobs li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--nore-page-raised-2); }
.soft { color: var(--nore-ink-soft); }
.picker { padding: 32px 16px 60px; }
.center { min-height: calc(100svh - 60px); }
.legal { max-width: 820px; margin: 0 auto; padding: 40px 20px 80px; font: 400 16px/1.65 var(--nore-font-text); }
.legal h1 { margin: 0 0 6px; font: 400 clamp(30px, 3.4vw, 44px)/1.1 var(--nore-font-display); }
.legal h2 { margin: 34px 0 8px; font: 700 20px/1.3 var(--nore-font-text); }
.legal p, .legal li { color: var(--nore-ink-soft); max-width: 72ch; }
.legal a { color: var(--nore-accent-light); }
.legal .meta { color: var(--nore-ink-faint); font-size: 14px; }

@media (max-width: 1100px) { .cols.wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .bar .navtoggle { display: grid; place-items: center; }
  .bar .links { display: none; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; z-index: 25; left: 0; top: 60px; width: min(300px, 86vw); translate: -102% 0; transition: translate var(--nore-dur-overlay) var(--nore-ease-out); box-shadow: var(--nore-shadow-float); }
  body.nav-open .rail { translate: 0 0; }
  .rail nav { display: grid; overflow: visible; }
  .rail .grp { display: block; }
  .tab { border-radius: 10px; padding: 0 10px; flex: initial; }
  .main { padding: 22px 16px 120px; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
.login .fine { font-size: 14px; color: var(--nore-vinyl-ink-soft); }
.login .fine a { color: var(--nore-accent-deep); }
/* icons (stroke SVG, the launcher's set) */
.tab .ti, .modgrid .ti { display: grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--nore-ink-faint); }
.tab .ti .ic, .modgrid .ti .ic { width: 18px; height: 18px; }
.tab:hover .ti, .tab[aria-current="page"] .ti, .modgrid li.on .ti { color: var(--nore-accent-light); }
.guild .swap { display: grid; place-items: center; color: var(--nore-ink-faint); }
.guild .swap .ic { width: 18px; height: 18px; }
.qa .btn .ic, .buildbar .ic { width: 18px; height: 18px; }
.qa .btn .ic { color: var(--nore-accent-light); }
.bar .navtoggle .ic { width: 20px; height: 20px; }
.rail .navfind { height: 38px; min-height: 38px; padding: 0 12px; font-size: 14px; line-height: 38px; box-sizing: border-box; }
.app { overflow: visible; }