/* ==========================================================================
   LIKEO — Premium Theme v2
   Brand architecture: obsidian + gold + jade. Deliberately NOT the rounded
   "SaaS card grid" system used elsewhere — sharper geometry, a floating
   detached nav bar, an asymmetric hero, and a jade data-accent so this
   reads as its own product rather than a recolor of another panel.
   ========================================================================== */

:root{
  /* ---- Brand ---- */
  --lk-gold-300:#ffe066;
  --lk-gold-400:#f0b90b;   /* primary brand */
  --lk-gold-500:#d4a20a;
  --lk-gold-600:#c99200;
  --lk-gold-700:#9a6f00;

  --lk-jade-300:#6fe3c4;
  --lk-jade-400:#2bd9a8;  /* secondary brand accent — data viz, links, motion */
  --lk-jade-500:#1fb992;

  --lk-blue-400:#4b61f0;   /* tertiary accent / focus ring */
  --lk-green-400:#5bcc86;  /* success / refill */
  --lk-red-400:#e96a6c;    /* danger / cancel */
  --lk-orange-400:#e68c3c; /* "slow" warning */

  /* ---- Surfaces (dark, default & only theme for launch) ---- */
  --lk-bg:#0a0c10;
  --lk-bg-2:#0d1013;
  --lk-surface:#141820;
  --lk-surface-2:#1b212a;
  --lk-surface-3:#11151b;
  --lk-border:rgba(255,255,255,.07);
  --lk-border-2:rgba(255,255,255,.13);

  --lk-text-1:rgba(255,255,255,.95);
  --lk-text-2:rgba(255,255,255,.66);
  --lk-text-3:rgba(255,255,255,.42);
  --lk-text-4:rgba(255,255,255,.24);

  /* Sharper, more geometric than a typical rounded card grid. */
  --lk-radius-sm:8px;
  --lk-radius:12px;
  --lk-radius-lg:16px;

  --lk-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --lk-shadow-md:0 12px 32px -8px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --lk-shadow-gold:0 10px 30px -6px rgba(240,185,11,.22), inset 0 0 0 1px rgba(240,185,11,.14);
  --lk-shadow-jade:0 10px 30px -6px rgba(43,217,168,.2), inset 0 0 0 1px rgba(43,217,168,.12);

  --lk-font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --lk-font-body:'Manrope',system-ui,-apple-system,sans-serif;
  --lk-font-mono:'JetBrains Mono',ui-monospace,monospace;

  --lk-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --lk-ease:cubic-bezier(.4,0,.2,1);

  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    linear-gradient(180deg, rgba(43,217,168,.05), transparent 30%),
    radial-gradient(1100px 640px at 88% -8%, rgba(240,185,11,.1), transparent 58%),
    radial-gradient(900px 560px at 4% 18%, rgba(43,217,168,.08), transparent 55%),
    var(--lk-bg);
  color:var(--lk-text-1);
  font-family:var(--lk-font-body);
  font-weight:500;
  font-size:16px;
  line-height:1.7;
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--lk-font-display);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--lk-text-1);
}
p{margin:0 0 1em;color:var(--lk-text-2);}
a{color:var(--lk-gold-400);text-decoration:none;transition:color .18s var(--lk-ease);}
a:hover{color:var(--lk-gold-300);}
img{max-width:100%;display:block;}
::selection{background:rgba(240,185,11,.28);color:#fff;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--lk-bg-2);}
::-webkit-scrollbar-thumb{background:var(--lk-surface-2);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--lk-gold-700);}

.lk-container{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ---- Grain texture (subtle, applies to whole app) ---- */
.lk-grain{position:fixed;inset:0;pointer-events:none;opacity:.02;z-index:2;mix-blend-mode:overlay;}

/* ==========================================================================
   Header / Nav — a detached floating bar, not a full-bleed sticky strip.
   ========================================================================== */
.lk-header{
  position:sticky;top:0;z-index:50;
  padding:16px 20px 0;
  background:linear-gradient(180deg, var(--lk-bg) 55%, transparent);
  pointer-events:none;
}
.lk-header .lk-container{ pointer-events:auto; }
.lk-header__inner{
  display:flex;align-items:center;gap:28px;
  height:68px;
  max-width:1240px;margin:0 auto;padding:0 12px 0 20px;
  background:rgba(20,24,32,.78);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--lk-border-2);
  border-radius:16px;
  box-shadow:var(--lk-shadow-md);
  transition:border-color .25s var(--lk-ease), box-shadow .25s var(--lk-ease), background .25s var(--lk-ease);
}
.lk-header.is-scrolled .lk-header__inner{border-color:rgba(240,185,11,.22);box-shadow:0 16px 40px -10px rgba(0,0,0,.55), var(--lk-shadow-gold);}
.lk-logo{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  font-family:var(--lk-font-display);font-weight:800;font-size:1.5rem;
  letter-spacing:-0.02em;color:var(--lk-text-1);
}
.lk-logo__img{height:44px;width:auto;max-width:180px;display:block;object-fit:contain;}
.lk-logo__word span{color:var(--lk-gold-400);}
.lk-logo:hover{color:var(--lk-text-1);}

@media(max-width:560px){ .lk-logo__img{height:36px;max-width:150px;} }

.lk-nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden;}
.lk-nav__link{
  position:relative;padding:10px 15px;border-radius:9px;
  font-size:1rem;font-weight:600;color:var(--lk-text-2);
  white-space:nowrap;transition:color .18s var(--lk-ease), background .18s var(--lk-ease);
}
.lk-nav__link:hover{color:var(--lk-text-1);background:rgba(255,255,255,.06);}
.lk-nav__link.is-active{color:var(--lk-gold-400);}
.lk-nav__link.is-active::after{
  content:'';position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:linear-gradient(90deg, var(--lk-gold-400), var(--lk-jade-400));border-radius:2px;
}

.lk-header__actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}

.lk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--lk-font-body);font-weight:700;font-size:1rem;
  padding:10px 20px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--lk-ease-spring), box-shadow .2s var(--lk-ease), background .2s var(--lk-ease), border-color .2s var(--lk-ease), color .2s var(--lk-ease);
  white-space:nowrap;
}
.lk-btn:active{transform:translateY(0);}
.lk-btn:focus-visible{outline:2px solid var(--lk-gold-400);outline-offset:3px;}
.lk-btn--gold{
  background:linear-gradient(135deg,var(--lk-gold-400),var(--lk-gold-300));
  color:#1a1000;box-shadow:var(--lk-shadow-gold);
}
.lk-btn--gold:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(240,185,11,.32);}
.lk-btn--ghost{
  background:rgba(255,255,255,.04);border-color:var(--lk-border-2);color:var(--lk-text-1);
}
.lk-btn--ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);}
.lk-btn--sm{padding:7px 14px;font-size:.92rem;}
.lk-btn--block{width:100%;}

.lk-utilbtn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--lk-border);
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--lk-text-2);flex-shrink:0;transition:background .18s var(--lk-ease), color .18s var(--lk-ease);
}
.lk-utilbtn:hover{background:rgba(255,255,255,.08);color:var(--lk-text-1);}

.lk-menu-btn{
  display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--lk-border);
  background:rgba(255,255,255,.03);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--lk-text-1);
}

/* ---- Bootstrap-driven dropdowns (account / currency / language) ----
   Markup uses Bootstrap 3's `dropdown` / `dropdown-toggle` / `dropdown-menu`
   / data-toggle="dropdown" so PerfectPanel core JS (bootstrap.js) drives
   the open/close + outside-click + escape behaviour. Only visuals below. */
.lk-dropdown{position:relative;}
.lk-dropdown__menu{
  position:absolute;top:calc(100% + 10px);right:0;left:auto;min-width:220px;max-height:320px;overflow-y:auto;
  background:var(--lk-surface-2);border:1px solid var(--lk-border);border-radius:var(--lk-radius);
  box-shadow:var(--lk-shadow-md);padding:8px;margin:0;list-style:none;z-index:60;
}
.lk-dropdown__menu--scroll{max-height:280px;}
.lk-dropdown__item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:.95rem;font-weight:600;color:var(--lk-text-2)!important;cursor:pointer;
  transition:background .15s var(--lk-ease), color .15s var(--lk-ease);
}
.lk-dropdown__item:hover,.lk-dropdown__item:focus{background:rgba(255,255,255,.06);color:var(--lk-text-1)!important;text-decoration:none;}
.lk-dropdown__menu li.active .lk-dropdown__item{color:var(--lk-gold-400)!important;}
.lk-dropdown__item--danger{color:var(--lk-red-400)!important;}
.lk-dropdown__divider{height:1px;background:var(--lk-border);margin:6px 4px;list-style:none;}
.lk-dropdown__caret{margin-left:2px;flex-shrink:0;transition:transform .2s var(--lk-ease);}
.open>.lk-dropdown__caret,.dropdown.open .lk-dropdown__caret{transform:rotate(180deg);}

