/* GayFriends.ro — design „Obsidian Prism”
   Fonturi găzduite local: Plus Jakarta Sans (titluri, text) + Inter (etichete, meta). */
@font-face { font-family: "Jakarta"; src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jakarta"; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --canvas: #0B0E14;
  --s1: #151A23;
  --s2: #1E2430;
  --s3: #272E3C;
  --glass: rgba(21, 26, 35, .74);
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .1);
  --line-3: rgba(255, 255, 255, .16);
  --text: #F8FAFC;
  --text-2: #94A3B8;
  --text-3: #64748B;
  --coral: #F43F5E;
  --orange: #FB923C;
  --yellow: #FACC15;
  --green: #10B981;
  --cyan: #06B6D4;
  --violet: #8B5CF6;
  --pink-soft: #FFB2B7;
  --online: #22C55E;
  --danger: #FB7185;
  --spectrum: linear-gradient(135deg, #F43F5E 0%, #FB923C 25%, #FACC15 45%, #10B981 65%, #06B6D4 82%, #8B5CF6 100%);
  --grad-cta: linear-gradient(90deg, #F43F5E 0%, #A855F7 55%, #06B6D4 100%);
  --grad-spark: linear-gradient(90deg, #F43F5E 0%, #8B5CF6 100%);
  --grad-mine: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
  --grad-text: linear-gradient(90deg, #FDA4AF 0%, #D8B4FE 50%, #67E8F9 100%);
  --glow: 0 0 24px -2px rgba(139, 92, 246, .35), 0 0 40px -4px rgba(244, 63, 94, .2);
  --lift: 0 12px 32px -4px rgba(0, 0, 0, .5);

  --f-head: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-label: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --topbar: 68px;
  --sidebar: 264px;
  --tabbar: 66px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--s3) transparent; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font: 400 15px/1.6 var(--f-head); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p a, .prose a, .link { color: var(--pink-soft); }
p a:hover, .prose a:hover, .link:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(139, 92, 246, .5); }
h1, h2, h3, h4 { margin: 0 0 10px; font-family: var(--f-head); color: var(--text); }
h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; }
h2 { font-size: clamp(22px, 2.4vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
h3 { font-size: 18px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
p { margin: 0 0 14px; max-width: 70ch; }
small, .small { font-size: 13px; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.label { font: 600 12px/1.3 var(--f-label); letter-spacing: .02em; color: var(--text-2); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-sm { width: 16px; height: 16px; flex: none; }

/* ============================================================ CARCASĂ */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar);
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: rgba(11, 14, 20, .82); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--f-head); letter-spacing: -0.02em; white-space: nowrap; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2), var(--glow); }
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-name small { font-weight: 600; font-size: 13px; -webkit-text-fill-color: var(--text-3); }
.top-search { position: relative; flex: 0 1 300px; display: none; }
.top-search input { height: 40px; min-height: 40px; padding: 0 14px 0 40px; border-radius: var(--r-full); background: var(--s1); font-size: 14px; }
.top-search .ico { position: absolute; left: 14px; top: 10px; color: var(--text-3); }
.top-nav { display: none; gap: 4px; }
.top-nav a { position: relative; padding: 8px 12px; font: 600 14.5px/1 var(--f-head); color: var(--text-2); border-radius: var(--r-full); }
.top-nav a:hover { color: var(--text); }
.top-nav a[aria-current="page"] { color: var(--text); }
.top-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -4px; height: 2px; border-radius: 2px; background: var(--grad-spark); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-full); font: 600 13px/1 var(--f-label); color: #A5F3FC; background: rgba(6, 182, 212, .08); border: 1px solid rgba(6, 182, 212, .25); white-space: nowrap; }
.live-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--canvas); }
.avatar-ring { display: inline-block; padding: 2px; border-radius: 50%; background: var(--spectrum); }
.avatar-ring img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--canvas); }
.points-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: var(--r-full); background: var(--s1); border: 1px solid var(--line-2); font: 600 13px/1 var(--f-label); white-space: nowrap; }
.points-pill i { width: 14px; height: 14px; border-radius: 50%; background: var(--spectrum); box-shadow: 0 0 10px rgba(139, 92, 246, .6); }

.layout { display: block; }
.sidebar { display: none; }
.main { min-width: 0; padding: 20px 16px calc(var(--tabbar) + 36px); }
.container { max-width: 1360px; margin: 0 auto; }

@media (min-width: 900px) {
  .top-search { display: block; }
}
@media (min-width: 1100px) {
  .top-nav { display: flex; }
}
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar { display: flex; flex-direction: column; gap: 6px; position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto; padding: 16px 16px 16px; border-right: 1px solid var(--line); }
  .main { padding: 24px 32px 56px; }
  .tabbar, .mobile-only { display: none !important; }
}
@media (min-width: 1440px) { .main { padding: 28px 48px 64px; } }

.me-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); margin-bottom: 12px; }
.me-card .av { position: relative; flex: none; }
.me-card .av img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.me-card .av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); border: 2px solid var(--s1); }
.me-card b { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card span { font: 500 12px/1.3 var(--f-label); color: var(--text-2); }
.side-nav { display: grid; gap: 4px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); font: 600 14.5px/1.2 var(--f-head); color: var(--text-2); border-left: 2px solid transparent; }
.side-nav a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.side-nav a[aria-current="page"] { background: var(--s1); color: var(--text); border-left-color: var(--coral); box-shadow: inset 0 0 0 1px var(--line); }
.side-nav a[aria-current="page"] .ico { color: var(--pink-soft); }
.side-nav .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full); display: grid; place-items: center; font: 700 11.5px/1 var(--f-label); background: var(--coral); color: #fff; }
.side-nav .count.soft { background: var(--s2); color: var(--text-2); }
.side-upload { margin-top: 10px; }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.side-foot a, .side-foot button { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: var(--r-md); font: 500 13.5px/1.2 var(--f-head); color: var(--text-2); background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.side-foot a:hover, .side-foot button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }

.tabbar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; height: var(--tabbar);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--glass); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--line-2); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--lift);
}
.tabbar a { position: relative; display: grid; justify-items: center; gap: 3px; font: 600 10.5px/1 var(--f-label); color: var(--text-3); }
.tabbar a[aria-current="page"] { color: var(--text); }
.tabbar a[aria-current="page"] .ico { color: var(--pink-soft); }
.tabbar .count { position: absolute; top: -6px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); display: grid; place-items: center; font: 700 10.5px/1 var(--f-label); background: var(--coral); color: #fff; }

.menu-pop { position: relative; }
.menu-pop > summary { list-style: none; cursor: pointer; }
.menu-pop > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; z-index: 60; right: 0; top: calc(100% + 10px); min-width: 240px; padding: 6px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid var(--line-2); box-shadow: var(--lift); }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font: 600 14px/1.3 var(--f-head); background: none; border: 0; color: var(--text); cursor: pointer; }
.menu-list a:hover, .menu-list button:hover { background: rgba(255, 255, 255, .06); }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px; }
.menu-list .danger { color: var(--danger); }

