/* ============================================================
   SCRIPTUM — Smėlio rytas design direction
   Caveat + Nunito Sans · warm off-white · soft shadows
   ============================================================ */
:root {
  --bg: #FBF8F2;
  --card: #FFFFFF;
  --ink: #4B4340;
  --ink-2: #5C534C;
  --ink-3: #7C7065;
  --mut: #97897D;
  --mut-2: #B3A594;
  --line: #E8DFD3;
  --line-soft: #F1EAE0;
  --wash: #F5EFE5;
  --ak: #C4795A;          /* oklch(0.62 0.09 42) */
  --ak-deep: #9C5A3F;     /* oklch(0.50 0.09 42) */
  --ak-light: #D9A08A;    /* oklch(0.72 0.07 42) */
  --ak-soft: #F6E7DE;     /* oklch(0.94 0.025 50) */
  --ak-softer: #FAF1EA;
  --good: #7A8B6F;
  --warn: #B85C48;
  --red-suit: #B0563F;
  --shadow: 0 10px 30px -12px rgba(75, 67, 64, .18);
  --shadow-sm: 0 4px 14px -6px rgba(75, 67, 64, .14);
  --r: 20px;
  --r-sm: 13px;
  --sidebar-w: 248px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1100px 700px at 50% -120px, #F3EDDF, #E9E1D0) fixed;
  color: var(--ink);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 800; color: var(--ink); }
