/* ─────────────────────────────────────────────────────────────────
   Plattr Support — core stylesheet
   Brand mirror of dashboard core.css + landing core.css.
   Public, customer-facing, mobile-first.
   ───────────────────────────────────────────────────────────────── */

:root{
  --gold:#C9A96E;
  --gold-light:#DFC08A;
  --gold-bright:#E8D5A8;
  --gold-dim:#8B7240;
  --dark:#08080D;
  --dark-surface:#0F0F16;
  --dark-card:#141420;
  --dark-card-2:#1A1A28;
  --dark-border:#1C1C2B;
  --dark-border-light:#2A2A3A;
  --text-primary:#F0ECE2;
  --text-secondary:#A8A4B5;
  --text-muted:#6E6A7E;
  --text-disabled:#4A4757;
  --accent-blue:#3E60A0;
  --green:#34D399;
  --red:#F87171;
  --amber:#FBBF24;
  --warning:#FBBF24;
  --blue:#60A5FA;
  --brand-primary:#C9A96E;
  --brand-primary-rgb:201,169,110;
  --brand-secondary:#DFC08A;
  --brand-tertiary:#8B7240;
  --brand-gradient:linear-gradient(135deg,#C9A96E,#8B7240);
  --brand-gradient-soft:linear-gradient(135deg,#C9A96E,#DFC08A);
  --brand-text-on:#0A0A0F;
  --brand-tint-4:rgba(201,169,110,0.04);
  --brand-tint-8:rgba(201,169,110,0.08);
  --brand-tint-12:rgba(201,169,110,0.12);
  --brand-tint-18:rgba(201,169,110,0.18);
  --brand-tint-25:rgba(201,169,110,0.25);
  --brand-shadow:0 20px 60px rgba(201,169,110,0.18),0 4px 16px rgba(201,169,110,0.12);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-xl:28px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --spring:cubic-bezier(0.34,1.38,0.64,1);
  --max-w-content:1200px;
  --max-w-article:780px;
  --nav-h:64px;
}

[x-cloak]{display:none !important;}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
  -webkit-text-size-adjust:100%;
  font-size:16px;
  scroll-behavior:smooth;
}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:radial-gradient(1200px 600px at 50% -200px, rgba(201,169,110,0.10), transparent 60%),
             linear-gradient(180deg, #06060A 0%, #08080D 50%, #06060A 100%);
  background-attachment:fixed;
  color:var(--text-primary);
  min-height:100vh;
  line-height:1.55;
}
img,svg{max-width:100%;display:block;}
a{color:var(--brand-secondary);text-decoration:none;transition:color .2s var(--ease);}
a:hover{color:var(--gold-bright);}
button{font:inherit;color:inherit;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;border-radius:6px;}

h1,h2,h3,h4,h5{
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  line-height:1.2;
  color:var(--text-primary);
}
h1{font-size:clamp(28px, 4vw, 44px);}
h2{font-size:clamp(22px, 2.6vw, 32px);}
h3{font-size:clamp(18px, 2vw, 22px);}
h4{font-size:16px;}
p{margin:0 0 1em;}

/* ─── Top nav ─────────────────────────────────────────────── */
.sup-nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  background:rgba(8,8,13,0.75);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--dark-border);
}
.sup-nav-inner{
  max-width:var(--max-w-content);
  margin:0 auto;
  height:100%;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:24px;
}
.sup-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-primary);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:-0.02em;
  text-decoration:none;
  flex-shrink:0;
}
.sup-brand:hover{color:var(--gold-bright);}
.sup-brand-mark{
  width:30px;height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-gradient);
  color:var(--brand-text-on);
  font-weight:800;
  font-size:15px;
  box-shadow:0 6px 18px rgba(201,169,110,0.4);
}
.sup-brand-word{font-weight:700;}
.sup-brand-tag{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-secondary);
  padding:3px 7px;
  border:1px solid var(--dark-border-light);
  border-radius:99px;
  margin-left:2px;
}
.sup-nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:18px;
}
.sup-nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:99px;
  color:var(--text-secondary);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.sup-nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,0.04);}
.sup-nav-link.is-active{
  color:var(--brand-text-on);
  background:var(--brand-gradient-soft);
  box-shadow:0 4px 12px rgba(201,169,110,0.25);
}
.sup-nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.sup-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 16px;
  border-radius:99px;
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.005em;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s var(--spring), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.sup-btn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;}
.sup-btn:active{transform:translateY(1px);}
.sup-btn-primary{
  background:var(--brand-gradient);
  color:var(--brand-text-on);
  box-shadow:0 6px 20px rgba(201,169,110,0.30);
}
.sup-btn-primary:hover{
  background:linear-gradient(168deg,#dfc070,#c49a3d 50%,#a8832e);
  box-shadow:0 10px 28px rgba(201,169,110,0.42);
  color:var(--brand-text-on);
}
.sup-btn-ghost{
  background:transparent;
  color:var(--text-primary);
  border-color:var(--dark-border-light);
}
.sup-btn-ghost:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--brand-primary);
  color:var(--text-primary);
}
.sup-btn-secondary{
  background:var(--dark-card);
  color:var(--text-primary);
  border-color:var(--dark-border-light);
}
.sup-btn-secondary:hover{
  background:var(--dark-card-2);
  border-color:var(--brand-primary);
}
.sup-btn-danger{
  background:rgba(248,113,113,0.08);
  color:var(--red);
  border-color:rgba(248,113,113,0.3);
}
.sup-btn-danger:hover{
  background:rgba(248,113,113,0.16);
  border-color:var(--red);
  color:#FCA5A5;
}
.sup-btn-sm{padding:6px 12px;font-size:13px;}
.sup-btn-lg{padding:13px 24px;font-size:15px;}

