/* NC Studios app skin. Mirrors the public website while keeping app text readable. */
@font-face{
  font-family:"NC Studio Brand";
  src:url("assets/fonts/NC_Font_.ttf?v=brand-20260612b") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"NC Studio Brand Lighter";
  src:url("assets/fonts/NC_Font_Lighter.ttf?v=brand-20260612b") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --nc-bg:#050504;
  --nc-bg-2:#0d0c0a;
  --nc-ink:#f7efe3;
  --nc-paper:#efe1cc;
  --nc-muted:#b8ac9a;
  --nc-soft:#8f8678;
  --nc-gold:#d8b76e;
  --nc-gold-2:#f0dca8;
  --nc-line:rgba(216,183,110,0.26);
  --nc-line-soft:rgba(216,183,110,0.14);
  --nc-panel:rgba(247,239,227,0.07);
  --nc-panel-2:rgba(247,239,227,0.11);
  --nc-danger:#ff927f;
  --nc-success:#7fd69b;
  --nc-font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --nc-font-display:Georgia,"Times New Roman",serif;
  --nc-font-mono:"SFMono-Regular","Menlo","Monaco","Courier New",monospace;
  --nc-font-brand:"NC Studio Brand Lighter","NC Studio Brand",Impact,sans-serif;
}

*{
  box-sizing:border-box;
  letter-spacing:0 !important;
  -webkit-tap-highlight-color:transparent;
}

