:root { --bg: #0f1320; --panel: #181d2e; --panel2: #1f2538; --border: #2a3147; --text: #e6e9f2; --muted: #9aa3bd; --accent: #5b8cff; --accent2: #3b6fe0; --green: #2ecc71; --red: #ff5c6c; --amber: #ffb648; --radius: 12px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif; } /* جهت چیدمان از روی صفت dir روی می‌آید (rtl برای فارسی، ltr برای انگلیسی) */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border-bottom: 1px solid var(--border); padding: 12px 22px; position: sticky; top: 0; z-index: 10; } .topbar .brand { font-weight: 700; font-size: 18px; } .topbar .brand span { color: var(--accent); } .nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .nav a { padding: 7px 13px; border-radius: 9px; color: var(--muted); } .nav a:hover { background: var(--panel2); color: var(--text); text-decoration: none; } .nav a.active { background: var(--accent); color: #fff; } .whoami { color: var(--muted); font-size: 13px; margin-inline-end: 8px; } .wrap { max-width: 1100px; margin: 26px auto; padding: 0 18px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; } h1 { font-size: 22px; margin: 0 0 6px; } h2 { font-size: 17px; margin: 0 0 14px; } .muted { color: var(--muted); } .row { display: flex; gap: 14px; flex-wrap: wrap; } .col { flex: 1; min-width: 220px; } label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; } input, select { width: 100%; padding: 11px 12px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 14px; } input:focus, select:focus { outline: none; border-color: var(--accent); } .check { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .check input { width: auto; } .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 11px 18px; border-radius: 9px; border: 1px solid transparent; background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; } .btn:hover { background: var(--accent2); text-decoration: none; } .btn.secondary { background: var(--panel2); color: var(--text); border-color: var(--border); } .btn.danger { background: var(--red); } .btn.small { padding: 6px 11px; font-size: 12.5px; } .btn:disabled { opacity: .5; cursor: not-allowed; } table { width: 100%; border-collapse: collapse; } th, td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; } th { color: var(--muted); font-weight: 600; } tr:hover td { background: var(--panel2); } code, .mono { font-family: "JetBrains Mono", Consolas, monospace; } .badge { padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-block; } .badge.green { background: rgba(46,204,113,.15); color: var(--green); } .badge.red { background: rgba(255,92,108,.15); color: var(--red); } .badge.amber { background: rgba(255,182,72,.15); color: var(--amber); } .badge.tag { background: rgba(91,140,255,.15); color: var(--accent); margin: 2px; } .alert { padding: 12px 15px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; } .alert.error { background: rgba(255,92,108,.12); border: 1px solid var(--red); color: #ffd0d5; } .alert.ok { background: rgba(46,204,113,.12); border: 1px solid var(--green); color: #c8f7da; } .alert.warn { background: rgba(255,182,72,.12); border: 1px solid var(--amber); color: #ffe6bf; } .login-wrap { max-width: 380px; margin: 9vh auto; } .cred { background: var(--panel2); border: 1px dashed var(--accent); border-radius: 10px; padding: 14px; margin: 10px 0; } .cred div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); } .cred div:last-child { border: 0; } .kv-key { color: var(--muted); } .actions { display: flex; gap: 8px; flex-wrap: wrap; } .stat { font-size: 28px; font-weight: 700; } .inline-form { display: inline; } /* ─── سوییچر زبان ─── */ .lang-switch { display: inline-flex; margin-inline-end: 8px; } .lang-switch select { width: auto; padding: 6px 10px; font-size: 12.5px; border-radius: 9px; } .login-lang { display: flex; justify-content: flex-end; margin-bottom: 6px; } .login-lang .lang-switch { margin-inline-end: 0; } /* ─── نوار مرتب‌سازی ─── */ .sortbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .chip { padding: 6px 13px; border-radius: 20px; font-size: 13px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); } .chip:hover { color: var(--text); text-decoration: none; border-color: var(--accent); } .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ─── گروه‌بندی جدول سرورها ─── */ table.grouped { border-collapse: separate; border-spacing: 0; } table.grouped tbody.srv-group + tbody.srv-group .group-head td { padding-top: 26px; /* فاصله‌ی بصری مناسب بین گروه‌ها */ } .group-head td { background: transparent; border-bottom: 0; padding-bottom: 6px; } .group-head:hover td { background: transparent; } .group-label { display: inline-block; font-weight: 700; font-size: 13px; color: var(--accent); background: var(--panel2); border: 1px solid var(--border); padding: 4px 12px; border-radius: 8px; } .group-count { display: inline-block; margin-inline-start: 8px; font-size: 12px; color: var(--muted); background: rgba(91,140,255,.10); padding: 3px 9px; border-radius: 20px; } /* ─── ویرایش تگ داخلی درون جدول ─── */ .itag-form { display: flex; gap: 6px; align-items: center; } .itag-input { width: 130px; padding: 6px 9px; font-size: 12.5px; border-radius: 8px; }