/* User menu */
.sup-user{position:relative;}
.sup-user-trigger{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 6px;
  background:transparent;border:1px solid var(--dark-border-light);
  border-radius:99px;color:var(--text-primary);
  transition:border-color .2s, background .2s;
}
.sup-user-trigger:hover{border-color:var(--brand-primary);background:rgba(255,255,255,0.04);}
.sup-user-avatar{
  width:28px;height:28px;border-radius:99px;
  background:var(--brand-gradient);color:var(--brand-text-on);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
.sup-user-name{font-size:14px;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sup-user-menu{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:220px;
  background:var(--dark-card-2);
  border:1px solid var(--dark-border-light);
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  padding:6px;
  z-index:60;
}
.sup-user-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;
  color:var(--text-primary);font-size:14px;
  text-decoration:none;
}
.sup-user-menu-item:hover{background:rgba(255,255,255,0.04);color:var(--text-primary);}
.sup-user-menu-item.is-danger{color:var(--red);}
.sup-user-menu-item.is-danger:hover{background:rgba(248,113,113,0.08);color:#FCA5A5;}
.sup-user-menu-divider{height:1px;background:var(--dark-border);margin:4px 0;}

/* Mobile burger */
.sup-nav-burger{
  display:none;
  margin-left:6px;
  width:40px;height:40px;
  background:transparent;border:1px solid var(--dark-border-light);
  border-radius:10px;
  position:relative;
}
.sup-nav-burger span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--text-primary);
  border-radius:2px;transition:transform .25s var(--ease), opacity .2s;
}
.sup-nav-burger span:nth-child(1){top:13px;}
.sup-nav-burger span:nth-child(2){top:19px;}
.sup-nav-burger span:nth-child(3){top:25px;}
body.sup-mobile-open .sup-nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.sup-mobile-open .sup-nav-burger span:nth-child(2){opacity:0;}
body.sup-mobile-open .sup-nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.sup-mobile-panel{
  display:none;
  background:var(--dark-surface);
  border-bottom:1px solid var(--dark-border);
  padding:14px 24px 18px;
}
.sup-mobile-link{
  display:block;padding:12px 4px;
  color:var(--text-primary);text-decoration:none;
  border-bottom:1px solid var(--dark-border);
  font-weight:500;
}
.sup-mobile-link:last-child{border-bottom:none;}
.sup-mobile-link.is-danger{color:var(--red);}
.sup-mobile-divider{height:1px;background:var(--dark-border);margin:6px 0;}
body.sup-mobile-open .sup-mobile-panel{display:block;}

@media (max-width:880px){
  .sup-nav-links{display:none;}
  .sup-nav-burger{display:inline-flex;align-items:center;justify-content:center;}
  .sup-user-name{display:none;}
}
@media (max-width:520px){
  .sup-nav-inner{padding:0 16px;gap:10px;}
  .sup-brand-tag{display:none;}
}

/* ─── Main ────────────────────────────────────────────────── */
.sup-main{
  max-width:var(--max-w-content);
  margin:0 auto;
  padding:28px 24px 64px;
}
@media (max-width:520px){
  .sup-main{padding:20px 16px 48px;}
}

/* Hero */
.sup-hero{
  text-align:center;
  padding:54px 16px 38px;
  border:1px solid var(--dark-border);
  border-radius:var(--radius-xl);
  background:
    radial-gradient(700px 280px at 50% 0%, var(--brand-tint-12), transparent 70%),
    linear-gradient(180deg, var(--dark-card), var(--dark-surface));
  margin-bottom:40px;
  position:relative;
  overflow:hidden;
}
.sup-hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.05), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.04), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.03), transparent);
  pointer-events:none;
}
.sup-hero-eyebrow{
  display:inline-block;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--brand-secondary);font-weight:600;
  padding:5px 12px;
  border:1px solid var(--brand-tint-25);
  border-radius:99px;
  background:var(--brand-tint-8);
  margin-bottom:18px;
  position:relative;
}
.sup-hero h1{
  font-size:clamp(32px, 5vw, 52px);
  margin-bottom:14px;
  position:relative;
}
.sup-hero p{
  color:var(--text-secondary);
  font-size:clamp(15px, 1.4vw, 18px);
  max-width:560px;margin:0 auto 26px;
  position:relative;
}
.sup-hero-search{
  max-width:560px;
  margin:0 auto;
  position:relative;
}
.sup-hero-search input{
  width:100%;
  padding:16px 56px 16px 50px;
  border-radius:99px;
  background:var(--dark-surface);
  border:1px solid var(--dark-border-light);
  color:var(--text-primary);
  font-size:15px;
  transition:border-color .2s, box-shadow .2s;
}
.sup-hero-search input:focus{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px rgba(201,169,110,0.15);
  outline:none;
}
.sup-hero-search-icon{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:20px;
}
.sup-hero-search-action{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:var(--brand-gradient);color:var(--brand-text-on);
  border:none;border-radius:99px;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .15s var(--spring);
  box-shadow:0 4px 12px rgba(201,169,110,0.3);
}
.sup-hero-search-action:hover{transform:translateY(-50%) scale(1.05);}
.sup-hero-search-action i{font-size:20px;}

/* Section heading */
.sup-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap;
}
.sup-section-title{
  font-size:22px;font-weight:700;margin:0;
}
.sup-section-action{
  font-size:14px;color:var(--brand-secondary);
  display:inline-flex;align-items:center;gap:4px;
}
.sup-section-action:hover{color:var(--gold-bright);}

