/* ===================== TICKET FORM ===================== */
.ticket-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.form-card h2{font-size:22px;font-weight:700;letter-spacing: 0.023rem;}
.form-card>p{font-size:14.5px;color:var(--muted);margin:6px 0 24px}
.fg{margin-bottom:20px}
.fg label:not(.pp):not(.prio-opt):not(.dropzone),.fg-label{display:block;font-size:13.5px;font-weight:700;margin-bottom:8px}
.req{color:var(--red)}
.hint{font-weight:500;color:var(--muted2);font-size:12px}
.inp,.sel,.ta{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;border:1.5px solid #e2e6e4;border-radius:11px;padding:12px 14px;transition:border-color .16s,box-shadow .16s}
.inp:focus,.sel:focus,.ta:focus{outline:0;border-color:var(--green);}
.ta{min-height:130px;resize:vertical;line-height:1.6}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8399' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-errors{background:var(--red-bg);border:1px solid #f4c9cc;color:var(--red);border-radius:12px;padding:14px 16px;margin-bottom:20px;font-size:13.5px}
.form-errors ul{margin:6px 0 0 18px}

.plat-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pp{position:relative;min-width:0;border:1.5px solid #e2e6e4;border-radius:12px;padding:12px;text-align:left;background:#fff;transition:border-color .16s,background .16s,box-shadow .16s;display:flex;align-items:center;gap:10px;cursor:pointer}
.pp:hover{border-color:#cfe7db}
.pp:has(input:checked){border-color:var(--green);background:var(--tint)}
.pp:has(input:focus-visible),.prio-opt:has(input:focus-visible),.dropzone:has(input:focus-visible){box-shadow:0 0 0 3px rgba(14,159,91,.2)}
.ppl{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;background:var(--plat-color,var(--green))}
.ppl img{width:62%;height:62%;object-fit:contain}
.pp span:last-child{min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plat-pick .pp:nth-child(n+5){display:none}
.plat-pick.is-expanded .pp{display:flex}
.platform-more{margin-top:10px;width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--bg-alt);color:var(--green-d);font:700 12.5px/1.3 inherit;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:background .16s,border-color .16s}
.platform-more:hover{background:var(--tint);border-color:#cfe7db}
.platform-more svg{width:15px;height:15px;transition:transform .2s}
.platform-more[aria-expanded="true"] svg{transform:rotate(-90deg)}
.platform-more[aria-expanded="false"] svg{transform:rotate(90deg)}
.prio{display:flex;gap:9px;flex-wrap:wrap}
.prio-opt{position:relative;flex:1;min-width:110px;border:1.5px solid #e2e6e4;border-radius:11px;padding:11px 12px;background:#fff;transition:border-color .16s,background .16s;cursor:pointer}
.prio-opt:has(input:checked){border-color:var(--green);background:var(--tint)}
.prio-opt b{display:block;font-size:13.5px;font-weight:700}
.prio-opt small{font-size:11.5px;color:var(--muted2)}
.dropzone{position:relative;display:block;border:2px dashed #d3dbd6;border-radius:12px;padding:22px;text-align:center;background:var(--bg-alt);transition:border-color .16s,background .16s;cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--green);background:var(--tint)}
.dropzone svg{width:26px;height:26px;color:var(--muted2);margin:0 auto 8px}
.dropzone b{font-size:13.5px;display:block;overflow-wrap:anywhere}
.dropzone small{font-size:12px;color:var(--muted2)}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;flex-direction:row-reverse}
.form-note{font-size:12.5px;color:var(--muted2)}

/* ===================== TICKET SIDEBAR ===================== */
.ticket-side{position:sticky;top:88px;align-self:start}
.ticket-side>.side-help{margin-top:16px}
.sla-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:16px}
.sla-card h3{font-size:16px;font-weight:800;margin-bottom:14px}
.sla-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line2);font-size:13.5px}
.sla-row:first-of-type{border-top:0}
.sla-dot{width:9px;height:9px;border-radius:50%;flex:none}
.sla-urgent{background:#12b07a}.sla-high{background:#f5a623}.sla-normal{background:#4a5273}.sla-low{background:#8a8399}
.sla-row b{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px}
.track-card{background:linear-gradient(160deg,#151321,#0d1c16);color:#fff;border-radius:16px;padding:22px;scroll-margin-top:86px}
.track-card h3{font-size:16px;font-weight:800}
.track-card p{font-size:13px;color:#a9bcb4;margin:6px 0 14px}
.track-form{display:flex;flex-direction:column;gap:8px}
.track-form input:not([type=hidden]){background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;outline:0}
.track-form input::placeholder{color:#7e958d}
.track-form .btn{background:#12b07a;border-color:#12b07a;color:#0d1c16;padding:10px 16px}
.track-res{margin-top:14px;font-size:13.5px;color:#e8efec;overflow-wrap:anywhere}
.track-res small{display:block;margin-top:4px;font-size:12.5px;color:#a9bcb4}
.track-card p.track-msg{margin:14px 0 0;color:#f0b25a;font-size:12.5px}
.ticket-ref{color:var(--green-d)}
@media(max-width:920px){.ticket-wrap{grid-template-columns:minmax(0,1fr)}.ticket-side{position:static}}
@media(max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}.plat-pick{grid-template-columns:repeat(2,minmax(0,1fr))}.form-card{padding:20px}}
@media(max-width:600px){
  .ticket-wrap{gap:24px}
  .form-card{padding:16px;border-radius:15px}
  .form-card h2{font-size:19px}
  .form-card>p{font-size:13px;margin-bottom:18px}
  .fg{margin-bottom:17px}
  .fg label:not(.pp):not(.prio-opt):not(.dropzone),.fg-label{font-size:13px;margin-bottom:7px}
  .hint{display:block;margin-top:2px;font-size:11px}
  .inp,.sel,.ta{font-size:14px;padding:10px 12px}
  .ta{min-height:115px}
  .plat-pick{gap:8px}
  .pp{padding:9px;gap:7px}
  .pp span:last-child{font-size:11.5px}
  .prio-opt{padding:9px 10px}
  .prio-opt b{font-size:12.5px}
  .dropzone{padding:18px 14px}
  .sla-card,.track-card{padding:18px}
}
@media(max-width:390px){.plat-pick{grid-template-columns:minmax(0,1fr)}}

/* Prefilled from the customer's account (shared login, 2026-11-10) */
.form-prefill{display:flex;align-items:flex-start;gap:10px;background:var(--tint);border:1px solid #cfe7db;color:var(--green-d);border-radius:12px;padding:12px 16px;margin-bottom:20px;font-size:13.5px;line-height:1.5}
.form-prefill svg{width:18px;height:18px;flex:none;margin-top:2px}
.track-all{
    background: #12b07a;
    border-color: #12b07a;
    color: #0d1c16;
    padding: 10px 16px;
    margin-top: 15px;
    display: block;
    text-align: center;
}