*{box-sizing:border-box} :root{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 12% 0%,#202c59 0,transparent 34%),radial-gradient(circle at 90% 12%,#0b463f 0,transparent 28%),#080d17;color:#f3f6ff;font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}.top{max-width:1100px;margin:auto;padding:22px 22px 8px;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font-weight:900;font-size:18px;color:#fff;text-decoration:none}.tag,.chips span{border:1px solid #ffffff18;background:#ffffff09;padding:7px 11px;border-radius:999px;color:#aab6ce;font-size:12px}.wrap{max-width:1100px;margin:20px auto 50px;padding:0 22px}.hero,.panel{border:1px solid #ffffff12;background:#111827e8;border-radius:25px;padding:clamp(20px,4vw,36px);margin-bottom:16px;box-shadow:0 20px 60px #0002}.hero{background:linear-gradient(135deg,#28335d,#151c2c 68%);position:relative;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:850;color:#8f9fca;margin-bottom:9px}.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.03;letter-spacing:-.045em;margin:0 0 16px}.hero h1 span{color:#9eacff}.hero p,.panel p{color:#aab4c7;max-width:760px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.section-head,.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px}h1,h2,h3{line-height:1.2}h2{font-size:23px;margin:0 0 15px}h3{margin:5px 0 7px}.notice{padding:16px 0;border-bottom:1px solid #ffffff12}.notice:last-child{border-bottom:0}.date,.muted{color:#7887a1;font-size:12px}.empty{text-align:center;padding:25px 10px}.empty-icon,.symbol{font-size:38px;color:#9eacff}.split{display:flex;align-items:center;justify-content:space-between}.urlbox{display:flex;gap:8px;margin:16px 0}.urlbox input{flex:1;min-width:0}.stat{display:flex;justify-content:space-between;padding:12px;border-radius:12px;background:#ffffff08}.stat span{color:#8e9bb3}label{display:block;color:#aeb9ce;font-size:12px;margin-bottom:12px}input,textarea,select{width:100%;margin-top:6px;padding:12px;border:1px solid #ffffff18;border-radius:11px;background:#080e19;color:#f5f7ff;font:inherit;font-size:13px}textarea{resize:vertical}button{border:1px solid #ffffff16;border-radius:11px;padding:11px 14px;color:#fff;background:#293554;font-weight:800;cursor:pointer}button:hover{filter:brightness(1.15)}.primary{background:linear-gradient(120deg,#5b6df2,#7658df)}.secondary,.mini{background:#1b2639}.mini{display:block;margin-top:6px;padding:7px 9px;font-size:11px}.flash{padding:12px 15px;border-radius:12px;margin-bottom:12px;background:#1e3a34}.flash.error{background:#4b252b}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.wide{grid-column:1/-1}.inline-form{display:flex;gap:8px;align-items:center;margin-top:12px}.inline-form input{flex:1}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:12px;border-bottom:1px solid #ffffff12;vertical-align:top;min-width:120px}th{color:#8796b1}td a{color:#aab8ff}.check{display:flex;align-items:center;gap:9px}.check input{width:auto}footer{text-align:center;padding:20px;color:#53617b;font-size:12px}.login{max-width:460px;margin:60px auto}.login form{margin-top:20px}@media(max-width:650px){.top{padding:17px 14px}.wrap{padding:0 12px;margin-top:12px}.tag{display:none}.hero,.panel{border-radius:19px;padding:20px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.split{align-items:flex-start}.inline-form{align-items:stretch;flex-direction:column}.urlbox{flex-direction:column}.admin-head{align-items:flex-start}.hero h1{font-size:38px}}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}.steps>div{padding:16px;border:1px solid var(--line,#263246);border-radius:16px;background:rgba(255,255,255,.025)}.steps p{margin:8px 0 0;color:var(--muted,#a6b2c4);line-height:1.55}.steps b{display:block}

/* Responsive polish and accessible controls */
:root{--line:#263246;--muted:#a6b2c4;scroll-behavior:smooth}
html{min-width:320px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-wrap:anywhere}
a,button,input,textarea,select{touch-action:manipulation}
a{color:#aab8ff}
:focus-visible{outline:3px solid #91a5ff;outline-offset:3px}
button{min-height:42px;transition:filter .16s ease,transform .16s ease}
button:active{transform:translateY(1px)}
input,textarea,select{min-height:44px;max-width:100%}
textarea{min-height:110px}
img,video,iframe{max-width:100%}
.panel,.hero{min-width:0;backdrop-filter:blur(10px)}
.form-grid>*{min-width:0}
.table-wrap{max-width:100%;overscroll-behavior-x:contain;border-radius:12px}
table{max-width:100%}
.urlbox input{min-width:0}
.steps>div{min-width:0}
@media (min-width:1200px){.wrap,.top{max-width:1160px}}
@media (max-width:760px){
  .section-head,.admin-head{flex-wrap:wrap}
  .section-head>*,.admin-head>*{min-width:0}
  .stat{gap:12px;align-items:flex-start}
  .stat strong{text-align:right;overflow-wrap:anywhere}
  .table-wrap table{min-width:680px}
  .hero h1{font-size:clamp(32px,9vw,44px)}
}
@media (max-width:420px){
  .top{gap:8px;padding-inline:12px}
  .brand{font-size:16px}
  .wrap{padding-inline:10px}
  .hero,.panel{padding:17px;border-radius:16px}
  h2{font-size:20px}
  .chips span{font-size:11px;padding:6px 9px}
  button{max-width:100%;white-space:normal}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Access requests, account entry and admin workflow */
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 16px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid #ffffff18}
.button-link.primary{background:linear-gradient(120deg,#5b6df2,#7658df);color:#fff}
.button-link.secondary{background:#1b2639;color:#f5f7ff}
.request-card{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.5fr);gap:18px;padding:18px 0;border-bottom:1px solid #ffffff12}
.request-card:last-of-type{border-bottom:0}
.request-main h3{margin-top:0;overflow-wrap:anywhere}
.request-main p{margin:6px 0;overflow-wrap:anywhere}
.request-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.form-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}
.form-grid.compact .wide{grid-column:1/-1}
.danger{background:#542c36;border-color:#8a4758}
details{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff12}
summary{cursor:pointer;font-weight:750;padding:8px 0}
.login h1{font-size:clamp(30px,5vw,42px);letter-spacing:-.035em}
.login a{color:#aab8ff}
input:focus,textarea:focus,select:focus{border-color:#8194ff;outline:none;box-shadow:0 0 0 3px #8194ff20}
button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.request-card{grid-template-columns:1fr}.request-actions{grid-template-columns:1fr}.form-grid.compact{grid-template-columns:1fr}.form-grid.compact .wide{grid-column:auto}.hero-actions{flex-direction:column;align-items:stretch}.button-link{width:100%}}
.action-stack{margin-top:8px}.action-stack .inline-form{margin:0;gap:6px}.action-stack .inline-form input{max-width:100px}.action-stack .mini{display:inline-flex;align-items:center;justify-content:center;margin-top:4px}.action-stack button{font-size:11px;padding:7px 9px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:16px 0}.stats-grid .stat{display:flex;flex-direction:column;gap:4px;min-width:0}.stats-grid .stat b{overflow-wrap:anywhere}.stats-grid .stat span{font-size:12px}
.top-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.top-links a{display:inline-flex;align-items:center;min-height:38px;padding:7px 10px;border:1px solid #ffffff18;border-radius:10px;background:#ffffff08;color:#cbd5ed;text-decoration:none;font-size:12px;font-weight:750}.top-links a:hover{background:#ffffff12;color:#fff}@media(max-width:520px){.top{align-items:flex-start;flex-direction:column}.top-links{width:100%}.top-links a{flex:1;justify-content:center}}

/* Admin section navigation */
.admin-nav{position:sticky;top:8px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:10px;border:1px solid #ffffff18;border-radius:17px;background:#0b1220ed;box-shadow:0 12px 35px #0004;backdrop-filter:blur(12px)}
.admin-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 13px;border:1px solid #ffffff16;border-radius:11px;background:#1b2639;color:#e6ebff;text-decoration:none;font-size:12px;font-weight:800;transition:background .16s ease,transform .16s ease}
.admin-nav a:hover{background:#303e60;transform:translateY(-1px)}
.admin-nav a:focus-visible{outline:3px solid #91a5ff;outline-offset:2px}
.admin-head{scroll-margin-top:100px}.panel[id]{scroll-margin-top:100px}
@media(max-width:650px){.admin-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px}.admin-nav a{text-align:center;padding:8px 6px;font-size:11px}}

/* Admin navigation behaves as tabs; hidden panels must not be forced visible. */
.admin-nav a.active { background: var(--accent, #2563eb); color: #fff; border-color: transparent; }
.panel[hidden] { display: none !important; }


/* v11: search, configurable branding, subtle motion and mobile-safe support launcher */
:root{--accent:#6478ff;--accent2:#8b5cf6;--surface-glow:rgba(108,126,255,.12)}
body{background-image:radial-gradient(ellipse at 8% 2%,rgba(91,109,242,.22),transparent 36%),radial-gradient(ellipse at 94% 16%,rgba(20,184,166,.12),transparent 30%),linear-gradient(160deg,#080d17,#0b1020 58%,#080d17)}
.hero,.panel{box-shadow:0 18px 55px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.panel:hover{border-color:rgba(139,156,255,.19);box-shadow:0 22px 62px rgba(0,0,0,.3),0 0 0 1px rgba(108,126,255,.025)}
.home-hero{animation:hero-enter .5s ease both}
.home-hero .chips span{background:linear-gradient(120deg,rgba(99,102,241,.13),rgba(20,184,166,.07));border-color:rgba(160,174,255,.16)}
.steps>div{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.steps>div:hover{transform:translateY(-3px);border-color:rgba(139,156,255,.32);background:rgba(111,126,255,.06)}
button,.button-link,.admin-nav a{transition:filter .18s ease,transform .18s ease,box-shadow .18s ease}
button:hover,.button-link:hover{box-shadow:0 8px 24px rgba(76,95,220,.18)}
.client-search-label{display:block;margin:18px 0 12px;color:#dbe4ff;font-size:13px;font-weight:750}
.client-search-label input{margin-top:9px;background:linear-gradient(120deg,#0b1220,#101a2b);border-color:rgba(139,156,255,.28)}
.client-search-label .muted{display:block;margin-top:7px;font-size:11px;font-weight:500}
.client-comment{display:inline-block;margin-top:4px;color:#a7b7ff;font-size:12px;overflow-wrap:anywhere}
#panel-clients-table tbody tr[hidden]{display:none!important}
#panel-clients-table tbody tr:not([hidden]){animation:row-enter .18s ease both}
.support-fab{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:1000;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 15px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:linear-gradient(120deg,#4f66f5,#7655db);color:#fff;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 8px 28px rgba(0,0,0,.38),0 0 22px rgba(83,104,245,.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.support-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 26px rgba(83,104,245,.3)}
.support-fab-icon{font-size:17px;line-height:1}.support-fab-label{display:inline}
@keyframes hero-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes row-enter{from{opacity:.45}to{opacity:1}}
@media(max-width:650px){.support-fab{right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:46px;height:46px;min-height:46px;padding:0;justify-content:center;border-radius:50%;box-shadow:0 5px 18px rgba(0,0,0,.4)}.support-fab-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.support-fab-icon{font-size:19px}.client-search-label input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.home-hero,.steps>div,#panel-clients-table tbody tr{animation:none!important}.panel,.hero,.steps>div,button,.button-link,.admin-nav a,.support-fab{transition:none!important}.steps>div:hover,.support-fab:hover{transform:none}}

/* v12: searchable portal-client list, paged support history, refined visual hierarchy */
:root{--accent:#4f7cff;--accent2:#9b5cf6;--mint:#2dd4bf;--surface:#111a2b;--surface-2:#172338;--line:rgba(156,177,220,.17)}
body{background-image:radial-gradient(ellipse at 4% 4%,rgba(79,124,255,.2),transparent 34%),radial-gradient(ellipse at 95% 22%,rgba(45,212,191,.1),transparent 28%),radial-gradient(ellipse at 52% 100%,rgba(155,92,246,.08),transparent 35%),linear-gradient(155deg,#070b14 0%,#0b1220 48%,#0a1020 100%)}
.panel{border-color:rgba(153,174,225,.13);background:linear-gradient(145deg,rgba(20,31,51,.94),rgba(13,21,36,.96))}
.panel h2{letter-spacing:-.025em}.eyebrow{color:#8ea7ff;letter-spacing:.14em}
.admin-nav a.active{background:linear-gradient(120deg,#456df5,#8b5cf6);box-shadow:0 7px 22px rgba(79,124,255,.22)}
.client-search-label input{border-radius:14px;border:1px solid rgba(129,155,255,.3);background:linear-gradient(120deg,#0a1220,#121e32);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
#portal-clients-table tbody tr[hidden]{display:none!important}
#portal-clients-table tbody tr.portal-client-row:not([hidden]){animation:portal-row-enter .18s ease both}
#portal-clients-table td:first-child b{font-size:13px;color:#f1f5ff}
.client-comment{display:inline-block;max-width:360px;margin:7px 0 2px;padding:6px 9px;border:1px solid rgba(129,155,255,.18);border-radius:9px;background:rgba(79,124,255,.09);color:#c2ceff;line-height:1.45;white-space:normal}
.support-ticket-list{display:grid;gap:14px;margin-top:16px}
.support-ticket-card{grid-template-columns:minmax(0,1fr) minmax(280px,.82fr);gap:20px;padding:18px;border:1px solid rgba(150,173,226,.14);border-radius:18px;background:linear-gradient(135deg,rgba(20,32,53,.94),rgba(13,22,38,.96));box-shadow:0 10px 30px rgba(0,0,0,.13);animation:portal-row-enter .22s ease both}
.support-ticket-card:hover{border-color:rgba(129,155,255,.27);box-shadow:0 14px 36px rgba(0,0,0,.22)}
.support-ticket-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.support-ticket-number{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border-radius:8px;background:rgba(129,155,255,.12);color:#b9c7ff;font-size:12px;font-weight:850}
.support-ticket-status{display:inline-flex;align-items:center;min-height:27px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800}
.support-ticket-status.is-open{color:#7ef0d1;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.18)}
.support-ticket-status.is-closed{color:#bac5d9;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.15)}
.support-ticket-card .request-main h3{margin:0 0 9px;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.support-ticket-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:#9caecc;font-size:12px}
.support-ticket-meta b{color:#dce6ff;overflow-wrap:anywhere}
.support-message{margin-top:12px;padding:13px 14px;border-left:3px solid #6687ff;border-radius:0 12px 12px 0;background:rgba(7,13,25,.48);color:#d6def0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.support-reply{margin-top:12px;padding:13px 14px;border:1px solid rgba(45,212,191,.16);border-radius:12px;background:rgba(18,111,99,.1)}
.support-reply>b{color:#7debd3;font-size:12px}.support-reply p{margin:7px 0;white-space:pre-wrap;overflow-wrap:anywhere;color:#d8f5ef;line-height:1.6}
.support-reply-form{align-content:start;padding:14px;border:1px solid rgba(151,170,215,.12);border-radius:14px;background:rgba(4,9,18,.22)}
.support-reply-form textarea{min-height:100px;resize:vertical}
.support-load-more-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:20px;padding:16px;border-top:1px solid rgba(151,170,215,.12)}
#support-load-more{min-width:220px;background:linear-gradient(120deg,rgba(79,124,255,.2),rgba(155,92,246,.18));border-color:rgba(129,155,255,.32)}
#support-load-more[hidden]{display:none!important}
@keyframes portal-row-enter{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.support-ticket-card{grid-template-columns:minmax(0,1fr);padding:14px;gap:14px}.support-reply-form{padding:12px}.support-load-more-wrap{align-items:stretch;flex-direction:column;text-align:center}#support-load-more{width:100%;min-width:0}}
@media(prefers-reduced-motion:reduce){#portal-clients-table tbody tr,.support-ticket-card{animation:none!important}}

/* v13: customer support is a single readable conversation, not a page-bottom reply */
.support-hero{position:relative;overflow:hidden}
.support-conversation-panel,.support-new-panel,.support-history-panel{margin-top:20px}
.support-conversation-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.support-conversation-top h2,.support-new-panel h2{margin:7px 0 6px}
.support-thread{display:flex;flex-direction:column;gap:14px;padding:20px 0;max-height:none}
.support-chat-message{width:min(86%,760px);min-width:0;animation:portal-row-enter .18s ease both}
.support-chat-message.from-client{align-self:flex-end}
.support-chat-message.from-admin{align-self:flex-start}
.support-chat-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 5px 6px;color:#94a6c7;font-size:11px}
.support-chat-meta b{color:#dce6ff;font-size:12px}
.support-chat-meta time{font-variant-numeric:tabular-nums}
.support-chat-bubble{padding:13px 15px;border:1px solid rgba(146,166,213,.17);border-radius:15px;background:linear-gradient(145deg,rgba(24,38,62,.95),rgba(16,26,44,.96));color:#e0e8f8;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.from-client .support-chat-bubble{border-color:rgba(103,132,255,.28);border-bottom-right-radius:5px;background:linear-gradient(145deg,rgba(50,71,133,.45),rgba(35,45,83,.56))}
.from-admin .support-chat-bubble{border-bottom-left-radius:5px;border-left:3px solid rgba(45,212,191,.65)}
.support-compose{padding:18px;border:1px solid rgba(129,155,255,.18);border-radius:17px;background:linear-gradient(145deg,rgba(7,13,25,.45),rgba(16,27,46,.7))}
.support-compose>label{display:block;margin-bottom:8px;font-size:13px;font-weight:800;color:#dce6ff}
.support-compose textarea{width:100%;min-height:100px;resize:vertical}
.support-compose-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.support-new-form{margin-top:18px}
.support-history-list{display:grid;gap:10px;margin-top:16px}
.support-history-item{overflow:hidden;border:1px solid rgba(150,173,226,.13);border-radius:15px;background:rgba(5,11,22,.24)}
.support-history-item>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;cursor:pointer;list-style:none}
.support-history-item>summary::-webkit-details-marker{display:none}
.support-history-item>summary:after{content:'＋';margin-left:4px;color:#aebfff;font-size:18px}
.support-history-item[open]>summary:after{content:'−'}
.support-history-title{display:grid;gap:5px;min-width:0}
.support-history-title b{color:#e1e9fb;overflow-wrap:anywhere}
.support-history-title small{color:#94a6c7;font-size:11px}
.support-history-thread{padding:0 15px 15px}
.support-empty-state{text-align:center;padding:30px}
.support-empty-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;border-radius:17px;background:rgba(79,124,255,.14);color:#b7c7ff;font-size:25px}
.support-admin-thread{display:grid;gap:12px;margin-top:15px}
.support-admin-message{padding:10px;border:1px solid rgba(146,166,213,.11);border-radius:12px;background:rgba(5,11,22,.24)}
.support-admin-message .support-chat-bubble{box-shadow:none}
.support-admin-message.from-client{border-left:3px solid rgba(103,132,255,.6)}
.support-admin-message.from-admin{border-left:3px solid rgba(45,212,191,.6)}
.support-reply-form{position:sticky;top:12px}
@media(max-width:650px){.support-chat-message{width:95%}.support-conversation-top{display:grid}.support-compose{padding:13px}.support-compose-footer{align-items:stretch}.support-compose-footer .primary,.support-compose-footer button{width:100%}.support-history-item>summary{padding:12px}.support-history-item .support-ticket-status{flex-shrink:0}.support-reply-form{position:static}}
@media(prefers-reduced-motion:reduce){.support-chat-message{animation:none!important}}

.support-active-thread{max-height:min(54vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:18px 8px;scrollbar-width:thin;scrollbar-color:rgba(129,155,255,.4) transparent}
.support-admin-thread{max-height:390px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(129,155,255,.35) transparent}
@media(max-width:650px){.support-active-thread{max-height:52vh;padding-left:3px;padding-right:3px}.support-admin-thread{max-height:320px}}


/* v14: lightweight AJAX refresh controls for admin request/support sections */
.refresh-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.section-refresh-button{white-space:nowrap;min-height:40px}
.section-refresh-button:disabled{opacity:.65;cursor:wait;transform:none}
.refresh-status{min-height:1.2em;margin:.65rem 0 0;font-size:.92rem}
#requests-refresh-content,#support-refresh-content{min-width:0}
#requests-refresh-content>.request-card:first-child{margin-top:.5rem}
@media(max-width:700px){.refresh-actions{width:100%;justify-content:flex-start}.section-refresh-button{flex:1 1 100%}.section-head{align-items:flex-start;gap:12px}}
@media(prefers-reduced-motion:reduce){.section-refresh-button{transition:none}}


/* v15: customer support refresh control and stable fragment layout */
.support-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.support-hero-actions .button-link,.support-hero-actions button{min-height:42px}
#client-support-refresh:disabled{opacity:.65;cursor:wait}
#client-support-content{min-width:0}
#client-support-refresh-status{margin-bottom:0}
@media(max-width:650px){.support-hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}.support-hero-actions .button-link,.support-hero-actions button{width:100%;text-align:center}}

/* v16: neutral warning state for reminder diagnostics */
.flash.warning{background:#5a4522;border:1px solid #a7792a;color:#fff1c2}

/* v17: brighter admin accents, trial access, and a self-contained searchable mail journal */
:root{--accent:#4f7cff;--accent2:#a855f7;--mint:#2dd4bf;--amber:#fbbf24;--rose:#fb7185}
body{background-color:#0b1020;background-image:radial-gradient(ellipse at 4% 0%,rgba(79,124,255,.24),transparent 34%),radial-gradient(ellipse at 95% 10%,rgba(168,85,247,.19),transparent 31%),radial-gradient(ellipse at 50% 100%,rgba(45,212,191,.09),transparent 40%),linear-gradient(150deg,#0b1020,#11152a 55%,#0a1420)}
.panel{border-color:rgba(148,163,255,.16);background:linear-gradient(145deg,rgba(25,34,59,.92),rgba(15,23,42,.96))}
.panel h2{color:#f1f5ff}.eyebrow{color:#a5b4fc}.admin-nav a.active{background:linear-gradient(120deg,#4778ff,#9557e8);box-shadow:0 5px 18px rgba(79,124,255,.24)}
button.primary,.primary{background:linear-gradient(120deg,#4778ff,#8757e8);border-color:transparent;color:#fff}.secondary{background:linear-gradient(120deg,#1b3657,#29314e);border-color:rgba(125,211,252,.22);color:#e6f6ff}.danger{background:linear-gradient(120deg,#71354b,#8f3f5b);border-color:#fda4af55}
.tag{background:linear-gradient(120deg,rgba(79,124,255,.17),rgba(168,85,247,.15));border-color:rgba(165,180,252,.24);color:#dbeafe}
.request-card{border-bottom-color:rgba(125,211,252,.16)}.request-card .request-main{padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(79,124,255,.10),rgba(45,212,191,.06));border:1px solid rgba(125,211,252,.12)}
.request-actions .form-grid label,.form-grid label{color:#d8e3ff}.request-actions select:focus,.request-actions input:focus{border-color:#60a5fa}
.mail-log-panel{border-color:rgba(45,212,191,.23);background:linear-gradient(145deg,rgba(20,37,59,.97),rgba(19,24,48,.98))}.mail-log-toolbar{display:flex;gap:10px;align-items:center;margin:12px 0}.mail-log-toolbar input{flex:1;min-width:0;background:#0c1729;border-color:rgba(125,211,252,.26)}
.mail-log-scroll{max-height:460px;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(125,211,252,.18);border-radius:14px;background:rgba(5,12,25,.48);scrollbar-color:#6478ff #111827;scrollbar-width:thin}
.mail-log-scroll .table-wrap{overflow:visible;border-radius:0}.mail-log-table{min-width:760px}.mail-log-table thead{position:sticky;top:0;z-index:2;background:#1c2946}.mail-log-table th{color:#bfdbfe;background:#1c2946}.mail-log-table td{border-bottom-color:rgba(148,163,184,.13);color:#dbe5fa}.mail-log-table tbody tr:nth-child(even){background:rgba(96,165,250,.045)}.mail-log-table tbody tr:hover{background:rgba(129,140,248,.10)}
.mail-status{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#334155;color:#e2e8f0}.mail-status-sent{background:rgba(16,185,129,.16);color:#6ee7b7;border:1px solid rgba(52,211,153,.22)}.mail-status-error{background:rgba(244,63,94,.15);color:#fda4af;border:1px solid rgba(251,113,133,.22)}.mail-log-empty{text-align:center!important;padding:26px!important;color:#a5b4fc!important}.mail-log-toolbar button{flex-shrink:0}.mail-log-panel #mail-log-status{min-height:18px;margin:6px 0 10px;color:#a5f3fc}
@media(max-width:650px){.mail-log-toolbar{align-items:stretch;flex-direction:column}.mail-log-toolbar button{width:100%}.mail-log-scroll{max-height:55vh}.mail-log-table{min-width:700px}}


/* v18: internal scrolling for long admin lists and subscription history */
#panel-clients .table-wrap,
#portal-clients .table-wrap,
#expiry .table-wrap,
#requests-refresh-content details .table-wrap {
  max-height: min(62vh, 560px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #6478ff #111827;
}
#panel-clients .table-wrap table,
#portal-clients .table-wrap table,
#expiry .table-wrap table,
#requests-refresh-content details .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}
#panel-clients .table-wrap thead th,
#portal-clients .table-wrap thead th,
#expiry .table-wrap thead th,
#requests-refresh-content details .table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1c2946;
}
#requests-refresh-content {
  max-height: min(64vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: #6478ff #111827;
}
#support-ticket-list {
  max-height: min(66vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px 7px 3px 2px;
  scrollbar-width: thin;
  scrollbar-color: #6478ff #111827;
}
#panel-clients .table-wrap::-webkit-scrollbar,
#portal-clients .table-wrap::-webkit-scrollbar,
#expiry .table-wrap::-webkit-scrollbar,
#requests-refresh-content::-webkit-scrollbar,
#support-ticket-list::-webkit-scrollbar { width: 9px; height: 9px; }
#panel-clients .table-wrap::-webkit-scrollbar-thumb,
#portal-clients .table-wrap::-webkit-scrollbar-thumb,
#expiry .table-wrap::-webkit-scrollbar-thumb,
#requests-refresh-content::-webkit-scrollbar-thumb,
#support-ticket-list::-webkit-scrollbar-thumb { background: #4659a2; border-radius: 99px; border: 2px solid #111827; }
@media(max-width:650px) {
  #panel-clients .table-wrap,
  #portal-clients .table-wrap,
  #expiry .table-wrap,
  #requests-refresh-content details .table-wrap { max-height: 58vh; }
  #requests-refresh-content { max-height: 60vh; }
  #support-ticket-list { max-height: 60vh; }
}

#expiry .table-wrap tr:first-child th { position: sticky; top: 0; z-index: 2; background: #1c2946; }

.announcement-media{display:block;width:100%;max-width:760px;max-height:480px;object-fit:contain;margin:12px 0;border-radius:14px}


/* v22: dedicated responsive payment page and separated admin payment workflows */
.payment-hero h1 span{background:linear-gradient(110deg,#a5b4fc,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.payment-back{margin-top:18px}
.payment-panel{margin:0 0 28px;padding:clamp(16px,3vw,26px);border:1px solid rgba(148,163,255,.2);border-radius:20px;background:linear-gradient(145deg,rgba(25,34,59,.96),rgba(12,20,36,.98));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.payment-panel h2,.payment-panel h3{color:#f1f5ff}
.payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.payment-method{min-width:0;padding:16px;border:1px solid rgba(148,163,255,.25);border-radius:16px;background:linear-gradient(145deg,rgba(31,43,70,.75),rgba(13,22,39,.85));transition:border-color .18s ease,transform .18s ease}
.payment-method:focus-within,.payment-method:hover{border-color:rgba(165,180,252,.65)}
.payment-method label{align-items:flex-start;line-height:1.45;color:#f5f7ff;cursor:pointer}
.payment-method input[type=radio]{flex:0 0 auto;width:18px;height:18px;min-height:18px;margin:2px 0 0;accent-color:#8b7cff}
.payment-details{color:#dce5fa;line-height:1.65}.payment-details p{margin:8px 0}.payment-muted{color:#aebbd3;opacity:1;line-height:1.55}
.payment-qr{width:min(100%,230px);height:auto;max-height:260px;padding:8px;background:#fff;border:1px solid #ffffff40;object-fit:contain}
.payment-field{display:block;margin:16px 0;color:#e6ecff;font-weight:750}.payment-field input,.payment-field select,.payment-field textarea{display:block;width:100%;margin-top:8px;padding:12px 13px;color:#f5f7ff;background:#0b1424;border:1px solid #475777;border-radius:12px;font:inherit;font-weight:500}.payment-field select option{background:#101a2d;color:#f5f7ff}.payment-field textarea{min-height:88px}.payment-panel form>button.primary{width:100%;margin-top:8px}
.payment-history{margin-top:24px;padding-top:18px;border-top:1px solid rgba(148,163,255,.2);max-width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5867a7 transparent}.payment-history table{min-width:560px}.payment-history th{position:sticky;top:0;background:#1c2946;color:#cbd5ff}.payment-history td{color:#e2e8f0}.payment-order-status{white-space:normal;color:#dbeafe}.payment-admin-scroll{max-height:65vh;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(148,163,255,.2);border-radius:14px;scrollbar-width:thin;scrollbar-color:#5867a7 transparent}.payment-admin-table{min-width:940px}.payment-admin-table thead th{position:sticky;top:0;z-index:2;background:#1c2946;color:#cbd5ff}.payment-admin-table tbody tr:nth-child(even){background:rgba(148,163,255,.035)}.payment-admin-table td{color:#e1e8f8}.payment-admin-table td small{color:#aebbd3}.payment-order-actions{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}.payment-order-actions .mini{margin:0}.payment-empty{text-align:center!important;padding:26px!important;color:#b9c6e4!important}
@media(max-width:800px){.payment-grid{grid-template-columns:1fr}.payment-method{padding:14px}.payment-admin-scroll{max-height:58vh}.payment-panel{padding:16px}}
@media(max-width:520px){.payment-back .button-link{width:100%}.payment-history table{min-width:510px}.payment-field input,.payment-field select,.payment-field textarea{font-size:16px}.payment-qr{max-width:190px}}
@media(prefers-reduced-motion:reduce){.payment-method{transition:none}}


/* v23: shared image/video lightbox and clean navigation on private pages */
.media-preview{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;margin:10px 0;padding:8px;overflow:hidden;border:1px solid rgba(148,163,255,.3);border-radius:16px;background:linear-gradient(145deg,rgba(31,43,70,.8),rgba(13,22,39,.96));color:#eaf0ff;cursor:zoom-in;box-shadow:0 10px 28px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.media-preview:hover,.media-preview:focus-visible{transform:translateY(-2px);border-color:#9ba8ff;box-shadow:0 16px 38px rgba(0,0,0,.32);outline:none}
.media-preview .announcement-media{display:block;margin:0;width:100%;max-width:760px;max-height:420px;object-fit:contain;border-radius:10px}
.media-preview-hint{display:block;padding:8px 5px 2px;color:#cbd5ff;font-size:12px;font-weight:700;text-align:center}
.payment-qr-preview{width:min(100%,260px)}.payment-qr-preview .payment-qr{display:block;width:100%;max-width:230px;max-height:260px;object-fit:contain;border-radius:10px}
.announcement-preview{width:fit-content;max-width:100%}.video-preview{cursor:pointer}.video-play-mark{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid #ffffff9c;border-radius:50%;background:rgba(10,15,28,.72);color:#fff;font-size:25px;padding-left:4px;box-shadow:0 8px 28px #0007;pointer-events:none}
.media-lightbox[hidden]{display:none}.media-lightbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:clamp(10px,3vw,30px)}.media-lightbox-backdrop{position:absolute;inset:0;background:rgba(2,6,16,.86);backdrop-filter:blur(9px)}.media-lightbox-dialog{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:min(100%,1100px);max-height:92dvh;padding:clamp(12px,2vw,24px);border:1px solid rgba(165,180,252,.32);border-radius:22px;background:linear-gradient(145deg,#17223a,#080e1b);box-shadow:0 28px 100px #0009;animation:lightbox-in .18s ease-out}.media-lightbox-close{position:absolute;z-index:2;top:8px;right:8px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#111a2c;color:#fff;font-size:30px;line-height:1;cursor:pointer}.media-lightbox-content{display:flex;align-items:center;justify-content:center;width:100%;max-height:calc(92dvh - 60px);min-height:100px;padding-top:20px}.media-lightbox-media{display:block;max-width:100%;max-height:calc(92dvh - 90px);width:auto;height:auto;object-fit:contain;border-radius:12px;background:#03060d}.media-lightbox video.media-lightbox-media{width:100%;max-height:calc(92dvh - 90px)}body.lightbox-open{overflow:hidden}@keyframes lightbox-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){.media-lightbox{padding:8px}.media-lightbox-dialog{width:100%;max-height:94dvh;padding:10px;border-radius:16px}.media-lightbox-content{max-height:calc(94dvh - 44px);padding-top:28px}.media-lightbox-media,.media-lightbox video.media-lightbox-media{max-height:calc(94dvh - 90px)}.media-preview .announcement-media{max-height:300px}.video-play-mark{width:52px;height:52px;font-size:21px}}
@media(prefers-reduced-motion:reduce){.media-preview,.media-lightbox-dialog{animation:none;transition:none}}

/* v24 payment-method setup */
.payment-config-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;padding:16px;border:1px solid rgba(148,163,255,.22);border-radius:15px;background:rgba(148,163,255,.045)}.payment-config-card h3,.payment-config-card p,.payment-config-card img,.payment-config-card>div{grid-column:1/-1;margin-top:0}.payment-config-card label{display:block}.payment-config-card input{width:100%;box-sizing:border-box;margin-top:6px}.payment-config-card img{border-radius:12px;background:#fff;padding:6px}@media(max-width:600px){.payment-config-card{padding:12px;grid-template-columns:1fr}}


/* v25: brighter, more varied surfaces and responsive backup controls */
:root{--accent:#4263eb;--accent2:#8b5cf6;--mint:#0f9f8f;--line:#d8e1f2;--muted:#5c6b84;--surface:#ffffff;--surface-2:#f4f7ff;color-scheme:light}
body{background:radial-gradient(circle at 7% 2%,rgba(180,198,255,.65),transparent 31%),radial-gradient(circle at 94% 12%,rgba(167,243,208,.48),transparent 27%),linear-gradient(135deg,#f3f6ff 0%,#eef8f6 50%,#f7f2ff 100%);color:#1b2942}
.top{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);border-radius:0 0 20px 20px;backdrop-filter:blur(14px)}
.brand{color:#25365b}.top-links a{background:#fff;color:#34466a;border-color:#dce5f5}.top-links a:hover{background:#eaf0ff;color:#233b86}
.hero{background:linear-gradient(125deg,#dbeafe 0%,#e9e5ff 52%,#d9fbf0 100%);border-color:#d7e2fb;color:#1b2942;box-shadow:0 18px 42px rgba(67,89,145,.12)}
.hero h1{color:#1c2b4c}.hero h1 span{color:#4f46e5}.hero p,.panel p{color:#5c6b84}.eyebrow{color:#596cc0}
.panel{background:rgba(255,255,255,.92);border-color:#dce5f3;box-shadow:0 12px 34px rgba(55,75,120,.08);color:#22304a}.panel h2,.panel h3{color:#22304a}
.tag,.chips span{background:#f2f5ff;border-color:#dce5f5;color:#52617c}.date,.muted{color:#63718a}.stat{background:#f0f4ff;border:1px solid #e1e8f6}.stat span{color:#5d6b84}
label{color:#40516f}input,textarea,select{background:#fff;color:#1e2c45;border-color:#d4deef;box-shadow:inset 0 1px 2px rgba(30,50,90,.03)}input:focus,textarea:focus,select:focus{outline:3px solid rgba(79,124,255,.18);border-color:#6d8cff}button{background:#e6ebfa;color:#26385c;border-color:#d4def1}button.secondary,.mini{background:#edf2ff;color:#30456d;border-color:#d7e1f4}button.primary,.button-link.primary{background:linear-gradient(120deg,#4263eb,#8b5cf6);color:#fff;border-color:transparent}.flash{background:#d9f8e8;color:#155b42;border:1px solid #b5ebd0}.flash.error{background:#ffe3e7;color:#8d2436;border-color:#ffc6ce}.flash.warning{background:#fff3cd;color:#79530b}
th{color:#52627d}th,td{border-bottom-color:#e2e8f3}td a{color:#425ad0}footer{color:#7886a0}.steps>div{background:linear-gradient(135deg,#fff,#f2f6ff);border-color:#dbe5f5}.steps p{color:#5d6b84}
.admin-nav{background:rgba(255,255,255,.92);border:1px solid #dce5f3;box-shadow:0 8px 24px rgba(55,75,120,.08)}.admin-nav a{color:#4a5a78}.admin-nav a:hover{background:#edf2ff;color:#293f81}.admin-nav a.active{background:linear-gradient(120deg,#4263eb,#8b5cf6);color:#fff}
.payment-config-card,.backup-warning{background:linear-gradient(135deg,#f7f9ff,#effbf7);border-color:#d8e4f4}.payment-config-card h3{color:#2e4270}.backup-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.button-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:11px;text-decoration:none;font-weight:800}.backup-warning{border:1px solid #f2d69a;border-radius:14px;padding:15px;margin:16px 0;background:linear-gradient(135deg,#fff9e9,#fff4f1)}.backup-warning strong{color:#835b11}.backup-warning p{margin:6px 0 0;color:#6e5a39}.backup-restore-form{padding:16px;border:1px dashed #b8c7e4;border-radius:15px;background:#f8faff}.backup-panel code{overflow-wrap:anywhere;background:#edf1fa;padding:2px 5px;border-radius:5px;color:#354767}
@media(max-width:650px){.top{border-radius:0 0 16px 16px}.backup-actions .button-link,.backup-restore-form button{width:100%;text-align:center}.backup-panel{padding:17px}.admin-nav{background:#fff}}
@media(prefers-reduced-motion:reduce){.backup-panel,.backup-actions *{transition:none!important}}


/* v26: project-wide accessible light palette — keep all content readable */
:root{color-scheme:light;--accent:#3159d9;--accent2:#7546d8;--mint:#087f70;--line:#d5dfef;--muted:#53647d;--surface:#fff;--surface-2:#f2f6fd;--text:#1b2940;--text-soft:#40516b;--focus:#285ee8}
html{background:#f3f6fc;color-scheme:light}
body{background:radial-gradient(ellipse at 5% 0%,rgba(191,211,255,.65),transparent 34%),radial-gradient(ellipse at 95% 9%,rgba(190,245,226,.52),transparent 30%),linear-gradient(145deg,#f5f7ff 0%,#eef7f5 52%,#f8f3ff 100%)!important;color:#1b2940!important}
.top{background:rgba(255,255,255,.82)!important;border:1px solid #dce5f3!important;box-shadow:0 8px 28px rgba(39,58,96,.07)}
.brand{color:#20345a!important}.top-links a,.admin-global-links a{background:#fff!important;color:#304563!important;border-color:#d4deef!important}.top-links a:hover,.admin-global-links a:hover{background:#eaf0ff!important;color:#213f9b!important}
.hero{background:linear-gradient(125deg,#e1ebff 0%,#ede7ff 52%,#ddf8ef 100%)!important;border-color:#d2def2!important;color:#1c2b45!important;box-shadow:0 18px 42px rgba(44,67,120,.12)!important}
.hero h1,.hero h2,.hero h3{color:#1b2b49!important}.hero h1 span{color:#3f50c9!important}.hero p,.panel p{color:#4e5f78!important}.eyebrow{color:#485fbd!important}
.panel,.section-card,.support-card,.login,.payment-panel{background:rgba(255,255,255,.96)!important;color:#1f2d44!important;border-color:#d7e1f0!important;box-shadow:0 12px 34px rgba(45,64,103,.09)!important}
.panel h1,.panel h2,.panel h3,.panel h4,.section-title,.section-head,.admin-head h1{color:#1d2c47!important}
.panel p,.muted,.date,.section-small,.help-text,.hint,.description,.client-comment,.refresh-status{color:#53647d!important;opacity:1!important}
.tag,.chips span,.badge,.status-tag{background:#edf2ff!important;color:#344c7b!important;border-color:#d1ddf2!important}
.stat,.stats-grid .stat{background:#f1f5fd!important;border:1px solid #dce5f3!important;color:#253753!important}.stat span,.stats-grid .stat span{color:#52637c!important}
label,.payment-field,.payment-details,.payment-muted{color:#334762!important;opacity:1!important}
input,textarea,select,button,option{color:#1d2b43}
input,textarea,select{background:#fff!important;color:#1b2940!important;border:1px solid #bdcbe0!important;box-shadow:inset 0 1px 2px rgba(20,40,75,.035)}
input::placeholder,textarea::placeholder{color:#687992!important;opacity:1!important}
select option{background:#fff!important;color:#1b2940!important}
input:focus,textarea:focus,select:focus{border-color:#315fe5!important;outline:3px solid rgba(49,95,229,.19)!important;box-shadow:0 0 0 1px rgba(49,95,229,.08)!important}
input[type=checkbox],input[type=radio]{accent-color:#3159d9!important}
button,.button-link{background:#e8eefb;color:#263b61;border-color:#cbd8ee;box-shadow:0 2px 5px rgba(35,55,95,.05)}
button:hover,.button-link:hover{filter:none;background:#dce7ff;color:#203b83;border-color:#9db4ec}
button.primary,.button-link.primary,.primary{background:linear-gradient(120deg,#3159d9,#7546d8)!important;color:#fff!important;border-color:transparent!important}
button.secondary,.secondary,.mini,.button-link.secondary{background:#edf2fb!important;color:#304565!important;border-color:#d0dced!important}
button.danger,.danger{background:#b4233b!important;color:#fff!important;border-color:#9f1d32!important}
button:disabled{background:#e6eaf1!important;color:#7c8798!important;border-color:#d7dde7!important;opacity:1!important}
a{color:#294fca}.panel a{color:#294fca}.panel a:hover{color:#1d3899}
.flash{background:#dff7e9!important;color:#155b40!important;border:1px solid #b6e8cc!important}.flash.error{background:#ffeaed!important;color:#8b2034!important;border-color:#f5c2cb!important}.flash.warning{background:#fff4d6!important;color:#75520a!important;border-color:#f0d99b!important}
.table-wrap,.payment-history,.payment-admin-scroll{border-color:#d6e0ef!important;scrollbar-color:#9aafd7 #edf2f9!important}
table{color:#24334d!important}th{color:#3e5274!important;background:#edf2fb!important}td{color:#25354f!important;border-bottom-color:#e0e7f1!important}td a{color:#294fca!important}
.admin-nav{background:rgba(255,255,255,.96)!important;border-color:#d6e0ef!important;box-shadow:0 8px 24px rgba(39,59,101,.09)!important}.admin-nav a{background:#edf2fb!important;color:#344966!important;border-color:#d4deed!important}.admin-nav a:hover{background:#dce8ff!important;color:#2445a1!important}.admin-nav a.active{background:linear-gradient(120deg,#3159d9,#7546d8)!important;color:#fff!important}
.steps>div,.request-card,.payment-config-card,.backup-restore-form{background:linear-gradient(135deg,#fff,#f3f7ff)!important;border-color:#d6e1f1!important}.steps p{color:#53647d!important}
.payment-panel{background:linear-gradient(145deg,#fff,#f4f7ff)!important}.payment-method{background:#f7f9fe!important;border-color:#d3deef!important}.payment-method label{color:#263954!important}.payment-method small{color:#53647d!important}.payment-details,.payment-order-status{color:#30435e!important}.payment-muted,.payment-qr-preview .media-preview-hint{color:#53647d!important}.payment-history th,.payment-admin-table thead th{background:#e8eefb!important;color:#304568!important}.payment-history td,.payment-admin-table td,.payment-admin-table td small{color:#2b3b55!important}.payment-admin-table tbody tr:nth-child(even){background:#f5f8fd!important}.payment-empty{color:#53647d!important}
.media-preview{background:linear-gradient(145deg,#f6f8ff,#eaf0fb)!important;color:#263954!important;border-color:#cddaf0!important}.media-preview-hint{color:#3d5280!important}.media-lightbox-dialog{background:linear-gradient(145deg,#fff,#edf2fb)!important;border-color:#cbd8ed!important}.media-lightbox-close{background:#fff!important;color:#20314d!important;border-color:#c9d5e8!important}.media-lightbox-content{color:#20314d!important}
.backup-warning{background:linear-gradient(135deg,#fff8e6,#fff0ec)!important;border-color:#e9ce91!important}.backup-warning strong{color:#76520a!important}.backup-warning p{color:#65543a!important}.backup-panel code{background:#e8eef8!important;color:#30435f!important}
:focus-visible{outline:3px solid #315fe5!important;outline-offset:3px!important}
::selection{background:#cbd8ff;color:#17294d}
@media(max-width:650px){.top{background:rgba(255,255,255,.96)!important}.admin-nav{background:#fff!important}}
@media(prefers-contrast:more){body,.panel,.hero{border-color:#7b8ba4!important}.muted,.date,.panel p,label{color:#263a56!important}input,textarea,select{border:2px solid #6b7e9c!important}}

/* v27: preserve authored announcement layout and strengthen cross-device layout safety */
.announcement-title,
.announcement-body {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.notice .announcement-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.72;
  margin: 10px 0 14px;
  color: #d5deef;
  max-width: 100%;
  tab-size: 4;
}
.notice .announcement-body::selection { background: rgba(100, 130, 255, .35); }

/* Prevent grid/flex children, long URLs, emails and form controls from widening pages. */
html { min-width: 320px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body, main, .wrap, .panel, .hero, section, article, form,
.form-grid, .section-head, .admin-head, .payment-panel,
.payment-method, .payment-config-card, .support-ticket-card,
.support-conversation, .notice, .steps > div {
  min-width: 0;
  max-width: 100%;
}
img, video, iframe, canvas, svg { max-width: 100%; }
img, video { height: auto; }
input, textarea, select, button { max-width: 100%; font: inherit; }
input, textarea, select { min-width: 0; }
textarea { white-space: pre-wrap; overflow-wrap: anywhere; }
button, .button-link { white-space: normal; overflow-wrap: anywhere; }
pre, code, a, td, th, label, p, h1, h2, h3, small, span {
  overflow-wrap: anywhere;
  word-break: normal;
}
.table-wrap, .payment-history, .payment-admin-scroll, .mail-log-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.form-grid > *, .stats-grid > *, .payment-grid > *, .steps > *,
.request-card > *, .support-ticket-card > * { min-width: 0; }
.payment-history-admin-actions { display: grid; gap: 6px; margin-top: 8px; }
.payment-history-admin-actions form { margin: 0; }
.payment-history-admin-actions .mini { width: 100%; }
#payment-orders .section-head { align-items: flex-start; }
#payment-orders .refresh-actions { min-width: 0; }
#payment-orders .refresh-actions form { display: inline-flex; max-width: 100%; }
#payment-orders .refresh-actions button { max-width: 100%; }
@media (max-width: 760px) {
  .section-head, .admin-head { align-items: stretch; }
  .section-head > *, .admin-head > * { min-width: 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid > .wide { grid-column: 1; }
  .payment-history-admin-actions { grid-template-columns: minmax(0, 1fr); }
  #payment-orders .refresh-actions { width: 100%; align-items: stretch; }
  #payment-orders .refresh-actions > *, #payment-orders .refresh-actions form,
  #payment-orders .refresh-actions form button { width: 100%; }
  .notice { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  .panel, .hero { padding: 15px; }
  .notice .announcement-body { font-size: 14px; line-height: 1.65; }
  .payment-admin-table { min-width: 820px; }
  .payment-history table { min-width: 500px; }
}

/* v28: unified responsive frame, polished light gradients, subtle light effects */
:root {
  --frame-width: 1180px;
  --frame-gutter: clamp(12px, 2.4vw, 28px);
  --accent: #4264e8;
  --accent-violet: #8557dc;
  --glass-border: rgba(116, 143, 205, .22);
}
html { min-width: 320px; scroll-padding-top: 90px; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: clip;
  background-attachment: fixed !important;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -20% -10%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(116, 151, 255, .17), transparent 34%),
    radial-gradient(ellipse at 88% 30%, rgba(91, 218, 190, .13), transparent 32%),
    radial-gradient(ellipse at 55% 95%, rgba(177, 135, 255, .12), transparent 38%);
  animation: ambient-drift 24s ease-in-out infinite alternate;
}
.top {
  width: min(calc(100% - 2 * var(--frame-gutter)), var(--frame-width));
  max-width: var(--frame-width) !important;
  min-height: 76px;
  margin: 0 auto;
  padding: 14px 0 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0 !important;
  border-radius: 0 0 20px 20px;
  background: transparent !important;
  box-shadow: none !important;
}
.brand { flex: 0 1 auto; min-width: 0; line-height: 1.25; }
.top-links { flex: 0 1 auto; min-width: 0; justify-content: flex-end; margin-left: auto; }
.top-links a, .admin-global-links a {
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 13px;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(132,153,197,.24) !important;
  box-shadow: 0 5px 16px rgba(43,62,111,.06);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.top-links a:hover, .admin-global-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(55,79,145,.13); }
.wrap {
  width: min(calc(100% - 2 * var(--frame-gutter)), var(--frame-width));
  max-width: var(--frame-width) !important;
  margin: 18px auto 54px;
  padding: 0;
}
.wrap > .panel, .wrap > .hero, .wrap > section { width: 100%; min-width: 0; }
.panel, .hero, .login, .payment-panel, .support-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 14px 38px rgba(40,58,103,.085), 0 2px 7px rgba(40,58,103,.035) !important;
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
  animation: portal-enter .55s cubic-bezier(.2,.75,.25,1) both;
}
.panel::before, .hero::before, .payment-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(135,164,255,.35), transparent);
  opacity: .8;
}
.panel:hover, .payment-panel:hover {
  border-color: rgba(103,132,211,.34) !important;
  box-shadow: 0 20px 48px rgba(40,58,103,.12), 0 0 0 1px rgba(116,143,205,.05) !important;
}
.hero {
  background: linear-gradient(118deg, rgba(224,235,255,.98), rgba(240,233,255,.96) 54%, rgba(222,249,241,.96)) !important;
  box-shadow: 0 20px 48px rgba(64,87,151,.13), inset 0 1px rgba(255,255,255,.9) !important;
}
.hero::after {
  content: "";
  position: absolute;
  width: 48%; height: 180%; top: -40%; left: -65%;
  transform: rotate(22deg);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  animation: hero-glint 11s ease-in-out infinite;
}
.panel > *, .hero > *, .payment-panel > * { position: relative; z-index: 1; }
.admin-nav {
  width: 100%;
  max-width: 100%;
  align-items: center;
  border: 1px solid rgba(116,143,205,.24) !important;
  background: rgba(255,255,255,.84) !important;
  box-shadow: 0 12px 28px rgba(40,58,103,.09) !important;
}
.admin-nav a { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.admin-nav a:hover { transform: translateY(-1px); }
.section-head, .admin-head { min-width: 0; align-items: center; }
.section-head > *, .admin-head > * { min-width: 0; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(10px, 1.8vw, 20px); }
.form-grid > label, .form-grid > div, .form-grid > section { min-width: 0; }
.form-grid .wide { grid-column: 1 / -1; }
label { line-height: 1.45; }
input, textarea, select {
  min-width: 0;
  width: 100%;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
button, .button-link {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
button:not(:disabled):hover, .button-link:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(51,76,145,.12); }
button.primary, .button-link.primary, .primary {
  background-image: linear-gradient(112deg, #365fe0 0%, #6658df 52%, #8a55d7 100%) !important;
  box-shadow: 0 7px 18px rgba(78,83,201,.2);
}
button.primary::after, .button-link.primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.2) 48%, transparent 72%);
  transform: translateX(-130%); transition: transform .65s ease;
}
button.primary:hover::after, .button-link.primary:hover::after { transform: translateX(130%); }
.flash {
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(32,110,76,.08);
  animation: portal-enter .35s ease both;
}
.notice {
  min-width: 0;
  max-width: 100%;
  padding: clamp(14px, 2vw, 20px);
  margin: 10px 0;
  border: 1px solid rgba(125,148,194,.18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(246,249,255,.92));
  box-shadow: 0 8px 22px rgba(45,65,108,.055);
}
.notice .announcement-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.72; }
.table-wrap, .payment-admin-scroll, .mail-log-scroll { min-width: 0; border-radius: 14px; }
footer { width: min(calc(100% - 2 * var(--frame-gutter)), var(--frame-width)); margin-inline: auto; }

/* Beautiful in-app confirmation replaces native browser confirm dialogs. */
.app-confirm[hidden] { display: none !important; }
.app-confirm { position: fixed; z-index: 10050; inset: 0; display: grid; place-items: center; padding: 18px; }
.app-confirm-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  border: 0; border-radius: 0; background: rgba(18,29,53,.48); backdrop-filter: blur(9px);
  animation: confirm-fade .18s ease both;
}
.app-confirm-dialog {
  position: relative; z-index: 1; width: min(100%, 440px); max-height: min(86vh, 720px); overflow: auto;
  padding: clamp(22px, 4vw, 32px); border: 1px solid rgba(255,255,255,.82); border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #f4f7ff 62%, #f5f0ff 100%);
  color: #1b2940; text-align: center;
  box-shadow: 0 28px 90px rgba(14,28,63,.28), inset 0 1px #fff;
  animation: confirm-pop .24s cubic-bezier(.2,.8,.25,1) both;
}
.app-confirm-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 18px; color: #fff; font-size: 25px; font-weight: 900;
  background: linear-gradient(135deg, #4169e8, #8956d9); box-shadow: 0 9px 24px rgba(77,91,205,.24);
}
.app-confirm-icon.is-danger { background: linear-gradient(135deg, #e05b70, #b72f58); box-shadow: 0 9px 24px rgba(183,47,88,.2); }
.app-confirm-dialog h2 { margin: 0 0 10px; color: #1c2b47; font-size: clamp(20px, 4vw, 24px); }
.app-confirm-dialog p { margin: 0; color: #53647d; line-height: 1.65; overflow-wrap: anywhere; }
.app-confirm-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.app-confirm-actions button { min-width: 120px; }
.app-confirm-actions .danger { background: linear-gradient(115deg, #d94c66, #ad3158) !important; color: white !important; border: 0 !important; }
body.confirm-open { overflow: hidden; }

@keyframes portal-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ambient-drift { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(1%, 1%, 0) scale(1.04); } }
@keyframes hero-glint { 0%, 58%, 100% { left: -65%; opacity: 0; } 65% { opacity: .8; } 83% { left: 125%; opacity: 0; } }
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 1500px) {
  :root { --frame-width: 1240px; }
}
@media (max-width: 760px) {
  .top { min-height: 0; padding: 13px 0 9px; flex-wrap: wrap; }
  .brand { flex: 1 1 100%; }
  .top-links { width: 100%; margin-left: 0; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 2px 0 5px; scrollbar-width: thin; }
  .top-links a { flex: 0 0 auto; white-space: nowrap; }
  .wrap { margin-top: 12px; margin-bottom: 34px; }
  .section-head, .admin-head { flex-wrap: wrap; align-items: stretch; }
  .section-head > *, .admin-head > * { width: 100%; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .wide { grid-column: 1; }
  .admin-nav { position: relative; top: auto; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  .admin-nav a { flex: 0 0 auto; white-space: nowrap; }
  .payment-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  :root { --frame-gutter: 10px; }
  .top { gap: 8px; }
  .brand { font-size: 16px; }
  .top-links a { min-height: 40px; padding: 8px 11px; font-size: 12px; }
  .hero, .panel, .login, .payment-panel { padding: 16px !important; border-radius: 17px !important; }
  .hero h1 { font-size: clamp(29px, 9vw, 39px); }
  h2 { font-size: 20px; }
  .app-confirm { padding: 12px; }
  .app-confirm-dialog { border-radius: 20px; padding: 22px 18px; }
  .app-confirm-actions { flex-direction: column-reverse; }
  .app-confirm-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}