/* ===== 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(216,182,106,.38);background:linear-gradient(150deg,#1b2238 0%,#0e1527 60%,#121a30 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),#f2cf76 70%,#d4af37)}
.sp-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;color:#d9b850;font:800 12px 'JetBrains Mono',monospace;letter-spacing:.2em}
.sp-title b{color:#8f9cb5;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(216,182,106,.5);background:linear-gradient(150deg,#1b2238,#0e1527);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,#ffe38a,#f0b429);color:#1a1405;box-shadow:0 8px 20px rgba(240,180,41,.3)}
.sp-link.c .ic{background:linear-gradient(145deg,#38b6ff,#1d7bd8);box-shadow:0 8px 20px rgba(40,140,230,.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:#93a4c9}
.sp-link .ar{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1a2540;border:1px solid #2a3a63;color:#d9b850}
.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:#1a1405;background:linear-gradient(135deg,#f6e08f,#d4a93a);box-shadow:0 8px 22px rgba(212,175,55,.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:#d9b850;border:1px solid rgba(216,182,106,.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:#aab4d0;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.14em}
.sp-lab i{color:#8f9cb5;font-style:normal;font-weight:500;letter-spacing:.02em}
.sp-in,.sp-sel,.sp-ta{width:100%;border:1px solid #26355a;border-radius:13px;background:#0b1224;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(216,182,106,.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%,#d9b850 50%),linear-gradient(135deg,#d9b850 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:#aab3c4}.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(216,182,106,.45);background:rgba(216,182,106,.05);cursor:pointer;color:#d9b850;font:700 13px 'Poppins',sans-serif}
.sp-up svg{width:24px;height:24px;flex:0 0 24px}
.sp-up small{display:block;color:#8f9cb5;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 #26355a;background:#050912}
.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 #26355a;background:#131d38;color:#fff;cursor:pointer;margin-bottom:10px;transition:border-color .15s}
.sp-tk:active{border-color:rgba(216,182,106,.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:#d9b850;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:#93a4c9;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:#7f8cab}
.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:#f0b429;border-color:rgba(240,180,41,.5);background:rgba(240,180,41,.1)}
.sp-pill.answered{color:#38bdf8;border-color:rgba(56,189,248,.5);background:rgba(56,189,248,.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:#8f9cb5;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,#f6e08f,#d4a93a);color:#1a1405;border-bottom-right-radius:5px}
.sp-b.admin{align-self:flex-start;background:#1a2748;color:#eef3ff;border:1px solid #2a3a63;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:#d9b850;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:#0b1224;border:1px solid #26355a;min-width:0}
.sp-meta em{display:block;font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#8f9cb5;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 #2a3a63;background:#131d38;color:#aab4d0;font:700 12px 'Poppins',sans-serif;cursor:pointer}
#sec-tickets .sp-fb.on{background:linear-gradient(135deg,#f6e08f,#d4a93a);color:#1a1405;border-color:transparent}
#sec-tickets .sp-note{margin:0 0 8px;padding:10px 12px;border-radius:12px;background:#0b1224;border:1px solid #26355a;color:#c9d3ea;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}