/* Wiantex UI v2 — visual layer only. Backend/markup behavior remains intact. */
:root{
  --ui-surface: color-mix(in srgb, var(--panel-1) 92%, transparent);
  --ui-surface-2: color-mix(in srgb, var(--panel-0) 94%, transparent);
  --ui-line: color-mix(in srgb, var(--border-strong) 72%, transparent);
  --ui-radius: 14px;
  --ui-radius-lg: 18px;
  --ui-space: 16px;
  --ui-content-max: 1460px;
}

body.ui-v2{
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(124,92,255,.08), transparent 62%),
    radial-gradient(700px 520px at 94% 8%, rgba(59,130,246,.07), transparent 60%),
    var(--bg-0);
}

body.ui-v2 .content-wrap{max-width:var(--ui-content-max);margin:0 auto;width:100%;padding:24px clamp(16px,2.2vw,30px) 42px}
body.ui-v2 .content-grid{grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:20px}
body.ui-v2 .right-panel{gap:14px;top:78px}

/* shared cards */
body.ui-v2 .card{
  background:linear-gradient(180deg,var(--panel-1),var(--panel-0));
  border:1px solid color-mix(in srgb,var(--border-strong) 72%, transparent);
  border-radius:var(--ui-radius);
  box-shadow:0 10px 34px rgba(0,0,0,.18);
}
body.ui-v2 .card:hover{border-color:color-mix(in srgb,var(--border-strong) 88%, transparent)}
body.ui-v2 .section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 16px}
body.ui-v2 .section-head h2{font-size:18px;line-height:1.25;display:flex;align-items:center;gap:9px}
body.ui-v2 .section-link{font-size:12.5px;color:var(--purple-soft);font-weight:700;white-space:nowrap}

/* nav */
body.ui-v2 .sidebar{
  background:rgba(7,10,21,.86);
  border-right:1px solid color-mix(in srgb,var(--border) 88%, transparent);
  padding:18px 14px;
  gap:20px;
}
body.ui-v2 .brand{padding:4px 8px 10px}
body.ui-v2 .brand-mark{width:38px;height:38px;border-radius:11px;box-shadow:none}
body.ui-v2 .nav-group{gap:3px}
body.ui-v2 .nav-label{padding:10px 11px 6px;font-size:10px}
body.ui-v2 .nav-item{min-height:40px;padding:9px 11px;border-radius:10px;font-size:13.5px}
body.ui-v2 .nav-item:hover{background:rgba(255,255,255,.035)}
body.ui-v2 .nav-item.active{background:linear-gradient(90deg,rgba(124,92,255,.18),rgba(124,92,255,.045));box-shadow:inset 2px 0 0 var(--purple-soft)}
body.ui-v2 .nav-item .count{background:rgba(255,255,255,.045)}

body.ui-v2 .navbar{
  padding:12px clamp(16px,2vw,28px);
  background:rgba(5,7,18,.84);
  border-bottom:1px solid color-mix(in srgb,var(--border) 90%, transparent);
}
body.ui-v2 .search-box{max-width:520px;min-height:40px;border-radius:11px}
body.ui-v2 .icon-btn{width:40px;height:40px;border-radius:11px}
body.ui-v2 .profile-trigger{border-radius:12px}

/* buttons / forms */
body.ui-v2 .btn{min-height:38px;border-radius:10px;padding:9px 14px;font-size:13.5px;box-shadow:none}
body.ui-v2 .btn-primary{box-shadow:0 7px 18px rgba(77,70,229,.22)}
body.ui-v2 .btn-primary:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(77,70,229,.28)}
body.ui-v2 .btn-danger{background:rgba(248,113,113,.09)}
body.ui-v2 .input,.ui-v2 select,.ui-v2 textarea{min-height:40px;border-radius:10px;background:rgba(255,255,255,.025);border-color:var(--border)}
body.ui-v2 textarea.input{min-height:120px}
body.ui-v2 .field{margin-bottom:15px}
body.ui-v2 .field label{font-size:12px}
body.ui-v2 .field-hint{line-height:1.45}

