/* MIRQ Web UI Styles – aligned with landing_page theme */
:root{
  /* Palette from landing_page */
  --bg-body:#05080a;
  --bg-surface:#0E1418;
  --bg-element:#111A1F;
  --bg-selection:#183040;
  --bg-hover:#151c22;
  --border:#2B3945;
  --border-highlight:#355066;
  --text-primary:#D0DAE6;
  --text-secondary:#99A8B8;
  --text-muted:#5d6b7c;
  --accent:#388bfd;
  --accent-glow:rgba(56,139,253,0.15);
  --font-ui:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono','Consolas',monospace;
  --radius-sm:2px;
  --radius-md:4px;
  --bw:1px;
  /* mapped for this app */
  --card-bg: rgba(14, 20, 24, 0.9);
  --card-stroke: var(--border);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --danger:#ef4444;
  --success:#22c55e;
  --focus:0 0 0 2px rgba(56,139,253,.25);
  --radius: var(--radius-md);
  --shadow-1: 0 12px 30px rgba(0,0,0,.45);
  --shadow-2: 0 6px 18px rgba(56,139,253,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: var(--font-ui);
  color:var(--text-primary); background:var(--bg-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.container{max-width:1280px; margin:0 auto; padding:0 24px}
.header{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; background: rgba(14,20,24,.8); backdrop-filter: blur(12px); border-bottom:1px solid rgba(43,57,69,.5)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.brand-badge{width:24px; height:24px; border-radius:6px; background:var(--accent); transform: rotate(45deg); box-shadow:0 0 15px var(--accent-glow)}
.nav{display:flex; gap:10px; align-items:center}
.nav a{color:var(--text-secondary); text-decoration:none; padding:8px 10px; border-radius:8px}
.nav a:hover{color:var(--accent); background: rgba(56,139,253,.08)}
.nav a.active{color:#fff; background: rgba(56,139,253,.18); border:1px solid var(--border-highlight)}
.card{background:var(--bg-surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1)}
.card-inner{padding:24px}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns: 1.2fr 1fr}
@media (max-width: 920px){ .grid-2{grid-template-columns: 1fr} }
.h1{font-size: clamp(28px, 4vw, 36px); margin:0 0 6px}
.sub{color:var(--text-secondary); margin:0}
hr.sep{border:none; border-top:1px solid var(--border); margin:18px 0}

/* Forms */
label{display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px}
.input{width:100%; padding:12px 14px; border-radius: var(--radius); border:1px solid var(--border); background:var(--bg-element); color:var(--text-primary); outline:none; min-width:0}
.input:focus{box-shadow:var(--focus); border-color: var(--accent)}
.row{display:grid; gap:14px}
.row-2{grid-template-columns:1fr 1fr}
@media (max-width:720px){ .row-2{grid-template-columns:1fr} }
input[readonly]{opacity:.9}

/* Buttons */
.btn{appearance:none; border:1px solid var(--accent); padding:12px 16px; border-radius: var(--radius); cursor:pointer; font-weight:600; color:#fff; background: var(--accent); box-shadow:0 4px 20px var(--accent-glow); transition: transform .15s ease, filter .15s ease}
.btn:hover{transform: translateY(-1px); filter: brightness(1.05)}
.btn:active{transform: translateY(0)}
.btn:focus-visible{box-shadow: var(--shadow-2), var(--focus)}
.btn:disabled{opacity:.7; cursor:not-allowed; box-shadow:none}
.btn-outline{background: var(--bg-element); color:var(--text-primary); border:1px solid var(--border); box-shadow:none}
.btn-outline:hover{border-color: var(--text-secondary); background: var(--bg-hover)}
.btn-danger{background: linear-gradient(135deg, #ef4444, #dc2626); color:white; border:1px solid #b91c1c; box-shadow:0 4px 10px rgba(239,68,68,.18)}
.helper{font-size:12px; color:var(--text-secondary)}
.err{color:var(--danger); font-size:13px; margin-top:6px}
.ok{color:var(--success); font-size:13px; margin-top:6px}

/* Auth */
.auth-wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:20px}
@media (max-width:980px){ .auth-wrap{grid-template-columns:1fr} }
.hero{padding:28px}
.hero h2{font-size: clamp(26px, 4vw, 34px); margin:0 0 8px}
.hero p{color:var(--text-secondary); margin:0}

/* Profile */
.profile-wrap{display:grid; grid-template-columns: minmax(340px, 380px) 1fr; gap:24px}
@media (max-width:1100px){ .profile-wrap{grid-template-columns:1fr} }
.profile-card .avatar{width:100px; height:100px; border-radius:8px; object-fit:cover; display:block; border:1px solid var(--border)}
.kv{display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center}
.kv strong{color:var(--text-secondary); font-weight:600}
.kv .input, .kv select.input{width:100%}
.badge{display:inline-block; padding:4px 8px; border-radius:2px; background:rgba(56,139,253,.1); border:1px solid rgba(56,139,253,.2); color:var(--accent)}

/* Footer */
.site-footer{margin-top:32px; padding:24px 0; border-top:1px solid var(--border); color:var(--text-muted); font-size:13px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.site-footer .brand{font-weight:800}
.footer-nav{display:flex; gap:12px}
.footer-nav a{color:var(--text-secondary); text-decoration:none}
.footer-nav a:hover{color:var(--accent)}

/* Tables */
.table-wrap{overflow:auto; border-radius: var(--radius); border:1px solid var(--border)}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table th, .table td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align: middle}
.table thead th{position:sticky; top:0; background:linear-gradient(0deg, rgba(14,20,24,1) 0%, rgba(18,26,31,1) 100%); text-align:left; font-weight:600; color:var(--text-secondary); z-index:1}
.table tbody tr:nth-child(odd){background: rgba(17,26,31,.35)}
.table tbody tr:hover{background: var(--bg-hover)}
.th-sort{appearance:none; background:none; border:none; color:inherit; font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.th-sort::after{content:'\25B4'; opacity:.4; transform: rotate(0deg)}
.th-sort.desc::after{content:'\25BE'}
.table .mono{font-family: var(--font-mono)}
.table-sticky thead th{backdrop-filter: blur(6px)}
.table-toolbar{display:flex; gap:10px; align-items:center}
.table-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.input-sm{padding:8px 10px; font-size:14px}
.badge.role-owner{background:rgba(255,215,0,.08); border-color:rgba(255,215,0,.25); color:#ffd700}
.badge.role-admin{background:rgba(56,139,253,.12); border-color:rgba(56,139,253,.28); color:#8abaff}
.badge.role-member{background:rgba(99,102,241,.10); border-color:rgba(99,102,241,.22); color:#a5b4fc}

/* Table column sizing for Guilds/Invites */
.table td.actions, .table th.actions{width:1%; white-space:nowrap}
.btn-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn-sm{padding:8px 10px; font-size:13px}
.col-id{width:84px}
.col-inv{width:76px; text-align:center}
.col-role{width:80px}
.col-uses{width:84px; text-align:center}
.col-expires{width:180px}
.table td.mono{overflow-wrap:anywhere}

/* Invites as cards */
.cards-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px}
.invite-card{position:relative; display:flex; flex-direction:column; gap:10px; padding:14px 14px 52px 14px; border:1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); box-shadow: var(--shadow-1)}
.invite-head{display:block}
.invite-code-label{font-size:12px; color:var(--text-secondary); margin:0 0 6px}
.invite-code{border:1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg-element); padding:10px; overflow-wrap:anywhere}
.invite-code code{font-family: var(--font-mono); font-size:13px; color:var(--text-primary)}
.invite-meta{display:grid; gap:4px; font-size:13px; color: var(--text-secondary)}
.invite-actions-abs{position:absolute; right:12px; bottom:12px; display:flex; gap:8px}
@media (max-width: 420px){ .invite-actions-abs{left:12px; right:auto} }

/* Grid for Guilds page */
.guilds-grid{grid-template-columns: 1.2fr 1fr; gap:16px}
@media (max-width: 1100px){ .guilds-grid{grid-template-columns:1fr} }

/* Hide/Show views */
.view{display:none}
.view.active{display:block}