/* Card grid */
.sup-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
  margin-bottom:48px;
}
.sup-card{
  background:linear-gradient(180deg, var(--dark-card), var(--dark-card-2));
  border:1px solid var(--dark-border);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
  min-height:170px;
  position:relative;
  overflow:hidden;
}
.sup-card::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(400px 200px at 100% 0%, var(--brand-tint-8), transparent 70%);
  opacity:0;
  transition:opacity .25s var(--ease);
  pointer-events:none;
}
.sup-card:hover{
  transform:translateY(-3px);
  border-color:var(--brand-tint-25);
  box-shadow:0 18px 50px rgba(0,0,0,0.4), 0 6px 16px var(--brand-tint-12);
}
.sup-card:hover::after{opacity:1;}
.sup-card-icon{
  width:48px;height:48px;
  border-radius:12px;
  background:var(--brand-tint-8);
  color:var(--brand-secondary);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  position:relative;
}
.sup-card-title{
  font-size:18px;font-weight:700;color:var(--text-primary);margin:0;
  position:relative;
}
.sup-card-body{
  font-size:14px;color:var(--text-secondary);line-height:1.6;
  flex:1;margin:0;position:relative;
}
.sup-card-meta{
  display:flex;align-items:center;gap:12px;
  font-size:12px;color:var(--text-muted);
  padding-top:10px;border-top:1px solid var(--dark-border);
  position:relative;
}