html{
  min-height:100%;
  background:var(--nc-bg) !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

html,
body{
  height:auto !important;
  overflow-x:hidden !important;
}

body{
  min-height:100svh !important;
  margin:0 !important;
  color:var(--nc-ink) !important;
  background:
    linear-gradient(rgba(216,183,110,0.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(216,183,110,0.045) 1px, transparent 1px),
    linear-gradient(145deg,var(--nc-bg),var(--nc-bg-2)) !important;
  background-size:48px 48px,48px 48px,100% 100% !important;
  font-family:var(--nc-font-body) !important;
  font-weight:400 !important;
  overflow-y:auto !important;
}

body::before,
.hero::after,
.hero-main::after,
.tile::after,
.livePanel::after{
  content:none !important;
  display:none !important;
}

body::after{
  content:"" !important;
  position:fixed !important;
  inset:clamp(10px,2vw,28px) !important;
  z-index:0 !important;
  pointer-events:none !important;
  border:1px solid rgba(216,183,110,0.26) !important;
  background:
    linear-gradient(90deg,transparent 0 6%,rgba(216,183,110,0.16) 6% calc(6% + 1px),transparent calc(6% + 1px) 100%),
    linear-gradient(180deg,transparent 0 15%,rgba(216,183,110,0.16) 15% calc(15% + 1px),transparent calc(15% + 1px) 100%),
    linear-gradient(180deg,transparent 0 calc(100% - 70px),rgba(216,183,110,0.18) calc(100% - 70px) calc(100% - 69px),transparent calc(100% - 69px) 100%) !important;
  opacity:0.84 !important;
}

.app,
.app-shell,
header,
main,
.topbar,
.bottomRow,
.nav,
.ops-nav,
.nav-pill{
  position:relative !important;
  z-index:1 !important;
}

.app,
.app-shell{
  width:min(1180px,100%) !important;
  height:auto !important;
  min-height:100svh !important;
  margin:0 auto !important;
  padding-inline:clamp(16px,4vw,52px) !important;
}

.topbar{
  border:0 !important;
  border-bottom:1px solid rgba(216,183,110,0.24) !important;
  background:rgba(5,5,4,0.72) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.brand,
.brand-row,
.brandRow,
.brand-lockup{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
  color:inherit !important;
  text-decoration:none !important;
}

.logo,
.logo-mark{
  width:clamp(78px,12vw,126px) !important;
  height:44px !important;
  min-width:clamp(78px,12vw,126px) !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.logo img,
img.logo-mark{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 8px 20px rgba(216,183,110,0.18)) !important;
}

h1,
h2,
h3,
h4,
.entry-title,
.ops-title,
.record-title,
.itemTitle,
.cardTitle,
.hero h1,
.hero h2,
.heroTitle,
.sectionTitle{
  color:var(--nc-ink) !important;
  font-family:var(--nc-font-display) !important;
  font-weight:400 !important;
  line-height:0.98 !important;
  letter-spacing:0 !important;
}

h1,
.entry-title,
.hero h1,
.hero h2{
  font-size:clamp(34px,6vw,74px) !important;
}

h2,
.brand-text h2,
.sectionTitle{
  font-size:clamp(25px,4vw,46px) !important;
}

h3,
.ops-title,
.record-title,
.itemTitle{
  font-size:clamp(18px,2.7vw,27px) !important;
}

.brand h1,
.brand-text h2,
.nc-brand,
.lockupText{
  margin:0 !important;
  color:var(--nc-gold) !important;
  font-family:var(--nc-font-brand) !important;
  font-size:clamp(20px,3.2vw,36px) !important;
  font-weight:400 !important;
  line-height:0.94 !important;
  text-transform:none !important;
}

p,
li,
.subtext,
.ops-sub,
.ops-note,
.note-box,
.settingNote,
.field,
.meta-row,
.call-line,
.small-row,
.empty-state,
.tile p,
.brand p,
.hero p,
.entry-copy,
.introCopy,
.messageBody{
  color:var(--nc-paper) !important;
  font-family:var(--nc-font-body) !important;
  font-weight:400 !important;
  line-height:1.48 !important;
}

.brand p,
.hero p,
.subtext,
.ops-header p{
  color:var(--nc-muted) !important;
}

.kicker,
label,
.badge,
.chip,
.pill,
.btn,
.ghost-btn,
.danger-btn,
button,
.home,
.topPill,
.statusPill,
.nav a,
.nav-pill a,
.ops-nav a,
.stat span,
.stat-card span,
.liveLabel,
.liveStat span,
.liveAction span,
.tileFooter,
.split-actions span,
.project-summary span,
.buy-tags span,
.metaLabel,
.miniLabel,
.table th{
  color:var(--nc-gold-2) !important;
  font-family:var(--nc-font-mono) !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
}

strong,
b,
.stat strong,
.stat-card strong,
.tileMetric,
.settingValue,
.buy-amount,
.liveStat strong,
.liveAction strong,
.project-summary strong{
  color:var(--nc-ink) !important;
  font-family:var(--nc-font-body) !important;
  font-weight:650 !important;
  line-height:1.08 !important;
}

.panel,
.form-card,
.record-card,
.ops-card,
.ops-panel,
.buy-card,
.call-box,
.settingItem,
.stat,
.stat-card,
.tile,
.booking,
.client,
.template-card,
.message,
.message-card,
.entry-card,
.list,
.shot-card,
.timeline-card,
.gear-card,
.finance-card,
.delivery-card,
.project-card,
.card,
.quick-card,
.hero,
.livePanel,
.liveAction,
.consult-step,
.consult-section{
  border:1px solid var(--nc-line) !important;
  border-radius:0 !important;
  background:
    linear-gradient(180deg,rgba(216,183,110,0.075),rgba(216,183,110,0.02)),
    rgba(5,5,4,0.74) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.panel,
.form-card,
.record-card,
.ops-card,
.ops-panel,
.message-card,
.entry-card,
.consult-section{
  padding:clamp(16px,2.4vw,26px) !important;
}

.hero,
.hero-main,
.livePanel{
  background:
    linear-gradient(180deg,rgba(216,183,110,0.10),rgba(216,183,110,0.025)),
    rgba(5,5,4,0.78) !important;
}

.hero{
  padding:clamp(18px,3vw,34px) !important;
  overflow:visible !important;
}

.hero p,
.subtext,
.ops-header p{
  max-width:760px !important;
}

.stat,
.stat-card{
  min-height:auto !important;
  padding:14px !important;
}

.stat span,
.stat-card span{
  display:block !important;
  margin-bottom:8px !important;
}

.stat strong,
.stat-card strong{
  display:block !important;
  color:var(--nc-gold) !important;
  font-family:var(--nc-font-brand) !important;
  font-size:clamp(26px,4vw,40px) !important;
  font-weight:400 !important;
}

.dashboardMain,
.tiles{
  overflow:visible !important;
}

.dashboardMain{
  align-items:start !important;
}

.tiles{
  grid-auto-rows:minmax(158px,auto) !important;
}

.tile{
  min-height:158px !important;
  justify-content:flex-start !important;
  gap:9px !important;
  padding:16px !important;
  transition:border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

.tile:hover,
.tile:focus-within,
.record-card:hover,
.message-card:hover,
.entry-card:hover,
.ops-card:hover{
  border-color:rgba(240,220,168,0.58) !important;
  background:
    linear-gradient(180deg,rgba(216,183,110,0.11),rgba(216,183,110,0.035)),
    rgba(5,5,4,0.82) !important;
  transform:translateY(-1px) !important;
}

.tile h3,
.tileTitle,
.tileLabel{
  margin:0 !important;
  color:var(--nc-ink) !important;
  font-family:var(--nc-font-body) !important;
  font-size:16px !important;
  font-weight:650 !important;
  line-height:1.16 !important;
}

.tileMetric,
.tile strong{
  margin:0 !important;
  color:var(--nc-gold) !important;
  font-family:var(--nc-font-brand) !important;
  font-size:30px !important;
  font-weight:400 !important;
}

.tile p{
  margin:0 !important;
  max-height:none !important;
  overflow:visible !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

.tileFooter{
  margin-top:auto !important;
  color:var(--nc-muted) !important;
  font-size:12px !important;
}

.icon,
.tileIcon,
.tile-icon,
.quickIcon,
.avatar,
.initial{
  display:grid !important;
  place-items:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border:1px solid rgba(216,183,110,0.28) !important;
  border-radius:0 !important;
  color:var(--nc-gold-2) !important;
  background:rgba(5,5,4,0.72) !important;
  box-shadow:none !important;
  font-family:var(--nc-font-mono) !important;
  font-size:14px !important;
  font-weight:500 !important;
}

.livePanel{
  padding:16px !important;
  gap:14px !important;
}

.liveLabel{
  color:var(--nc-gold) !important;
}

.livePanel h3{
  color:var(--nc-ink) !important;
  font-family:var(--nc-font-display) !important;
  font-size:clamp(22px,3.6vw,36px) !important;
  font-weight:400 !important;
}

.liveStat,
.liveAction{
  border-radius:0 !important;
  background:rgba(0,0,0,0.24) !important;
}

.liveAction{
  min-height:48px !important;
  padding:10px !important;
  color:var(--nc-ink) !important;
  text-decoration:none !important;
}

.liveAction.primary,
.btn.primary,
.submitButton,
button[type="submit"],
.primary,
.active,
.nav a.active,
.ops-nav a.active,
.nav-pill a.active,
.selected,
.status-active{
  color:#080704 !important;
  border-color:rgba(240,220,168,0.72) !important;
  background:linear-gradient(90deg,var(--nc-gold),var(--nc-gold-2)) !important;
}

.quick{
  display:grid !important;
  gap:8px !important;
}

.quick a,
.btn,
.ghost-btn,
.danger-btn,
button,
.home,
.topPill,
.statusPill,
.nav a,
.ops-nav a,
.nav-pill a,
.action,
.submitButton,
.primary,
.secondary,
.bottomRow a{
  min-height:40px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:10px 14px !important;
  border:1px solid rgba(216,183,110,0.42) !important;
  border-radius:0 !important;
  color:var(--nc-gold-2) !important;
  background:rgba(5,5,4,0.72) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  font-family:var(--nc-font-mono) !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  white-space:normal !important;
}

.split-actions button{
  min-height:54px !important;
  padding:11px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  text-align:left !important;
}

.quick a:first-child{
  color:#080704 !important;
  border-color:rgba(240,220,168,0.72) !important;
  background:linear-gradient(90deg,var(--nc-gold),var(--nc-gold-2)) !important;
}

.quick a:last-child,
.ghost-btn,
.secondary{
  color:var(--nc-gold-2) !important;
  background:rgba(5,5,4,0.72) !important;
}

.danger-btn,
.danger,
button[data-clear],
button[data-delete],
.deleteBtn{
  color:var(--nc-danger) !important;
  border-color:rgba(255,146,127,0.36) !important;
  background:rgba(255,146,127,0.08) !important;
}

.btn:hover,
.ghost-btn:hover,
button:hover,
.home:hover,
.nav a:hover,
.ops-nav a:hover,
.nav-pill a:hover,
.submitButton:hover,
.quick a:hover{
  border-color:rgba(240,220,168,0.72) !important;
}

input,
select,
textarea{
  width:100%;
  color:var(--nc-ink) !important;
  caret-color:var(--nc-gold) !important;
  border:1px solid rgba(216,183,110,0.28) !important;
  border-radius:0 !important;
  background:rgba(0,0,0,0.34) !important;
  box-shadow:none !important;
  font-family:var(--nc-font-body) !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
}

textarea{
  min-height:118px;
  line-height:1.5 !important;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:rgba(239,225,204,0.52) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible{
  outline:2px solid rgba(216,183,110,0.46) !important;
  outline-offset:2px !important;
}

table,
.table,
.listTable{
  border-collapse:collapse !important;
  border-color:var(--nc-line) !important;
}

th,
td{
  border-color:var(--nc-line-soft) !important;
}

.bottomRow,
.nav,
.ops-nav,
.nav-pill{
  border:1px solid rgba(216,183,110,0.26) !important;
  border-radius:0 !important;
  background:rgba(5,5,4,0.78) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.ops-nav,
.nav-pill{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow-x:auto !important;
  padding:6px !important;
  gap:6px !important;
  scrollbar-width:none !important;
}

.ops-nav::-webkit-scrollbar,
.nav-pill::-webkit-scrollbar{
  display:none !important;
}

.ops-nav a,
.nav-pill a{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

.hero.ops-hero{
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.ops-hero .hero-main{
  min-height:auto !important;
}

.progress,
.progressTrack,
.bar,
.meter{
  overflow:hidden !important;
  border:1px solid rgba(216,183,110,0.28) !important;
  border-radius:0 !important;
  background:rgba(0,0,0,0.34) !important;
}

.progress span,
.progressFill,
.bar span,
.meter span{
  border-radius:0 !important;
  background:linear-gradient(90deg,var(--nc-gold),var(--nc-gold-2)) !important;
}

.empty-state,
.note-box,
.notice,
.toast{
  border:1px solid var(--nc-line) !important;
  border-radius:0 !important;
  color:var(--nc-paper) !important;
  background:rgba(5,5,4,0.78) !important;
}

.consult-layout{
  align-items:start !important;
}

.consult-guide{
  max-height:none !important;
  overflow:visible !important;
}

.consult-step{
  padding:13px !important;
  background:rgba(0,0,0,0.24) !important;
}

.consult-step b{
  display:block !important;
  margin-bottom:5px !important;
  color:var(--nc-gold-2) !important;
  font-family:var(--nc-font-body) !important;
  font-size:14px !important;
  font-weight:650 !important;
}

.consult-step p,
.consult-step li{
  margin-top:0 !important;
  color:var(--nc-paper) !important;
  font-size:13px !important;
  line-height:1.42 !important;
}

.consult-section h3{
  margin-top:0 !important;
  color:var(--nc-gold-2) !important;
}

.form-grid{
  gap:12px !important;
}

hr,
.divider,
.rule{
  border:0 !important;
  border-top:1px solid var(--nc-line) !important;
}

@media(max-width:760px){
  html,
  body{
    width:100% !important;
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  body{
    min-height:100svh !important;
    position:static !important;
  }

  body::after{
    inset:8px !important;
  }

  .app,
  .app-shell{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    overflow:visible !important;
    padding-inline:14px !important;
    padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .topbar{
    padding-block:14px !important;
    margin-bottom:10px !important;
  }

  .hero,
  .quick,
  .stats,
  .ops-stats,
  .dashboardMain{
    margin-bottom:10px !important;
  }

  .logo,
  .logo-mark{
    width:70px !important;
    height:38px !important;
    min-width:70px !important;
  }

  .brand h1,
  .brand-text h2,
  .nc-brand,
  .lockupText{
    font-size:clamp(18px,7vw,30px) !important;
  }

  .brand p{
    font-size:12px !important;
  }

  h1,
  .entry-title,
  .hero h1,
  .hero h2{
    font-size:clamp(34px,11vw,48px) !important;
    line-height:0.96 !important;
  }

  .hero{
    padding:16px !important;
  }

  .hero p{
    display:block !important;
    font-size:13px !important;
    line-height:1.38 !important;
  }

  .quick{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }

  .stats,
  .ops-stats{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .stat,
  .stat-card{
    min-height:76px !important;
    padding:12px !important;
  }

  .stat strong,
  .stat-card strong{
    font-size:28px !important;
  }

  .dashboardMain{
    display:block !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:10px !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .livePanel{
    display:block !important;
    min-height:auto !important;
    margin-bottom:10px !important;
    overflow:visible !important;
  }

  .livePanel p,
  .liveNext{
    display:block !important;
  }

  .liveStats{
    grid-template-columns:repeat(3,1fr) !important;
    margin-top:12px !important;
  }

  .liveCTA{
    grid-template-columns:repeat(2,1fr) !important;
    margin-top:12px !important;
  }

  .liveAction{
    min-height:44px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }

  .liveAction span,
  .liveAction strong{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .tiles{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-rows:auto !important;
    gap:10px !important;
    overflow:visible !important;
  }

  .tile{
    min-height:auto !important;
    padding:14px !important;
  }

  .tile p{
    display:block !important;
    font-size:13px !important;
    -webkit-line-clamp:unset !important;
  }

  .tileFooter{
    display:flex !important;
  }

  .bottomRow{
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    bottom:0 !important;
    display:grid !important;
    z-index:20 !important;
    padding:6px !important;
    padding-bottom:max(6px, env(safe-area-inset-bottom)) !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }

  .bottomRow a{
    min-width:0 !important;
    padding:8px 2px !important;
    font-size:9px !important;
    overflow-wrap:anywhere !important;
  }

  .nav-pill,
  .ops-nav{
    overflow-x:auto !important;
    justify-content:flex-start !important;
  }

  .nav-pill a,
  .ops-nav a{
    flex:0 0 auto !important;
  }

  .consult-layout > .ops-panel:not(.consult-guide){
    order:1 !important;
  }

  .consult-guide{
    order:2 !important;
  }
}