/* PA Support System - Premium UI v2 */
:root{
  --ui-primary:#2563eb;
  --ui-primary-dark:#1e3a8a;
  --ui-secondary:#7c3aed;
  --ui-accent:#f59e0b;
  --ui-success:#10b981;
  --ui-danger:#ef4444;
  --ui-bg:#eef4ff;
  --ui-surface:#ffffff;
  --ui-text:#0f172a;
  --ui-muted:#64748b;
  --ui-border:#dbeafe;
  --ui-shadow:0 20px 55px rgba(15,23,42,.12);
  --ui-shadow-soft:0 10px 30px rgba(37,99,235,.10);
  --ui-radius:24px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Sarabun',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color:var(--ui-text) !important;
  background:
    radial-gradient(circle at 6% 8%, rgba(124,58,237,.16), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(37,99,235,.20), transparent 32%),
    linear-gradient(180deg,#f8fbff 0%,#eef4ff 45%,#f8fafc 100%) !important;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.38), transparent 72%);
  z-index:-1;
}
a,button,.btn,.form-control,.form-select,input,select,textarea,.card,.tool-card,.stat-card,.h-card,.table-custom,.login-card,.register-card{
  transition:all .22s ease !important;
}
a{color:var(--ui-primary)}
a:hover{color:var(--ui-secondary)}
.btn,button:not(.btn-close),input[type="submit"]{
  border-radius:999px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
}
.btn-primary,button.btn-primary,input[type="submit"].btn-primary{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary)) !important;
  border:none !important;
  box-shadow:0 12px 24px rgba(37,99,235,.24) !important;
}
.btn-primary:hover,button.btn-primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 18px 36px rgba(37,99,235,.32) !important;
}
.btn-outline-primary{
  border-color:rgba(37,99,235,.35) !important;
  color:var(--ui-primary) !important;
  background:#fff !important;
}
.btn-outline-primary:hover{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary)) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.form-control,.form-select,input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  border-radius:18px !important;
  border:1.5px solid #dbeafe !important;
  background:#fff !important;
  color:var(--ui-text) !important;
  box-shadow:0 4px 14px rgba(15,23,42,.035) !important;
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:rgba(37,99,235,.75) !important;
  box-shadow:0 0 0 .25rem rgba(37,99,235,.14),0 10px 22px rgba(37,99,235,.08) !important;
  outline:0 !important;
}
textarea{resize:vertical;min-height:120px}
.hero-section,.hd,.header,.page-header,.topbar,.sidebar{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg,#0f172a 0%,#1e3a8a 42%,#2563eb 100%) !important;
  color:#fff !important;
  box-shadow:0 24px 52px rgba(30,58,138,.28) !important;
}
.hero-section{
  border-bottom-left-radius:38px !important;
  border-bottom-right-radius:38px !important;
  margin-bottom:-2rem !important;
}
.navbar-brand,.hero-section h1,.hero-section h2,.hd h1,.header h1{
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.user-badge{
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  backdrop-filter:blur(14px) !important;
}
.card,.tool-card,.stat-card,.stat-card-info,.guide-box,.roadmap-box,.table-custom,.login-card,.register-card,.h-card,.ct,.modal-content{
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(219,234,254,.95) !important;
  border-radius:var(--ui-radius) !important;
  box-shadow:var(--ui-shadow-soft) !important;
  backdrop-filter:blur(12px) !important;
}
.tool-card{
  padding:26px !important;
  min-height:238px;
  position:relative;
  overflow:hidden;
}
.tool-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--ui-primary),var(--ui-secondary),var(--ui-accent));
  opacity:.88;
}
.tool-card:hover,.stat-card:hover,.h-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--ui-shadow) !important;
  border-color:#bfdbfe !important;
}
.tool-card.inactive{
  background:rgba(248,250,252,.92) !important;
  opacity:.78 !important;
}
.icon-box,.mc-icon{box-shadow:0 14px 28px rgba(37,99,235,.24) !important}
.bg-icon-green,.bg-icon-blue,.bg-icon-orange,.bg-icon-purple,
.icon-box.bg-primary,.icon-box.bg-info,.icon-box.bg-success,.icon-box.bg-warning{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary)) !important;
  color:#fff !important;
}
.btn-access{
  background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
  color:#1e3a8a !important;
  border:1px solid #bfdbfe !important;
  border-radius:18px !important;
  padding:12px 18px !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(37,99,235,.08) !important;
}
.btn-access:hover{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary)) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}
.btn-access.btn-closed{
  background:#f1f5f9 !important;
  color:#94a3b8 !important;
  border-color:#e2e8f0 !important;
}
.guide-box{
  background:linear-gradient(135deg,#fff7ed,#ffffff) !important;
  border:1px solid #fed7aa !important;
}
.roadmap-box{
  background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
  border:1px solid #bfdbfe !important;
}
.nav-pills{
  background:rgba(255,255,255,.92) !important;
  border:1px solid #dbeafe !important;
  border-radius:24px !important;
  padding:10px !important;
  box-shadow:var(--ui-shadow-soft) !important;
  gap:8px !important;
}
.nav-pills .nav-link{
  color:#334155 !important;
  border-radius:18px !important;
  font-weight:900 !important;
}
.nav-pills .nav-link.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary)) !important;
  box-shadow:0 12px 24px rgba(37,99,235,.22) !important;
}
.table-custom,.table-responsive{
  overflow:hidden !important;
  border-radius:24px !important;
  box-shadow:var(--ui-shadow-soft) !important;
}
.table thead,.table thead th{
  background:#eff6ff !important;
  color:#1e3a8a !important;
  font-weight:900 !important;
  border-bottom:1px solid #bfdbfe !important;
}
.table td,.table th{
  padding:16px !important;
  vertical-align:middle !important;
}
.table tbody tr:hover{background:#f8fbff !important}
.sidebar{border-right:1px solid rgba(255,255,255,.14) !important}
.sidebar .nav-link{
  margin:6px 12px !important;
  border-radius:16px !important;
  border-right:none !important;
}
.sidebar .nav-link:hover,.sidebar .nav-link.active{
  background:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
.login-card,.register-card{
  max-width:480px;
  padding:42px 34px !important;
  position:relative;
  overflow:hidden;
}
.register-card{max-width:650px !important}
.login-card::before,.register-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:8px;
  background:linear-gradient(90deg,var(--ui-primary),var(--ui-secondary),var(--ui-accent));
}
.captcha-box{
  background:#eff6ff !important;
  border:1.5px dashed #93c5fd !important;
  color:#1e3a8a !important;
  border-radius:18px !important;
}
.output-box,.ob{
  background:#0f172a !important;
  color:#dbeafe !important;
  border:1px solid rgba(147,197,253,.22) !important;
  border-radius:22px !important;
  box-shadow:0 18px 36px rgba(15,23,42,.20) !important;
}
.copy-btn,.cp{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary)) !important;
  color:#fff !important;
  border:none !important;
}
.premium-ribbon{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(12px);
}
.premium-toolbar{
  background:rgba(255,255,255,.92);
  border:1px solid #dbeafe;
  border-radius:24px;
  padding:18px;
  box-shadow:var(--ui-shadow-soft);
}
.premium-stat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.94);
  border:1px solid #dbeafe;
  box-shadow:var(--ui-shadow-soft);
}
.premium-stat .stat-icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary));
  box-shadow:0 12px 22px rgba(37,99,235,.22);
}
.premium-stat .num{font-weight:900;font-size:1.55rem;color:#1e3a8a;line-height:1}
.premium-stat .lbl{font-size:.84rem;color:var(--ui-muted);font-weight:700}
.premium-empty{
  display:none;
  padding:34px 18px;
  border:1.5px dashed #bfdbfe;
  border-radius:24px;
  background:rgba(255,255,255,.92);
  text-align:center;
  color:#64748b;
  box-shadow:var(--ui-shadow-soft);
}
.premium-empty.show{display:block}
.password-toggle-wrap{position:relative}
.password-toggle-wrap input{padding-right:54px !important}
.password-toggle-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:38px;height:38px;
  border:none;
  border-radius:999px !important;
  background:#eff6ff;
  color:#1e3a8a;
  display:flex;align-items:center;justify-content:center;
}
.password-inline-btn{
  border-radius:0 18px 18px 0 !important;
  background:#eff6ff !important;
  border-color:#dbeafe !important;
}
.app-toast-host{
  position:fixed;
  top:18px;
  right:18px;
  z-index:3000;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.app-toast{
  background:#fff;
  border:1px solid #dbeafe;
  border-left:5px solid var(--ui-primary);
  border-radius:18px;
  padding:12px 16px;
  box-shadow:var(--ui-shadow);
  font-weight:700;
}
.app-toast.success{border-left-color:var(--ui-success)}
.app-toast.error{border-left-color:var(--ui-danger)}
.app-toast.warning{border-left-color:var(--ui-accent)}
.app-fab-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:48px;height:48px;
  border:none;
  border-radius:999px !important;
  color:#fff;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-secondary));
  box-shadow:0 14px 28px rgba(37,99,235,.30);
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
}
.app-fab-top.show{display:flex}
[data-hidden="true"]{display:none !important}
@media(max-width:991.98px){
  .hero-section{border-bottom-left-radius:28px !important;border-bottom-right-radius:28px !important}
  .main-content{padding:18px !important}
  .premium-stat{padding:14px}
}
@media(max-width:767.98px){
  body{font-size:.96rem}
  .login-card,.register-card{padding:34px 22px !important}
  .nav-pills{border-radius:20px !important}
  .nav-pills .nav-link{width:100%;text-align:center}
  .app-toast-host{left:14px;right:14px}
}