/* home / forum */
body.ui-v2 .hero{padding:28px;border-radius:var(--ui-radius-lg);margin-bottom:20px;background:linear-gradient(180deg,rgba(18,26,51,.98),rgba(13,20,40,.98));box-shadow:0 16px 42px rgba(0,0,0,.2)}
body.ui-v2 .hero h1{font-size:28px}
body.ui-v2 .hero p{font-size:14px}
body.ui-v2 .hero-stats{gap:22px}
body.ui-v2 .hero-stat strong{font-size:20px}
body.ui-v2 .topic-list{display:flex;flex-direction:column;gap:10px}
body.ui-v2 .topic-card{
  background:linear-gradient(180deg,rgba(16,22,43,.96),rgba(12,17,34,.96));
  border:1px solid var(--border);border-radius:13px;transition:transform .16s ease,border-color .16s ease,background .16s ease
}
body.ui-v2 .topic-card:hover{transform:translateY(-1px);border-color:var(--border-strong);background:linear-gradient(180deg,rgba(18,25,49,.98),rgba(13,19,38,.98))}
body.ui-v2 .topic-icon{border-radius:11px}
body.ui-v2 .member-card{padding:15px;border-radius:13px}
body.ui-v2 .member-card-actions .btn{min-height:34px}

/* profile */
body.ui-v2 .profile-hero{overflow:hidden;border-radius:18px}
body.ui-v2 .profile-banner{height:200px;margin:-1px -1px 18px;border-radius:16px 16px 0 0}
body.ui-v2 .profile-main-avatar{margin-top:-50px;padding-left:18px}
body.ui-v2 .profile-main-avatar .avatar-frame-wrap{box-shadow:0 10px 24px rgba(0,0,0,.28);border:4px solid var(--panel-0);border-radius:50%}
body.ui-v2 .profile-presence{font-size:12px}
body.ui-v2 .profile-level-bar{height:9px}

/* messages */
body.ui-v2 .chat-section-head{margin-bottom:12px}
body.ui-v2 .conv-list{gap:6px}
body.ui-v2 .conv-row{border-radius:12px;border:1px solid transparent}
body.ui-v2 .conv-row:hover,.ui-v2 .conv-row.active{background:rgba(124,92,255,.06);border-color:var(--border)}
body.ui-v2 .msg-row{margin-bottom:8px}
body.ui-v2 .msg-bubble{border-radius:15px;border:1px solid var(--border);box-shadow:none}
body.ui-v2 .msg-row.mine .msg-bubble{border-color:rgba(124,92,255,.25)}
body.ui-v2 .msg-composer-wrap{border-radius:15px;border:1px solid var(--border);background:rgba(10,14,29,.92);box-shadow:0 12px 30px rgba(0,0,0,.24)}
body.ui-v2 .msg-composer{min-height:44px;border-radius:12px}
body.ui-v2 .msg-voice{width:44px;height:44px}

/* admin shell */
body.ui-v2.admin-page .content-wrap{padding-top:20px}
body.ui-v2.admin-page .section-head{padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:15px}
body.ui-v2.admin-page .admin-nav-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin-bottom:12px}
body.ui-v2.admin-page .admin-nav-link{
  min-height:42px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 9px;border:1px solid var(--border);border-radius:10px;
  color:var(--text-1);background:rgba(255,255,255,.02);font-size:11.5px;font-weight:700;text-align:center
}
body.ui-v2.admin-page .admin-nav-link:hover{border-color:var(--border-strong);color:var(--text-0);background:rgba(124,92,255,.05)}
body.ui-v2.admin-page .admin-nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(59,130,246,.1));border-color:rgba(124,92,255,.35)}
body.ui-v2.admin-page .admin-secondary-links{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
body.ui-v2.admin-page .admin-secondary-links a{font-size:11.5px;color:var(--text-2);padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.018)}
body.ui-v2.admin-page .admin-secondary-links a:hover{color:var(--text-0);border-color:var(--border-strong)}
body.ui-v2.admin-page .card{box-shadow:0 8px 26px rgba(0,0,0,.16)}
body.ui-v2.admin-page .admin-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
body.ui-v2.admin-page .admin-table{min-width:680px}
body.ui-v2.admin-page .admin-table th{background:rgba(255,255,255,.025);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
body.ui-v2.admin-page .admin-table td{vertical-align:middle}
body.ui-v2.admin-page .admin-table tr:hover td{background:rgba(124,92,255,.028)}
body.ui-v2.admin-page .role-card,.ui-v2.admin-page .permission-card{border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.018)}
body.ui-v2.admin-page .badge{border:1px solid rgba(255,255,255,.06)}
body.ui-v2.admin-page .alert{border-radius:10px}
body.ui-v2.admin-page .field{margin-bottom:12px}
body.ui-v2.admin-page .card > h3{font-size:14px}
body.ui-v2.admin-page .pagination{margin-top:16px}