.lk-balance-badge{
  display:inline-flex;align-items:center;font-weight:800;font-size:.95rem;color:var(--lk-gold-400);
  font-family:var(--lk-font-mono);
}

.lk-account-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--lk-gold-400),var(--lk-blue-400));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;color:#0d0f14;
}
.lk-account-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Mobile menu panel */
.lk-mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);z-index:70;
  display:flex;flex-direction:column;gap:2px;padding:100px 18px 24px;
  transform:translateX(100%);transition:transform .3s var(--lk-ease);overflow-y:auto;
}
.lk-mobile-menu.is-open{transform:translateX(0);}
.lk-mobile-menu a{
  padding:13px 14px;border-radius:10px;font-size:.96rem;font-weight:700;color:var(--lk-text-2);
  transition:background .15s var(--lk-ease), color .15s var(--lk-ease);
}
.lk-mobile-menu a:hover,.lk-mobile-menu a.is-active{background:rgba(255,255,255,.06);color:var(--lk-gold-400);}
.lk-mobile-menu__divider{height:1px;background:var(--lk-border);margin:10px 4px;}
.lk-mobile-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;z-index:65;
  transition:opacity .25s var(--lk-ease), visibility .25s var(--lk-ease);backdrop-filter:blur(2px);
}
.lk-mobile-scrim.is-open{opacity:1;visibility:visible;}

/* Mobile nav */
@media(max-width:980px){
  .lk-nav{display:none;}
  .lk-menu-btn{display:flex;}
}
/* Guest currency/language pickers move into the slide-out menu below
   560px — keeps Login + Sign Up + the hamburger from ever fighting for
   space with two extra dropdowns on a real phone screen. */
@media(max-width:560px){
  .lk-header__util{display:none;}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.lk-footer{border-top:1px solid var(--lk-border);margin-top:100px;background:var(--lk-bg-2);position:relative;z-index:1;}
.lk-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:64px 0 40px;}
.lk-footer__brand p{max-width:280px;font-size:15px;}
.lk-footer__social{display:flex;gap:10px;margin-top:16px;}
.lk-footer__social a{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--lk-border);
  display:flex;align-items:center;justify-content:center;color:var(--lk-text-2);transition:all .18s var(--lk-ease);
}
.lk-footer__social a:hover{background:var(--lk-gold-400);color:#1a1000;border-color:var(--lk-gold-400);transform:translateY(-2px);}
.lk-footer__col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--lk-text-3);font-weight:800;margin-bottom:16px;}
.lk-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.lk-footer__col a{font-size:15px;color:var(--lk-text-2);}
.lk-footer__col a:hover{color:var(--lk-gold-400);}
.lk-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--lk-border);font-size:.8rem;color:var(--lk-text-3);
}
.lk-footer__bottom a{color:var(--lk-text-3);}
.lk-footer__bottom a:hover{color:var(--lk-gold-400);}
.lk-footer__pay{display:flex;gap:8px;align-items:center;opacity:.7;}

@media(max-width:860px){
  .lk-footer__top{grid-template-columns:1fr 1fr;gap:32px;padding:48px 0 32px;}
  .lk-footer__brand{grid-column:1/-1;}
}
@media(max-width:560px){
  .lk-footer__top{grid-template-columns:1fr;}
  .lk-footer__bottom{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   Generic surfaces / cards (shared across inner pages)
   ========================================================================== */
.lk-card{
  background:var(--lk-surface-2);border:1px solid var(--lk-border);border-radius:var(--lk-radius-lg);
  box-shadow:var(--lk-shadow-sm);
}
.lk-card--elevated{background:var(--lk-surface-2);border:1px solid var(--lk-border-2);box-shadow:var(--lk-shadow-md);}
.lk-card--floating{background:rgba(30,35,41,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);}

.lk-badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
}
.lk-badge--gold{background:rgba(240,185,11,.12);color:var(--lk-gold-400);border:1px solid rgba(240,185,11,.28);}
.lk-badge--green{background:rgba(91,204,134,.12);color:var(--lk-green-400);border:1px solid rgba(91,204,134,.28);}
.lk-badge--blue{background:rgba(75,97,240,.12);color:#7c8ef5;border:1px solid rgba(75,97,240,.28);}

/* ---- Reveal-on-scroll ---- */
.lk-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--lk-ease), transform .7s var(--lk-ease-spring);}
.lk-reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---- Skip link (a11y) ---- */
.lk-skip{position:absolute;left:-9999px;top:0;background:var(--lk-gold-400);color:#1a1000;padding:10px 16px;border-radius:8px;font-weight:700;z-index:100;}
.lk-skip:focus{left:16px;top:16px;}

/* =====================================================================
   INNER-PAGE COMPONENT LIBRARY
   (auth cards, forms, tables, tabs, timeline, code blocks, etc.)
   ===================================================================== */

.lk-gold-soft{ background: rgba(240,185,11,.12); }

/* ---------- Section / layout helpers ---------- */
.lk-section{ padding: 88px 24px; }
@media (max-width: 640px){ .lk-section{ padding: 56px 20px; } }
.lk-section--hero{ padding-top: 140px; padding-bottom: 72px; }
@media (max-width: 767px){ .lk-section--hero{ padding-top: 116px; padding-bottom: 48px; } }
.lk-section-tight{ padding: 32px 24px 64px; max-width: 1240px; margin: 0 auto; }
.lk-section-head{ max-width: 620px; margin: 0 auto 48px; text-align: center; }
.lk-section-head h2{ font-size: 34px; }
.lk-section-head p{ font-size: 15.5px; line-height: 1.7; color: var(--lk-text-2); margin: 0; }
@media (max-width: 640px){ .lk-section-head h2{ font-size: 26px; } }
.lk-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lk-gold-400); margin-bottom: 12px;
}
.lk-text-1{ color: var(--lk-text-1); } .lk-text-2{ color: var(--lk-text-2); } .lk-text-3{ color: var(--lk-text-3); }
.lk-text-mono{ font-family: var(--lk-font-mono); }
.lk-text-right{ text-align: right; }
.lk-text-sm{ font-size: 14.5px; } .lk-text-xs{ font-size: 13px; }
.lk-mt8{margin-top:8px;} .lk-mt16{margin-top:16px;} .lk-mt24{margin-top:24px;} .lk-mt32{margin-top:32px;}
.lk-mb8{margin-bottom:8px;} .lk-mb16{margin-bottom:16px;} .lk-mb24{margin-bottom:24px;}
.lk-p24{padding:24px;} .lk-p32{padding:32px;}
.lk-w-full{width:100%;}
.lk-divider{height:1px;background:var(--lk-border);margin:20px 0;}
.lk-flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.lk-well{ background: var(--lk-surface-2); border: 1px solid var(--lk-border); border-radius: 20px; padding: 28px; margin-bottom: 20px; }
@media (max-width: 640px){ .lk-well{ padding: 20px; } }

/* ---------- Page header (every inner page) ---------- */
.lk-pagehead{ padding: 120px 24px 40px; }
@media (max-width: 767px){ .lk-pagehead{ padding-top: 104px; } }
.lk-pagehead__inner{ max-width: 1240px; margin: 0 auto; }
.lk-pagehead__crumb{ font-size: 13px; color: var(--lk-text-3); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.lk-pagehead__crumb a{ color: var(--lk-text-3); transition: color .2s ease; }
.lk-pagehead__crumb a:hover{ color: var(--lk-gold-400); }
.lk-pagehead h1{ font-size: 32px; }
.lk-pagehead p{
  margin-top: 14px; width: 100%; box-sizing: border-box;
  font-size: 16px; line-height: 1.65;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.22);
  color: var(--lk-text-1);
}
.lk-pagehead__row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lk-pagehead__row > div:first-child{ flex: 1 1 100%; min-width: 0; }

/* ---------- Auth (signin / signup / reset / 2fa) ---------- */
.lk-auth-wrap{ min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 150px 24px 80px; position: relative; }
.lk-auth-card{ width: 100%; max-width: 440px; padding: 40px; }
.lk-auth-card__head{ text-align: center; margin-bottom: 28px; }
.lk-auth-card__head h1{ font-size: 26px; margin-bottom: 8px; }
.lk-auth-card__head p{ font-size: 15.5px; }
.lk-auth-divider{ display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12.5px; color: var(--lk-text-3); }
.lk-auth-divider::before, .lk-auth-divider::after{ content: ''; flex: 1; height: 1px; background: var(--lk-border); }
.lk-auth-foot{ text-align: center; font-size: 15px; color: var(--lk-text-2); margin-top: 22px; }
.lk-auth-foot a{ color: var(--lk-gold-400); font-weight: 700; }
.lk-auth-foot a:hover{ text-decoration: underline; }
.lk-otp-row{ display: flex; gap: 10px; justify-content: center; margin: 8px 0 24px; }
.lk-otp-box{ width: 52px; height: 60px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 12px; font-family: var(--lk-font-mono); }