/* Sign-in panel */
.sup-auth-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - var(--nav-h) - 120px);
  padding:48px 16px;
}
.sup-auth-card{
  width:100%;max-width:420px;
  background:linear-gradient(180deg, var(--dark-card), var(--dark-card-2));
  border:1px solid var(--dark-border);
  border-radius:var(--radius-xl);
  padding:36px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.sup-auth-title{
  font-size:24px;font-weight:700;margin:0 0 6px;text-align:center;
}
.sup-auth-sub{
  text-align:center;color:var(--text-secondary);
  margin:0 0 26px;font-size:14px;
}
.sup-form-row{margin-bottom:14px;}
.sup-label{
  display:block;font-size:12px;font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px;
}
.sup-input,.sup-textarea,.sup-select{
  width:100%;
  padding:11px 14px;
  border-radius:10px;
  background:var(--dark-surface);
  border:1px solid var(--dark-border-light);
  color:var(--text-primary);
  font-size:15px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.sup-input:focus,.sup-textarea:focus,.sup-select:focus{
  outline:none;
  border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(201,169,110,0.15);
}
.sup-textarea{min-height:120px;resize:vertical;font-family:inherit;}
.sup-form-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.sup-form-actions .sup-btn{width:100%;}
.sup-form-foot{
  text-align:center;
  margin-top:18px;
  font-size:13px;color:var(--text-secondary);
}
.sup-form-error{
  background:rgba(248,113,113,0.08);
  border:1px solid rgba(248,113,113,0.35);
  color:#FCA5A5;
  padding:10px 12px;border-radius:8px;
  font-size:13px;margin-bottom:14px;
}

/* Article body */
.sup-article{
  max-width:var(--max-w-article);
  margin:24px auto;
  color:var(--text-primary);
  font-size:16px;line-height:1.75;
}
.sup-article h1{font-size:32px;margin:0 0 8px;}
.sup-article h2{font-size:24px;margin:36px 0 12px;border-bottom:1px solid var(--dark-border);padding-bottom:6px;}
.sup-article h3{font-size:19px;margin:28px 0 8px;}
.sup-article p{margin:0 0 1em;color:var(--text-primary);}
.sup-article ul,.sup-article ol{padding-left:1.3em;margin:0 0 1em;}
.sup-article li{margin:0 0 .4em;}
.sup-article code{
  background:rgba(255,255,255,0.06);
  padding:2px 6px;border-radius:5px;
  font-family:'JetBrains Mono','Menlo','Consolas',monospace;
  font-size:0.92em;color:var(--gold-light);
}
.sup-article pre{
  background:var(--dark-surface);
  border:1px solid var(--dark-border);
  padding:14px 16px;border-radius:10px;
  overflow-x:auto;
  margin:0 0 1.2em;
}
.sup-article pre code{background:none;padding:0;color:var(--text-primary);}
.sup-article a{color:var(--brand-secondary);text-decoration:underline;text-decoration-color:rgba(223,192,138,0.35);text-underline-offset:3px;}
.sup-article a:hover{color:var(--gold-bright);}
.sup-article img{
  border:1px solid var(--dark-border);
  border-radius:8px;
  margin:1em auto;
}
.sup-article blockquote{
  border-left:3px solid var(--brand-primary);
  padding:8px 16px;margin:1em 0;
  background:var(--brand-tint-4);
  border-radius:0 8px 8px 0;
  color:var(--text-secondary);
}

/* Article meta header (KB-0001 · category · view count · stars) */
.sup-article-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  color:var(--text-secondary);font-size:13px;
  margin-bottom:18px;
}
.sup-article-meta .badge{
  background:var(--brand-tint-8);color:var(--brand-secondary);
  border:1px solid var(--brand-tint-18);
  padding:3px 10px;border-radius:99px;
  font-weight:600;font-size:12px;
  letter-spacing:0.04em;
}

/* Footer */
.sup-foot{
  margin-top:64px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  border-top:1px solid var(--dark-border);
  padding:48px 24px 28px;
}
.sup-foot-inner{
  max-width:var(--max-w-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr repeat(3, 1fr);
  gap:36px;
}
.sup-foot-col a{
  display:block;
  font-size:14px;
  color:var(--text-secondary);
  text-decoration:none;
  margin-bottom:6px;
  transition:color .15s;
}
.sup-foot-col a:hover{color:var(--text-primary);}
.sup-foot-label{
  font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-primary);
  margin-bottom:10px;
}
.sup-foot-brand{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--text-primary);font-weight:700;font-size:16px;
  text-decoration:none;
  margin-bottom:10px;
}
.sup-foot-tag{color:var(--text-secondary);font-size:13px;max-width:280px;margin:0;}
.sup-foot-base{
  max-width:var(--max-w-content);margin:32px auto 0;
  padding-top:18px;border-top:1px solid var(--dark-border);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--text-muted);font-size:12px;
  flex-wrap:wrap;gap:8px;
}
.sup-foot-base-right a{color:var(--text-muted);text-decoration:none;}
.sup-foot-base-right a:hover{color:var(--text-secondary);}
@media (max-width:760px){
  .sup-foot-inner{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:480px){
  .sup-foot-inner{grid-template-columns:1fr;}
}

/* Status-pill helpers */
.sup-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:600;letter-spacing:0.02em;
}
.sup-pill-open       {background:rgba(96,165,250,0.12);color:#93C5FD;border:1px solid rgba(96,165,250,0.35);}
.sup-pill-progress   {background:rgba(251,191,36,0.12);color:#FBBF24;border:1px solid rgba(251,191,36,0.35);}
.sup-pill-pending    {background:rgba(167,139,250,0.12);color:#C4B5FD;border:1px solid rgba(167,139,250,0.35);}
.sup-pill-resolved   {background:rgba(52,211,153,0.12);color:#6EE7B7;border:1px solid rgba(52,211,153,0.35);}
.sup-pill-closed     {background:rgba(148,148,162,0.12);color:var(--text-secondary);border:1px solid rgba(148,148,162,0.35);}
.sup-pill-urgent     {background:rgba(248,113,113,0.12);color:#FCA5A5;border:1px solid rgba(248,113,113,0.4);}
.sup-pill-high       {background:rgba(251,146,60,0.12);color:#FED7AA;border:1px solid rgba(251,146,60,0.35);}
.sup-pill-medium     {background:rgba(96,165,250,0.10);color:#BFDBFE;border:1px solid rgba(96,165,250,0.30);}
.sup-pill-low        {background:rgba(148,148,162,0.10);color:var(--text-secondary);border:1px solid rgba(148,148,162,0.30);}

/* Tables */
.sup-table-wrap{
  background:var(--dark-card);
  border:1px solid var(--dark-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.sup-table{
  width:100%;border-collapse:collapse;
  font-size:14px;
}
.sup-table thead th{
  background:var(--dark-surface);
  text-align:left;padding:12px 16px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-secondary);
  border-bottom:1px solid var(--dark-border);
}
.sup-table tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--dark-border);
  color:var(--text-primary);
}
.sup-table tbody tr:last-child td{border-bottom:none;}
.sup-table tbody tr:hover{background:rgba(255,255,255,0.02);}
.sup-table a{color:var(--text-primary);text-decoration:none;}
.sup-table a:hover{color:var(--brand-secondary);}

/* Empty state */
.sup-empty{
  text-align:center;
  padding:48px 24px;
  background:var(--dark-card);
  border:1px dashed var(--dark-border-light);
  border-radius:var(--radius-lg);
  color:var(--text-secondary);
}
.sup-empty i{
  font-size:42px;color:var(--text-muted);margin-bottom:10px;
}
.sup-empty h3{font-size:18px;margin:0 0 4px;color:var(--text-primary);}
.sup-empty p{margin:0;font-size:14px;}

/* Star rating */
.sup-stars{display:inline-flex;align-items:center;gap:2px;}
.sup-stars i{font-size:18px;color:var(--text-disabled);}
.sup-stars i.is-filled{color:var(--brand-primary);}
.sup-stars-input i{cursor:pointer;transition:color .12s, transform .12s var(--spring);}
.sup-stars-input i:hover{color:var(--gold-bright);transform:scale(1.15);}

/* Utility */
.muted{color:var(--text-secondary);}
.mut-sm{color:var(--text-secondary);font-size:13px;}
.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;} .gap-6{gap:24px;}
.mt-2{margin-top:8px;} .mt-4{margin-top:16px;} .mt-6{margin-top:24px;} .mt-8{margin-top:32px;}
.mb-2{margin-bottom:8px;} .mb-4{margin-bottom:16px;} .mb-6{margin-bottom:24px;}
.text-center{text-align:center;}
.w-full{width:100%;}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ─── Page-specific styles (extracted from inline blocks 2026-05-22) ─── */
/* All page chrome moved here so the render-blocking core.css covers everything */
/* — no FOUC between first paint and inline-style parse. */

/* ---- forum/index.php ---- */
.sup-forum-sections { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sup-forum-section { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; transition: border-color .2s, transform .2s; }
.sup-forum-section:hover { border-color: var(--brand-tint-25); transform: translateY(-1px); color: var(--text-primary); }
.sup-forum-section-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-tint-8); color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.sup-forum-section-body { flex: 1; min-width: 0; }
.sup-forum-section-body h2 { margin: 0 0 4px; font-size: 17px; }
.sup-forum-section-body p { margin: 0 0 6px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.sup-forum-section-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sup-forum-section-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-forum-section-meta i { font-size: 14px; }
.sup-forum-section-arrow { font-size: 22px; color: var(--text-muted); }
.sup-forum-signin-prompt { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-top: 24px; background: var(--dark-card); border: 1px solid var(--dark-border-light); border-radius: var(--radius-md); color: var(--text-secondary); }
.sup-forum-signin-prompt i { color: var(--brand-secondary); font-size: 20px; }

/* ---- forum/section.php ---- */
.sup-forum-page { max-width: 920px; margin: 12px auto 40px; }
.sup-crumbs { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.sup-crumbs a { color: var(--text-secondary); text-decoration: none; }
.sup-crumbs a:hover { color: var(--brand-secondary); }

.sup-forum-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--dark-border); flex-wrap: wrap; }
.sup-forum-h-left { display: flex; gap: 14px; align-items: center; }
.sup-forum-h-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint-8); color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sup-forum-h h1 { margin: 0 0 3px; font-size: 24px; }
.sup-forum-h p { margin: 0; color: var(--text-secondary); font-size: 13px; }

.sup-thread-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sup-thread-row { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); }
.sup-thread-row:hover { border-color: var(--brand-tint-25); }
.sup-thread-link { display: block; padding: 14px 18px; color: inherit; text-decoration: none; }
.sup-thread-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.sup-thread-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sup-thread-pinned { color: var(--brand-primary); font-size: 16px; }
.sup-thread-locked { color: var(--text-muted); font-size: 16px; }
.sup-thread-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sup-thread-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-thread-meta i { font-size: 14px; }

/* ---- forum/thread.php ---- */
.sup-thread-page { max-width: 880px; margin: 12px auto 40px; }
.sup-thread-hdr { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--dark-border); }
.sup-thread-hdr h1 { font-size: 24px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-thread-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sup-thread-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-thread-meta i { font-size: 14px; }

.sup-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sup-post { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 16px 18px; }
.sup-post.is-op { border-left: 3px solid var(--brand-primary); background: linear-gradient(180deg, rgba(201,169,110,0.04), var(--dark-card)); }
.sup-post-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary); }
.sup-post-meta strong { color: var(--text-primary); font-weight: 600; }
.sup-post-meta time { font-size: 12px; color: var(--text-muted); }
.sup-post-meta .muted { font-size: 11px; }
.sup-post-op { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 99px; background: var(--brand-tint-12); color: var(--brand-primary); border: 1px solid var(--brand-tint-25); margin-left: 4px; }
.sup-post-body { color: var(--text-primary); font-size: 14px; line-height: 1.65; }
.sup-post-body p { margin: 0 0 .8em; }
.sup-post-body p:last-child { margin: 0; }
.sup-post-body a { color: var(--brand-secondary); }
.sup-post-body code { background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; }

.sup-post-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dark-border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sup-post-reactions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sup-react { background: rgba(255,255,255,0.04); border: 1px solid var(--dark-border); color: var(--text-secondary); padding: 4px 10px; border-radius: 99px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background .15s, border-color .15s; }
.sup-react:hover { background: rgba(255,255,255,0.06); border-color: var(--brand-tint-25); }
.sup-react.on { background: var(--brand-tint-12); border-color: var(--brand-primary); color: var(--text-primary); }
.sup-react .n { font-size: 11px; color: var(--text-secondary); }
.sup-post-extra { display: inline-flex; gap: 6px; }
.sup-post-link { background: transparent; border: 0; color: var(--text-secondary); cursor: pointer; font-size: 12px; padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
.sup-post-link:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }

.sup-edit-form { margin-top: 12px; flex-direction: column; gap: 8px; }
.sup-edit-form textarea { width: 100%; background: var(--dark-surface); border: 1px solid var(--dark-border-light); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font: inherit; resize: vertical; }
.sup-edit-form-actions { display: flex; gap: 8px; justify-content: flex-end; }

.sup-thread-reply { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--dark-border); }
.sup-thread-reply label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.sup-thread-reply label .muted { color: var(--text-muted); }
.sup-thread-reply textarea { width: 100%; background: var(--dark-surface); border: 1px solid var(--dark-border-light); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font: inherit; resize: vertical; min-height: 100px; }
.sup-thread-reply textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); }
.sup-thread-reply-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