/* ============================================================ BUTOANE */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: var(--r-full); border: 1px solid var(--line-2); cursor: pointer; white-space: nowrap;
  font: 700 14.5px/1 var(--f-head); color: var(--text); background: rgba(30, 36, 48, .6);
  transition: filter .15s, box-shadow .2s, background .15s, transform .1s;
}
.btn:hover { background: var(--s3); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--grad-cta); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--grad-cta); filter: brightness(1.1); box-shadow: 0 4px 20px rgba(244, 63, 94, .4); }
.btn-spark { background: var(--grad-spark); border-color: transparent; color: #fff; }
.btn-spark:hover { background: var(--grad-spark); filter: brightness(1.1); box-shadow: 0 4px 20px rgba(244, 63, 94, .35); }
.btn-coral { background: linear-gradient(90deg, #F43F5E, #EC4899); border-color: transparent; color: #fff; }
.btn-coral:hover { background: linear-gradient(90deg, #F43F5E, #EC4899); filter: brightness(1.1); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.btn-outline { background: transparent; }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(251, 113, 133, .35); }
.btn-danger:hover { background: rgba(251, 113, 133, .1); }
.btn-sm { min-height: 36px; padding: 0 15px; font-size: 13.5px; }
.btn-xs { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-round { width: 46px; padding: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.linkish { background: none; border: 0; padding: 0; color: var(--pink-soft); font: inherit; cursor: pointer; }

/* ============================================================ FORMULARE */
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > label, .field .label-row { font: 600 13.5px/1.3 var(--f-head); color: var(--text); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.label-row .aside { font: 600 12px/1 var(--f-label); color: var(--cyan); }
.hint { font: 400 12.5px/1.45 var(--f-head); color: var(--text-3); }
.hint.err { color: var(--danger); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: var(--s1); color: var(--text); font: 400 15px/1.4 var(--f-head); transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2394A3B8' stroke-width='1.8'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
input[type=date] { color-scheme: dark; }
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(6, 182, 212, .2); }
.input-icon { position: relative; }
.input-icon > .ico { position: absolute; left: 15px; top: 14px; color: var(--text-3); pointer-events: none; }
.input-icon > input { padding-left: 46px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; margin-bottom: 14px; cursor: pointer; color: var(--text-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--coral); flex: none; border-radius: 6px; }
.row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } .row-3 { grid-template-columns: repeat(3, 1fr); } }
fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend { font: 700 18px/1.3 var(--f-head); padding: 0; margin-bottom: 14px; }

/* comutator (setări) */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid var(--line); cursor: pointer; }
.switch + .switch { margin-top: 10px; }
.switch b { display: block; font-weight: 650; font-size: 14.5px; }
.switch span.d { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.switch input { appearance: none; flex: none; width: 46px; height: 26px; border-radius: var(--r-full); background: var(--s3); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked { background: linear-gradient(90deg, #F43F5E, #EC4899); }
.switch input:checked::after { transform: translateX(20px); }
.switch input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ============================================================ SUPRAFEȚE */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
@media (min-width: 720px) { .card { padding: 26px; } }
.card + .card { margin-top: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.card-head h2 { font-size: 21px; }
.card-head .ico { color: var(--pink-soft); }
.card.accent { position: relative; overflow: hidden; }
.card.accent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum); }
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; }
@media (min-width: 720px) { .panel { padding: 28px; } }
.panel + .panel { margin-top: 16px; }
.narrow { max-width: 600px; margin: 0 auto; }
.glass { background: var(--glass); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--lift); border-radius: var(--r-xl); }
.auth-card { background: var(--glass); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--lift); border-radius: var(--r-xl); padding: 28px; }
@media (min-width: 640px) { .auth-card { padding: 34px; } }
.auth-card h1 { font-size: 28px; }

.alert { padding: 13px 16px; border-radius: var(--r-lg); margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.alert-error { background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .3); color: #FECDD3; }
.alert-success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); color: #A7F3D0; }
.alert-info { background: rgba(6, 182, 212, .08); border-color: rgba(6, 182, 212, .28); color: #A5F3FC; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--text-2); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-label); letter-spacing: .04em; color: var(--cyan); margin-bottom: 10px; }
.crumbs { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f-label); color: var(--text-3); margin-bottom: 18px; }
.crumbs a:hover { color: var(--text); }

/* chip-uri și etichete */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--r-full); background: var(--s2); border: 1px solid rgba(255, 255, 255, .08); font: 600 13px/1.1 var(--f-label); color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked), .chip[aria-current="true"] { background: linear-gradient(90deg, #F43F5E, #EC4899); border-color: transparent; color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.chip .subtle { font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-full); background: var(--s2); border: 1px solid rgba(255, 255, 255, .08); font: 600 12px/1.2 var(--f-label); color: var(--text-2); white-space: nowrap; }
.tag .ico, .tag .ico-sm { width: 14px; height: 14px; }
.tag.verified { color: #67E8F9; border-color: rgba(6, 182, 212, .3); background: rgba(6, 182, 212, .08); }
.tag.vip { color: #fff; background: var(--grad-spark); border-color: transparent; }
.tag.on { color: #86EFAC; }
.tag.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }
.badge-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--coral); color: #fff; font: 700 11px/1 var(--f-label); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--coral); color: #fff; font: 700 11px/1 var(--f-label); }
.verified-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--cyan); }

.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-full); max-width: 100%; overflow-x: auto; margin-bottom: 22px; }
.tabs a { padding: 9px 18px; border-radius: var(--r-full); font: 600 13.5px/1 var(--f-label); color: var(--text-2); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tabs a[aria-current="page"] { background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; }
.pager a, .pager span { min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 14px; border-radius: var(--r-full); font: 600 14px/1 var(--f-label); border: 1px solid var(--line-2); background: var(--s1); }
.pager a:hover { background: var(--s2); }
.pager span[aria-current] { background: var(--grad-spark); border-color: transparent; }
.pager .gap { border: 0; background: none; }

.empty { text-align: center; padding: 52px 24px; border-radius: var(--r-xl); border: 1px dashed var(--line-3); background: rgba(21, 26, 35, .5); }
.empty h2 { margin-bottom: 6px; }
.empty p { margin: 0 auto 18px; color: var(--text-2); }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; }
.section-head h2 { margin: 0; font-size: 21px; display: flex; align-items: center; gap: 10px; }
.section-head h2 .ico { color: var(--pink-soft); }
.section-head a { font: 600 13.5px/1 var(--f-label); color: var(--pink-soft); }
.section-head .muted { font: 500 13px/1 var(--f-label); }
.stack > * + * { margin-top: 36px; }

/* ============================================================ LANDING */
.auth-split { min-height: 100vh; display: grid; }
@media (min-width: 1024px) { .auth-split { grid-template-columns: 1.15fr 1fr; } }
.auth-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px 32px; isolation: isolate; min-height: 520px; }
@media (min-width: 1024px) { .auth-hero { padding: 40px 48px; min-height: 100vh; } }
.auth-hero .bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 50% at 20% 25%, rgba(244, 63, 94, .35), transparent 70%),
  radial-gradient(55% 55% at 85% 40%, rgba(139, 92, 246, .35), transparent 70%),
  radial-gradient(50% 45% at 45% 90%, rgba(6, 182, 212, .25), transparent 70%), var(--canvas); }
.auth-hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.auth-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 14, 20, .35) 0%, rgba(11, 14, 20, 0) 14%, rgba(11, 14, 20, 0) 45%, rgba(11, 14, 20, .75) 72%, rgba(11, 14, 20, .96) 100%); }
/* pe telefon textul stă peste poză: o umbră mai puternică, ca să se citească */
@media (max-width: 1023px) { .auth-hero::after { background: linear-gradient(180deg, rgba(11, 14, 20, .45) 0%, rgba(11, 14, 20, .7) 55%, rgba(11, 14, 20, .95) 100%); } }
.auth-hero .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pill-soft { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full); background: rgba(21, 26, 35, .7); border: 1px solid var(--line-2); font: 600 12px/1 var(--f-label); color: var(--text-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pill-soft .ico { width: 15px; height: 15px; color: var(--pink-soft); }
.auth-hero .hero-copy { margin-top: auto; padding-top: 60px; }
.auth-hero h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.06; letter-spacing: -0.035em; margin: 16px 0 16px; }
.auth-hero .lede { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.hero-facts { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-2); }
@media (min-width: 640px) { .hero-facts { grid-template-columns: repeat(3, 1fr); } }
.hero-fact { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: rgba(21, 26, 35, .75); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-fact .ico-box { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--s2); color: var(--pink-soft); flex: none; }
.hero-fact b { display: block; font-size: 14px; }
.hero-fact span { font-size: 12.5px; color: var(--text-2); }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 24px 16px 48px; background: radial-gradient(70% 60% at 70% 20%, rgba(139, 92, 246, .12), transparent 70%), #0E1119; }
@media (min-width: 1024px) { .auth-side { padding: 40px; } }
.auth-panel { position: relative; width: 100%; max-width: 480px; padding: 28px; }
@media (min-width: 640px) { .auth-panel { padding: 34px; } }
.auth-panel::before { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244, 63, 94, .8), rgba(139, 92, 246, .8), transparent); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--line); margin-bottom: 26px; }
.seg a { text-align: center; padding: 10px; border-radius: 9px; font: 600 14px/1 var(--f-head); color: var(--text-2); }
.seg a[aria-current="page"] { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.auth-panel h2 { font-size: 26px; margin-bottom: 6px; }
.auth-panel .intro { color: var(--text-2); font-size: 14px; margin-bottom: 22px; }
.auth-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 500 12.5px/1.4 var(--f-label); color: var(--text-3); }
.auth-foot a { color: var(--text-2); }
.auth-foot a:hover { color: var(--text); }
.auth-foot .secure { color: #C4B5FD; display: inline-flex; align-items: center; gap: 6px; }

/* Header pentru paginile publice (în afara landing-ului) */
.guest-shell { max-width: 1200px; margin: 0 auto; padding: 24px 20px 56px; }

/* ============================================================ DESCOPERĂ */
.spotlight { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 26px; margin-bottom: 30px; border: 1px solid var(--line);
  background: radial-gradient(80% 120% at 0% 0%, rgba(244, 63, 94, .16), transparent 55%), radial-gradient(70% 120% at 100% 100%, rgba(139, 92, 246, .16), transparent 55%), linear-gradient(135deg, #1A1F2B, #151A23); }
@media (min-width: 900px) { .spotlight { padding: 30px 34px; } }
.spotlight-grid { display: grid; gap: 22px; }
@media (min-width: 1100px) { .spotlight-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: center; } }
.spotlight h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 10px; }
.spotlight .lede { color: var(--text-2); font-size: 15.5px; margin: 0; max-width: 58ch; }
.spot-box { padding: 18px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .6); border: 1px solid var(--line-2); }
.spot-box .row-t { display: flex; justify-content: space-between; align-items: center; font: 600 13.5px/1.2 var(--f-head); margin-bottom: 12px; }
.spot-box .row-t span { color: var(--pink-soft); font: 700 13px/1 var(--f-label); }
.spot-box .opts { display: grid; gap: 8px; }
.tribes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.tribes .label { margin-right: 6px; }

