.hydra-support { width:min(960px,calc(100% - 40px)); margin:72px auto 110px; color:#111; }
.hydra-support__header { max-width:720px; margin-bottom:36px; }
.hydra-support__eyebrow,.hydra-support__reference { display:block; margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hydra-support__header h1 { margin:0; font-size:clamp(44px,8vw,88px); line-height:.95; letter-spacing:-.055em; }
.hydra-support__header>p:last-child { max-width:620px; margin:24px 0 0; color:#555; font-size:18px; }
.hydra-support__form,.hydra-support__ticket { border:1px solid #d8d8d8; border-radius:24px; background:#f7f7f7; padding:clamp(24px,5vw,52px); }
.hydra-support__access { max-width:680px; border:1px solid #d8d8d8; border-radius:24px; background:#f7f7f7; padding:clamp(24px,5vw,52px); }
.hydra-support__access h2 { margin-top:0; font-size:clamp(28px,5vw,48px); }
.hydra-support__access label,.hydra-support__access label>span { display:block; font-weight:750; }
.hydra-support__otp { margin:0 0 18px; border:0; padding:0; }
.hydra-support__otp legend { margin-bottom:8px; font-weight:750; }
.hydra-support__otp-fields { display:flex; gap:9px; }
.hydra-support__access .hydra-support__otp-fields input { width:48px; height:56px; margin:0; border:1px solid #bdbdbd; border-radius:12px; background:#fff; font:inherit; font-size:1.5rem; font-weight:800; padding:0; text-align:center; }
.hydra-support__access .hydra-support__otp-fields input:focus { border-color:#111; outline:3px solid rgba(0,0,0,.12); }
.hydra-support__access .hydra-support__trust { display:flex; align-items:center; gap:8px; margin-bottom:18px; font-weight:600; }
.hydra-support__access button { border:0; border-radius:999px; background:#000; color:#fff; cursor:pointer; font:inherit; font-weight:850; padding:14px 22px; }
.hydra-support__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.hydra-support__form label { display:block; margin-bottom:22px; font-weight:750; }
.hydra-support__form label>span { display:block; margin-bottom:7px; }
.hydra-support__form input,.hydra-support__form textarea { width:100%; border:1px solid #bdbdbd; border-radius:12px; background:#fff; color:#111; font:inherit; padding:13px 15px; }
.hydra-support__form input:focus,.hydra-support__form textarea:focus { border-color:#111; outline:3px solid rgba(0,0,0,.12); }
.hydra-support__form small,.hydra-support__privacy,.hydra-support__updated { display:block; margin-top:7px; color:#666; font-size:13px; font-weight:500; }
.hydra-support__form button { border:0; border-radius:999px; background:#000; color:#fff; cursor:pointer; font:inherit; font-weight:850; padding:15px 24px; }
.hydra-support__form button:hover { background:#222; }
.hydra-support__trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.hydra-support__notice { margin:0 0 22px; border-radius:12px; padding:14px 18px; font-weight:750; }
.hydra-support__notice--success { background:#dff7e7; color:#075c26; }
.hydra-support__notice--error { background:#ffe4e4; color:#8a1010; }
.hydra-support__portal-nav { margin:0 0 16px; }
.hydra-support__portal-nav a { display:inline-flex; align-items:center; color:#111; font-weight:800; text-decoration:none; }
.hydra-support__portal-nav a:hover { text-decoration:underline; }
.hydra-support__ticket { display:grid; grid-template-columns:1fr auto; gap:24px; }
.hydra-support__ticket h2 { margin:0; font-size:clamp(28px,5vw,48px); }
.hydra-support__status { align-self:start; border-radius:999px; background:#111; color:#fff; padding:8px 13px; font-size:13px; font-weight:800; }
.hydra-support__status--new { background:#075dcc; }
.hydra-support__status--open { background:#222; }
.hydra-support__status--in_progress { background:#6741b8; }
.hydra-support__status--waiting { background:#f0b429; color:#241900; }
.hydra-support__status--resolved { background:#087830; }
.hydra-support__status--closed { background:#62666c; }
.hydra-support__message,.hydra-support__updated { grid-column:1/-1; }
.hydra-support__message { border-top:1px solid #d4d4d4; padding-top:22px; }
.hydra-support__conversation { grid-column:1/-1; display:grid; gap:14px; }
.hydra-support__reply { max-width:82%; border-radius:16px; background:#fff; padding:17px 19px; }
.hydra-support__reply--agent { justify-self:end; background:#111; color:#fff; }
.hydra-support__reply header { display:flex; justify-content:space-between; gap:20px; margin-bottom:8px; font-size:13px; }
.hydra-support__reply time { color:#777; }
.hydra-support__reply--agent time { color:#aaa; }
.hydra-support__reply p { margin:0; }
.hydra-support__reply-form { grid-column:1/-1; border-top:1px solid #d4d4d4; padding-top:22px; }
.hydra-support__reply-form label,.hydra-support__reply-form label>span { display:block; font-weight:750; }
.hydra-support__reply-form textarea { width:100%; margin:8px 0 12px; border:1px solid #bdbdbd; border-radius:12px; background:#fff; color:#111; font:inherit; padding:13px 15px; }
.hydra-support__reply-form button { border:0; border-radius:999px; background:#000; color:#fff; cursor:pointer; font:inherit; font-weight:850; padding:13px 22px; }
.hydra-support__tickets { border:1px solid #d8d8d8; border-radius:24px; background:#f7f7f7; padding:clamp(24px,5vw,52px); }
.hydra-support__tickets-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.hydra-support__tickets-heading h2 { margin:0; font-size:clamp(32px,5vw,52px); }
.hydra-support__new-ticket { flex:none; border-radius:999px; background:#000; color:#fff; font-weight:850; padding:13px 20px; text-decoration:none; }
.hydra-support__ticket-list { display:grid; gap:12px; }
.hydra-support__ticket-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 18px; border:1px solid #d7d7d7; border-radius:16px; background:#fff; color:#111; padding:19px 20px; text-decoration:none; transition:border-color .15s ease,transform .15s ease; }
.hydra-support__ticket-card:hover { border-color:#888; transform:translateY(-1px); }
.hydra-support__ticket-card .hydra-support__reference { grid-column:1; margin:0; }
.hydra-support__ticket-card strong { grid-column:1; min-width:0; font-size:19px; overflow-wrap:anywhere; }
.hydra-support__ticket-card .hydra-support__status { grid-column:2; grid-row:1/3; align-self:center; }
.hydra-support__ticket-card small { grid-column:1/-1; color:#666; }
.hydra-support__empty { margin:0; color:#555; }
.hydra-support__agent-form { grid-column:1/-1; border-top:1px solid #d4d4d4; padding-top:24px; }
.hydra-support__agent-form label,.hydra-support__agent-form label>span { display:block; font-weight:750; }
.hydra-support__agent-form label { margin-bottom:18px; }
.hydra-support__agent-form select,.hydra-support__agent-form textarea { width:100%; margin-top:7px; border:1px solid #bdbdbd; border-radius:12px; background:#fff; color:#111; font:inherit; padding:13px 15px; }
.hydra-support__agent-form button { border:0; border-radius:999px; background:#000; color:#fff; cursor:pointer; font:inherit; font-weight:850; padding:14px 22px; }
.hydra-support__agent-form .hydra-support__agent-option { display:flex; align-items:center; gap:9px; }
.hydra-support__agent-form .hydra-support__agent-option input { width:auto; margin:0; }
.hydra-support__agent-form .hydra-support__agent-option span { display:inline; }
.hydra-support--agent .hydra-support__reply--agent { justify-self:end; }
.hydra-support__attachment-field { display:block; margin:0 0 18px; font-weight:750; }
.hydra-support__attachment-field>span,.hydra-support__attachment-field>small { display:block; }
.hydra-support__attachment-field input { width:100%; margin:8px 0 4px; border:1px dashed #aaa; border-radius:12px; background:#fff; padding:12px; }
.hydra-support__attachment-field small { color:#666; font-size:12px; font-weight:500; }
.hydra-support__attachments { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.hydra-support__attachments li { display:flex; align-items:center; gap:7px; border:1px solid #d4d4d4; border-radius:999px; background:#fff; padding:7px 11px; }
.hydra-support__attachments a { color:inherit; font-weight:750; overflow-wrap:anywhere; }
.hydra-support__attachments small { color:#666; }
.hydra-support__reply--agent .hydra-support__attachments li { border-color:#555; background:#222; }
.hydra-support__reply--agent .hydra-support__attachments small { color:#bbb; }
.hydra-support__format-toolbar { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 10px; }
.hydra-support__format-toolbar button { border:1px solid #bbb; border-radius:7px; background:#fff; color:#111; cursor:pointer; font:inherit; font-size:12px; font-weight:750; padding:6px 9px; }
.hydra-support__format-toolbar button:hover { border-color:#111; background:#ececec; color:#111; }
.hydra-support__format-toolbar button.is-active { border-color:#111; background:#111; color:#fff; }
.hydra-support__rich-field { position:relative; margin:0 0 22px; }
.hydra-support__rich-field>label { display:block; margin:0; font-weight:750; }
.hydra-support__rich-field>small { display:block; margin-top:7px; color:#666; font-size:13px; font-weight:500; }
.hydra-support__rich-editor { min-height:132px; width:100%; border:1px solid #bdbdbd; border-radius:12px; background:#fff; color:#111; font:inherit; font-weight:400; line-height:1.55; padding:13px 15px; }
.hydra-support__rich-editor:focus { border-color:#111; outline:3px solid rgba(0,0,0,.12); }
.hydra-support__rich-editor[aria-invalid="true"] { border-color:#b42318; outline:3px solid rgba(180,35,24,.12); }
.hydra-support__rich-editor p:first-child,.hydra-support__rich-editor pre:first-child,.hydra-support__rich-editor blockquote:first-child { margin-top:0; }
.hydra-support__rich-editor p:last-child,.hydra-support__rich-editor pre:last-child,.hydra-support__rich-editor blockquote:last-child { margin-bottom:0; }
.hydra-support__rich-editor pre,.hydra-support__rich-editor code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.hydra-support__rich-editor em,.hydra-support__rich-editor i,.hydra-support__message em,.hydra-support__reply em { font-style:italic; }
.hydra-support__link-popover { position:absolute; z-index:20; top:62px; left:0; width:min(360px,100%); border:1px solid #aaa; border-radius:12px; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.18); color:#111; padding:15px; }
.hydra-support__link-popover::before { position:absolute; top:-7px; left:18px; width:12px; height:12px; border-top:1px solid #aaa; border-left:1px solid #aaa; background:#fff; content:""; transform:rotate(45deg); }
.hydra-support__link-popover[hidden] { display:none; }
.hydra-support__link-popover p { margin:0 0 10px; font-size:13px; font-weight:500; }
.hydra-support__link-popover label { display:block; margin:0 0 10px; font-size:13px; font-weight:750; }
.hydra-support__link-popover input { display:block; width:100%; margin-top:5px; border:1px solid #aaa; border-radius:8px; color:#111; font:inherit; font-weight:400; padding:9px 10px; }
.hydra-support__link-popover>div { display:flex; gap:7px; }
.hydra-support__link-popover button,.hydra-support__form .hydra-support__link-popover button,.hydra-support__agent-form .hydra-support__link-popover button { border:1px solid #aaa; border-radius:8px; background:#f1f1f1; color:#111; font-size:12px; padding:7px 10px; }
.hydra-support__link-popover button[data-link-apply] { border-color:#111; background:#111; color:#fff; }
.hydra-support__link-popover small { display:block; margin-top:8px; color:#a10f0f; font-size:12px; }
.hydra-support__filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.hydra-support__filters a { border:1px solid #c8c8c8; border-radius:999px; background:#fff; color:#222; font-size:13px; font-weight:800; padding:8px 13px; text-decoration:none; }
.hydra-support__filters a:hover { border-color:#555; }
.hydra-support__filters a.is-active { border-color:#111; background:#111; color:#fff; }
@media (max-width:680px) {
    .hydra-support { width:min(100% - 24px,960px); margin-top:44px; }
    .hydra-support__grid,.hydra-support__ticket { grid-template-columns:1fr; }
    .hydra-support__status { justify-self:start; }
    .hydra-support__reply { max-width:94%; }
    .hydra-support__tickets-heading { align-items:flex-start; flex-direction:column; }
    .hydra-support__ticket-card { grid-template-columns:1fr; }
    .hydra-support__ticket-card .hydra-support__status { grid-column:1; grid-row:auto; justify-self:start; }
    .hydra-support__otp-fields { gap:6px; }
    .hydra-support__access .hydra-support__otp-fields input { width:42px; height:52px; }
}
