:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1d2330; --muted:#6b7280; --line:#e4e7ec;
  --brand:#2457d6; --brand-ink:#fff; --brand-soft:#eaf0fd;
  --ok:#137a4b; --ok-bg:#e7f6ee; --err:#b42318; --err-bg:#fdecea; --warn:#9a6700; --warn-bg:#fff4d6;
  --note:#fff8e1; --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.area-public main.wrap{max-width:820px}
main.wrap{padding-top:24px;padding-bottom:40px;min-height:70vh}

.top{background:#fff;border-bottom:1px solid var(--line)}
.top.admin{background:#141a26;border-color:#141a26}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:58px}
.brand{font-weight:700;font-size:17px;color:var(--ink)}
.top.admin .brand{color:#fff} .brand small{font-weight:500;opacity:.6;font-size:12px;margin-left:4px}
.top nav{display:flex;flex-wrap:wrap;gap:4px}
.top nav a{padding:6px 10px;border-radius:7px;color:var(--muted);font-size:14px}
.top.admin nav a{color:#c3c9d6}
.top nav a:hover{background:rgba(127,127,127,.12);text-decoration:none}
.pill{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:#2b3446;color:#fff;font-size:12px;text-align:center}
.pill-err{background:#d92d20}
.tabs .pill{font-size:11px}
.chk{display:inline-block;min-width:52px;text-align:center;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:700}
.chk-ok{background:var(--ok-bg);color:var(--ok)} .chk-warn{background:var(--warn-bg);color:var(--warn)} .chk-fail{background:var(--err-bg);color:var(--err)} .chk-info{background:#eef0f3;color:#475467}
pre.term{background:#0f1420;color:#d6deeb;padding:14px;border-radius:8px;font:12.5px/1.5 Consolas,Menlo,monospace;white-space:pre-wrap;word-break:break-all;max-height:460px;overflow:auto;margin:10px 0}
pre.code{background:#f6f7f9;border:1px solid var(--line);padding:12px;border-radius:8px;font:12.5px/1.5 Consolas,Menlo,monospace;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto}
.advice{background:var(--warn-bg);color:#5c3d00;border-radius:8px;padding:10px 14px;margin:10px 0;font-size:14px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 6px;margin:0 0 18px;background:#fff}
legend{font-weight:700;padding:0 6px}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.foot{text-align:center;color:var(--muted);font-size:13px;padding:24px 0}

h1{font-size:24px;margin:0 0 16px} h2{font-size:18px;margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.muted{color:var(--muted)} .small{font-size:13px}
.row{display:flex;gap:14px;flex-wrap:wrap} .row>*{flex:1 1 220px}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

label{display:block;font-weight:600;font-size:14px;margin:0 0 5px}
.field{margin-bottom:15px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #cfd4dc;border-radius:7px;font:inherit;background:#fff;color:inherit}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
.hint{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.check{display:flex;gap:8px;align-items:center;font-weight:500}
.check input{width:auto}
.btn,button{display:inline-block;border:1px solid transparent;background:var(--brand);color:var(--brand-ink);padding:9px 16px;border-radius:7px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover,button:hover{filter:brightness(1.07);text-decoration:none}
.btn.light,button.light{background:#fff;color:var(--ink);border-color:#cfd4dc}
.btn.danger,button.danger{background:var(--err)}
.btn.small,button.small{padding:5px 10px;font-size:13px}
button:disabled{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash-ok{background:var(--ok-bg);color:var(--ok)} .flash-error{background:var(--err-bg);color:var(--err)} .flash-info{background:var(--brand-soft);color:var(--brand)}

table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14px}
.list th{background:#f9fafb;text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.list th,.list td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.list tr:last-child td{border-bottom:0}
.list tr.unread td{font-weight:600}
.list tr:hover td{background:#fafbfd}
.table-wrap{overflow-x:auto}

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;background:#eef0f3;color:#475467}
.status-new{background:#e0edff;color:#1d4ed8} .status-open{background:#fff1d6;color:#8a5a00}
.status-answered{background:var(--ok-bg);color:var(--ok)} .status-on_hold{background:#efe7fb;color:#6b3fa0} .status-closed{background:#eef0f3;color:#667085} .status-spam{background:var(--err-bg);color:var(--err)}
.priority-low{background:#eef0f3;color:#667085} .priority-normal{background:#eef0f3;color:#344054}
.priority-high{background:#fff1d6;color:#8a5a00} .priority-urgent{background:var(--err-bg);color:var(--err)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filters select,.filters input{width:auto;padding:7px 9px;font-size:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:8px 14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink);border-color:var(--brand);font-weight:600}
.pager{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
.pager a,.pager span{padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;font-size:14px}
.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Ticket conversation */
.ticket-grid{display:grid;grid-template-columns:1fr 290px;gap:18px;align-items:start}
@media (max-width:860px){.ticket-grid{grid-template-columns:1fr}}
.msg{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.msg-head{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;background:#f9fafb;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.msg-body{padding:16px;word-wrap:break-word;overflow-wrap:anywhere}
.msg.staff{border-left:3px solid var(--brand)}
.msg.staff .msg-head{background:var(--brand-soft)}
.msg.internal{border-left:3px solid #e0a800;background:var(--note)}
.msg.internal .msg-head{background:#fff1c2}
.msg.system .msg-body{color:var(--muted);font-style:italic}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.att{border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:13px;background:#fff}
.att small{color:var(--muted)}
.side dl{margin:0;font-size:14px} .side dt{color:var(--muted);font-size:12.5px;margin-top:10px} .side dd{margin:2px 0 0}
.log{font-size:13px;color:var(--muted);list-style:none;padding:0;margin:0}
.log li{padding:4px 0;border-bottom:1px dashed var(--line)}
.stars{display:flex;gap:6px;flex-direction:row-reverse;justify-content:flex-end}
.stars input{display:none}
.stars label{font-size:28px;color:#d0d5dd;cursor:pointer;margin:0}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#f5a623}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stat b{display:block;font-size:26px}
.stat span{color:var(--muted);font-size:13px}
.bar{height:8px;background:#eef0f3;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.reply-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.reply-tools select{width:auto}
.auth-box{max-width:420px;margin:30px auto}
code{background:#eef0f3;padding:1px 5px;border-radius:4px;font-size:13px}

/* ======================================================================
   Ace Velocity customer portal refresh
   Presentation-only overrides. All rules are scoped to .area-public so
   the staff/admin interface and application behaviour remain unchanged.
   ====================================================================== */
body.area-public{
  --brand:#245eea;
  --brand-ink:#fff;
  --brand-soft:#edf3ff;
  --line:#e3eaf3;
  --ink:#152238;
  --muted:#68778d;
  --radius:14px;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(71,132,255,.10), transparent 34rem),
    linear-gradient(180deg,#f7faff 0%,#f4f7fb 42%,#f6f8fc 100%);
  color:#152238;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.area-public a{color:#245eea;text-underline-offset:3px}
body.area-public a:hover{color:#1746bc}
body.area-public .wrap{max-width:1120px;padding-left:24px;padding-right:24px}
body.area-public main.wrap{max-width:900px;min-height:calc(100vh - 150px);padding-top:46px;padding-bottom:64px}

/* Customer-facing header */
body.area-public .top{
  position:relative;
  z-index:2;
  color:#fff;
  background:linear-gradient(115deg,#101f3c 0%,#12345a 58%,#164c70 100%);
  border:0;
  box-shadow:0 8px 26px rgba(17,39,73,.13);
}
body.area-public .top-in{min-height:78px;gap:18px;padding-top:10px;padding-bottom:10px}
body.area-public .brand{
  display:inline-flex;align-items:center;gap:11px;flex-shrink:0;white-space:nowrap;
  color:#fff;font-size:17px;font-weight:750;letter-spacing:-.025em;
}
body.area-public .brand::before{
  content:"A";display:inline-grid;place-items:center;flex:0 0 38px;height:38px;
  color:#fff;font-size:19px;font-weight:850;font-style:italic;
  border:1px solid rgba(255,255,255,.36);border-radius:12px;
  background:linear-gradient(145deg,#43c4ef 0%,#2778ef 54%,#5b66ef 100%);
  box-shadow:0 5px 14px rgba(4,13,33,.22),inset 0 1px rgba(255,255,255,.3);
}
body.area-public .top nav{align-items:center;gap:6px;flex-wrap:nowrap}
body.area-public .top nav a{
  padding:8px 12px;border:1px solid transparent;border-radius:9px;
  color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
body.area-public .top nav a:hover{
  color:#fff;background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.12);text-decoration:none;
}

/* Page headings and the ticket-submission page */
body.area-public h1{
  color:#132440;font-size:clamp(27px,3.5vw,36px);font-weight:780;
  letter-spacing:-.045em;line-height:1.2;margin:0 0 22px;
}
body.area-public main.wrap>h1::before,
body.area-public .auth-box>h1::before{
  content:"CUSTOMER SUPPORT";display:block;margin:0 0 10px;
  color:#2866dd;font-size:11px;font-weight:800;letter-spacing:.17em;line-height:1.4;
}
body.area-public main.wrap>h1{position:relative;padding-top:4px;margin-bottom:24px}
body.area-public main.wrap>h1::after{
  content:"";display:block;width:48px;height:4px;margin-top:15px;border-radius:10px;
  background:linear-gradient(90deg,#2d6bea,#45c4e8);
}
body.area-public .between{align-items:flex-start;gap:18px;margin-bottom:10px}
body.area-public .between h1{font-size:clamp(25px,3vw,32px);margin:0;overflow-wrap:anywhere}
body.area-public .between>div{padding-top:3px}
body.area-public main.wrap>p.muted.small{font-size:13px;color:#718098;line-height:1.8}

/* Cards and forms */
body.area-public .card,
body.area-public form.card{
  background:rgba(255,255,255,.96);
  border:1px solid #e1e8f2;border-radius:18px;
  padding:30px; margin-bottom:22px;
  box-shadow:0 10px 30px rgba(29,53,87,.055),0 1px 2px rgba(29,53,87,.035);
}
body.area-public .card h2,
body.area-public form.card h2{
  color:#172944;font-size:20px;font-weight:750;letter-spacing:-.025em;
  line-height:1.35;margin:0 0 20px;
}
body.area-public .field{margin-bottom:19px}
body.area-public label{color:#263750;font-size:13.5px;font-weight:700;margin-bottom:7px}
body.area-public .row{gap:18px;align-items:flex-start}
body.area-public .row>*{min-width:0}
body.area-public input[type=text],
body.area-public input[type=email],
body.area-public input[type=password],
body.area-public input[type=number],
body.area-public input[type=search],
body.area-public select,
body.area-public textarea{
  display:block;width:100%;min-height:47px;padding:11px 13px;
  color:#172944;background:#fbfcfe;border:1px solid #d7e0ec;border-radius:10px;
  font:inherit;font-size:14px;line-height:1.5;
  box-shadow:inset 0 1px 2px rgba(18,42,74,.025);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body.area-public textarea{min-height:180px;resize:vertical;line-height:1.7}
body.area-public input::placeholder,
body.area-public textarea::placeholder{color:#96a2b3}
body.area-public input:focus,
body.area-public select:focus,
body.area-public textarea:focus{
  outline:0;background:#fff;border-color:#4a83f0;
  box-shadow:0 0 0 4px rgba(57,112,232,.12);
}
body.area-public input[readonly],body.area-public input:disabled{
  background:#f0f4f9;color:#728096;cursor:not-allowed;
}
body.area-public .hint{font-size:12px;line-height:1.55;margin-top:7px;color:#74839a}
body.area-public .check{gap:10px;color:#3b4c65}
body.area-public input[type=checkbox],body.area-public input[type=radio]{accent-color:#245eea}
body.area-public input[type=file]{
  display:block;width:100%;padding:10px;background:#f8faff;border:1px dashed #c8d5e7;
  border-radius:10px;color:#5f6f86;font:inherit;font-size:13px;
}
body.area-public input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 12px;border:1px solid #d5e0ef;border-radius:7px;
  background:#fff;color:#24436f;font:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
body.area-public .btn,
body.area-public button{
  display:inline-flex;width:auto;justify-content:center;align-items:center;gap:8px;min-height:45px;
  padding:10px 19px;border:1px solid #245eea;border-radius:10px;
  color:#fff;background:linear-gradient(135deg,#2f70f0 0%,#2455d6 100%);
  box-shadow:0 5px 12px rgba(36,94,234,.16);
  font:inherit;font-size:14px;font-weight:750;line-height:1.3;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
body.area-public .btn:hover,
body.area-public button:hover{
  color:#fff;filter:none;transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(36,94,234,.22);text-decoration:none;
}
body.area-public .btn:active,body.area-public button:active{transform:translateY(0)}
body.area-public .btn.light,
body.area-public button.light{
  color:#334761;background:#fff;border-color:#d5dfeb;box-shadow:none;
}
body.area-public .btn.light:hover,body.area-public button.light:hover{
  color:#1c3558;background:#f7faff;border-color:#b7c9e3;box-shadow:none;
}
body.area-public .btn.danger,body.area-public button.danger{
  color:#fff;background:linear-gradient(135deg,#df514d,#bd302d);border-color:#c93a36;
}
body.area-public .btn.small,body.area-public button.small{min-height:34px;padding:6px 11px;border-radius:8px;font-size:12px}
body.area-public button:disabled{transform:none;box-shadow:none}
body.area-public .small{font-size:13px}
body.area-public .muted{color:#718098}

/* Notices */
body.area-public .flash{
  padding:14px 17px;margin-bottom:20px;border:1px solid transparent;border-radius:12px;
  font-size:13.5px;line-height:1.65;box-shadow:0 4px 12px rgba(26,47,78,.035);
}
body.area-public .flash-ok{background:#ecf9f1;color:#176642;border-color:#c8eed8}
body.area-public .flash-error{background:#fff0ef;color:#a52a25;border-color:#f8d2cf}
body.area-public .flash-info{background:#edf4ff;color:#254fa6;border-color:#d3e2ff}

/* Customer login, lookup and reset screens */
body.area-public .auth-box{max-width:480px;margin:0 auto;padding-top:5px}
body.area-public .auth-box>h1{text-align:center;margin-bottom:25px}
body.area-public .auth-box>h1::before{margin-bottom:11px}
body.area-public .auth-box form.card{padding:30px}
body.area-public .auth-box form.card>p:first-child{margin-top:0}
body.area-public .auth-box>p{text-align:center;line-height:1.8}
body.area-public .auth-box form.card .small{margin:18px 0 0}
body.area-public .auth-box form.card button[type=submit]{width:100%;margin-top:2px}

/* Customer ticket conversation */
body.area-public .msg{
  background:#fff;border:1px solid #e0e8f2;border-radius:15px;
  margin-bottom:16px;overflow:hidden;box-shadow:0 6px 20px rgba(29,53,87,.045);
}
body.area-public .msg-head{
  align-items:center;gap:10px;padding:13px 17px;background:#f7f9fc;
  border-bottom:1px solid #e8eef5;font-size:13px;
}
body.area-public .msg-head strong{color:#243956;font-weight:750}
body.area-public .msg-body{padding:19px 20px;color:#34455e;line-height:1.8}
body.area-public .msg.staff{border-left:4px solid #3473ed}
body.area-public .msg.staff .msg-head{background:#eff5ff}
body.area-public .msg.internal{border-left:4px solid #e4aa26;background:#fffaf0}
body.area-public .msg.internal .msg-head{background:#fff3cf}
body.area-public .atts{padding:0 20px 17px}
body.area-public .att{padding:7px 11px;border-color:#dbe5f1;border-radius:8px;background:#f8faff;color:#2958ae}
body.area-public .att:hover{background:#eef4ff;text-decoration:none}
body.area-public .ticket-grid{gap:20px}
body.area-public #bottom{scroll-margin-top:20px}
body.area-public form.card textarea[name=message]{min-height:170px}
body.area-public form[method=post]:not(.card){margin:12px 0 20px}
body.area-public .stars{gap:7px}
body.area-public .stars label{font-size:34px;line-height:1.2;color:#d6deea}
body.area-public .stars input:checked~label,
body.area-public .stars label:hover,
body.area-public .stars label:hover~label{color:#f0ad2e}

/* Ticket list and tabs */
body.area-public .tabs{gap:5px;border-bottom:1px solid #dfe7f1;margin-bottom:22px}
body.area-public .tabs a{padding:10px 15px;margin-bottom:-1px;color:#738198;border-bottom:2px solid transparent;font-size:13.5px;font-weight:650}
body.area-public .tabs a:hover{color:#245eea;text-decoration:none}
body.area-public .tabs a.on{color:#245eea;border-color:#3473ed}
body.area-public table.list{border:1px solid #e0e8f2;border-radius:13px;box-shadow:0 8px 22px rgba(29,53,87,.04);font-size:13.5px}
body.area-public .list th{padding:13px 15px;background:#f5f8fc;color:#728198;font-size:11px;letter-spacing:.08em}
body.area-public .list td{padding:14px 15px;border-bottom-color:#edf1f6}
body.area-public .list tr:hover td{background:#f7faff}
body.area-public .badge{padding:4px 9px;border-radius:7px;font-size:11px;font-weight:750;letter-spacing:.01em}
body.area-public .status-new{background:#e5efff;color:#2059c7}
body.area-public .status-open{background:#fff2d8;color:#936000}
body.area-public .status-answered{background:#e7f8ef;color:#167448}
body.area-public .status-on_hold{background:#f2eaff;color:#7445aa}
body.area-public .status-closed{background:#edf1f5;color:#68778a}
body.area-public .pager a,body.area-public .pager span{padding:7px 11px;border-color:#dfe7f1;border-radius:8px}
body.area-public .pager .cur{background:#245eea;border-color:#245eea}

/* Footer */
body.area-public .foot{
  padding:24px 20px 30px;border-top:1px solid rgba(210,220,234,.75);
  color:#7d8ba0;font-size:12px;letter-spacing:.015em;
}

@media (max-width:640px){
  body.area-public .wrap{padding-left:17px;padding-right:17px}
  body.area-public .top-in{align-items:flex-start;flex-direction:column;gap:11px;padding-top:15px;padding-bottom:14px}
  body.area-public .brand{font-size:16px}
  body.area-public .brand::before{flex-basis:34px;height:34px;border-radius:10px;font-size:17px}
  body.area-public .top nav{width:100%;gap:5px;flex-wrap:nowrap;white-space:nowrap}
  body.area-public .top nav a{padding:7px 9px;font-size:12px}
  body.area-public main.wrap{padding-top:31px;padding-bottom:42px;min-height:calc(100vh - 170px)}
  body.area-public h1{font-size:28px;letter-spacing:-.035em;margin-bottom:18px}
  body.area-public main.wrap>h1::before,body.area-public .auth-box>h1::before{font-size:10px}
  body.area-public main.wrap>h1::after{margin-top:12px}
  body.area-public .card,body.area-public form.card{padding:21px 18px;border-radius:15px;margin-bottom:17px}
  body.area-public .auth-box{padding-top:0}
  body.area-public .auth-box form.card{padding:23px 19px}
  body.area-public .row{gap:0}
  body.area-public .field{margin-bottom:17px}
  body.area-public input[type=text],body.area-public input[type=email],body.area-public input[type=password],body.area-public input[type=number],body.area-public input[type=search],body.area-public select,body.area-public textarea{font-size:16px}
  body.area-public button,body.area-public .btn{min-height:46px;padding:11px 15px}
  body.area-public .between{display:block}
  body.area-public .between>div{margin-top:8px}
  body.area-public .msg-head{align-items:flex-start;flex-direction:column;padding:12px 14px;gap:3px}
  body.area-public .msg-body{padding:15px}
  body.area-public .atts{padding:0 15px 14px}
  body.area-public .table-wrap{margin-left:-2px;margin-right:-2px}
  body.area-public table.list{font-size:12px}
  body.area-public .list th,body.area-public .list td{padding:10px 9px}
}
@media (prefers-reduced-motion:reduce){
  body.area-public *,body.area-public *::before,body.area-public *::after{transition:none!important;scroll-behavior:auto!important}
}