/* ---------- Forms ---------- */
.lk-form-group{ margin-bottom: 18px; }
.lk-label{ display: block; font-size: 13px; font-weight: 700; color: var(--lk-text-1); margin-bottom: 7px; }
.lk-label--optional{ font-weight: 400; color: var(--lk-text-3); }
.lk-help{ font-size: 12.5px; color: var(--lk-text-3); margin-top: 6px; }
.lk-error{ font-size: 12.5px; color: var(--lk-red-400); margin-top: 6px; }
.lk-input{
  width: 100%; background: var(--lk-surface-3); border: 1px solid var(--lk-border-2);
  border-radius: 12px; padding: 12px 16px; font-size: 15px; color: var(--lk-text-1);
  font-family: var(--lk-font-body); transition: border-color .2s ease, box-shadow .2s ease;
}
.lk-input::placeholder{ color: var(--lk-text-3); }
.lk-input:focus{ outline: none; border-color: var(--lk-gold-400); box-shadow: 0 0 0 3px rgba(240,185,11,.16); }
textarea.lk-input{ resize: vertical; min-height: 110px; font-family: var(--lk-font-mono); font-size: 13px; }
select.lk-input{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238994AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.lk-input-group{ position: relative; }
.lk-input-group .lk-input{ padding-right: 46px; }
.lk-input-group__icon{ position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--lk-text-3); }
.lk-input-group__btn{ position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: transparent; color: var(--lk-text-3); transition: background .18s ease, color .18s ease; }
.lk-input-group__btn:hover{ background: rgba(240,185,11,.1); color: var(--lk-gold-400); }
.lk-checkbox-row{ display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--lk-text-2); }
.lk-checkbox-row input{ width: 16px; height: 16px; accent-color: var(--lk-gold-400); }
.lk-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px){ .lk-form-row{ grid-template-columns: 1fr; } }
.lk-copy-field{ display: flex; align-items: center; gap: 8px; }
.lk-copy-field .lk-input{ font-family: var(--lk-font-mono); font-size: 13px; }
.lk-radio-card{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lk-border-2); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.lk-radio-card:hover{ border-color: var(--lk-gold-400); }
.lk-radio-card.is-selected{ border-color: var(--lk-gold-400); background: rgba(240,185,11,.08); }
.lk-radio-card input{ accent-color: var(--lk-gold-400); width: 16px; height: 16px; }