/* admin stats */
body.ui-v2.admin-page .stat-grid,body.ui-v2.admin-page .stats-grid,body.ui-v2.admin-page .kpi-grid{gap:12px}
body.ui-v2.admin-page .admin-stat,.ui-v2.admin-page .stat-card{border-radius:13px}

/* mobile */
@media (max-width:1000px){
  body.ui-v2 .content-grid{grid-template-columns:1fr}
  body.ui-v2 .right-panel{position:static}
  body.ui-v2.admin-page .admin-nav-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  body.ui-v2 .content-wrap{padding:14px 12px calc(92px + env(safe-area-inset-bottom))}
  body.ui-v2 .navbar{padding:10px 12px}
  body.ui-v2 .search-box{display:none}
  body.ui-v2 .navbar-actions{gap:6px}
  body.ui-v2 .navbar .btn.btn-ghost{min-width:56px;padding:8px 10px}
  body.ui-v2 .content-grid{gap:14px}
  body.ui-v2 .hero{padding:20px 18px;border-radius:15px}
  body.ui-v2 .hero h1{font-size:23px;line-height:1.25}
  body.ui-v2 .hero p{font-size:13.5px;line-height:1.5}
  body.ui-v2 .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  body.ui-v2 .hero-stat strong{font-size:18px}
  body.ui-v2 .hero-stat span{font-size:11px}
  body.ui-v2 .section-head h2{font-size:16px}
  body.ui-v2 .topic-card{border-radius:12px}
  body.ui-v2 .topic-card .topic-title{font-size:14px}
  body.ui-v2 .profile-banner{height:150px}
  body.ui-v2 .profile-main-avatar{margin-top:-40px;padding-left:12px}
  body.ui-v2.admin-page .admin-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body.ui-v2.admin-page .admin-secondary-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ui-v2.admin-page .admin-secondary-links a{text-align:center}
  body.ui-v2.admin-page .admin-table{min-width:640px}
  body.ui-v2.admin-page .content-grid{display:block}
  body.ui-v2.admin-page .right-panel{display:none}
}
@media (max-width:480px){
  body.ui-v2 .hero-stats{grid-template-columns:repeat(2,1fr)}
  body.ui-v2 .hero-stat{padding:8px 0}
  body.ui-v2 .hero-stat strong{font-size:20px}
  body.ui-v2 .profile-banner{height:132px}
  body.ui-v2 .profile-main-avatar{margin-top:-34px}
  body.ui-v2.admin-page .admin-nav-grid{grid-template-columns:1fr 1fr}
  body.ui-v2.admin-page .admin-nav-link{min-height:44px;font-size:11px}
}
@media (max-width:360px){
  body.ui-v2 .content-wrap{padding-left:10px;padding-right:10px}
  body.ui-v2 .navbar-actions .navbar-woin{font-size:12px;min-width:58px;width:auto;justify-content:center;padding:8px 10px;white-space:nowrap;}
  body.ui-v2.admin-page .admin-secondary-links{grid-template-columns:1fr}
}