.sup-thread-signin { margin-top: 24px; padding: 14px 18px; background: var(--dark-card); border: 1px solid var(--dark-border-light); border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; color: var(--text-secondary); }
.sup-thread-signin i { color: var(--brand-secondary); font-size: 20px; }

.sup-report-modal { position: fixed; inset: 0; background: rgba(8,8,13,0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; }
.sup-report-card { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-xl); padding: 28px 26px; max-width: 460px; width: 100%; }
.sup-report-card h3 { margin: 0 0 16px; font-size: 18px; }
.sup-report-actions { display: flex; gap: 8px; justify-content: flex-end; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
.form-row select, .form-row textarea { width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--dark-surface); border: 1px solid var(--dark-border-light); color: var(--text-primary); font: inherit; }
.form-row textarea { resize: vertical; }

/* ---- forum/new-thread.php ---- */
.sup-newthread-wrap { max-width: 760px; margin: 12px auto 60px; }
.sup-newthread-wrap h1 { margin: 8px 0 4px; }
.sup-newthread-wrap .muted { color: var(--text-secondary); margin: 0 0 22px; }
.sup-newthread-wrap .muted strong { color: var(--text-primary); }
.sup-newthread-form { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 22px 22px 24px; }
.sup-crumbs { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.sup-crumbs a { color: var(--text-secondary); text-decoration: none; }
.sup-crumbs a:hover { color: var(--brand-secondary); }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
.form-row input, .form-row textarea { width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--dark-surface); border: 1px solid var(--dark-border-light); color: var(--text-primary); font: inherit; }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); }
.form-row textarea { resize: vertical; min-height: 180px; line-height: 1.55; }
.sup-newthread-actions { display: flex; gap: 8px; }