/* ---------- Payment method cards (addfunds) ---------- */
.lk-pay-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 480px){ .lk-pay-grid{ grid-template-columns: 1fr; } }
.lk-pay-card{ display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--lk-border-2); cursor: pointer; position: relative; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.lk-pay-card:hover{ border-color: var(--lk-gold-400); transform: translateY(-1px); }
.lk-pay-card input{ position: absolute; opacity: 0; pointer-events: none; }
.lk-pay-card__icon{ width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--lk-surface-3); color: var(--lk-text-2); transition: background .2s ease, color .2s ease; }
.lk-pay-card__name{ font-size: 15px; font-weight: 700; color: var(--lk-text-1); flex: 1; }
.lk-pay-card__check{ width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lk-border-2); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.lk-pay-card.is-selected,
.lk-pay-card:has(input:checked){ border-color: var(--lk-gold-400); background: rgba(240,185,11,.08); }
.lk-pay-card.is-selected .lk-pay-card__icon,
.lk-pay-card:has(input:checked) .lk-pay-card__icon{ background: var(--lk-gold-400); color: #1a1000; }
.lk-pay-card.is-selected .lk-pay-card__check,
.lk-pay-card:has(input:checked) .lk-pay-card__check{ background: var(--lk-gold-400); border-color: var(--lk-gold-400); color: #1a1000; }

/* ---------- Payment card brand monograms (addfunds) ---------- */
.lk-pay-card__icon[data-pay-mono]{ font-family: var(--lk-font-display); font-weight: 800; font-size: 13px; }

/* ---------- Bonus tier ladder + live calculator (addfunds) ---------- */
.lk-bonus-box{ position: relative; overflow: hidden; }
.lk-bonus-box__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.lk-bonus-box__title{ font-family: var(--lk-font-display); font-size: 19px; font-weight: 800; color: var(--lk-text-1); margin: 0 0 4px; }
.lk-bonus-box__sub{ font-size: 13.5px; color: var(--lk-text-3); margin: 0; }
.lk-bonus-box__badge{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: rgba(240,185,11,.14); color: var(--lk-gold-400); flex-shrink: 0; white-space: nowrap; }

.lk-bonus-tiers{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.lk-bonus-tier{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border-radius: 13px; border: 1px solid var(--lk-border);
  background: var(--lk-surface-3); transition: border-color .25s var(--lk-ease), background .25s var(--lk-ease), transform .2s var(--lk-ease-spring);
}
.lk-bonus-tier__min{ font-size: 14px; font-weight: 700; color: var(--lk-text-2); }
.lk-bonus-tier__min b{ color: var(--lk-text-1); font-family: var(--lk-font-mono); }
.lk-bonus-tier__pct{ font-family: var(--lk-font-display); font-size: 17px; font-weight: 800; color: var(--lk-gold-500); flex-shrink: 0; }
.lk-bonus-tier.is-active{ border-color: var(--lk-gold-400); background: rgba(240,185,11,.1); transform: translateX(2px); }
.lk-bonus-tier.is-active .lk-bonus-tier__pct{ color: var(--lk-gold-400); }
.lk-bonus-tier.is-active .lk-bonus-tier__min{ color: var(--lk-text-1); }

.lk-bonus-box__calc{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(240,185,11,.14), rgba(240,185,11,.04));
  border: 1px solid rgba(240,185,11,.24); transition: opacity .2s ease;
}
.lk-bonus-box__calc-label{ font-size: 12px; font-weight: 700; color: var(--lk-text-3); text-transform: uppercase; letter-spacing: .04em; }
.lk-bonus-box__calc-value{ font-family: var(--lk-font-display); font-size: 24px; font-weight: 800; color: var(--lk-gold-400); margin-top: 3px; }
.lk-bonus-box__calc.is-empty{ opacity: .5; }
.lk-bonus-box__calc.is-empty .lk-bonus-box__calc-value{ font-size: 15px; color: var(--lk-text-3); }

/* ---------- Layout: two-column dashboard grid ---------- */
.lk-layout-2col{ display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px){ .lk-layout-2col{ grid-template-columns: 1fr; } }

/* ---------- Marquee (mini chip strip + service grid) ---------- */
.lk-minichip-marquee{ overflow: hidden; margin-bottom: 20px; border-radius: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lk-minichip-track{ display: flex; gap: 12px; width: max-content; animation: lkMarquee 34s linear infinite; }
.lk-minichip-marquee:hover .lk-minichip-track{ animation-play-state: paused; }
@keyframes lkMarquee{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
.lk-minichip{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 10px 14px; border-radius: 14px; min-width: 190px; background: var(--lk-surface-2); border: 1px solid var(--lk-border); box-shadow: var(--lk-shadow-sm); }
.lk-minichip__dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lk-minichip__body{ min-width: 0; }
.lk-minichip__label{ font-size: 10.5px; font-weight: 700; color: var(--lk-text-3); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.lk-minichip__value{ font-family: var(--lk-font-display); font-size: 14px; font-weight: 700; color: var(--lk-text-1); margin-top: 1px; }
.lk-minichip__chart{ width: 56px; height: 26px; margin-left: auto; flex-shrink: 0; }

/* ---------- Stat cards ---------- */
.lk-stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 900px){ .lk-stat-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .lk-stat-grid{ grid-template-columns: 1fr; } }
.lk-stat-card{ padding: 20px; }
.lk-stat-card__label{ font-size: 12.5px; color: var(--lk-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.lk-stat-card__value{ font-family: var(--lk-font-display); font-size: 26px; font-weight: 700; margin-top: 8px; color: var(--lk-text-1); }
.lk-stat-card__delta{ font-size: 12.5px; margin-top: 6px; font-weight: 700; }
.lk-stat-card__delta--up{ color: var(--lk-green-400); }
.lk-stat-card__delta--down{ color: var(--lk-red-400); }

/* ---------- Filter bar / toolbar ---------- */
.lk-toolbar{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lk-toolbar__left{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lk-toolbar__right{ margin-left: auto; }
.lk-search{ position: relative; min-width: 240px; }
.lk-search svg{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--lk-text-3); }
.lk-search .lk-input{ padding-left: 38px; width: 100%; }

/* ---------- Tables ---------- */
.lk-table-wrap{ overflow-x: auto; }
.lk-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.lk-table th{ text-align: left; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-text-3); padding: 12px 14px; border-bottom: 1px solid var(--lk-border); white-space: nowrap; }
.lk-table td{ padding: 14px 16px; border-bottom: 1px solid var(--lk-border); color: var(--lk-text-2); vertical-align: middle; }
.lk-table tr:last-child td{ border-bottom: none; }
.lk-table tr:hover td{ background: rgba(240,185,11,.05); }
.lk-table td.lk-td-strong{ color: var(--lk-text-1); font-weight: 700; }
.lk-table__category-row td{ background: var(--lk-surface-3); font-size: 12.5px; letter-spacing: .02em; padding: 9px 16px; }
.lk-price{ color: var(--lk-gold-400); font-weight: 700; font-family: var(--lk-font-mono); font-size: 14px; }
.lk-category-icon{ width: 16px; height: 16px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.lk-tooltip-icon{ color: var(--lk-text-3); margin-left: 4px; cursor: help; }
.lk-favorite{ cursor: pointer; color: var(--lk-text-3); transition: color .18s ease, transform .18s ease; }
.lk-favorite:hover{ color: var(--lk-gold-400); transform: scale(1.15); }
.lk-favorite.favorite-active{ color: var(--lk-gold-400); }

/* ---------- Services table extras: account-qty / speed-status / actions ---------- */
.lk-account-qty{ font-family: var(--lk-font-mono); color: var(--lk-text-2); font-size: 14px; }
.lk-speed-dot-cell{ display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.lk-status-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--lk-green-400); box-shadow: 0 0 0 0 rgba(91,204,134,.55); animation: lkStatusPulse 2.2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes lkStatusPulse{ 0%{box-shadow:0 0 0 0 rgba(91,204,134,.55);} 70%{box-shadow:0 0 0 6px rgba(91,204,134,0);} 100%{box-shadow:0 0 0 0 rgba(91,204,134,0);} }
.lk-status-dot--red{ background: var(--lk-red-400); animation: lkStatusPulseRed 1.6s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes lkStatusPulseRed{ 0%{box-shadow:0 0 0 0 rgba(233,106,108,.55);} 70%{box-shadow:0 0 0 6px rgba(233,106,108,0);} 100%{box-shadow:0 0 0 0 rgba(233,106,108,0);} }
.lk-icon-badges{ display: flex; align-items: center; gap: 6px; justify-content: center; }

/* Refill / Cancel — shown side-by-side as small labeled buttons, only
   when the provider API confirms the service actually supports them. */
.lk-action-btns{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lk-action-btn{
  display: inline-flex; align-items: center; gap: 5px; cursor: default;
  padding: 6px 11px; border-radius: 999px; border: 1px solid;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  transition: transform .18s var(--lk-ease-spring), box-shadow .18s ease, filter .18s ease;
}
.lk-action-btn svg{ flex-shrink: 0; }
.lk-action-btn:hover{ transform: translateY(-1px); filter: brightness(1.1); box-shadow: var(--lk-shadow-sm); }
.lk-action-btn--refill{ background: rgba(91,204,134,.12); color: var(--lk-green-400); border-color: rgba(91,204,134,.3); }
.lk-action-btn--cancel{ background: rgba(233,106,108,.12); color: var(--lk-red-400); border-color: rgba(233,106,108,.3); }

/* ---------- Live service activity grid (top of services page) ---------- */
.lk-svcgrid{ padding: 22px 24px; margin-bottom: 22px; }
.lk-svcgrid__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.lk-svcgrid__head h3{ font-size: 18px; font-weight: 700; color: var(--lk-text-1); margin: 0; }
.lk-svcgrid__sub{ font-size: 13px; color: var(--lk-text-3); margin-top: 3px; display: block; }
.lk-svcgrid__search{ position: relative; min-width: 220px; }
.lk-svcgrid__search svg{ position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--lk-text-3); }
.lk-svcgrid__search .lk-input{ padding-left: 36px; font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
.lk-svcgrid__marquee{ overflow: hidden; border-radius: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.lk-svcgrid__track{ display: flex; gap: 10px; width: max-content; animation: lkMarquee 90s linear infinite; }
.lk-svcgrid__marquee:hover .lk-svcgrid__track{ animation-play-state: paused; }
.lk-svcgrid__track.is-paused{ animation-play-state: paused; }
.lk-svcbox{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex-shrink: 0; width: 132px; padding: 12px 13px; border-radius: 13px; text-align: left; background: var(--lk-surface-3); border: 1px solid var(--lk-border); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.lk-svcbox:hover{ border-color: var(--lk-gold-400); transform: translateY(-2px); }
.lk-svcbox.is-flash{ border-color: var(--lk-gold-400); box-shadow: 0 0 0 3px rgba(240,185,11,.14); animation: lkSvcFlash 1.8s ease-in-out 2; }
@keyframes lkSvcFlash{ 0%,100%{ box-shadow: 0 0 0 3px rgba(240,185,11,.14); } 50%{ box-shadow: 0 0 0 6px rgba(240,185,11,.14); } }
.lk-svcbox__id{ font-family: var(--lk-font-mono); font-size: 10.5px; color: var(--lk-gold-400); font-weight: 700; }
.lk-svcbox__name{ font-size: 13px; font-weight: 700; color: var(--lk-text-1); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.lk-svcbox__chart{ width: 100%; height: 22px; margin-top: 2px; }
.lk-svc-detail{ position: relative; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; margin-bottom: 16px; background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.24); animation: lkSvcDetailIn .3s var(--lk-ease-spring) both; }
@keyframes lkSvcDetailIn{ 0%{ opacity: 0; transform: translateY(-6px); } 100%{ opacity: 1; transform: translateY(0); } }
.lk-svc-detail__close{ position: absolute; top: 12px; right: 14px; color: var(--lk-text-3); padding: 4px; }
.lk-svc-detail__close:hover{ color: var(--lk-text-1); }
.lk-svc-detail__title{ font-family: var(--lk-font-display); font-size: 19px; font-weight: 800; color: var(--lk-text-1); margin-bottom: 4px; }
.lk-svc-detail__id{ font-family: var(--lk-font-mono); font-size: 12.5px; color: var(--lk-gold-400); font-weight: 700; margin-bottom: 10px; display: block; }
.lk-svc-detail__desc{ font-size: 14.5px; color: var(--lk-text-2); line-height: 1.6; max-width: 420px; }
.lk-svc-detail__stats{ display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.lk-svc-detail__stat{ min-width: 70px; }
.lk-svc-detail__stat-label{ font-size: 10.5px; color: var(--lk-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.lk-svc-detail__stat-value{ font-family: var(--lk-font-display); font-size: 16px; font-weight: 800; color: var(--lk-text-1); margin-top: 3px; }
.lk-svc-detail__empty{ font-size: 13px; color: var(--lk-text-3); }

/* ---------- Status pills (orders) ---------- */
.lk-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.lk-pill::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lk-pill--completed{ background: rgba(91,204,134,.12); color: var(--lk-green-400); }
.lk-pill--processing{ background: rgba(75,97,240,.12); color: var(--lk-blue-400); }
.lk-pill--pending{ background: rgba(240,185,11,.12); color: var(--lk-gold-400); }
.lk-pill--partial{ background: rgba(124,142,245,.12); color: #7c8ef5; }
.lk-pill--canceled{ background: rgba(233,106,108,.12); color: var(--lk-red-400); }
.lk-pill--refunded{ background: rgba(255,255,255,.08); color: var(--lk-text-2); }

/* ---------- Pagination ---------- */
.lk-pagination{ display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; }
.lk-pagination a, .lk-pagination span{ width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--lk-text-2); border: 1px solid var(--lk-border); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.lk-pagination a:hover{ border-color: var(--lk-gold-400); color: var(--lk-text-1); }
.lk-pagination .is-active{ background: var(--lk-gold-400); border-color: var(--lk-gold-400); color: #1a1000; }

/* ---------- Empty state ---------- */
.lk-empty{ text-align: center; padding: 64px 24px; }
.lk-empty svg{ margin: 0 auto 16px; color: var(--lk-text-3); }
.lk-empty h3{ font-size: 19px; margin-bottom: 6px; }
.lk-empty p{ font-size: 15px; max-width: 340px; margin: 0 auto; }

/* ---------- Alerts / banners ---------- */
.lk-alert{ display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; border: 1px solid; margin-bottom: 20px; }
.lk-alert svg{ flex-shrink: 0; margin-top: 1px; }
.lk-alert--info{ background: rgba(240,185,11,.08); border-color: rgba(240,185,11,.24); color: var(--lk-text-1); }
.lk-alert--success{ background: rgba(91,204,134,.08); border-color: rgba(91,204,134,.26); color: var(--lk-text-1); }
.lk-alert--warning{ background: rgba(230,140,60,.08); border-color: rgba(230,140,60,.26); color: var(--lk-text-1); }
.lk-alert--danger{ background: rgba(233,106,108,.08); border-color: rgba(233,106,108,.26); color: var(--lk-text-1); }

/* ---------- Tabs ---------- */
.lk-tabs{ display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--lk-border); margin-bottom: 24px; overflow-x: auto; }
.lk-tab{ padding: 12px 4px; font-size: 14px; font-weight: 700; color: var(--lk-text-3); position: relative; white-space: nowrap; margin-right: 22px; transition: color .2s ease; }
.lk-tab:hover{ color: var(--lk-text-1); }
.lk-tab.is-active{ color: var(--lk-text-1); }
.lk-tab.is-active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lk-gold-400); border-radius: 2px; }

/* ---------- Sidebar nav (account settings) ---------- */
.lk-sidenav{ display: flex; flex-direction: column; gap: 3px; }
.lk-sidenav a{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--lk-text-2); transition: background .2s ease, color .2s ease; }
.lk-sidenav a:hover{ background: rgba(240,185,11,.08); color: var(--lk-text-1); }
.lk-sidenav a.is-active{ background: rgba(240,185,11,.1); color: var(--lk-gold-400); }

/* ---------- Timeline ---------- */
.lk-timeline{ display: flex; flex-direction: column; gap: 0; }
.lk-timeline__item{ display: flex; gap: 14px; padding-bottom: 24px; position: relative; }
.lk-timeline__item::before{ content: ''; position: absolute; left: 5px; top: 22px; bottom: 0; width: 1px; background: var(--lk-border); }
.lk-timeline__item:last-child::before{ display: none; }
.lk-timeline__dot{ width: 11px; height: 11px; border-radius: 50%; background: var(--lk-gold-400); margin-top: 4px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(240,185,11,.14); }
.lk-timeline__dot--muted{ background: var(--lk-text-3); box-shadow: 0 0 0 3px var(--lk-border); }
.lk-timeline__body{ flex: 1; }
.lk-timeline__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.lk-timeline__title{ font-size: 15.5px; font-weight: 700; color: var(--lk-text-1); }
.lk-timeline__time{ font-size: 12.5px; color: var(--lk-text-3); white-space: nowrap; }
.lk-timeline__text{ font-size: 15px; }

/* ---------- Chat / ticket message bubbles ---------- */
.lk-msg{ display: flex; gap: 12px; margin-bottom: 20px; }
.lk-msg--staff{ flex-direction: row-reverse; }
.lk-avatar{ width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #1a1000; background: linear-gradient(180deg, var(--lk-gold-300), var(--lk-gold-500)); flex-shrink: 0; }
.lk-avatar--muted{ background: var(--lk-surface-3); color: var(--lk-text-2); border: 1px solid var(--lk-border); }
.lk-msg__bubble{ max-width: 72%; padding: 14px 16px; border-radius: 16px; font-size: 13.5px; }
.lk-msg--customer .lk-msg__bubble{ background: var(--lk-surface-2); border: 1px solid var(--lk-border); border-top-left-radius: 4px; }
.lk-msg--staff .lk-msg__bubble{ background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.22); border-top-right-radius: 4px; }
.lk-msg__meta{ font-size: 11.5px; color: var(--lk-text-3); margin-bottom: 6px; font-weight: 700; }

/* ---------- Progress bar (drip-feed / subscriptions) ---------- */
.lk-progress{ height: 6px; border-radius: 999px; background: var(--lk-border); overflow: hidden; }
.lk-progress__fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lk-gold-500), var(--lk-gold-300)); }

/* ---------- Code block (API docs) ---------- */
.lk-code{ background: #05070a; border: 1px solid var(--lk-border-2); border-radius: 16px; padding: 18px 20px; font-family: var(--lk-font-mono); font-size: 12.8px; line-height: 1.65; color: #f2e6c2; overflow-x: auto; white-space: pre; }
.lk-code .tok-key{ color: var(--lk-gold-300); }
.lk-code .tok-str{ color: var(--lk-green-400); }
.lk-code .tok-com{ color: var(--lk-text-3); }
.lk-code-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lk-code-head span{ font-size: 12px; color: var(--lk-text-3); font-weight: 700; }
.lk-endpoint{ display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.lk-method{ font-family: var(--lk-font-mono); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; }
.lk-method--post{ background: rgba(240,185,11,.14); color: var(--lk-gold-400); }
.lk-method--get{ background: rgba(91,204,134,.14); color: var(--lk-green-400); }
.lk-param-table th, .lk-param-table td{ font-size: 13px; }
.lk-param-table code{ font-size: 12px; background: var(--lk-surface-3); padding: 2px 6px; border-radius: 6px; }

/* ---------- FAQ accordion ---------- */
.lk-faq{ border-radius: 18px; padding: 4px 22px; margin-bottom: 12px; }
.lk-faq summary{ list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 700; font-size: 17px; color: var(--lk-text-1); }
.lk-faq summary::-webkit-details-marker{ display: none; }
.lk-faq__icon{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--lk-border-2); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--lk-ease-spring), background .2s ease, border-color .2s ease, color .2s ease; }
.lk-faq[open] .lk-faq__icon{ transform: rotate(45deg); background: rgba(240,185,11,.1); border-color: var(--lk-gold-400); color: var(--lk-gold-400); }
.lk-faq__body{ padding-bottom: 20px; font-size: 15.5px; }

/* ---------- Blog ---------- */
.lk-blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .lk-blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .lk-blog-grid{ grid-template-columns: 1fr; } }
.lk-blog-card{ overflow: hidden; }
.lk-blog-card__thumb{ height: 160px; background: linear-gradient(135deg, var(--lk-gold-700), var(--lk-gold-500)); display: flex; align-items: center; justify-content: center; }
.lk-blog-card__body{ padding: 20px; }
.lk-blog-card__cat{ font-size: 11.5px; font-weight: 700; color: var(--lk-gold-400); text-transform: uppercase; letter-spacing: .04em; }
.lk-blog-card__title{ font-size: 19px; margin: 8px 0; }
.lk-blog-card__meta{ font-size: 12.5px; color: var(--lk-text-3); }
.lk-prose{ font-size: 15.5px; line-height: 1.85; color: var(--lk-text-2); max-width: 720px; }
.lk-prose h2{ font-size: 22px; margin: 32px 0 14px; color: var(--lk-text-1); }
.lk-prose h3{ font-size: 18px; margin: 24px 0 10px; color: var(--lk-text-1); }
.lk-prose p{ margin-bottom: 16px; }
.lk-prose ul{ margin: 0 0 16px; padding-left: 20px; }
.lk-prose li{ margin-bottom: 8px; }

/* ---------- Notification list ---------- */
.lk-notif{ display: flex; gap: 14px; padding: 16px; border-radius: 14px; transition: background .2s ease; }
.lk-notif:hover{ background: rgba(240,185,11,.05); }
.lk-notif--unread{ background: rgba(240,185,11,.07); }
.lk-notif__icon{ width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--lk-surface-3); border: 1px solid var(--lk-border); color: var(--lk-gold-400); }
.lk-notif__title{ font-size: 15.5px; font-weight: 700; color: var(--lk-text-1); }
.lk-notif__text{ font-size: 14.5px; margin-top: 2px; }
.lk-notif__time{ font-size: 11.5px; color: var(--lk-text-3); margin-top: 4px; }

/* ---------- Cms block (custom_header/footer authored rich text) ---------- */
.lk-cms-block{ padding: 32px; line-height: 1.75; color: var(--lk-text-2); }
.lk-cms-block h2, .lk-cms-block h3{ color: var(--lk-text-1); margin-top: 0; }

/* =====================================================================
   PROMO PANEL — side panel for tickets / addfunds pages
   ===================================================================== */
.lk-promo-panel{ position: relative; padding: 30px 26px; overflow: hidden; background: radial-gradient(circle at 15% 0%, rgba(240,185,11,.1) 0%, transparent 55%), var(--lk-surface-2); }
.lk-promo-panel__badge{ display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(240,185,11,.12); color: var(--lk-gold-400); margin-bottom: 16px; }
.lk-promo-panel__title{ font-family: var(--lk-font-display); font-size: 23px; font-weight: 800; letter-spacing: -0.01em; color: var(--lk-text-1); margin: 0 0 10px; }
.lk-promo-panel__text{ font-size: 15px; line-height: 1.7; color: var(--lk-text-2); margin: 0 0 24px; }
.lk-promo-panel .lk-timeline{ margin-bottom: 24px; }
.lk-promo-panel__stat-row{ display: flex; gap: 14px; margin-top: 4px; }
.lk-promo-panel__stat{ flex: 1; padding: 14px; border-radius: 14px; background: var(--lk-surface-3); border: 1px solid var(--lk-border); text-align: center; }
.lk-promo-panel__stat-value{ font-family: var(--lk-font-display); font-size: 20px; font-weight: 800; color: var(--lk-gold-400); }
.lk-promo-panel__stat-label{ font-size: 11px; color: var(--lk-text-3); font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }
.lk-promo-panel__discount{ display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; margin-bottom: 20px; background: linear-gradient(135deg, var(--lk-gold-600), var(--lk-gold-400)); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 16px 32px rgba(240,185,11,.22); }
.lk-promo-panel__discount-value{ font-family: var(--lk-font-display); font-size: 30px; font-weight: 800; color: #1a1000; line-height: 1; }
.lk-promo-panel__discount-text{ font-size: 12.5px; color: rgba(26,16,0,.75); font-weight: 700; line-height: 1.5; }

/* =====================================================================
   HOMEPAGE — hero, platform strip, features, process, live stats, CTA
   ===================================================================== */
.lk-hero__grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 980px){ .lk-hero__grid{ grid-template-columns: 1fr; gap: 40px; } }
.lk-hero__badge{ display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--lk-surface-2); border: 1px solid var(--lk-border-2); color: var(--lk-text-2); margin-bottom: 22px; }
.lk-hero__badge .lk-status-dot{ margin: 0; }
.lk-hero__title{ font-size: 54px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--lk-text-1); margin: 0 0 22px; }
.lk-hero__title em{ font-style: normal; color: var(--lk-gold-400); }
@media (max-width: 980px){ .lk-hero__title{ font-size: 38px; } }
@media (max-width: 480px){ .lk-hero__title{ font-size: 30px; } }
.lk-hero__lead{ font-size: 17px; line-height: 1.7; color: var(--lk-text-2); max-width: 540px; margin-bottom: 32px; }
.lk-hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.lk-hero__stats{ display: flex; gap: 32px; flex-wrap: wrap; }
.lk-hero__stat{ min-width: 92px; }
.lk-hero__stat-value{ font-family: var(--lk-font-display); font-size: 26px; font-weight: 800; color: var(--lk-text-1); }
.lk-hero__stat-label{ font-size: 12.5px; color: var(--lk-text-3); font-weight: 700; margin-top: 4px; }

/* Hero visual: fake "software" console panel */
.lk-hero__panel{ position: relative; border-radius: 22px; padding: 22px; background: linear-gradient(180deg, var(--lk-surface-2) 0%, var(--lk-surface-3) 100%); border: 1px solid var(--lk-border-2); box-shadow: var(--lk-shadow-md); }
.lk-hero__panel-dots{ display: flex; gap: 7px; margin-bottom: 16px; }
.lk-hero__panel-dots span{ width: 10px; height: 10px; border-radius: 50%; background: var(--lk-border-2); }
.lk-hero__panel-row{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border-radius: 12px; background: var(--lk-surface-3); border: 1px solid var(--lk-border); margin-bottom: 10px; font-size: 13px; }
.lk-hero__panel-row:last-child{ margin-bottom: 0; }
.lk-hero__panel-service{ display: flex; align-items: center; gap: 10px; color: var(--lk-text-1); font-weight: 700; }
.lk-hero__panel-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--lk-green-400); box-shadow: 0 0 0 3px rgba(91,204,134,.16); flex-shrink: 0; }
.lk-hero__panel-dot--busy{ background: var(--lk-gold-400); box-shadow: 0 0 0 3px rgba(240,185,11,.16); }
.lk-hero__panel-meta{ color: var(--lk-text-3); font-size: 12px; font-family: var(--lk-font-mono); }
.lk-hero__panel-bar{ height: 5px; border-radius: 4px; background: var(--lk-border); overflow: hidden; margin-top: 14px; }
.lk-hero__panel-bar span{ display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--lk-gold-500), var(--lk-gold-300)); animation: lkPanelBar 3.2s ease-in-out infinite; }
@keyframes lkPanelBar{ 0%{ width: 8%; } 45%{ width: 78%; } 70%{ width: 62%; } 100%{ width: 96%; } }
.lk-hero__panel-float{ position: absolute; right: -18px; bottom: -22px; padding: 14px 18px; border-radius: 16px; background: var(--lk-surface-2); border: 1px solid var(--lk-border-2); box-shadow: var(--lk-shadow-md); display: flex; align-items: center; gap: 12px; animation: lkFloatUp 5s ease-in-out infinite; }
@keyframes lkFloatUp{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
.lk-hero__panel-float-icon{ width: 34px; height: 34px; border-radius: 10px; background: rgba(240,185,11,.1); color: var(--lk-gold-400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 640px){ .lk-hero__panel-float{ right: 6px; bottom: -20px; padding: 10px 14px; } }

/* ---------- Hero login card (right column) ---------- */
.lk-hero__login-wrap{ position: relative; }
.lk-hero__login-wrap::before{ content: ''; position: absolute; inset: -40px; z-index: -1; border-radius: 40px; background: radial-gradient(circle at 70% 20%, rgba(240,185,11,.14), transparent 60%); filter: blur(8px); }
.lk-hero__login-wrap .lk-auth-card{ margin: 0 auto; max-width: 400px; animation: lkLoginPopIn .8s var(--lk-ease-spring) .15s both; }
@keyframes lkLoginPopIn{ 0%{ opacity: 0; transform: translateY(22px) scale(.96); } 100%{ opacity: 1; transform: translateY(0) scale(1); } }
.lk-hero__login-foot{ text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--lk-text-3); }
.lk-hero__login-foot a{ color: var(--lk-gold-400); font-weight: 700; }

/* ---------- Hero v2 — asymmetric composition, NOT a plain 2-col grid.
   Copy sits wide on the left; the login card is a floating panel that
   overlaps the copy column on a diagonal offset; stats become a full-
   width ledger strip with divider rules underneath both. ---------- */
.lk-hero2__top{ position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 0 24px; align-items: start; }
.lk-hero2__copy{ padding-top: 6px; }
.lk-hero2__login{ position: relative; margin-top: 34px; }
.lk-hero2__login-glow{ position: absolute; inset: -30px -20px; z-index: -1; border-radius: 32px; background: conic-gradient(from 220deg at 30% 20%, rgba(240,185,11,.22), rgba(43,217,168,.14), transparent 60%); filter: blur(26px); opacity: .8; }
.lk-hero2__login .lk-auth-card{ max-width: 400px; margin-left: auto; transform: rotate(-1.4deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), var(--lk-shadow-gold); animation: lkLoginPopIn .8s var(--lk-ease-spring) .15s both; }
.lk-hero2__login .lk-auth-card:hover{ transform: rotate(0deg) translateY(-2px); transition: transform .4s var(--lk-ease-spring); }
@media (max-width: 980px){
  .lk-hero2__top{ grid-template-columns: 1fr; }
  .lk-hero2__login{ margin-top: 40px; }
  .lk-hero2__login .lk-auth-card{ margin: 0 auto; transform: none; }
}

.lk-hero2__stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--lk-border);
  position: relative;
}
.lk-hero2__stat{ position: relative; padding: 0 24px; }
.lk-hero2__stat:first-child{ padding-left: 0; }
.lk-hero2__stat:not(:last-child)::after{ content: ''; position: absolute; top: 4px; right: 0; bottom: 4px; width: 1px; background: var(--lk-border); }
.lk-hero2__stat-value{ font-family: var(--lk-font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--lk-text-1); background: linear-gradient(135deg, var(--lk-text-1), var(--lk-gold-300)); -webkit-background-clip: text; background-clip: text; }
.lk-hero2__stat-label{ font-size: 13.5px; color: var(--lk-text-3); font-weight: 700; margin-top: 6px; }
@media (max-width: 767px){
  .lk-hero2__stats{ grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .lk-hero2__stat:nth-child(2)::after{ display: none; }
  .lk-hero2__stat:nth-child(odd){ padding-left: 0; }
}

/* Homepage-only full-viewport background canvas (gold embers + stars) */
.lk-hero-canvas{ position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Internal-page corner glow (calmer, static — non-homepage pages) */
.lk-bg-corner{ position: fixed; top: 0; left: 0; width: 620px; height: 620px; z-index: -1; pointer-events: none; overflow: hidden; }
.lk-bg-corner::before{ content:''; position:absolute; top:-220px; left:-220px; width:520px; height:520px; border-radius:50%; background: radial-gradient(circle, rgba(240,185,11,.16), transparent 68%); }
.lk-bg-corner__mark{ position:absolute; top:60px; left:60px; width:220px; height:220px; opacity:.05; color: var(--lk-gold-400); }
.lk-bg-star{ position:absolute; width:3px; height:3px; border-radius:50%; background: var(--lk-gold-300); opacity:0; animation: lkTwinkle 4.5s ease-in-out infinite; }
.lk-bg-star--1{ top:120px; left:260px; animation-delay:.2s; }
.lk-bg-star--2{ top:230px; left:150px; animation-delay:1.4s; }
.lk-bg-star--3{ top:80px; left:380px; animation-delay:2.6s; }
.lk-bg-star--jade{ background: var(--lk-jade-300); }
@keyframes lkTwinkle{ 0%,100%{opacity:0;transform:scale(.6);} 50%{opacity:.7;transform:scale(1.3);} }
@media (max-width: 767px){ .lk-bg-corner{ width: 340px; height: 340px; } .lk-bg-corner__mark{ width: 140px; height: 140px; } }

/* ---------- Info grid (4 boxes under hero) ---------- */
.lk-info-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px){ .lk-info-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lk-info-grid{ grid-template-columns: 1fr; } }
.lk-info-card{ padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--lk-ease-spring), border-color .25s ease; }
.lk-info-card__icon{ width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(240,185,11,.1); color: var(--lk-gold-400); }
.lk-info-card__title{ font-size: 18px; font-weight: 700; color: var(--lk-text-1); }
.lk-info-card__text{ font-size: 15px; line-height: 1.6; color: var(--lk-text-2); margin: 0; }
.lk-info-card--orders .lk-info-card__icon{ background: rgba(91,204,134,.14); color: var(--lk-green-400); }
.lk-info-card__orders-big{ font-family: var(--lk-font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--lk-text-1); margin: 2px 0 6px; }
a.lk-info-card--link{ text-decoration: none; cursor: pointer; }
a.lk-info-card--link:hover{ transform: translateY(-4px); border-color: var(--lk-gold-400); box-shadow: var(--lk-shadow-md), 0 0 0 1px rgba(240,185,11,.12); }
a.lk-info-card--link .lk-info-card__icon{ background: linear-gradient(135deg, var(--lk-gold-400), var(--lk-gold-600)); color: #1a1000; }
.lk-info-card__cta{ margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--lk-gold-400); }
.lk-info-card__cta svg{ transition: transform .25s var(--lk-ease-spring); }
a.lk-info-card--link:hover .lk-info-card__cta svg{ transform: translateX(3px); }

