@font-face { font-family: "Cairo"; src: url("fonts/Cairo.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
:root {
  --bg: #070707; --panel: #111111; --panel2: #171717; --line: #242424; --text: #f3f3f3; --muted: #9a9a9a;
  --orange: #3ad49b; --orange2: #f3da94; --glow: rgba(16,185,129, .18); --red: #ff4d4d; --green: #2ecc71; --radius: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: "Cairo", "Noto Sans Arabic", Tahoma, sans-serif; font-size: 15px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; background: radial-gradient(900px 500px at 85% -10%, rgba(16,185,129,.13), transparent 60%), var(--bg); }
.hidden { display: none !important; }
a { color: var(--orange); }
code { background: #1d1d1d; padding: 1px 6px; border-radius: 6px; direction: ltr; display: inline-block; }
.muted { color: var(--muted); margin: 2px 0 0; font-size: 13px; }

/* brand */
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 4px 18px; }
.brand b { display: block; font-size: 17px; letter-spacing: .3px; }
.brand small { color: var(--muted); font-size: 12px; }
.logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #000;
  background: linear-gradient(135deg, var(--orange2), var(--orange)); box-shadow: 0 6px 24px var(--glow); font-family: Arial, sans-serif; }
.brand.big .logo { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; }
.brand.big b { font-size: 22px; }

/* login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.login-card { width: 100%; max-width: 400px; background: linear-gradient(180deg, #141414, #0e0e0e); border: 1px solid var(--line); border-radius: 22px; padding: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(16,185,129,.06); }
.login-card form { display: grid; gap: 14px; }
.hint { color: var(--muted); font-size: 12.5px; line-height: 1.8; margin: 16px 0 0; overflow-wrap: anywhere; }
.error { color: var(--red); min-height: 1.2em; margin: 0; font-size: 13px; }

/* layout */
.app { display: grid; grid-template-columns: 290px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 16px 12px 12px; background: #0e0f12; border-left: 1px solid #1d1e22; display: flex; flex-direction: column; gap: 10px; }
.side-head .brand { padding: 2px 4px 4px; }
#nav { display: block; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: #2a2b30 transparent; }
#nav::-webkit-scrollbar { width: 4px; } #nav::-webkit-scrollbar-thumb { background: #2a2b30; border-radius: 4px; }
.nav-group { margin-bottom: 10px; }
.nav-title { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; font-size: 12.5px; font-weight: 700; color: #8b8d96; }
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 8px var(--tint); flex: none; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: 2px 0; border-radius: 14px; color: #d4d5db; cursor: pointer; border: 1px solid transparent; font-size: 14.5px; background: none; font-family: inherit; text-align: right; transition: background .15s, color .15s; }
.nav-item:hover { background: #16171b; color: #fff; }
.nav-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 13%, #0e0f12); border: 1px solid color-mix(in srgb, var(--tint) 18%, transparent); transition: .15s; }
.nav-ic svg, .svg svg { width: 20px; height: 20px; display: block; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.active { background: #1a1b20; color: #fff; font-weight: 700; border-color: #24262c; }
.nav-item.active .nav-ic { background: var(--tint); color: #fff; border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--tint) 45%, transparent); }
.guild-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #15161a; border: 1px solid #23252b; }
.guild-card:hover { border-color: #33363d; }
.g-pic { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--orange2), var(--orange)); color: #000; font-weight: 900; font-size: 18px; }
.g-pic img { width: 100%; height: 100%; object-fit: cover; }
.g-info { flex: 1; min-width: 0; } .g-info b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-info small { color: var(--muted); font-size: 12px; }
.g-chev { color: var(--muted); flex: none; } .g-chev svg { width: 18px; height: 18px; display: block; }
.guild-overlay { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0 !important; }
.owner-card { display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid #1d1e22; }
.owner-card .av { width: 40px; height: 40px; margin: 0; }
.o-info { flex: 1; min-width: 0; } .o-info b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .o-info small { color: var(--muted); font-size: 12px; }
.main { padding: 22px 28px 110px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 24px; font-weight: 800; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.pill { padding: 6px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.pill.on { color: var(--green); border-color: rgba(46,204,113,.35); }
.pill.off { color: var(--red); border-color: rgba(255,77,77,.35); }
.pill.demo { color: var(--orange); border-color: rgba(16,185,129,.4); }
.banner { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid rgba(16,185,129,.35); background: rgba(16,185,129,.07); line-height: 1.8; font-size: 14px; white-space: pre-line; }
.banner.err { border-color: rgba(255,77,77,.4); background: rgba(255,77,77,.07); }

/* cards */
.content { display: grid; gap: 18px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid > *, .stats > *, .content > * { min-width: 0; }
.card { background: linear-gradient(180deg, var(--panel), #0d0d0d); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.card h3::before { content: ""; width: 4px; height: 16px; background: var(--orange); border-radius: 4px; }
.card > p.muted { margin-bottom: 14px; }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 110px; height: 110px; border-radius: 50%; background: var(--glow); filter: blur(10px); }
.stat small { color: var(--muted); font-size: 13px; }
.stat b { display: block; font-size: 26px; margin-top: 4px; color: #fff; }

/* forms */
.fields { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13.5px; color: #d9d9d9; font-weight: 600; }
.field > small { color: var(--muted); font-size: 12px; }
input, select, textarea { width: 100%; background: #0b0b0b; border: 1px solid #2a2a2a; color: var(--text); border-radius: 11px; padding: 10px 12px; font-family: inherit; font-size: 14px; outline: none; transition: border .15s, box-shadow .15s; }
textarea { min-height: 90px; resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--glow); }
label { display: grid; gap: 6px; font-size: 13.5px; color: #d9d9d9; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 12px; }
.toggle-row div span { display: block; font-size: 14px; font-weight: 600; }
.toggle-row div small { color: var(--muted); font-size: 12px; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: #2a2a2a; border-radius: 99px; transition: .2s; cursor: pointer; }
.switch i::before { content: ""; position: absolute; width: 20px; height: 20px; top: 3px; right: 3px; background: #888; border-radius: 50%; transition: .2s; }
.switch input:checked + i { background: var(--orange); }
.switch input:checked + i::before { right: 23px; background: #000; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #1a1a1a; border: 1px solid #2c2c2c; font-size: 13px; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0; line-height: 1; }
.chip button:hover { color: var(--red); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.row > .btn { flex: none; min-width: 0; }

/* buttons */
.btn { border: 1px solid #2c2c2c; background: #191919; color: #fff; padding: 10px 16px; border-radius: 11px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; transition: .15s; }
.btn:hover { border-color: #3a3a3a; background: #202020; }
.btn.primary { background: linear-gradient(135deg, var(--orange2), var(--orange)); color: #000; border-color: transparent; box-shadow: 0 6px 20px var(--glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red); background: transparent; border-color: rgba(255,77,77,.3); }
.btn.sm { padding: 6px 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* list editor */
.list { display: grid; gap: 10px; }
.item { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #0c0c0c; border: 1px solid #1f1f1f; }
.item .row > input.emoji { flex: none; width: 64px; min-width: 0; text-align: center; }
.empty { color: var(--muted); text-align: center; padding: 18px; border: 1px dashed #2a2a2a; border-radius: 12px; font-size: 13.5px; }

/* table */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 10px 8px; border-bottom: 1px solid #1f1f1f; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
td .av { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-left: 8px; background: #222; }
.rank { color: var(--orange); font-weight: 800; }

/* save bar & toast */
.savebar { position: fixed; bottom: 18px; left: 28px; right: 318px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
  background: rgba(20,20,20,.95); backdrop-filter: blur(8px); border: 1px solid rgba(16,185,129,.4); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); z-index: 5; }
.savebar div { display: flex; gap: 8px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); opacity: 0; transition: .25s; background: #1b1b1b; border: 1px solid #333; padding: 10px 18px; border-radius: 12px; z-index: 10; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: rgba(46,204,113,.5); }
.toast.err { border-color: rgba(255,77,77,.5); }
.preview { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); margin-top: 10px; }
.vars { color: var(--muted); font-size: 12.5px; line-height: 2; }
.vars code { margin: 0 2px; }

/* mobile chrome (hidden on desktop) */
.mobilebar, .nav-overlay, .icon-btn.nav-close { display: none; }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.icon-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid #2c2c2c; background: #151515; color: #fff;
  font-size: 18px; cursor: pointer; font-family: inherit; padding: 0; }
.icon-btn:active { background: #202020; }
.burger { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--orange); transition: .2s; }
.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.brand.mini { padding: 0; gap: 10px; }
.brand.mini .logo { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.brand.mini b { font-size: 16px; }

@media (max-width: 899px) {
  html, body { font-size: 16px; }
  .app { display: block; min-height: 100vh; min-height: 100dvh; }

  /* sticky top bar */
  .mobilebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30;
    margin: 0 -14px 14px; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: rgba(8,8,8,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line); }

  /* slide-in drawer from the right (RTL) */
  .sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(86vw, 320px); height: 100%; height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); background: #0c0c0c; border-left: 1px solid var(--line);
    transform: translateX(105%); transition: transform .25s ease, visibility 0s linear .25s; box-shadow: none; visibility: hidden; }
  .nav-open .sidebar { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; box-shadow: -20px 0 60px rgba(0,0,0,.7); }
  .icon-btn.nav-close { display: grid; }
  .nav-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  #nav { overflow-y: auto; overscroll-behavior: contain; }
  .nav-item { min-height: 50px; font-size: 16px; padding: 6px 8px; }
  .nav-ic { width: 40px; height: 40px; }

  /* page */
  .main { padding: 0 14px calc(120px + env(safe-area-inset-bottom)); }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; }
  .topbar h1 { font-size: 22px; }
  .top-actions { width: 100%; }
  .top-actions select { flex: 1; min-width: 0; }
  .pill { max-width: 50%; overflow: hidden; text-overflow: ellipsis; padding: 10px 12px; }
  .content, .grid, .stats { gap: 14px; }
  .grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 16px; }
  .stat { padding: 14px 16px; }
  .stat b { font-size: 22px; overflow-wrap: anywhere; }
  .muted { font-size: 14px; }
  .banner { font-size: 14px; }

  /* forms & touch targets */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 110px; }
  label, .field > span { font-size: 15px; }
  .btn { min-height: 44px; font-size: 16px; }
  .btn.sm { min-height: 44px; font-size: 16px; padding: 8px 14px; }
  .card .btn, .list > .btn, .login-card .btn { width: 100%; }
  .card a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .toggle-row { min-height: 52px; }
  .toggle-row div span { font-size: 15px; }
  .chip { padding: 6px 12px; font-size: 14px; }
  .chip button { min-width: 28px; min-height: 28px; font-size: 18px; }
  .row > * { flex: 1 1 100%; min-width: 0; }
  .item .row > input.emoji { flex: 0 0 64px; }
  .item .row > input.emoji + input { flex: 1 1 0; }
  .row > .btn, .item .row > .btn { flex: 1 1 100%; }
  .row > .toggle-row { flex: 1 1 100%; }

  /* tables */
  table { font-size: 15px; }
  th, td { padding: 12px 8px; }
  .wide-table { min-width: 520px; }
  td { white-space: nowrap; }

  /* save bar & toast */
  .savebar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; text-align: center; padding: 12px; }
  .savebar div { display: grid; grid-template-columns: 1fr 2fr; }
  .toast { max-width: calc(100vw - 32px); width: max-content; text-align: center; bottom: calc(24px + env(safe-area-inset-bottom)); }

  /* login */
  .login-card { padding: 22px 18px; border-radius: 20px; }
  .brand.big b { font-size: 20px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .sidebar, .nav-overlay, .burger span { transition: none; }
}

/* ===== v2 components ===== */
.svg { display: inline-grid; place-items: center; }
.icon-btn.sm { width: 36px; height: 36px; border-radius: 10px; } .icon-btn.sm svg { width: 18px; height: 18px; display: block; }
.title-wrap { min-width: 0; }
.crumb { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.topbar h1 { display: flex; align-items: center; gap: 10px; }
.title-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: var(--tint, var(--orange)); box-shadow: 0 6px 18px color-mix(in srgb, var(--tint, #3ad49b) 40%, transparent); }
.title-ic svg { width: 20px; height: 20px; display: block; }
.span-all { grid-column: 1 / -1; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h3 { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #1d1d1d; border: 1px solid #2c2c2c; color: #ddd; margin-inline-start: 6px; white-space: nowrap; vertical-align: middle; }
.badge.on { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.08); }
.badge.off { color: #f87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.badge.warn { color: #fbbf24; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
td > .badge:first-child, .row-badges .badge { margin-inline-start: 0; }
.row-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.item .item .item-head b { font-size: 13px; }
input.emoji { text-align: center; }
input.color { height: 44px; padding: 4px; }
.sep { height: 1px; background: #1f1f1f; margin: 4px 0; }
.av { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-inline-end: 8px; background: #222; object-fit: cover; flex: none; }
.av.ph { display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; color: #000; background: linear-gradient(135deg, var(--orange2), var(--orange)); }
td.wrap { white-space: normal; min-width: 160px; max-width: 360px; line-height: 1.6; }
.stars { color: #fbbf24; letter-spacing: 1px; white-space: nowrap; }
/* overview systems */
.sys-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 6px; }
.sys { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #0c0c0c; border: 1px solid #1f1f1f; color: #bbb; font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: right; }
.sys i { width: 8px; height: 8px; border-radius: 50%; background: #444; flex: none; }
.sys.on { color: #fff; border-color: rgba(74,222,128,.25); } .sys.on i { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.sys:hover { border-color: #333; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mini-stats div { background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 12px; padding: 8px 10px; } .mini-stats small { color: var(--muted); font-size: 12px; display: block; } .mini-stats b { font-size: 17px; }
/* charts */
.chart { width: 100%; } .chart svg { width: 100%; height: auto; display: block; }
.chart-card { background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 14px; padding: 14px; min-width: 0; }
.chart-card h4 { margin: 0 0 6px; font-size: 14.5px; }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; }
.bar { height: 8px; border-radius: 99px; background: #1e1e1e; overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange2)); }
/* tabs */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; scrollbar-width: none; }
.tab { flex: none; padding: 7px 12px; border-radius: 999px; background: #121212; border: 1px solid #262626; color: #ccc; font-family: inherit; font-size: 13px; cursor: pointer; }
.tab small { color: var(--muted); } .tab.active { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.45); color: #fff; }
/* members */
.member-list { display: grid; gap: 8px; }
.member { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #0c0c0c; border: 1px solid #1f1f1f; }
.member > .av { width: 42px; height: 42px; margin: 0; }
.m-info { flex: 1; min-width: 0; display: grid; gap: 2px; } .m-info b { font-size: 14.5px; } .m-info small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-roles { color: #b9b9b9 !important; }
.m-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* performance */
.perf-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-top: 14px; }
.perf { background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 16px; padding: 14px; display: grid; gap: 8px; min-width: 0; }
.perf-head { display: flex; align-items: center; gap: 10px; } .perf-head .av { width: 44px; height: 44px; margin: 0; } .perf-head > div { flex: 1; min-width: 0; } .perf-head b { display: block; } .perf-head small { color: var(--muted); font-size: 12px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c); white-space: nowrap; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.flag { font-size: 12.5px; color: #fbbf24; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); border-radius: 10px; padding: 6px 10px; }
.lvl { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; } .lvl span { font-weight: 700; } .lvl small { color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.metrics div { background: #111; border: 1px solid #1d1d1d; border-radius: 10px; padding: 6px 8px; min-width: 0; } .metrics small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metrics b { font-size: 15px; }
/* ratings */
.rating-big { display: grid; place-items: center; gap: 2px; padding: 16px; background: #0c0c0c; border: 1px solid #1f1f1f; border-radius: 16px; }
.rating-big b { font-size: 44px; line-height: 1; color: #fbbf24; } .rating-big .stars { font-size: 20px; } .rating-big small { color: var(--muted); }
.dist { display: grid; gap: 8px; align-content: center; } .dist-row { display: grid; grid-template-columns: 44px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; } .dist-row small { color: var(--muted); }
/* roster */
.roster { display: grid; gap: 12px; } .roster-role { padding: 12px; border-radius: 14px; background: #0c0c0c; border: 1px solid #1f1f1f; display: grid; gap: 8px; }
.roster-head { display: flex; align-items: center; gap: 8px; } .roster-head .dot { width: 10px; height: 10px; border-radius: 50%; } .roster-head small { color: var(--muted); }
.chip .av { width: 22px; height: 22px; margin: 0; font-size: 11px; }
/* discord preview */
.dc-msg { background: #313338; border-radius: 12px; padding: 14px; display: grid; gap: 8px; color: #dbdee1; }
.dc-author { display: flex; align-items: center; gap: 8px; } .logo.xs { width: 28px; height: 28px; font-size: 14px; border-radius: 50%; box-shadow: none; }
.bot-tag { background: #5865f2; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.dc-content { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 4px; padding: 0 3px; }
.dc-embed { background: #2b2d31; border-inline-start: 4px solid var(--orange); border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; color: #dbdee1; overflow-wrap: anywhere; }
.dc-embed b { color: #fff; } .dc-embed p { margin: 0; white-space: pre-wrap; line-height: 1.7; font-size: 14px; } .dc-embed small { color: #949ba4; font-size: 12px; }
.dc-embed img { max-width: 100%; border-radius: 6px; }
.dc-field b { font-size: 13px; } .dc-field p { font-size: 13px; }
.dc-btn { justify-self: start; background: #4e5058; color: #fff; padding: 6px 14px; border-radius: 6px; font-size: 14px; }
.card .dc-embed { margin-top: 8px; }

@media (max-width: 899px) {
  .guild-card { padding: 10px 12px; }
  .member { flex-wrap: wrap; }
  .m-actions { width: 100%; justify-content: stretch; display: grid; grid-template-columns: repeat(4, 1fr); }
  .m-actions .btn { width: 100%; padding: 6px 4px; font-size: 14px; }
  .card .m-actions .btn, .card .row-badges .btn, td .btn { width: auto; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .title-ic { width: 32px; height: 32px; }
  .mini-stats b { font-size: 15px; }
  .sys-grid { grid-template-columns: repeat(2, 1fr); }
  .card .card-head .icon-btn { width: 36px; min-height: 36px; }
  .item-head .btn.sm { width: auto; flex: none; min-height: 36px; padding: 4px 12px; font-size: 14px; }
}

/* ===== v3: P.R.M premium components ===== */
/* section head */
.sec-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(16,185,129,.16), rgba(16,185,129,.02) 55%), #0d0d0d; border: 1px solid rgba(16,185,129,.28); }
.sec-head::after { content: "RAKKAZ"; position: absolute; inset-inline-end: 14px; bottom: -14px; font: 900 64px/1 Arial, sans-serif; color: rgba(16,185,129,.06); letter-spacing: 2px; pointer-events: none; }
.sec-head h2 { margin: 0; font-size: 18px; } .sec-head p { margin: 2px 0 0; color: #bdbdbd; font-size: 13px; line-height: 1.6; }
.sec-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: #000; border: 1px solid rgba(16,185,129,.45); box-shadow: 0 0 24px var(--glow) inset; }
/* feature card */
.fc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fc-head > div { min-width: 0; } .fc-head .muted { margin-bottom: 0; }
.fcard { transition: border-color .2s; } .fcard:not(.off) { border-color: rgba(16,185,129,.3); }
.fcard.off .fc-body { opacity: .38; filter: grayscale(.6); pointer-events: none; }
.fcard.off .fc-body:empty { display: none; }
.fc-body:empty { display: none; }
.tip-card { background: linear-gradient(135deg, rgba(16,185,129,.1), transparent 70%), #0d0d0d; }
/* tooltip */
.tip { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 6px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #000; background: var(--orange); cursor: help; position: relative; vertical-align: middle; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); inset-inline-start: -10px; z-index: 30; width: max-content; max-width: 240px; white-space: normal;
  background: #1b1b1b; color: #eee; border: 1px solid rgba(16,185,129,.45); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 500; line-height: 1.6; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
/* picker */
.pk { position: relative; }
.pk-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; padding-inline-end: 34px; background: #0b0b0b; border: 1px solid #2a2a2a; border-radius: 11px; cursor: pointer; position: relative; transition: border .15s, box-shadow .15s; }
.pk-control:hover { border-color: #3a3a3a; }
.pk.open .pk-control, .pk-control:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--glow); outline: none; }
.pk-chev { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); transition: transform .2s; } .pk-chev svg { width: 16px; height: 16px; display: block; }
.pk.open .pk-chev { transform: translateY(-50%) rotate(180deg); color: var(--orange); }
.pk-ph { color: #777; font-size: 14px; }
.pk-val { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; } .chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pk-clear { position: absolute; inset-inline-end: 30px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.pk-clear:hover { color: var(--red); }
.pk-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.pk-ch { width: 18px; text-align: center; color: #9a9a9a; font-weight: 800; flex: none; font-size: 14px; }
.pk .chip { padding: 3px 6px 3px 10px; background: #171717; border-color: #2e2e2e; }
.pk .chip .av, .pk-item .av, .pk-val .av { width: 20px; height: 20px; margin: 0; font-size: 10px; }
.pk-pop { display: none; position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 25; background: #121212; border: 1px solid rgba(16,185,129,.4); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.7); overflow: hidden; }
.pk.open .pk-pop { display: block; animation: pkIn .14s ease-out; }
@keyframes pkIn { from { opacity: 0; transform: translateY(-4px); } }
.pk-sbox { padding: 8px; border-bottom: 1px solid #222; } .pk-search { min-height: 40px; }
.pk-list { max-height: 260px; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.pk-group { font-size: 11px; font-weight: 800; color: var(--muted); padding: 8px 10px 4px; letter-spacing: .3px; }
.pk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; min-height: 40px; }
.pk-item:hover, .pk-item.active { background: #1d1d1d; } .pk-item.sel { background: rgba(16,185,129,.12); }
.pk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-name small { color: var(--muted); }
.pk-check { color: var(--orange); font-weight: 900; width: 16px; text-align: center; }
.pk-empty { color: var(--muted); padding: 14px; text-align: center; font-size: 13px; }
.pk-hint { font-size: 11.5px; color: #777; padding: 6px 12px; border-top: 1px solid #1d1d1d; }
.row.pub > .pk { flex: 1 1 200px; }
/* segmented */
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #0b0b0b; border: 1px solid #242424; border-radius: 12px; }
.seg button { flex: 1 1 auto; border: 0; background: transparent; color: #bbb; font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: .15s; }
.seg button:hover { color: #fff; background: #161616; }
.seg button.on { background: linear-gradient(135deg, var(--orange2), var(--orange)); color: #000; box-shadow: 0 4px 14px var(--glow); }
/* stepper rows (points) */
.pt-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: #0c0c0c; border: 1px solid #1d1d1d; }
.pt-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 18px; border-radius: 10px; background: #161616; }
.pt-info { flex: 1; min-width: 0; } .pt-info b { display: block; font-size: 14px; } .pt-info small { color: var(--muted); font-size: 11.5px; line-height: 1.5; display: block; }
.stepper { display: flex; align-items: center; flex: none; background: #000; border: 1px solid #2a2a2a; border-radius: 11px; overflow: hidden; }
.stepper button { width: 34px; height: 36px; border: 0; background: #161616; color: var(--orange); font-size: 18px; font-weight: 900; cursor: pointer; font-family: inherit; }
.stepper button:active { background: #232323; }
.stepper input { width: 54px; border: 0; border-radius: 0; text-align: center; padding: 6px 2px; background: transparent; font-weight: 800; font-size: 15px; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stepper input:focus { box-shadow: none; }
/* unit inputs, color */
.unit-in { display: flex; align-items: stretch; } .unit-in input { border-start-end-radius: 0; border-end-end-radius: 0; min-width: 0; }
.unit-in span { display: grid; place-items: center; padding: 0 12px; background: #151515; border: 1px solid #2a2a2a; border-inline-start: 0; border-start-end-radius: 11px; border-end-end-radius: 11px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.color-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .color-in input.color { width: 48px; flex: none; } .color-in input.hex { width: 104px; flex: none; font-family: monospace; }
.color-in .sw { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #000; box-shadow: 0 0 0 1px #333; cursor: pointer; padding: 0; flex: none; }
/* var chips */
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .var-chips > small { color: #777; font-size: 11.5px; width: 100%; }
.var { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 9px; background: #121212; border: 1px dashed rgba(16,185,129,.45); color: #ddd; cursor: pointer; font-family: inherit; font-size: 12px; }
.var code { background: none; padding: 0; color: var(--orange); font-size: 12px; } .var span { color: var(--muted); }
.var:hover { background: rgba(16,185,129,.12); border-style: solid; }
/* embed builder */
.eb-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.eb-prev { position: sticky; top: 14px; background: #1e1f22; border: 1px solid #2b2d31; border-radius: 14px; overflow: hidden; }
.eb-prev-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: #b5bac1; background: #2b2d31; font-weight: 700; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #23a55a; box-shadow: 0 0 8px #23a55a; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.eb-prev-body { padding: 10px; } .eb-prev .dc-msg { border-radius: 10px; }
.dc-embed { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .dc-e-body { display: grid; gap: 6px; min-width: 0; }
.dc-e-title { font-size: 15px; } .dc-e-thumb { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; }
.dc-e-img { width: 100%; max-height: 260px; object-fit: cover; }
.dc-time { color: #949ba4; font-size: 11px; } .dc-embed code { background: #1e1f22; }
.btn.xs { padding: 4px 10px; font-size: 12px; border-radius: 9px; }
/* list items (collapsible) */
.item { transition: border-color .15s; } .item:not(.collapsed) { border-color: #2a2a2a; }
.item.collapsed .item-head { cursor: pointer; } .item.collapsed:hover { border-color: rgba(16,185,129,.35); }
.item-head { cursor: default; } .item-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.item-tog { color: var(--orange); font-size: 14px; width: 18px; text-align: center; }
.add-btn { border-style: dashed; border-color: rgba(16,185,129,.45); color: var(--orange); background: transparent; }
.add-btn:hover { background: rgba(16,185,129,.08); }
.cat-head { display: inline-flex; align-items: center; gap: 8px; } .cat-head > i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
details.adv { border: 1px solid #1f1f1f; border-radius: 12px; padding: 10px 12px; background: #090909; } details.adv[open] { display: grid; gap: 12px; }
details.adv summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: #ccc; }
.resp { display: flex; gap: 8px; align-items: flex-start; } .resp textarea { min-height: 54px; }
.chips.pickable .chip { cursor: pointer; font-family: inherit; color: #ccc; } .chips.pickable .chip.on { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.6); color: #fff; }
.legend-list { display: grid; gap: 8px; } .legend-list div { display: grid; gap: 2px; padding: 8px 10px; background: #0c0c0c; border: 1px solid #1d1d1d; border-radius: 10px; } .legend-list small { color: var(--muted); font-size: 12px; }
/* empty state */
.empty { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; background: radial-gradient(240px 90px at 50% 0, rgba(16,185,129,.08), transparent); }
.empty-ic { font-size: 28px; filter: drop-shadow(0 0 12px var(--glow)); }
/* points page */
.pt-stats .stat b { font-size: 24px; }
.pt-board { display: grid; gap: 8px; margin-top: 12px; }
.pt-member { border-radius: 14px; background: #0c0c0c; border: 1px solid #1f1f1f; overflow: hidden; }
.pt-member:first-child { border-color: rgba(255,196,0,.35); background: linear-gradient(90deg, rgba(255,196,0,.06), transparent 60%), #0c0c0c; }
.pt-line { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: 0; color: inherit; font-family: inherit; text-align: right; cursor: pointer; }
.pt-line .av { width: 38px; height: 38px; margin: 0; }
.pt-rank { width: 28px; text-align: center; font-weight: 900; color: var(--orange); font-size: 16px; flex: none; }
.pt-name { flex: 1; min-width: 0; display: grid; gap: 3px; } .pt-name b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-name small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-name .bar { height: 5px; }
.pt-val { font-weight: 900; font-size: 18px; color: #fff; white-space: nowrap; } .pt-val small { color: #fbbf24; }
.pt-ctl { padding: 0 12px 12px; display: grid; gap: 10px; border-top: 1px dashed #222; padding-top: 12px; }
.adj { display: grid; gap: 8px; } .adj .row > input { flex: 2 1 160px; } .adj .unit-in { flex: 1 1 130px; }
.adj-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.manual { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #0a0a0a; border: 1px dashed rgba(16,185,129,.35); margin-top: 6px; } .manual > b { font-size: 14px; }
.ph-list { display: grid; gap: 6px; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #0c0c0c; border: 1px solid #1c1c1c; }
.ph-row > div { flex: 1; min-width: 0; } .ph-row b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-row small { color: var(--muted); font-size: 11.5px; }
.ph-d { min-width: 44px; text-align: center; font-weight: 900; padding: 4px 6px; border-radius: 9px; background: #171717; font-size: 13px; }
.ph-row.up .ph-d { color: #4ade80; background: rgba(74,222,128,.1); } .ph-row.down .ph-d { color: #f87171; background: rgba(248,113,113,.1); }
.ph-t { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ladder-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; margin-top: 14px; }
.ladder-grid + .ladder-grid { padding-top: 16px; border-top: 1px solid #1d1d1d; }
.ladder-viz { display: flex; flex-direction: column-reverse; gap: 6px; margin-top: 8px; }
.rung { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #0c0c0c; border: 1px solid #1f1f1f; position: relative; }
.rung:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 24px; top: -7px; width: 2px; height: 7px; background: rgba(16,185,129,.5); }
.rung-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: #000; border: 1px solid rgba(16,185,129,.5); color: var(--orange); flex: none; }
.rung i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .rung b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rung-p { font-weight: 800; color: #fbbf24; white-space: nowrap; font-size: 13px; }
.ladder-viz .rung:first-child { border-color: rgba(16,185,129,.2); } .ladder-viz .rung:last-child { border-color: rgba(255,196,0,.45); box-shadow: 0 0 20px rgba(255,196,0,.08); }

@media (max-width: 899px) {
  .sec-head { padding: 14px; gap: 12px; } .sec-head h2 { font-size: 17px; } .sec-ic { width: 42px; height: 42px; font-size: 21px; }
  .eb-grid, .ladder-grid { grid-template-columns: 1fr; }
  .eb-prev { position: static; }
  /* override global mobile full-width buttons for compact controls */
  .card .seg button, .card .stepper button, .card .var, .card .pk-clear, .card .btn.xs, .card .chips .chip { width: auto; min-height: 0; }
  .card .color-in .sw { width: 30px; height: 30px; min-height: 0; }
  .card .seg button { min-height: 40px; font-size: 14px; }
  .card .stepper button { width: 40px; height: 42px; }
  .stepper input { width: 52px; font-size: 16px; }
  .card .btn.xs { min-height: 34px; font-size: 13px; padding: 4px 10px; }
  .card .pt-line { width: 100%; }
  .pk-item { min-height: 44px; font-size: 15px; }
  .pk-list { max-height: 50vh; }
  .pt-row { padding: 8px; gap: 10px; } .pt-ic { width: 32px; height: 32px; font-size: 16px; }
  .adj-btns { grid-template-columns: repeat(2, 1fr); } .adj-btns .btn { min-height: 42px; }
  .card .ph-row .btn, .card .item-actions .btn { width: auto; }
  .color-in input.hex { flex: 1 1 90px; }
  .tip:hover::after, .tip:focus::after { max-width: 200px; inset-inline-start: auto; inset-inline-end: -60px; }
  .pt-val { font-size: 16px; }
  .resp .icon-btn.sm { width: 36px; }
}
@media (max-width: 899px) {
  .var span { display: none; }
  .var { padding: 5px 9px; } .var code { font-size: 13px; }
  .var-chips { gap: 5px; }
}

/* ===== v3.1: معاينة خاص ديسكورد ===== */
.dm-wrap { display: grid; gap: 10px; }
.dm-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: #e6e6e6; }
.dm-label small { color: #949ba4; font-size: 12px; }
.dm-msg { display: flex; gap: 14px; align-items: flex-start; background: #2b2d31; border-radius: 14px; padding: 16px 14px; color: #dbdee1; font-family: "Cairo", "gg sans", "Noto Sans", sans-serif; text-align: left; min-width: 0; }
.dm-av { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.dm-av.logo { font-size: 18px; box-shadow: none; }
.dm-body { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.dm-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dm-head b { color: #f2f3f5; font-size: 15.5px; font-weight: 700; }
.dm-app { background: #5865f2; color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 4px; padding: 1px 5px; line-height: 1.4; font-family: Arial, sans-serif; }
.dm-head small { color: #949ba4; font-size: 11.5px; }
.dm-content { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; width: 100%; }
.dm-content.dm-empty { color: #80848e; font-style: italic; }
.dm-embed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; max-width: 520px; background: #232428; border-radius: 6px; border-left: 4px solid var(--bar, #3ad49b); padding: 10px 14px 12px 12px; margin-top: 4px; box-sizing: border-box; }
.dm-e-main { display: grid; gap: 6px; min-width: 0; align-content: start; }
.dm-e-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #f2f3f5; }
.dm-e-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.dm-e-title { font-weight: 800; color: #f2f3f5; font-size: 15.5px; overflow-wrap: anywhere; }
.dm-e-desc { font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: #dbdee1; }
.dm-quote { border-left: 4px solid #4e5058; padding: 2px 10px; margin: 4px 0; border-radius: 2px; color: #dbdee1; }
.dm-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.dm-field { flex: 1 1 100%; min-width: 0; display: grid; gap: 2px; font-size: 13.5px; }
.dm-field.inl { flex: 1 1 28%; min-width: 110px; }
.dm-field b { color: #f2f3f5; font-size: 13.5px; }
.dm-e-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 6px; margin-top: 6px; }
.dm-e-thumb { width: 80px; height: 80px; border-radius: 6px; object-fit: cover; }
.dm-e-foot { font-size: 12px; color: #949ba4; margin-top: 4px; }
.dm-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dm-btn { background: #4e5058; color: #fff; border-radius: 8px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.dm-msg .mention { background: rgba(88,101,242,.3); color: #c9cdfb; }
.dm-msg code { background: #1e1f22; }
.eb-dm .eb-prev { background: #1e1f22; }
.eb-off .eb-form { opacity: .45; pointer-events: none; }
.eb-fld { border: 1px solid #262626; border-radius: 12px; padding: 12px; display: grid; gap: 10px; margin-top: 8px; background: #0d0d0d; }
.dm-inline, .stk-prev { margin-top: 6px; min-width: 0; flex: 1 1 100%; }
.ss-list { display: grid; gap: 6px; margin-bottom: 12px; }
.ss-ch { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #2b2d31; border-radius: 8px; color: #b5bac1; font-size: 14px; min-width: 0; }
.ss-ch span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-ch .svg svg { width: 18px; height: 18px; }

/* ===== الرسالة الجماعية ===== */
.bc-target { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.3); }
.bc-target .bc-count { font-size: 20px; color: var(--orange2); }
.bc-target small { flex: 1 1 100%; }
.bc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 12px 0; }
.bc-stat { background: #0d0d0d; border: 1px solid #242424; border-radius: 12px; padding: 10px; text-align: center; display: grid; gap: 2px; border-top: 3px solid var(--c, #3a3a3a); }
.bc-stat b { font-size: 20px; color: var(--c, #fff); }
.bc-stat small { color: var(--muted); font-size: 12px; }
.bc-prog-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bc-pct { text-align: center; font-weight: 800; color: var(--orange2); margin-top: 6px; }
.bc-ctl { gap: 8px; }
.bc-confirm { display: grid; gap: 4px; text-align: center; padding: 14px; border-radius: 14px; background: #0d0d0d; border: 1px solid #262626; }
.bc-confirm b { font-size: 28px; color: var(--orange2); }
.chk { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--orange); }
ul.clean { margin: 8px 0 12px; padding-inline-start: 18px; line-height: 1.9; color: #d0d0d0; font-size: 14px; }

/* ===== نافذة ===== */
.modal-ov { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 460px; max-height: calc(100dvh - 32px); overflow-y: auto; background: linear-gradient(180deg, #161616, #0e0e0e); border: 1px solid #2a2a2a; border-radius: 20px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(16,185,129,.08); }
.modal h3 { margin: 0; }
.modal .banner { margin: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ===== الأمان ===== */
.sec-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sec-pills .badge { margin: 0; font-size: 13px; padding: 4px 12px; white-space: normal; }
.pw-meter { display: grid; gap: 6px; }
.pw-meter .bar i { transition: width .2s, background .2s; }
td.ua { color: var(--muted); font-size: 12.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-in { font-size: 24px !important; letter-spacing: 8px; text-align: center; font-weight: 800; }
.login-step { display: grid; gap: 12px; }
.role-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-inline-end: 6px; }

@media (max-width: 899px) {
  .dm-msg { padding: 12px 10px; gap: 10px; }
  .dm-av { width: 34px; height: 34px; }
  .dm-embed { padding: 8px 10px 10px 10px; gap: 8px; }
  .dm-e-thumb { width: 60px; height: 60px; }
  .dm-field.inl { flex: 1 1 100%; }
  .modal { padding: 18px; }
  .modal-actions .btn { flex: 1 1 100%; width: 100%; }
  .card .bc-ctl .btn { flex: 1 1 100%; }
  .card .eb-fld .btn.xs { width: auto; justify-self: start; }
  .chk input { min-height: 0; }
}

/* ===================== v4: المنصة ===================== */
.btn.xs { padding: 4px 9px; font-size: 12px; border-radius: 9px; }
.btn.discord { display: flex; align-items: center; justify-content: center; gap: 10px; background: #5865F2; border-color: transparent; color: #fff; text-decoration: none; }
.btn.discord:hover { filter: brightness(1.08); background: #5865F2; }
.link { background: none; border: none; padding: 0; color: var(--orange2); font: inherit; cursor: pointer; text-align: start; }
.link:hover { text-decoration: underline; }
.mt { margin-top: 18px !important; }
.top-tools { margin-bottom: 12px; }

/* hubs */
.hub-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hub-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 11px; border: 1px solid #1f2024; background: #121317; color: #a2a4ad; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.hub-tab .hub-ic svg { width: 18px; height: 18px; display: block; }
.hub-tab:hover { color: #fff; border-color: #2c2d33; }
.hub-tab.active { color: var(--orange); border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.08); }
.nav-hub-title { padding: 8px 10px 0; font-size: 12px; color: var(--orange); font-weight: 800; letter-spacing: .2px; }
.nav-count { margin-inline-start: auto; min-width: 22px; height: 22px; border-radius: 99px; background: var(--orange); color: #000; font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; }
.bottom-tabs { display: none; }
#app.hidden ~ .bottom-tabs { display: none !important; }
.search-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 11px; background: #121212; border: 1px solid var(--line); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; min-width: 220px; }
.search-btn:hover { border-color: #3a3a3a; color: #fff; }
.search-btn kbd { margin-inline-start: auto; font-family: inherit; font-size: 11px; border: 1px solid #2c2c2c; border-radius: 6px; padding: 1px 6px; direction: ltr; }
.mobilebar #searchBtnM { display: grid; }

/* KPIs + home */
.kpis { margin-bottom: 18px; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.kpi { text-align: start; font: inherit; color: inherit; }
button.kpi { cursor: pointer; }
button.kpi:hover { border-color: #3a3a3a; }
.kpi b { font-size: 24px; }
.kpi-sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.kpi.good b { color: #4ade80; } .kpi.bad b { color: #f87171; } .kpi.warn b { color: #fbbf24; }
.home-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.span-2 { grid-column: span 2; }
.setup-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; border-color: rgba(16,185,129,.35); }
.setup-cta p { margin: 2px 0 0; }
.feed { display: grid; gap: 2px; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid #1a1a1a; }
.feed-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #171717; font-size: 15px; }
.feed-body { min-width: 0; display: grid; gap: 1px; }
.feed-body b { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.feed-body small { color: var(--muted); font-size: 12px; }
.feed-diff { margin: 0 40px 8px 0; font-size: 12.5px; }
.feed-diff summary { cursor: pointer; color: var(--orange2); }
.audit-why { display: block; margin: -4px 40px 6px 0; }
.toplist { display: grid; gap: 6px; }
.top-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #0d0d0d; border: 1px solid #1c1c1c; }
.top-row b { margin-inline-start: auto; color: var(--orange); }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }

/* wizard */
.wizard { max-width: 760px; }
.wz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wz-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; }
.wz-steps li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid #262626; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.wz-steps li em { font-style: normal; }
.wz-steps li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1d1d1d; font-size: 11px; font-weight: 800; }
.wz-steps li.done span { background: rgba(74,222,128,.15); color: #4ade80; }
.wz-steps li.cur { color: #fff; border-color: rgba(16,185,129,.5); }
.wz-steps li.cur span { background: var(--orange); color: #000; }
.wz-nav { margin-top: 16px; justify-content: flex-end; }

/* profile + timeline */
.profile-head { margin-bottom: 18px; display: grid; gap: 12px; }
.ph-top { display: flex; gap: 14px; align-items: center; }
.ph-top h2 { margin: 0; font-size: 20px; }
.ph-id { min-width: 0; }
.av.lg { width: 64px; height: 64px; font-size: 26px; border-radius: 18px; }
.kv { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.kv > div { background: #0d0d0d; border: 1px solid #1c1c1c; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.kv small { color: var(--muted); font-size: 12px; }
.kv span { overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: 15px; width: 2px; background: #1f1f1f; }
.timeline li { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.tl-dot { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #151515; border: 1px solid #2a2a2a; z-index: 1; font-size: 14px; }
.tl-case .tl-dot { border-color: rgba(16,185,129,.5); }
.tl-note .tl-dot { border-color: rgba(251,191,36,.5); }
.tl-body { min-width: 0; flex: 1; background: #0d0d0d; border: 1px solid #1c1c1c; border-radius: 12px; padding: 9px 12px; }
.tl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tl-body p { margin: 4px 0; font-size: 13.5px; color: #ddd; overflow-wrap: anywhere; }
.tl-body small { color: var(--muted); font-size: 12px; }
.note p { margin: 0; }

/* tables / filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.filters > input[type=search] { flex: 1 1 240px; }
.filters .field { flex: 1 1 160px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #141414; }
tr.struck td { opacity: .5; text-decoration: line-through; }
td.pos { color: #4ade80; font-weight: 800; } td.neg { color: #f87171; font-weight: 800; }
.ok-banner { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.warnb { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.06); }
.ok-line { color: #4ade80; margin: 4px 0; font-size: 13.5px; }
.warn-line { color: #fbbf24; margin: 4px 0; font-size: 13.5px; }
.fix { color: #f6e2ac; font-size: 13px; margin: 4px 0 0; }
.chk { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.chk input { width: 18px; height: 18px; min-height: 0; accent-color: var(--orange); }
.chip.crit { border-color: rgba(248,113,113,.45); color: #fca5a5; }

/* automation builder */
.rules { display: grid; gap: 10px; }
.rule { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #1f1f1f; border-radius: 14px; background: #0c0c0c; }
.rule.off { opacity: .6; }
.rule-main { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.rule-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(16,185,129,.1); font-size: 19px; }
.rule-txt { min-width: 0; display: grid; gap: 3px; }
.rule-flow { display: flex; flex-wrap: wrap; gap: 4px; }
.rule-flow .chip { font-size: 11.5px; padding: 2px 8px; }
.rule-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rb { display: grid; gap: 0; max-width: 820px; }
.rb-card { display: grid; gap: 10px; }
.rb-badge { width: 24px; height: 24px; border-radius: 8px; background: var(--orange); color: #000; display: inline-grid; place-items: center; font-size: 13px; font-weight: 900; }
.rb-card h3::before { display: none; }
.rb-arrow { text-align: center; color: var(--orange); font-size: 20px; line-height: 1; padding: 6px 0; }
.rb-triggers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rb-trig { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; border: 1px solid #262626; background: #111; color: #ddd; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rb-trig span { font-size: 22px; }
.rb-trig.on { border-color: var(--orange); background: rgba(16,185,129,.08); color: #fff; }
.rb-step { border: 1px solid #222; border-radius: 12px; background: #0b0b0b; padding: 10px; display: grid; gap: 8px; }
.rb-cond { border-inline-start: 3px solid #60a5fa; }
.rb-act { border-inline-start: 3px solid var(--orange); }
.rb-step-head { display: flex; gap: 8px; align-items: center; }
.rb-step-head select { flex: 1; min-width: 0; }
.rb-n { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #1d1d1d; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.rb-tools { display: flex; gap: 4px; }
.rb-fields { gap: 8px; }
.trace { border: 1px solid #262626; border-radius: 12px; padding: 12px; background: #0b0b0b; margin-top: 10px; }
.trace.st-ok, .trace.st-waiting { border-color: rgba(74,222,128,.35); }
.trace.st-error { border-color: rgba(248,113,113,.4); }
.trace-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.trace-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.trace-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 7px 9px; border-radius: 9px; background: #111; overflow-wrap: anywhere; }
.trace-list li > span { flex: none; font-weight: 900; }
.trace-list li.good > span { color: #4ade80; } .trace-list li.bad > span { color: #f87171; }

/* studio */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.tpl { display: grid; gap: 6px; text-align: start; padding: 14px; border-radius: 14px; border: 1px solid #222; border-top: 3px solid var(--c, var(--orange)); background: #0c0c0c; color: #fff; font: inherit; cursor: pointer; }
.tpl:hover { border-color: #333; border-top-color: var(--c, var(--orange)); }
.tpl-top { display: flex; gap: 4px; }
.tpl-top .badge { margin: 0; }

/* access matrix */
.grant { gap: 12px; }
.perm-matrix { display: grid; gap: 2px; font-size: 13.5px; }
.pm-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px 56px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.pm-row:nth-child(even) { background: #101010; }
.pm-row > :not(:first-child) { justify-self: center; }
.pm-row input { width: 20px; height: 20px; min-height: 0; accent-color: var(--orange); }
.pm-head { color: var(--muted); font-size: 12px; font-weight: 700; }

/* versions + diff */
.ver-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
.ver-sys { display: grid; gap: 6px; }
.ver-sys-btn { display: grid; gap: 1px; text-align: start; padding: 10px 12px; border-radius: 11px; border: 1px solid #222; background: #0d0d0d; color: #fff; font: inherit; cursor: pointer; }
.ver-sys-btn small { color: var(--muted); font-size: 12px; }
.ver-sys-btn.on { border-color: rgba(16,185,129,.5); background: rgba(16,185,129,.07); }
.ver-list { display: grid; gap: 6px; }
.ver-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; background: #0d0d0d; border: 1px solid #1c1c1c; }
.ver-item small { display: block; }
.filters.cmp select { flex: 1 1 200px; min-width: 0; }
.diff { display: grid; gap: 4px; }
.diff-row { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #0d0d0d; border: 1px solid #1c1c1c; }
.diff-k { font-size: 12px; justify-self: start; }
.diff-v { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.diff-from { color: #fca5a5; background: rgba(248,113,113,.08); padding: 2px 8px; border-radius: 6px; text-decoration: line-through; overflow-wrap: anywhere; max-width: 100%; }
.diff-to { color: #86efac; background: rgba(74,222,128,.08); padding: 2px 8px; border-radius: 6px; overflow-wrap: anywhere; max-width: 100%; }
.diff-arrow { color: var(--muted); }

/* approvals / appeals */
.apr p, .appeal p { margin: 2px 0; }
.apr-pending { border-color: rgba(251,191,36,.3); }
.item .card-head { margin: 0; }

/* health */
.sys-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.sys-card { border: 1px solid #222; border-radius: 13px; padding: 12px; background: #0c0c0c; display: grid; gap: 4px; align-content: start; }
.sys-card p { margin: 0; font-size: 13px; color: #cfcfcf; }
.sc-head { display: flex; align-items: center; gap: 8px; }
.sc-head .badge { margin-inline-start: auto; }
.sc-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
.st-ok .sc-dot { background: #4ade80; } .st-warn .sc-dot { background: #fbbf24; } .st-error .sc-dot { background: #f87171; }
.st-error { border-color: rgba(248,113,113,.35); } .st-warn { border-color: rgba(251,191,36,.3); } .st-off { opacity: .55; }
.chk-error { border-color: rgba(248,113,113,.35); } .chk-warn { border-color: rgba(251,191,36,.3); }
.chk-error p, .chk-warn p { margin: 0; }
.lab-prev { margin-top: 14px; }

/* quick search */
.qs-list { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; border: 1px solid #1f1f1f; background: #0d0d0d; color: #fff; font: inherit; text-align: start; cursor: pointer; }
.qs-item:hover { border-color: rgba(16,185,129,.4); }
.qs-item small { display: block; color: var(--muted); font-size: 12px; direction: ltr; text-align: end; }

@media (min-width: 900px) {
  .mobilebar #searchBtnM { display: none; }
}
@media (max-width: 1100px) { .span-2 { grid-column: auto; } .ver-grid { grid-template-columns: 1fr; } }
@media (max-width: 899px) {
  .search-btn { display: none; }
  .hub-tabs { display: none; }
  .bottom-tabs { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(10,10,10,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .nav-open .bottom-tabs { z-index: 55; }
  .bt-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; border: none; background: none; color: #8d8f97; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 4px 0; }
  .bt-tab .bt-ic svg { width: 22px; height: 22px; display: block; }
  .bt-tab.active { color: var(--orange); background: rgba(16,185,129,.08); }
  .main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .savebar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .sidebar { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi b { font-size: 20px; }
  .setup-cta { flex-direction: column; align-items: stretch; }
  .rule { flex-direction: column; align-items: stretch; }
  .rule-actions { justify-content: flex-start; }
  .rule-actions .btn { width: auto; }
  .rb-triggers { grid-template-columns: repeat(2, 1fr); }
  .rb-step-head .icon-btn { width: 36px; height: 36px; }
  .pm-row { grid-template-columns: minmax(0, 1fr) 44px 44px 44px; padding: 8px 4px; }
  .ph-acts .btn { flex: 1 1 40%; }
  .filters > * { flex: 1 1 100%; }
  .ver-item { flex-wrap: wrap; }
  .ver-item .btn { width: auto; }
  .card .btn.xs, .card .btn.sm { width: auto; }
  .card .row .btn, .card .fields > .btn { width: 100%; }
  .wz-nav { flex-direction: column-reverse; }
}
@media (max-width: 899px) {
  .ver-sys { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .ver-sys-btn { flex: none; min-width: 140px; }
}
@media (max-width: 899px) { .card-head { flex-wrap: wrap; } .card-head > .btn { width: 100%; } }

/* مركز التكتات — جوال وكمبيوتر */
.ticket-workspace {display:grid;gap:18px;min-width:0}
.ticket-intro,.ticket-row-head,.ticket-chat-head,.ticket-compose-foot {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ticket-intro h2 {margin:0 0 6px;font-size:23px}
.ticket-desk {display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px;align-items:start}
.ticket-sidebar,.ticket-chat {background:var(--panel);border:1px solid var(--line);border-radius:20px;min-width:0;overflow:hidden}
.ticket-filters {padding:16px;display:grid;gap:10px;border-bottom:1px solid var(--line)}
.ticket-filters input,.ticket-filters select,.ticket-compose textarea {width:100%;min-width:0;background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:12px;border-radius:12px;font:inherit}
.ticket-list {display:grid;gap:8px;padding:10px;max-height:650px;overflow-y:auto}
.ticket-row {display:grid;gap:8px;background:transparent;border:1px solid transparent;border-radius:14px;color:var(--text);padding:14px;text-align:start;font:inherit;cursor:pointer;overflow-wrap:anywhere}
.ticket-row small {display:block;color:var(--muted)}
.ticket-row:hover {background:var(--panel2)}
.ticket-row.selected {border-color:var(--orange);background:rgba(16,185,129,.1)}
.ticket-chat {display:flex;flex-direction:column;padding:20px;gap:12px}
.ticket-chat-head {align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px}
.ticket-chat h3,.ticket-chat-head p {margin:0 0 6px}
.ticket-actions {display:flex;gap:8px;flex-wrap:wrap}
.ticket-reason {background:var(--panel2);padding:12px;border-radius:12px;overflow-wrap:anywhere;margin:0}
.ticket-thread {height:440px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:6px;scrollbar-width:thin}
.ticket-bubble {max-width:92%;background:#261b12;border:1px solid #54311a;border-radius:14px;padding:14px;overflow-wrap:anywhere}
.ticket-bubble.member {background:#171a22;border-color:#2b303e;align-self:flex-start}
.ticket-bubble header {display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:12px}
.ticket-bubble time {color:var(--muted);font-size:11px}
.ticket-bubble p {white-space:pre-wrap;line-height:1.9;margin:7px 0}
.ticket-bubble blockquote {margin:8px 0;border-inline-start:3px solid var(--orange);padding-inline-start:12px}
.ticket-bubble a {display:block;overflow-wrap:anywhere}
.ticket-compose {display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.ticket-compose textarea {resize:vertical;min-height:96px;line-height:1.8}
.ticket-compose-foot small {flex:1;min-width:180px}
.ticket-workspace button:focus-visible,.ticket-workspace textarea:focus-visible,.ticket-workspace input:focus-visible,.ticket-workspace select:focus-visible {outline:2px solid var(--orange2);outline-offset:3px}
.ticket-workspace button:disabled,.ticket-workspace textarea:disabled {opacity:.5;cursor:not-allowed}
.ticket-workspace [hidden] {display:none!important}
@media(max-width:1000px){.ticket-desk{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:760px){.ticket-desk{grid-template-columns:1fr}.ticket-list{max-height:270px}.ticket-chat{padding:14px}.ticket-thread{height:400px;height:min(52dvh,480px);min-height:240px}.ticket-bubble{max-width:100%}.ticket-compose-foot .btn{width:100%}.ticket-actions .btn{min-height:44px}.ticket-row{min-height:80px}}

/* 4.2 — وصول سريع، دعوة البوت، وترتيب أوضح بالهوية البرتقالية */
:root {color-scheme:dark}
.topbar {background:rgba(17,18,21,.9);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.topbar .title-wrap {min-width:150px;flex:1}
.topbar .top-actions {flex-wrap:wrap;gap:8px;justify-content:flex-end}
#favoriteBtn,#displayPrefs {font-size:25px;line-height:1;min-width:40px;min-height:40px;background:#191a1e;border:1px solid #2b2d33;border-radius:12px;color:#c7cad1}
#favoriteBtn.pinned {color:var(--orange2);background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4)}
#inviteBotBtn {min-height:40px;border-radius:12px;white-space:nowrap}
.nav-favorites {padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid #26272c}
.nav-favorites .nav-title {color:var(--orange2)}
.favorite-link {width:100%;display:flex;align-items:center;gap:10px;border:0;color:#cbced6;background:transparent;font:inherit;text-align:start;padding:10px;border-radius:10px;cursor:pointer}
.favorite-link .svg {color:var(--orange2);flex:none}
.favorite-link .svg svg {width:17px;height:17px}
.favorite-link:hover,.favorite-link.active {background:#242019;color:#fff}
.launchpad {margin-bottom:22px;padding:26px;border:1px solid #3b2b1d;border-radius:24px;background:radial-gradient(ellipse at 95% 0,rgba(16,185,129,.1),transparent 65%),#121315}
.launch-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.eyebrow {display:block;font-size:11px;letter-spacing:.7px;color:var(--orange2);font-weight:800;margin-bottom:10px}
.launch-heading h2,.invite-hero h2 {font-size:28px;line-height:1.5;margin:0 0 8px;letter-spacing:-.5px}
.launch-heading p,.invite-hero p {color:#a9adb8;font-size:14px;line-height:1.9;margin:0}
.quick-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quick-card {display:flex;gap:12px;align-items:flex-start;text-align:start;min-width:0;padding:18px;border:1px solid #2c2c2f;border-radius:16px;background:rgba(22,23,26,.88);color:var(--text);font:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.quick-card:hover {background:#26201a;border-color:#705032}
.quick-card b,.quick-card small {display:block}
.quick-card small {color:var(--muted);font-size:11px;line-height:1.8;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quick-icon {display:grid;place-items:center;color:var(--orange2);background:rgba(16,185,129,.09);border-radius:12px;width:40px;height:40px;flex:none}
.quick-icon svg {width:21px;height:21px}
.command-modal {max-width:720px;width:100%;padding:22px}
.command-menu {display:grid;gap:12px;min-width:0}
.command-input {width:100%;min-height:54px;border:1px solid #4d3926;border-radius:14px;background:#1b1b1d;color:var(--text);padding:14px 16px;font:inherit;outline:none}
.command-input:focus {border-color:var(--orange);box-shadow:0 0 0 3px rgba(16,185,129,.08)}
.command-results {display:grid;gap:7px;max-height:min(55dvh,530px);overflow:auto;overscroll-behavior:contain}
.command-result {width:100%;display:flex;align-items:center;gap:12px;border:1px solid transparent;border-radius:12px;background:#191a1d;padding:13px;text-align:start;font:inherit;color:var(--text);cursor:pointer;min-width:0}
.command-result:hover,.command-result.selected {border-color:#6b4729;background:#282017}
.command-result>span {min-width:0;flex:1}.command-result b,.command-result small {display:block}.command-result small {color:var(--muted);font-size:11px;line-height:1.8;margin-top:3px}
.command-result .command-tag {flex:none;color:var(--orange2);font-size:10px}.command-icon {color:var(--orange2);flex:none}.command-icon svg {width:21px;height:21px}
.display-options {display:grid;gap:14px}.display-choice {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:14px;cursor:pointer}.display-choice small {display:block;font-size:12px;color:var(--muted);margin-top:6px}.display-choice input {accent-color:var(--orange);width:22px;height:22px;flex:none}
.change-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.invite-page {display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1080px;margin:0 auto}.invite-hero {grid-column:1/-1;padding:26px;border:1px solid #3c2c20;border-radius:24px;background:radial-gradient(ellipse at 90% 0,rgba(16,185,129,.1),transparent 65%),#121315}
.invite-profiles {display:flex;flex-direction:column;gap:12px}.profile-choice {display:block;text-align:start;padding:22px;border:1px solid #303036;border-radius:18px;background:#141518;color:var(--text);font:inherit;cursor:pointer}.profile-choice b {display:block;font-size:17px}.profile-choice small {display:block;font-size:12px;color:var(--muted);line-height:1.9;margin-top:8px}.profile-choice.selected {border-color:var(--orange);box-shadow:inset -4px 0 var(--orange);background:#241b13}
.invite-detail {display:flex;flex-direction:column;gap:14px;margin:0!important}.invite-detail h4,.invite-detail h3 {margin:0}.invite-detail>p {line-height:1.9;margin:0}.invite-identity {display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.invite-identity .muted {font-size:10px;overflow-wrap:anywhere}.invite-logo {display:grid;place-items:center;background:rgba(16,185,129,.1);color:var(--orange2);border-radius:15px;width:54px;height:54px;flex:none}.invite-logo svg {width:29px;height:29px}
.permission-summary {list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:13px;line-height:1.9;color:#c4c7cf}.permission-summary li {position:relative;padding-inline-start:24px}.permission-summary li::before {content:'✓';position:absolute;inset-inline-start:0;color:var(--orange2)}
.invite-link {display:flex;text-decoration:none;align-items:center;justify-content:center;min-height:48px}
.ticket-filter-row {display:grid;grid-template-columns:1fr 1fr;gap:8px}.ticket-filter-row select {font-size:12px;padding-inline:8px}.ticket-canned {display:grid;gap:5px}.ticket-canned select {width:100%;padding:10px 12px;border-radius:10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);font:inherit}
.empty-onboarding {text-align:center;max-width:700px;margin:35px auto;padding:30px}.empty-onboarding .btn {margin-top:12px}
.compact-layout .main {padding-top:14px}.compact-layout .card {padding:16px}.compact-layout .topbar {padding:12px 16px}.compact-layout .nav-item {padding-block:3px}.compact-layout .field {gap:5px}.compact-layout .quick-card {padding:13px}.compact-layout td,.compact-layout th {padding-block:8px}
.quick-card:focus-visible,.favorite-link:focus-visible,.command-result:focus-visible,.profile-choice:focus-visible,#favoriteBtn:focus-visible,#displayPrefs:focus-visible {outline:2px solid var(--orange2);outline-offset:3px}
@media(max-width:1150px){.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar .top-actions .search-btn{max-width:230px}}
@media(max-width:899px){.topbar{padding:15px;gap:12px}.topbar .title-wrap{width:100%;flex:auto}.topbar .top-actions{width:100%;justify-content:flex-start}.top-actions #inviteBotBtn{width:auto!important;flex:1;max-width:210px}.top-actions .icon-btn{width:40px!important;flex:none}.topbar h1{font-size:21px}.topbar .pill{margin-inline-start:auto;font-size:11px}.launchpad{padding:18px;border-radius:20px}.launch-heading{align-items:flex-start;gap:12px;flex-direction:column}.launch-heading h2,.invite-hero h2{font-size:23px}.launch-heading .btn{width:100%}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-card{flex-direction:column;padding:13px;gap:9px}.quick-card b{font-size:13px}.quick-card small{font-size:10px}.invite-page{grid-template-columns:1fr}.invite-hero{padding:20px}.invite-profiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}.profile-choice{padding:14px}.profile-choice b{font-size:14px}.profile-choice small{font-size:11px}.invite-detail .btn{width:100%}.command-modal{padding:16px}.command-input,.ticket-compose textarea,.ticket-filters input,.ticket-canned select{font-size:16px}.command-result{padding:12px 10px}.command-result .command-tag{display:none}.savebar>div{display:flex;gap:6px;flex-wrap:wrap}.savebar #reviewBtn,.savebar #resetBtn{width:auto;flex:1}.savebar #saveBtn{flex:2;min-width:125px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.attention-strip {display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:1px solid #4a3521;background:#1d1711;border-radius:16px;padding:14px 16px;margin-bottom:18px}.attention-strip>b{color:var(--orange2);font-size:13px;margin-inline-end:6px}.attention-strip button{display:flex;align-items:center;gap:8px;font:inherit;font-size:12px;border:1px solid #3c3022;border-radius:10px;background:#282018;color:#f5e1a8;padding:9px 12px;cursor:pointer}.attention-strip .svg svg{width:17px;height:17px}.attention-strip button:hover{border-color:var(--orange)}

/* P.R.M 5 — server workspace */
:root { --panel: #151419; --panel2: #1d1a20; --line: #302b31; --radius: 22px; --muted: #aaa5af; }
body { background: radial-gradient(ellipse at 85% 0, #40200b66, transparent 48%), #0c0b0f; }
.sidebar { background: #111014; border-color: #30252a; padding: 22px 16px 16px; }
.main { padding: 32px 36px 110px; max-width: 1900px; width: 100%; margin-inline: auto; }
.topbar { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -.7px; }
.card { background: linear-gradient(145deg, #1b171c, #141217); box-shadow: 0 12px 36px #0000001f; }
.nav-item { border-radius: 12px; padding: 8px; }
.nav-item.active { background: #3ad49b1c; border-color: #3ad49b4d; color: #42d6a0; }
.nav-item.active .nav-ic { color: #1a0d04; background: #f3da94; box-shadow: none; }
.nav-title { color: #b6a6a6; font-size: 11px; letter-spacing: .5px; }
.guild-card { background: #201a1b; border-color: #4a3024; }
.stats.kpis { gap: 12px; }
.stat.kpi { border-radius: 18px; background: linear-gradient(145deg, #211a20, #151318); }
.stat.kpi b { font-size: 30px; font-weight: 800; }
.quick-card { border-radius: 16px; background: #1b171d; }
.btn { border-radius: 11px; }
.btn.primary { background: linear-gradient(115deg, #f3da94, #3ad49b); color: #261305; border-color: #f3da94; font-weight: 800; }
.command-hero, .work-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px; border: 1px solid #0d916566; border-radius: 26px; background: radial-gradient(ellipse at 0 0, #3ad49b26, transparent 65%), linear-gradient(115deg, #292023, #181319); overflow: hidden; }
.command-hero h2, .work-hero h2 { font-size: clamp(24px, 3vw, 38px); line-height: 1.6; margin: 5px 0; letter-spacing: -1px; }
.command-hero p, .work-hero p { color: #c9bbc0; max-width: 620px; margin: 0; line-height: 1.9; }
.eyebrow { color: var(--orange2); letter-spacing: 1px; font-weight: 700; }
.hero-shortcuts { display: grid; gap: 9px; min-width: 180px; }
.hero-shortcuts button { padding: 12px 18px; color: #f9ebc6; background: #3ad49b12; border: 1px solid #f3da9444; border-radius: 11px; font: inherit; text-align: right; cursor: pointer; }
.hero-shortcuts button:hover { background: #3ad49b33; }
.work-summary { display: flex; gap: 12px; }
.work-summary > div { display: flex; align-items: center; gap: 14px; padding: 15px 22px; background: #1b171e; border: 1px solid var(--line); border-radius: 16px; flex: 1; }
.work-summary b { color: var(--orange2); font-size: 29px; }
.work-summary span { color: #c6bdc8; font-size: 13px; }
.work-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.work-toolbar input[type=search] { flex: 1; min-width: 180px; background: #18151c; border-radius: 14px; }
.work-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px; align-items: start; }
.work-column { background: #110f1488; border: 1px solid #29232d; border-radius: 20px; padding: 14px; display: grid; gap: 12px; }
.work-col-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 5px 12px; border-bottom: 1px solid #302735; }
.work-col-head h3 { margin: 0; font-size: 15px; }
.work-card { padding: 18px; border: 1px solid #39303d; background: linear-gradient(145deg, #221c26, #1a161e); border-radius: 15px; display: grid; gap: 9px; min-width: 0; }
.work-card h4 { margin: 2px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.work-body { margin: 0; color: #bcb2c0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.9; }
.work-card.priority-urgent { border-inline-start: 3px solid #ff6969; }
.work-card.priority-high { border-inline-start: 3px solid #f3da94; }
.work-card.overdue { background: linear-gradient(145deg, #33202b, #1a161e); }
.work-card-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; border-top: 1px solid #ffffff0b; padding-top: 12px; margin-top: 3px; }
.work-card-actions select { width: 100%; min-height: 38px; padding: 6px 10px; }
.work-empty { padding: 30px 12px; display: grid; gap: 12px; text-align: center; color: var(--muted); border: 1px dashed #493748; border-radius: 14px; font-size: 13px; }
.access-full { color: #9be4b5; background: #2ecc7112; padding: 12px; border-radius: 12px; }
@media(max-width: 900px) { .main { padding: 20px 18px 110px; } .command-hero, .work-hero { padding: 24px; } }
@media(max-width: 600px) { .command-hero, .work-hero { align-items: stretch; flex-direction: column; gap: 18px; padding: 22px; border-radius: 20px; } .hero-shortcuts { grid-template-columns: 1fr; } .hero-shortcuts button { padding: 10px 14px; } .work-summary { gap: 7px; } .work-summary > div { flex-direction: column; gap: 0; padding: 12px 6px; text-align: center; } .work-summary span { font-size: 11px; } .work-columns { grid-template-columns: 1fr; } .main { padding: 18px 12px 110px; } .work-card-actions .btn { flex: 1; } }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.connection-grid { display: grid; gap: 18px; }
.connection-steps { margin: 22px 0; padding-inline-start: 28px; display: grid; gap: 22px; }
.connection-steps li::marker { color: var(--orange2); font-weight: 800; }
.connection-steps p { margin-top: 5px; }

/* P.R.M 6: entry, directory and operations */
.session-loading { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 20px; color: var(--muted); }
.login-v6 { display: grid; grid-template-columns: 1.1fr 1fr; padding: 0; min-height: 100dvh; gap: 0; background: #100d12; }
.login-story { min-height: 100dvh; padding: clamp(32px,6vw,90px); position: relative; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(ellipse at 95% 70%, #3ad49b22, transparent 70%), linear-gradient(135deg,#241719,#100f14); border-inline-end: 1px solid #f3da9424; overflow: hidden; }
.login-story::before { content: ''; width: 520px; height: 520px; border: 1px solid #f3da9417; box-shadow: 0 0 0 90px #f3da9404, 0 0 0 180px #f3da9403; border-radius: 50%; position: absolute; inset-inline-start: -240px; bottom: -280px; pointer-events: none; }
.login-story .brand { margin-bottom: 50px; }
.login-story .brand b { font-size: 27px; letter-spacing: 2px; }
.login-tag { color: #3fd59e; font-size: 12px; letter-spacing: .5px; }
.login-story h1 { margin: 20px 0; font-size: clamp(38px,4.5vw,68px); line-height: 1.5; letter-spacing: -2px; }
.login-story h1 em { font-style: normal; color: #f3da94; }
.login-story > p { color: #bdacb4; font-size: 16px; max-width: 440px; line-height: 2; }
.login-highlights { display: grid; gap: 17px; margin: 30px 0 45px; }
.login-highlights > div { display: flex; gap: 16px; align-items: center; color: #d3c2ca; font-size: 13px; }
.login-highlights b { color: #b97b49; font: 12px monospace; border-bottom: 1px solid #b97b4940; padding: 8px; }
.login-signature { color: #826c77; letter-spacing: 1.7px; font-size: 10px; }
.login-access { padding: 48px 28px; display: grid; align-content: center; justify-items: center; gap: 25px; }
.login-v6 .login-card { max-width: 450px; padding: 35px; background: #1a151c; border-color: #3d2d3b; border-radius: 24px; box-shadow: 0 30px 90px #0005; }
.login-card h2 { font-size: 28px; letter-spacing: -.8px; margin: 9px 0; }
.login-v6 .discord { margin-top: 30px; padding: 16px; border-radius: 13px; display: flex; justify-content: center; gap: 12px; background: #5865f2; }
.owner-access { border-top: 1px solid #3b2e3a; margin-top: 26px; padding-top: 22px; }
.owner-access summary { cursor: pointer; font-size: 13px; color: #ccb6c5; }
.owner-access form { margin-top: 22px; }
.password-wrap { display: flex; border: 1px solid var(--line); border-radius: 12px; background: #100e13; margin-top: 7px; }
.password-wrap input { border: 0; border-radius: 12px; background: none; min-width: 0; flex: 1; }
.password-wrap button { background: none; color: var(--orange2); border: none; padding-inline: 14px; cursor: pointer; font: inherit; font-size: 12px; }
.login-connection { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #afa4b4; border-top: 1px solid #352736; padding-top: 18px; margin-top: 24px; }
.login-help { margin-top: 20px; font-size: 12px; color: #9e8b9b; }
.login-help summary { cursor: pointer; }
.login-footer { color: #7f6e7c; font-size: 11px; }
#loginError { margin-top: 15px; }
.directory-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px; border-radius: 24px; border: 1px solid #0d916566; background: radial-gradient(ellipse at 0 0,#3ad49b26,transparent 70%),#1a141b; }
.directory-hero h2 { font-size: clamp(24px,2.8vw,36px); letter-spacing: -.7px; margin: 10px 0; }
.directory-hero p { color: #bdacb9; margin: 0; }
.directory-count { display: grid; gap: 3px; text-align: center; min-width: 100px; padding: 20px; border-radius: 18px; border: 1px solid #3ad49b33; background: #3ad49b0d; }
.directory-count b { font-size: 40px; color: #3fd59e; line-height: 1.3; }
.directory-count span { color: #b99da9; font-size: 11px; }
.server-grid, .system-grid, .plans-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(290px,100%),1fr)); gap: 18px; }
.server-tile { padding: 24px; border: 1px solid #453142; border-radius: 23px; background: linear-gradient(140deg,#271c27,#17131c); display: grid; gap: 12px; transition: transform .2s,border-color .2s; }
.server-tile:hover { transform: translateY(-3px); border-color: #0fb17b; }
.server-tile-top { display: flex; align-items: center; justify-content: space-between; }
.server-avatar { display: grid; place-items: center; width: 64px; height: 64px; object-fit: cover; background: #3ad49b26; color: #45d6a1; border: 1px solid #3ad49b33; border-radius: 20px; font-size: 28px; font-weight: 800; }
.server-tile h3 { margin: 6px 0 0; font-size: 21px; }
.server-id { font: 11px monospace; color: #8c7688; margin: 0 0 12px; text-align: right; }
.server-empty { padding: 60px 24px; display: grid; justify-items: center; gap: 14px; background: #1a141a; border: 1px dashed #624650; border-radius: 22px; text-align: center; }
.server-empty h3,.server-empty p { margin: 0; }
.server-empty p { color: var(--muted); max-width: 560px; font-size: 13px; line-height: 1.9; }
.server-empty-icon svg { width: 45px; height: 45px; color: #f3da94; }
.system-tile, .plan-card { display: grid; align-content: start; gap: 14px; padding: 24px; background: linear-gradient(145deg,#221a25,#16131c); border: 1px solid #3c2d3e; border-radius: 21px; }
.system-tile h3,.plan-card h3 { margin: 0; font-size: 17px; }
.system-ic { width: 42px; height: 42px; display: grid; place-items: center; background: #3ad49b17; border-radius: 13px; color: #3fd59e; }
.system-ic svg { width: 23px; height: 23px; }
.system-check { padding: 9px 11px; border-radius: 9px; background: #ffffff05; color: #ac98ad; font-size: 11px; }
.system-tile .row:last-child { margin-top: 5px; }
.plan-templates { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.plan-templates > div { background: #211922; border: 1px dashed #6e5442; padding: 20px; border-radius: 17px; display: grid; gap: 8px; }
.plan-templates b { font-size: 14px; }
.plan-templates small { color: var(--muted); font-size: 11px; }
.plan-steps { display: grid; gap: 9px; margin: 8px 0; }
.plan-step { display: flex; gap: 10px; padding: 12px; background: #ffffff04; border: 1px solid #ffffff06; border-radius: 10px; align-items: start; font-size: 13px; line-height: 1.7; cursor: pointer; }
.plan-step input { flex: none; width: 17px; min-height: 17px; height: 17px; margin: 3px 0; accent-color: #12d393; }
.plan-step.done span { color: #8a798b; text-decoration: line-through; }
@media(max-width:900px) { .login-v6 { grid-template-columns: 1fr; } .login-story { min-height: auto; padding: 35px 24px; border: 0; } .login-story .brand { margin-bottom: 18px; } .login-story h1 { font-size: 36px; line-height: 1.5; margin: 12px 0; } .login-story h1 br { display: none; } .login-story h1 em::before { content:' '; } .login-story > p { font-size: 13px; margin: 0; } .login-highlights,.login-signature { display: none; } .login-access { padding: 15px 18px 35px; } .login-v6 .login-card { max-width: 550px; padding: 26px; width: 100%; } .plan-templates { grid-template-columns: 1fr; } }
@media(max-width:600px) { .directory-hero { padding: 23px; align-items: start; } .directory-count { min-width: 70px; padding: 12px; } .directory-count b { font-size: 29px; } .directory-hero h2 { font-size: 23px; } .directory-hero p { font-size: 12px; line-height: 1.8; } .server-grid,.system-grid,.plans-grid { grid-template-columns: 1fr; } .server-tile { padding: 22px; } .login-story h1 { font-size: 29px; } }