/* ---- forum/me.php ---- */
.sup-prof-edit { max-width: 640px; margin: 12px auto 60px; }
.sup-prof-edit h1 { margin: 8px 0 6px; }
.sup-prof-edit .muted { color: var(--text-secondary); margin: 0 0 22px; }
.sup-prof-form { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 22px 22px 24px; }
.sup-crumbs { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.sup-crumbs a { color: var(--text-secondary); text-decoration: none; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
.form-row label .muted { color: var(--text-muted); text-transform: none; font-weight: 400; letter-spacing: 0; }
.form-row input, .form-row textarea { width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--dark-surface); border: 1px solid var(--dark-border-light); color: var(--text-primary); font: inherit; }
.form-row textarea { resize: vertical; }
.sup-prof-stats { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid var(--dark-border); border-bottom: 1px solid var(--dark-border); margin: 8px 0 18px; }
.sup-prof-stats div { flex: 1; text-align: center; }
.sup-prof-stats .n { display: block; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.sup-prof-stats .l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-top: 2px; }
.sup-prof-actions { display: flex; gap: 8px; }
.sup-form-ok { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.35); color: #6EE7B7; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }

/* ---- forum/profile.php ---- */
.sup-prof-view { max-width: 760px; margin: 12px auto 60px; }
.sup-crumbs { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.sup-crumbs a { color: var(--text-secondary); text-decoration: none; }

.sup-prof-header { display: flex; gap: 18px; align-items: flex-start; padding: 22px; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); margin-bottom: 24px; }
.sup-prof-avatar { width: 64px; height: 64px; border-radius: 99px; background: var(--brand-gradient); color: var(--brand-text-on); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; flex-shrink: 0; }
.sup-prof-main { flex: 1; min-width: 0; }
.sup-prof-main h1 { margin: 0 0 6px; font-size: 22px; }
.sup-prof-bio { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.sup-prof-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.sup-prof-stats strong { color: var(--text-primary); }
.sup-prof-section { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 0 0 12px; }
.sup-prof-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sup-prof-posts li { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); }
.sup-prof-posts li:hover { border-color: var(--brand-tint-25); }
.sup-prof-post-link { display: block; padding: 14px 16px; text-decoration: none; color: inherit; }
.sup-prof-post-h { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; font-size: 13px; }
.sup-prof-post-h strong { color: var(--text-primary); }
.sup-prof-post-h time { color: var(--text-muted); margin-left: auto; font-size: 12px; }
.muted-sm { color: var(--text-muted); font-size: 12px; }
.sup-prof-post-body { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.sup-prof-post-body p { margin: 0; }

/* ---- tickets/index.php ---- */
.sup-tk-page { max-width: 920px; margin: 12px auto 40px; }
.sup-tk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.sup-tk-head h1 { margin: 0 0 4px; font-size: 28px; }
.sup-tk-head .muted { color: var(--text-secondary); margin: 0; }
.sup-tk-sec-h { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 28px 0 12px; display: flex; align-items: center; gap: 8px; }
.sup-tk-sec-h.closed { color: var(--text-muted); }
.sup-tk-count { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,0.04); border: 1px solid var(--dark-border); }
.sup-tk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sup-tk-row { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); transition: border-color .2s, transform .2s; }
.sup-tk-row:hover { border-color: var(--brand-tint-25); transform: translateY(-1px); }
.sup-tk-row-link { display: block; padding: 14px 16px; text-decoration: none; color: inherit; }
.sup-tk-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sup-tk-num { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-secondary); padding: 2px 8px; border: 1px solid var(--dark-border); background: rgba(255,255,255,0.02); border-radius: 99px; }
.sup-tk-row-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.sup-tk-row-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sup-tk-row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-tk-row-meta i { font-size: 14px; }
.sup-pill-pendingcustomer { background: rgba(167,139,250,0.12); color: #C4B5FD; border: 1px solid rgba(167,139,250,0.35); padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.sup-pill-inprogress { background: rgba(251,191,36,0.12); color: #FBBF24; border: 1px solid rgba(251,191,36,0.35); padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }

/* ---- tickets/new.php ---- */
.sup-newtk { max-width: 1120px; margin: 12px auto 40px; }
.sup-newtk-back { color: var(--text-secondary); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.sup-newtk-back:hover { color: var(--text-primary); }
.sup-newtk-head { margin-bottom: 22px; }
.sup-newtk-head h1 { margin: 0 0 6px; font-size: 28px; }
.sup-newtk-head p { color: var(--text-secondary); margin: 0; max-width: 680px; }

.sup-newtk-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 920px) { .sup-newtk-grid { grid-template-columns: 1fr; } .sup-newtk-side { order: -1; } }

.sup-newtk-main { display: flex; flex-direction: column; gap: 0; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 6px; }
.form-row label .muted { color: var(--text-muted); text-transform: none; font-weight: 400; letter-spacing: 0; }
.form-row input, .form-row textarea, .form-row select {
    width: 100%; padding: 12px 14px;
    border-radius: 10px;
    background: var(--dark-surface);
    border: 1px solid var(--dark-border-light);
    color: var(--text-primary); font: inherit; font-size: 15px;
}
.form-row input[readonly] { background: var(--dark-card); color: var(--text-secondary); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); }
.form-row textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .form-row.split { grid-template-columns: 1fr; } }

.sup-newtk-submit { display: flex; gap: 10px; margin-top: 10px; }

