:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --ink: #351810;
  --muted: #786b66;
  --line: #e6dedb;
  --accent: #c91624;
  --accent-soft: #fcebed;
  --teal: #2d7753;
  --teal-soft: #e9f4ee;
  --blue-soft: #edf3f0;
  --radius: 8px;
  --shadow: 0 12px 32px rgba(53, 24, 16, .09);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; color: var(--ink); background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; max-width: 520px; margin: 0 auto; background: var(--bg); }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  height: 68px; padding: 10px 18px; border-bottom: 1px solid rgba(53,24,16,.07); background: rgba(255,255,255,.94); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; min-width: 0; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.12; text-decoration: none; letter-spacing: 0; }
.brand > span:last-child { max-width: 190px; }
.brand-mark {
  display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: white;
  background: var(--accent); font-family: Georgia, serif; font-size: 25px; line-height: 1;
}
.avatar-button {
  position: relative; overflow: hidden; border: 0; width: 38px; height: 38px; border-radius: 50%; color: var(--ink);
  background: #dfe8ef; font-size: 12px; font-weight: 800;
}
.avatar-button-image { width: 100%; height: 100%; object-fit: cover; }
.online-dot { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border: 2px solid var(--bg); border-radius: 50%; background: var(--teal); }
main { padding: 4px 18px calc(92px + var(--safe-bottom)); outline: none; }
.page { animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(29px, 8vw, 39px); line-height: 1.04; letter-spacing: 0; }
h2 { margin: 0; font-size: 21px; letter-spacing: 0; }
h3 { margin: 0; font-size: 16px; }
p { line-height: 1.5; }
.muted { color: var(--muted); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 2px 14px; }
.section-head a { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 750; }
.hero {
  position: relative; overflow: hidden; min-height: 455px; padding: 0; border-radius: 8px;
  color: white; background: var(--ink); box-shadow: var(--shadow);
}
.hero::after { content: none; }
.rodanika-hero::before { content: none; }
.rodanika-hero > img { position: absolute; inset: 0 0 auto; width: 100%; height: 305px; object-fit: cover; object-position: 50% 50%; }
.hero-content { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; min-height: 150px; padding: 20px 22px; background: #351810; text-shadow: none; }
.hero .eyebrow { color: #fff; }
.hero h1 { max-width: 330px; font-size: 31px; }
.hero p { max-width: 285px; margin: 8px 0 15px; color: #fff; font-size: 13px; }
.hero strong { color: white; }
.hero-actions { display: flex; gap: 10px; position: relative; z-index: 2; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 17px;
  border: 0; border-radius: 8px; color: white; background: var(--accent); font-weight: 750; text-decoration: none;
}
.button.secondary { color: var(--ink); background: rgba(255,255,255,.96); text-shadow: none; }
.button.ghost { color: var(--ink); background: #edf0f3; }
.button.full { width: 100%; }
.button:active { transform: scale(.98); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.stat { padding: 15px 12px; border-radius: 18px; background: var(--surface); }
.stat b { display: block; font-size: 22px; letter-spacing: -.6px; }
.stat span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.quick-card {
  position: relative; min-height: 132px; padding: 17px; border: 0; border-radius: 22px; color: var(--ink);
  background: var(--surface); box-shadow: 0 8px 26px rgba(23,38,61,.045); text-align: left; text-decoration: none;
}
.quick-card:nth-child(1) { background: var(--accent-soft); }
.quick-card:nth-child(2) { background: var(--teal-soft); }
.quick-card .icon-bubble { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 20px; border-radius: 13px; background: rgba(255,255,255,.78); font-size: 20px; }
.quick-card.learning-shortcut { grid-column: 1 / -1; min-height: 112px; background: linear-gradient(135deg,#ddf4ed,#edf8f4); }
.home-onboarding { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; margin-bottom:12px; padding:15px; border-radius:21px; color:#17263d; background:#fff1ec; text-decoration:none; box-shadow:var(--shadow); }.home-onboarding > span { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; color:white; background:var(--accent); font-size:19px; font-weight:900; }.home-onboarding p,.home-onboarding b,.home-onboarding small { display:block; }.home-onboarding p { margin:0 0 3px; color:var(--accent); font-size:9px; font-weight:850; text-transform:uppercase; }.home-onboarding b { font-size:13px; }.home-onboarding small { margin-top:4px; color:var(--muted); font-size:9px; }.home-onboarding > i { color:var(--accent); font-style:normal; font-size:20px; }
.quick-card span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.news-card { overflow: hidden; border-radius: 23px; background: var(--surface); box-shadow: 0 8px 30px rgba(23,38,61,.05); }
.news-visual { position: relative; height: 144px; padding: 20px; background: linear-gradient(135deg,#f8c9bb,#ff7f61); }
.news-visual.teal { background: linear-gradient(135deg,#bfeee4,#25b99b); }
.news-visual.blue { background: linear-gradient(135deg,#cad8fb,#6d8fe9); }
.news-visual::after { content: ""; position: absolute; right: 24px; bottom: -35px; width: 130px; height: 130px; border: 25px solid rgba(255,255,255,.26); border-radius: 50%; }
.news-body { padding: 18px; }
.tag { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 850; letter-spacing: .7px; text-transform: uppercase; }
.news-body p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.news-list { display: grid; gap: 14px; }
.page-head { margin: 8px 2px 22px; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.search {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0 15px; border: 1px solid transparent;
  border-radius: 17px; background: var(--surface); box-shadow: 0 7px 20px rgba(23,38,61,.045);
}
.search:focus-within { border-color: #b9c5d2; }
.search input { width: 100%; height: 50px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-icon { color: var(--muted); font-size: 20px; }
.chips { display: flex; gap: 8px; margin: 0 -18px 18px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 35px; padding: 0 13px; border: 0; border-radius: 999px; color: var(--muted); background: #e9ebee; font-size: 12px; font-weight: 700; }
.chip.active { color: white; background: var(--ink); }
.directory-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 11px; color: var(--muted); font-size: 12px; }
.data-badge { padding: 5px 8px; border-radius: 999px; color: #16836e; background: var(--teal-soft); font-weight: 750; }
.data-badge.demo { color: #a64c34; background: var(--accent-soft); }
.people-list { display: grid; gap: 9px; }
.person {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 13px;
  border-radius: 18px; background: var(--surface);
}
.person-avatar { display: grid; place-items: center; overflow: hidden; width: 46px; height: 46px; border-radius: 16px; color: #38516e; background: #e9eef4; font-size: 12px; font-weight: 850; }
.person-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: 4px; font-size: 14px; }
.person p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.person-direction { max-width: 90px; padding: 5px 7px; border-radius: 9px; color: #5b6f85; background: #f1f3f5; font-size: 9px; text-align: center; }
.person-actions { display: grid; justify-items: end; gap: 7px; }
.person-message { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #f0c5ca; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 16px; line-height: 1; }
.person-message:active { transform: scale(.94); }
.empty { padding: 34px 20px; border-radius: 22px; color: var(--muted); background: white; text-align: center; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.service-card { min-height: 145px; padding: 16px; border: 0; border-radius: 22px; color: var(--ink); background: var(--surface); text-align: left; }
.service-card .service-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 24px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-size: 19px; }
.service-card p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.approval-list { display:grid; gap:9px; margin-bottom:18px; }.approval-card { padding:14px; border-radius:8px; background:var(--surface); }.approval-card h3 { margin:9px 0 7px; font-size:14px; }.approval-card > b,.approval-card > small { display:block; }.approval-card > small { margin-top:3px; color:var(--muted); font-size:10px; }.approval-card p { margin:9px 0 0; font-size:12px; }.approval-card > div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }.approval-card .button { min-width:0; padding-inline:8px; font-size:11px; }.request-route { display:block; margin:7px 0; color:var(--muted); line-height:1.4; }
.request-list { display: grid; gap: 9px; }
.request { display: flex; justify-content: space-between; gap: 12px; padding: 15px; border-radius: 17px; background: white; }
.request small { color: var(--muted); }
.status { align-self: start; padding: 5px 8px; border-radius: 999px; color: #16836e; background: var(--teal-soft); font-size: 10px; font-weight: 800; }
.form-card { padding: 19px; border-radius: 24px; background: white; }
.field { display: grid; gap: 7px; margin-bottom: 15px; }
.field label { font-size: 12px; font-weight: 750; }
.field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: 0; color: var(--ink); background: #fafbfc; }
.field select { height: 48px; padding: 0 12px; }
.field textarea { min-height: 116px; padding: 12px; resize: vertical; }
.field select:focus, .field textarea:focus { border-color: #9aaaba; }
.profile-card { padding: 25px; border-radius: 28px; color: white; background: var(--ink); text-align: center; }
.profile-avatar { display: grid; place-items: center; overflow: hidden; width: 76px; height: 76px; margin: 0 auto 14px; border: 4px solid rgba(255,255,255,.14); border-radius: 26px; color: var(--ink); background: #dce8f0; font-size: 22px; font-weight: 850; }
.profile-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.profile-card p { margin: 6px 0 0; color: #b9c5d2; font-size: 13px; }
.profile-photo-note { display: block; margin-top: 10px; color: #b9c5d2; font-size: 11px; line-height: 1.35; }
.photo-actions { display: flex; justify-content: center; gap: 9px; margin-top: 15px; }
.photo-upload, .photo-actions button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px;
  border: 0; border-radius: 12px; color: white; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 800;
}
.photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-actions button { color: #ffab96; background: transparent; }
.settings { margin-top: 16px; overflow: hidden; border-radius: 22px; background: white; }
.setting { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 17px; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting span { color: var(--muted); font-size: 13px; }
.skeleton { height: 72px; border-radius: 18px; background: linear-gradient(90deg,#e9ebee,#f6f7f8,#e9ebee); background-size: 200%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.bottom-nav {
  position: fixed; z-index: 30; left: 50%; bottom: 0; display: grid; grid-template-columns: repeat(8,minmax(0,1fr));
  width: min(520px,100%); padding: 8px 8px calc(7px + var(--safe-bottom)); transform: translateX(-50%);
  border-top: 1px solid rgba(23,38,61,.07); background: rgba(255,255,255,.93); backdrop-filter: blur(18px);
}
.bottom-nav a { display: grid; justify-items: center; gap: 3px; padding: 4px; border-radius: 12px; color: #8b96a6; font-size: 9px; text-decoration: none; }
.bottom-nav a span:last-child { white-space: nowrap; }
.bottom-nav a.active { color: var(--accent); font-weight: 800; }
.nav-icon { font-size: 21px; line-height: 1; }
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(86px + var(--safe-bottom)); max-width: calc(100% - 40px);
  padding: 12px 17px; transform: translate(-50%,20px); border-radius: 13px; color: white; background: var(--ink);
  box-shadow: var(--shadow); font-size: 13px; opacity: 0; pointer-events: none; transition: .24s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }
@media (min-width: 700px) {
  body { padding: 28px 0; }
  .app-shell { min-height: calc(100vh - 56px); border-radius: 34px; box-shadow: 0 24px 80px rgba(23,38,61,.14); overflow: hidden; }
  .topbar { position: relative; }
  .bottom-nav { bottom: 28px; border-radius: 0 0 34px 34px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }


.personal-card {
  margin-top: 12px; padding: 19px; border-radius: 24px; color: var(--ink);
  background: linear-gradient(135deg, #fff7d9 0%, #fff 58%, #eef9f6 100%);
  box-shadow: 0 8px 30px rgba(23,38,61,.05);
}
.personal-card.profile { margin-top: 14px; }
.personal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.personal-head .eyebrow { margin-bottom: 3px; color: #ad7b00; }
.personal-head h2 { font-size: 18px; }
.personal-badge { padding: 5px 8px; border-radius: 999px; color: #946a00; background: #ffecaa; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.identity-card { margin-top: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.identity-card h2 { margin-top: 3px; font-size: 18px; }
.identity-card p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.identity-card > button { margin-top: 12px; border: 0; color: var(--accent); background: transparent; font-weight: 800; }
.identity-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 13px; }
.identity-form input { min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: #fafbfc; }
.identity-form button { height: 46px; padding: 0 13px; border: 0; border-radius: 14px; color: white; background: var(--accent); font-weight: 800; }
.identity-form button:disabled, .identity-form input:disabled { opacity: .55; }
.register-actions { margin-top: 14px; }
.personal-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.personal-values > div { min-width: 0; padding: 13px; border: 1px solid rgba(23,38,61,.06); border-radius: 17px; background: rgba(255,255,255,.72); }
.personal-values p { margin: 8px 0 4px; color: var(--muted); font-size: 10px; }
.personal-values b { display: block; overflow-wrap: anywhere; font-size: 17px; line-height: 1.2; letter-spacing: -.35px; }
.personal-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; font-size: 13px; font-style: normal; font-weight: 900; }
.personal-icon.coin { color: #8b6400; background: #ffe8a0; }
.personal-icon.hours { color:#176f60; background:#dff5ef; }
.personal-icon.money { color:#245ba7; background:#e4efff; }
.personal-values small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.vote-summary,.vote-complete{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:18px;border-radius:23px;background:white}.vote-summary div{display:grid;place-items:center;min-width:72px;padding:12px;border-radius:18px;background:#fff0c7}.vote-summary b{font-size:24px}.vote-summary span,.vote-summary p,.vote-complete p,.vote-note{margin:0;color:var(--muted);font-size:11px}.vote-complete{background:#fff7df}.vote-complete>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:#8b6400;background:#ffe8a0;font-size:22px}.vote-leaders{display:grid;gap:8px}.vote-leaders article{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:10px;padding:13px 15px;border-radius:18px;background:white}.vote-leaders article span{display:grid;place-items:center;width:30px;height:30px;border-radius:11px;background:#f0f2f5;font-weight:800}.vote-leaders article strong{text-align:center;color:var(--accent)}.vote-note{text-align:center;margin-top:10px}
.personal-icon.tenure { color: #147965; background: #dff5ef; }


.personal-action {
  width: 100%; min-height: 39px; margin-top: 13px; border: 0; border-radius: 12px;
  color: #745400; background: rgba(255,226,128,.55); font-size: 12px; font-weight: 800;
}
.game-balance {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding: 20px;
  border-radius: 24px; color: white; background: linear-gradient(135deg,#17263d,#28466a); box-shadow: var(--shadow);
}
.game-balance span { color: #c3cfdb; font-size: 12px; }
.game-balance b { grid-row: 1 / 3; grid-column: 2; font-size: 35px; letter-spacing: -1.5px; }
.game-balance small { color: #ffab96; }
.game-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game-rule { min-height: 155px; padding: 15px; border-radius: 20px; background: white; }
.game-rule > b { float: right; color: #16836e; font-size: 15px; }
.game-rule h3 { clear: both; padding-top: 14px; font-size: 14px; }
.game-rule p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.game-tag { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: #8b6400; background: #fff0b8; font-size: 10px; font-weight: 850; }
.game-history { display: grid; gap: 8px; }
.game-history article { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 13px; border-radius: 17px; background: white; }
.game-history article div { min-width: 0; }
.game-history article b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.game-history article small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.game-history article strong { color: #16836e; font-size: 14px; }


.all-modules-banner { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; margin-bottom:12px; padding:15px; border-radius:20px; color:white; background:linear-gradient(135deg,#17263d,#2f5278); text-decoration:none; box-shadow:var(--shadow); }
.all-modules-banner > span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,.12); font-size:20px; }
.all-modules-banner b,.all-modules-banner small { display:block; }
.all-modules-banner small { margin-top:4px; color:#bec9d5; font-size:10px; }
.all-modules-banner > i { color:#ffab96; font-style:normal; font-size:20px; }
.module-hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.module-card-ui { min-height:142px; padding:15px; border-radius:21px; color:var(--ink); background:white; text-decoration:none; box-shadow:0 7px 24px rgba(23,38,61,.04); }
.module-card-ui.coral { background:#fff1ec; }.module-card-ui.teal { background:#e9f8f4; }.module-card-ui.blue { background:#edf3ff; }.module-card-ui.amber { background:#fff7df; }
.module-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:21px; border-radius:13px; background:rgba(255,255,255,.78); font-size:18px; font-weight:800; }
.module-card-ui b,.module-card-ui small { display:block; }
.module-card-ui b { font-size:14px; }.module-card-ui small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.35; }
.module-back { display:inline-flex; margin:4px 0 15px; color:var(--accent); font-size:12px; font-weight:800; text-decoration:none; }
.progress { overflow:hidden; height:8px; margin:14px 0; border-radius:99px; background:#e4e7eb; }.progress i { display:block; height:100%; border-radius:99px; background:var(--teal); transition:.25s; }
.check-list { display:grid; gap:9px; }.check-list button { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:11px; min-height:62px; padding:12px; border:0; border-radius:17px; color:var(--ink); background:white; text-align:left; }
.check-list button span { display:grid; place-items:center; width:34px; height:34px; border:2px solid #dce1e6; border-radius:11px; }.check-list button.done span { color:white; border-color:var(--teal); background:var(--teal); }
.check-list button div { min-width:0; }.check-list button small { display:block; margin-bottom:3px; color:var(--muted); font-size:9px; font-weight:700; }.check-list button.done b { color:#60706d; text-decoration:line-through; }
.onboarding-summary,.onboarding-complete { display:flex; align-items:center; gap:14px; padding:17px; border-radius:21px; background:white; }.onboarding-summary div { min-width:82px; }.onboarding-summary b,.onboarding-summary span { display:block; }.onboarding-summary b { color:var(--teal); font-size:28px; }.onboarding-summary span,.onboarding-summary p,.onboarding-complete p { color:var(--muted); font-size:11px; }.onboarding-summary p,.onboarding-complete p { margin:0; line-height:1.45; }.onboarding-complete { color:#176f60; background:#dff5ef; }.onboarding-complete > span { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:14px; color:white; background:var(--teal); font-size:22px; }.onboarding-complete b { display:block; margin-bottom:4px; }.onboarding-progress { margin-bottom:17px; }
.onboarding-contacts { margin-bottom:17px; }.onboarding-contacts h2 { margin-bottom:10px; font-size:16px; }.onboarding-contacts > div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.onboarding-contacts article { min-width:0; padding:11px 7px; border-radius:17px; background:white; text-align:center; }.onboarding-contacts article span { display:grid; place-items:center; width:34px; height:34px; margin:0 auto 8px; border-radius:12px; color:white; background:var(--ink); font-size:10px; font-weight:900; }.onboarding-contacts article b,.onboarding-contacts article small { display:block; }.onboarding-contacts article b { font-size:10px; }.onboarding-contacts article small { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.3; }
.onboarding-contacts article.manager-contact { grid-column:1 / -1; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:11px; align-items:center; text-align:left; }.onboarding-contacts article.manager-contact span { grid-row:1 / 4; width:44px; height:44px; margin:0; font-size:12px; }.onboarding-contacts article.manager-contact b { overflow-wrap:anywhere; font-size:13px; }.onboarding-contacts article.manager-contact small { margin-top:1px; font-size:9px; }
.onboarding-phase { margin-top:17px; }.phase-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:9px; }.phase-head h2 { font-size:16px; }.phase-head p { margin:3px 0 0; color:var(--muted); font-size:10px; }.phase-head > b { color:var(--teal); font-size:12px; }
.chat-box { display:grid; gap:9px; min-height:280px; max-height:430px; overflow:auto; padding:14px; border-radius:21px; background:white; }
.chat-box article { position:relative; max-width:88%; padding:11px 52px 11px 12px; border-radius:15px 15px 15px 4px; background:#eef2f6; }.chat-box article b { font-size:10px; }.chat-box article p { margin:4px 0 0; font-size:13px; }.chat-box article small { position:absolute; right:9px; bottom:8px; color:var(--muted); font-size:8px; }
.chat-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.chat-mode button { min-height: 40px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.chat-mode button.active { color: white; background: var(--ink); }
.direct-picker { display: grid; gap: 7px; margin-bottom: 12px; padding: 14px; border-radius: 8px; background: white; }
.direct-picker label { margin-top: 4px; font-size: 11px; font-weight: 800; }
.direct-picker input,.direct-picker select { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: #fafbfc; }
.direct-picker small { color: var(--muted); font-size: 9px; }
.direct-recent { display: grid; gap: 7px; margin-bottom: 12px; }
.direct-recent h2 { margin: 4px 0 2px; font-size: 15px; }
.direct-recent button { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 10px; border: 0; border-radius: 8px; color: var(--ink); background: white; text-align: left; }
.direct-recent button > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: white; background: var(--teal); font-size: 10px; font-weight: 900; }
.direct-recent button div { min-width: 0; }
.direct-recent button b,.direct-recent button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-recent button b { font-size: 11px; }
.direct-recent button small,.direct-recent button time { margin-top: 3px; color: var(--muted); font-size: 8px; }
.direct-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 8px 8px 0 0; color: white; background: var(--ink); }
.direct-thread-head b,.direct-thread-head small { display: block; }
.direct-thread-head b { font-size: 12px; }
.direct-thread-head small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 9px; }
.direct-thread-head button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: white; background: rgba(255,255,255,.12); font-size: 19px; }
.direct-chat-box { min-height: 240px; border-radius: 0 0 8px 8px; }
.direct-chat-box article.own { justify-self: end; color: white; background: var(--teal); border-radius: 15px 15px 4px 15px; }
.direct-chat-box article.own small { color: rgba(255,255,255,.7); }
.direct-empty { align-self: center; justify-self: center; padding: 20px; color: var(--muted); font-size: 11px; text-align: center; }
.direct-empty-prompt { min-height: 160px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; }
.emoji-picker { display: flex; gap: 4px; overflow-x: auto; margin-top: 9px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: white; scrollbar-width: none; }
.emoji-picker::-webkit-scrollbar { display: none; }
.emoji-picker button { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: #f4f4f2; font-size: 20px; line-height: 1; }
.emoji-picker button:active { background: var(--accent-soft); transform: scale(.94); }
.inline-form { display:grid; grid-template-columns:1fr 45px; gap:8px; margin-top:9px; }.inline-form input { min-width:0; height:48px; padding:0 13px; border:1px solid var(--line); border-radius:15px; outline:0; }.inline-form button { border:0; border-radius:15px; color:white; background:var(--accent); font-size:20px; }
.inline-form button:disabled { cursor: wait; opacity: .55; }
.article-list,.vacancy-list { display:grid; gap:10px; }.article-list article,.vacancy-list article { padding:16px; border-radius:18px; background:white; }.article-list h3,.vacancy-list h3 { margin-top:10px; }.article-list p,.vacancy-list p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.shift-clock { display:grid; justify-items:center; gap:8px; padding:34px 20px; border-radius:26px; color:white; background:var(--ink); text-align:center; }.shift-clock > b { font-size:27px; }.shift-clock > span { margin-bottom:14px; color:#bdc8d4; font-size:12px; }
.module-note { margin-top:11px; padding:13px; border-radius:14px; color:var(--muted); background:#e9ecf0; font-size:11px; text-align:center; }
.reward-list { display:grid; gap:9px; }.reward-list article { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:11px; padding:13px; border-radius:18px; background:white; }.reward-art { display:grid; place-items:center; width:46px; height:46px; border-radius:15px; color:#8b6400; background:#ffe9a2; font-weight:900; }.reward-list p { margin:4px 0 0; color:var(--muted); font-size:10px; }.reward-list button { min-height:34px; border:0; border-radius:11px; color:white; background:var(--ink); font-size:10px; font-weight:800; }
.coin-transfer-title { margin-top: 24px; }
.coin-transfer-panel { display: grid; gap: 10px; }
.coin-transfer-panel .button:disabled { cursor: not-allowed; opacity: .55; }
.coin-transfer-balance { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; padding: 16px; color: white; background: var(--ink); border-radius: 8px; }
.coin-transfer-balance span { font-size: 11px; opacity: .75; }
.coin-transfer-balance b { grid-row: span 2; font-size: 28px; line-height: 1; }
.coin-transfer-balance small { font-size: 10px; opacity: .75; }
.coin-transfer-history { margin-top: 18px; }
.coin-transfer-history article { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.coin-transfer-history article > span { font-weight: 900; }
.coin-transfer-history article > span.outgoing { color: var(--accent); }
.coin-transfer-history article > span.incoming { color: #14755a; }
.coin-transfer-history article div { display: grid; gap: 3px; min-width: 0; }
.coin-transfer-history article b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.coin-transfer-history article small { color: var(--muted); font-size: 10px; }
.course-card { padding:20px; border-radius:23px; background:white; }.course-card h2 { margin-top:15px; }.course-card p { color:var(--muted); font-size:12px; }.course-card > b { display:block; margin-bottom:17px; font-size:12px; }
.department-track-card,.production-track-card,.department-mobility { margin-top:12px; padding:18px; border-radius:23px; background:white; }
.department-track-card h2,.department-mobility h2 { margin:10px 0 6px; font-size:18px; line-height:1.25; }
.department-track-card p,.department-mobility p { color:var(--muted); font-size:11px; line-height:1.45; }
.department-track-card label { display:grid; gap:7px; margin-top:13px; color:var(--muted); font-size:10px; font-weight:850; }
.department-track-card select { width:100%; min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fafbfc; font-size:11px; }
.auto-track-note { display:grid; gap:3px; margin-top:12px; padding:12px; border-radius:15px; color:#176f60; background:#e8f7f2; }
.auto-track-note.manual { color:#946a00; background:#fff0b8; }
.auto-track-note b,.auto-track-note small { display:block; }
.auto-track-note b { font-size:12px; }
.auto-track-note small { font-size:10px; line-height:1.35; opacity:.78; }
.production-track-card h2 { margin:10px 0 6px; font-size:18px; line-height:1.25; }
.production-track-card > p,.track-note { color:var(--muted); font-size:11px; line-height:1.45; }
.department-mobility { background:#fff7df; }
.department-mobility.open { background:#edf3ff; }
.department-mobility > div { display:grid; grid-template-columns:1fr; gap:7px; margin-top:12px; }
.department-mobility button { min-height:43px; padding:0 12px; border:0; border-radius:13px; color:var(--ink); background:white; text-align:left; font-size:10px; font-weight:850; }
.track-choice { display:grid; grid-template-columns:1fr; gap:8px; margin:15px 0; }
.track-choice button { min-height:58px; padding:11px 13px; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:#fafbfc; text-align:left; font-size:11px; font-weight:850; }
.track-choice button.active { color:white; border-color:var(--teal); background:var(--teal); }
.track-choice button b,.track-choice button small { display:block; }
.track-choice button small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.3; font-weight:650; }
.track-choice button.active small { color:rgba(255,255,255,.82); }
.track-summary { display:grid; gap:3px; margin-bottom:11px; padding:13px; border-radius:16px; background:#edf3ff; }
.track-summary b,.track-summary small { display:block; }.track-summary b { font-size:14px; }.track-summary small { color:var(--muted); font-size:10px; }
.production-track-list { display:grid; gap:9px; }
.production-track-list article { position:relative; padding:14px 14px 14px 18px; border:1px solid var(--line); border-radius:17px; background:#fafbfc; }
.production-track-list article::before { content:""; position:absolute; left:7px; top:16px; bottom:16px; width:4px; border-radius:99px; background:#dfe5eb; }
.production-track-list article.current::before { background:var(--teal); }
.production-track-list article.next::before { background:var(--accent); }
.production-track-list article.leadership::before { background:#315477; }
.production-track-list article.locked { opacity:.72; background:#f2f5f7; }
.production-track-list article.locked::before { background:#c5ced8; }
.production-track-list article b { display:block; margin-top:6px; font-size:13px; line-height:1.25; }
.production-track-list article p { margin:9px 0 11px; color:var(--muted); font-size:10px; line-height:1.45; }
.production-track-list .locked-note { display:block; margin:-4px 0 10px; color:#7a8794; font-size:10px; font-weight:850; }
.production-track-list .button { width:100%; min-height:39px; font-size:10px; }
.production-track-list .button.disabled { display:grid; place-items:center; color:#8793a0; border-color:#dfe5eb; background:#eef2f6; }
.career-checklist { display:grid; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.career-checklist > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.career-checklist > div b { margin:0; font-size:11px; }
.career-checklist > div small { color:var(--muted); font-size:10px; font-weight:850; }
.career-checklist button { display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:center; min-height:41px; padding:8px; border:0; border-radius:13px; color:var(--ink); background:white; text-align:left; }
.career-checklist button span { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#e3e8ee; color:white; font-size:13px; font-weight:900; }
.career-checklist button em { font-style:normal; font-size:10px; line-height:1.35; }
.career-checklist button.done { color:#176f60; background:#e8f7f2; }
.career-checklist button.done span { background:var(--teal); }
.career-checklist button:disabled { cursor:not-allowed; color:#9aa5b1; background:#eef2f6; }
.onboarding-entry { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; margin-bottom:12px; padding:14px; border-radius:19px; color:white; background:linear-gradient(135deg,#17263d,#315477); text-decoration:none; }.onboarding-entry > span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,.12); font-size:19px; }.onboarding-entry b,.onboarding-entry small { display:block; }.onboarding-entry small { margin-top:3px; color:#bec9d5; font-size:9px; }.onboarding-entry > i { color:#ffab96; font-style:normal; font-size:20px; }
.welcome-video-card { overflow:hidden; margin-bottom:12px; border-radius:8px; background:white; }
.welcome-video-frame { position:relative; width:100%; aspect-ratio:16/9; background:#171717; }
.welcome-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#171717; }
.welcome-video-link { display:grid; place-items:center; align-content:center; gap:7px; color:white; text-decoration:none; background:linear-gradient(135deg,#17263d,#315477); }
.welcome-video-link span { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.16); font-size:24px; }
.welcome-video-link b { font-size:17px; }
.welcome-video-link small { color:#bec9d5; font-size:10px; }
.welcome-video-card > div:last-child { padding:18px; }
.welcome-video-card h2 { margin:12px 0 6px; font-size:19px; line-height:1.25; }
.welcome-video-card p { margin:0 0 15px; color:var(--muted); font-size:11px; line-height:1.45; }
.welcome-video-actions { display:grid; gap:8px; }
.welcome-video-actions .button { width:100%; min-height:44px; padding:0 10px; font-size:11px; }
.welcome-video-card .button.done { color:#176f60; border-color:#a7ddcf; background:#dff5ef; }
.employee-book { overflow:hidden; margin-bottom:12px; border-radius:23px; background:white; }.employee-book img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }.employee-book > div { padding:18px; }.employee-book h2 { margin:12px 0 6px; }.employee-book p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }.book-actions { display:grid; grid-template-columns:1fr; gap:8px; margin-top:15px; }.book-actions .button { width:100%; min-height:44px; padding:0 10px; font-size:11px; }.book-actions .button.done { color:#176f60; border-color:#a7ddcf; background:#dff5ef; }
.corporate-code-card { display:grid; grid-template-columns:68px 1fr; gap:15px; align-items:start; margin-bottom:12px; padding:18px; border-radius:8px; background:white; }
.corporate-code-icon { display:grid; place-items:center; width:68px; height:88px; border:1px solid #efc4c8; border-radius:8px; color:#fff; background:var(--accent); font-size:15px; font-weight:900; }
.corporate-code-card h2 { margin:10px 0 6px; font-size:17px; }
.corporate-code-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.corporate-code-card .book-actions { grid-column:1 / -1; }
.onboarding-document-reader { margin-top:13px; padding:12px; border-radius:14px; background:#faf7ef; }
.onboarding-document-reader summary { color:var(--accent); font-size:11px; font-weight:850; cursor:pointer; }
.document-pages { display:grid; gap:10px; max-height:460px; overflow:auto; margin-top:11px; padding-right:4px; }
.document-pages article { padding:12px; border-radius:12px; background:white; border:1px solid var(--line); }
.document-pages article b { display:block; margin-bottom:7px; color:var(--ink); font-size:11px; }
.document-pages article p { color:var(--muted); font-size:10px; line-height:1.45; }
.assistant-bubble { position:relative; min-height:105px; padding:18px; border-radius:21px 21px 21px 5px; color:white; background:var(--ink); line-height:1.5; }.question-list { display:grid; gap:8px; margin-top:12px; }.question-list button { min-height:48px; padding:0 14px; border:0; border-radius:15px; color:var(--ink); background:white; text-align:left; font-weight:700; }
.hr-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }.hr-stats div { padding:14px 8px; border-radius:17px; background:white; text-align:center; }.hr-stats b,.hr-stats span { display:block; }.hr-stats b { color:var(--accent); font-size:21px; }.hr-stats span { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.25; }.hr-panel,.pulse-card,.referral-card,.career-track { margin-bottom:12px; padding:17px; border-radius:21px; background:white; }.hr-panel h2,.pulse-card h2,.referral-card h2,.career-track h2 { margin-bottom:12px; font-size:16px; }.hr-panel label,.referral-card label { display:grid; gap:6px; margin-bottom:12px; color:var(--muted); font-size:10px; font-weight:750; }.hr-panel select,.hr-panel textarea,.referral-card select,.referral-card input { width:100%; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:#fafbfc; }.hr-panel select,.referral-card select,.referral-card input { height:45px; padding:0 11px; }.hr-panel textarea { min-height:82px; padding:11px; resize:vertical; }.pulse-card h2 { margin-top:11px; }.pulse-card > small { display:block; margin-top:10px; color:var(--muted); font-size:9px; line-height:1.4; }.pulse-scale { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }.pulse-scale button { aspect-ratio:1; border:0; border-radius:13px; color:var(--ink); background:#edf0f3; font-weight:850; }.pulse-scale button.active { color:white; background:var(--teal); }.hr-history article,.referral-history article { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; padding:13px; border-radius:16px; background:white; }.hr-history article b,.hr-history article small,.referral-history article b,.referral-history article small { display:block; }.hr-history article small,.referral-history article small { margin-top:4px; color:var(--muted); font-size:9px; }.hr-history article > span,.referral-history article > span { flex:0 0 auto; padding:6px 8px; border-radius:99px; color:#946a00; background:#fff0b8; font-size:8px; font-weight:800; }
.ai-notice { margin-bottom:10px; padding:11px; border-radius:14px; color:#476076; background:#edf3ff; font-size:9px; line-height:1.4; }.ai-chat { display:grid; gap:9px; min-height:250px; max-height:430px; overflow:auto; padding:14px; border-radius:21px; background:white; }.ai-chat article { max-width:88%; padding:11px 13px; border-radius:16px 16px 16px 5px; background:#eef2f6; }.ai-chat article.user { justify-self:end; border-radius:16px 16px 5px 16px; color:white; background:var(--ink); }.ai-chat span { font-size:8px; font-weight:900; opacity:.66; }.ai-chat p { margin:4px 0 0; font-size:12px; line-height:1.45; }.ai-questions { grid-template-columns:1fr; }.ai-questions button { min-height:40px; font-size:10px; }.ai-form { margin-bottom:12px; }
.career-track > div { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:15px 0; }.career-track i { height:7px; border-radius:99px; background:#e2e6ea; }.career-track i.done { background:var(--teal); }.career-track i.active { background:linear-gradient(90deg,var(--teal) 45%,#e2e6ea 45%); }.career-track p,.referral-card p { color:var(--muted); font-size:10px; line-height:1.45; }.career-growth-map { margin-bottom:12px; padding:17px; border-radius:21px; background:white; }.career-growth-map h2 { margin:10px 0 7px; font-size:18px; }.career-growth-map p { color:var(--muted); font-size:10px; line-height:1.45; }.career-ladder { display:grid; gap:8px; margin-top:13px; }.career-ladder article { position:relative; padding:13px 13px 13px 42px; border-radius:16px; background:#f6f8fa; }.career-ladder article::before { content:""; position:absolute; left:14px; top:16px; width:15px; height:15px; border-radius:50%; background:#c5ced8; box-shadow:0 26px 0 #dfe5eb; }.career-ladder article.current { background:#e8f7f2; }.career-ladder article.current::before { background:var(--teal); }.career-ladder article.goal { color:#351810; background:#fff3d4; }.career-ladder article.goal::before { background:#d8a425; box-shadow:none; }.career-ladder small,.career-ladder b { display:block; }.career-ladder small { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }.career-ladder b { margin-top:4px; font-size:12px; line-height:1.25; }.career-goal-note { margin-top:12px; padding:12px; border-radius:14px; background:#fff8ea; }.career-goal-note b,.career-goal-note span { display:block; }.career-goal-note b { font-size:12px; }.career-goal-note span { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }.career-vacancies article > div { display:flex; align-items:center; justify-content:space-between; }.career-vacancies article strong { color:var(--teal); font-size:9px; }.career-vacancies ul { display:grid; gap:6px; margin:8px 0 0; padding-left:16px; color:var(--muted); font-size:10px; line-height:1.35; }.vacancy-full,.vacancy-referral { margin-top:10px; padding:11px; border-radius:14px; background:#faf7ef; }.vacancy-full summary,.vacancy-referral summary { color:var(--accent); font-size:10px; font-weight:850; cursor:pointer; }.vacancy-full p { margin:9px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }.vacancy-full section { margin-top:10px; }.vacancy-full section b { display:block; font-size:11px; }.vacancy-referral form { display:grid; gap:10px; margin-top:10px; }.vacancy-referral label { display:grid; gap:6px; color:var(--muted); font-size:10px; font-weight:750; }.vacancy-referral input { width:100%; height:43px; padding:0 11px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:white; }.vacancy-referral small { color:var(--muted); font-size:9px; line-height:1.35; }.career-vacancies .button { margin-top:12px; min-height:42px; }.career-vacancies .button:disabled { cursor:default; opacity:.72; }
.factory-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.factory-grid button { min-height:140px; border:0; border-radius:22px; color:var(--ink); background:white; font-size:31px; font-weight:900; }.factory-grid button:first-child { color:white; background:#e84f3d; }.factory-grid small { font-size:11px; }
.toggle-list { overflow:hidden; border-radius:21px; background:white; }.toggle-list label { display:flex; align-items:center; justify-content:space-between; min-height:62px; padding:0 16px; border-bottom:1px solid var(--line); }.toggle-list label:last-child { border:0; }.toggle-list input { display:none; }.toggle-list i { position:relative; width:42px; height:24px; border-radius:99px; background:#d9dde2; }.toggle-list i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:white; transition:.2s; }.toggle-list input:checked+i { background:var(--teal); }.toggle-list input:checked+i::after { transform:translateX(18px); }
.pass-card { display:grid; grid-template-columns:1fr 112px; gap:18px; align-items:center; padding:22px; border-radius:26px; color:white; background:linear-gradient(135deg,#17263d,#34597f); }.pass-card span,.pass-card b,.pass-card small { display:block; }.pass-card span { color:#ffab96; font-size:10px; font-weight:900; }.pass-card b { margin-top:28px; }.pass-card small { margin-top:5px; color:#bec9d5; font-size:10px; }
.qr-demo { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; padding:9px; border-radius:12px; background:white; aspect-ratio:1; }.qr-demo i { border-radius:2px; background:#e7ebef; }.qr-demo i.on { background:var(--ink); }
.mood-row { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.mood-row button { min-height:105px; padding:9px 4px; border:0; border-radius:18px; color:var(--ink); background:white; }.mood-row b,.mood-row span { display:block; }.mood-row b { margin-bottom:13px; font-size:25px; }.mood-row span { color:var(--muted); font-size:9px; }
.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.analytics-grid div { padding:19px; border-radius:19px; background:white; }.analytics-grid b,.analytics-grid span { display:block; }.analytics-grid b { font-size:23px; }.analytics-grid span { margin-top:4px; color:var(--muted); font-size:10px; }
.admin-banner { margin-bottom:12px; padding:14px; border-radius:15px; color:#946a00; background:#fff0b8; font-size:11px; }
.field input { min-width: 0; width:100%; height:48px; padding:0 12px; border:1px solid var(--line); border-radius:14px; outline:0; background:#fafbfc; }
.absence-form { display: grid; gap: 15px; }
.statement-person { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.statement-person span,.statement-person b,.statement-person small { display: block; }
.statement-person span { margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.statement-person b { font-size: 15px; }
.statement-person small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.time-fields > .field { min-width: 0; }
.absence-form,.absence-form .field { min-width: 0; max-width: 100%; }
.statement-copy { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.statement-copy p { margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 900; }
.statement-copy b { display: block; font-family: Georgia, serif; font-size: 14px; font-weight: 500; line-height: 1.5; }
.statement-copy small { display: block; margin-top: 12px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.request p { margin: 4px 0; color: var(--muted); font-size: 11px; }

.personal-values .medical-value { grid-column: 1 / -1; display:grid; grid-template-columns:29px 1fr auto; align-items:center; gap:10px; }
.personal-values .medical-value p { margin:0; }
.personal-values .medical-value b { text-align:right; }
.personal-icon.medical { color:#9e3f2b; background:#ffe6df; }
.personal-icon.vacation { color:#9b6500; background:#fff0bd; }
.personal-values .medical-next b { color: var(--accent); }
.personal-values .vacation-next b { color: #9b6500; }
.personal-values .medical-next small { grid-column: 2 / -1; color: var(--muted); font-size: 10px; line-height: 1.4; }
.personal-refresh { width: 100%; min-height: 40px; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-weight: 800; }
.personal-refresh:disabled { opacity: .6; cursor: wait; }

/* Rodanika brand system */
.stat,
.quick-card,
.home-onboarding,
.news-card,
.identity-card,
.personal-card,
.personal-values > div,
.person,
.empty,
.service-card,
.request,
.form-card,
.profile-card,
.settings,
.game-balance,
.game-rule,
.all-modules-banner,
.module-card-ui,
.vote-summary,
.vote-complete,
.vote-leaders article { border-radius: 8px; }
.quick-card:nth-child(1) { background: #fcebed; }
.quick-card:nth-child(2) { background: #e9f4ee; }
.quick-card:nth-child(3) { background: #f4efed; }
.quick-card.learning-shortcut { background: #eef3f0; }
.quick-card .icon-bubble,
.service-card .service-icon,
.home-onboarding > span,
.personal-icon,
.module-icon { border-radius: 8px; }
.stat b,
.personal-values b,
.game-balance b { letter-spacing: 0; }
.news-visual {
  height: 190px; padding: 14px; background-color: #e9e2df; background-position: 50% 43%; background-size: cover;
}
.news-visual::after { content: none; }
.news-visual .tag { color: #fff; background: rgba(53,24,16,.78); backdrop-filter: blur(8px); }
.news-body { border-top: 3px solid var(--accent); }
.profile-card,
.game-balance,
.all-modules-banner { background: #351810; }
.profile-card p,
.profile-photo-note,
.game-balance span,
.all-modules-banner small { color: #e6d8d3; }
.chip.active { background: #351810; }
.data-badge { color: #245f44; background: #e9f4ee; }
.bottom-nav { border-top-color: rgba(53,24,16,.1); }
.bottom-nav a.active { color: var(--accent); }
.toast { background: #351810; }
.register-brand {
  position: relative; overflow: hidden; height: 168px; margin: 4px 0 22px; border-radius: 8px; background: #351810;
}
.register-brand::after { content: ""; position: absolute; inset: 0; background: rgba(53,24,16,.16); }
.register-brand img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.register-brand span {
  position: absolute; z-index: 1; right: 14px; bottom: 12px; padding: 7px 9px; border-radius: 6px;
  color: #fff; background: rgba(53,24,16,.78); font-size: 11px; font-weight: 800;
}
.register-page .page-head { margin-top: 0; }
.internal-brand-visual {
  position: relative; overflow: hidden; height: 154px; margin: -4px 0 20px; border-radius: 8px;
  background: #e9e2df;
}
.internal-brand-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.internal-brand-visual.production-employee .internal-brand-photo { object-position: 50% 37%; }
.internal-brand-visual.kvass-product .internal-brand-photo { object-position: 50% 39%; }
.internal-brand-visual.factory-overview .internal-brand-photo { object-position: 50% 55%; }
.internal-brand-visual.bottling-line .internal-brand-photo { object-position: 50% 55%; }
.internal-brand-visual.rodanika-brand .internal-brand-photo { object-position: 50% 30%; }
.internal-brand-visual.rodanika-brand .internal-brand-logo { display: none; }
.internal-brand-visual.story-visual { background: linear-gradient(135deg,#fff8ea,#f0d6a4); }
.internal-brand-visual.story-visual .internal-brand-photo { object-fit: cover; object-position: 50% 50%; }
.internal-brand-visual.story-visual .internal-brand-logo { display: none; }
.internal-brand-logo {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 116px; height: 27px;
  padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.84); box-shadow: 0 4px 14px rgba(53,24,16,.14);
}
.internal-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.identity-form input,
.identity-form button,
.search,
.field input,
.field select,
.field textarea { border-radius: 8px; }
@media (max-width: 380px) {
  .topbar { padding-right: 14px; padding-left: 14px; }
  .brand { gap: 8px; font-size: 13px; }
  .brand > span:last-child { max-width: 165px; }
  .hero { min-height: 455px; }
  .rodanika-hero > img { height: 292px; }
  .hero-content { min-height: 150px; padding: 18px; }
  .hero h1 { font-size: 29px; }
  .hero-actions { gap: 7px; }
  .hero-actions .button { padding: 0 12px; font-size: 12px; }
  .internal-brand-visual { height: 138px; }
  .internal-brand-logo { width: 142px; height: 31px; }
  .welcome-video-frame { aspect-ratio:4/3; min-height:240px; }
}

.birthday-card { overflow: hidden; border: 1px solid #eee7e4; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.birthday-figma-card { display: block; width: 100%; height: auto; background: #fff; }
.birthday-frame-design {
  position: relative; overflow: hidden; aspect-ratio: 1280 / 520; min-height: 158px;
  background-color: #fff6de; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.birthday-frame-name {
  position: absolute; z-index: 3; top: 20.2%; left: 5.45%; display: block; max-width: 44%;
  color: #e30613; font-size: clamp(11px, 2.8vw, 36px); line-height: 1.08; font-weight: 950;
  letter-spacing: .02em; text-transform: uppercase; text-wrap: balance;
}
.birthday-frame-portrait {
  position: absolute; z-index: 2; top: 5.2%; left: 58.98%; display: grid; place-items: center; overflow: hidden;
  width: 35.55%; aspect-ratio: 1; border: clamp(4px, 1vw, 13px) solid #fff; border-radius: 50%;
  outline: clamp(2px, .7vw, 10px) solid #efefef; color: #fff; background: #c91624;
  box-shadow: 0 9px 24px rgba(53,24,16,.18); font-size: clamp(22px, 7vw, 80px); font-weight: 900;
}
.birthday-frame-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 45%; }
.birthday-design { position: relative; overflow: hidden; aspect-ratio: 397 / 180; min-height: 176px; background: linear-gradient(110deg, #fff 0%, #fff 58%, #f7f3f1 100%); }
.birthday-design::before {
  content: "✣"; position: absolute; left: -42px; bottom: -78px; color: #351810; font-family: Georgia, serif;
  font-size: 210px; line-height: 1; opacity: .035;
}
.birthday-portrait {
  position: absolute; z-index: 2; top: 25px; right: 30px; display: grid; place-items: center; overflow: hidden;
  width: 120px; height: 120px; border: 7px solid #f3f0ed; border-radius: 50%; color: #fff; background: #c91624;
  font-size: 31px; font-weight: 850;
}
.birthday-portrait img { width: 100%; height: 100%; object-fit: cover; }
.birthday-heading { position: absolute; z-index: 3; top: 30px; left: 22px; width: 178px; }
.birthday-heading > strong { display: block; overflow-wrap: anywhere; color: #c91624; font-size: 12px; line-height: 1.2; text-transform: uppercase; }
.birthday-heading h2 { margin-top: 20px; color: #c91624; font-size: 24px; line-height: .98; text-transform: uppercase; }
.birthday-brand { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: #351810; text-transform: uppercase; }
.birthday-brand b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 6px; color: #fff; background: #c91624; font-size: 19px; }
.birthday-brand span { font-size: 14px; font-weight: 850; }
.birthday-balloon { position: absolute; z-index: 1; width: 37px; height: 44px; border-radius: 50% 50% 46% 46%; }
.birthday-balloon::after { content: ""; position: absolute; top: 42px; left: 50%; width: 1px; height: 38px; background: #d8d0cd; transform: rotate(8deg); }
.birthday-balloon.red { background: #df2432; }
.birthday-balloon.gray { background: #d9d8d7; }
.birthday-balloon.one { top: 9px; right: 19px; transform: rotate(9deg); }
.birthday-balloon.two { top: -16px; right: 72px; transform: rotate(-10deg); }
.birthday-balloon.three { right: 178px; bottom: 11px; width: 30px; height: 36px; transform: rotate(-14deg); }
.birthday-confetti { position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(circle, #d8a425 1.4px, transparent 1.6px); background-size: 34px 29px; transform: rotate(-7deg) scale(1.15); }
.birthday-message { padding: 18px; border-top: 3px solid #c91624; }
.birthday-message small { color: var(--muted); font-size: 11px; }
.birthday-message h3 { margin-top: 7px; font-size: 16px; }
.birthday-message p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.birthday-community { padding: 18px; border-top: 1px solid #eee7e4; background: #fff; }
.birthday-community-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.birthday-community-head h3 { font-size: 15px; }
.birthday-community-head span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 50%; color: #fff; background: #351810; font-size: 11px; font-weight: 800; }
.birthday-community-list { margin-top: 9px; }
.birthday-community-message { padding: 12px 0; border-bottom: 1px solid #eee7e4; }
.birthday-community-message > div { display: flex; align-items: center; gap: 7px; }
.birthday-community-message b { font-size: 13px; }
.birthday-community-message > div span { color: #c91624; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.birthday-community-message p { margin: 5px 0; color: #351810; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.birthday-community-message small { color: var(--muted); font-size: 10px; }
.birthday-community-empty { margin: 12px 0; color: var(--muted); font-size: 12px; }
.birthday-community-archive summary { padding: 12px 0; color: #c91624; cursor: pointer; font-size: 12px; font-weight: 800; }
.birthday-community-form { display: grid; gap: 9px; margin-top: 14px; }
.birthday-community-form textarea { width: 100%; min-height: 84px; resize: vertical; padding: 12px; border: 1px solid #d8d0cd; border-radius: 8px; color: #351810; background: #fff; font: inherit; font-size: 13px; line-height: 1.45; }
.birthday-community-form textarea:focus { border-color: #c91624; outline: 3px solid rgba(201,22,36,.12); }
.birthday-community-form button { min-height: 42px; border: 0; border-radius: 8px; color: #fff; background: #c91624; font-weight: 850; cursor: pointer; }
.birthday-community-form button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 360px) {
  .birthday-heading { left: 16px; width: 152px; }
  .birthday-heading h2 { font-size: 22px; }
  .birthday-portrait { right: 14px; width: 112px; height: 112px; }
}