/* SixTails Nexus - shared panel UI kit (rx-* / ux-*). Colors come from the theme tokens, so dark and light both work. */
.rx-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.rx-eyebrow { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--st-gold); margin-bottom:8px; }
.rx-eyebrow:after { content:''; width:46px; height:1px; background:linear-gradient(90deg, var(--st-gold), transparent); }
.rx-head h2, .modal-header h3 { font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.rx-head h2 { font-family:var(--st-font-display, Georgia, serif); font-size:34px; font-weight:600; line-height:1.05; letter-spacing:-.01em; color:var(--st-text-primary); margin:0 0 6px; }
.rx-head p { margin:0; max-width:640px; font-size:13.5px; line-height:1.55; color:var(--st-text-secondary); }
.rx-head p code { font-size:12px; padding:1px 6px; border-radius:4px; background:var(--st-bg-subtle); border:1px solid var(--st-border); color:var(--st-gold-light); }
.rx-actions { display:flex; gap:10px; flex-wrap:wrap; }
.rx-btn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--st-radius-sm, 6px); font-size:12.5px; font-weight:600; letter-spacing:.02em; cursor:pointer; border:1px solid var(--st-border-strong); background:transparent; color:var(--st-text-primary); transition:var(--st-transition); text-decoration:none; }
.rx-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.rx-btn:hover { border-color:var(--st-border-gold, var(--st-gold)); color:var(--st-gold-light); background:var(--st-bg-subtle); }
.rx-btn.gold { border-color:transparent; color:#1a1408; background:var(--st-gold-metal, linear-gradient(180deg,#e3c283,#cfa862 50%,#a98239)); }
.rx-btn.gold:hover { color:#1a1408; filter:brightness(1.07); }
.rx-btn:disabled { opacity:.55; cursor:progress; }

.rx-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.rx-stat { position:relative; padding:16px 18px 15px; border:1px solid var(--st-border); border-radius:var(--st-radius, 8px); background:var(--st-surface, var(--st-bg-card)); box-shadow:var(--st-inset, none); overflow:hidden; }
.rx-stat:before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--st-gold); opacity:.55; }
.rx-stat small { display:block; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--st-text-muted); }
.rx-stat b { display:block; margin-top:6px; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--st-text-primary); font-variant-numeric:tabular-nums; }
.rx-stat b em { font-style:normal; font-size:13px; font-weight:600; color:var(--st-gold); margin-left:4px; letter-spacing:.02em; }
.rx-stat span { display:block; margin-top:3px; font-size:11.5px; color:var(--st-text-secondary); }

.rx-panel { border:1px solid var(--st-border); border-radius:var(--st-radius, 8px); background:var(--st-surface, var(--st-bg-card)); box-shadow:var(--st-shadow-card); overflow:hidden; }
.rx-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--st-border); }
.rx-bar-title { display:flex; align-items:baseline; gap:10px; font-size:14px; font-weight:700; color:var(--st-text-primary); }
.rx-bar-title small { font-size:12px; font-weight:500; color:var(--st-text-muted); }
.rx-search { position:relative; display:flex; gap:8px; align-items:center; }
.rx-search svg { position:absolute; left:12px; top:50%; width:15px; height:15px; margin-top:-7.5px; fill:none; stroke:var(--st-text-muted); stroke-width:1.9; stroke-linecap:round; pointer-events:none; }
.rx-search input { width:320px; max-width:100%; height:38px; padding:0 14px 0 36px; font-size:12.5px; }

.rx-table { width:100%; border-collapse:separate; border-spacing:0; }
.rx-table th { padding:11px 18px; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--st-text-muted); background:var(--st-bg-subtle); border-bottom:1px solid var(--st-border); white-space:nowrap; }
.rx-table td { padding:15px 18px; vertical-align:top; border-bottom:1px solid var(--st-hair, var(--st-border)); font-size:13px; color:var(--st-text-primary); }
.rx-table tbody tr { transition:background .15s; }
.rx-table tbody tr:hover { background:var(--st-bg-subtle); }
.rx-table tbody tr:last-child td { border-bottom:0; }
.rx-id { display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:6px; border:1px solid var(--st-border-strong); background:var(--st-bg-subtle); font-family:var(--st-font-mono); font-size:12.5px; font-weight:600; color:var(--st-gold); }