.sup-newtk-side { display: flex; flex-direction: column; gap: 16px; }
.sup-newtk-kb { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: 18px 18px; transition: border-color .25s; }
.sup-newtk-kb.is-open { border-color: var(--brand-tint-25); background: linear-gradient(180deg, var(--dark-card), var(--dark-card-2)); }
.sup-newtk-kb-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sup-newtk-kb-h i { color: var(--brand-primary); font-size: 18px; }
.sup-newtk-kb-sub { font-size: 13px; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.5; }
.sup-newtk-kb-loading { font-size: 13px; color: var(--text-secondary); margin-top: 10px; }
.sup-newtk-kb-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.sup-newtk-kb-item { background: var(--dark-surface); border: 1px solid var(--dark-border); border-radius: 10px; padding: 12px 14px; }
.sup-newtk-kb-title { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-primary); font-weight: 600; text-decoration: none; }
.sup-newtk-kb-title:hover { color: var(--brand-secondary); }
.sup-newtk-kb-title code { font-size: 11px; color: var(--brand-primary); padding: 1px 6px; border: 1px solid var(--brand-tint-25); border-radius: 99px; background: var(--brand-tint-8); }
.sup-newtk-kb-title i { font-size: 13px; color: var(--text-muted); }
.sup-newtk-kb-summary { font-size: 13px; color: var(--text-secondary); margin: 4px 0 8px; line-height: 1.5; }
.sup-newtk-kb-resolve { background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.35); color: #6EE7B7; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s; }
.sup-newtk-kb-resolve:hover { background: rgba(52,211,153,0.20); color: #A7F3D0; }

.sup-newtk-tip { display: flex; gap: 12px; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 14px; }
.sup-newtk-tip i { color: var(--brand-secondary); font-size: 22px; flex-shrink: 0; }
.sup-newtk-tip strong { display: block; font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.sup-newtk-tip p { color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin: 0; }

.sup-newtk-deflected { position: fixed; inset: 0; background: rgba(8,8,13,0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.sup-newtk-deflected-card { background: linear-gradient(180deg, var(--dark-card), var(--dark-card-2)); border: 1px solid var(--dark-border); border-radius: var(--radius-xl); padding: 36px 32px; text-align: center; max-width: 480px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.sup-newtk-deflected-card i { font-size: 48px; color: #34D399; margin-bottom: 12px; display: block; }
.sup-newtk-deflected-card h2 { font-size: 24px; margin: 0 0 6px; }
.sup-newtk-deflected-card p { color: var(--text-secondary); margin: 0; line-height: 1.55; }
.sup-newtk-undo { background: transparent; border: 0; color: var(--brand-secondary); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; font-size: 13px; }

/* ---- tickets/view.php ---- */
.sup-tk-view { max-width: 820px; margin: 12px auto 40px; }
.sup-newtk-back { color: var(--text-secondary); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.sup-newtk-back:hover { color: var(--text-primary); }

.sup-tk-view-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--dark-border); }
.sup-tk-view-head-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.sup-tk-view-head h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.sup-tk-view-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sup-tk-view-meta span { display: inline-flex; align-items: center; gap: 4px; }

.sup-tk-kbs { background: var(--dark-card); border: 1px solid var(--dark-border-light); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; }
.sup-tk-kbs-h { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; font-size: 14px; }
.sup-tk-kbs-h i { color: var(--brand-primary); }
.sup-tk-kbs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sup-tk-kbs li { display: flex; align-items: center; gap: 8px; }
.sup-tk-kbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); text-decoration: none; }
.sup-tk-kbs a:hover { color: var(--brand-secondary); }
.sup-tk-kbs code { font-size: 11px; color: var(--brand-primary); padding: 1px 6px; border: 1px solid var(--brand-tint-25); background: var(--brand-tint-8); border-radius: 99px; }
.sup-tk-kb-tag { background: rgba(52,211,153,0.10); color: #6EE7B7; padding: 1px 8px; border-radius: 99px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid rgba(52,211,153,0.30); }

.sup-tk-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.sup-tk-msg { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 14px 16px; }
.sup-tk-msg.staff { border-left: 3px solid var(--brand-primary); background: linear-gradient(180deg, rgba(201,169,110,0.06), var(--dark-card)); }
.sup-tk-msg.mine  { border-left: 3px solid #60A5FA; }
.sup-tk-msg.sys   { background: rgba(255,255,255,0.02); color: var(--text-secondary); font-size: 13px; }
.sup-tk-msg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.sup-tk-msg-head strong { color: var(--text-primary); font-weight: 600; }
.sup-tk-msg-head time { color: var(--text-muted); font-size: 12px; }
.sup-tk-msg-body { color: var(--text-primary); font-size: 14px; line-height: 1.6; }
.sup-tk-msg-body p { margin: 0 0 .6em; }
.sup-tk-msg-body p:last-child { margin: 0; }
.sup-tk-msg-body code { background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; color: var(--gold-light); }
.sup-tk-msg-body a { color: var(--brand-secondary); }

.sup-tk-attachments { margin-bottom: 24px; }
.sup-tk-attachments h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 10px; }
.sup-tk-attachments ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.sup-tk-attachments a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-size: 13px; }
.sup-tk-attachments a:hover { border-color: var(--brand-tint-25); }
.sup-tk-attachments i { color: var(--brand-secondary); font-size: 18px; }
.sup-tk-attachments .muted { color: var(--text-muted); margin-left: auto; font-size: 12px; }

.sup-tk-reply { margin-top: 26px; }
.sup-tk-reply h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0 0 10px; }
.sup-tk-reply textarea { width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--dark-surface); border: 1px solid var(--dark-border-light); color: var(--text-primary); font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; min-height: 120px; }
.sup-tk-reply textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); }
.sup-tk-reply-attach label { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.sup-tk-reply-attach i { color: var(--brand-secondary); font-size: 16px; }
.sup-tk-reply-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---- includes/article-browse.php ---- */
.sup-browse { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 18px; }
@media (max-width: 880px){ .sup-browse { grid-template-columns: 1fr; } }
.sup-browse-side { display: flex; flex-direction: column; gap: 16px; }
.sup-browse-card { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); padding: 14px 16px; }
.sup-browse-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 8px; }
.sup-browse-list { list-style: none; padding: 0; margin: 0; }
.sup-browse-list li { margin: 0; }
.sup-browse-list a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; color: var(--text-secondary); text-decoration: none; border-radius: 8px; font-size: 14px; }
.sup-browse-list a:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.sup-browse-list a.is-active { background: var(--brand-tint-12); color: var(--text-primary); }
.sup-browse-list .muted { font-size: 12px; color: var(--text-muted); margin-left: 6px; }

