:root {
  --cl-ink: #00191f;
  --cl-ink-2: #00252a;
  --cl-panel: #062a2f;
  --cl-panel-2: #0a3438;
  --cl-line: #315257;
  --cl-gold: #c79a43;
  --cl-ivory: #f4eadb;
  --cl-muted: #aebcbb;
  --cl-aqua: #48d5c7;
  --cl-coral: #ef5c58;
  --cl-serif: Georgia, "Times New Roman", serif;
  --cl-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--cl-ink) !important;
  color: var(--cl-ivory);
  font-family: var(--cl-sans);
  overflow-x: hidden;
}

body {
  display: block !important;
  background:
    radial-gradient(circle at 12% 5%, rgba(29, 116, 113, .18), transparent 28rem),
    linear-gradient(150deg, #00181d 0%, #00292c 53%, #00151b 100%) !important;
}

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }

.phone-frame {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

.phone-notch { display: none !important; }
.status-bar {
  position: relative !important;
  z-index: 30;
  height: 55px !important;
  padding: 18px 30px 8px !important;
  background: #004247 !important;
  color: #fff !important;
  font: 700 16px/1 var(--cl-sans) !important;
}
.status-icons { color: var(--cl-ivory) !important; }

.screen-container {
  height: calc(100dvh - 55px) !important;
  padding-bottom: 86px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: transparent !important;
}
.screen-container::-webkit-scrollbar { display: none; }
.screen { min-height: 100%; background: transparent !important; }

/* Shared Chronicle Loom masthead */
.home-header,
.mobile-brand-header,
.feature-brand-header {
  position: relative !important;
  padding: 22px 28px 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(81, 207, 194, .24) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(31, 129, 123, .34), transparent 52%),
    linear-gradient(135deg, #00484b 0%, #003438 55%, #00272d 100%) !important;
  box-shadow: none !important;
}
.header-row,
.mobile-brand-header {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}
.brand { min-width: 0; gap: 13px !important; }
.brand-icon,
.mobile-brand-logo {
  width: 92px !important;
  height: 92px !important;
  flex: 0 0 92px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.brand-icon img,
.mobile-brand-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.brand-name,
.mobile-brand-name {
  color: var(--cl-ivory) !important;
  font: 700 clamp(31px, 9vw, 48px)/.92 var(--cl-serif) !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
.hdr-actions,
.mobile-brand-actions {
  margin-left: auto !important;
  display: flex !important;
  gap: 10px !important;
}
.hdr-btn,
.mobile-brand-action {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: var(--cl-ivory) !important;
  border: 1px solid rgba(199, 154, 67, .62) !important;
  border-radius: 16px !important;
  background: rgba(0, 26, 32, .8) !important;
  box-shadow: none !important;
}
.hdr-btn svg { width: 26px !important; height: 26px !important; }
.home-tagline {
  max-width: 590px !important;
  margin: 18px 0 26px !important;
  color: var(--cl-ivory) !important;
  font: 400 17px/1.52 var(--cl-sans) !important;
}
.home-tagline::before {
  content: "A CROSS-DEVICE WRITING TOOL FOR AUTHORS & WORLDBUILDERS";
  display: block;
  margin-bottom: 14px;
  color: #baa66e;
  font: 700 11px/1.25 var(--cl-sans);
  letter-spacing: .18em;
}

.new-proj-btn,
.mobile-home-account-btn {
  width: 100% !important;
  min-height: 70px !important;
  margin: 0 0 16px !important;
  border-radius: 14px !important;
  font: 800 20px/1 var(--cl-sans) !important;
  box-shadow: none !important;
}
.new-proj-btn {
  color: #102323 !important;
  border: 1px solid #e5b74b !important;
  background: linear-gradient(135deg, #e8a92c, #f0ba43) !important;
}
.mobile-home-account-btn {
  color: var(--cl-aqua) !important;
  border: 1px solid var(--cl-aqua) !important;
  background: rgba(0, 26, 32, .48) !important;
}

.home-command-tools {
  display: none !important;
}
.sec {
  padding: 25px 28px 0 !important;
  background: transparent !important;
}
.sec-hdr { margin: 0 0 18px !important; }
.sec-title,
.feature-title,
.screen-title {
  color: var(--cl-ivory) !important;
  font: 700 28px/1.08 var(--cl-serif) !important;
  letter-spacing: -.02em !important;
}
.sec-link { color: var(--cl-aqua) !important; font-weight: 700 !important; }
.carousel {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: min(88vw, 370px) !important;
  gap: 13px !important;
  margin: 0 -28px !important;
  padding: 0 28px 5px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.book-card {
  min-height: 295px !important;
  padding: 18px !important;
  scroll-snap-align: start;
  border: 1px solid rgba(199, 154, 67, .75) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(26, 50, 48, .97), rgba(4, 34, 37, .98)) !important;
  box-shadow: none !important;
}
.book-card::before { background: var(--cl-gold) !important; }
.bk-cover {
  width: 92px !important;
  height: 165px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(244, 234, 219, .3) !important;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, .28) !important;
}
.valmoria-cover {
  background:
    linear-gradient(180deg, transparent, rgba(11, 29, 25, .34)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 180'%3E%3Crect width='100' height='180' fill='%23859a69'/%3E%3Cpath d='M0 165 34 83l13 25 19-64 34 121z' fill='%233f5e44'/%3E%3Cpath d='m17 165 25-66 15 27 19-45 24 84z' fill='%235a7350'/%3E%3C/svg%3E") center/cover !important;
}
.untitled-cover {
  background:
    linear-gradient(180deg, transparent, rgba(4, 18, 24, .2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 180'%3E%3Crect width='100' height='180' fill='%234d6570'/%3E%3Cpath d='M48 25h5v117h-5zM25 108l25-83 25 83-25-13z' fill='%231b2b38'/%3E%3C/svg%3E") center/cover !important;
}
.bk-copy h3,
.book-card h3 { color: var(--cl-ivory) !important; font: 700 27px/1.1 var(--cl-serif) !important; }
.bk-genre { color: #e2b949 !important; border-color: #c79a43 !important; }
.bk-stat strong { color: var(--cl-ivory) !important; font-size: 22px !important; }
.bk-stat span, .bk-sub, .bk-target { color: var(--cl-muted) !important; }
.progress-track, .bk-progress { background: #27484b !important; }
.progress-fill, .bk-progress > span { background: var(--cl-aqua) !important; }

.home-summary .stats-grid,
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 18px 10px !important;
  border: 1px solid var(--cl-line) !important;
  border-radius: 17px !important;
  background: rgba(4, 41, 44, .72) !important;
}
.st-card {
  min-width: 0 !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-right: 1px solid rgba(78, 112, 112, .45) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
.st-card:last-child { border-right: 0 !important; }
.st-val { color: var(--cl-ivory) !important; font: 700 24px/1 var(--cl-serif) !important; }
.st-lab { color: var(--cl-muted) !important; font-size: 10px !important; }
.activity-card,
.creative-card,
.activity-item {
  border-color: var(--cl-line) !important;
  background: rgba(4, 41, 44, .72) !important;
  box-shadow: none !important;
}

/* Fixed app navigation */
.bot-nav,
.feature-bottom-nav {
  position: fixed !important;
  z-index: 100 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 86px !important;
  padding: 7px 10px max(7px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px !important;
  border: 0 !important;
  border-top: 1px solid rgba(199, 154, 67, .34) !important;
  border-radius: 0 !important;
  background: rgba(0, 26, 32, .97) !important;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(18px);
}
.nv,
.feature-bottom-nav button {
  min-width: 0 !important;
  padding: 7px 2px 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #c4beb0 !important;
  font: 500 11px/1 var(--cl-sans) !important;
}
.nv svg { width: 24px !important; height: 24px !important; }
.nv.active,
.feature-bottom-nav button.active,
.feature-bottom-nav button[aria-current="page"] {
  color: var(--cl-aqua) !important;
  border-color: rgba(72, 213, 199, .75) !important;
  background: linear-gradient(145deg, rgba(73, 216, 201, .22), rgba(22, 120, 115, .14)) !important;
  box-shadow: inset 0 0 20px rgba(72, 213, 199, .08) !important;
}

/* Live feature screens: real Chronicle Loom controls, reference presentation */
#mobile-feature-view {
  position: fixed !important;
  z-index: 160 !important;
  inset: 0 !important;
  display: none;
  overflow-y: auto !important;
  padding: 0 0 104px !important;
  background:
    radial-gradient(circle at 88% 0, rgba(20, 112, 108, .16), transparent 38rem),
    linear-gradient(150deg, #00171d, #00262b 62%, #00161c) !important;
  color: var(--cl-ivory) !important;
}
#mobile-feature-view.is-open { display: block !important; }
#mobile-feature-view .feature-brand-header {
  min-height: 210px !important;
  display: flex !important;
  align-items: center !important;
}
#mobile-feature-view .feature-close {
  margin: 25px 28px 0 !important;
  padding: 0 !important;
  color: var(--cl-aqua) !important;
  border: 0 !important;
  background: transparent !important;
  font: 700 12px/1 var(--cl-sans) !important;
  letter-spacing: .18em;
  text-transform: uppercase;
}
#mobile-feature-view .feature-title {
  margin: 20px 28px 22px !important;
  font-size: clamp(38px, 11vw, 58px) !important;
}
#mobile-feature-view .feature-content {
  padding: 0 28px 24px !important;
}
#mobile-feature-view .feature-content > * {
  max-width: 100% !important;
}
#mobile-feature-view .card,
#mobile-feature-view .panel,
#mobile-feature-view form,
#mobile-feature-view .editor,
#mobile-feature-view fieldset {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  padding: 20px !important;
  border: 1px solid var(--cl-line) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(5, 43, 47, .94), rgba(2, 31, 36, .96)) !important;
  box-shadow: none !important;
}
#mobile-feature-view h1,
#mobile-feature-view h2,
#mobile-feature-view h3,
#mobile-feature-view h4 {
  color: var(--cl-ivory) !important;
}
#mobile-feature-view h1,
#mobile-feature-view h2 { font-family: var(--cl-serif) !important; }
#mobile-feature-view .panel-head,
#mobile-feature-view .section-head {
  padding: 0 0 16px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid rgba(199, 154, 67, .45) !important;
}
#mobile-feature-view label {
  display: block !important;
  margin: 0 0 8px !important;
  color: #d7d4ca !important;
  font: 500 16px/1.3 var(--cl-sans) !important;
}
#mobile-feature-view input:not([type="checkbox"]):not([type="radio"]),
#mobile-feature-view select,
#mobile-feature-view textarea {
  width: 100% !important;
  max-width: none !important;
  min-height: 58px !important;
  margin: 0 0 18px !important;
  padding: 14px 16px !important;
  color: var(--cl-ivory) !important;
  border: 1px solid #3b5b60 !important;
  border-radius: 12px !important;
  outline: none !important;
  background: rgba(0, 24, 31, .76) !important;
  box-shadow: none !important;
}
#mobile-feature-view textarea { min-height: 132px !important; resize: vertical; }
#mobile-feature-view input:focus,
#mobile-feature-view select:focus,
#mobile-feature-view textarea:focus { border-color: var(--cl-aqua) !important; }
#mobile-feature-view button,
#mobile-feature-view .btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--cl-line);
  border-radius: 12px;
  background: rgba(0, 27, 33, .8);
  color: var(--cl-ivory);
}
#mobile-feature-view button.primary,
#mobile-feature-view .primary,
#mobile-feature-view button[type="submit"],
#mobile-feature-view [data-action*="save"] {
  color: #06272b !important;
  border-color: var(--cl-aqua) !important;
  background: linear-gradient(135deg, #41c9bd, #69ddd0) !important;
}
#mobile-feature-view .danger,
#mobile-feature-view [data-action*="delete"] {
  color: #fff !important;
  border-color: var(--cl-coral) !important;
  background: var(--cl-coral) !important;
}
#mobile-feature-view .notice,
#mobile-feature-view .status-bar,
#mobile-feature-view .alert,
#mobile-feature-view .banner {
  color: #fff !important;
  border-color: #ff746e !important;
  background: linear-gradient(90deg, #d84d49, #eb6962) !important;
}
#mobile-feature-view .grid,
#mobile-feature-view .form-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
#mobile-feature-view .feature-bottom-nav { display: grid !important; }

