/* Claim Parlay v3.4.3 — Unified BOLAPELANGI Comfort UI
   One palette for public claim + status pages. No orange legacy layer. */

:root{
  color-scheme:light;
  --brand:#1BB1CA;
  --front-accent:#1BB1CA;
  --front-accent-strong:#16879a;
  --front-accent-hover:#1595aa;
  --front-accent-soft:rgba(27,177,202,.11);
  --front-accent-soft-2:rgba(27,177,202,.065);
  --front-accent-line:rgba(27,177,202,.25);

  --front-bg:#e8eef1;
  --front-bg-2:#edf2f4;
  --front-surface:#f3f6f7;
  --front-surface-2:#eaf0f2;
  --front-surface-3:#e1e9ec;
  --front-input:#e5ecef;
  --front-input-hover:#edf2f4;
  --front-text:#314454;
  --front-heading:#203443;
  --front-muted:#718693;
  --front-subtle:#8799a5;
  --front-border:#ccd8de;
  --front-border-soft:#d9e3e7;
  --front-shadow:0 10px 26px rgba(34,61,74,.055);
  --front-shadow-hover:0 14px 32px rgba(34,61,74,.08);

  --front-success:#3f7f5d;
  --front-success-bg:#e3efe8;
  --front-warning:#946e31;
  --front-warning-bg:#f1eadc;
  --front-danger:#9b5159;
  --front-danger-bg:#f2e4e6;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --front-accent:#1BB1CA;
  --front-accent-strong:#64cad9;
  --front-accent-hover:#45c3d5;
  --front-accent-soft:rgba(27,177,202,.12);
  --front-accent-soft-2:rgba(27,177,202,.07);
  --front-accent-line:rgba(72,190,210,.24);

  --front-bg:#10171d;
  --front-bg-2:#131c23;
  --front-surface:#18232b;
  --front-surface-2:#1c2932;
  --front-surface-3:#22333d;
  --front-input:#20303a;
  --front-input-hover:#243640;
  --front-text:#d6e4ea;
  --front-heading:#edf6f8;
  --front-muted:#9eb0ba;
  --front-subtle:#8296a2;
  --front-border:#2d414c;
  --front-border-soft:#263842;
  --front-shadow:0 12px 30px rgba(0,0,0,.20);
  --front-shadow-hover:0 16px 36px rgba(0,0,0,.25);

  --front-success:#83c39d;
  --front-success-bg:#1c3027;
  --front-warning:#d5ad68;
  --front-warning-bg:#342d20;
  --front-danger:#da8c93;
  --front-danger-bg:#342329;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{background:var(--front-bg)!important}
body{
  margin:0!important;
  color:var(--front-text)!important;
  background:
    radial-gradient(circle at 10% -8%,var(--front-accent-soft),transparent 32%),
    linear-gradient(180deg,var(--front-bg),var(--front-bg-2))!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:before,body:after,.bg-only-anim-layer,.bg-sweep{display:none!important}
a{color:inherit}

/* Layout */
.container{width:min(1120px,calc(100% - 36px))!important}
.page,.page-shell{
  background:transparent!important;
  color:var(--front-text)!important;
  padding-top:26px!important;
  padding-bottom:38px!important;
}
.main-grid,.content-grid{gap:18px!important}

/* Header: same visual language as admin */
.site-header{
  background:color-mix(in srgb,var(--front-surface) 94%,transparent)!important;
  border-bottom:1px solid var(--front-border)!important;
  box-shadow:0 3px 16px rgba(34,61,74,.045)!important;
  backdrop-filter:blur(16px)!important;
}
.header-inner{min-height:70px!important}
.brand-logo,.brand-fallback{
  width:42px!important;height:42px!important;border-radius:12px!important;
  background:var(--front-surface-2)!important;
  border:1px solid var(--front-border)!important;
  box-shadow:none!important;filter:none!important;
}
.brand-logo{padding:4px!important}
.brand-fallback{
  display:grid!important;place-items:center!important;
  color:#f7fdff!important;background:var(--front-accent)!important;
}
.brand-name{
  color:var(--front-heading)!important;
  font-size:18px!important;font-weight:900!important;letter-spacing:-.035em!important;
  text-shadow:none!important;
}
.brand-sub{color:var(--front-subtle)!important;font-size:9px!important;letter-spacing:.15em!important}
.header-actions{gap:7px!important}
.header-link,.header-btn,.hero-btn,.hero-status-btn{
  min-height:39px!important;padding:0 14px!important;border-radius:10px!important;
  font-size:12px!important;font-weight:800!important;box-shadow:none!important;
  transition:.16s ease!important;
}
.header-link,.hero-status-btn{
  background:var(--front-surface)!important;color:var(--front-text)!important;
  border:1px solid var(--front-border)!important;
}
.header-link:hover,.hero-status-btn:hover{
  background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;
  border-color:var(--front-accent-line)!important;
}
.header-btn,.hero-btn,.btn-primary,.submit-btn,button[type="submit"]{
  background:var(--front-accent)!important;color:#f7fdff!important;
  border:1px solid var(--front-accent)!important;box-shadow:none!important;
}
.header-btn:hover,.hero-btn:hover,.btn-primary:hover,.submit-btn:hover,button[type="submit"]:hover{
  background:var(--front-accent-hover)!important;border-color:var(--front-accent-hover)!important;
  transform:translateY(-1px)!important;
}
.front-theme-toggle{
  width:39px!important;height:39px!important;border-radius:10px!important;
  border:1px solid var(--front-border)!important;background:var(--front-surface)!important;
  color:var(--front-muted)!important;display:inline-grid!important;place-items:center!important;
  box-shadow:none!important;cursor:pointer!important;
}
.front-theme-toggle:hover{background:var(--front-accent-soft)!important;border-color:var(--front-accent-line)!important;color:var(--front-accent-strong)!important}
.front-theme-toggle svg{width:17px!important;height:17px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.8!important}
.front-theme-toggle .theme-sun{display:none!important}
html[data-theme="dark"] .front-theme-toggle .theme-moon{display:none!important}
html[data-theme="dark"] .front-theme-toggle .theme-sun{display:block!important}

/* Surfaces */
.hero-card,.panel-card,.rules-panel,.status-card,.search-card,.result-card,.history-item,.claim-popup{
  background:var(--front-surface)!important;
  border:1px solid var(--front-border)!important;
  color:var(--front-text)!important;
  box-shadow:var(--front-shadow)!important;
}
.hero-card:before,.hero-card:after,.panel-card:before,.panel-card:after,.rule-favorite:before{display:none!important}
.hero-card{border-radius:17px!important;padding:26px 28px!important;margin-bottom:18px!important}
.panel-card,.rules-panel{border-radius:15px!important;overflow:hidden!important}
.rules-panel{margin-top:18px!important;margin-bottom:18px!important}
.section-head{
  padding:18px 20px!important;
  background:transparent!important;
  border-bottom:1px solid var(--front-border-soft)!important;
}
.section-head h2{margin:0!important;color:var(--front-heading)!important;font-size:20px!important;letter-spacing:-.025em!important}
.section-head p{margin:6px 0 0!important;color:var(--front-muted)!important;line-height:1.55!important;font-size:12px!important}
.card-body{padding:20px!important}

/* Hero */
.kicker{
  color:var(--front-accent-strong)!important;background:var(--front-accent-soft)!important;
  border:1px solid var(--front-accent-line)!important;box-shadow:none!important;
  border-radius:999px!important;padding:7px 11px!important;font-size:10px!important;
}
.kicker:before{background:var(--front-accent)!important;box-shadow:none!important}
.hero-title,.hero-card h1{
  color:var(--front-heading)!important;text-shadow:none!important;
  font-size:clamp(32px,4.2vw,48px)!important;letter-spacing:-.045em!important;
}
.hero-desc,.hero-card p{color:var(--front-muted)!important;line-height:1.68!important}
.hero-actions{gap:8px!important}
.banner-wrap{
  border-radius:12px!important;border:1px solid var(--front-border)!important;
  background:var(--front-surface-2)!important;box-shadow:none!important;
}

/* Rules */
.rules-list{gap:9px!important}
.rule-item{
  grid-template-columns:38px minmax(0,1fr)!important;gap:11px!important;
  padding:12px!important;border-radius:11px!important;
  background:var(--front-surface-2)!important;border:1px solid var(--front-border)!important;
  color:var(--front-text)!important;box-shadow:none!important;
}
.rule-number,.history-number,.join-count{
  background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;
  border:1px solid var(--front-accent-line)!important;box-shadow:none!important;
}
.rule-number{width:32px!important;height:32px!important;border-radius:9px!important}
.rule-copy{color:var(--front-text)!important;font-size:12px!important}
.rule-copy a,.form-status-link a{color:var(--front-accent-strong)!important}
.rule-favorite{background:color-mix(in srgb,var(--front-surface-2) 92%,var(--front-warning-bg))!important;border-color:color-mix(in srgb,var(--front-warning) 24%,var(--front-border))!important;box-shadow:none!important}
.rule-fav-badge{background:var(--front-warning-bg)!important;color:var(--front-warning)!important;border-color:color-mix(in srgb,var(--front-warning) 28%,transparent)!important}

/* Form */
.form-grid{gap:14px!important}
label{color:var(--front-text)!important;font-size:12px!important;font-weight:800!important;margin-bottom:7px!important}
.required-mark{color:#d77c86!important}
input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="password"],select,textarea{
  width:100%!important;min-height:47px!important;
  border:1px solid var(--front-border)!important;border-radius:10px!important;
  background:var(--front-input)!important;color:var(--front-heading)!important;
  padding:12px 13px!important;outline:none!important;box-shadow:none!important;
  font:inherit!important;font-size:13px!important;font-weight:650!important;
  transition:.16s ease!important;
}
input::placeholder,textarea::placeholder{color:var(--front-subtle)!important;opacity:1!important}
input[type="text"]:hover,input[type="tel"]:hover,input[type="email"]:hover,input[type="number"]:hover,input[type="password"]:hover,select:hover,textarea:hover{background:var(--front-input-hover)!important}
input:focus,select:focus,textarea:focus{
  background:var(--front-surface)!important;border-color:var(--front-accent)!important;
  box-shadow:0 0 0 3px var(--front-accent-soft)!important;
}

/* Upload cards: remove native white browser controls completely */
.file-box,.join-upload-area,.join-file-card{
  background:var(--front-surface-2)!important;border:1px solid var(--front-border)!important;
  box-shadow:none!important;
}
.file-box{border-radius:12px!important;padding:13px!important}
.join-upload-area{border-radius:13px!important;padding:13px!important;gap:10px!important}
.join-file-card{border-radius:11px!important;padding:12px!important}
.join-upload-head{gap:10px!important}
.join-upload-head h3{color:var(--front-heading)!important;font-size:17px!important}
.join-upload-head p{color:var(--front-muted)!important;font-size:11px!important}
.join-count{min-height:30px!important;padding:0 10px!important;font-size:10px!important}
.upload-control{
  position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;min-height:56px!important;margin:0!important;padding:8px!important;
  border-radius:10px!important;border:1px solid var(--front-border)!important;
  background:var(--front-input)!important;color:var(--front-text)!important;
  cursor:pointer!important;transition:.16s ease!important;overflow:hidden!important;
}
.upload-control:hover{background:var(--front-input-hover)!important;border-color:var(--front-accent-line)!important}
.upload-control:focus-within{border-color:var(--front-accent)!important;box-shadow:0 0 0 3px var(--front-accent-soft)!important}
.upload-native{
  position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;pointer-events:none!important;
}
.upload-icon{
  width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:9px!important;
  display:grid!important;place-items:center!important;background:var(--front-accent-soft)!important;
  color:var(--front-accent-strong)!important;border:1px solid var(--front-accent-line)!important;
}
.upload-icon svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.upload-copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;flex:1!important}
.upload-copy strong{color:var(--front-heading)!important;font-size:11px!important;font-weight:850!important;line-height:1.25!important}
.upload-control-name{color:var(--front-muted)!important;font-size:10px!important;font-weight:650!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.upload-control.has-file{border-color:var(--front-accent-line)!important;background:color-mix(in srgb,var(--front-input) 90%,var(--front-accent-soft))!important}
.upload-control.has-file .upload-control-name{color:var(--front-accent-strong)!important}
.upload-action{
  flex:0 0 auto!important;min-height:34px!important;padding:0 11px!important;border-radius:8px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:var(--front-surface)!important;color:var(--front-text)!important;
  border:1px solid var(--front-border)!important;font-size:10px!important;font-weight:850!important;
}
.upload-control:hover .upload-action{background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;border-color:var(--front-accent-line)!important}
.file-note{margin-top:7px!important;color:var(--front-muted)!important;font-size:10px!important;line-height:1.45!important}
.file-name{display:none!important}

/* Submit / notices */
.submit-btn,.btn-primary,button[type="submit"]{min-height:49px!important;border-radius:10px!important;font-weight:850!important}
.submit-note,.form-status-link,.empty,.notice.info{
  background:var(--front-surface-2)!important;border:1px solid var(--front-border)!important;
  color:var(--front-muted)!important;border-radius:10px!important;box-shadow:none!important;
}
.submit-note,.form-status-link{padding:11px!important;font-size:11px!important}
.alert-success,.status-approved,.badge.ok{background:var(--front-success-bg)!important;color:var(--front-success)!important;border-color:color-mix(in srgb,var(--front-success) 28%,transparent)!important}
.alert-error,.notice.err,.status-rejected,.badge.bad{background:var(--front-danger-bg)!important;color:var(--front-danger)!important;border-color:color-mix(in srgb,var(--front-danger) 28%,transparent)!important}
.status-pending,.status-processed,.badge.wait{background:var(--front-warning-bg)!important;color:var(--front-warning)!important;border-color:color-mix(in srgb,var(--front-warning) 28%,transparent)!important}
.badge.info{background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;border-color:var(--front-accent-line)!important}

/* History and status result */
.history-list{gap:8px!important}
.history-item{
  min-height:56px!important;padding:10px 11px!important;border-radius:10px!important;
  background:var(--front-surface-2)!important;border-color:var(--front-border)!important;box-shadow:none!important;
}
.history-number{border-radius:8px!important}
.history-item b,.claim-code-item b,.kv span,.status-top h2,.result-card h2,.result-card h3{color:var(--front-heading)!important}
.history-item span,.history-total-note,.file-note,.form-status-link,.claim-code-item span,.status-top p,.result-meta,.search-help,.site-footer,.footer{color:var(--front-muted)!important}
.history-page{background:var(--front-surface)!important;border-color:var(--front-border)!important;color:var(--front-text)!important}
.history-page.active{background:var(--front-accent)!important;border-color:var(--front-accent)!important;color:#f7fdff!important}
.status-card,.search-card,.result-card{border-radius:12px!important;background:var(--front-surface-2)!important;border-color:var(--front-border)!important;box-shadow:none!important}
.status-top{border-color:var(--front-border-soft)!important}
.kv,.claim-code-item,.step{
  background:var(--front-surface-2)!important;border-color:var(--front-border)!important;box-shadow:none!important;
}
.kv b,.step span{color:var(--front-muted)!important}
.step-dot{background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;box-shadow:none!important;border:1px solid var(--front-accent-line)!important}
.btn-alt{
  background:var(--front-surface)!important;color:var(--front-text)!important;
  border:1px solid var(--front-border)!important;border-radius:9px!important;box-shadow:none!important;
}
.btn-alt:hover{background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;border-color:var(--front-accent-line)!important}

/* Popup */
.claim-popup-overlay{background:rgba(9,16,21,.52)!important;backdrop-filter:blur(5px)!important}
.claim-popup{border-radius:14px!important}
.claim-popup-icon{background:var(--front-success-bg)!important;color:var(--front-success)!important;border-color:color-mix(in srgb,var(--front-success) 28%,transparent)!important}
.claim-popup-error .claim-popup-icon{background:var(--front-danger-bg)!important;color:var(--front-danger)!important;border-color:color-mix(in srgb,var(--front-danger) 28%,transparent)!important}
.claim-popup-btn{background:var(--front-accent)!important;color:#f7fdff!important;border-color:var(--front-accent)!important}
.claim-popup-btn-alt{background:var(--front-surface)!important;color:var(--front-text)!important;border-color:var(--front-border)!important}

/* Safety: force every public surface to follow selected theme. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .rules-panel,
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .search-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .claim-popup{background:var(--front-surface)!important}
html[data-theme="dark"] .file-box,
html[data-theme="dark"] .join-upload-area,
html[data-theme="dark"] .join-file-card,
html[data-theme="dark"] .rule-item,
html[data-theme="dark"] .kv,
html[data-theme="dark"] .step,
html[data-theme="dark"] .claim-code-item{background:var(--front-surface-2)!important}
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .upload-control{background:var(--front-input)!important;color:var(--front-heading)!important}

@media(max-width:980px){
  .main-grid,.content-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .container{width:min(100% - 24px,1120px)!important}
  .header-inner{padding:10px 0!important;min-height:auto!important}
  .brand-logo,.brand-fallback{width:39px!important;height:39px!important}
  .brand-name{font-size:16px!important}.brand-sub{display:none!important}
  .header-actions{gap:6px!important}.header-link{display:none!important}
  .header-btn{min-height:37px!important;padding:0 11px!important}
  .hero-card{padding:20px!important;border-radius:14px!important}
  .hero-title,.hero-card h1{font-size:31px!important}
  .section-head,.card-body{padding-left:15px!important;padding-right:15px!important}
  .upload-control{min-height:54px!important}
  .upload-action{padding:0 9px!important}
}
@media(max-width:480px){
  .upload-action{display:none!important}
  .upload-icon{width:36px!important;height:36px!important;flex-basis:36px!important}
  .join-file-card{padding:10px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* v3.5.0 — Full-width hero cover + synchronized frontend spacing */
:root{
  --front-radius-xl:22px;
}
.page{padding-top:0!important}
.hero-cover{
  position:relative!important;
  width:100%!important;
  min-height:410px!important;
  display:flex!important;
  align-items:flex-end!important;
  isolation:isolate!important;
  margin:0 0 22px!important;
  border-top:1px solid var(--front-border)!important;
  border-bottom:1px solid var(--front-border)!important;
  background:
    linear-gradient(180deg, rgba(11,23,33,.30), rgba(11,23,33,.78)),
    radial-gradient(circle at 14% 10%, rgba(27,177,202,.18), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb,var(--front-bg) 88%, #021018), color-mix(in srgb,var(--front-bg-2) 84%, #061725));
  overflow:hidden!important;
}
.hero-cover::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--hero-image);
  background-size:cover;
  background-position:center center;
  opacity:.52;
  z-index:-2;
}
.hero-cover.no-banner::before{opacity:0!important}
.hero-cover-backdrop{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,14,22,.86) 0%, rgba(8,17,27,.66) 36%, rgba(8,17,27,.32) 62%, rgba(8,17,27,.78) 100%),
    linear-gradient(180deg, rgba(5,11,18,.20), rgba(5,11,18,.64));
}
.hero-cover-inner{
  position:relative!important;
  width:min(1180px, calc(100% - 36px))!important;
  padding:34px 0 34px!important;
}
.hero-cover-copy{
  width:min(560px, 100%)!important;
  padding:0!important;
}
.hero-cover .hero-title,
.hero-cover .hero-desc,
.hero-cover .kicker{position:relative!important;z-index:2!important}
.hero-cover .hero-title{max-width:580px!important;color:#f3fbff!important;text-shadow:0 14px 34px rgba(0,0,0,.28)!important}
.hero-cover .hero-desc{max-width:560px!important;color:rgba(230,244,248,.88)!important}
.hero-cover .hero-status-btn,.hero-cover .hero-btn{backdrop-filter:blur(6px)!important}
/* Remove old boxed hero look from previous versions */
.hero-card.container{width:min(1120px,calc(100% - 36px))!important}
.banner-wrap{display:none!important}
.rules-panel,
.panel-card{border-radius:16px!important}
.section-head h2{font-size:21px!important}
/* Better form + upload consistency */
.panel-card .card-body{padding:18px!important}
.upload-control{min-height:52px!important;border-radius:12px!important}
.upload-action{background:var(--front-surface-2)!important}
.upload-control.has-file .upload-action{background:var(--front-accent-soft)!important}
.join-upload-area{background:color-mix(in srgb,var(--front-surface) 76%, var(--front-surface-2))!important}
.join-file-card{background:color-mix(in srgb,var(--front-surface-2) 82%, var(--front-surface))!important}
/* Harmonize status page too */
.search-card,.status-card,.result-card{border-radius:16px!important}
@media(max-width: 900px){
  .hero-cover{min-height:340px!important}
  .hero-cover-backdrop{background:linear-gradient(180deg, rgba(8,17,27,.34), rgba(8,17,27,.82))!important}
  .hero-cover-copy{width:min(100%, 620px)!important}
}
@media(max-width: 760px){
  .hero-cover{min-height:280px!important;margin-bottom:16px!important}
  .hero-cover-inner{width:min(100% - 24px,1180px)!important;padding:24px 0!important}
  .hero-cover .hero-title{font-size:30px!important;line-height:1.08!important}
  .hero-cover .hero-desc{font-size:13px!important;line-height:1.6!important}
  .hero-cover .hero-actions{flex-wrap:wrap!important}
}


/* v3.5.1 — mobile hero fit + cleaner text */
@media(max-width: 760px){
  .site-header{position:sticky!important}
  .header-inner{gap:8px!important}
  .header-actions{gap:6px!important}
  .header-btn{padding:0 12px!important}

  .hero-cover{
    min-height:236px!important;
    align-items:flex-end!important;
    margin-bottom:14px!important;
    background:
      linear-gradient(180deg, rgba(11,23,33,.16), rgba(11,23,33,.74)),
      radial-gradient(circle at 14% 10%, rgba(27,177,202,.15), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb,var(--front-bg) 88%, #021018), color-mix(in srgb,var(--front-bg-2) 84%, #061725))!important;
  }
  .hero-cover::before{
    background-position:center top!important;
    background-size:cover!important;
    opacity:.46!important;
  }
  .hero-cover-backdrop{
    background:linear-gradient(180deg, rgba(8,17,27,.18), rgba(8,17,27,.82))!important;
  }
  .hero-cover-inner{
    width:min(100% - 24px,1180px)!important;
    padding:18px 0 20px!important;
  }
  .hero-cover-copy{
    width:100%!important;
    max-width:340px!important;
  }
  .hero-cover .kicker{
    padding:6px 10px!important;
    font-size:9px!important;
    letter-spacing:.11em!important;
    margin-bottom:10px!important;
  }
  .hero-cover .hero-title{
    font-size:26px!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    margin:0 0 10px!important;
    max-width:320px!important;
  }
  .hero-cover .hero-desc{
    font-size:12.5px!important;
    line-height:1.58!important;
    max-width:320px!important;
    margin:0 0 14px!important;
  }
  .hero-cover .hero-actions{
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .hero-cover .hero-btn,
  .hero-cover .hero-status-btn{
    min-height:38px!important;
    padding:0 12px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
}
@media(max-width: 480px){
  .hero-cover{min-height:220px!important}
  .hero-cover-inner{padding:16px 0 18px!important}
  .hero-cover-copy{max-width:280px!important}
  .hero-cover .hero-title{
    font-size:22px!important;
    line-height:1.08!important;
    max-width:270px!important;
  }
  .hero-cover .hero-desc{
    font-size:11.5px!important;
    line-height:1.5!important;
    max-width:268px!important;
  }
  .hero-cover .hero-btn,
  .hero-cover .hero-status-btn{
    min-height:36px!important;
    font-size:10.5px!important;
    padding:0 11px!important;
  }
}


/* v3.5.2 — EXACT 3.2:1 MOBILE COVER
   Mobile image keeps the same 1920x600 ratio. Copy moves below the image so it never stretches the cover. */
@media(max-width:760px){
  .hero-cover{
    display:block!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    margin:0 0 14px!important;
    border-top:0!important;
    border-bottom:0!important;
    background:none!important;
  }
  .hero-cover::before{
    content:""!important;
    position:relative!important;
    display:block!important;
    inset:auto!important;
    width:100%!important;
    aspect-ratio:3.2 / 1!important;
    min-height:0!important;
    background-image:var(--hero-image)!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    opacity:1!important;
    z-index:0!important;
  }
  .hero-cover.no-banner::before{
    background:linear-gradient(135deg,var(--front-surface-2),var(--front-surface-3))!important;
    opacity:1!important;
  }
  .hero-cover-backdrop{display:none!important}
  .hero-cover-inner{
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
  .hero-cover-copy{
    width:100%!important;
    max-width:none!important;
    padding:16px 18px 18px!important;
    background:var(--front-surface)!important;
    border-bottom:1px solid var(--front-border)!important;
  }
  .hero-cover .kicker{
    margin:0 0 9px!important;
    padding:5px 9px!important;
    font-size:8.5px!important;
  }
  .hero-cover .hero-title{
    margin:0 0 8px!important;
    max-width:none!important;
    color:var(--front-heading)!important;
    text-shadow:none!important;
    font-size:24px!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  .hero-cover .hero-desc{
    margin:0 0 12px!important;
    max-width:none!important;
    color:var(--front-muted)!important;
    font-size:12px!important;
    line-height:1.5!important;
  }
  .hero-cover .hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .hero-cover .hero-btn,
  .hero-cover .hero-status-btn{
    width:100%!important;
    min-height:38px!important;
    padding:0 10px!important;
    font-size:10.5px!important;
  }
}
@media(max-width:480px){
  .hero-cover::before{aspect-ratio:3.2 / 1!important}
  .hero-cover-copy{padding:14px 14px 16px!important}
  .hero-cover .hero-title{font-size:22px!important}
  .hero-cover .hero-desc{font-size:11.5px!important}
  .hero-cover .hero-actions{grid-template-columns:1fr 1fr!important}
}

/* v3.9.0 — Floating Contact Widget */
.contact-widget{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit}
.contact-fab{appearance:none;border:1px solid var(--front-accent-line)!important;background:linear-gradient(135deg,var(--front-accent),var(--front-accent-hover))!important;color:#f7fdff!important;min-height:50px!important;padding:0 17px!important;border-radius:16px!important;display:inline-flex!important;align-items:center!important;gap:10px!important;font:inherit!important;font-size:12px!important;font-weight:850!important;cursor:pointer!important;box-shadow:0 14px 34px rgba(27,177,202,.24)!important;transition:transform .16s ease,box-shadow .16s ease!important}
.contact-fab:hover{transform:translateY(-2px)!important;box-shadow:0 18px 38px rgba(27,177,202,.30)!important}.contact-fab-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.14)}.contact-fab svg,.contact-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.contact-icon.telegram svg path:first-child{fill:currentColor;stroke:none}.contact-icon.whatsapp svg path:first-child{fill:none}.contact-panel{width:min(340px,calc(100vw - 28px));padding:14px;border-radius:22px;background:color-mix(in srgb,var(--front-surface) 96%,transparent);border:1px solid var(--front-border);box-shadow:0 24px 70px rgba(4,13,20,.28);backdrop-filter:blur(18px);animation:contactIn .16s ease-out}.contact-panel[hidden]{display:none!important}.contact-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:3px 3px 12px;border-bottom:1px solid var(--front-border-soft)}.contact-panel-head b{display:block;color:var(--front-heading);font-size:15px;line-height:1.25}.contact-panel-head span{display:block;margin-top:4px;color:var(--front-muted);font-size:10.5px;line-height:1.4}.contact-close{appearance:none;width:32px;height:32px;border-radius:10px;border:1px solid var(--front-border);background:var(--front-surface-2);color:var(--front-muted);font-size:20px;line-height:1;cursor:pointer}.contact-list{display:grid;gap:8px;padding-top:12px}.contact-item{display:grid;grid-template-columns:40px minmax(0,1fr) 22px;align-items:center;gap:11px;padding:10px;border-radius:14px;border:1px solid var(--front-border);background:var(--front-surface-2);transition:.16s ease}.contact-item:hover{background:var(--front-accent-soft);border-color:var(--front-accent-line);transform:translateY(-1px)}.contact-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--front-accent-soft);color:var(--front-accent-strong);border:1px solid var(--front-accent-line)}.contact-copy{min-width:0}.contact-copy b{display:block;color:var(--front-heading);font-size:12px}.contact-copy small{display:block;color:var(--front-muted);font-size:9.5px;margin-top:3px}.contact-arrow{color:var(--front-muted);font-size:15px;text-align:center}.contact-item:hover .contact-arrow{color:var(--front-accent-strong)}
@keyframes contactIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:760px){.contact-widget{right:12px;bottom:12px}.contact-fab{min-height:46px!important;padding:0 14px!important;border-radius:14px!important;font-size:11px!important}.contact-panel{width:min(320px,calc(100vw - 24px));border-radius:18px;padding:12px}.contact-item{grid-template-columns:38px minmax(0,1fr) 20px;padding:9px}.contact-icon{width:38px;height:38px;border-radius:11px}}


/* v3.9.1 — Softer contact FAB, no dominant blue block */
.contact-fab{
  border:1px solid var(--front-border)!important;
  background:color-mix(in srgb,var(--front-surface) 92%, transparent)!important;
  color:var(--front-heading)!important;
  min-height:48px!important;
  padding:0 14px!important;
  border-radius:15px!important;
  gap:9px!important;
  box-shadow:0 12px 30px rgba(4,13,20,.18)!important;
  backdrop-filter:blur(14px)!important;
}
.contact-fab:hover{
  transform:translateY(-2px)!important;
  background:color-mix(in srgb,var(--front-surface-2) 92%, var(--front-accent-soft))!important;
  border-color:var(--front-accent-line)!important;
  color:var(--front-accent-strong)!important;
  box-shadow:0 16px 34px rgba(4,13,20,.24)!important;
}
.contact-fab-icon{
  width:28px!important;
  height:28px!important;
  border-radius:9px!important;
  background:var(--front-accent-soft)!important;
  color:var(--front-accent-strong)!important;
  border:1px solid var(--front-accent-line)!important;
}
html[data-theme="dark"] .contact-fab{
  background:rgba(24,35,43,.92)!important;
  border-color:rgba(113,155,176,.20)!important;
  color:#dce9ee!important;
}
html[data-theme="dark"] .contact-fab:hover{
  background:rgba(29,45,55,.96)!important;
  border-color:rgba(27,177,202,.30)!important;
  color:#77d4e2!important;
}
@media(max-width:760px){
  .contact-fab{
    min-height:44px!important;
    padding:0 12px!important;
    border-radius:13px!important;
  }
  .contact-fab-icon{width:26px!important;height:26px!important}
}

/* v3.9.5 — restore full hero cover + soften dark background + compact uploads */
:root{
  --brand:var(--global-accent)!important;
  --front-accent:var(--global-accent)!important;
  --front-accent-strong:color-mix(in srgb,var(--global-accent) 58%,#c7f7ff 42%)!important;
  --front-accent-hover:color-mix(in srgb,var(--global-accent) 76%,#d4fbff 24%)!important;
  --front-accent-soft:color-mix(in srgb,var(--global-accent) 12%,transparent)!important;
  --front-accent-soft-2:color-mix(in srgb,var(--global-accent) 7%,transparent)!important;
  --front-accent-line:color-mix(in srgb,var(--global-accent) 24%,transparent)!important;
  --front-bg:var(--global-dark-bg,#10171D)!important;
  --front-bg-2:color-mix(in srgb,var(--global-dark-bg,#10171D) 74%,#16303d 26%)!important;
  --front-surface:var(--global-dark-surface,#18232B)!important;
  --front-surface-2:var(--global-dark-surface-2,#1C2932)!important;
  --front-surface-3:color-mix(in srgb,var(--global-dark-surface-2,#1C2932) 78%,#35505d 22%)!important;
  --front-input:color-mix(in srgb,var(--global-dark-surface-2,#1C2932) 88%,#2a4553 12%)!important;
  --front-input-hover:color-mix(in srgb,var(--global-dark-surface-2,#1C2932) 80%,#35505d 20%)!important;
  --front-text:#dce8ed!important;
  --front-heading:#f1f8fa!important;
  --front-muted:#9fb3be!important;
  --front-subtle:#88a0ac!important;
  --front-border:color-mix(in srgb,var(--global-dark-surface-2,#1C2932) 68%,#628093 32%)!important;
  --front-border-soft:color-mix(in srgb,var(--global-dark-surface-2,#1C2932) 80%,#577382 20%)!important;
  color-scheme:dark!important;
}
html[data-theme="light"],html[data-theme="dark"]{color-scheme:dark!important}
.front-theme-toggle{display:none!important}
html,body{background:var(--front-bg)!important}
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(27,177,202,.12), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(27,177,202,.08), transparent 26%),
    linear-gradient(180deg,var(--front-bg),var(--front-bg-2))!important;
}
.site-header{background:color-mix(in srgb,var(--front-surface) 92%, transparent)!important}
/* restore and soften full-width cover */
.hero-card{display:none!important}
.hero-cover{display:block!important;position:relative!important;min-height:360px!important;margin:18px 0 18px!important;border-bottom:1px solid var(--front-border)!important;background:
 linear-gradient(180deg, rgba(8,18,29,.08), rgba(8,18,29,.18)),
 var(--hero-image, linear-gradient(135deg,#122431,#173848)) center/cover no-repeat!important;overflow:hidden!important}
.hero-cover::before{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg, rgba(10,19,29,.66) 0%, rgba(10,19,29,.52) 34%, rgba(10,19,29,.38) 60%, rgba(10,19,29,.20) 100%)!important;z-index:0!important}
.hero-cover.no-banner{background:linear-gradient(180deg,#10202b,#132a36)!important;border:1px solid var(--front-border)!important;border-radius:24px!important}
.hero-cover.no-banner::before{background:linear-gradient(90deg, rgba(10,19,29,.82) 0%, rgba(10,19,29,.72) 50%, rgba(10,19,29,.55) 100%)!important}
.hero-cover-backdrop{display:none!important}
.hero-cover-inner{position:relative!important;z-index:1!important;width:min(1120px, calc(100% - 36px))!important;min-height:360px!important;display:flex!important;align-items:center!important;padding:32px 0!important}
.hero-cover-copy{width:min(100%, 620px)!important}
.hero-cover .kicker{margin-bottom:16px!important}
.hero-cover .hero-title{font-size:clamp(40px,4.6vw,64px)!important;line-height:1.02!important;letter-spacing:-.05em!important;color:#f4fbfe!important;text-shadow:0 16px 40px rgba(0,0,0,.26)!important;max-width:640px!important}
.hero-cover .hero-desc{margin-top:16px!important;font-size:15px!important;line-height:1.75!important;max-width:610px!important;color:rgba(229,242,247,.86)!important}
.hero-cover .hero-actions{margin-top:24px!important;gap:10px!important}
.hero-cover .hero-status-btn{background:rgba(24,35,43,.74)!important;border-color:rgba(128,176,198,.28)!important;color:#e8f5f8!important;backdrop-filter:blur(8px)!important}
.hero-cover .hero-btn{box-shadow:0 10px 24px rgba(27,177,202,.2)!important}
.rules-panel{margin-top:18px!important}
.rule-item{background:color-mix(in srgb,var(--front-surface-2) 92%, transparent)!important}
/* compact upload fix */
.file-box{padding:12px!important;border-radius:14px!important;min-height:0!important;height:auto!important;background:var(--front-surface-2)!important;border:1px solid var(--front-border)!important}
.join-upload-area{display:grid!important;gap:10px!important;padding:12px!important;border-radius:15px!important;min-height:0!important;height:auto!important;background:color-mix(in srgb,var(--front-surface) 76%,var(--front-surface-2))!important;border:1px solid var(--front-border)!important}
.join-file-card{padding:11px!important;border-radius:12px!important;min-height:0!important;height:auto!important;background:var(--front-surface-2)!important;border:1px solid var(--front-border)!important}
.file-box>label:first-child,.join-file-card>label:first-child{margin:0 0 8px!important;font-size:12px!important;line-height:1.35!important}
.upload-control{position:relative!important;display:flex!important;align-items:center!important;gap:9px!important;width:100%!important;min-height:50px!important;height:auto!important;margin:0!important;padding:7px!important;border-radius:11px!important;border:1px solid var(--front-border)!important;background:var(--front-input)!important;overflow:hidden!important;cursor:pointer!important;box-shadow:none!important}
.upload-control:hover{background:var(--front-input-hover)!important;border-color:var(--front-accent-line)!important}
.upload-control:focus-within{border-color:var(--front-accent)!important;box-shadow:0 0 0 3px var(--front-accent-soft)!important}
.upload-native,.upload-control input[type="file"]{position:absolute!important;width:1px!important;height:1px!important;min-width:1px!important;min-height:1px!important;opacity:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important;padding:0!important;border:0!important}
.upload-icon{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:var(--front-accent-soft)!important;border:1px solid var(--front-accent-line)!important;color:var(--front-accent-strong)!important;overflow:hidden!important}
.upload-icon svg{display:block!important;width:17px!important;height:17px!important;max-width:17px!important;max-height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.upload-copy{min-width:0!important;flex:1!important;display:flex!important;flex-direction:column!important;gap:2px!important}.upload-copy strong{color:var(--front-heading)!important;font-size:11px!important;line-height:1.2!important;font-weight:800!important}.upload-control-name{display:block!important;color:var(--front-muted)!important;font-size:10px!important;line-height:1.25!important;font-weight:600!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.upload-action{min-height:32px!important;height:32px!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 10px!important;border-radius:8px!important;background:var(--front-surface)!important;color:var(--front-text)!important;border:1px solid var(--front-border)!important;font-size:10px!important;font-weight:800!important}
.file-name{display:none!important}.file-note{margin:6px 0 0!important;font-size:10px!important;line-height:1.4!important;color:var(--front-muted)!important}.join-upload-head{align-items:center!important;gap:8px!important;margin-bottom:0!important}.join-upload-head h3{font-size:16px!important;line-height:1.2!important}.join-upload-head p{margin:4px 0 0!important;font-size:10.5px!important}.join-count{min-height:28px!important;height:28px!important;padding:0 9px!important;font-size:9.5px!important}
/* softer contact widget */
.contact-fab{background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface) 90%, transparent), color-mix(in srgb,var(--front-surface-2) 96%, transparent))!important;border:1px solid var(--front-border)!important;color:var(--front-text)!important;box-shadow:0 12px 28px rgba(0,0,0,.20)!important}
.contact-fab .contact-fab-icon{background:var(--front-accent-soft)!important;color:var(--front-accent-strong)!important;border:1px solid var(--front-accent-line)!important}
.contact-fab:hover{border-color:var(--front-accent-line)!important;color:var(--front-heading)!important}
@media(max-width:760px){
  .hero-cover{min-height:300px!important;margin-top:10px!important}
  .hero-cover-inner{width:min(100% - 24px,1120px)!important;min-height:300px!important;padding:24px 0!important}
  .hero-cover .hero-title{font-size:clamp(28px,9vw,40px)!important;max-width:320px!important}
  .hero-cover .hero-desc{font-size:13px!important;line-height:1.65!important;max-width:320px!important}
  .hero-cover .hero-actions{flex-wrap:wrap!important}
  .file-box,.join-upload-area{padding:10px!important}
  .join-file-card{padding:9px!important}
  .upload-control{min-height:46px!important;padding:6px!important;gap:8px!important}
  .upload-icon{width:31px!important;height:31px!important;min-width:31px!important;flex-basis:31px!important}
  .upload-icon svg{width:15px!important;height:15px!important}
  .upload-action{height:30px!important;min-height:30px!important;padding:0 8px!important;font-size:9.5px!important}
  .upload-copy strong{font-size:10.5px!important}
  .upload-control-name{font-size:9.5px!important}
}
@media(max-width:390px){.upload-action{display:none!important}}

/* v4.1.7 — unified hero actions; Claim always visible */
.hero-actions-unified{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
}
.hero-actions-unified .hero-action-claim{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
}

@media(max-width:760px){
  .hero-actions-unified{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin-top:16px!important;
  }
  .hero-actions-unified .hero-action-login{
    grid-column:1 / -1!important;
  }
  .hero-actions-unified .hero-action-login,
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 9px!important;
    margin:0!important;
    border-radius:11px!important;
    box-sizing:border-box!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:center!important;
    box-shadow:none!important;
  }
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    color:var(--front-heading)!important;
    background:color-mix(in srgb,var(--front-surface-2) 94%,transparent)!important;
    border:1px solid var(--front-border)!important;
  }
}

@media(max-width:380px){
  .hero-actions-unified{gap:6px!important}
  .hero-actions-unified .hero-action-login,
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    height:40px!important;
    min-height:40px!important;
    padding:0 6px!important;
    font-size:10px!important;
  }
}


/* v4.1.8 — mobile hero buttons compact 3 inline */
.hero-label-mobile{display:none!important}
.hero-label-desktop{display:inline!important}

@media(max-width:760px){
  .hero-label-desktop{display:none!important}
  .hero-label-mobile{display:inline!important}
  .hero-actions-unified{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin-top:16px!important;
  }
  .hero-actions-unified .hero-action-login,
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    grid-column:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 6px!important;
    margin:0!important;
    border-radius:10px!important;
    box-sizing:border-box!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:center!important;
    box-shadow:none!important;
  }
}

@media(max-width:380px){
  .hero-actions-unified{gap:6px!important}
  .hero-actions-unified .hero-action-login,
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    height:36px!important;
    min-height:36px!important;
    padding:0 4px!important;
    font-size:9px!important;
  }
}


/* v4.1.9 — definitive mobile 3-button row */
.hero-actions-v419 .hero-label-desktop,
.hero-actions-v419 .hero-label-mobile{display:none!important}

@media(max-width:760px){
  .hero-cover .hero-actions-v419{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin-top:16px!important;
  }
  .hero-cover .hero-actions-v419 .hero-action-login,
  .hero-cover .hero-actions-v419 .hero-action-status,
  .hero-cover .hero-actions-v419 .hero-action-claim{
    grid-column:auto!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 4px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:9px!important;
    box-sizing:border-box!important;
    font-size:9px!important;
    line-height:1.05!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:center!important;
    box-shadow:none!important;
  }
}

/* ============================================================
   v4.4.14 — FRONTEND FAVORITE NEON + LIGHTWEIGHT VISUAL POLISH
   Performance: CSS-only, transform/opacity based animation, no JS.
   ============================================================ */

/* Make rule section feel more layered without heavy effects */
.rules-panel{
  position:relative!important;
  isolation:isolate!important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb,var(--front-accent) 8%,transparent), transparent 34%),
    linear-gradient(180deg,var(--front-surface),var(--front-surface-2))!important;
  border-color:color-mix(in srgb,var(--front-accent) 18%,var(--front-border))!important;
}
.rules-panel::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  opacity:.34!important;
  background-image:
    linear-gradient(color-mix(in srgb,var(--front-accent) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--front-accent) 5%,transparent) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 72%)!important;
}
.rules-panel .section-head{
  position:relative!important;
}
.rules-panel .section-head::after{
  content:""!important;
  display:block!important;
  width:58px!important;
  height:2px!important;
  margin-top:13px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--front-accent),transparent)!important;
}

.rule-item{
  position:relative!important;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease!important;
}
.rule-item::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:12px!important;
  bottom:12px!important;
  width:2px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,transparent,var(--front-accent),transparent)!important;
  opacity:.24!important;
  transition:opacity .18s ease!important;
}
.rule-item:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--front-accent) 28%,var(--front-border))!important;
}
.rule-item:hover::after{opacity:.8!important}
.rule-number{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.rule-copy{
  font-weight:650!important;
}

/* FAVORITE: restore motion + rotating neon perimeter */
.rule-favorite{
  border-color:color-mix(in srgb,#f5b94c 32%,var(--front-border))!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(245,185,76,.10),transparent 31%),
    radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--front-accent) 10%,transparent),transparent 28%),
    var(--front-surface-2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.rule-favorite::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  opacity:0!important;
  background:linear-gradient(108deg,transparent 20%,rgba(255,255,255,.035) 41%,rgba(245,185,76,.16) 50%,rgba(96,226,245,.10) 57%,transparent 76%)!important;
  transform:translateX(-115%)!important;
  animation:bpFavoriteSweep 5.2s ease-in-out infinite!important;
}
.rule-favorite > *{
  position:relative!important;
  z-index:1!important;
}

.rule-fav-badge{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  min-height:27px!important;
  padding:5px 10px!important;
  border:1px solid rgba(245,185,76,.30)!important;
  background:linear-gradient(180deg,rgba(80,58,20,.46),rgba(49,35,13,.52))!important;
  color:#FFD98A!important;
  text-shadow:0 0 10px rgba(245,185,76,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.rule-fav-badge::before{
  content:""!important;
  position:absolute!important;
  inset:-3px!important;
  z-index:-2!important;
  border-radius:999px!important;
  padding:1px!important;
  background:conic-gradient(from 0deg,transparent 0 18%,rgba(245,185,76,.18) 25%,#F5B94C 34%,rgba(96,226,245,.70) 43%,transparent 52% 100%)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  animation:bpFavoriteRing 3.2s linear infinite!important;
  transform-origin:center!important;
}
.rule-fav-badge::after{
  content:""!important;
  position:absolute!important;
  inset:-7px!important;
  z-index:-3!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at center,rgba(245,185,76,.13),transparent 66%)!important;
  opacity:.65!important;
  animation:bpFavoriteBreath 2.8s ease-in-out infinite!important;
}

@keyframes bpFavoriteRing{
  to{transform:rotate(360deg)}
}
@keyframes bpFavoriteSweep{
  0%,58%{transform:translateX(-115%);opacity:0}
  66%{opacity:1}
  86%{transform:translateX(115%);opacity:.8}
  100%{transform:translateX(115%);opacity:0}
}
@keyframes bpFavoriteBreath{
  0%,100%{transform:scale(.96);opacity:.35}
  50%{transform:scale(1.05);opacity:.72}
}

/* General frontend polish: livelier but still restrained */
.hero-card,.panel-card,.search-card,.result-card,.status-card,.history-item{
  position:relative!important;
  border-color:color-mix(in srgb,var(--front-accent) 12%,var(--front-border))!important;
}
.panel-card,.search-card,.result-card,.status-card{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--front-surface) 98%,var(--front-accent-soft)),var(--front-surface))!important;
}
.history-item{
  transition:transform .18s ease,border-color .18s ease!important;
}
.history-item:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--front-accent) 25%,var(--front-border))!important;
}

/* Keep animations lightweight and accessibility friendly */
@media (prefers-reduced-motion:reduce){
  .rule-favorite::before,
  .rule-fav-badge::before,
  .rule-fav-badge::after{
    animation:none!important;
  }
  .rule-item,.history-item{transition:none!important}
}

@media(max-width:760px){
  .rules-panel::before{background-size:28px 28px!important;opacity:.24!important}
  .rule-item{grid-template-columns:38px minmax(0,1fr)!important;padding:11px!important}
  .rule-fav-badge{font-size:9px!important;letter-spacing:.08em!important}
  .rule-item:hover,.history-item:hover{transform:none!important}
}

/* ============================================================
   v4.5.0 HARD FRONTEND UI — CLEAN ACTIVE LAYER
   ============================================================ */
body{
  background:
    radial-gradient(circle at 12% -10%,color-mix(in srgb,var(--front-accent) 12%,transparent),transparent 32%),
    radial-gradient(circle at 92% 8%,rgba(27,177,202,.08),transparent 26%),
    var(--front-bg)!important;
}
.rules-panel,.panel-card,.search-card,.result-card,.status-card,.hero-card{
  box-shadow:0 18px 48px rgba(0,0,0,.12)!important;
}
.rules-list{gap:12px!important}
.rule-item{
  border-radius:18px!important;
  border:1px solid color-mix(in srgb,var(--front-accent) 15%,var(--front-border))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--front-surface-2) 96%,var(--front-accent-soft)),var(--front-surface-2))!important;
}
.rule-number{
  border:1px solid color-mix(in srgb,var(--front-accent) 28%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--front-accent) 18%,var(--front-surface)),color-mix(in srgb,var(--front-accent) 9%,var(--front-surface-2)))!important;
  color:var(--front-accent-strong)!important;
  box-shadow:0 0 18px color-mix(in srgb,var(--front-accent) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.rule-copy{font-weight:600!important;letter-spacing:0!important}
.rule-copy a{font-weight:650!important;text-underline-offset:3px!important}

/* REAL rotating perimeter: no masking dependency. */
.rule-favorite{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:0!important;
  padding:14px!important;
  background:transparent!important;
  box-shadow:0 14px 34px rgba(0,0,0,.12),0 0 24px rgba(245,185,76,.05)!important;
}
.rule-favorite::before{
  content:""!important;
  position:absolute!important;
  inset:-180%!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background:conic-gradient(from 0deg,
    transparent 0deg 245deg,
    rgba(245,185,76,.10) 260deg,
    #F5B94C 286deg,
    #FFE39A 300deg,
    #5DE5F6 318deg,
    rgba(27,177,202,.42) 332deg,
    transparent 350deg 360deg)!important;
  transform:rotate(0deg)!important;
  animation:bpFavPerimeterSpin 3.6s linear infinite!important;
  will-change:transform!important;
}
.rule-favorite::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:1!important;
  pointer-events:none!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(245,185,76,.11),transparent 30%),
    radial-gradient(circle at 92% 18%,color-mix(in srgb,var(--front-accent) 10%,transparent),transparent 26%),
    linear-gradient(180deg,var(--front-surface-2),color-mix(in srgb,var(--front-surface-2) 96%,#0b2028))!important;
}
.rule-favorite>*{position:relative!important;z-index:2!important}
.rule-favorite:hover{transform:translateY(-1px)!important;box-shadow:0 16px 38px rgba(0,0,0,.14),0 0 30px rgba(245,185,76,.09)!important}

.rule-fav-badge{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:0!important;
  min-height:30px!important;
  padding:6px 12px!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#FFE09B!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.10em!important;
  text-shadow:0 0 12px rgba(245,185,76,.28)!important;
  box-shadow:0 0 20px rgba(245,185,76,.08)!important;
}
.rule-fav-badge::before{
  content:""!important;
  position:absolute!important;
  inset:-90px!important;
  z-index:-2!important;
  background:conic-gradient(from 0deg,
    transparent 0deg 250deg,
    #F5B94C 282deg,
    #FFE3A0 301deg,
    #62E6F6 322deg,
    transparent 348deg 360deg)!important;
  animation:bpFavBadgeSpin 2.5s linear infinite!important;
  will-change:transform!important;
}
.rule-fav-badge::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:-1!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(72,52,18,.96),rgba(42,30,12,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
@keyframes bpFavPerimeterSpin{to{transform:rotate(360deg)}}
@keyframes bpFavBadgeSpin{to{transform:rotate(360deg)}}

.rules-panel .section-head h2,.panel-card .section-head h2{letter-spacing:-.025em!important}
.rules-panel .section-head p,.panel-card .section-head p{font-weight:450!important}

@media(max-width:760px){
  .rule-favorite{padding:12px!important}
  .rule-favorite::after{border-radius:15px!important}
  .rule-fav-badge{min-height:27px!important;padding:5px 10px!important;font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){
  .rule-favorite::before,.rule-fav-badge::before{animation:none!important}
}

/* ============================================================
   v4.5.1 — FAVORITE NEON PERIMETER FIX
   Removes the large conic sweep and replaces it with a small
   neon comet that travels only around the card perimeter.
   ============================================================ */
.rule-favorite{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid rgba(245,185,76,.30)!important;
  padding:14px!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(245,185,76,.055),transparent 29%),
    radial-gradient(circle at 92% 10%,rgba(27,177,202,.045),transparent 24%),
    linear-gradient(180deg,var(--front-surface-2),color-mix(in srgb,var(--front-surface-2) 97%,#0b2028))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 28px rgba(0,0,0,.10)!important;
}
.rule-favorite::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,rgba(245,185,76,.08),transparent 16%,transparent 84%,rgba(27,177,202,.07))!important;
  opacity:.75!important;
}
.rule-favorite::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  top:0!important;
  width:30px!important;
  height:3px!important;
  border-radius:999px!important;
  pointer-events:none!important;
  opacity:.95!important;
  background:linear-gradient(90deg,transparent 0%,#F5B94C 35%,#FFE39A 58%,#63E9F8 82%,transparent 100%)!important;
  box-shadow:0 0 8px rgba(245,185,76,.75),0 0 15px rgba(27,177,202,.42)!important;
  offset-path:inset(1px round 17px)!important;
  offset-distance:0%!important;
  offset-rotate:auto!important;
  animation:bpFavoriteComet 4.8s linear infinite!important;
  will-change:offset-distance!important;
}
.rule-favorite>*{
  position:relative!important;
  z-index:2!important;
}
.rule-favorite:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(245,185,76,.44)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 14px 34px rgba(0,0,0,.14),0 0 20px rgba(27,177,202,.055)!important;
}
.rule-fav-badge{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid rgba(245,185,76,.32)!important;
  min-height:29px!important;
  padding:6px 11px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(78,56,18,.72),rgba(48,34,12,.78))!important;
  color:#FFE19C!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-shadow:0 0 8px rgba(245,185,76,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 10px rgba(245,185,76,.055)!important;
}
.rule-fav-badge::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
  background:linear-gradient(110deg,transparent 0 36%,rgba(255,235,174,.28) 48%,rgba(99,233,248,.18) 53%,transparent 64% 100%)!important;
  background-size:240% 100%!important;
  background-position:160% 0!important;
  animation:bpFavoriteBadgeSheen 3.8s ease-in-out infinite!important;
  pointer-events:none!important;
}
.rule-fav-badge::after{display:none!important}
.rule-fav-badge>*{position:relative!important;z-index:1!important}
@keyframes bpFavoriteComet{
  from{offset-distance:0%}
  to{offset-distance:100%}
}
@keyframes bpFavoriteBadgeSheen{
  0%,58%{background-position:160% 0;opacity:0}
  66%{opacity:.9}
  82%{background-position:-70% 0;opacity:.75}
  100%{background-position:-70% 0;opacity:0}
}
@media(max-width:760px){
  .rule-favorite{padding:12px!important;border-radius:16px!important}
  .rule-favorite::before{offset-path:inset(1px round 15px)!important;width:24px!important;height:2px!important}
  .rule-fav-badge{min-height:27px!important;padding:5px 10px!important;font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){
  .rule-favorite::before,.rule-fav-badge::before{animation:none!important}
}

/* ============================================================
   v4.5.2 — FRONTEND WIDGET + FRONT POLISH REWORK
   - Reworks floating contact widget with cleaner icons and motion.
   - Adds proper open/close script support and polished micro-interactions.
   - Keeps frontend lightweight and responsive.
   ============================================================ */
.contact-widget{
  position:fixed!important;
  right:22px!important;
  bottom:22px!important;
  z-index:220!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  gap:12px!important;
}
.contact-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  cursor:default!important;
}
.contact-panel{
  width:min(356px,calc(100vw - 28px))!important;
  padding:14px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface) 95%, transparent), color-mix(in srgb,var(--front-surface-2) 97%, transparent))!important;
  border:1px solid color-mix(in srgb,var(--front-accent) 16%,var(--front-border))!important;
  box-shadow:0 28px 78px rgba(3,10,16,.30), inset 0 1px 0 rgba(255,255,255,.03)!important;
  backdrop-filter:blur(20px)!important;
  transform:translateY(10px) scale(.97)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:transform .18s ease,opacity .18s ease!important;
}
.contact-widget.is-open .contact-panel{
  transform:translateY(0) scale(1)!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.contact-panel-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:2px 2px 12px!important;
  border-bottom:1px solid var(--front-border-soft)!important;
}
.contact-panel-head b{
  display:block!important;
  color:var(--front-heading)!important;
  font-size:22px!important;
  line-height:1.15!important;
  letter-spacing:-.03em!important;
}
.contact-panel-head span{
  display:block!important;
  margin-top:5px!important;
  color:var(--front-muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.contact-close{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  border:1px solid var(--front-border)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012))!important;
  color:var(--front-muted)!important;
  cursor:pointer!important;
  transition:.16s ease!important;
}
.contact-close:hover{
  color:var(--front-heading)!important;
  border-color:var(--front-accent-line)!important;
  background:var(--front-accent-soft)!important;
}
.contact-close svg{
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.contact-list{
  display:grid!important;
  gap:10px!important;
  padding-top:13px!important;
}
.contact-item{
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 34px!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border-radius:18px!important;
  border:1px solid var(--front-border)!important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface-2) 94%, transparent), color-mix(in srgb,var(--front-surface) 92%, transparent))!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.contact-item::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.055) 48%, transparent 62% 100%)!important;
  transform:translateX(-135%)!important;
  transition:transform .45s ease!important;
  pointer-events:none!important;
}
.contact-item:hover::before{
  transform:translateX(135%)!important;
}
.contact-item:hover{
  transform:translateY(-1px)!important;
  border-color:var(--front-accent-line)!important;
  box-shadow:0 14px 32px rgba(3,10,16,.16)!important;
}
.contact-item.is-whatsapp:hover{
  background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface-2) 86%, #0a4f37), color-mix(in srgb,var(--front-surface) 90%, #0c3b2b))!important;
}
.contact-item.is-telegram:hover{
  background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface-2) 86%, #0d4762), color-mix(in srgb,var(--front-surface) 90%, #0c3549))!important;
}
.contact-item.is-livechat:hover{
  background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface-2) 86%, #114056), color-mix(in srgb,var(--front-surface) 90%, #0f3444))!important;
}
.contact-icon{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--front-accent-line)!important;
  background:linear-gradient(180deg, rgba(27,177,202,.16), rgba(27,177,202,.08))!important;
  color:var(--front-accent-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.contact-icon svg{
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.contact-icon.telegram{ color:#71D8FF!important; }
.contact-icon.whatsapp{ color:#6AE8A2!important; }
.contact-icon.livechat{ color:#69DDF8!important; }
.contact-copy b{
  display:block!important;
  color:var(--front-heading)!important;
  font-size:15px!important;
  line-height:1.15!important;
  font-weight:700!important;
}
.contact-copy small{
  display:block!important;
  margin-top:4px!important;
  color:var(--front-muted)!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.contact-arrow{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  color:var(--front-muted)!important;
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.04)!important;
  transition:.16s ease!important;
}
.contact-arrow svg{
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.contact-item:hover .contact-arrow{
  color:var(--front-heading)!important;
  background:var(--front-accent-soft)!important;
  border-color:var(--front-accent-line)!important;
}
.contact-fab{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:54px!important;
  padding:0 18px!important;
  border-radius:18px!important;
  border:1px solid color-mix(in srgb,var(--front-accent) 24%,var(--front-border))!important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--front-surface) 95%, transparent), color-mix(in srgb,var(--front-surface-2) 97%, transparent))!important;
  color:var(--front-heading)!important;
  box-shadow:0 18px 36px rgba(3,10,16,.24), inset 0 1px 0 rgba(255,255,255,.03)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.contact-fab::before{
  content:""!important;
  position:absolute!important;
  inset:-30% -12%!important;
  z-index:0!important;
  background:conic-gradient(from 180deg, transparent 0deg, rgba(27,177,202,.20) 70deg, transparent 120deg, transparent 240deg, rgba(103,232,249,.16) 300deg, transparent 360deg)!important;
  animation:bpContactSpin 6s linear infinite!important;
  opacity:.9!important;
}
.contact-fab > *{position:relative!important;z-index:1!important}
.contact-fab:hover{
  transform:translateY(-2px)!important;
  border-color:var(--front-accent-line)!important;
  box-shadow:0 22px 44px rgba(3,10,16,.28), 0 0 30px rgba(27,177,202,.10)!important;
}
.contact-fab-icon{
  width:30px!important;
  height:30px!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg, rgba(27,177,202,.16), rgba(27,177,202,.09))!important;
  border:1px solid var(--front-accent-line)!important;
  color:var(--front-accent-strong)!important;
}
.contact-fab-icon svg{
  width:18px!important;
  height:18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
}
.contact-widget.is-open .contact-fab{
  border-color:var(--front-accent-line)!important;
}
@keyframes bpContactSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
/* Small extra polish for frontend cards and headings */
.rules-panel,.panel-card,.search-card,.result-card,.status-card,.history-item,.hero-card{
  border-radius:22px!important;
  box-shadow:0 18px 46px rgba(3,10,16,.16), inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.rules-panel .section-head h2,.panel-card .section-head h2,.result-card h2,.search-card h2{
  letter-spacing:-.025em!important;
}
.rule-number,.join-count{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 18px rgba(27,177,202,.05)!important;
}
.rule-item:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--front-accent) 20%,var(--front-border))!important;
}
@media(max-width:760px){
  .contact-widget{right:12px!important;bottom:12px!important}
  .contact-panel{width:min(332px,calc(100vw - 22px))!important;padding:12px!important;border-radius:20px!important}
  .contact-panel-head b{font-size:19px!important}
  .contact-item{grid-template-columns:44px minmax(0,1fr) 30px!important;padding:11px!important;border-radius:16px!important}
  .contact-icon{width:44px!important;height:44px!important;border-radius:14px!important}
  .contact-copy b{font-size:14px!important}
  .contact-copy small{font-size:10.5px!important}
  .contact-arrow{width:30px!important;height:30px!important;border-radius:10px!important}
  .contact-fab{min-height:50px!important;padding:0 15px!important;border-radius:16px!important;font-size:11px!important}
  .contact-fab-icon{width:28px!important;height:28px!important}
}
@media(prefers-reduced-motion:reduce){
  .contact-panel,.contact-item,.contact-fab,.contact-fab::before,.contact-item::before{transition:none!important;animation:none!important}
}

/* ============================================================
   v4.5.3 — WIDGET BRAND ICON HARD FIX
   Solid logo treatment for WhatsApp / Telegram / Livechat.
   Prevents generic stroke rules from breaking brand silhouettes.
   ============================================================ */
.contact-icon{
  width:50px!important;
  height:50px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  overflow:hidden!important;
}
.contact-icon .brand-svg{
  display:block!important;
  width:25px!important;
  height:25px!important;
  fill:currentColor!important;
  stroke:none!important;
  stroke-width:0!important;
  filter:none!important;
}
.contact-icon .brand-svg path{
  fill:currentColor!important;
  stroke:none!important;
}
.contact-icon.whatsapp{
  color:#65E59A!important;
  background:linear-gradient(180deg,rgba(37,211,102,.15),rgba(37,211,102,.075))!important;
  border-color:rgba(37,211,102,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 20px rgba(37,211,102,.055)!important;
}
.contact-icon.telegram{
  color:#67D6FF!important;
  background:linear-gradient(180deg,rgba(42,171,238,.16),rgba(42,171,238,.075))!important;
  border-color:rgba(42,171,238,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 20px rgba(42,171,238,.055)!important;
}
.contact-icon.livechat{
  color:#75E6F6!important;
  background:linear-gradient(180deg,rgba(27,177,202,.16),rgba(27,177,202,.075))!important;
  border-color:rgba(103,232,249,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 20px rgba(27,177,202,.055)!important;
}
.contact-item:hover .contact-icon{
  transform:translateY(-1px) scale(1.035)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.contact-item.is-whatsapp:hover .contact-icon{
  box-shadow:0 0 24px rgba(37,211,102,.13),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.contact-item.is-telegram:hover .contact-icon{
  box-shadow:0 0 24px rgba(42,171,238,.13),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.contact-item.is-livechat:hover .contact-icon{
  box-shadow:0 0 24px rgba(27,177,202,.13),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
@media(max-width:760px){
  .contact-icon{width:46px!important;height:46px!important;border-radius:14px!important}
  .contact-icon .brand-svg{width:23px!important;height:23px!important}
}

/* ============================================================
   v4.5.4 — MOBILE COMPACT / HERO COVER RESTORE
   Makes the mobile frontend thinner, tighter and closer to the
   earlier compact layout without touching desktop or app logic.
   ============================================================ */
@media(max-width:760px){
  body{overflow-x:hidden!important}
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    backdrop-filter:blur(16px)!important;
  }
  .header-inner{
    min-height:54px!important;
    padding:7px 0!important;
    gap:7px!important;
  }
  .header-actions{gap:5px!important}
  .header-btn{
    min-height:34px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }

  /* Hero: use cover as a compact banner instead of a tall card */
  .hero-cover{
    min-height:0!important;
    margin:8px 0 12px!important;
    border-radius:0!important;
    overflow:hidden!important;
    background-position:center top!important;
  }
  .hero-cover::before{
    position:absolute!important;
    inset:0!important;
    aspect-ratio:auto!important;
    background:linear-gradient(180deg,rgba(8,18,26,.18) 0%,rgba(8,18,26,.36) 35%,rgba(8,18,26,.86) 100%)!important;
  }
  .hero-cover-inner{
    width:min(100% - 24px,1120px)!important;
    min-height:0!important;
    padding:62px 0 14px!important;
    align-items:flex-end!important;
  }
  .hero-cover-copy{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }
  .hero-cover .kicker{
    margin:0 0 8px!important;
    min-height:24px!important;
    padding:0 9px!important;
    font-size:9px!important;
  }
  .hero-cover .hero-title{
    margin:0!important;
    max-width:310px!important;
    font-size:28px!important;
    line-height:1.03!important;
    letter-spacing:-.04em!important;
  }
  .hero-cover .hero-desc{
    margin-top:10px!important;
    max-width:320px!important;
    font-size:11.5px!important;
    line-height:1.48!important;
  }
  .hero-cover .hero-actions,
  .hero-cover .hero-actions-v419,
  .hero-actions-unified{
    margin-top:12px!important;
    display:grid!important;
    grid-template-columns:1.15fr 1fr 1fr!important;
    gap:5px!important;
  }
  .hero-cover .hero-btn,
  .hero-cover .hero-status-btn,
  .hero-cover .hero-actions-v419 .hero-action-login,
  .hero-cover .hero-actions-v419 .hero-action-status,
  .hero-cover .hero-actions-v419 .hero-action-claim,
  .hero-actions-unified .hero-action-login,
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    min-height:34px!important;
    height:34px!important;
    padding:0 7px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1!important;
  }

  /* Main frontend cards: thinner and less bulky */
  .rules-panel,.panel-card,.search-card,.result-card,.status-card,.history-item,.hero-card{
    border-radius:15px!important;
    box-shadow:0 9px 24px rgba(3,10,16,.10),inset 0 1px 0 rgba(255,255,255,.014)!important;
  }
  .rules-panel,.panel-card{
    margin-top:12px!important;
    margin-bottom:12px!important;
  }
  .section-head{
    padding:14px 14px 12px!important;
  }
  .section-head h2{
    font-size:17px!important;
    line-height:1.2!important;
  }
  .section-head p{
    margin-top:5px!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }
  .panel-card .card-body,.rules-panel .card-body,.card-body{
    padding:12px!important;
  }
  .rules-list{gap:7px!important}
  .rule-item{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:0!important;
    padding:9px 10px!important;
    border-radius:13px!important;
  }
  .rule-number{
    width:31px!important;
    height:31px!important;
    min-width:31px!important;
    border-radius:9px!important;
    font-size:10px!important;
  }
  .rule-copy{
    font-size:10.5px!important;
    line-height:1.42!important;
    font-weight:600!important;
  }
  .rule-favorite{
    padding:9px 10px!important;
    border-radius:13px!important;
  }
  .rule-fav-badge{
    min-height:23px!important;
    padding:4px 8px!important;
    font-size:8px!important;
  }

  /* Forms / uploads / result panels */
  .search-card,.status-card,.result-card{
    padding:0!important;
  }
  .file-box,.join-upload-area,.join-file-card{
    border-radius:12px!important;
  }
  .join-upload-area{padding:9px!important;gap:8px!important}
  .join-file-card{padding:8px!important}

  /* Floating widget should not dominate the mobile viewport */
  .contact-widget{
    right:10px!important;
    bottom:10px!important;
  }
  .contact-fab{
    min-height:44px!important;
    height:44px!important;
    padding:0 12px!important;
    gap:7px!important;
    border-radius:14px!important;
    font-size:10px!important;
  }
  .contact-fab-icon{
    width:25px!important;
    height:25px!important;
    border-radius:8px!important;
  }
  .contact-panel{
    width:min(310px,calc(100vw - 20px))!important;
    padding:10px!important;
    border-radius:17px!important;
  }
  .contact-panel-head{padding:1px 1px 9px!important}
  .contact-panel-head b{font-size:17px!important}
  .contact-panel-head span{font-size:10px!important}
  .contact-close{width:31px!important;height:31px!important;border-radius:9px!important}
  .contact-list{gap:7px!important;padding-top:9px!important}
  .contact-item{
    grid-template-columns:39px minmax(0,1fr) 28px!important;
    gap:9px!important;
    padding:8px!important;
    border-radius:13px!important;
  }
  .contact-icon{width:39px!important;height:39px!important;border-radius:11px!important}
  .contact-icon .brand-svg{width:20px!important;height:20px!important}
  .contact-copy b{font-size:12px!important}
  .contact-copy small{font-size:9.5px!important;margin-top:2px!important}
  .contact-arrow{width:28px!important;height:28px!important;border-radius:9px!important}
}

@media(max-width:390px){
  .hero-cover-inner{padding-top:54px!important}
  .hero-cover .hero-title{font-size:25px!important;max-width:285px!important}
  .hero-cover .hero-desc{font-size:11px!important}
  .section-head h2{font-size:16px!important}
  .rule-copy{font-size:10px!important}
}

/* ============================================================
   v4.5.5 — MOBILE HERO SPLIT
   Mobile: banner image becomes its own visual block; content moves
   into a separate section below it for a cleaner hierarchy.
   ============================================================ */
.hero-mobile-media{display:none!important}
@media(max-width:760px){
  .hero-cover{
    width:min(100% - 20px,1120px)!important;
    margin:10px auto 14px!important;
    padding:0!important;
    min-height:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
  }
  .hero-mobile-media{
    display:block!important;
    width:100%!important;
    aspect-ratio:16/6.2!important;
    min-height:118px!important;
    border:1px solid var(--front-border)!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    background-image:var(--hero-image)!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    box-shadow:0 14px 34px rgba(3,10,16,.15)!important;
  }
  .hero-cover.no-banner .hero-mobile-media{
    min-height:86px!important;
    background:
      radial-gradient(circle at 18% 0%,rgba(27,177,202,.18),transparent 38%),
      linear-gradient(135deg,var(--front-surface-2),var(--front-surface))!important;
  }
  .hero-cover-backdrop{display:none!important}
  .hero-cover-inner{
    width:100%!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    display:block!important;
  }
  .hero-cover-copy{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:15px 14px 14px!important;
    border:1px solid var(--front-border)!important;
    border-top:0!important;
    border-radius:0 0 18px 18px!important;
    background:linear-gradient(180deg,var(--front-surface),color-mix(in srgb,var(--front-surface-2) 95%,transparent))!important;
    box-shadow:0 16px 36px rgba(3,10,16,.14),inset 0 1px 0 rgba(255,255,255,.02)!important;
  }
  .hero-cover .kicker{
    margin:0 0 9px!important;
    min-height:23px!important;
    padding:0 9px!important;
    font-size:8.5px!important;
  }
  .hero-cover .hero-title{
    margin:0!important;
    max-width:100%!important;
    font-size:25px!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }
  .hero-cover .hero-desc{
    margin:9px 0 0!important;
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.48!important;
    color:var(--front-muted)!important;
  }
  .hero-cover .hero-actions,
  .hero-cover .hero-actions-v419,
  .hero-actions-unified{
    margin-top:12px!important;
    display:grid!important;
    grid-template-columns:1.12fr 1fr 1fr!important;
    gap:6px!important;
  }
  .hero-cover .hero-btn,
  .hero-cover .hero-status-btn,
  .hero-cover .hero-actions-v419 .hero-action-login,
  .hero-cover .hero-actions-v419 .hero-action-status,
  .hero-cover .hero-actions-v419 .hero-action-claim,
  .hero-actions-unified .hero-action-login,
  .hero-actions-unified .hero-action-status,
  .hero-actions-unified .hero-action-claim{
    min-height:36px!important;
    height:36px!important;
    padding:0 7px!important;
    border-radius:10px!important;
    font-size:8.8px!important;
    line-height:1!important;
  }
  .rules-panel{
    margin-top:14px!important;
  }
}
@media(max-width:390px){
  .hero-mobile-media{aspect-ratio:16/6.8!important;min-height:108px!important}
  .hero-cover-copy{padding:13px 12px 12px!important}
  .hero-cover .hero-title{font-size:23px!important}
  .hero-cover .hero-desc{font-size:10.5px!important}
}

/* ============================================================
   v4.5.6 — UNIFIED HERO / TRUE BANNER RATIO
   Desktop + mobile now use the same real banner image instead of
   background-size:cover, preventing zoom/crop differences.
   ============================================================ */
.hero-cover{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  margin:0 0 26px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
.hero-cover::before,
.hero-cover::after,
.hero-cover-backdrop,
.hero-mobile-media{
  display:none!important;
}
.hero-media-shell{
  display:block!important;
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
  background:#0b1820!important;
  border-top:1px solid rgba(103,232,249,.10)!important;
  border-bottom:1px solid rgba(103,232,249,.15)!important;
}
.hero-media-shell::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  height:72px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,transparent,rgba(8,20,27,.30))!important;
}
.hero-media-image{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
}
.hero-media-placeholder{
  min-height:220px!important;
  background:
    radial-gradient(circle at 20% 10%,rgba(27,177,202,.18),transparent 34%),
    radial-gradient(circle at 82% 20%,rgba(103,232,249,.08),transparent 30%),
    linear-gradient(135deg,#10232d,#0b171f)!important;
}
.hero-cover-inner{
  position:relative!important;
  z-index:4!important;
  width:min(1120px,calc(100% - 36px))!important;
  min-height:0!important;
  margin:-44px auto 0!important;
  padding:0!important;
  display:block!important;
}
.hero-cover-copy{
  width:100%!important;
  max-width:none!important;
  padding:22px 24px 21px!important;
  border:1px solid rgba(103,232,249,.18)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(20,42,52,.97),rgba(14,31,40,.985))!important;
  box-shadow:0 24px 58px rgba(3,10,16,.28),inset 0 1px 0 rgba(255,255,255,.03)!important;
  backdrop-filter:blur(16px)!important;
}
.hero-cover .kicker{
  margin:0 0 11px!important;
  width:max-content!important;
  min-height:26px!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid var(--front-accent-line)!important;
  border-radius:999px!important;
  background:var(--front-accent-soft)!important;
  color:var(--front-accent-strong)!important;
  font-size:9px!important;
  font-weight:700!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
.hero-cover .hero-title{
  max-width:760px!important;
  margin:0!important;
  color:var(--front-heading)!important;
  font-size:42px!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  text-shadow:none!important;
}
.hero-cover .hero-desc{
  max-width:720px!important;
  margin:11px 0 0!important;
  color:var(--front-muted)!important;
  font-size:13px!important;
  line-height:1.62!important;
}
.hero-cover .hero-actions,
.hero-cover .hero-actions-v419,
.hero-actions-unified{
  margin-top:16px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.hero-cover .hero-btn,
.hero-cover .hero-status-btn,
.hero-cover .hero-actions-v419 .hero-action-login,
.hero-cover .hero-actions-v419 .hero-action-status,
.hero-cover .hero-actions-v419 .hero-action-claim{
  min-height:42px!important;
  height:42px!important;
  padding:0 16px!important;
  border-radius:12px!important;
  font-size:11px!important;
  line-height:1!important;
}
@media(max-width:980px){
  .hero-cover-inner{
    width:min(100% - 28px,900px)!important;
    margin:-32px auto 0!important;
  }
  .hero-cover-copy{padding:19px 20px!important;border-radius:19px!important}
  .hero-cover .hero-title{font-size:34px!important;max-width:650px!important}
}
@media(max-width:760px){
  .hero-cover{
    width:min(100% - 20px,1120px)!important;
    margin:10px auto 14px!important;
  }
  .hero-media-shell{
    border:1px solid var(--front-border)!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
  }
  .hero-media-shell::after{height:34px!important;opacity:.35!important}
  .hero-media-image{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .hero-media-placeholder{min-height:100px!important}
  .hero-cover-inner{
    width:100%!important;
    margin:0!important;
  }
  .hero-cover-copy{
    padding:15px 14px 14px!important;
    border-radius:0 0 18px 18px!important;
    border-top:0!important;
    box-shadow:0 16px 36px rgba(3,10,16,.14),inset 0 1px 0 rgba(255,255,255,.02)!important;
    backdrop-filter:none!important;
  }
  .hero-cover .kicker{
    margin-bottom:9px!important;
    min-height:23px!important;
    padding:0 9px!important;
    font-size:8.5px!important;
  }
  .hero-cover .hero-title{
    max-width:100%!important;
    font-size:25px!important;
    line-height:1.04!important;
  }
  .hero-cover .hero-desc{
    max-width:100%!important;
    margin-top:9px!important;
    font-size:11px!important;
    line-height:1.48!important;
  }
  .hero-cover .hero-actions,
  .hero-cover .hero-actions-v419,
  .hero-actions-unified{
    margin-top:12px!important;
    display:grid!important;
    grid-template-columns:1.12fr 1fr 1fr!important;
    gap:6px!important;
  }
  .hero-cover .hero-btn,
  .hero-cover .hero-status-btn,
  .hero-cover .hero-actions-v419 .hero-action-login,
  .hero-cover .hero-actions-v419 .hero-action-status,
  .hero-cover .hero-actions-v419 .hero-action-claim{
    min-height:36px!important;
    height:36px!important;
    padding:0 7px!important;
    border-radius:10px!important;
    font-size:8.8px!important;
  }
}
@media(max-width:390px){
  .hero-cover-copy{padding:13px 12px 12px!important}
  .hero-cover .hero-title{font-size:23px!important}
  .hero-cover .hero-desc{font-size:10.5px!important}
}

/* ============================================================
   v4.5.7 — CONTACT WIDGET COMPACT + SOFTER SURFACE
   Makes the floating widget smaller and less solid/heavy on screen.
   ============================================================ */
.contact-panel{
  width:min(320px,calc(100vw - 28px))!important;
  padding:11px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg, rgba(17,31,41,.86), rgba(14,26,35,.78))!important;
  border:1px solid rgba(103,232,249,.16)!important;
  box-shadow:0 20px 56px rgba(3,10,16,.22), inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(16px)!important;
}
.contact-panel-head{
  padding:1px 1px 10px!important;
  gap:10px!important;
}
.contact-panel-head b{
  font-size:17px!important;
  line-height:1.15!important;
}
.contact-panel-head span{
  margin-top:4px!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.contact-close{
  width:34px!important;
  height:34px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(103,232,249,.14)!important;
}
.contact-close svg{
  width:15px!important;
  height:15px!important;
}
.contact-list{
  gap:8px!important;
  padding-top:10px!important;
}
.contact-item{
  grid-template-columns:42px minmax(0,1fr) 30px!important;
  gap:10px!important;
  padding:9px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01))!important;
  border:1px solid rgba(103,232,249,.12)!important;
  box-shadow:none!important;
}
.contact-item:hover{
  box-shadow:0 10px 24px rgba(3,10,16,.12)!important;
}
.contact-icon{
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
}
.contact-icon .brand-svg{
  width:21px!important;
  height:21px!important;
}
.contact-copy b{
  font-size:12px!important;
  font-weight:700!important;
}
.contact-copy small{
  margin-top:3px!important;
  font-size:9.5px!important;
}
.contact-arrow{
  width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.02)!important;
}
.contact-arrow svg{
  width:14px!important;
  height:14px!important;
}
.contact-fab{
  min-height:46px!important;
  height:46px!important;
  padding:0 14px!important;
  gap:8px!important;
  border-radius:15px!important;
  background:linear-gradient(180deg, rgba(20,41,53,.88), rgba(17,34,44,.82))!important;
  border:1px solid rgba(103,232,249,.18)!important;
  box-shadow:0 14px 28px rgba(3,10,16,.18), inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.contact-fab::before{
  opacity:.5!important;
}
.contact-fab-icon{
  width:26px!important;
  height:26px!important;
  border-radius:9px!important;
}
.contact-fab-icon svg{
  width:16px!important;
  height:16px!important;
}
@media(max-width:760px){
  .contact-widget{
    right:10px!important;
    bottom:10px!important;
  }
  .contact-panel{
    width:min(292px,calc(100vw - 18px))!important;
    padding:10px!important;
    border-radius:18px!important;
  }
  .contact-panel-head b{
    font-size:15px!important;
  }
  .contact-panel-head span{
    font-size:9.6px!important;
  }
  .contact-close{
    width:30px!important;
    height:30px!important;
    border-radius:9px!important;
  }
  .contact-list{
    gap:7px!important;
    padding-top:9px!important;
  }
  .contact-item{
    grid-template-columns:38px minmax(0,1fr) 27px!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:14px!important;
  }
  .contact-icon{
    width:38px!important;
    height:38px!important;
    border-radius:12px!important;
  }
  .contact-icon .brand-svg{
    width:19px!important;
    height:19px!important;
  }
  .contact-copy b{
    font-size:11.5px!important;
  }
  .contact-copy small{
    font-size:9px!important;
  }
  .contact-arrow{
    width:27px!important;
    height:27px!important;
    border-radius:9px!important;
  }
  .contact-fab{
    min-height:42px!important;
    height:42px!important;
    padding:0 11px!important;
    gap:6px!important;
    border-radius:14px!important;
    font-size:10px!important;
  }
  .contact-fab-icon{
    width:24px!important;
    height:24px!important;
    border-radius:8px!important;
  }
}

/* ============================================================
   v4.5.8 — FRONT CARD GRAPHIC EFFECTS
   Adds subtle graphic/chart ornaments to frontend cards,
   including claim and status/check pages, without heavy JS.
   ============================================================ */
.rules-panel,
.panel-card,
.search-card,
.result-card,
.status-card,
.history-item,
.file-box,
.join-upload-area,
.join-file-card,
.claim-popup{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.rules-panel::before,
.panel-card::before,
.search-card::before,
.result-card::before,
.status-card::before,
.history-item::before,
.file-box::before,
.join-upload-area::before,
.join-file-card::before,
.claim-popup::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.92!important;
  background:
    radial-gradient(circle at 88% 10%, rgba(103,232,249,.08), transparent 18%),
    radial-gradient(circle at 78% 88%, rgba(27,177,202,.06), transparent 18%),
    linear-gradient(90deg, transparent 0 78%, rgba(103,232,249,.045) 78%, rgba(103,232,249,.045) 78.6%, transparent 78.6%),
    linear-gradient(180deg, transparent 0 76%, rgba(103,232,249,.04) 76%, rgba(103,232,249,.04) 76.6%, transparent 76.6%)!important;
}
.rules-panel::after,
.panel-card::after,
.search-card::after,
.result-card::after,
.status-card::after,
.history-item::after,
.file-box::after,
.join-upload-area::after,
.join-file-card::after,
.claim-popup::after{
  content:""!important;
  position:absolute!important;
  right:12px!important;
  bottom:10px!important;
  width:140px!important;
  height:52px!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:.34!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 52' fill='none'%3E%3Cpath d='M2 40C18 40 22 22 34 22C46 22 49 43 64 43C80 43 82 15 98 15C113 15 116 33 138 33' stroke='%2367E8F9' stroke-opacity='.55' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='22' r='2.8' fill='%2367E8F9' fill-opacity='.72'/%3E%3Ccircle cx='64' cy='43' r='2.8' fill='%2367E8F9' fill-opacity='.72'/%3E%3Ccircle cx='98' cy='15' r='2.8' fill='%2367E8F9' fill-opacity='.72'/%3E%3C/svg%3E")!important;
}
.rules-panel > *,
.panel-card > *,
.search-card > *,
.result-card > *,
.status-card > *,
.history-item > *,
.file-box > *,
.join-upload-area > *,
.join-file-card > *,
.claim-popup > *{
  position:relative!important;
  z-index:1!important;
}
.rules-panel:hover::after,
.panel-card:hover::after,
.search-card:hover::after,
.result-card:hover::after,
.status-card:hover::after,
.history-item:hover::after,
.file-box:hover::after,
.join-upload-area:hover::after,
.join-file-card:hover::after{
  opacity:.5!important;
  transform:translateY(-1px)!important;
  transition:opacity .18s ease, transform .18s ease!important;
}
/* Keep rules list readable while still decorated */
.rule-item{
  position:relative!important;
  overflow:hidden!important;
}
.rule-item::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  background:linear-gradient(180deg, rgba(103,232,249,.0), rgba(103,232,249,.45), rgba(27,177,202,.0))!important;
  opacity:.7!important;
}
.rule-item::after{
  content:""!important;
  position:absolute!important;
  right:12px!important;
  bottom:8px!important;
  width:84px!important;
  height:26px!important;
  pointer-events:none!important;
  opacity:.18!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 26' fill='none'%3E%3Cpath d='M1 20C10 20 12 10 20 10C28 10 28 22 38 22C48 22 48 6 58 6C67 6 69 15 83 15' stroke='%2367E8F9' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
/* Make status/claim result boxes a bit more dynamic */
.kv,
.claim-code-item,
.step{
  position:relative!important;
  overflow:hidden!important;
}
.kv::after,
.claim-code-item::after,
.step::after{
  content:""!important;
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  width:42px!important;
  height:42px!important;
  transform:translateY(-50%)!important;
  border-radius:50%!important;
  border:1px dashed rgba(103,232,249,.16)!important;
  opacity:.5!important;
}
@media(max-width:760px){
  .rules-panel::after,
  .panel-card::after,
  .search-card::after,
  .result-card::after,
  .status-card::after,
  .history-item::after,
  .file-box::after,
  .join-upload-area::after,
  .join-file-card::after,
  .claim-popup::after{
    width:98px!important;
    height:36px!important;
    right:8px!important;
    bottom:8px!important;
    opacity:.24!important;
  }
  .rule-item::after{
    width:66px!important;
    height:20px!important;
    right:8px!important;
    bottom:6px!important;
  }
  .kv::after,
  .claim-code-item::after,
  .step::after{
    width:30px!important;
    height:30px!important;
    right:8px!important;
  }
}