.sup-browse-main { min-width: 0; }
.sup-browse-summary { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sup-browse-summary strong { color: var(--text-primary); font-weight: 700; }
.sup-browse-clear { font-size: 13px; color: var(--brand-secondary); margin-left: 6px; }

.sup-art-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sup-art-row { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-md); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.sup-art-row:hover { border-color: var(--brand-tint-25); transform: translateY(-1px); }
.sup-art-row-link { display: block; padding: 16px 18px; text-decoration: none; color: inherit; }
.sup-art-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sup-art-num { font-size: 11px; font-family: ui-monospace, monospace; color: var(--brand-primary); padding: 2px 8px; border: 1px solid var(--brand-tint-25); background: var(--brand-tint-8); border-radius: 99px; flex-shrink: 0; }
.sup-art-row-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0; }
.sup-art-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 2px 8px; border: 1px solid var(--dark-border-light); border-radius: 99px; }
.sup-art-row-summary { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 4px 0 10px; }
.sup-art-row-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.sup-art-row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.sup-art-row-meta i { font-size: 14px; }

/* ---- includes/article-read.php ---- */
.sup-art-page { max-width: 860px; margin: 12px auto 60px; }
.sup-crumbs { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.sup-crumbs a { color: var(--text-secondary); text-decoration: none; }
.sup-crumbs a:hover { color: var(--brand-secondary); }
.sup-crumbs span { color: var(--text-muted); }

.sup-article-head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--dark-border); }
.sup-article-head h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 10px; line-height: 1.15; }
.sup-article-lede { font-size: 17px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.6; }

.sup-article-body { color: var(--text-primary); font-size: 16px; line-height: 1.75; }
.sup-article-body h2 { margin-top: 1.6em; margin-bottom: .4em; padding-bottom: .25em; border-bottom: 1px solid var(--dark-border); }
.sup-article-body h3 { margin-top: 1.4em; margin-bottom: .3em; }
.sup-article-body p { margin: 0 0 1.1em; }
.sup-article-body ul, .sup-article-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.sup-article-body li { margin: 0 0 .4em; }
.sup-article-body code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 5px; font-size: 0.92em; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--gold-light); }
.sup-article-body pre { background: var(--dark-surface); border: 1px solid var(--dark-border); padding: 14px 16px; border-radius: 10px; overflow-x: auto; margin: 0 0 1.1em; }
.sup-article-body pre code { background: transparent; padding: 0; color: var(--text-primary); }
.sup-article-body a { color: var(--brand-secondary); text-decoration: underline; text-decoration-color: rgba(223,192,138,0.35); text-underline-offset: 3px; }
.sup-article-body a:hover { color: var(--gold-bright); }
.sup-article-body blockquote { border-left: 3px solid var(--brand-primary); background: var(--brand-tint-4); padding: 10px 18px; margin: 1.2em 0; border-radius: 0 8px 8px 0; color: var(--text-secondary); }
.sup-article-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.sup-article-body th, .sup-article-body td { text-align: left; padding: 8px 12px; border: 1px solid var(--dark-border); }
.sup-article-body th { background: var(--dark-surface); color: var(--text-primary); font-weight: 700; }

.sup-article-rate { margin: 40px 0 12px; padding: 24px 22px; background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); text-align: center; }
.sup-article-rate h2 { font-size: 18px; margin: 0 0 12px; }
.sup-article-rate .sup-stars { justify-content: center; gap: 6px; margin-bottom: 8px; }
.sup-article-rate .sup-stars i { font-size: 30px; }
.sup-stars-current { display: inline-block; margin-left: 12px; font-size: 14px; color: var(--text-secondary); }
.sup-rate-status { color: var(--green); font-size: 14px; margin: 6px 0 0; }

.sup-article-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--dark-border); }

/* ---- includes/coming-soon.php ---- */
.sup-coming{
  max-width:540px;margin:60px auto;text-align:center;
  background:linear-gradient(180deg, var(--dark-card), var(--dark-card-2));
  border:1px solid var(--dark-border);
  border-radius:var(--radius-xl);
  padding:48px 32px 36px;
}
.sup-coming-icon{
  width:72px;height:72px;border-radius:18px;
  background:var(--brand-tint-8);color:var(--brand-secondary);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;margin:0 auto 18px;
}
.sup-coming h1{font-size:28px;margin:0 0 6px;}
.sup-coming-phase{
  display:inline-block;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--brand-secondary);font-weight:600;
  padding:4px 12px;
  border:1px solid var(--brand-tint-25);
  border-radius:99px;
  background:var(--brand-tint-8);
  margin:6px 0 14px;
}
.sup-coming-body{color:var(--text-secondary);margin:0 0 22px;font-size:15px;line-height:1.6;}
.sup-coming-actions{display:flex;justify-content:center;gap:10px;}