/* Colossal skin v2f4 — black page, white cards, black→white blur header, strong palette, full font purge */

@font-face {
  font-family: "NB Architekt Light";
  src: url("/fonts/NBArchitektStd-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NB Architekt Std";
  src: url("/fonts/NBArchitektStd-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf Light";
  src: url("/fonts/Telegraf-UltraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf";
  src: url("/fonts/Telegraf-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Telegraf Bold";
  src: url("/fonts/Telegraf-UltraBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== tokens (Colossal strong) ========== */
body.v2-colossal {
  --nara-bg-app: #eeeeee;
  --nara-bg-surface: #ffffff;
  --nara-bg-elevated: #f1f1f1;
  --nara-border-subtle: #d0d0d0;
  --nara-border-strong: #bcbcbc;
  --nara-text-main: #000000;
  --nara-text-muted: #838383;
  --nara-text-inactive: #aaaaaa;
  --nara-color-primary: #ad65d4;
  --nara-color-primary-hover: #8e4bd5;
  --nara-color-primary-bg: rgba(173, 101, 212, 0.12);
  --nara-color-success: #a5ea42;
  --nara-color-success-bg: rgba(165, 234, 66, 0.12);
  --nara-color-warning: #fc6c4a;
  --nara-color-warning-bg: rgba(252, 108, 74, 0.12);
  --nara-color-error: #fc6c4a;
  --nara-color-error-bg: rgba(252, 108, 74, 0.12);
  --nara-color-info: #ad65d4;
  --nara-color-info-bg: rgba(173, 101, 212, 0.1);
  --nara-color-purple: #8e4bd5;
  --nara-color-purple-bg: rgba(142, 75, 213, 0.12);
  --nara-radius-sm: 0px;
  --nara-radius-md: 0px;
  --nara-radius-lg: 0px;
  --nara-shadow: none;
  --nara-shadow-md: 0 5px 12px 0 rgba(0, 0, 0, 0.08);
  --co-purple: #ad65d4;
  --co-coral: #fc6c4a;
  --co-ink: #000000;
  --co-line: #d0d0d0;
  --co-paper: #eeeeee;
  --co-peach: #f3d9c8;
  --header-h: 64px;

  font-family: Telegraf, system-ui, sans-serif !important;
  /* Colossal-like page: paper white → soft peach gradient (not solid black) */
  background-color: #eeeeee !important;
  background-image: linear-gradient(
    180deg,
    #f7f7f7 0%,
    #eeeeee 28%,
    #f0e2d6 62%,
    #f3d9c8 100%
  ) !important;
  background-attachment: fixed !important;
  color: #000000 !important;
}

/* kill leftover Inter / system nara font stacks */
body.v2-colossal,
body.v2-colossal * {
  font-family: Telegraf, system-ui, sans-serif !important;
}
body.v2-colossal h1,
body.v2-colossal h2,
body.v2-colossal h3,
body.v2-colossal h4,
body.v2-colossal h5,
body.v2-colossal h6,
body.v2-colossal .section-label,
body.v2-colossal .nara-logo-text,
body.v2-colossal .logo-text,
body.v2-colossal .filter-pill,
body.v2-colossal .project-status,
body.v2-colossal .beta-tag,
body.v2-colossal .mini-stat-label,
body.v2-colossal .mini-stat-val-usd,
body.v2-colossal .btn,
body.v2-colossal .btn-primary,
body.v2-colossal .btn-secondary,
body.v2-colossal .btn-danger,
body.v2-colossal .modal-box h3,
body.v2-colossal #ledger-modal-title,
body.v2-colossal .drawer-inline-form h4,
body.v2-colossal .drawer-table th,
body.v2-colossal .project-strip-title,
body.v2-colossal .link-name,
body.v2-colossal .project-initial-icon {
  font-family: "NB Architekt Std", "NB Architekt Light", system-ui, sans-serif !important;
}

/* page chrome on paper/peach gradient */
body.v2-colossal .container {
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 16px 40px !important;
  position: relative;
  z-index: 1;
  color: #000;
}
body.v2-colossal .footer,
body.v2-colossal .spinner-text,
body.v2-colossal .loading-text {
  color: #838383 !important;
}
body.v2-colossal .section-label {
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #838383 !important;
  font-size: 0.7rem !important;
}

/* white cards on paper gradient */
body.v2-colossal .section-panel {
  background: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.06) !important;
  color: #000 !important;
}
body.v2-colossal .section-panel .section-label {
  color: #838383 !important;
}
body.v2-colossal .link-card,
body.v2-colossal .project-strip,
body.v2-colossal .project-summary-card {
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #000 !important;
}
body.v2-colossal .link-card:hover,
body.v2-colossal .project-strip:hover {
  border-color: #ad65d4 !important;
}
body.v2-colossal .link-name,
body.v2-colossal .project-strip-title,
body.v2-colossal .project-strip-title a {
  color: #000 !important;
}
body.v2-colossal .project-strip-dates,
body.v2-colossal .project-strip-duration,
body.v2-colossal .link-arrow-icon {
  color: #838383 !important;
}

/* ========== HEADER: Colossal dynamic grey glass (NOT solid white) ==========
   Measured live colossal.com:
   - top: near-black / solid black chrome
   - affix: rgba(0,0,0,~0.45–0.55) + blur(~19–20px) → translucent GREY glass
   Text stays WHITE on both states.
*/
body.v2-colossal .site-header.nara-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  color: #fff !important;
}
body.v2-colossal .header-blur {
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
  /* top: solid black (matches Colossal screenshot header bar) */
  background: #000000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
/* scrolled: DARK grey frosted glass — same DNA as Colossal .affix blur */
body.v2-colossal .site-header.affix .header-blur {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
body.v2-colossal .header-inside {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: var(--header-h);
  padding: 0 16px !important;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  border-bottom: none !important;
  background: transparent !important;
  z-index: 1;
}
/* logo + chrome always white (never invert to black on scroll) */
body.v2-colossal .nara-logo-text,
body.v2-colossal .logo-text,
body.v2-colossal .site-header.affix .nara-logo-text,
body.v2-colossal .site-header.affix .logo-text {
  color: #fff !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.05rem !important;
}
body.v2-colossal .nara-logo-text span,
body.v2-colossal .logo-text span,
body.v2-colossal .site-header.affix .nara-logo-text span,
body.v2-colossal .site-header.affix .logo-text span {
  color: #ad65d4 !important;
}
body.v2-colossal .nara-logo-icon,
body.v2-colossal .logo-wrap img,
body.v2-colossal .site-header.affix .nara-logo-icon,
body.v2-colossal .site-header.affix .logo-wrap img {
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}
body.v2-colossal .beta-tag,
body.v2-colossal .site-header.affix .beta-tag {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 3px 7px;
  border-radius: 100px;
  color: #fff;
  margin-left: 6px;
}
body.v2-colossal #auth-label,
body.v2-colossal .auth-label,
body.v2-colossal .site-header.affix #auth-label,
body.v2-colossal .site-header.affix .auth-label {
  color: rgba(255, 255, 255, 0.78) !important;
}
body.v2-colossal #auth-avatar,
body.v2-colossal .site-header.affix #auth-avatar {
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

/* ========== icons: strong Colossal fills ========== */
body.v2-colossal .link-icon-wrap {
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  border: 1px solid #d0d0d0 !important;
}
body.v2-colossal .project-initial-icon {
  border-radius: 0 !important;
  color: #fff !important;
  font-family: "NB Architekt Std", system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
}

/* buttons square / pill rules */
body.v2-colossal .btn-add-link,
body.v2-colossal .toggle-drawer-btn,
body.v2-colossal .project-strip-actions button,
body.v2-colossal button.btn-add-link,
body.v2-colossal .action-btn,
body.v2-colossal button.action-btn,
body.v2-colossal .action-btn.btn-delete,
body.v2-colossal .link-actions .action-btn,
body.v2-colossal .link-actions button,
body.v2-colossal .edit-active .action-btn,
body.v2-colossal #features-grid .action-btn,
body.v2-colossal #links-grid .action-btn,
body.v2-colossal #projects-grid .action-btn {
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  background: #fff !important;
  color: #838383 !important;
  box-shadow: none !important;
}
body.v2-colossal .btn-add-link:hover,
body.v2-colossal .toggle-drawer-btn:hover,
body.v2-colossal .action-btn:hover,
body.v2-colossal button.action-btn:hover {
  border-color: #ad65d4 !important;
  color: #ad65d4 !important;
  background: rgba(173, 101, 212, 0.08) !important;
}
body.v2-colossal .btn-add-link.active {
  border-color: #ad65d4 !important;
  color: #ad65d4 !important;
  background: rgba(173, 101, 212, 0.12) !important;
}
body.v2-colossal .action-btn.btn-delete:hover {
  border-color: #fc6c4a !important;
  color: #fc6c4a !important;
  background: rgba(252, 108, 74, 0.1) !important;
}

body.v2-colossal .filter-pill {
  border-radius: 100px !important;
  border: 1px solid #d0d0d0 !important;
  background: #fff !important;
  color: #838383 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.68rem !important;
}
body.v2-colossal .filter-pill.active {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
body.v2-colossal .filter-pill:not(.active):hover {
  border-color: #ad65d4 !important;
  color: #ad65d4 !important;
}

body.v2-colossal .btn,
body.v2-colossal .btn-primary,
body.v2-colossal .btn-secondary,
body.v2-colossal .btn-danger,
body.v2-colossal .modal-actions .btn,
body.v2-colossal .drawer-form-actions .btn {
  border-radius: 100px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  box-shadow: none !important;
}
body.v2-colossal .btn-primary,
body.v2-colossal .btn.btn-primary {
  background: #ad65d4 !important;
  border: 1px solid #ad65d4 !important;
  color: #fff !important;
}
body.v2-colossal .btn-primary:hover {
  background: #8e4bd5 !important;
  border-color: #8e4bd5 !important;
}
body.v2-colossal .btn-secondary,
body.v2-colossal .btn.btn-secondary {
  background: transparent !important;
  border: 1px solid #000 !important;
  color: #000 !important;
}
body.v2-colossal .btn-secondary:hover {
  background: #ad65d4 !important;
  border-color: #ad65d4 !important;
  color: #fff !important;
}
body.v2-colossal .btn-danger {
  background: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}
body.v2-colossal .btn-danger:hover {
  background: #fc6c4a !important;
  border-color: #fc6c4a !important;
}

body.v2-colossal .project-status {
  border-radius: 100px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.6rem !important;
}
body.v2-colossal .project-status.active {
  background: rgba(173, 101, 212, 0.12) !important;
  color: #3e145f !important;
  border: 1px solid rgba(173, 101, 212, 0.35) !important;
}
body.v2-colossal .project-status.paused {
  background: rgba(252, 108, 74, 0.12) !important;
  color: #fc6c4a !important;
  border: 1px solid rgba(252, 108, 74, 0.35) !important;
}
body.v2-colossal .project-status.abandoned {
  background: #f1f1f1 !important;
  color: #838383 !important;
  border: 1px solid #d0d0d0 !important;
}

body.v2-colossal .modal-input,
body.v2-colossal select.modal-input,
body.v2-colossal .drawer-input,
body.v2-colossal input,
body.v2-colossal select,
body.v2-colossal textarea {
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  font-family: Telegraf, system-ui, sans-serif !important;
  background: #fff !important;
  color: #000 !important;
}
body.v2-colossal .modal-input:focus,
body.v2-colossal .drawer-input:focus {
  border-color: #ad65d4 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* expand drawer / mini dashboard */
body.v2-colossal .mini-stat-card,
body.v2-colossal .mini-stat-card.blue,
body.v2-colossal .mini-stat-card.purple,
body.v2-colossal .mini-stat-card.emerald,
body.v2-colossal .mini-stat-card.sky {
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.v2-colossal .mini-stat-card:hover {
  border-color: #ad65d4 !important;
}
body.v2-colossal .mini-stat-label {
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
  color: #838383 !important;
}
body.v2-colossal .mini-stat-icon-wrap {
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  background: transparent !important;
}
body.v2-colossal .mini-stat-icon-wrap.blue,
body.v2-colossal .mini-stat-icon-wrap.sky,
body.v2-colossal .mini-stat-icon-wrap.purple {
  color: #ad65d4 !important;
  border-color: rgba(173, 101, 212, 0.35) !important;
  background: rgba(173, 101, 212, 0.08) !important;
}
body.v2-colossal .mini-stat-icon-wrap.emerald {
  color: #a5ea42 !important;
  border-color: rgba(165, 234, 66, 0.4) !important;
  background: rgba(165, 234, 66, 0.1) !important;
}
body.v2-colossal .mini-stat-val-usd {
  color: #000 !important;
  letter-spacing: 0.02em;
}
body.v2-colossal .mini-stat-val-idr {
  font-family: Telegraf, system-ui, sans-serif !important;
  color: #838383 !important;
}
body.v2-colossal .drawer-table-wrap,
body.v2-colossal .drawer-inline-form {
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.v2-colossal .drawer-inline-form {
  background: #f8f8f8 !important;
}
body.v2-colossal .drawer-inline-form h4 {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  color: #000 !important;
}
body.v2-colossal .drawer-table th {
  letter-spacing: 0.06em;
  color: #838383 !important;
}
body.v2-colossal .drawer-table td {
  color: #000 !important;
}
body.v2-colossal .project-strip.expanded .chevron-icon {
  color: #ad65d4 !important;
}

/* modals */
body.v2-colossal .modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(2px);
}
body.v2-colossal .modal-box,
body.v2-colossal #ledger-modal .modal-box,
body.v2-colossal #modal .modal-box,
body.v2-colossal #delete-modal .modal-box {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
  background: #fff !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
  color: #000 !important;
}
body.v2-colossal .modal-box h3,
body.v2-colossal #ledger-modal-title {
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  color: #000 !important;
}
body.v2-colossal #ledger-modal-content,
body.v2-colossal #ledger-modal-content * {
  border-radius: 0 !important;
}
body.v2-colossal #ledger-modal .btn,
body.v2-colossal .project-strip-drawer .btn {
  border-radius: 100px !important;
}
body.v2-colossal #adb-logout-popup > div {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
}
body.v2-colossal #adb-logout-popup button {
  border-radius: 100px !important;
}

/* kill leftover soft radii */
body.v2-colossal .rounded,
body.v2-colossal .rounded-md,
body.v2-colossal .rounded-lg,
body.v2-colossal .rounded-xl,
body.v2-colossal .rounded-2xl {
  border-radius: 0 !important;
}

/* summary cards on black page still white */
body.v2-colossal .project-summary-card {
  background: #fff !important;
}
body.v2-colossal .project-summary-card .n,
body.v2-colossal .ps-count {
  color: #ad65d4 !important;
  font-family: "NB Architekt Std", system-ui, sans-serif !important;
}