.stories { display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 70px; display: grid; justify-items: center; gap: 7px; text-align: center; }
.story .ring { width: 66px; height: 66px; border-radius: 50%; padding: 2.5px; background: var(--spectrum); box-shadow: 0 0 18px -4px rgba(139, 92, 246, .6); }
.story .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--canvas); }
.story .ring.add { background: none; box-shadow: none; border: 1.5px dashed var(--line-3); display: grid; place-items: center; color: var(--text-2); }
.story b { font: 500 12px/1.2 var(--f-label); color: var(--text-2); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.discover { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .discover { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .discover { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1680px) { .discover { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--s1); border: 1px solid var(--line); isolation: isolate; aspect-ratio: 4 / 5; }
.pcard > a.cover-link { position: absolute; inset: 0; z-index: 0; }
.pcard > a.cover-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pcard:hover > a.cover-link img { transform: scale(1.04); }
.pcard::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 14, 20, .35) 0%, transparent 22%, transparent 40%, rgba(11, 14, 20, .95) 100%); }
.pcard .top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; padding: 14px; pointer-events: none; }
.pcard .glass-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-full); background: rgba(11, 14, 20, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-2); font: 600 11.5px/1 var(--f-label); color: var(--text); }
.pcard .glass-tag .ico { width: 13px; height: 13px; color: var(--text-2); }
.pcard .glass-tag.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }
.pcard .body { position: relative; z-index: 1; margin-top: auto; padding: 0 16px 16px; pointer-events: none; }
.pcard .body a, .pcard .body button, .pcard .body form { pointer-events: auto; }
.pcard .nm { display: flex; align-items: center; gap: 8px; font: 800 22px/1.15 var(--f-head); letter-spacing: -0.02em; }
.pcard .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .nm .verified-ico { width: 22px; height: 22px; flex: none; }
.pcard .sub { font-size: 13.5px; color: var(--text-2); margin: 2px 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; max-height: 58px; overflow: hidden; }
.pcard .tags .tag { background: rgba(30, 36, 48, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 9px; font-size: 11.5px; }
.pcard .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard .acts .btn { min-height: 42px; font-size: 13.5px; padding: 0 12px; }
.pcard .acts form { display: contents; }
.pcard.nophoto > a.cover-link img { opacity: .3; filter: grayscale(1); }
/* varianta compactă (liste lungi): doar poză și nume */
.discover.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .discover.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .discover.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.discover.compact .pcard { border-radius: var(--r-lg); }
.discover.compact .pcard .nm { font-size: 16px; }
.discover.compact .pcard .sub { font-size: 12px; margin-bottom: 0; }
.discover.compact .pcard .body { padding: 0 12px 12px; }
.discover.compact .pcard .top { padding: 10px; }
.discover.compact .pcard .tags, .discover.compact .pcard .acts, .discover.compact .pcard .top .loc { display: none; }

/* ============================================================ PROFIL */
.profile-grid { display: grid; gap: 22px; }
@media (min-width: 1024px) { .profile-grid { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 26px; align-items: start; } .profile-grid > .left { position: sticky; top: calc(var(--topbar) + 20px); } }
.hero-card { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--s1); border: 1px solid var(--line); isolation: isolate; }
.hero-card > a img, .hero-card > img { width: 100%; height: 100%; object-fit: cover; }
.hero-card > a { position: absolute; inset: 0; }
.hero-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 14, 20, .3) 0%, transparent 25%, transparent 50%, rgba(11, 14, 20, .95) 100%); }
.hero-card .top { position: absolute; z-index: 1; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.hero-card .glass-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-full); background: rgba(11, 14, 20, .65); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 12px/1 var(--f-label); }
.hero-card .glass-tag.on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }
.hero-card .vouched { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-full); background: linear-gradient(90deg, #F43F5E, #EC4899); font: 700 11.5px/1 var(--f-label); letter-spacing: .02em; }
.hero-card .vouched .ico { width: 14px; height: 14px; }
.hero-card .who { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; pointer-events: none; }
.hero-card .who h1 { display: flex; align-items: center; gap: 10px; font-size: clamp(28px, 3vw, 36px); margin: 0 0 4px; }
.hero-card .who h1 .verified-ico { width: 26px; height: 26px; color: var(--coral); }
.hero-card .who p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.hero-card .who p .city { color: var(--cyan); font-weight: 600; }
.action-card { margin-top: 16px; padding: 16px; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.action-grid > a, .action-grid > form > button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r-lg); background: rgba(30, 36, 48, .6); border: 1px solid var(--line-2); font: 600 12px/1.2 var(--f-label); color: var(--text-2); cursor: pointer; width: 100%; }
.action-grid > a:hover, .action-grid > form > button:hover { background: var(--s3); color: var(--text); }
.action-grid .ico { color: var(--pink-soft); }
.action-grid .on .ico { color: var(--coral); fill: var(--coral); }
.action-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font: 500 11.5px/1 var(--f-label); color: var(--text-3); }
.about-text { font-size: 16px; line-height: 1.7; color: #CBD5E1; margin-bottom: 18px; overflow-wrap: anywhere; }
.attr-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.attr-row .tag { padding: 7px 13px; font-size: 12.5px; }
.intent { display: flex; gap: 14px; padding: 16px; margin-top: 16px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .5); border: 1px solid var(--line-2); }
.intent .ico { color: var(--coral); margin-top: 2px; }
.intent small { display: block; font: 700 11px/1.3 var(--f-label); letter-spacing: .04em; color: var(--pink-soft); margin-bottom: 3px; }
.intent b { font-weight: 650; }
.media-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--line); }
.media-tabs label { padding: 8px 14px; border-radius: 9px; font: 600 12.5px/1 var(--f-label); color: var(--text-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.media-tabs label .ico { width: 14px; height: 14px; }
.mt-radio { position: absolute; opacity: 0; pointer-events: none; }
.mt-panel { display: none; }
#mt-photos:checked ~ .card-head label[for="mt-photos"], #mt-videos:checked ~ .card-head label[for="mt-videos"], #mt-private:checked ~ .card-head label[for="mt-private"] { background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
#mt-photos:checked ~ .mt-photos, #mt-videos:checked ~ .mt-videos, #mt-private:checked ~ .mt-private { display: block; }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .media-grid { grid-template-columns: repeat(3, 1fr); } }
.media-grid > a, .media-grid > figure, .media-grid > .vault { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--s2); margin: 0; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.media-grid > a:hover img { transform: scale(1.05); }
.vault { display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; padding: 14px; border: 1px solid var(--line-2); }
.vault .kbox { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--line-2); color: var(--pink-soft); }
.vault b { font-size: 14px; }
.vault small { color: var(--text-3); font: 500 11.5px/1.3 var(--f-label); }
.vault .btn { margin-top: 4px; }
.album-label { font: 700 12px/1 var(--f-label); letter-spacing: .03em; color: var(--text-3); margin: 18px 0 10px; }
.album-label:first-child { margin-top: 0; }
.trust-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .5); border: 1px solid var(--line); }
.trust .tb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.trust .tb.g { background: rgba(16, 185, 129, .14); color: #34D399; }
.trust .tb.v { background: rgba(139, 92, 246, .16); color: #C4B5FD; }
.trust .tb.c { background: rgba(6, 182, 212, .14); color: #67E8F9; }
.trust .tb.x { background: var(--s2); color: var(--text-3); }
.trust b { display: block; font-size: 13.5px; }
.trust span { font-size: 12.5px; color: var(--text-2); }
.pledge { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; margin-top: 16px; border-radius: var(--r-lg); background: var(--canvas); border: 1px solid var(--line); font-size: 13.5px; }
.pledge b { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.pledge .ico { color: var(--coral); }
.videos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.videos video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-lg); }
.videos .pending { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 16px; border-radius: var(--r-lg); background: var(--s2); color: var(--text-2); font-size: 13px; }
.locked { position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; gap: 10px; padding: 40px 22px; border-radius: var(--r-xl); background: var(--s2); border: 1px solid var(--line-2); }
.locked .kbox { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--line-2); color: var(--pink-soft); }
.locked p { margin: 0; max-width: 42ch; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5, 7, 10, .96); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 12px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: rgba(255, 255, 255, .2); }
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--text-2); font: 500 13px var(--f-label); }