/* Bento variant — used only for the homepage's 4 trust/stat boxes so the
   grid reads as an asymmetric bento layout, not four identical tiles. */
.lk-info-grid--bento{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "a b b" "a c d";
  gap: 16px;
}
.lk-bento-a{ grid-area: a; }
.lk-bento-b{ grid-area: b; }
.lk-bento-c{ grid-area: c; }
.lk-bento-d{ grid-area: d; }
.lk-info-grid--bento .lk-info-card--orders{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.lk-info-grid--bento .lk-info-card--orders .lk-info-card__icon{ order: 1; }
.lk-info-grid--bento .lk-info-card--orders .lk-info-card__title{ order: 2; }
.lk-info-grid--bento .lk-info-card--orders .lk-info-card__orders-big{ order: 4; flex: 0 0 auto; margin: 0; font-size: 40px; }
.lk-info-grid--bento .lk-info-card--orders .lk-info-card__text{ order: 3; flex: 1 1 220px; margin: 0; }
@media (max-width: 980px){
  .lk-info-grid--bento{ grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b b" "c d"; }
}
@media (max-width: 640px){
  .lk-info-grid--bento{ grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
  .lk-info-grid--bento .lk-info-card--orders{ flex-direction: column; align-items: flex-start; }
  .lk-info-grid--bento .lk-info-card--orders .lk-info-card__orders-big{ font-size: 30px; }
}

/* ---------- Platform strip (trust bar) ---------- */
.lk-platform-strip{ display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 28px 0; border-top: 1px solid var(--lk-border); border-bottom: 1px solid var(--lk-border); }

/* ---------- Payment method trust chips (homepage) ---------- */
.lk-paymethods-row{ display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lk-paymethod-chip{
  display: flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px;
  background: var(--lk-surface-2); border: 1px solid var(--lk-border); font-size: 14.5px; font-weight: 700; color: var(--lk-text-2);
  transition: transform .2s var(--lk-ease-spring), border-color .2s ease, color .2s ease;
}
.lk-paymethod-chip:hover{ transform: translateY(-2px); border-color: var(--lk-border-2); color: var(--lk-text-1); }
.lk-paymethod-chip__dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Testimonials ---------- */
.lk-testi-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px){ .lk-testi-grid{ grid-template-columns: 1fr; } }
.lk-testi-card{ padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.lk-testi-card__stars{ color: var(--lk-gold-400); font-size: 14px; letter-spacing: .1em; }
.lk-testi-card__text{ font-size: 15.5px; line-height: 1.65; color: var(--lk-text-1); margin: 0; }
.lk-testi-card__author{ font-size: 13px; font-weight: 700; color: var(--lk-text-3); margin-top: auto; }
.lk-platform-chip{ display: flex; align-items: center; gap: 9px; color: var(--lk-text-3); font-weight: 700; font-size: 14px; transition: color .2s ease, transform .2s ease; }
.lk-platform-chip:hover{ color: var(--lk-text-1); transform: translateY(-2px); }
.lk-platform-chip svg{ width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Feature grid ---------- */
.lk-feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .lk-feature-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .lk-feature-grid{ grid-template-columns: 1fr; } }
.lk-feature-card{ padding: 26px; transition: transform .3s var(--lk-ease-spring), border-color .25s ease; }
.lk-feature-card:hover{ transform: translateY(-4px); border-color: var(--lk-border-2); }
.lk-feature-card__icon{ width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px; background: rgba(240,185,11,.1); color: var(--lk-gold-400); display: flex; align-items: center; justify-content: center; }
.lk-feature-card__title{ font-size: 19px; font-weight: 700; color: var(--lk-text-1); margin: 0 0 8px; }
.lk-feature-card__text{ font-size: 15.5px; line-height: 1.65; color: var(--lk-text-2); margin: 0; }

/* Bento variant — one wide "hero" tile + alternating gold/jade accents so
   the grid isn't six visually-identical boxes. */
.lk-feature-grid--bento{ grid-template-columns: repeat(3, 1fr); }
.lk-feature-card--wide{ grid-column: span 2; }
.lk-feature-grid--bento .lk-feature-card:nth-child(3n+2) .lk-feature-card__icon,
.lk-feature-grid--bento .lk-feature-card:nth-child(3n+2) .lk-nav__link.is-active{ background: rgba(43,217,168,.12); color: var(--lk-jade-400); }
.lk-feature-grid--bento .lk-feature-card--wide .lk-feature-card__title{ font-size: 22px; }
@media (max-width: 900px){ .lk-feature-card--wide{ grid-column: span 2; } }
@media (max-width: 640px){ .lk-feature-card--wide{ grid-column: span 1; } }

/* ---------- Live stat strip ---------- */
.lk-livebar{ display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 10px 18px; border-radius: 999px; margin: 0 auto 48px; width: fit-content; background: var(--lk-surface-2); border: 1px solid var(--lk-border-2); font-size: 12.5px; color: var(--lk-text-2); }

/* ---------- Process / how it works ---------- */
.lk-process{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px){ .lk-process{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lk-process{ grid-template-columns: 1fr; } }
.lk-process__step{ position: relative; padding: 26px 22px; }
.lk-process__num{ font-family: var(--lk-font-display); font-size: 13px; font-weight: 800; color: var(--lk-gold-400); background: rgba(240,185,11,.1); width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lk-process__title{ font-size: 18px; font-weight: 700; color: var(--lk-text-1); margin: 0 0 6px; }
.lk-process__text{ font-size: 15px; line-height: 1.6; color: var(--lk-text-2); margin: 0; }

/* ---------- Platform / service pillar tiles (SEO cards) ---------- */
.lk-platform-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
@media (max-width: 560px){ .lk-platform-grid{ grid-template-columns: repeat(2, 1fr); } }
.lk-platform-tile{ display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 16px; border-radius: 16px; background: var(--lk-surface-2); border: 1px solid var(--lk-border); transition: transform .3s var(--lk-ease-spring), border-color .25s ease, background .25s ease; }
.lk-platform-tile:hover{ transform: translateY(-4px); border-color: var(--lk-gold-400); background: var(--lk-surface-3); }
.lk-platform-tile__icon{ width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.lk-platform-tile__name{ font-size: 16px; font-weight: 700; color: var(--lk-text-1); margin: 0; }
.lk-platform-tile__desc{ font-size: 14px; line-height: 1.55; color: var(--lk-text-2); margin: 0; }

/* ---------- CTA band ---------- */
.lk-cta-band{ position: relative; border-radius: 28px; padding: 64px 48px; text-align: center; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(240,185,11,.22) 0%, transparent 55%), radial-gradient(circle at 80% 90%, rgba(75,97,240,.16) 0%, transparent 50%), var(--lk-bg-2); border: 1px solid var(--lk-border-2); }
.lk-cta-band h2{ font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; position: relative; z-index: 1; }
.lk-cta-band p{ font-size: 15.5px; color: rgba(255,255,255,.72); max-width: 480px; margin: 0 auto 30px; position: relative; z-index: 1; }
.lk-cta-band .lk-hero__actions{ justify-content: center; margin-bottom: 0; position: relative; z-index: 1; }
@media (max-width: 640px){ .lk-cta-band{ padding: 44px 24px; } .lk-cta-band h2{ font-size: 24px; } }

/* View / description button */
.lk-btn--view{ background: linear-gradient(135deg, var(--lk-blue-400), #6f83ff); border-color: transparent; color: #fff; box-shadow: 0 2px 4px rgba(75,97,240,.12), 0 8px 18px rgba(75,97,240,.24); }
.lk-btn--view:hover{ filter: brightness(1.08); border-color: transparent; }
.lk-btn--xs{ padding: 6px 12px; font-size: 12px; border-radius: 9px; }
.lk-btn.disabled, .lk-btn:disabled{ opacity: .5; cursor: not-allowed; pointer-events: none; }

/* =====================================================================
   PERFECTPANEL CORE / LEGACY COMPATIBILITY CLASSES
   Structural classes PerfectPanel's core platform and/or admin-authored
   rich text (service descriptions, ticket bodies, CMS pages) may render
   directly. Kept close to stock so core behavior is never broken; a few
   hardcoded colors were swapped for lk- theme variables.
   ===================================================================== */
.StripeElement{ box-sizing: border-box; height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; background-color: var(--lk-surface-3); box-shadow: 0 1px 3px 0 rgba(0,0,0,.12); transition: box-shadow 150ms ease; }
.StripeElement--focus{ box-shadow: 0 1px 3px 0 #cfd7df; }
.StripeElement--invalid{ border-color: #fa755a; }
.StripeElement--webkit-autofill{ background-color: #fefde5 !important; }
.navbar-brand{ float: left; padding: 0 15px; font-size: 18px; line-height: 48px; height: 50px; }
.navbar-brand img{ display: inline-block; max-width: 100%; max-height: 51px; margin-top: -1px; vertical-align: middle; }
.navbar-collapsed-before .navbar-header{ width: 100%; }
.navbar-collapsed-before .navbar-toggle{ display: block; }
.navbar-collapsed-before .navbar-nav{ width: 100%; }
.navbar-collapsed-before .navbar-nav li{ width: 100%; }
.navbar-collapsed-before .navbar-nav li a{ padding-top: 10px; padding-bottom: 10px; }
.navbar-collapsed-before .navbar-right{ width: 100%; float: left !important; }
.mass-alert{ margin-bottom: 20px; }
.mass-alert .alert{ margin-bottom: 0px; border-radius: 0px; }
.mass-alert .alert:first-child{ border-top-left-radius: 5px; border-top-right-radius: 5px; }
.mass-alert .alert:last-child{ border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.dropdown-max-height{ max-height: 300px; overflow-y: auto; }
.titcket-title{ font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--lk-border); margin-bottom: 10px; }
.ticket-message-right .ticket-message,
.ticket-message-left .ticket-message{ background: var(--lk-surface-3); border-radius: 5px; padding: 15px; }
.ticket-message-block{ margin-bottom: 15px; }
.ticket-message{ word-break: break-word; }
.ticket-message p, .ticket-message blockquote, .ticket-message li{ white-space: pre-wrap; }
.ticket-message blockquote{ font-size: 14px; border-left: 3px solid var(--lk-gold-400); padding: 2px 8px; margin-bottom: 12px; }
.ticket-message hr{ border-top: 1px solid var(--lk-border-2); }
body{ padding-bottom: 50px; }
.nowrap{ white-space: nowrap; }
.width-40{ width: 40% !important; word-break: break-all; min-width: 250px; }
.width-service-name{ min-width: 200px; }
.service-description table{ width: auto!important; }
.service-description{ word-break: break-word; }
.service-description__th{ width: 40% !important; word-break: break-all; }
.description{ border-bottom: 2px solid var(--lk-border-2); }
.terms{ margin-top: 0px; margin-bottom: 20px; }
.api h1, .api h2, .api h3, .api pre{ margin-top: 0px; margin-bottom: 20px; }
.api h4, .api h5, .api h6, .api form{ margin-top: 0px; margin-bottom: 10px; }
.link{ word-break: break-all; min-width: 200px; }
.search{ width: 250px; }
.nav-pills{ margin-bottom: 10px; }
.pagination{ margin: 0px; }
.well-float{ float: left; width: 100%; }
.pull-right-middle{ line-height: 40px; }
.modal-body-scroller{ max-height: 500px; overflow: auto; border-radius: 6px; }
.navbar-toggle{ margin-right: 15px; }
.border-solid{ border: 1px solid var(--lk-border-2); }
.border-rounded{ border-radius: 4px; overflow-wrap: break-word; word-wrap: break-word; background: var(--lk-surface-3); }
.form-group__password{ position: relative; }
.forgot-password{ position: absolute; right: 11px; bottom: 7px; }
.confirm-email{ margin-top: 30px; }
.confirm-email__description{ margin-bottom: 24px; }
.navbar-icon{ margin: 0px 3px; }
.order-actions{ width: 92px; }
@media(max-width: 1200px){ .order-actions{ width: auto; } .order-actions .btn{ margin-bottom: 2px; } }

/* ---------- Modals (Bootstrap 3 .modal JS drives show/hide) ---------- */
.modal-content{ background: var(--lk-surface-2); border: 1px solid var(--lk-border); border-radius: 20px; box-shadow: var(--lk-shadow-md); color: var(--lk-text-1); }
.modal-header{ border-bottom: 1px solid var(--lk-border); padding: 20px 24px; }
.modal-header .modal-title{ font-family: var(--lk-font-display); font-size: 18px; font-weight: 700; color: var(--lk-text-1); }
.modal-header .close{ color: var(--lk-text-2); opacity: .8; text-shadow: none; }
.modal-header .close:hover{ color: var(--lk-text-1); opacity: 1; }
.modal-body{ padding: 24px; }
.modal-footer{ border-top: 1px solid var(--lk-border); padding: 16px 24px; }
.modal-backdrop{ background: #05070a; }
.modal-backdrop.in{ opacity: .72; }

/* ---------- Ticket file uploader ---------- */
.tickets-uploader{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; cursor: pointer; border: 1px dashed var(--lk-border-2); color: var(--lk-text-2); font-size: 13px; font-weight: 700; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.tickets-uploader:hover{ border-color: var(--lk-gold-400); color: var(--lk-text-1); background: rgba(240,185,11,.08); }
.tickets-uploader::before{ content: '📎'; font-size: 14px; }

/* ---------- Notification matrix table ---------- */
.lk-notif-matrix th, .lk-notif-matrix td{ text-align: center; }
.lk-notif-matrix th:first-child, .lk-notif-matrix td:first-child{ text-align: left; }
.lk-notif-matrix input[type="checkbox"]{ width: 17px; height: 17px; accent-color: var(--lk-gold-400); cursor: pointer; }

/* =====================================================================
   RTL (mirrors PerfectPanel's stock rtl-* classes; unchanged behavior)
   ===================================================================== */
.rtl-navbar{ direction: rtl; }
.rtl-navbar .navbar-header{ float: right; }
.rtl-navbar .navbar-right{ float: left !important; margin-right: -15px; }
.rtl-navbar .navbar-nav{ float: right; padding-right: 5px; margin-right: 15px; }
.rtl-navbar .navbar-nav li{ float: right; }
.rtl-navbar .navbar-toggle{ float: left; }
.rtl-navbar .navbar-brand{ float: right; padding-right: 15px; }
.rtl-form{ direction: rtl; }
.rtl-form input{ direction: rtl; text-align: right; }
.rtl-form .checkbox label{ padding-right: 20px; padding-left: 0px; }
.rtl-form .checkbox input[type="checkbox"]{ right: 0; }
.rtl-form .forgot-password{ right: auto; left: 11px; }
.rtl-form .close{ float: left; right: 0; top: 0px; }
.rtl-form .pull-right{ float: left !important; padding-right: 0px; }
.rtl-form .pull-right-padding{ padding-left: 5px; float: left !important; }
.rtl-content{ direction: rtl; }
.rtl-table{ direction: rtl; }
.rtl-table th{ text-align: right; }
.rtl-table td{ text-align: right; }
.rtl-h{ direction: rtl; text-align: right; }
.rtl-btn{ float: right; }
.rtl-content h1, .rtl-content h2, .rtl-content h3, .rtl-content h4, .rtl-content h5, .rtl-content h6{ text-align: right; }
.rtl-content ul, .rtl-content ol{ padding-right: 15px; }
.rtl-ul{ text-align: right; direction: rtl; padding-right: 15px; }
.rtl-alert{ text-align: right; direction: rtl; }
.rtl-alert .close{ float: left; right: 0; top: 0px; }
.rtl-pagination{ float: right; }
.rtl-pagination li{ float: right; }
.rtl-nav{ float: right; direction: rtl; width: 100%; padding-right: 0px; }
.rtl-nav li{ float: right; }
.rtl-nav .pull-right{ float: left !important; }
.rtl-search{ direction: rtl; }
.rtl-modal{ direction: rtl; }
.rtl-modal .close{ float: left; }
.rtl-modal .modal-footer{ text-align: left; }

@media(min-width: 991px){ .service-name{ max-width: 320px; word-break: break-word; } .text-md-right{ text-align: right; } }
@media (max-width: 991px){ .well-float{ width: auto; min-width: 100%; } }
@media (max-width: 768px){
  .rtl-navbar .navbar-nav{ float: right !important; width: 100%; margin-right: 0px; }
  .rtl-navbar .navbar-nav li{ width: 100%; }
  .rtl-navbar .navbar-header{ float: none; margin-right: 0px; }
  .rtl-navbar .navbar-brand{ float: right; padding-right: 15px; }
  .navbar-collapsed-before .navbar-header{ width: auto; }
}