:root{--bg: #0d1117;--bg-elevated: #161b22;--bg-card: #1a2029;--border: #2a313c;--text: #e6edf3;--muted: #8b949e;--primary: #3b82f6;--primary-hover: #2f6fd6;--success: #2ea043;--danger: #f85149;--warning: #d29922;--radius: 14px;--shadow: 0 8px 30px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,system-ui,sans-serif;font-size:15px;direction:rtl}button,input{font-family:inherit}.muted{color:var(--muted)}.measure{display:inline-block;direction:ltr;unicode-bidi:isolate}.text-danger{color:var(--danger)}.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.center-pad{display:flex;justify-content:center;padding:60px}.app-shell{min-height:100vh}.container{max-width:1100px;margin:0 auto;padding:24px 20px 60px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}.brand-icon{font-size:22px}.topbar-actions{display:flex;align-items:center;gap:12px}.user-chip{background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13px}.role-chip{background:#3b82f626;color:var(--primary);border:1px solid rgba(59,130,246,.4);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}.stats{display:flex;gap:14px}.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;text-align:center;min-width:90px}.stat-num{display:block;font-size:24px;font-weight:700}.stat-label{font-size:12px;color:var(--muted)}.stat-unit{font-size:13px;color:var(--muted)}.quota-stat{min-width:200px;text-align:right}.quota-bar{width:100%;margin-top:8px}.toolbar-right{display:flex;gap:10px;align-items:center}.search{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 14px;outline:none;min-width:180px}.search:focus{border-color:var(--primary)}.btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 16px;cursor:pointer;font-size:14px;transition:.15s;white-space:nowrap}.btn:hover{border-color:var(--primary)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}.btn.primary:hover{background:var(--primary-hover)}.btn.ghost{background:transparent}.btn.block{width:100%}.btn.small{padding:6px 12px;font-size:13px}.btn.danger,.menu button.danger{color:var(--danger)}.table-card{overflow:visible;padding:0}.config-table{width:100%;border-collapse:collapse}.config-table th,.config-table td{text-align:right;padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle}.config-table th{color:var(--muted);font-weight:600;font-size:13px}.config-table tr:last-child td{border-bottom:none}.config-table tbody tr:hover{background:#ffffff05}.row-busy{opacity:.5}.cfg-name{font-weight:600}.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}.badge.active{background:#2ea04326;color:var(--success)}.badge.disabled{background:#8b949e26;color:var(--muted)}.badge.expired{background:#f8514926;color:var(--danger)}.online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:6px;vertical-align:middle}.online-dot.on{background:var(--success);box-shadow:0 0 0 3px #2ea0432e}.online-dot.off{background:var(--muted);opacity:.5}.online-text{font-size:13px;vertical-align:middle}.usage-text{font-size:13px;margin-bottom:4px}.bar{width:120px;height:6px;background:var(--bg-elevated);border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:var(--primary);border-radius:999px}.row-actions{display:flex;gap:6px;align-items:center}.menu-wrap{position:relative}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20}.menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);z-index:30;min-width:150px;overflow:hidden}.menu button{display:block;width:100%;text-align:right;background:transparent;border:none;color:var(--text);padding:10px 14px;cursor:pointer;font-size:13px}.menu button:hover{background:#ffffff0d}.login-card{width:100%;max-width:380px;padding:36px 30px;display:flex;flex-direction:column;text-align:center}.login-logo{font-size:42px;margin-bottom:8px}.login-card h1{font-size:20px;margin:0 0 6px}.login-card p{margin:0 0 24px;font-size:13px}.login-card label,.modal label{text-align:right;font-size:13px;color:var(--muted);margin:14px 0 6px}.login-card input,.modal input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:11px 14px;outline:none;width:100%}.login-card input:focus,.modal input:focus{border-color:var(--primary)}.login-card .btn{margin-top:22px}.alert{border-radius:10px;padding:10px 14px;font-size:13px;margin-top:14px}.alert.error{background:#f851491f;color:var(--danger);border:1px solid rgba(248,81,73,.3)}.alert.info{background:#d299221f;color:var(--warning);border:1px solid rgba(210,153,34,.3)}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.empty .btn{margin-top:16px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{width:100%;max-width:420px;padding:26px;display:flex;flex-direction:column;max-height:90vh;overflow-y:auto}.modal-wide{max-width:760px}.op-create{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;align-items:center}.op-create input,.op-create select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px 12px;outline:none;flex:1;min-width:120px}.op-create input:focus,.op-create select:focus{border-color:var(--primary)}.op-table{margin-top:4px}.totals-row td{font-weight:700;border-top:2px solid var(--border);background:#ffffff05}.success-alert{background:#2ea0431f;color:var(--success);border:1px solid rgba(46,160,67,.3)}.modal h2{margin:0 0 8px;font-size:18px}.hint{font-size:12px;margin-top:10px}.modal-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:24px}.qr-modal{text-align:center;align-items:center}.qr-box{background:#fff;padding:12px;border-radius:12px;margin:12px 0;display:inline-block}.qr-box canvas{display:block}.link-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px;width:100%;max-height:90px;overflow:auto;margin-bottom:6px}.link-box code{font-size:11px;word-break:break-all;direction:ltr;display:block;text-align:left;color:var(--muted)}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.container{padding:16px 12px 48px}.topbar{padding:10px 14px;flex-wrap:wrap;gap:8px}.brand{font-size:15px}.topbar-actions{flex-wrap:wrap;gap:6px;width:100%;justify-content:flex-start}.btn{padding:8px 12px;font-size:13px}.toolbar{flex-direction:column;align-items:stretch}.stats{flex-wrap:wrap}.stat{flex:1 1 40%;min-width:0}.quota-stat{flex-basis:100%;min-width:0;order:3}.toolbar-right{flex-direction:column;align-items:stretch}.search{width:100%;min-width:0}.config-table:not(.op-table) thead{display:none}.config-table:not(.op-table),.config-table:not(.op-table) tbody,.config-table:not(.op-table) tr,.config-table:not(.op-table) td{display:block;width:100%}.config-table:not(.op-table) tr{border:1px solid var(--border);border-radius:12px;margin:10px;padding:4px 0}.config-table:not(.op-table) td{border:none;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px}.config-table:not(.op-table) td:before{content:attr(data-label);color:var(--muted);font-size:12px;flex-shrink:0}.row-actions{flex-wrap:wrap;justify-content:flex-end}.bar{width:100px}.op-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.modal,.modal-wide{max-width:100%;padding:20px}.op-create{flex-direction:column;align-items:stretch}.op-create input,.op-create select,.op-create .btn{width:100%}}