/* ============================================================ EDITARE PROFIL */
.edit-grid { display: grid; gap: 22px; }
@media (min-width: 1024px) { .edit-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; } .edit-grid > aside { position: sticky; top: calc(var(--topbar) + 20px); } }
.strength .bar { height: 7px; border-radius: 99px; background: var(--s3); overflow: hidden; margin: 12px 0 14px; }
.strength .bar i { display: block; height: 100%; background: linear-gradient(90deg, #F43F5E, #FB923C, #10B981); border-radius: 99px; }
.strength .pct { font: 800 22px/1 var(--f-head); background: linear-gradient(90deg, #FDA4AF, #D8B4FE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strength ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.strength li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-2); }
.strength li .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--coral); }
.strength li.done .ico { color: #34D399; }
.edit-nav { display: grid; gap: 2px; padding: 8px; }
.edit-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); font: 600 14px/1.2 var(--f-head); color: var(--text-2); }
.edit-nav a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.edit-nav a .tag { margin-left: auto; }
.edit-nav a .ico { color: var(--text-3); }
.verify-card { display: flex; align-items: center; gap: 12px; padding: 16px; }
.verify-card .tb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(139, 92, 246, .16); color: #C4B5FD; flex: none; }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .slots { grid-template-columns: repeat(3, 1fr); } }
.slot { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--s2); border: 1px solid var(--line); margin: 0; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot.main { box-shadow: 0 0 0 2px var(--coral), 0 0 24px -4px rgba(244, 63, 94, .5); }
.slot .ribbon { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; gap: 5px; align-items: center; padding: 5px 10px; border-radius: var(--r-full); font: 700 11px/1 var(--f-label); background: #FFE4E6; color: #9F1239; }
.slot .ribbon .ico { width: 13px; height: 13px; }
.slot figcaption { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.slot figcaption form { display: contents; }
.slot .pill { font: 600 11.5px/1 var(--f-label); padding: 7px 10px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: rgba(11, 14, 20, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); cursor: pointer; }
.slot .pill.danger { color: var(--danger); }
.slot.add { display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; border: 1.5px dashed var(--line-3); background: transparent; color: var(--text-2); cursor: pointer; padding: 12px; }
.slot.add .kbox { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--cyan); }
.slot.add b { color: var(--text); font-size: 14px; }
.slot.add small { font: 500 11.5px/1.3 var(--f-label); color: var(--text-3); }
.slot.add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot.add.drag { border-color: var(--coral); background: rgba(244, 63, 94, .06); }
.keyholders { list-style: none; margin: 0; padding: 0; }
.keyholders li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(11, 14, 20, .45); border: 1px solid var(--line); }
.keyholders li + li { margin-top: 8px; }
.keyholders img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.keyholders b { display: block; font-size: 14px; }
.keyholders span { font-size: 12px; color: var(--text-3); }
.keyholders form { margin-left: auto; }
.save-bar { position: sticky; bottom: calc(var(--tabbar) + 22px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-top: 22px; border-radius: var(--r-xl); }
@media (min-width: 1024px) { .save-bar { bottom: 16px; } }
.save-bar .st { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.save-bar .st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.progress { height: 6px; border-radius: 99px; background: var(--s3); overflow: hidden; margin-top: 12px; display: none; }
.progress.show { display: block; }
.progress i { display: block; height: 100%; width: 0; background: var(--grad-cta); transition: width .2s; }

/* albume: listă + zonă de încărcare (paginile de administrare a albumelor) */
.albums-layout { display: grid; gap: 22px; }
@media (min-width: 1024px) { .albums-layout { grid-template-columns: 290px minmax(0, 1fr); } }
.album-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.album-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; color: var(--text-2); border-left: 2px solid transparent; }
.album-list a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.album-list a[aria-current="page"] { background: var(--s1); color: var(--text); border-left-color: var(--coral); }
.album-list small { color: var(--text-3); font: 500 12px/1 var(--f-label); }
.dropzone { position: relative; border: 1.5px dashed var(--line-3); border-radius: var(--r-xl); padding: 30px 22px; text-align: center; background: rgba(21, 26, 35, .5); transition: border-color .15s, background .15s; }
.dropzone.drag { border-color: var(--coral); background: rgba(244, 63, 94, .06); }
.dropzone b { display: block; font-size: 16px; margin-bottom: 4px; }
.dropzone input[type=file] { margin: 14px auto; max-width: 100%; color: var(--text-2); font: 500 13px var(--f-label); }
.dropzone input[type=file]::file-selector-button { font: 600 13px var(--f-head); padding: 9px 16px; margin-right: 12px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--s2); color: var(--text); cursor: pointer; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
@media (min-width: 720px) { .photos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } }
.photos a, .photos figure { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--s2); margin: 0; }
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos figure figcaption { position: absolute; inset: auto 8px 8px 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.photos figure .pill { font: 600 11.5px/1 var(--f-label); padding: 7px 10px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: rgba(11, 14, 20, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); cursor: pointer; }
.photos figure .pill.danger { color: var(--danger); }
.photos figure.is-logo { box-shadow: 0 0 0 2px var(--coral), 0 0 24px -4px rgba(244, 63, 94, .5); }
.photos figure.is-logo::before { content: "Poza principală"; position: absolute; top: 8px; left: 8px; z-index: 1; font: 700 11px/1 var(--f-label); padding: 5px 10px; border-radius: var(--r-full); background: #FFE4E6; color: #9F1239; }
details.more { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--s1); margin-top: 16px; }
details.more summary { padding: 15px 18px; cursor: pointer; font-weight: 650; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--text-3); }
details.more[open] summary::after { content: "–"; }
details.more > div { padding: 0 18px 18px; }

