:root{
  --bg:#070806;
  --bg-2:#0d0e0b;
  --surface:rgba(19,20,16,.78);
  --surface-strong:#12130f;
  --surface-soft:#171812;
  --line:rgba(226,211,166,.12);
  --line-strong:rgba(226,211,166,.25);
  --text:#f7f3e9;
  --muted:#999b91;
  --subtle:#6f7168;
  --white:#fff;
  --shadow:0 30px 90px rgba(0,0,0,.48);
  --shadow-soft:0 18px 60px rgba(0,0,0,.32);
  --blur:28px;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -16%,rgba(255,255,255,.13),transparent 28%),
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.035),transparent 28%),
    linear-gradient(180deg,#08080a 0%,#050506 34%,#040405 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 78%);
}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}
.logo{font-size:22px;font-weight:900;letter-spacing:-.055em}
.logo span{font-weight:350;opacity:.72}
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(var(--blur)) saturate(125%);
}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  color:#c7c7cf;
  font-size:12px;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.85)}
.primary,.secondary{
  border-radius:999px;padding:13px 19px;font-weight:780;border:1px solid var(--line);
  transition:.22s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.primary{background:#fff;color:#050506;box-shadow:0 8px 30px rgba(255,255,255,.08)}
.secondary{background:rgba(255,255,255,.035);color:#eee}
.primary:hover,.secondary:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.orb{
  position:relative;
  width:190px;height:190px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 23%,#fff 0,#d5d5da 7%,#8b8b92 15%,#34343a 31%,#111116 54%,#050507 72%,#000 100%);
  box-shadow:
    inset -30px -32px 64px rgba(0,0,0,.92),
    inset 18px 16px 28px rgba(255,255,255,.10),
    0 35px 110px rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.14);
  display:grid;place-items:center;
}
.orb:before{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.11),transparent 62%);
  filter:blur(26px);z-index:-1;
}
.orb:after{
  content:"";position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 35px rgba(255,255,255,.035);
}
.orb b{font-size:72px;color:#0c0c0f;font-weight:700;text-shadow:0 1px 1px rgba(255,255,255,.7)}
.muted{color:var(--muted)}.small{font-size:12px}.hidden{display:none!important}


/* ===== VELMIN 3.4 GLASS MOTION ===== */
:root{
  --glass-bg:rgba(18,18,24,.54);
  --glass-bg-strong:rgba(18,18,24,.72);
  --glass-line:rgba(255,255,255,.10);
  --glass-highlight:rgba(255,255,255,.055);
  --ease-spring:cubic-bezier(.2,.85,.25,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

*{
  -webkit-tap-highlight-color:transparent;
}

body{
  overflow-x:hidden;
}

.glass{
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    rgba(8,8,11,.44);
  border:1px solid var(--glass-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 28px 80px rgba(0,0,0,.42);
  backdrop-filter:blur(28px) saturate(135%);
  -webkit-backdrop-filter:blur(28px) saturate(135%);
}

.primary,.secondary,.pill,.glass{
  transition:
    transform .28s var(--ease-spring),
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    opacity .28s ease;
}

.primary:active,.secondary:active{
  transform:scale(.97);
}

.orb{
  animation:velminFloat 6.5s ease-in-out infinite,velminGlow 5s ease-in-out infinite;
  will-change:transform,filter;
}

.orb:after{
  animation:velminRing 7s linear infinite;
}

@keyframes velminFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.018)}
}

@keyframes velminGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%{filter:drop-shadow(0 0 24px rgba(255,255,255,.10))}
}

