/* ===== SUPPORT / TICKETS (user page + admin) - site gold + navy theme ===== */
#page-support{padding:12px 14px 90px!important;max-width:440px!important;margin:0 auto!important}
.sp-wrap{display:flex;flex-direction:column;gap:14px;font-family:'Poppins','Inter',system-ui,sans-serif}
.sp-wrap *{box-sizing:border-box}
.sp-card{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(158,109,213,.38);background:linear-gradient(150deg,#29183d 0%,#1b1027 60%,#211330 100%);box-shadow:0 12px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);padding:16px}
.sp-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(125,91,220,.7),#b079ef 70%,#813bd0)}
.sp-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;color:#9053d6;font:800 12px 'JetBrains Mono',monospace;letter-spacing:.2em}
.sp-title b{color:#b3a591;font-weight:700;letter-spacing:.06em}

/* top 2 telegram buttons */
.sp-links{display:grid;gap:12px}
.sp-link{display:flex;align-items:center;gap:13px;padding:14px;border-radius:20px;text-decoration:none;color:#fff;border:1px solid rgba(158,109,213,.5);background:linear-gradient(150deg,#29183d,#1b1027);box-shadow:0 10px 26px rgba(0,0,0,.38);transition:transform .12s ease}
.sp-link:active{transform:scale(.98)}
.sp-link .ic{flex:0 0 52px;height:52px;border-radius:17px;display:grid;place-items:center;color:#fff}
.sp-link.s .ic{background:linear-gradient(145deg,#c18dfc,#862eeb);color:#0f0619;box-shadow:0 8px 20px rgba(134,46,235,.3)}
.sp-link.c .ic{background:linear-gradient(145deg,#38b6ff,#1d7bd8);box-shadow:0 8px 20px rgba(230,110,40,.3)}
.sp-link .ic svg{width:27px;height:27px}
.sp-link .tx{min-width:0;flex:1}
.sp-link .tx b{display:block;font:800 16px/1.2 'Poppins',sans-serif;letter-spacing:.5px;color:#fff;word-break:break-word}
.sp-link .tx small{display:block;margin-top:3px;font:500 12px 'Poppins',sans-serif;color:#ac97c5}
.sp-link .ar{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2d1a42;border:1px solid #472a68;color:#9053d6}
.sp-link .ar svg{width:17px;height:17px}

/* buttons / inputs */
.sp-btn{width:100%;height:50px;border:0;border-radius:15px;cursor:pointer;font:800 14px 'Poppins',sans-serif;letter-spacing:.5px;color:#0f0619;background:linear-gradient(135deg,#bf92f3,#823ed0);box-shadow:0 8px 22px rgba(129,59,208,.32);display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s ease}
.sp-btn:active{transform:scale(.97)}.sp-btn[disabled]{opacity:.6;cursor:wait}
.sp-btn.ghost{background:transparent;color:#9053d6;border:1px solid rgba(158,109,213,.5);box-shadow:none}
.sp-btn.green{background:linear-gradient(135deg,#4ade80,#16a34a);color:#04210f;box-shadow:0 8px 22px rgba(34,197,94,.28)}
.sp-btn.red{background:transparent;color:#ff7c86;border:1px solid rgba(242,84,91,.45);box-shadow:none}
.sp-btn.sm{height:40px;font-size:12.5px;border-radius:12px}
.sp-lab{display:block;margin:12px 0 6px;color:#bcadcd;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.14em}
.sp-lab i{color:#b3a591;font-style:normal;font-weight:500;letter-spacing:.02em}
.sp-in,.sp-sel,.sp-ta{width:100%;border:1px solid #3f255d;border-radius:13px;background:#170e22;color:#f1f4fa;font:500 14px 'Inter',sans-serif;padding:12px 13px;outline:none}
.sp-in:focus,.sp-sel:focus,.sp-ta:focus{border-color:rgba(158,109,213,.7)}
.sp-ta{min-height:110px;resize:vertical;line-height:1.5}
.sp-sel{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9053d6 50%),linear-gradient(135deg,#9053d6 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.sp-msg{min-height:18px;margin-top:10px;font-size:13px;text-align:center;color:#c3b9ab}.sp-msg.err{color:#ff7c86}.sp-msg.ok{color:#4ade80}

/* screenshot picker */
.sp-up{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1.5px dashed rgba(158,109,213,.45);background:rgba(158,109,213,.05);cursor:pointer;color:#9053d6;font:700 13px 'Poppins',sans-serif}
.sp-up svg{width:24px;height:24px;flex:0 0 24px}
.sp-up small{display:block;color:#b3a591;font-weight:500;font-size:11px}
.sp-prev{position:relative;margin-top:10px;display:none}
.sp-prev img{width:100%;max-height:220px;object-fit:contain;border-radius:12px;border:1px solid #3f255d;background:#0b0711}
.sp-prev button{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:16px;cursor:pointer}

/* ticket list */
.sp-tk{display:block;width:100%;text-align:left;padding:14px;border-radius:18px;border:1px solid #3f255d;background:#251636;color:#fff;cursor:pointer;margin-bottom:10px;transition:border-color .15s}
.sp-tk:active{border-color:rgba(158,109,213,.65)}
.sp-tk-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-tk-id{font:800 12px 'JetBrains Mono',monospace;color:#9053d6;letter-spacing:.08em}
.sp-tk-sub{margin:7px 0 3px;font:700 14.5px/1.3 'Poppins',sans-serif;color:#fff;word-break:break-word}
.sp-tk-last{font:500 12.5px/1.4 'Inter',sans-serif;color:#ac97c5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.sp-tk-foot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font:500 11px 'Inter',sans-serif;color:#a99981}
.sp-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font:800 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;border:1px solid}
.sp-pill.open{color:#862eeb;border-color:rgba(134,46,235,.5);background:rgba(134,46,235,.1)}
.sp-pill.answered{color:#38bdf8;border-color:rgba(56,189,248,.5);background:rgba(245,127,59,.1)}
.sp-pill.solved{color:#4ade80;border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1)}
.sp-new{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;margin-left:6px;vertical-align:middle}
.sp-empty{padding:26px 10px;text-align:center;color:#b3a591;font-size:13px}
.sp-empty b{display:block;font-size:30px;margin-bottom:6px}

/* chat */
.sp-chat{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto;padding:4px 2px;-webkit-overflow-scrolling:touch}
.sp-b{max-width:88%;padding:10px 12px;border-radius:16px;font:500 13.5px/1.5 'Inter',sans-serif;word-break:break-word;white-space:pre-wrap}
.sp-b small{display:block;margin-top:6px;font-size:10.5px;opacity:.7;white-space:normal}
.sp-b.user{align-self:flex-end;background:linear-gradient(135deg,#bf92f3,#823ed0);color:#0f0619;border-bottom-right-radius:5px}
.sp-b.admin{align-self:flex-start;background:#311d48;color:#eef3ff;border:1px solid #472a68;border-bottom-left-radius:5px}
.sp-b.admin em{display:block;margin-bottom:4px;font:800 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#9053d6;font-style:normal}
.sp-b.sys{align-self:center;max-width:100%;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.4);color:#4ade80;text-align:center;font-weight:700;font-size:12px}
.sp-b img{display:block;margin-top:8px;max-width:100%;max-height:200px;border-radius:10px;cursor:zoom-in}
.sp-solved{padding:12px;border-radius:14px;text-align:center;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.4);color:#4ade80;font:700 13px 'Poppins',sans-serif}
.sp-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.sp-meta div{padding:9px 10px;border-radius:12px;background:#170e22;border:1px solid #3f255d;min-width:0}
.sp-meta em{display:block;font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#b3a591;font-style:normal}
.sp-meta b{display:block;margin-top:3px;font:700 12.5px 'Poppins',sans-serif;color:#fff;word-break:break-word}
.sp-zoom{position:fixed;inset:0;z-index:2147483640;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:14px}
.sp-zoom img{max-width:100%;max-height:100%;border-radius:10px}
.sp-drawer-dot{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff4d5e;color:#fff;font:800 11px/18px 'Inter',sans-serif;text-align:center}

/* ===== ADMIN side (uses same classes inside #sec-tickets) ===== */
#sec-tickets .sp-wrap{max-width:900px;margin:0 auto}
#sec-tickets .sp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){#sec-tickets .sp-row{grid-template-columns:1fr}}
#sec-tickets .sp-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#sec-tickets .sp-fb{padding:8px 14px;border-radius:999px;border:1px solid #472a68;background:#251636;color:#bcadcd;font:700 12px 'Poppins',sans-serif;cursor:pointer}
#sec-tickets .sp-fb.on{background:linear-gradient(135deg,#bf92f3,#823ed0);color:#0f0619;border-color:transparent}
#sec-tickets .sp-note{margin:0 0 8px;padding:10px 12px;border-radius:12px;background:#170e22;border:1px solid #3f255d;color:#d9cce7;font:500 12.5px/1.5 'Inter',sans-serif;white-space:pre-wrap;word-break:break-word}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ff4d5e;color:#fff;font:800 11px/20px 'Inter',sans-serif;text-align:center}