:root {
  color-scheme: dark;
  --ink: #090506;
  --ink-raised: #110a0d;
  --panel: rgba(23, 13, 17, .94);
  --panel-soft: #171014;
  --line: #42242c;
  --line-light: rgba(226, 83, 111, .4);
  --wine: #77142c;
  --red: #c92346;
  --red-hot: #ed4d69;
  --paper: #fff0e9;
  --sand: #e1b9aa;
  --muted: #ad898f;
  --quiet: #7e626a;
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #050304;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }

#app { min-height: 100svh; }

.phone-shell {
  position: relative;
  min-height: 100svh;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 6%, rgba(163, 22, 51, .18), transparent 18rem),
    linear-gradient(180deg, #0e0709 0%, #080506 42%, #070405 100%);
}

.auth-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(5, 2, 3, .28), rgba(6, 2, 4, .78) 47%, #080506 100%),
    url('/auth-background.png') center top / cover no-repeat;
}

.auth-wordmark { padding: 6px 8px 0; }
.kicker, .eyebrow, .field-label, .mini-label {
  margin: 0;
  color: #ddabb0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
}
.kicker { color: #e6abb3; letter-spacing: .19em; }
.brand-title {
  margin: 13px 0 0;
  font-family: var(--serif);
  font-size: clamp(42px, 12vw, 52px);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .85;
}
.brand-title strong { color: var(--red-hot); font-family: var(--sans); font-size: .84em; font-weight: 900; letter-spacing: .04em; }
.brand-lead { margin: 16px 0 0; color: #ead1cb; font-family: var(--serif); font-size: 18px; font-style: italic; }

.auth-card {
  padding: 17px;
  border: 1px solid rgba(238, 91, 119, .45);
  border-radius: 24px;
  background: rgba(17, 9, 12, .95);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
  backdrop-filter: blur(13px);
}

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: #1d0d12; }
.tab {
  flex: 1;
  min-height: 37px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #ad858d;
  font-size: 12px;
  font-weight: 800;
}
.tab.is-active { background: #861b34; color: #fff2ea; }
.auth-card h2 { margin: 19px 0 4px; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.auth-copy, .copy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-card form { margin-top: 16px; }
.field-label { display: block; margin: 16px 0 7px; }
.field-label:first-child { margin-top: 0; }
.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #523039;
  border-radius: 12px;
  outline: none;
  background: rgba(7, 4, 5, .85);
  color: var(--paper);
  padding: 0 13px;
  font-size: 16px;
}
.textarea { min-height: 90px; padding: 12px 13px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--red-hot); box-shadow: 0 0 0 3px rgba(201, 35, 70, .15); }
.input::placeholder, .textarea::placeholder { color: #876a71; }

.primary, .secondary, .icon-button, .score-action, .choice, .chip, .nav-item, .text-button { -webkit-tap-highlight-color: transparent; }
.primary {
  width: 100%;
  min-height: 49px;
  margin-top: 19px;
  padding: 10px 16px;
  border: 1px solid #fc7188;
  border-radius: 13px;
  background: linear-gradient(135deg, #a81736, #d52e51);
  box-shadow: 0 10px 19px rgba(147, 10, 38, .33);
  color: #fff5ef;
  font-size: 13px;
  font-weight: 900;
}
.primary:disabled { opacity: .55; }
.secondary {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #703240;
  border-radius: 12px;
  background: transparent;
  color: #edc3ba;
  font-size: 13px;
  font-weight: 750;
}
.secondary.wide { width: 100%; margin-top: 14px; }
.divider { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; color: #9c7a82; font-family: var(--serif); font-size: 13px; font-style: italic; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #4d2b33; }
.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 49px; margin-top: 15px; border: 1px solid #65333d; border-radius: 12px; background: #211116; color: #f5ded5; font-size: 13px; font-weight: 800; }
.google-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f8e9df; color: #a71f3b; font-size: 14px; font-weight: 900; }
.auth-note { min-height: 18px; margin: 10px 0 0; color: #ee9aab; font-size: 11px; line-height: 1.4; }
.auth-foot { margin: 15px 0 0; color: #99777e; font-size: 10px; letter-spacing: .06em; text-align: center; text-transform: uppercase; }

.app-topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(18px + env(safe-area-inset-top)) 20px 10px; }
.app-brand { color: #f5e5dc; font-size: 13px; }
.app-brand b { font-weight: 900; letter-spacing: .12em; }
.app-brand small { display: block; margin-top: 4px; color: #95767d; font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.avatar, .icon-button { display: grid; place-items: center; flex: none; border: 1px solid #54303a; border-radius: 50%; background: rgba(22, 11, 14, .8); color: #e8c8bf; }
.avatar { width: 38px; height: 38px; font-size: 13px; font-weight: 800; }
.icon-button { width: 36px; height: 36px; font-size: 20px; line-height: 1; }
.icon-button.small { width: 31px; height: 31px; font-size: 15px; }
.install-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #8d3447; border-radius: 50%; background: linear-gradient(135deg, #5f1428, #9d1d39); box-shadow: 0 7px 17px rgba(150, 18, 47, .25); color: #ffe9e1; font-size: 20px; font-weight: 900; }

.screen { min-height: calc(100svh - 77px); padding: 12px 20px calc(96px + env(safe-area-inset-bottom)); }
.screen > * + * { margin-top: 14px; }
.heading { margin: 4px 0 3px; }
.heading h1 { margin: 4px 0 0; color: #f9e9e0; font-family: var(--serif); font-size: 29px; font-weight: 400; letter-spacing: -.03em; }
.card {
  padding: 16px;
  border: 1px solid #3b232a;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(22, 12, 16, .97), rgba(13, 8, 10, .97));
}
.card.highlight { border-color: #702036; box-shadow: inset 0 1px 0 rgba(255, 166, 180, .04); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.card-title { margin: 4px 0 0; color: #f4ddd4; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.subtle { margin: 3px 0 0; color: #8c6c74; font-size: 11px; line-height: 1.45; }
.score-number { margin: 9px 0 14px; color: #df3b5c; font-family: "SFMono-Regular", Consolas, monospace; font-size: 30px; letter-spacing: -.07em; }
.score-grid, .two-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-action { min-height: 102px; padding: 12px 7px; border: 1px solid #3b242b; border-radius: 13px; background: #181014; color: #e9d2ca; }
.score-action.bad { color: #ed5370; border-color: #592532; }
.score-action small { display: block; margin-top: 8px; font-size: 11px; font-weight: 800; }
.sigil { width: 46px; height: 46px; overflow: visible; }
.sigil-obedient { filter: drop-shadow(0 3px 7px rgba(90, 205, 118, .22)); }
.sigil-misbehaving { filter: drop-shadow(0 3px 7px rgba(232, 55, 85, .25)); }
.history-button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: transparent; color: #b98b86; font-size: 19px; }

.timer { margin: 13px 0 0; border: 0; background: transparent; color: #ea5e75; font-family: "SFMono-Regular", Consolas, monospace; font-size: 40px; letter-spacing: -.09em; text-align: center; width: 100%; }
.timer-note { margin: 4px 0 0; color: #8f6c73; font-size: 11px; text-align: center; }
.session-meta { margin: 5px 0 0; color: #dcb4a8; font-size: 12px; text-align: center; }
.session-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 14px; }
.danger { color: #f4c4bd; border-color: #7c3242; }
.orgasm-card { margin-top: 14px; padding-top: 13px; border-top: 1px solid #40252c; }
.orgasm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.orgasm-button { display: grid; place-items: center; gap: 2px; min-height: 83px; padding: 10px; border: 1px solid #64303d; border-radius: 13px; background: linear-gradient(145deg, #241016, #150b0e); color: #eac8bd; text-align: center; }
.orgasm-button small { color: #bd9297; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.orgasm-button strong { color: #f06078; font-family: "SFMono-Regular", Consolas, monospace; font-size: 27px; font-weight: 500; }
.orgasm-button span { color: #dcb0a6; font-size: 11px; font-weight: 800; }

.consequence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.consequence { min-height: 83px; border: 1px solid #522b34; border-radius: 13px; background: #1b1014; color: #f2d8ce; font-family: var(--serif); font-size: 17px; }
.consequence small { display: block; margin-top: 6px; color: #a77c82; font-family: var(--sans); font-size: 10px; }
.challenge-time { margin: 10px 0 0; color: #dfae96; font-family: "SFMono-Regular", Consolas, monospace; font-size: 25px; }
.collapse { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.collapse-indicator { color: #d5a389; font-size: 23px; }
.rules-list { display: grid; gap: 9px; margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #352027; color: #caa7a9; font-size: 13px; }
.rule-dot::before { content: "◆"; margin-right: 8px; color: #cf3a57; font-size: 9px; }

.bottom-nav { position: fixed; z-index: 4; right: 50%; bottom: 0; left: auto; display: flex; width: min(100%, 430px); transform: translateX(50%); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid #2e1c22; background: rgba(15, 8, 11, .97); backdrop-filter: blur(12px); }
.nav-item { flex: 1; min-height: 45px; padding: 4px; border: 0; background: transparent; color: #82666e; font-size: 10px; }
.nav-icon { display: block; margin-bottom: 3px; font-size: 17px; line-height: 17px; }
.nav-item.is-active { color: #e25c74; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 34px; padding: 7px 11px; border: 1px solid #4d2932; border-radius: 18px; background: transparent; color: #c9a5a6; font-size: 12px; }
.chip.is-selected { border-color: #bd3652; background: #811a32; color: #fff0e9; font-weight: 800; }
.points { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.point-choice { min-height: 42px; border: 1px solid #4b2931; border-radius: 9px; background: transparent; color: #d9b5ad; font-family: "SFMono-Regular", Consolas, monospace; }
.point-choice.is-selected { border-color: #c73754; background: #861b34; color: #fff2eb; font-weight: 900; }

.log-list { display: grid; gap: 0; }
.log-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #332027; }
.log-item:last-child { border-bottom: 0; }
.log-item h3 { margin: 0; color: #ead3cb; font-size: 14px; }
.point-value { color: #d4ae98; font-family: "SFMono-Regular", Consolas, monospace; font-size: 16px; }
.point-value.negative { color: #e55870; }
.journal-entry { width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid #352027; background: transparent; color: inherit; text-align: left; }
.journal-entry:active { opacity: .7; }
.journal-entry:first-child { padding-top: 0; }
.journal-entry:last-child { padding-bottom: 0; border-bottom: 0; }
.journal-entry h3 { margin: 0; color: #efdad1; font-family: var(--serif); font-size: 19px; font-weight: 400; }
.history-chevron { display: block; margin-top: 8px; color: #bd6577; font-size: 11px; font-weight: 800; }
.session-detail-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.session-detail-summary > div, .session-detail-orgasms, .session-detail-note { padding: 11px; border: 1px solid #472630; border-radius: 11px; background: #160d10; }
.session-detail-summary small, .session-activity small { display: block; color: #9e777c; font-size: 10px; }
.session-detail-summary b { display: block; margin-top: 5px; color: #efdad1; font-size: 13px; }
.session-activity-list { display: grid; gap: 8px; }
.session-activity { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #492731; border-radius: 11px; background: #170d11; }
.session-activity > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid #854052; border-radius: 50%; color: #e66a7e; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.session-activity b { display: block; color: #efd7ce; font-size: 13px; }
.session-detail-orgasms p { margin: 0; color: #d9b5ab; font-size: 13px; }
.session-detail-note { color: #d4b6ae; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }

.trophy-intro { margin: 0; color: #b99499; font-size: 13px; line-height: 1.5; }
.trophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trophy { min-height: 141px; padding: 13px; border: 1px solid #302025; border-radius: 15px; background: #110c0e; color: #d9c0ba; opacity: .68; text-align: left; }
.trophy .crown { display: block; color: #80666d; font-size: 25px; }
.trophy strong { display: block; margin-top: 11px; font-family: var(--serif); font-size: 17px; font-weight: 400; }
.trophy small { display: block; margin-top: 5px; color: #95777d; font-size: 10px; line-height: 1.35; }
.trophy-progress { margin: 0; color: #c9a59a; font-size: 12px; }
.trophy-start { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px; border: 1px solid #5b2b36; border-radius: 13px; background: #180d11; color: #dfb3aa; }
.trophy-start > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.trophy-start div { display: grid; gap: 2px; }
.trophy-start b { font-family: var(--serif); font-size: 17px; font-weight: 400; }
.trophy-start small { color: #a98288; font-size: 11px; }
.trophy-start em { margin-left: auto; color: #ee768b; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trophy-ladder { display: grid; gap: 8px; }
.trophy-level { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px; border: 1px solid #392329; border-radius: 13px; background: #110b0d; color: #8b6c72; }
.trophy-level.is-earned { border-color: #705345; background: #211713; color: #dec0ae; }
.trophy-level.is-next { border-color: #dc4764; background: linear-gradient(135deg, #591326, #2a1017); box-shadow: 0 0 0 1px rgba(225, 73, 100, .14), 0 10px 18px rgba(94, 11, 32, .18); color: #fff0e8; }
.trophy-level-index { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.trophy-level div { display: grid; gap: 2px; min-width: 0; }
.trophy-level b { font-family: var(--serif); font-size: 17px; font-weight: 400; }
.trophy-level small { color: inherit; font-size: 11px; opacity: .78; }
.trophy-status { margin-left: auto; color: #f5b5aa; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.role-button { min-height: 48px; padding: 8px; border: 1px solid #4b2931; border-radius: 11px; background: transparent; color: #b59197; font-size: 12px; }
.role-button.is-selected { border-color: #bb3853; background: #7e1931; color: #fff1e8; font-weight: 800; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle { position: relative; flex: none; width: 49px; height: 28px; padding: 0; border: 1px solid #56313b; border-radius: 99px; background: #2a171d; }
.toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #eadbd1; transition: transform .2s ease; }
.toggle.on { border-color: #be3a55; background: #941e39; }
.toggle.on::after { transform: translateX(20px); }
.text-button { padding: 0; border: 0; background: transparent; color: #e4778a; font-size: 13px; font-weight: 800; }
.install-card { border-color: #6e2638; background: linear-gradient(135deg, #250d15, #11090c); }
.install-button { margin-top: 14px; }
.install-steps { display: grid; gap: 10px; }
.install-steps section { padding: 13px; border: 1px solid #44252d; border-radius: 13px; background: #100a0d; }
.install-steps b { color: #eec4b7; font-size: 13px; }
.install-steps p { margin-top: 5px; }
.partner-card { border-color: #5f2837; background: linear-gradient(135deg, #1d0c12, #11090c); }
.invite-code { margin-top: 14px; padding: 13px; border: 1px solid #9d3c51; border-radius: 12px; background: #0e080a; color: #f4c5b7; font-family: "SFMono-Regular", Consolas, monospace; font-size: 20px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.partner-divider { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: #98767d; font-family: var(--serif); font-size: 12px; font-style: italic; }
.partner-divider::before, .partner-divider::after { content: ""; flex: 1; height: 1px; background: #4d2932; }
.invite-input { text-transform: lowercase; }

.modal { position: fixed; z-index: 10; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: calc(14px + env(safe-area-inset-top)) 12px 22px; background: rgba(0, 0, 0, .77); }
.modal-panel { width: min(100%, 430px); max-height: none; padding: 19px; border: 1px solid #64313c; border-radius: 22px; background: #181014; box-shadow: 0 20px 58px rgba(0, 0, 0, .58); }
.modal-panel h2 { margin: 5px 0 0; color: #fae6dc; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.modal-content { margin-top: 17px; }
.modal-content > * + * { margin-top: 15px; }
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #40252c; border-radius: 12px; background: #100b0d; color: #ead4cb; text-align: left; }
.choice.is-selected { border-color: #bb3450; background: #2b1119; }
.choice span:last-child { color: #e65570; font-size: 18px; font-weight: 900; }
.form-note { min-height: 17px; margin: 0; color: #e99aae; font-size: 12px; line-height: 1.4; }
.empty { padding: 18px; border: 1px dashed #492a32; border-radius: 13px; color: #a9858b; font-size: 13px; line-height: 1.5; }

@media (min-width: 540px) {
  body { background: radial-gradient(circle at 50% 10%, #241018, #050304 55%); }
  .phone-shell { min-height: 844px; box-shadow: 0 0 0 1px rgba(255, 185, 198, .07), 0 26px 80px rgba(0, 0, 0, .45); }
  .bottom-nav { bottom: max(0px, calc((100svh - 844px) / 2)); }
}