/* Reference-specific active navigation and editor cues */
#mobile-feature-view[data-feature*="location"] .feature-bottom-nav button[data-destination="world"],
#mobile-feature-view[data-feature*="timeline"] .feature-bottom-nav button[data-destination="world"],
#mobile-feature-view[data-feature*="map"] .feature-bottom-nav button[data-destination="world"],
#mobile-feature-view[data-feature*="spell"] .feature-bottom-nav button[data-destination="world"],
#mobile-feature-view[data-feature*="citation"] .feature-bottom-nav button[data-destination="world"],
#mobile-feature-view[data-feature*="monster"] .feature-bottom-nav button[data-destination="craft"],
#mobile-feature-view[data-feature*="character"] .feature-bottom-nav button[data-destination="craft"],
#mobile-feature-view[data-feature*="plot"] .feature-bottom-nav button[data-destination="craft"],
#mobile-feature-view[data-feature*="unraveled"] .feature-bottom-nav button[data-destination="craft"],
#mobile-feature-view[data-feature*="social"] .feature-bottom-nav button[data-destination="social"],
#mobile-feature-view[data-feature*="settings"] .feature-bottom-nav button[data-destination="profile"],
#mobile-feature-view[data-feature*="login"] .feature-bottom-nav button[data-destination="profile"] {
  color: var(--cl-aqua) !important;
  border-color: rgba(72, 213, 199, .75) !important;
  background: rgba(72, 213, 199, .18) !important;
}

