:root {
    --bg: #0f1115;
    --card: #161a22;
    --ink: #e7e9ee;
    --muted: #9aa3b2;
    --brand: #00b3a6;
    --brand-ink: #04211f;
    --line: #252a35;
    --danger: #ff5e5b;
    --warning: #ffb020;
    --ok: #3cd47e;
    --focus: #6cc5ff;
    --radius: 16px;
}

.support-wrap {
    max-width: 980px;
    margin: 32px auto;
    padding: 0 20px 40px;
}

.support-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.support-logo {
    width: 40px; 
    height: 40px; 
    border-radius: 8px; 
    background: linear-gradient(135deg, var(--brand), #18e6d7);
    display: inline-grid; 
    place-items: center; 
    color: var(--brand-ink); 
    font-weight: 800; 
    letter-spacing: .5px;
}

.support-header h1 { 
    font-size: 28px; 
    margin: 0; 
}

.support-lead { 
    color: var(--muted); 
    margin-top: 6px; 
}

.support-card { 
    background: rgba(22,26,34,.9); 
    border: 1px solid var(--line); 
    border-radius: var(--radius); 
    overflow: hidden; 
    backdrop-filter: blur(6px); 
}

.support-card header { 
    padding: 16px 20px; 
    border-bottom: 1px solid var(--line); 
}

.support-steps { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    border-bottom: 1px solid var(--line); 
}

.support-step {
    padding: 12px 16px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    color: var(--muted); 
    cursor: default;
    border-right: 1px solid var(--line);
}

.support-step:last-child { 
    border-right: none; 
}

.support-step .num { 
    width: 28px; 
    height: 28px; 
    border-radius: 999px; 
    display: grid; 
    place-items: center; 
    background: #1d2330; 
    color: var(--muted); 
    font-weight: 700; 
    font-size: 13px; 
}

.support-step.active .num { 
    background: var(--brand); 
    color: var(--brand-ink); 
}

.support-step.active { 
    color: var(--ink); 
}

.support-form { 
    padding: 20px; 
    display: grid; 
    gap: 22px; 
}

.support-grid { 
    display: grid; 
    gap: 16px; 
}

.support-grid.two { 
    grid-template-columns: 1fr 1fr; 
}

.support-grid.three { 
    grid-template-columns: repeat(3, 1fr); 
}

@media (max-width: 800px) { 
    .support-grid.two, 
    .support-grid.three { 
        grid-template-columns: 1fr; 
    } 
}

.support-label { 
    display: block; 
    font-weight: 600; 
    margin-bottom: 8px; 
}

.support-hint { 
    color: var(--muted); 
    font-size: 13px; 
    margin-top: 6px; 
}

.support-input,
.support-textarea,
.support-select {
    width: 100%; 
    padding: 12px 14px; 
    background: #0f141e; 
    border: 1px solid #202635; 
    color: var(--ink); 
    border-radius: 10px; 
    outline: none; 
    transition: border .15s, box-shadow .15s;
}

.support-textarea { 
    resize: vertical; 
    min-height: 120px; 
}

.support-input:focus, 
.support-textarea:focus, 
.support-select:focus { 
    border-color: var(--focus); 
    box-shadow: 0 0 0 3px rgba(108,197,255,.15); 
}

.severity {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
}

.sev {
    border: 1px solid #202635; 
    border-radius: 12px; 
    padding: 12px; 
    background: #0f141e; 
    cursor: pointer; 
    display: grid; 
    gap: 6px; 
    align-content: start;
}

.sev input { 
    display: none; 
}

.sev .title { 
    font-weight: 700; 
}

.sev .pill { 
    font-size: 12px; 
    padding: 4px 8px; 
    border-radius: 999px; 
    width: fit-content; 
}

.sev[data-level="1"] .pill { 
    background: rgba(255,94,91,.15); 
    color: var(--danger); 
}

.sev[data-level="2"] .pill { 
    background: rgba(255,176,32,.15); 
    color: var(--warning); 
}

.sev[data-level="3"] .pill { 
    background: rgba(60,212,126,.15); 
    color: var(--ok); 
}

.sev[data-level="4"] .pill { 
    background: rgba(154,163,178,.15); 
    color: var(--muted); 
}

.sev.selected { 
    border-color: var(--brand); 
    box-shadow: 0 0 0 3px rgba(0,179,166,.2); 
}

.dropzone {
    border: 2px dashed #2a3345; 
    border-radius: 14px; 
    padding: 24px; 
    text-align: center; 
    background: #0f141e; 
    transition: border-color .2s, background .2s;
}

.dropzone.dragover { 
    border-color: var(--brand); 
    background: #0e1518; 
}

.dropzone input { 
    display: none; 
}

.dropzone .cta { 
    margin-top: 4px; 
}

.preview { 
    display: none; 
    gap: 16px; 
    align-items: center; 
}

.preview.show { 
    display: grid; 
}

.preview img { 
    max-width: 100%; 
    border-radius: 12px; 
    border: 1px solid #202635; 
}

.support-bar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
    padding: 16px 20px; 
    border-top: 1px solid var(--line); 
    background: #0f141e; 
    border-bottom-left-radius: var(--radius); 
    border-bottom-right-radius: var(--radius); 
}

.support-btn { 
    appearance: none; 
    border: 0; 
    padding: 12px 16px; 
    border-radius: 10px; 
    font-weight: 700; 
    cursor: pointer; 
    background: #20283a; 
    color: var(--ink); 
}

.support-btn.primary { 
    background: linear-gradient(180deg, var(--brand), #03a597); 
    color: var(--brand-ink); 
}

.support-btn.ghost { 
    background: transparent; 
    border: 1px solid #2a3345; 
}

.support-btn[disabled] { 
    opacity: .6; 
    cursor: not-allowed; 
}

.support-confirm { 
    display: flex; 
    align-items: start; 
    gap: 10px; 
}

.support-notice { 
    font-size: 13px; 
    color: var(--muted); 
}

.required { 
    color: var(--danger); 
    margin-left: 4px; 
}

.support-success { 
    display: none; 
    margin-top: 18px; 
    padding: 14px; 
    background: rgba(60,212,126,.12); 
    border: 1px solid rgba(60,212,126,.35); 
    border-radius: 10px; 
}

.support-footer { 
    margin-top: 28px; 
    color: var(--muted); 
    font-size: 13px; 
    text-align: center; 
}