.rx-chain { display:grid; gap:5px; }
.rx-link { display:flex; align-items:center; gap:9px; font-size:12.5px; line-height:1.3; }
.rx-link .a { color:var(--st-text-secondary); }
.rx-link .b { color:var(--st-text-primary); font-weight:600; }
.rx-link svg { width:14px; height:14px; flex:none; fill:none; stroke:var(--st-gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rx-more { font-size:11.5px; color:var(--st-text-muted); }
.rx-none { font-size:12px; font-style:italic; color:var(--st-text-muted); }

.rx-mats { display:flex; flex-wrap:wrap; gap:6px; }
.rx-mat { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 4px 0 10px; border:1px solid var(--st-border); border-radius:999px; background:var(--st-bg-subtle); font-size:12px; color:var(--st-text-secondary); }
.rx-mat i { font-style:normal; font-family:var(--st-font-mono); font-size:11px; color:var(--st-gold); }
.rx-mat b { display:grid; place-items:center; min-width:24px; height:20px; padding:0 6px; border-radius:999px; background:var(--st-border-strong); font-size:11px; font-weight:700; color:var(--st-text-primary); }

.rx-yang { font-variant-numeric:tabular-nums; font-weight:700; font-size:13.5px; color:var(--st-text-primary); white-space:nowrap; }
.rx-yang em { font-style:normal; margin-left:4px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--st-gold); }

.rx-prob { display:flex; align-items:center; gap:10px; min-width:130px; }
.rx-prob .track { flex:1; height:6px; border-radius:99px; background:var(--st-border); overflow:hidden; }
.rx-prob .fill { display:block; height:100%; border-radius:99px; }
.rx-prob b { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }
.rx-prob.hi b { color:var(--st-success); } .rx-prob.hi .fill { background:var(--st-success); }
.rx-prob.mid b { color:var(--st-warning, #d6a23a); } .rx-prob.mid .fill { background:var(--st-warning, #d6a23a); }
.rx-prob.lo b { color:var(--st-danger); } .rx-prob.lo .fill { background:var(--st-danger); }

.rx-row-act { display:flex; justify-content:flex-end; gap:6px; }
.rx-ico { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; border:1px solid var(--st-border); background:transparent; color:var(--st-text-secondary); cursor:pointer; transition:var(--st-transition); }
.rx-ico svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.rx-ico:hover { border-color:var(--st-border-gold, var(--st-gold)); color:var(--st-gold-light); background:var(--st-bg-subtle); }
.rx-ico.del:hover { border-color:var(--st-danger); color:var(--st-danger); }

.rx-empty { padding:54px 20px; text-align:center; color:var(--st-text-muted); font-size:13px; }
.rx-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--st-border); font-size:12px; color:var(--st-text-muted); }
.rx-pager { display:flex; gap:6px; }
.rx-pager a, .rx-pager span { display:grid; place-items:center; min-width:34px; height:34px; padding:0 12px; border-radius:7px; border:1px solid var(--st-border); font-size:12px; font-weight:600; color:var(--st-text-secondary); text-decoration:none; transition:var(--st-transition); }
.rx-pager a:hover { border-color:var(--st-border-gold, var(--st-gold)); color:var(--st-gold-light); }
.rx-pager span.cur { border-color:transparent; color:#1a1408; background:var(--st-gold-metal, var(--st-gold)); }

/* ---- Modal (shared) ---- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(4,3,2,.78); z-index:9999; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.modal-overlay.open { display:flex; }
.modal-box { width:100%; max-width:560px; max-height:92vh; overflow-y:auto; position:relative; border:1px solid var(--st-border-strong); border-radius:12px; background:var(--st-surface, var(--st-bg-card)); box-shadow:0 40px 90px -20px rgba(0,0,0,.85); }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 26px 18px; border-bottom:1px solid var(--st-border); }
.modal-header h3 { margin:0; font-family:var(--st-font-display, Georgia, serif); font-size:26px; font-weight:600; letter-spacing:-.01em; color:var(--st-text-primary); font-variant-numeric:lining-nums; }
.modal-header p { margin:4px 0 0; font-size:12.5px; color:var(--st-text-secondary); }
.modal-body { padding:22px 26px 6px; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 26px 22px; }
.rx-x { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--st-border); background:transparent; color:var(--st-text-secondary); cursor:pointer; transition:var(--st-transition); }
.rx-x svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.rx-x:hover { color:var(--st-gold-light); border-color:var(--st-border-gold, var(--st-gold)); }
.rx-head h2 { font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }

/* ---- Form elements (shared) ---- */
.ux-alert { display:flex; gap:12px; align-items:flex-start; padding:14px 18px; margin-bottom:20px; border:1px solid var(--st-border); border-left:3px solid var(--st-gold); border-radius:var(--st-radius, 8px); background:var(--st-bg-subtle); font-size:13px; line-height:1.6; color:var(--st-text-secondary); }
.ux-alert strong { color:var(--st-gold-light); }
.ux-alert.warn { border-left-color:var(--st-danger); }
.ux-field { display:block; margin-bottom:18px; }
.ux-field > span { display:block; margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--st-text-muted); }
.ux-input { position:relative; }
.ux-input svg.lead { position:absolute; left:14px; top:50%; width:16px; height:16px; margin-top:-8px; fill:none; stroke:var(--st-text-muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.ux-input input { width:100%; height:44px; padding:0 44px 0 42px; font-size:14px; }
.ux-input .eye { position:absolute; right:6px; top:50%; width:34px; height:34px; margin-top:-17px; display:grid; place-items:center; border:0; background:transparent; color:var(--st-text-muted); cursor:pointer; border-radius:6px; }
.ux-input .eye:hover { color:var(--st-gold-light); }
.ux-input .eye svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rx-btn.block { width:100%; justify-content:center; height:44px; font-size:13px; }
.rx-btn.danger { border-color:var(--st-danger); color:var(--st-danger); }
.rx-btn.danger:hover { background:rgba(217,100,90,.1); color:var(--st-danger); border-color:var(--st-danger); }

/* ---- switch ---- */
.ux-sw { position:relative; display:inline-block; width:44px; height:24px; flex:none; }
.ux-sw input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
.ux-sw i { position:absolute; inset:0; border-radius:999px; background:var(--st-bg-subtle); border:1px solid var(--st-border-strong); transition:var(--st-transition); }
.ux-sw i:after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--st-text-muted); transition:var(--st-transition); }
.ux-sw input:checked + i { background:var(--st-gold-metal, var(--st-gold)); border-color:transparent; }
.ux-sw input:checked + i:after { left:23px; background:#1a1408; }
.ux-sw input:disabled { cursor:not-allowed; } .ux-sw input:disabled + i { opacity:.5; }
.ux-sw input:focus-visible + i { outline:2px solid var(--st-gold); outline-offset:2px; }

/* ---- two column detail layout with side menu ---- */
.ux-split { display:grid; grid-template-columns:300px minmax(0,1fr); gap:22px; align-items:start; }
.ux-side { border:1px solid var(--st-border); border-radius:var(--st-radius, 8px); background:var(--st-surface, var(--st-bg-card)); overflow:hidden; }
.ux-side-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 16px; }
.ux-side-head b { display:block; font-size:16px; color:var(--st-text-primary); }
.ux-side-head small { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:var(--st-text-secondary); }
.ux-dot { width:8px; height:8px; border-radius:50%; background:var(--st-text-muted); }
.ux-dot.on { background:var(--st-success); box-shadow:0 0 8px var(--st-success); }
.ux-side a, .ux-side button.item { display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px; border:0; border-top:1px solid var(--st-hair, var(--st-border)); background:transparent; color:var(--st-text-primary); font:inherit; font-size:13.5px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer; transition:var(--st-transition); }
.ux-side a svg, .ux-side button.item svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--st-text-secondary); }
.ux-side a:hover, .ux-side button.item:hover { background:var(--st-bg-subtle); color:var(--st-gold-light); }
.ux-side a.on { background:rgba(207,168,98,.08); color:var(--st-gold-light); box-shadow:inset 2px 0 var(--st-gold); }
.ux-side a.on svg { color:var(--st-gold); }
.ux-card { border:1px solid var(--st-border); border-radius:var(--st-radius, 8px); background:var(--st-surface, var(--st-bg-card)); padding:22px 24px; }
.ux-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--st-text-muted); }
.ux-crumb a { color:var(--st-text-secondary); text-decoration:none; } .ux-crumb a:hover { color:var(--st-gold-light); }
.ux-crumb b { color:var(--st-text-primary); font-weight:600; }
.ux-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.ux-kv { display:grid; grid-template-columns:200px 1fr; gap:12px 20px; font-size:13.5px; }
.ux-kv dt { color:var(--st-text-muted); font-weight:600; } .ux-kv dd { margin:0; color:var(--st-text-primary); }
.ux-badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; border:1px solid var(--st-border-strong); color:var(--st-text-secondary); }
.ux-badge.gold { color:var(--st-gold-light); border-color:var(--st-border-gold, var(--st-gold)); }
.ux-badge.ok { color:var(--st-success); border-color:rgba(108,194,154,.4); }
.ux-badge.off { color:var(--st-danger); border-color:rgba(217,100,90,.4); }
.ux-perm-group { margin-bottom:6px; }
.ux-perm-group h4 { margin:22px 0 4px; text-align:center; font-family:var(--st-font-display, Georgia, serif); font-size:22px; font-weight:600; color:var(--st-text-primary); }
.ux-perm-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 2px; border-top:1px solid var(--st-hair, var(--st-border)); font-size:13.5px; color:var(--st-text-primary); }
.ux-perm-tools { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
@media (max-width:900px) { .ux-split { grid-template-columns:1fr; } .ux-kv { grid-template-columns:1fr; gap:4px; } }
@media (max-width:1100px) { .rx-stats { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .rx-head h2 { font-size:28px; } .rx-actions { width:100%; } .rx-actions .rx-btn { flex:1; justify-content:center; } .rx-search, .rx-search input { width:100%; } .rx-table th, .rx-table td { padding:12px 14px; } .rx-stat b { font-size:22px; } .ux-card { padding:18px 16px; } }

/* ---- top bar: server label + account menu ---- */
.server-label { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 16px 0 12px; margin-right:6px; border:1px solid var(--st-border); border-radius:999px; background:var(--st-bg-subtle); font-size:13px; font-weight:600; color:var(--st-gold-light); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.server-label i { width:7px; height:7px; border-radius:50%; background:var(--st-success); box-shadow:0 0 8px var(--st-success); flex:none; }
.acct { position:relative; }
.acct-btn { display:flex; align-items:center; gap:10px; height:42px; padding:0 12px 0 5px; border:1px solid var(--st-border); border-radius:999px; background:var(--st-bg-subtle); color:var(--st-text-primary); cursor:pointer; font:inherit; font-size:13px; font-weight:600; transition:var(--st-transition); }
.acct-btn:hover, .acct.open .acct-btn { border-color:var(--st-border-gold, var(--st-gold)); }
.acct-av { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; overflow:hidden; flex:none; background:var(--st-gold-metal, var(--st-gold)); color:#1a1408; font-weight:800; font-size:13px; }
.acct-av.lg { width:44px; height:44px; font-size:17px; }
.acct-av img { width:100%; height:100%; object-fit:cover; display:block; }
.acct-chev { width:14px; height:14px; color:var(--st-text-muted); transition:transform .2s; }
.acct.open .acct-chev { transform:rotate(180deg); }
.acct-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:250px; padding:8px; border:1px solid var(--st-border-strong); border-radius:12px; background:var(--st-surface, var(--st-bg-card)); box-shadow:0 30px 60px -20px rgba(0,0,0,.8); display:none; z-index:200; }
.acct.open .acct-menu { display:block; }
.acct-head { display:flex; align-items:center; gap:12px; padding:10px 10px 14px; margin-bottom:6px; border-bottom:1px solid var(--st-border); }
.acct-head b { display:block; font-size:14px; color:var(--st-text-primary); }
.acct-head small { display:block; margin-top:2px; font-size:12px; color:var(--st-text-muted); }
.acct-menu a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--st-text-primary); text-decoration:none; transition:var(--st-transition); }
.acct-menu a svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--st-text-secondary); }
.acct-menu a:hover { background:var(--st-bg-subtle); color:var(--st-gold-light); }
.acct-menu a.out:hover { color:var(--st-danger); } .acct-menu a.out:hover svg { color:var(--st-danger); }
@media (max-width:640px) { .acct-name, .acct-chev { display:none; } .acct-btn { padding:0 5px; } .server-label { max-width:150px; } }