[hidden] { display: none !important; }
/* Community: voices wall, sign-in box, feedback, account and admin pages */
.k-narrow { width: min(820px, calc(100% - 32px)); margin-inline: auto; } .k-wide { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
.k-note { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.k-note.warn { border-color: rgba(255, 201, 100, .45); color: #ffd98a; } html[data-theme=light] .k-note.warn { color: #8a5a00; }
.k-toast { position: fixed; z-index: 300; bottom: 24px; inset-inline-start: 50%; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 13px 20px; border-radius: 14px; background: #101441; color: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 18px 50px rgba(0,0,0,.45); transition: opacity .25s, transform .25s; max-width: min(92vw, 460px); font-size: 15px; }
html[dir=rtl] .k-toast { transform: translate(50%, 30px); } .k-toast.show { opacity: 1; transform: translate(-50%, 0); } html[dir=rtl] .k-toast.show { transform: translate(50%, 0); } .k-toast.bad { background: #5a1420; border-color: rgba(255, 120, 120, .5); }
.k-auth { padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; max-width: 460px; margin-inline: auto; }
.k-auth form { display: grid; gap: 14px; } .k-sub { color: var(--muted); font-size: 15px; }
.k-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
html[data-theme=light] .k-tabs { background: rgba(11,15,59,.06); }
.k-tabs button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 14.5px var(--font-b); cursor: pointer; transition: background .2s, color .2s; } html[dir=rtl] .k-tabs button { font-family: Cairo, sans-serif; }
.k-tabs button.on { background: linear-gradient(100deg, var(--violet-d), #2a8fe6); color: #fff; box-shadow: 0 6px 20px rgba(91, 63, 240, .4); }
.k-tabs-lg { margin: 18px 0; } .k-tabs-lg button { min-height: 46px; padding: 0 22px; }
.k-link { background: none; border: 0; color: var(--cyan); cursor: pointer; font: 600 14px var(--font-b); padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; justify-self: start; } .k-link.bad { color: #ff8a8a; } html[data-theme=light] .k-link.bad { color: #b3261e; }
.k-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; flex-wrap: wrap; } .k-bar > div { flex: 1; min-width: 160px; } .k-bar b { display: block; } .k-bar small { color: var(--muted); direction: ltr; unicode-bidi: plaintext; }
.k-inline { display: flex; gap: 12px; align-items: flex-end; padding: 16px; margin-top: 12px; flex-wrap: wrap; } .k-inline .ct-f { flex: 1; min-width: 200px; }
.k-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 6px; }
.k-h2 { font: 700 22px var(--font-h); margin: 32px 0 14px; } html[dir=rtl] .k-h2 { font-family: Cairo, sans-serif; } .k-h2 small { color: var(--muted); font-weight: 500; }
.k-list { display: grid; gap: 14px; } .k-empty { color: var(--muted); padding: 10px 2px; }
.k-item { padding: 18px 20px; display: grid; gap: 10px; } .k-item h4 { font: 600 17px var(--font-h); } html[dir=rtl] .k-item h4 { font-family: Cairo, sans-serif; } .k-item p { color: var(--muted); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.k-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .k-meta small { color: var(--muted); font-size: 13px; margin-inline-start: auto; }
.k-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; font: 600 12px var(--font-b); border: 1px solid var(--line); background: var(--glass); color: var(--silver); }
.k-chip.suggestion { color: #7fe6f7; border-color: rgba(34, 211, 238, .4); } .k-chip.complaint { color: #ffb3a6; border-color: rgba(255, 122, 107, .45); }
.k-chip.st-new, .k-chip.cm-pending { color: #ffd98a; border-color: rgba(255, 201, 100, .4); } .k-chip.st-in_review { color: #9bb8ff; border-color: rgba(120, 150, 255, .45); } .k-chip.st-planned { color: #d6b8ff; border-color: rgba(180, 130, 255, .45); }
.k-chip.st-resolved, .k-chip.cm-approved { color: #7cf0c4; border-color: rgba(124, 240, 196, .4); } .k-chip.st-declined, .k-chip.cm-rejected { color: #ff9a9a; border-color: rgba(255, 120, 120, .4); }
html[data-theme=light] .k-chip { color: #2a2f63; } html[data-theme=light] .k-chip.suggestion { color: #086478; } html[data-theme=light] .k-chip.complaint { color: #a83a2a; } html[data-theme=light] .k-chip.st-new, html[data-theme=light] .k-chip.cm-pending { color: #8a5a00; } html[data-theme=light] .k-chip.st-resolved, html[data-theme=light] .k-chip.cm-approved { color: #0b7a55; } html[data-theme=light] .k-chip.st-declined, html[data-theme=light] .k-chip.cm-rejected { color: #b3261e; } html[data-theme=light] .k-chip.st-in_review { color: #2f4fc0; } html[data-theme=light] .k-chip.st-planned { color: #6a3fc0; }
.k-reply { border-inline-start: 3px solid var(--violet); padding: 8px 14px; border-radius: 4px 12px 12px 4px; background: rgba(122, 92, 255, .12); } .k-reply b { font-size: 13px; color: var(--cyan); } .k-reply p { color: var(--ink); margin-top: 4px; }
.k-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.k-sel, .k-item textarea, .k-edit textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--ink); font: 400 15px/1.5 var(--font-b); } html[data-theme=light] .k-sel, html[data-theme=light] .k-item textarea, html[data-theme=light] .k-edit textarea { background: rgba(255,255,255,.9); }
.k-sel option { color: #111; } .k-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .k-filters .k-sel { width: auto; min-width: 190px; }
.k-edit { display: grid; gap: 12px; padding-top: 6px; }
.k-hint { color: var(--muted); font-size: 14px; }
.k-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 8px; } .k-stats > div { padding: 18px; border-radius: 18px; } .k-stats b { font: 800 34px var(--font-h); display: block; } .k-stats small { color: var(--muted); }
.k-rate { display: flex; gap: 6px; direction: ltr; } .k-rate button { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); color: var(--muted); font-size: 28px; cursor: pointer; transition: transform .15s, color .2s, background .2s; } .k-rate button:hover { transform: translateY(-2px); } .k-rate button.on { color: #ffc857; background: rgba(255, 200, 87, .16); border-color: rgba(255, 200, 87, .55); }

/* voices */
#voices { padding-block: clamp(50px, 7vw, 90px); }
.vo-head { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; margin-bottom: 26px; }
.vo-score { padding: 18px 26px; display: grid; gap: 4px; justify-items: center; } .vo-score b { font: 800 48px/1 var(--font-h); } .vo-score small { color: var(--muted); }
.vo-filters { margin-bottom: 22px; }
.vo-wall { columns: 3 300px; column-gap: 18px; } .vc { break-inside: avoid; margin: 0 0 18px; padding: 24px 22px 20px; border-radius: 22px; position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; gap: 12px; transition: transform .3s var(--ease), border-color .3s; }
.vc:hover { transform: translateY(-4px); border-color: hsl(var(--h) 80% 65% / .55); }
.vc::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; inset-inline-end: -70px; top: -80px; background: hsl(var(--h) 85% 60% / .22); filter: blur(40px); pointer-events: none; }
.vc.feat { border-color: rgba(255, 200, 87, .6); box-shadow: 0 0 0 1px rgba(255, 200, 87, .25), 0 24px 60px rgba(255, 170, 60, .15); }
.vc-q { position: absolute; top: 4px; inset-inline-end: 18px; font: 800 84px/1 Georgia, serif; color: hsl(var(--h) 80% 65% / .22); pointer-events: none; }
.vc-badge { justify-self: start; padding: 3px 11px; border-radius: 999px; font: 700 11.5px var(--font-b); background: linear-gradient(100deg, #ffc857, #ff9d5c); color: #3a2200; }
.vc p { color: var(--ink); line-height: 1.8; font-size: 16px; position: relative; word-break: break-word; }
.vc footer { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .vc footer b { display: block; font-size: 15px; } .vc footer small { color: var(--muted); font-size: 12.5px; }
.vc-av { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 17px var(--font-h); color: #fff; background: linear-gradient(135deg, hsl(var(--h, 260) 80% 58%), hsl(calc(var(--h, 260) + 50) 85% 52%)); }
.k-bar .vc-av { --h: 262; } .vc-lang { margin-inline-start: auto; font: 700 11px var(--font-b); padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); }
.stars { position: relative; display: inline-block; color: rgba(160, 165, 210, .35); letter-spacing: 2px; font-size: 18px; line-height: 1; white-space: nowrap; direction: ltr; } .stars i { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #ffc857; font-style: normal; white-space: nowrap; }
.vo-empty { padding: 40px 24px; text-align: center; display: grid; gap: 18px; justify-items: center; color: var(--muted); border-radius: 24px; } .vo-empty p { max-width: 52ch; }
.vo-more { margin-top: 10px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .vc, .k-toast { transition: none; } }
/* inline bilingual spans (pricing): show only the page language */
span.l-en, span.l-ar { display: inline; } span.l-ar { display: none; } html[lang="ar"] span.l-ar { display: inline; } html[lang="ar"] span.l-en { display: none; }
.pr-logo { height: 72px !important; max-width: 82% !important; }
.k-step { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; margin-inline-end: 10px; font: 700 13px var(--font-h); font-style: normal; color: #fff; background: linear-gradient(135deg, #7a5cff, #22a6ee); vertical-align: middle; }
.k-group { font: 600 13px var(--font-b); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; } html[dir=rtl] .k-group { letter-spacing: 0; font-size: 14px; font-family: Cairo, sans-serif; }
.ct-topics + .k-group { margin-top: 18px; }
.k-newhint { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3); font-size: 15px; color: var(--ink); } .k-newhint svg { width: 22px; flex: none; margin-top: 1px; stroke: #22d3ee; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Account shell */
.ac-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.ac-side { padding: 18px; display: grid; gap: 14px; position: sticky; top: 96px; }
.ac-me { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .ac-me b { display: block; } .ac-me small { color: var(--muted); font-size: 13px; direction: ltr; unicode-bidi: plaintext; word-break: break-all; } .ac-me .vc-av { --h: 262; width: 48px; height: 48px; font-size: 20px; }
.ac-nav { display: grid; gap: 4px; }
.ac-nav button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: 500 15px var(--font-b); cursor: pointer; text-align: start; transition: background .2s, color .2s; } html[dir=rtl] .ac-nav button { font-family: Cairo, sans-serif; }
.ac-nav button:hover { background: var(--glass-2); color: var(--ink); } .ac-nav button.on { background: linear-gradient(100deg, rgba(91,63,240,.9), rgba(42,143,230,.9)); color: #fff; box-shadow: 0 8px 22px rgba(91, 63, 240, .35); }
.ac-nav svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ac-nav em { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #ff7a6b; color: #fff; font: 700 12px var(--font-b); font-style: normal; }
.ac-main { min-width: 0; } .ac-pane[hidden] { display: none; }
.ac-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.ac-tile { padding: 18px; text-align: start; cursor: pointer; border: 1px solid var(--line); color: var(--ink); font: inherit; display: grid; gap: 4px; transition: transform .2s, border-color .2s; } .ac-tile:hover { transform: translateY(-3px); border-color: var(--violet); } .ac-tile b { font: 800 34px/1 var(--font-h); } .ac-tile small { color: var(--muted); font-size: 13.5px; }
.ac-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ac-card { padding: 22px; display: grid; gap: 10px; align-content: start; } .ac-card h3 { font: 700 18px var(--font-h); } html[dir=rtl] .ac-card h3 { font-family: Cairo, sans-serif; } .ac-card p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.ac-card .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, rgba(122,92,255,.4), rgba(34,211,238,.25)); border: 1px solid var(--line); } .ac-card .ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ac-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .ac-empty-line { padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; text-align: center; }
.ac-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .ac-head .k-h2 { margin: 0; }
.ac-filters { margin: 16px 0; } .ac-form { gap: 14px; margin-bottom: 14px; } .ac-pane > .k-h2 { margin-top: 0; }
@media (max-width: 960px) {
  .ac-shell { grid-template-columns: 1fr; } .ac-side { position: static; } .ac-nav { grid-template-columns: 1fr 1fr; } .ac-tiles { grid-template-columns: 1fr 1fr; } .ac-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .ac-nav { grid-template-columns: 1fr; } }

/* admin: promo codes and Gold cards */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pr-code { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .pr-code.off { opacity: .55; }
.pr-plain { display: flex; flex-direction: column; gap: 4px; } .pr-plain b { font: 700 20px/1.2 var(--font-d, inherit); letter-spacing: .06em; } .pr-plain span { color: var(--mute, #9aa3b5); font-size: 14px; }
.pr-goldcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; color: #2b1d00; background: linear-gradient(135deg, #f7e08a 0%, #d9a93a 45%, #f3d77a 70%, #b98621 100%); box-shadow: 0 8px 26px rgba(217,169,58,.28), inset 0 1px 0 rgba(255,255,255,.55); overflow: hidden; }
.pr-goldcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); pointer-events: none; }
.pr-goldcard small { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; opacity: .8; } .pr-goldcard b { font: 800 26px/1.1 var(--font-d, inherit); letter-spacing: .08em; } .pr-goldcard span { font-weight: 600; font-size: 14px; }

/* account: plan & balance */
.pl-card { display: grid; gap: 12px; margin-bottom: 16px; } .pl-card h4 { margin: 8px 0 0; font-size: 15px; } .pl-card h4 small { font-weight: 400; color: var(--muted); margin-inline-start: 8px; }
.pl-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; } .pl-head h3 { margin: 0; }
.pl-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pl-warn { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 122, 107, .5); background: rgba(255, 122, 107, .12); font-weight: 600; }
.pl-meter { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; } html[data-theme=light] .pl-meter { background: rgba(11, 15, 59, .1); } .pl-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7a5cff, #22d3ee); transition: width .4s; } .pl-meter i.hi { background: linear-gradient(90deg, #ff9a6b, #ff5a6b); }
.pl-bonus { margin: 0; color: #f0c15a; font-size: 14px; }
.pl-devs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pl-devs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); } .pl-devs small { display: block; color: var(--muted); }