/* Generic redesigned menu screens */
.generic-screen,
.menu-screen { padding-bottom: 100px !important; }
.screen-hero,
.generic-hero { background: transparent !important; color: var(--cl-ivory) !important; }
.tool-card,
.menu-card,
.action-card,
.feature-card {
  border: 1px solid var(--cl-line) !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(7, 47, 50, .94), rgba(2, 31, 36, .98)) !important;
  color: var(--cl-ivory) !important;
  box-shadow: none !important;
}
.tool-card p,
.menu-card p,
.action-card p,
.feature-card p { color: var(--cl-muted) !important; }
.tool-card .icon,
.menu-card .icon,
.action-card .icon,
.feature-card .icon { color: var(--cl-aqua) !important; }

@media (min-width: 700px) {
  body { display: grid !important; place-items: center; }
  .phone-frame { max-width: 430px !important; box-shadow: 0 25px 80px rgba(0,0,0,.45) !important; }
  .bot-nav,
  .feature-bottom-nav { left: 50% !important; right: auto !important; width: 430px !important; transform: translateX(-50%); }
  #mobile-feature-view { left: 50% !important; right: auto !important; width: 430px !important; transform: translateX(-50%); }
}

@media (max-width: 390px) {
  .home-header,
  .mobile-brand-header,
  .feature-brand-header { padding-left: 18px !important; padding-right: 18px !important; }
  .brand-icon,
  .mobile-brand-logo { width: 68px !important; height: 68px !important; flex-basis: 68px !important; }
  .brand-name,
  .mobile-brand-name { font-size: 31px !important; }
  .hdr-btn,
  .mobile-brand-action { width: 43px !important; height: 43px !important; min-width: 43px !important; border-radius: 13px !important; }
  .sec,
  #mobile-feature-view .feature-content { padding-left: 18px !important; padding-right: 18px !important; }
  .carousel { margin-left: -18px !important; margin-right: -18px !important; padding-left: 18px !important; padding-right: 18px !important; }
  #mobile-feature-view .feature-title,
  #mobile-feature-view .feature-close { margin-left: 18px !important; margin-right: 18px !important; }
}