p { margin: 0; }
a { color: var(--ak-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.script { font-family: 'Caveat', cursive; font-weight: 600; }

/* Zodiac glyphs: plain drawn symbols (no colored emoji), inherit text color */
.zg {
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* ---------- animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: scale(1); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pageTurn {
  0% { transform: perspective(1800px) rotateY(-15deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
}
@keyframes pageShade { from { opacity: 1; } to { opacity: 0; } }
.page-flip { position: relative; transform-origin: left center; }
.page-flip.flip { animation: pageTurn .55s cubic-bezier(.2, .7, .3, 1) both; }
.page-flip.flip::before {
  content: ''; position: absolute; inset: -20px; z-index: 50; pointer-events: none;
  background: linear-gradient(90deg, rgba(90, 74, 58, .16), rgba(90, 74, 58, 0) 35%);
  animation: pageShade .55s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .page-flip.flip { animation: none; }
  .page-flip.flip::before { display: none; }
}
.anim { animation: fadeUp .5s ease both; }
.anim-2 { animation: fadeUp .5s .08s ease both; }
.anim-3 { animation: fadeUp .5s .16s ease both; }
/* soft re-render (tab/bubble change on the same page): the page itself stays
   still, only the tab content fades in gently */
.page-flip.settled .anim, .page-flip.settled .anim-2, .page-flip.settled .anim-3 { animation: none; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabfade { animation: tabIn .3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .tabfade { animation: none; }
}

/* ============================================================
   AUTH SCREEN — closed book cover
   ============================================================ */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 44px 16px; position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 700px at 50% -120px, #F3EDE2, rgba(243, 237, 226, 0)),
    #E9E1D0;
}
.fl-sym { position: absolute; color: #E5D6C2; animation: floaty 5.5s ease-in-out infinite; pointer-events: none; }
.fl-sym.s1 { top: 13%; left: 16%; font-size: 20px; }
.fl-sym.s2 { top: 21%; right: 14%; font-size: 26px; animation-delay: 1.2s; }
.fl-sym.s3 { bottom: 17%; left: 22%; font-size: 14px; animation-delay: 2.1s; }
.fl-sym.s4 { bottom: 24%; right: 19%; font-size: 17px; animation-delay: .6s; }
.book { position: relative; width: 100%; max-width: 484px; }
.bk-l1 {
  position: absolute; inset: 0 -9px -9px 0; background: #F1E9D8;
  border-radius: 10px 26px 26px 10px;
  box-shadow: 0 34px 70px rgba(90, 74, 58, .3);
}
.bk-l2 {
  position: absolute; inset: 0 -4px -4px 0; background: #F8F2E4;
  border-radius: 10px 25px 25px 10px;
}
.bk-cover {
  position: relative; background: #FDFAF3;
  border: 1px solid #EFE6D5; border-radius: 10px 24px 24px 10px;
  padding: 32px 40px 24px;
  animation: pop .45s ease both;
}
.bk-cover::before {
  content: ''; position: absolute; left: 14px; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(180deg, rgba(0,0,0,0), #E6DCC9 18%, #E6DCC9 82%, rgba(0,0,0,0));
}
.bk-logo { display: block; width: 167px; height: auto; margin: 0 auto 4px; }
.bk-tagline {
  text-align: center; font-size: 10.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: #C4B8A8; margin-bottom: 14px;
}
.bk-div { display: flex; align-items: center; gap: 10px; margin: 0 4px 20px; }
.bk-div .ln { flex: 1; height: 1px; background: #E8DECB; }
.bk-div .st { color: #E3D4BF; font-size: 12px; }
.auth-card {
  background: #fff; border-radius: 24px;
  box-shadow: 0 14px 40px rgba(124, 102, 86, .1);
  padding: 24px 24px 22px;
}
.auth-motto { text-align: center; color: #97897D; font-size: 22px; margin: 18px 0 2px; }
.bk-foot {
  text-align: center; font-size: 10px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; color: #CFC4B2; margin-top: 10px;
}
.auth-lang { display: flex; justify-content: center; margin-top: 16px; }
.forgot { text-align: center; color: var(--mut); font-size: 12.5px; margin-top: 12px; cursor: pointer; }
.forgot:hover { color: var(--ak-deep); }
.forgot-note { text-align: center; color: var(--mut); font-size: 12px; margin-top: 6px; }
.fp-title { font-weight: 800; font-size: 16px; color: var(--ink); margin: 2px 0 4px; }
.fp-intro { color: var(--mut); font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; }
.fp-intro b { color: var(--ink); word-break: break-all; }
.auth-tabs { display: flex; background: #F4EDE3; border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.auth-tabs button {
  flex: 1; border: 0; background: transparent; border-radius: 999px;
  padding: 8px 0; font-weight: 700; font-size: 13px; color: #A99C8E;
  transition: all .18s; cursor: pointer;
}
.auth-tabs button.on { background: #fff; color: #453D39; box-shadow: 0 4px 12px rgba(124, 102, 86, .12); }
@media (max-width: 520px) {
  .bk-cover { padding: 26px 22px 20px; }
  .auth-card { padding: 20px 16px; }
}

.field { margin-bottom: 15px; position: relative; }
.field label {
  display: block; font-size: 11px; letter-spacing: .14em; font-weight: 800;
  color: var(--mut); text-transform: uppercase; margin-bottom: 6px;
}
.field label .opt { color: var(--mut-2); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.field input, .field select {
  width: 100%; border: 1px solid #E8DFD3; border-radius: 14px;
  background: #fff; padding: 11px 14px; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.field input:focus { border-color: var(--ak-light); box-shadow: 0 0 0 4px var(--ak-soft); }
.field input::placeholder { color: #BFB3A4; }
.hint { font-size: 12.5px; color: var(--mut); margin-top: 5px; line-height: 1.45; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 26px;
  background: var(--ak); color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 8px 20px -8px rgba(156, 90, 63, .5);
  transition: transform .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.btn:hover { background: var(--ak-deep); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn.full { width: 100%; }
.btn.ghost {
  background: transparent; color: var(--ak-deep);
  border: 1.5px solid var(--ak-light); box-shadow: none;
}
.btn.ghost:hover { background: var(--ak-softer); }
.btn.sm { padding: 8px 18px; font-size: 13.5px; }

.form-err {
  background: #FBEDE9; color: var(--warn); border: 1px solid #F0D5CC;
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
  display: none;
}
.form-err.show { display: block; animation: fadeUp .3s ease; }

/* geo autocomplete */
.geo-box { position: relative; }
.geo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow); max-height: 230px; overflow: auto; display: none;
}
.geo-list.show { display: block; animation: fadeUp .18s ease; }
.geo-item { padding: 10px 14px; cursor: pointer; font-size: 14.5px; display: flex; justify-content: space-between; gap: 10px; }
.geo-item:hover, .geo-item.hl { background: var(--ak-softer); }
.geo-item .sub { color: var(--mut); font-size: 12.5px; }
.geo-ok {
  display: none; margin-top: 6px; font-size: 12.5px; color: var(--good); font-weight: 700;
}
.geo-ok.show { display: block; }

/* ============================================================
   APP SHELL
   ============================================================ */
.shell {
  display: flex; align-items: stretch; min-height: calc(100vh - 56px);
  max-width: 1520px; width: calc(100% - 52px); margin: 28px auto;
  /* the left-page fold is painted on the book itself, full height,
     so it can never detach from the cover while scrolling */
  background:
    linear-gradient(90deg,
      rgba(122, 100, 78, 0) 183px,
      rgba(122, 100, 78, 0.06) 233px,
      rgba(122, 100, 78, 0.13) 248px,
      rgba(122, 100, 78, 0) 248px),
    #FDFAF3;
  border: 1px solid #EFE6D5;
  border-radius: 14px;
  position: relative;
}
/* stacked pages peeking below and to the sides — the book is thicker than one page */
.shell::before {
  content: ''; position: absolute; inset: 12px -10px -10px; z-index: -2;
  background: #F1E9D8; border-radius: 16px;
  box-shadow: rgba(90, 74, 58, 0.26) 0px 34px 70px;
}
.shell::after {
  content: ''; position: absolute; inset: 6px -5px -5px; z-index: -1;
  background: #F8F2E4; border-radius: 15px;
}
.sidebar {
  width: 248px; flex: 0 0 auto; align-self: flex-start;
  background: transparent;
  padding: 34px 22px 28px;
  display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 28px;
  height: calc(100vh - 56px); max-height: calc(100vh - 56px);
  overflow-y: auto; min-height: 0;
  box-sizing: border-box;
}
/* the fold line lives on the content side so it runs the full book height */
.mainwrap { flex: 1; min-width: 0; border-left: 1px solid #EDE4D2; }
.sb-logo { width: 142px; height: auto; align-self: center; }
.side-tag {
  font-family: 'Caveat', cursive; font-size: 16.5px; color: #A99C8E;
  text-align: center; margin: -18px 0 0;
}
.navwrap { display: flex; flex-direction: column; gap: 4px; }
.side-contents {
  font-size: 10px; font-weight: 800; letter-spacing: 2.6px; text-transform: uppercase;
  color: #C9BDAC; padding: 0 18px 6px;
}
.nav-item .rn {
  margin-left: auto; font-family: 'Caveat', cursive;
  font-size: 16px; color: #C6BAA9; font-weight: 400;
}
.chapter-kick {
  font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase;
  color: #C4B8A8; font-weight: 800; margin-bottom: 2px;
}
.chapter-kick .ck-sym { font-size: 12px; letter-spacing: 0; margin-right: 2px; }
.page-foot {
  margin-top: 26px; display: flex; align-items: center; gap: 16px;
  color: #B3A594; font-family: 'Caveat', cursive; font-size: 20px;
}
.page-foot .ln { flex: 1; height: 1px; background: #E8DECB; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-radius: 999px; border: 0; background: transparent;
  color: #97897D; font-size: 14px; font-weight: 600; text-align: left;
  transition: background .2s, color .2s; width: 100%; cursor: pointer;
}
.nav-item .ic { width: 18px; text-align: center; font-size: 15px; }
.nav-item .ic.cv { font-family: 'Caveat', cursive; font-size: 17px; }
.nav-item:hover { background: rgba(122, 100, 78, 0.05); }
.nav-item.on { background: var(--ak-soft); color: #8A4E36; font-weight: 700; }
.nav-item.on .rn { color: #8A4E36; }
.side-foot {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lang-row {
  display: flex; border: 0; border-radius: 999px;
  overflow: visible; font-size: 12px; padding: 0; margin: 0; background: transparent;
}
.lang-sel {
  width: 100%; padding: 7px 10px; border-radius: 10px; border: 1px solid #E8DFD3;
  background: #fff; color: #4B4340; font-family: inherit; font-size: 12.5px;
  font-weight: 700; cursor: pointer;
}
.mobilebar .lang-sel { width: auto; padding: 4px 8px; border-radius: 8px; }
.auth-lang .lang-sel { width: auto; min-width: 150px; }
.lang-btn {
  border: 0; background: transparent; border-radius: 0;
  font-size: 12px; font-weight: 700; padding: 6px 14px; color: #A99C8E;
  cursor: pointer; transition: background .2s;
}
.lang-btn.on { background: #fff; color: #4B4340; box-shadow: none; }
.mobilebar .lang-btn { border: 1px solid var(--line); background: var(--card); padding: 4px 11px; border-radius: 8px; }
.mobilebar .lang-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.logout-btn { background: none; border: 0; color: #A99C8E; font-size: 12.5px; font-weight: 600; padding: 2px; cursor: pointer; transition: color .2s; }
.logout-btn:hover { color: #8A4E36; }
.logout-btn:hover { color: var(--warn); }

.main { flex: 1; min-width: 0; padding: 42px 46px 64px; max-width: 1172px; margin: 0 auto; position: relative; }

/* topbar (mobile) */
.mobilebar { display: none; }

/* ---------- page header ---------- */
.page-head { margin-bottom: 26px; }
.page-head .hello { font-size: 44px; line-height: 1.05; }
.page-head .sub { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.page-head .sub .sep { color: var(--mut-2); margin: 0 7px; }
.page-title {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: 44px; line-height: 1.05; color: #453D39;
}
.avatar-mini {
  position: absolute; top: 44px; right: 46px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ak-soft); color: #8A4E36;
  font-family: 'Caveat', cursive; font-size: 21px; font-weight: 600;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.avatar-mini:hover { transform: scale(1.08); }

/* ---------- cards & grid ---------- */
.grid { display: grid; gap: 26px; grid-template-columns: repeat(12, 1fr); }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 24px 26px; min-width: 0;
}
.panel.accent { background: linear-gradient(135deg, #FFF9F3, var(--ak-softer)); }
.p-kicker {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 800; color: var(--mut); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.p-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ak); display: inline-block; }
.p-title { font-size: 25px; margin-bottom: 8px; }
.p-text { color: var(--ink-2); font-size: 14.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  background: var(--ak-soft); color: var(--ak-deep); font-size: 12.5px; font-weight: 800;
  border-radius: 999px; padding: 5px 13px;
}
.chip.plain { background: var(--wash); color: var(--ink-3); }
.link-more { display: inline-block; margin-top: 14px; font-weight: 800; font-size: 13.5px; }

.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; } .col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; } .col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

/* ---------- numbers ---------- */
.num-row { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.num-cell { text-align: center; flex: 1; min-width: 76px; }
.num-ball {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 8px;
  background: radial-gradient(circle at 32% 28%, #fff, var(--ak-soft));
  border: 1.5px solid var(--ak-light); color: var(--ak-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.num-cell .lbl { font-size: 12px; color: var(--ink-3); font-weight: 700; line-height: 1.3; }
.num-cell.sel .num-ball { background: var(--ak-deep); color: #fff; border-color: var(--ak-deep); }

/* ---------- moon widget ---------- */
.moon-row { display: flex; align-items: center; gap: 18px; }
.moon-vis { width: 74px; height: 74px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(75,67,64,.18)); }
.moon-big { font-size: 22px; font-weight: 800; }
.moon-sub { color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }

/* ---------- week strip ---------- */
.week-strip { display: flex; gap: 8px; margin-top: 4px; }
.wday {
  flex: 1; text-align: center; border-radius: 14px; padding: 10px 4px 9px;
  border: 1px solid var(--line-soft); background: #FFFDF9;
}
.wday .dn { font-size: 11px; color: var(--mut); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.wday .dd { font-size: 19px; font-weight: 800; margin: 2px 0; }
.wday .pd { font-size: 11px; color: var(--mut); font-weight: 800; }
.wday .pd.on { color: var(--ak-deep); }
/* fonas = dienos kokybė (ta pati skalė kaip kalendoriuje) */
.wday.q-great { background: #FBF3DE; border-color: #EEDCB0; }
.wday.q-good { background: #F2F5EE; border-color: #DCE5D4; }
.wday.q-care { background: #F9EFEC; border-color: #EBD3C7; }

/* ---------- playing card (SVG: cream + gold frame, real pip layout) ---------- */
.pcard {
  width: 136px; height: 199px; border-radius: 13px;
  box-shadow: var(--shadow);
  position: relative; flex-shrink: 0;
}
.pcard svg { display: block; width: 100%; height: 100%; }
.pcard.sm { width: 68px; height: 99px; border-radius: 7px; }

/* card chip (related people) */
.cchip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #FFFDF9; border-radius: 11px;
  padding: 6px 11px 6px 8px; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cchip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--ak-light); }
.cchip .sym { font-size: 15px; }
.cchip.red .sym { color: var(--red-suit); }
.cchip .nm { color: var(--ink-3); font-weight: 700; font-size: 12px; }

/* ---------- attribute blocks (value + explanation) ---------- */
.attr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.attr { background: var(--wash); border-radius: var(--r-sm); padding: 13px 16px; }
.attr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.attr-k { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 800; }
.attr-v {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: 22px; line-height: 1.15; color: var(--ink); text-align: right;
}
.attr-x { font-size: 13px; color: var(--ink-3); margin-top: 6px; line-height: 1.55; }
.attr-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .attr-grid.cols3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .attr-grid { grid-template-columns: 1fr; } }

/* ---------- info table ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.info-cell { background: var(--wash); border-radius: var(--r-sm); padding: 11px 14px; }
.info-cell .k { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 800; }
.info-cell .v { font-size: 14px; font-weight: 700; margin-top: 3px; color: var(--ink-2); }

.long-text { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; margin-top: 10px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill-list .pl {
  background: #FFFDF9; border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 700;
}
ul.dashlist { margin: 10px 0 0; padding-left: 0; list-style: none; }
ul.dashlist li {
  position: relative; padding: 6px 0 6px 22px; color: var(--ink-2); font-size: 14px;
  border-bottom: 1px dashed var(--line-soft);
}
ul.dashlist li:last-child { border-bottom: 0; }
ul.dashlist li::before { content: '✦'; position: absolute; left: 2px; color: var(--ak-light); font-size: 11px; top: 9px; }

/* section tabs */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.tab-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-3);
  border-radius: 999px; padding: 8px 18px; font-size: 13.5px; font-weight: 800;
}
.tab-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- zodiac ---------- */
.zod-head { display: flex; align-items: center; gap: 20px; }
.zod-glyph {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, #fff, var(--ak-soft));
  border: 1.5px solid var(--ak-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--ak-deep); box-shadow: var(--shadow-sm);
}
.zod-glyph.moon { background: radial-gradient(circle at 30% 25%, #fff, #EDEAF2); border-color: #C9C2D6; color: #6B6280; }

/* ---------- compatibility ---------- */
.compat-vs { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 10px 0 4px; flex-wrap: wrap; }
.compat-person { text-align: center; }
.compat-person .who { font-weight: 800; margin-top: 10px; font-size: 15px; }
.compat-person .meta { color: var(--mut); font-size: 12.5px; }
.compat-heart { font-size: 30px; color: var(--ak); animation: floaty 3.4s ease-in-out infinite; }
.score-ring { position: relative; width: 128px; height: 128px; margin: 0 auto; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: var(--ak-deep);
}
.layer-row {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 14px;
}
.layer-row:last-child { border-bottom: 0; }
.layer-row .lk { color: var(--ink-2); font-weight: 700; }
.layer-row .lv { color: var(--ak-deep); font-weight: 800; white-space: nowrap; }

/* ---------- relationship circles ---------- */
.circle-stage { display: flex; justify-content: center; overflow: hidden; }
.circle-canvas { position: relative; width: 780px; height: 780px; flex-shrink: 0; }
.cring {
  position: absolute; border: 1.5px dashed #E3D7BE; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
.cring-label {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  background: #FFFDF6; border: 1px solid #EBDFC6; border-radius: 999px;
  padding: 4px 14px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: #B9A276; white-space: nowrap; z-index: 3;
}
.cnode {
  position: absolute; transform: translate(-50%, -50%);
  width: 96px; text-align: center; cursor: pointer; z-index: 4;
  transition: transform .15s;
}
.cnode:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 6; }
.cavatar {
  position: relative; width: 54px; height: 54px; margin: 0 auto;
  border-radius: 50%; border: 2.5px solid #E0D3B8;
  background: radial-gradient(circle at 32% 28%, #FFFDF6, #F3E9D2);
  box-shadow: 0 3px 10px rgba(90, 74, 58, .10);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive; font-size: 31px; font-weight: 700;
  color: #9C5A3F; line-height: 1;
}
.cnode.v-good .cavatar { border-color: #8FA983; box-shadow: 0 3px 10px rgba(120, 150, 110, .25); }
.cnode.v-warn .cavatar { border-color: #C98B76; box-shadow: 0 3px 10px rgba(190, 120, 95, .25); }
.cavatar .win {
  position: absolute; top: -4px; right: -4px; width: 13px; height: 13px;
  border-radius: 50%; background: #D9A441; border: 2px solid #FDFAF3;
}
.cavatar .kmark {
  position: absolute; top: -5px; left: -5px; width: 17px; height: 17px;
  border-radius: 50%; background: #9C5A3F; color: #FBF8F2;
  border: 2px solid #FDFAF3; font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito Sans', sans-serif;
}
.circle-legend .kml {
  display: inline-flex; width: 15px; height: 15px; border-radius: 50%;
  background: #9C5A3F; color: #FBF8F2; font-size: 8px;
  align-items: center; justify-content: center; margin-right: 6px; vertical-align: -3px;
}
.cavatar.me {
  width: 66px; height: 66px; font-size: 38px; color: #FBF8F2;
  background: radial-gradient(circle at 32% 28%, #C4795A, #9C5A3F);
  border-color: #8A4E36; box-shadow: 0 6px 16px rgba(156, 90, 63, .30);
}
.cnode-name {
  font-size: 13px; font-weight: 800; color: var(--ink); margin-top: 6px;
  line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cnode-rel { font-size: 10.5px; color: var(--mut); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnode-pct { font-size: 12px; font-weight: 800; color: #C08A2D; margin-top: 1px; }
.cnode-pct.v-good { color: #6E8F63; }
.cnode-pct.v-warn { color: #B4694F; }
.cnode.center { cursor: default; z-index: 5; transform: translate(-50%, -33px); }
.cnode.center:hover { transform: translate(-50%, -33px); }
/* card badge — used in the person modal */
.cnode-card { position: relative; display: inline-block; border-radius: 11px; padding: 2px; border: 2px solid transparent; }
.cnode-card.v-good { border-color: #8FA983; }
.cnode-card.v-warn { border-color: #C98B76; }
.cnode-card .win {
  position: absolute; top: -5px; left: -5px; width: 12px; height: 12px;
  border-radius: 50%; background: #D9A441; border: 2px solid #FDFAF3; z-index: 5;
}
.circle-legend {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px;
}
.circle-legend .sw {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid; margin-right: 6px; vertical-align: -2px; background: #FCF8EE;
}
.circle-legend .dotw {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #D9A441; margin-right: 6px;
}
@media (max-width: 1180px) {
  .circle-canvas { transform: scale(.8); transform-origin: top center; margin-bottom: -156px; }
}
@media (max-width: 900px) {
  .circle-canvas { transform: scale(.66); transform-origin: top center; margin-bottom: -265px; }
}
@media (max-width: 560px) {
  .circle-canvas { transform: scale(.45); margin-bottom: -428px; }
}

/* ---------- onboarding — įžangos kelionė ---------- */
.ob-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px 16px;
  position: relative; overflow: hidden;
}
.ob-stage {
  width: 100%; max-width: 1020px; display: flex; justify-content: center;
  animation: pageTurn .6s cubic-bezier(.2, .7, .3, 1) both;
  transform-origin: left center;
}
.ob-intro { text-align: center; max-width: 580px; padding: 20px 0; }
.ob-intro .t { font-size: 60px; color: var(--ink-2); margin-bottom: 22px; animation: fadeUp .8s ease both; }
.ob-line {
  font-size: 15.5px; line-height: 1.85; color: var(--ink-3);
  margin: 15px 0; opacity: 0; animation: fadeUp .9s ease both;
}
.ob-line.accent { font-size: 27px; color: var(--ak-deep); margin-top: 24px; }
/* — knyga per StPageFlip: kiekvienas lapas — atskiras popieriaus puslapis — */
.ob-stage.isbook { display: block; }
.ob-bookwrap { width: 100%; }
.ob-bookwrap .stf__parent { margin: 0 auto; }
.ob-pfpage {
  background: #FDFAF3; border: 1px solid #EFE6D5; border-radius: 4px;
  padding: 36px 42px 24px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(90, 74, 58, .13);
}
.ob-pin { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.ob-pfpage.pgL { border-radius: 14px 4px 4px 14px; }
.ob-pfpage.pgR { border-radius: 4px 14px 14px 4px; }
/* nugarėlės šešėlis vidiniame lapo krašte */
.ob-pfpage.pgL::after, .ob-pfpage.pgR::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none;
}
.ob-pfpage.pgL::after { right: 0; background: linear-gradient(90deg, rgba(122, 100, 78, 0), rgba(122, 100, 78, .1)); }
.ob-pfpage.pgR::before { left: 0; background: linear-gradient(90deg, rgba(122, 100, 78, .1), rgba(122, 100, 78, 0)); }
/* kieti viršeliai */
.ob-pfpage.ob-cover-pg {
  padding: 42px 34px 30px; border-radius: 8px;
  background: #FBF6EA; border-color: #EBDFC8;
}
.ob-cover-pg .ob-pin { align-items: center; text-align: center; justify-content: space-between; }
.ob-pfpage.ob-cover-pg::after {
  content: ''; position: absolute; inset: 14px; pointer-events: none;
  border: 1px solid #E6DCC9; border-radius: 6px;
}
.ob-cv-brand { font-size: 16px; font-weight: 800; letter-spacing: .38em; color: var(--mut); margin-top: 16px; }
.ob-cv-mid { margin: 24px 0; }
.ob-cv-name { font-size: 64px; color: var(--ink); line-height: 1.12; }
.ob-cv-meta { font-size: 16px; color: var(--ink-3); margin-top: 10px; }
.ob-cv-foot { font-size: 11px; font-weight: 800; letter-spacing: .3em; color: #CFC4B2; margin-bottom: 8px; }
@media (max-height: 820px) {
  .ob-cv-name { font-size: 52px; }
}
.ob-pgno { margin-top: auto; text-align: center; font-size: 10.5px; letter-spacing: .22em; color: #CFC4B2; padding-top: 16px; }
.ob-numrow { display: flex; gap: 13px; align-items: center; margin: 11px 0; }
.ob-numrow .nb {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ak-light); background: #FFFDF6;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: var(--ak-deep);
}
.ob-ctrl { display: flex; gap: 18px; align-items: center; margin-top: 28px; animation: fadeUp .8s .3s ease both; }
.ob-dots { display: flex; gap: 8px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s; }
.ob-dot.on { background: var(--ak); }
.ob-skip {
  position: absolute; top: 22px; right: 26px; background: none; border: none;
  color: var(--mut); font-size: 12.5px; font-weight: 700; z-index: 5;
}
.ob-skip:hover { color: var(--ak-deep); }
@media (max-width: 760px) {
  .ob-pfpage { padding: 26px 22px 16px; }
  .ob-pfpage.ob-cover-pg { padding: 34px 24px 24px; }
  .ob-cv-name { font-size: 44px; }
  .ob-intro .t { font-size: 46px; }
}

/* ---------- reports (AI analizės) ---------- */
.rep-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* naujos analizės konstruktorius — sekcijos ir grupuoti žmonės */
.rb-head { display: flex; justify-content: space-between; align-items: center; }
.rb-x {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-3); font-size: 15px; cursor: pointer;
  transition: background .18s, color .18s;
}
.rb-x:hover { background: var(--ak-soft); color: var(--ak-deep); }
.rb-grp { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; }
.rb-glabel {
  flex: 0 0 86px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut-2); padding-top: 10px; text-align: right;
}
.rb-desc { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
@media (max-width: 640px) {
  .rb-grp { flex-direction: column; gap: 4px; }
  .rb-glabel { flex: none; padding-top: 0; text-align: left; }
}
.rep-pill {
  border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 18px;
  background: #FFFDF6; font-weight: 800; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: all .15s; text-align: left;
}
.rep-pill:hover { border-color: var(--ak-light); }
.rep-pill.on { background: var(--ak); border-color: var(--ak); color: #FFFDF6; }
.rep-pill.on .rp-sub { color: rgba(255, 253, 246, .75); }
.rep-pill.dash { border-style: dashed; color: var(--mut); font-weight: 700; }
.rep-pill .rp-sub { font-weight: 600; font-size: 11.5px; color: var(--mut); margin-left: 4px; }
.rep-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.rep-item:last-child { border-bottom: 0; }
.rep-ic {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #FFFDF6, #F3E9D2);
  border: 1.5px solid #E0D3B8; color: var(--ak-deep);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.rep-mid { flex: 1; min-width: 0; }
.rep-name { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.rep-meta { font-size: 12px; color: var(--mut); margin-top: 2px; }
.repgen-bar { height: 7px; background: var(--wash); border-radius: 999px; overflow: hidden; }
.repgen-fill { height: 100%; background: var(--ak); border-radius: 999px; transition: width .5s ease; }
.spin { display: inline-block; animation: spinSlow 1.6s linear infinite; }
/* didžioji generavimo scena */
.repgen { padding: 26px 10px 18px; }
.repgen-orb {
  position: relative; width: 128px; height: 128px; margin: 0 auto 18px;
  border: 1.5px dashed #E3D7BE; border-radius: 50%;
}
.repgen-orb .q {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: var(--ak-deep); animation: floaty 3s ease-in-out infinite;
}
.repgen-orb i {
  position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px;
  border-radius: 50%; background: var(--ak); opacity: .85;
  animation: orbCirc 2.8s linear infinite;
}
.repgen-orb i:nth-child(3) { animation-delay: -0.93s; background: #C08A2D; }
.repgen-orb i:nth-child(4) { animation-delay: -1.87s; background: #8FA983; }
@keyframes orbCirc {
  from { transform: rotate(0deg) translateX(64px); }
  to { transform: rotate(360deg) translateX(64px); }
}
.repgen-title { text-align: center; font-size: 32px; color: var(--ink-2); margin-bottom: 16px; }
.repgen-steps { max-width: 460px; margin: 0 auto; }
.gstep {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--mut);
}
.gstep .gs-ic { width: 20px; text-align: center; flex-shrink: 0; }
.gstep.done { color: #6E8F63; }
.gstep.now { background: var(--wash); color: var(--ink); }
.gstep.err { background: #F9EFEC; color: #B4694F; }
/* plaukiojantis fono generavimo ženkliukas */
.genpill {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  background: #FFFDF6; border: 1.5px solid var(--ak-light); border-radius: 999px;
  padding: 11px 20px; font-size: 13px; font-weight: 800; color: var(--ink-2);
  box-shadow: 0 8px 26px rgba(90, 74, 58, .18); cursor: pointer; max-width: 340px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: pop .3s ease both;
}
.genpill:hover { box-shadow: 0 10px 30px rgba(90, 74, 58, .26); }
.genpill.done { background: #F2F5EE; border-color: #8FA983; color: #55703F; }
.genpill.err { background: #F9EFEC; border-color: #C98B76; color: #B4694F; }
.report-body { max-width: 860px; }
.report-body h3 {
  font-family: 'Caveat', cursive; font-size: 27px; font-weight: 700;
  color: var(--ink-2); margin: 22px 0 8px; line-height: 1.2;
}
.report-body h3:first-child { margin-top: 4px; }
.report-body p { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); margin: 9px 0; }
.report-body ul { margin: 9px 0 9px 20px; }
.report-body li { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin: 4px 0; }
.report-body .callout {
  background: var(--wash); border-left: 3px solid var(--ak);
  border-radius: 0 12px 12px 0; padding: 13px 17px; margin: 13px 0;
  font-size: 13.8px; line-height: 1.75; color: var(--ink-3);
}
.report-body .callout b { color: var(--ak-deep); }
.rep-tblwrap { overflow-x: auto; margin: 12px 0; }
.report-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.report-body th {
  text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); font-weight: 800; padding: 8px 10px; border-bottom: 1.5px solid var(--line);
}
.report-body td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.6; color: var(--ink-2); }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head .cm { font-size: 24px; font-weight: 800; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); font-size: 17px; color: var(--ink-2);
}
.cal-nav button:hover { background: var(--wash); }
.cal-nav .cal-today { width: auto; border-radius: 999px; padding: 0 16px; font-size: 13px; font-weight: 800; }
/* savaitės juosta: 7 dienos, braukiama arba perjungiama rodyklėmis */
.calw-strip { display: flex; gap: 10px; margin: 2px 0 4px; touch-action: pan-y; }
.calw-day {
  flex: 1; min-width: 0; text-align: center;
  border: 1px solid var(--line-soft); border-radius: 16px; background: #FFFDF9;
  padding: 12px 4px 10px; cursor: pointer;
  transition: box-shadow .12s, transform .12s;
}
.calw-day:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.calw-day .dn { font-size: 11px; color: var(--mut); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.calw-day .dd { font-size: 22px; font-weight: 800; margin: 3px 0 1px; }
.calw-day .pdn { font-size: 11.5px; font-weight: 800; color: var(--mut); }
.calw-day .pdn.on { color: var(--ak-deep); }
.calw-day .marks { min-height: 16px; margin-top: 3px; font-size: 11px; line-height: 16px; }
/* fonas = dienos kokybė (mėnulio dienos lygis): auksinis / žalsvas / baltas / rausvas */
.calw-day.q-great { background: #FBF3DE; border-color: #EEDCB0; }
.calw-day.q-good { background: #F2F5EE; border-color: #DCE5D4; }
.calw-day.q-care { background: #F9EFEC; border-color: #EBD3C7; }
.calw-day.today { outline: 2.5px solid var(--ak-deep); outline-offset: -1px; }
.calw-day.sel { outline: 2.5px solid var(--ink); outline-offset: -1px; }
@media (max-width: 640px) {
  .calw-strip { gap: 6px; }
  .calw-day { padding: 9px 2px 8px; border-radius: 12px; }
  .calw-day .dd { font-size: 17px; }
  .cal-head { flex-wrap: wrap; gap: 8px; }
  .cal-head .cm { font-size: 19px; }
}
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.cal-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
/* moon-day tier marks (week cells + legend) */
.calw-day .mday { font-size: 11px; }
.calw-day .mday.t-good, .calw-day .mday.t-care { font-size: 9px; }
.mleg { margin-right: 5px; font-size: 11px; }
.mleg.t-good, .mleg.t-care { font-size: 9px; }
.t-great { color: #C08A2D; }
.t-good { color: #8FA983; }
.t-care { color: #C4795A; }
/* "today with this person" level pill (circles modal) */
.pt-lvl {
  display: inline-block; font-weight: 800; font-size: 12px;
  padding: 2px 11px; border-radius: 999px; margin-right: 4px;
}
.pt-lvl.pt-good { background: #F2F5EE; color: #6E8F63; }
.pt-lvl.pt-mid { background: #F4EFE4; color: #8A7B66; }
.pt-lvl.pt-care { background: #F9EFEC; color: #B4694F; }

/* ---------- people day tones (dashboard / calendar / person modal) ---------- */
.tdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; flex-shrink: 0;
}
.tdot.good { background: #8FA983; }
.tdot.mid { background: #CBBFA6; }
.tdot.care { background: #C98B76; }
.tone-row {
  display: flex; align-items: baseline; gap: 10px 14px; padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft); flex-wrap: wrap;
}
.tone-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.tone-row .pt-lvl { flex-shrink: 0; margin-right: 0; }
.tone-people { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 220px; }
.pchip {
  display: inline-flex; align-items: center;
  background: #FFFDF9; border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 5px 13px 5px 11px; font-size: 12.5px; font-weight: 800; color: var(--ink-2);
  cursor: pointer; transition: box-shadow .18s ease, transform .18s ease;
}
.pchip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pchip .rel { color: var(--mut); font-weight: 700; margin-left: 4px; }
.pchip.on { background: var(--ak-deep); border-color: var(--ak-deep); color: #fff; }
.pchip.on .rel { color: rgba(255, 255, 255, .75); }
/* person modal week strip: tone-tinted cells, today outlined */
.wday.tone-good { background: #F2F5EE; border-color: #DCE5D4; }
.wday.tone-mid { background: #FFFDF9; }
.wday.tone-care { background: #F9EFEC; border-color: #EBD3C7; }
.wday.wtoday { outline: 2px solid var(--ak-deep); outline-offset: -1px; }
.wday .tn { margin-top: 3px; }
.wday .tn .tdot { margin-right: 0; }
/* calendar cell dot: person tone on that day (marks row) */
.calw-day .pdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-left: 4px; vertical-align: 1px;
}
.calw-day .pdot.good { background: #8FA983; }
.calw-day .pdot.care { background: #C98B76; }

/* ---------- profile ---------- */
.avatar {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--ak-deep); color: #fff; font-size: 30px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.prof-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.kv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); font-size: 14px; }
.kv-row .k { color: var(--mut); font-weight: 700; }
.kv-row .v { font-weight: 800; color: var(--ink-2); text-align: right; }

/* ---------- modal ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(60, 50, 44, .45); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(3px);
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--card); border-radius: 24px; box-shadow: var(--shadow);
  max-width: 620px; width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 30px 32px; animation: pop .3s ease both; position: relative;
}
.modal-x {
  position: absolute; top: 14px; right: 16px; border: 0; background: var(--wash);
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px; color: var(--ink-3);
}
.modal-x:hover { background: var(--ak-soft); color: var(--ak-deep); }

/* ---------- misc ---------- */
.note {
  background: #FDF6EC; border: 1px solid #F0E3CC; color: #8A6D3B;
  font-size: 12.5px; border-radius: var(--r-sm); padding: 8px 13px; margin-top: 10px;
}
.divider { height: 1px; background: var(--line-soft); margin: 20px 0; border: 0; }
.mt0 { margin-top: 0; } .mt10 { margin-top: 10px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.muted { color: var(--mut); }
.small { font-size: 12.5px; }
.spin {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spinSlow .7s linear infinite; vertical-align: -3px;
}
.empty-view { text-align: center; color: var(--mut); padding: 46px 0; }
.empty-view .big { font-size: 42px; margin-bottom: 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 { grid-column: span 12; }
  .main { padding: 24px 20px 90px; }
}
@media (max-width: 1020px) {
  .shell { margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; }
  .shell::before, .shell::after { display: none; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .mainwrap { border-left: 0; }
  .shell { background: #FDFAF3; }
  .avatar-mini { display: none; }
  body { background: var(--bg); }
  .mobilebar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 60;
    background: rgba(251, 248, 242, .92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); padding: 12px 18px;
  }
  .mobilebar .mb-logo { display: flex; align-items: center; }
  .mobilebar .mb-logo img { width: 42px; }
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: flex; background: rgba(255, 253, 248, .96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav button {
    flex: 1; border: 0; background: none; font-size: 10px; font-weight: 800;
    color: var(--mut); display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 6px 0;
  }
  .bottom-nav button .ic { font-size: 17px; }
  .bottom-nav button.on { color: var(--ak-deep); }
  .page-head .hello { font-size: 32px; }
  .auth-card { padding: 30px 24px; }
}
@media (min-width: 861px) { .bottom-nav { display: none; } }