@keyframes velminRing{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes glassIn{
  from{opacity:0;transform:scale(.97);filter:blur(8px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}

@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

.hidden{
  display:none!important;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.26s;
  animation-timing-function:var(--ease-soft);
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ===== VELMIN 5.13 SIGNATURE UI ===== */
:root{--velmin-gold:#d8c99f;--velmin-cream:#f7f3e9;--velmin-ink:#080906}
body{background:radial-gradient(circle at 72% -8%,rgba(216,201,159,.09),transparent 27%),radial-gradient(circle at 18% 14%,rgba(216,201,159,.035),transparent 24%),linear-gradient(180deg,#0b0c09 0%,#070806 44%,#050604 100%)}
body:before{background-image:linear-gradient(rgba(216,201,159,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(216,201,159,.018) 1px,transparent 1px)}
.logo{color:var(--velmin-cream);letter-spacing:-.045em}.dot{background:var(--velmin-gold);box-shadow:0 0 18px rgba(216,201,159,.55)}
.primary{background:var(--velmin-cream);color:var(--velmin-ink)}
.glass{background:linear-gradient(145deg,rgba(216,201,159,.065),rgba(255,255,255,.015)),rgba(10,11,8,.62);border-color:rgba(216,201,159,.13)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(216,201,159,.62);outline-offset:2px}


/* ===== VELMIN 5.15 MOBILE HARDENING ===== */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:820px){
 .main,.viewport,.center,.velmin-home{min-width:0;max-width:100%}
 .viewport{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 .classic-top{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .classic-hero{min-height:auto;gap:12px}.classic-hero-copy{min-width:0}.classic-hero-copy>p{font-size:14px;line-height:1.55}
 .classic-composer-wrap{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));width:100%;max-width:100%;z-index:30}
 .classic-composer{display:grid;grid-template-columns:40px minmax(0,1fr) 46px;align-items:end;width:100%;max-width:100%;min-width:0;padding:9px;gap:7px;box-sizing:border-box}
 .classic-composer textarea{grid-column:2;min-width:0;width:100%;padding:10px 4px 18px;box-sizing:border-box;font-size:16px}
 .classic-composer .composer-plus{grid-column:1;grid-row:1;width:40px;height:40px;margin:0}
 .classic-composer .send{grid-column:3;grid-row:1;width:44px;height:44px;min-width:44px;margin:0;display:grid;place-items:center;visibility:visible;opacity:1;position:relative;right:auto}
 .composer-meta{left:57px;right:55px;bottom:7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .quick-grid{grid-template-columns:1fr 1fr;gap:8px}.quick-card{min-width:0}
 .energy-wallet,.ritual-banner,.life-grid,.friends-page{max-width:100%;min-width:0}
 img,video,canvas{max-width:100%;height:auto}
}
@media(max-width:480px){
 .classic-hero h1 strong{font-size:clamp(36px,12vw,44px)}.classic-hero h1 em{font-size:clamp(31px,10.5vw,39px);line-height:1.05}
 .classic-actions{display:none}.quick-grid{grid-template-columns:1fr 1fr}.quick-card{padding:14px 12px}.quick-card small{font-size:10px}
 .mobilebar{max-width:100vw}.top{min-width:0}
}


/* ===== VELMIN 5.15.2 POLISH / PERFORMANCE / SETTINGS ===== */
.settings-page{width:min(1040px,100%);margin-inline:auto;padding:clamp(22px,3vw,42px)!important}
.settings-page>h2{font-size:clamp(34px,4vw,52px)!important;letter-spacing:-.045em;margin:0 0 8px}
.settings-page>.sub{font-size:15px;line-height:1.6;margin-bottom:30px}
.settings-page .section-title{font-size:11px;letter-spacing:.18em;margin:30px 0 12px;color:#cdbf98}
.settings-page .setting-group{border-radius:22px!important;overflow:hidden;border:1px solid rgba(232,215,165,.16)!important;background:linear-gradient(145deg,rgba(232,215,165,.045),rgba(255,255,255,.012))!important}
.settings-page .setting{min-height:76px!important;padding:16px 20px!important;gap:20px}
.settings-page .setting b{font-size:16px!important;line-height:1.25}
.settings-page .setting small{font-size:12px!important;line-height:1.45;margin-top:5px;display:block}
.settings-page select,.settings-page input[type=text],.settings-page textarea{min-height:46px!important;font-size:15px!important;border-radius:12px!important}
.settings-page input[type=checkbox]{width:22px;height:22px;accent-color:#e8d7a5}
.settings-page>.action{min-height:52px;padding:0 22px;font-size:15px;border-radius:14px;margin-top:22px}
/* render-heavy offscreen pages are skipped until needed */
.page.hidden{content-visibility:hidden;contain:layout style paint}
.quick-card,.energy-wallet,.ritual-banner,.setting-group{contain:layout paint}
@media(max-width:820px){
  body:before{display:none}
  .classic-top,.classic-composer,.glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .classic-composer{background:rgba(10,14,14,.985)!important}
  .settings-page{padding:20px 14px calc(110px + env(safe-area-inset-bottom))!important}
  .settings-page>h2{font-size:36px!important}
  .settings-page .setting{min-height:72px!important;padding:15px 14px!important}
  .settings-page .setting b{font-size:15px!important}
  .settings-page select,.settings-page input[type=text]{max-width:48%;min-width:132px}
  }
@media(max-width:480px){
  .settings-page .setting{align-items:center}
  .settings-page .section-title{margin-top:24px}
}

/* Velmin 5.15.3 — premium monogram + settings/mobile polish */
#settings.page.active .settings-wrap,#settings.page.active .settings-panel,.settings-wrap,.settings-panel{max-width:1120px!important}
#settings h2{font-size:clamp(34px,4vw,54px)!important;letter-spacing:-.045em}
#settings label,#settings .setting-row{font-size:16px!important}
#settings select,#settings input,#settings textarea{min-height:52px!important;font-size:16px!important;border-radius:14px!important}
@media(max-width:760px){.classic-brand{gap:10px}.brand-mark{width:36px;height:36px;border-radius:12px}.classic-brand b{font-size:23px}#settings h2{font-size:34px!important}#settings select,#settings input,#settings textarea{width:100%!important;max-width:100%!important}.composer{max-width:calc(100vw - 20px)!important;margin-left:auto!important;margin-right:auto!important}.composer-row,.composer-actions{min-width:0!important}.composer button{flex:0 0 auto}body{overflow-x:hidden!important}}