/* ============================================================ MESAJE */
.chat { display: grid; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 900px) {
  .chat { grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - var(--topbar) - 48px); min-height: 560px; }
}
@media (min-width: 1360px) { .chat.has-thread { grid-template-columns: 340px minmax(0, 1fr) 300px; } }
.chat-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: #12161F; }
.chat.has-thread .chat-list { display: none; }
@media (min-width: 900px) { .chat.has-thread .chat-list { display: flex; } }
.chat-me { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.chat-me img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.chat-me b { display: block; font-size: 15px; }
.chat-me span { font: 500 12px/1.3 var(--f-label); color: var(--cyan); }
.chat-search { padding: 0 16px 12px; }
.chat-search input { min-height: 42px; padding: 10px 14px 10px 42px; border-radius: var(--r-full); background: var(--s2); font-size: 14px; }
.chat-filters { display: flex; gap: 6px; padding: 0 16px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.chat-filters a { flex: none; padding: 6px 12px; border-radius: var(--r-full); font: 600 12px/1 var(--f-label); color: var(--text-2); background: var(--s2); border: 1px solid rgba(255, 255, 255, .06); }
.chat-filters a[aria-current="page"] { background: rgba(244, 63, 94, .16); color: #FDA4AF; border-color: rgba(244, 63, 94, .35); }
.conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.conv:hover { background: rgba(255, 255, 255, .025); }
.conv[aria-current="page"] { background: rgba(255, 255, 255, .04); box-shadow: inset 3px 0 0 var(--coral); }
.conv .av { position: relative; }
.conv .av img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.conv .av.ring { padding: 2px; border-radius: 50%; background: var(--spectrum); }
.conv .av.ring img { width: 46px; height: 46px; border: 2px solid #12161F; }
.conv .av.on::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--online); border: 2px solid #12161F; }
.conv b { display: block; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .snip { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .snip .ico { width: 14px; height: 14px; }
.conv .when { display: grid; justify-items: end; gap: 7px; font: 600 11.5px/1 var(--f-label); color: var(--text-3); }
.conv.unread .when { color: var(--pink-soft); }
.conv .ticks { color: var(--cyan); }
.chat-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); font: 500 11.5px/1 var(--f-label); color: var(--text-3); }
.chat-foot .ico { width: 14px; height: 14px; color: var(--pink-soft); }

.chat-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 70vh; background: radial-gradient(80% 60% at 50% 0%, rgba(139, 92, 246, .06), transparent 70%), var(--canvas); }
@media (min-width: 900px) { .chat-main { min-height: 0; } }
.chat:not(.has-thread) .chat-main { display: none; }
@media (min-width: 900px) { .chat:not(.has-thread) .chat-main { display: grid; } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(21, 26, 35, .6); }
.chat-head .av { position: relative; flex: none; }
.chat-head .av img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.chat-head .av.on::after { content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--online); border: 2px solid var(--s1); }
.chat-head .nm { display: flex; align-items: center; gap: 6px; font: 700 17px/1.2 var(--f-head); }
.chat-head .nm .ico { color: var(--cyan); width: 18px; height: 18px; }
.chat-head .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 12.5px/1.3 var(--f-label); color: var(--text-2); margin-top: 3px; }
.chat-head .meta .on { color: #86EFAC; }
.chat-head .meta a { color: var(--cyan); }
.chat-head .tools { margin-left: auto; display: flex; gap: 2px; }
.thread { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; overflow-y: auto; }
@media (min-width: 1100px) { .thread { padding: 26px 34px; } }
.day-sep { align-self: center; font: 600 11.5px/1 var(--f-label); color: var(--text-2); padding: 7px 14px; border-radius: var(--r-full); background: var(--s1); border: 1px solid var(--line); margin: 10px 0 6px; }
.msg-row { display: flex; gap: 10px; align-items: flex-end; }
.msg-row.mine { justify-content: flex-end; }
.msg-row > img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.bubble { max-width: min(72%, 520px); padding: 12px 16px 8px; border-radius: 20px 20px 20px 6px; background: var(--s2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.msg-row.mine .bubble { background: var(--grad-mine); border-color: rgba(167, 139, 250, .35); border-radius: 20px 20px 6px 20px; }
.bubble .subj { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.bubble .body { font-size: 15px; line-height: 1.55; }
.bubble time { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font: 500 11px/1 var(--f-label); color: rgba(248, 250, 252, .55); margin-top: 6px; }
.bubble time .ico { width: 15px; height: 15px; color: #67E8F9; }
.thread-empty { margin: auto; text-align: center; color: var(--text-2); max-width: 36ch; }
.thread-empty h3 { font-size: 20px; }
.composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(21, 26, 35, .85); }
.chat-main .composer { position: sticky; bottom: calc(var(--tabbar) + 16px); }
@media (min-width: 1024px) { .chat-main .composer { position: static; } }
.composer .grow { flex: 1; min-width: 0; }
.composer textarea { min-height: 46px; max-height: 180px; border-radius: 24px; padding: 12px 18px; background: var(--s2); resize: none; }
.composer .cost { font: 500 11px/1 var(--f-label); color: var(--text-3); text-align: center; margin-top: 6px; }
.composer .send { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--grad-spark); color: #fff; cursor: pointer; flex: none; box-shadow: 0 4px 16px rgba(139, 92, 246, .4); }
.composer .send:hover { filter: brightness(1.1); }
.chat-placeholder { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 40px; color: var(--text-2); }
.chat-placeholder .kbox { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--s1); border: 1px solid var(--line-2); color: var(--pink-soft); }
.chat-side { display: none; border-left: 1px solid var(--line); overflow-y: auto; background: #12161F; }
@media (min-width: 1360px) { .chat.has-thread .chat-side { display: block; } }
.chat-side .sec { padding: 18px 18px; border-bottom: 1px solid var(--line); }
.chat-side .prof { text-align: center; }
.chat-side .prof .ring { display: inline-block; padding: 3px; border-radius: 50%; background: var(--spectrum); margin-bottom: 10px; }
.chat-side .prof .ring img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; border: 3px solid #12161F; }
.chat-side .prof h3 { margin: 0; }
.chat-side .prof .v { font: 600 12px/1.3 var(--f-label); color: var(--cyan); }
.chat-side .prof q { display: block; margin: 10px 0 12px; font-size: 13.5px; color: #CBD5E1; }
.chat-side .prof .chips { justify-content: center; }
.chat-side .prof .tag { font-size: 11px; }
.chat-side .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chat-side .mini a { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--s2); }
.chat-side .mini img { width: 100%; height: 100%; object-fit: cover; }
.side-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); color: var(--text); font: 600 13.5px/1.2 var(--f-head); cursor: pointer; text-align: left; }
.side-act + .side-act, form + form .side-act, .side-act-wrap > * + * { margin-top: 8px; }
.side-act:hover { background: var(--s3); }
.side-act.danger { color: var(--danger); }

/* ============================================================ CĂUTARE, TABELE, TEXT */
.search-layout { display: grid; gap: 24px; }
@media (min-width: 1200px) { .search-layout { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } .search-layout .filters { position: sticky; top: calc(var(--topbar) + 20px); } }
.search-layout.searched > .results { order: -1; }
@media (min-width: 1200px) { .search-layout.searched > .results { order: 0; } }
.filters-jump { display: inline-flex; }
@media (min-width: 1200px) { .filters-jump { display: none; } }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.table-wrap { overflow-x: auto; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-xl); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 12px/1.3 var(--f-label); letter-spacing: .02em; color: var(--text-3); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plus { color: #34D399; font-weight: 700; }
.minus { color: var(--danger); font-weight: 700; }
.prose { max-width: 72ch; }
.prose h1 { margin-bottom: 18px; }
.prose h2 { margin-top: 30px; font-size: 18px !important; }
.prose p, .prose li { color: #CBD5E1; }
.facts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 22px; margin: 0 0 18px; }
.facts-list dt { font: 600 12px/1.3 var(--f-label); color: var(--text-3); }
.facts-list dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.people { list-style: none; margin: 0; padding: 0; }
.person { display: flex; gap: 12px; align-items: center; padding: 9px 0; }
.person img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex: none; }
.person b { display: block; font-weight: 650; font-size: 14.5px; }
.person span span { font-size: 12.5px; color: var(--text-2); }
.notice { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r-lg); margin-bottom: 12px; background: var(--s1); border: 1px solid var(--line-2); font-size: 14px; }
.notice p { margin: 0; font-weight: 600; }
.notice.hot { background: linear-gradient(90deg, rgba(244, 63, 94, .14), rgba(139, 92, 246, .12)); border-color: rgba(244, 63, 94, .3); }
.notice.warn { border-color: rgba(250, 204, 21, .3); }

.site-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding: 24px 0 4px; margin-top: 48px; border-top: 1px solid var(--line); font: 500 12.5px/1.4 var(--f-label); color: var(--text-3); }
.site-foot b { color: var(--text); font-family: var(--f-head); margin-right: 8px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.topbar .live-pill { display: none; }
@media (min-width: 1280px) { .topbar .live-pill { display: inline-flex; } }
.topbar .top-right .icon-btn { display: none; }
@media (min-width: 640px) { .topbar .top-right .icon-btn { display: inline-grid; } }
.menu-pop > summary .avatar-ring { display: block; }

.spot-box .chip { justify-content: flex-start; width: 100%; padding: 10px 14px; }
.spot-box .chip .ico { width: 16px; height: 16px; }
.spotlight .pill-soft { display: inline-flex; }

.top-search input[type=search] { height: 40px; min-height: 40px; padding: 0 14px 0 42px; border-radius: 999px; background: var(--s1); font-size: 14px; }
.spot-box .row-t { justify-content: flex-start; gap: 8px; }
.spot-box .row-t span { margin-left: auto; }
.chat-search input[type=search] { min-height: 42px; padding: 10px 14px 10px 42px; border-radius: 999px; background: var(--s2); font-size: 14px; }

.action-grid > form { display: contents; }
.crumbs a { display: inline-flex; align-items: center; gap: 4px; }
.chat .main-pad { padding: 0; }
.side-act-wrap form + a, .side-act-wrap a + form { display: block; margin-top: 8px; }
.side-act-wrap a.side-act { margin-top: 8px; }
@media (min-width: 1024px) { body:has(.chat) .main { padding-bottom: 24px; } body:has(.chat) .site-foot { display: none; } }
.chat { overflow: clip; }
.chat-me > span > span { color: var(--cyan); }
.chat-me > span > b { color: var(--text); }
.chat-search { position: relative; }
.chat-search > .ico { left: 30px; top: 11px; }
.edit-grid section.card, .edit-grid form.card { scroll-margin-top: calc(var(--topbar) + 16px); }
.edit-grid > div > * + * { margin-top: 20px; }
.card h3 { font-size: 16px; }
.slot > a { position: absolute; inset: 0; }
.slot .progress { position: relative; z-index: 1; }
@media (max-width: 1023px) {
  .auth-hero { min-height: 0; padding-bottom: 8px; }
  .auth-hero .hero-copy { padding-top: 28px; }
  .auth-hero h1 { font-size: 34px; }
  .auth-hero .lede { font-size: 15px; margin-bottom: 0; }
  .hero-facts { display: none; }
  .auth-side { padding-top: 16px; background: none; }
}

/* ============================================================ PUNCTE */
.btn-violet { background: transparent; border-color: rgba(139, 92, 246, .6); color: #C4B5FD; }
.btn-violet:hover { background: rgba(139, 92, 246, .12); }
.rank-switch { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 820px) { .rank-switch { grid-template-columns: 1fr 1fr; } }
.rank-card { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--r-xl); background: var(--s1); border: 1px solid var(--line-2); transition: background .15s, border-color .15s, box-shadow .15s; }
.rank-card:hover { border-color: var(--line-3); }
.rank-card .ri { flex: none; color: var(--text-2); }
.rank-card .ri .ico { width: 26px; height: 26px; }
.rank-card .rt { min-width: 0; flex: 1; }
.rank-card .rt b { display: block; font-size: 17px; font-weight: 650; }
.rank-card .rt span { display: block; font-size: 13.5px; color: var(--text-2); }
.rank-card .rv { font: 500 clamp(24px, 2.6vw, 30px)/1 var(--f-head); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-card.in[aria-current="page"] { background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(76, 29, 149, .25)); border-color: rgba(139, 92, 246, .65); box-shadow: 0 0 30px -10px rgba(139, 92, 246, .5); }
.rank-card.in[aria-current="page"] .ri { color: #C4B5FD; }
.rank-card.out[aria-current="page"] { background: linear-gradient(135deg, rgba(127, 29, 29, .45), rgba(76, 20, 30, .5)); border-color: rgba(244, 63, 94, .55); box-shadow: 0 0 30px -10px rgba(244, 63, 94, .45); }
.rank-card.out[aria-current="page"] .ri { color: #FDA4AF; }
.rank-list { border-radius: var(--r-xl); padding: 18px; border: 1px solid var(--line); background: var(--s1); }
@media (min-width: 720px) { .rank-list { padding: 22px; } }
.rank-list.in { background: linear-gradient(180deg, rgba(139, 92, 246, .06), transparent 40%), var(--s1); }
.rank-list.out { background: linear-gradient(180deg, rgba(127, 29, 29, .35), rgba(60, 16, 24, .35)), var(--s1); border-color: rgba(244, 63, 94, .3); }
.rank-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 0 2px; }
.rl-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.rl-title .ico { width: 18px; height: 18px; color: var(--text-2); }
.rl-title b { font: 700 12px/1 var(--f-label); letter-spacing: .06em; text-transform: none; color: var(--text-2); }
.rl-title span { font-size: 14px; color: var(--text-2); }
.rank-list.out .rl-title b, .rank-list.out .rl-title .ico { color: #FDA4AF; }
.rank-list.in .rl-title b, .rank-list.in .rl-title .ico { color: #C4B5FD; }
.rl-filter { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.rl-filter select { min-height: 40px; padding: 8px 40px 8px 14px; font-size: 14px; width: auto; min-width: 180px; }
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.move { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .45); border: 1px solid var(--line); }
@media (min-width: 720px) { .move { grid-template-columns: 130px minmax(0, 1fr) auto; padding: 18px 20px; } }
.rank-list.out .move { background: rgba(80, 22, 32, .45); border-color: rgba(244, 63, 94, .14); }
.mv-amount { font: 500 22px/1 var(--f-head); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mv-body { min-width: 0; }
.mv-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.mv-title .ico { width: 17px; height: 17px; flex: none; }
.rank-list.in .mv-title .ico { color: #C4B5FD; }
.rank-list.out .mv-title .ico { color: #FDA4AF; }
.mv-title a:hover { text-decoration: underline; }
.mv-note { display: block; margin-top: 4px; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.mv-date { grid-column: 2; font: 500 12.5px/1.3 var(--f-label); color: var(--text-2); white-space: nowrap; }
@media (min-width: 720px) { .mv-date { grid-column: auto; text-align: right; } }
.rank-list-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding: 0 4px; font-size: 14px; color: var(--text-2); }
.rank-list-foot b { font: 500 20px/1 var(--f-head); }
.rank-list.in .rank-list-foot b { color: #C4B5FD; }
.rank-list.out .rank-list-foot b { color: #FDA4AF; }
.earn { margin-top: 20px; }
.earn h2 { margin-bottom: 4px; }
.earn-grid { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 720px) { .earn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .earn-grid { grid-template-columns: repeat(4, 1fr); } }
.earn-item { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .45); border: 1px solid var(--line-2); }
.earn-item .eh { display: flex; align-items: flex-start; gap: 10px; }
.earn-item .eh .ico { color: #C4B5FD; margin-top: 2px; }
.earn-item .eh b { flex: 1; font-size: 15px; }
.earn-item .ev { font: 600 14px/1.4 var(--f-head); color: var(--text); white-space: nowrap; }
.earn-item p { margin: 0 0 4px 30px; font-size: 13.5px; color: var(--text-2); }
.earn-item .btn { margin: auto 0 0 30px; align-self: flex-start; }

/* ============================================================ ÎNSCRIERE */
@media (min-width: 1024px) { .auth-split.create { grid-template-columns: .85fr 1.15fr; } .auth-split.create .auth-hero { position: sticky; top: 0; height: 100vh; } }
.auth-panel.wide { max-width: 720px; }
.auth-panel fieldset { margin-bottom: 8px; }
.auth-panel legend { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.auth-panel legend .ico { color: var(--pink-soft); }
.identity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .identity-grid { grid-template-columns: repeat(3, 1fr); } }
.identity { position: relative; display: grid; align-content: center; gap: 2px; min-height: 54px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; transition: background .15s, border-color .15s; }
.identity:hover { border-color: var(--line-3); }
.identity input { position: absolute; opacity: 0; pointer-events: none; }
.identity b { font-size: 14.5px; font-weight: 650; }
.identity small { font: 500 11.5px/1.3 var(--f-label); color: var(--text-2); }
.identity:has(input:checked) { background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(139, 92, 246, .22)); border-color: rgba(244, 63, 94, .7); box-shadow: 0 0 20px -8px rgba(244, 63, 94, .6); }
.identity:has(input:checked) small { color: #FECDD3; }
.identity:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.person-box { padding: 18px 18px 2px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .45); border: 1px solid var(--line); margin-bottom: 16px; }
.person-box legend { float: left; width: 100%; margin-bottom: 14px; }
.person-box legend + * { clear: both; }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 50px; }
.pass-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.pass-eye:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.consents { display: grid; gap: 10px; margin-top: 6px; }
@media (min-width: 560px) { .consents { grid-template-columns: 1fr 1fr; } }
.consent { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; line-height: 1.45; color: var(--text-2); cursor: pointer; }
.consent input { appearance: none; flex: none; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: var(--s3); position: relative; cursor: pointer; transition: background .2s; }
.consent input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.consent input:checked { background: linear-gradient(90deg, #F43F5E, #8B5CF6); }
.consent input:checked::after { transform: translateX(18px); }
.consent input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.consent:has(input:checked) { border-color: rgba(139, 92, 246, .45); color: var(--text); }
.field { align-content: start; }
.action-grid.four { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.action-grid.four > a, .action-grid.four > form > button { padding: 12px 4px; font-size: 11.5px; }
.action-grid > a.danger { color: var(--danger); }
.action-grid > a.danger .ico { color: var(--danger); }
.action-grid > a, .action-grid > form > button { text-align: center; line-height: 1.25; }

/* ============================================================ CHAT: POZE */
.attach { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--s2); border: 1px solid var(--line-2); cursor: pointer; }
.attach:hover { color: var(--text); background: var(--s3); }
.attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attach:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }
.photo-preview { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; margin-bottom: 8px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-2); }
.photo-preview img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.photo-preview span { flex: 1; min-width: 0; font: 500 12.5px/1.3 var(--f-label); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-error { padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .3); color: #FECDD3; font-size: 13px; }
.bubble.has-photo { padding: 6px 6px 8px; }
.bubble.has-photo .body, .bubble.has-photo .subj { padding: 6px 8px 0; }
.bubble.has-photo time { padding-right: 8px; }
.chat-photo { position: relative; }
.chat-photo img { display: block; width: min(320px, 62vw); max-height: 420px; object-fit: cover; border-radius: 14px; background: var(--s3); }
.photo-del { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; background: rgba(11, 14, 20, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); cursor: pointer; opacity: 0; transition: opacity .15s; }
.photo-del .ico { width: 16px; height: 16px; }
.chat-photo:hover .photo-del, .photo-del:focus-visible { opacity: 1; }
@media (hover: none) { .photo-del { opacity: 1; } }
.photo-gone { display: flex; align-items: center; gap: 8px; padding: 10px 10px 2px; font-size: 13.5px; font-style: italic; color: var(--text-2); }
.msg-row.mine .photo-gone { color: rgba(248, 250, 252, .75); }
.photo-gone .ico { width: 16px; height: 16px; }
.bubble .tick { display: inline-flex; }
.chat-main .composer { background: var(--s1); }
@media (max-width: 899px) { .composer .cost-hint { display: none; } .composer { gap: 8px; padding: 10px 10px; } .composer .attach, .composer .send { width: 42px; height: 42px; } }

/* mai multe poze într-un mesaj */
.chat-photos { display: grid; gap: 4px; width: min(340px, 64vw); border-radius: 14px; overflow: hidden; }
.chat-photos.n1 { grid-template-columns: 1fr; }
.chat-photos.n2 { grid-template-columns: 1fr 1fr; }
.chat-photos.n3 { grid-template-columns: 1fr 1fr; }
.chat-photos.n3 > :first-child { grid-column: span 2; }
.chat-photos.n4 { grid-template-columns: 1fr 1fr; }
.chat-photos.many { grid-template-columns: repeat(3, 1fr); }
.chat-photos .chat-photo img { width: 100%; max-height: 420px; border-radius: 0; }
.chat-photos:not(.n1) .chat-photo img { aspect-ratio: 1 / 1 !important; height: 100%; }
.chat-photos.n3 > :first-child img { aspect-ratio: 2 / 1 !important; }
.chat-photos .photo-del { width: 30px; height: 30px; top: 6px; right: 6px; }
.photo-gone[hidden] { display: none; }
.photo-previews { margin-bottom: 8px; }
.pp-list { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.pp { position: relative; flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--s3); }
.pp img { width: 100%; height: 100%; object-fit: cover; }
.pp button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 14px; line-height: 1; background: rgba(11, 14, 20, .8); color: #fff; cursor: pointer; }
.pp-count { display: block; font: 500 11.5px/1 var(--f-label); color: var(--text-3); margin-top: 4px; }

/* Conversația nu se mai lărgește după texte lungi fără spații (nume de fișier, linkuri, erori):
   coloanele au lățime fixă, iar textele lungi se rup pe rânduri. */
.chat-main { grid-template-columns: minmax(0, 1fr); }
.chat-main > *, .composer > *, .chat-list > * { min-width: 0; }
@media (max-width: 899px) { .chat { grid-template-columns: minmax(0, 1fr); } }
.chat-error, .photo-preview span, .pp-count, .composer textarea { overflow-wrap: anywhere; word-break: break-word; }
.composer .attach, .composer .send { flex-shrink: 0; }
.bubble.has-photo { width: min(352px, 82%); max-width: none; }
.chat-photos { width: 100%; }
.chat-photo img { width: 100%; }
.recipient { display: flex; align-items: center; gap: 14px; padding: 14px; margin: 6px 0 16px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid var(--line-2); }
.recipient img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.recipient b { display: block; font-size: 16px; }
.recipient span span { font: 500 12.5px/1.3 var(--f-label); color: var(--text-2); }

/* ============================================================ CUMPĂRĂ PUNCTE */
.buy-intro { max-width: 80ch; margin-bottom: 20px; }
.buy-proc { display: grid; gap: 18px; }
@media (min-width: 640px) { .buy-proc { grid-template-columns: 120px minmax(0, 1fr); gap: 22px; } }
.buy-logo { width: 96px; height: 96px; border-radius: 18px; object-fit: contain; background: #fff; padding: 6px; }
@media (min-width: 640px) { .buy-logo { width: 120px; height: 120px; } }
.buy-logo.empty { display: grid; place-items: center; background: var(--s2); color: var(--pink-soft); border: 1px solid var(--line-2); }
.buy-logo.empty .ico { width: 40px; height: 40px; }
.buy-body h2 { font-size: 22px; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.buy-body p { color: var(--text-2); margin-bottom: 10px; overflow-wrap: anywhere; }
.buy-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.buy-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 12px; border: 1px solid rgba(139, 92, 246, .55); color: #C4B5FD; font: 600 14px/1.2 var(--f-head); transition: background .15s, border-color .15s; }
.buy-link:hover { background: rgba(139, 92, 246, .14); border-color: #A78BFA; color: #fff; }
.buy-link .ico { width: 16px; height: 16px; }

/* ============================================================ SELECTOR DE ALBUME (profil) */
.album-pick { position: relative; margin-bottom: 14px; }
.album-pick > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: var(--canvas); border: 1px solid var(--line-2); cursor: pointer; }
.album-pick > summary::-webkit-details-marker { display: none; }
.album-pick > summary:hover { border-color: var(--line-3); }
.album-pick[open] > summary { border-color: rgba(139, 92, 246, .55); }
.ap-cur { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ap-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--s2); display: grid; place-items: center; }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ap-thumb.ap-lock { color: var(--pink-soft); border: 1px solid var(--line-2); }
.ap-text { min-width: 0; display: grid; }
.ap-text b { font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-text small { font: 500 12.5px/1.4 var(--f-label); color: var(--text-2); }
.ap-count { font: 600 12px/1 var(--f-label); color: var(--text-3); white-space: nowrap; }
.ap-chev { transform: rotate(-90deg); color: var(--text-2); transition: transform .15s; flex: none; }
.album-pick[open] .ap-chev { transform: rotate(90deg); }
.album-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow-y: auto; padding: 6px; border-radius: var(--r-lg); background: var(--s2); border: 1px solid var(--line-2); box-shadow: var(--lift); }
.album-menu a { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 12px; }
.album-menu a:hover { background: rgba(255, 255, 255, .05); }
.album-menu a[aria-selected="true"] { background: rgba(139, 92, 246, .14); }
.album-menu .ap-thumb { width: 46px; height: 46px; }
.album-menu .ap-text { flex: 1; }
.ap-check { margin-left: auto; color: #C4B5FD; visibility: hidden; flex: none; }
.album-menu a[aria-selected="true"] .ap-check { visibility: visible; }
.album-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .album-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .album-grid { grid-template-columns: repeat(4, 1fr); } }
.album-panel .locked form { margin-top: 4px; }

/* ============================================================ HOUSE PARTY */
.party-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .party-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .party-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.party-card { display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--s1); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.party-card:hover { transform: translateY(-2px); border-color: var(--line-3); }
.pc-cover { position: relative; display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, rgba(244, 63, 94, .35), rgba(139, 92, 246, .35), rgba(6, 182, 212, .3)); }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; }
.pc-cover[data-empty] { display: grid; place-items: center; color: rgba(255, 255, 255, .8); }
.pc-cover[data-empty] > .ico { width: 56px; height: 56px; }
.pc-date { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-full); background: rgba(11, 14, 20, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 12px/1 var(--f-label); color: #fff; }
.pc-date .ico { width: 14px; height: 14px; }
.pc-me { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: var(--r-full); background: rgba(11, 14, 20, .72); font: 700 11.5px/1 var(--f-label); color: #FDE68A; }
.pc-me.ok { background: #10B981; color: #04291d; }
.pc-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.pc-body b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.pc-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); }
.pc-loc .ico { width: 15px; height: 15px; color: var(--pink-soft); }
.pc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pc-seats { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--f-label); color: #A5F3FC; }
.pc-seats.full { color: #FCA5A5; }
.pc-seats .ico { width: 15px; height: 15px; }
.pc-org { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--f-label); color: var(--text-2); min-width: 0; }
.pc-org img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.party-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
.party-head h1 { margin: 4px 0 12px; font-size: clamp(28px, 3.4vw, 40px); }
.party-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; color: var(--text-2); }
.party-facts span { display: inline-flex; align-items: center; gap: 7px; }
.party-facts .ico { color: var(--pink-soft); width: 18px; height: 18px; }
.party-facts .full { color: #FCA5A5; }
.party-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.party-join { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.party-join input { min-width: 240px; flex: 1; min-height: 40px; padding: 8px 14px; border-radius: var(--r-full); font-size: 14px; }
.party-grid-2 { display: grid; gap: 20px; }
@media (min-width: 1100px) { .party-grid-2 { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.party-grid-2 > div > .card + .card, .party-grid-2 > aside > .card + .card { margin-top: 20px; }
.party-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .party-photos { grid-template-columns: repeat(3, 1fr); } }
.party-photos figure { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: var(--s2); }
.party-photos img { width: 100%; height: 100%; object-fit: cover; }
.party-photos .ribbon { position: absolute; top: 8px; left: 8px; display: inline-flex; gap: 4px; align-items: center; padding: 4px 9px; border-radius: var(--r-full); background: #FFE4E6; color: #9F1239; font: 700 11px/1 var(--f-label); }
.party-photos .ribbon .ico { width: 12px; height: 12px; }
.party-photos figcaption { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.party-photos figcaption form { display: contents; }
.party-photos .pill { font: 600 11.5px/1 var(--f-label); padding: 7px 10px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: rgba(11, 14, 20, .72); color: var(--text); cursor: pointer; }
.party-photos .pill.danger { color: var(--danger); }
.party-req q { display: block; margin-top: 4px; font-size: 12.5px; color: #CBD5E1; }
.party-req .actions { flex: none; }
.party-year + .party-year { margin-top: 36px; }
.side-nav .count.hot { background: linear-gradient(90deg, #F43F5E, #8B5CF6); }
.dropzone [data-upload-note] { display: block; }
.party-req { flex-wrap: wrap; }
.party-req .actions { width: 100%; padding-left: 56px; }
.spot-box .row-t a { margin-left: auto; color: var(--pink-soft); font: 700 13px/1 var(--f-label); }

/* ============================================================ CALENDAR ZILE DE NAȘTERE */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; margin-bottom: 16px; }
.cal-month { font: 700 20px/1 var(--f-head); min-width: 150px; text-align: center; }
.cal-next .ico { transform: rotate(180deg); }
.cal-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-filters a { padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); font: 600 13.5px/1 var(--f-label); color: var(--text-2); }
.cal-filters a:hover { color: var(--text); border-color: var(--line-3); }
.cal-filters a[aria-current="page"] { background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .7); color: #fff; }
.cal-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--f-label); color: var(--text-2); }
.cal-legend .ico { width: 17px; height: 17px; color: #C4B5FD; }
.cal { padding: 14px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-head { margin-bottom: 8px; padding: 0 4px; }
.cal-head span { font: 700 11.5px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cal-day { display: flex; flex-direction: column; gap: 5px; min-height: 150px; padding: 9px 9px 8px; border-radius: 12px; background: rgba(11, 14, 20, .35); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.cal-day:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .03); }
.cal-day.empty { opacity: .55; }
.cal-day.today { border-color: rgba(139, 92, 246, .8); background: rgba(139, 92, 246, .1); }
.cal-day.sel { box-shadow: 0 0 0 2px var(--cyan); }
.cd-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cd-top b { font: 700 16px/1 var(--f-head); }
.cd-dow { display: none; font: 500 12px/1 var(--f-label); color: var(--text-3); }
.cd-today { padding: 3px 7px; border-radius: 999px; background: #8B5CF6; color: #fff; font: 700 10px/1 var(--f-label); letter-spacing: .06em; }
.cd-n { margin-left: auto; font: 600 12px/1 var(--f-label); color: var(--text-3); }
.cd-person { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 7px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font: 500 12.5px/1.2 var(--f-label); min-width: 0; }
.cd-person .ico-sm { width: 13px; height: 13px; color: #C4B5FD; flex: none; }
.cd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-age { color: var(--text-3); flex: none; }
.cd-more { font: 500 11.5px/1.2 var(--f-label); color: var(--text-3); padding: 2px 2px 0; }
.cal-pad { min-height: 150px; }
.cal-detail { margin-top: 18px; }
.bday-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bday-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .bday-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bday { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: rgba(11, 14, 20, .45); border: 1px solid var(--line-2); }
.bday-av { flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: rgba(139, 92, 246, .25); display: grid; place-items: center; }
.bday-av img { width: 100%; height: 100%; object-fit: cover; }
.bday-av span { font: 700 16px/1 var(--f-head); color: #DDD6FE; }
.bday-body { display: grid; gap: 3px; min-width: 0; }
.bday-body b { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.bday-body b .ico-sm { color: #C4B5FD; width: 15px; height: 15px; }
.bday-body > span { font-size: 13.5px; color: var(--text-2); }
.bday-body small { font: 500 12.5px/1.3 var(--f-label); color: var(--text-3); }
.bday-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Pe ecrane înguste calendarul devine o listă a zilelor cu aniversări */
@media (max-width: 899px) {
  .cal-head, .cal-pad, .cal-day.empty { display: none; }
  .cal-grid { grid-template-columns: 1fr; }
  .cal-day { min-height: 0; }
  .cd-dow { display: inline; }
  .cal-legend { display: none; }
}
.cal-fav { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); font: 600 13.5px/1 var(--f-label); color: var(--text-2); }
.cal-fav .ico { width: 16px; height: 16px; }
.cal-fav:hover { color: var(--text); border-color: var(--line-3); }
.cal-fav.on { background: rgba(244, 63, 94, .16); border-color: rgba(244, 63, 94, .6); color: #fff; }
.cal-fav.on .ico { color: var(--coral); }
@media (max-width: 1599px) { .cal-legend { display: none; } }

/* ============================================================ VIP */
.vip-status { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.vip-status.on { background: linear-gradient(135deg, rgba(250, 204, 21, .12), rgba(139, 92, 246, .14)), var(--s1); border-color: rgba(250, 204, 21, .45); }
.vip-crown { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(250, 204, 21, .14); color: #FACC15; }
.vip-crown .ico { width: 30px; height: 30px; }
.vip-status:not(.on) .vip-crown { background: var(--s2); color: var(--text-3); }
.vip-main { flex: 1; min-width: 0; }
.vip-main h2 { margin: 2px 0 10px; font-size: 22px; }
.vip-days { color: var(--text-2); font-weight: 600; font-size: 17px; }
.vip-bar { height: 12px; border-radius: 999px; background: var(--s3); overflow: hidden; margin: 4px 0 10px; }
.vip-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FACC15, #FB923C, #F43F5E); }
.vip-perks { display: grid; gap: 12px; margin-bottom: 26px; }
@media (min-width: 900px) { .vip-perks { grid-template-columns: repeat(3, 1fr); } }
.vip-perk { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); }
.vip-perk .ico { color: #FACC15; width: 22px; height: 22px; margin-bottom: 4px; }
.vip-perk b { font-size: 15px; }
.vip-perk span { font-size: 13.5px; color: var(--text-2); }
.vip-h { margin: 0 0 8px; }
.side-nav .count.vip { background: #FACC15; color: #1f1a05; }

/* Evidențiere: administratori (albastru) și VIP activ (verde), margine de 5px */
.pcard.is-admin, .hero-card.is-admin { border: 5px solid #2563EB; }
.pcard.is-vip, .hero-card.is-vip { border: 5px solid #22C55E; }

/* ============================================================ APLICAȚIA ȘI NOTIFICĂRILE */
.app-grid { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 1000px) { .app-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.app-grid .card + .card { margin-top: 0; }
.app-ok { display: flex; align-items: center; gap: 8px; color: #86EFAC; font-weight: 600; }
.app-ok .ico { width: 20px; height: 20px; }
.app-steps { margin: 0 0 12px; padding-left: 1.2em; color: var(--text-2); }
.app-steps li { margin-bottom: 6px; }
.app-detail { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-alerts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.app-alerts h2 { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.app-alerts h2 .ico { color: var(--pink-soft); }
.app-alerts p { margin: 0; }
.install-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border-radius: var(--r-lg); background: linear-gradient(90deg, rgba(244, 63, 94, .16), rgba(139, 92, 246, .16)); border: 1px solid rgba(139, 92, 246, .45); }
.install-banner img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.install-banner p { margin: 0; font-size: 14px; flex: 1; }
.install-banner p b { display: block; }

/* ============================================================ ALERTE DE CĂUTARE */
.save-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; margin-bottom: 18px; background: linear-gradient(90deg, rgba(139, 92, 246, .14), rgba(6, 182, 212, .1)), var(--s1); border-color: rgba(139, 92, 246, .4); }
.sa-text { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 220px; }
.sa-text .ico { color: #C4B5FD; width: 22px; height: 22px; flex: none; }
.sa-text b { display: block; font-size: 14.5px; }
.sa-text small { color: var(--text-2); font-size: 13px; }
.alert-list { display: grid; gap: 12px; }
.alert-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.alert-item + .alert-item { margin-top: 0; }
.alert-item.off { opacity: .6; }
.ai-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ai-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(139, 92, 246, .16); color: #C4B5FD; flex: none; }
.ai-main b { display: block; font-size: 15.5px; }
.ai-main small { color: var(--text-2); font-size: 13px; }
.ai-main .badge-count { margin-left: auto; padding: 0 9px; height: 22px; }
.ai-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ai-acts form { display: contents; }
.ai-acts .chip { padding: 6px 12px; font-size: 12.5px; }
@media (max-width: 640px) {
  .install-banner { flex-wrap: wrap; position: relative; padding-right: 44px; }
  .install-banner p { flex: 1 1 calc(100% - 60px); }
  .install-banner .btn { margin-left: 58px; }
  .install-banner [data-install-hide] { position: absolute; top: 8px; right: 8px; }
}