/* v1.7.85 — final reference-style UI layer
   Reference target: pale cool-gray neumorphism with soft raised surfaces,
   recessed controls, and restrained glass translucency.
*/
:root{
  --ui-bg:#e9edf1;
  --ui-bg-hi:#f4f6f8;
  --ui-surface:#eef2f5;
  --ui-surface-hi:#f7f9fa;
  --ui-surface-lo:#e2e7eb;
  --ui-text:#303b45;
  --ui-muted:#7c8790;
  --ui-line:rgba(139,153,164,.16);
  --ui-light:rgba(255,255,255,.94);
  --ui-dark:rgba(111,126,139,.15);
  --ui-accent:#49b9dd;
  --ui-accent-2:#4d78ed;
  --ui-pink:#e858bb;
  --ui-green:#51d3ab;
  --ui-radius:20px;
  --ui-raised:10px 10px 22px var(--ui-dark),-10px -10px 22px var(--ui-light),inset 0 1px 0 rgba(255,255,255,.82);
  --ui-raised-sm:6px 6px 14px rgba(111,126,139,.13),-6px -6px 14px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.78);
  --ui-recessed:inset 4px 4px 10px rgba(111,126,139,.13),inset -4px -4px 10px rgba(255,255,255,.88);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --header-content-h:54px;
  --nav-content-h:62px;
}
*{-webkit-tap-highlight-color:transparent}
html,body{
  margin:0!important;padding:0!important;width:100%;min-height:100%;min-height:100dvh;
  background:var(--ui-bg)!important;color:var(--ui-text)!important;
  overscroll-behavior-y:none;overflow-x:hidden;
}
body{
  background:
    radial-gradient(circle at 18% 2%,rgba(255,255,255,.9),transparent 29%),
    radial-gradient(circle at 88% 23%,rgba(255,255,255,.48),transparent 34%),
    linear-gradient(180deg,var(--ui-bg) 0%,#edf1f4 100%)!important;
  background-attachment:fixed!important;
}
.app-shell{margin:0!important;padding:0!important;min-height:100dvh!important;background:transparent!important;overflow:visible!important}

/* Safe areas belong to the chrome itself — never as separate blank strips. */
.app-header,
html[data-app-theme] .app-header{
  position:fixed!important;z-index:40!important;top:0!important;left:0!important;right:0!important;
  width:100%!important;transform:none!important;
  height:calc(var(--header-content-h) + var(--safe-top))!important;
  min-height:calc(var(--header-content-h) + var(--safe-top))!important;
  padding:var(--safe-top) 12px 0!important;margin:0!important;
  display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;align-items:center!important;
  background:linear-gradient(180deg,rgba(238,242,245,.99),rgba(233,238,242,.97))!important;
  border:0!important;border-bottom:1px solid var(--ui-line)!important;border-radius:0!important;
  color:var(--ui-text)!important;
  box-shadow:0 7px 18px rgba(111,126,139,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.04)!important;backdrop-filter:blur(16px) saturate(1.04)!important;
  overflow:hidden!important;
}
.app-header::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.45),transparent 42%)}
.header-title-wrap{position:relative;z-index:1;text-align:center!important;min-width:0!important}
.app-header h1{color:var(--ui-text)!important;font-size:16px!important;font-weight:700!important;letter-spacing:.01em!important}
.app-header h1:empty,.header-subtitle{display:none!important}
.header-button{
  position:relative;z-index:2;width:38px!important;height:38px!important;padding:8px!important;border-radius:14px!important;
  border:1px solid rgba(139,153,164,.13)!important;color:#50606d!important;
  background:linear-gradient(145deg,var(--ui-surface-hi),var(--ui-surface-lo))!important;
  box-shadow:var(--ui-raised-sm)!important;
}
.header-button:active{transform:translateY(1px);box-shadow:var(--ui-recessed)!important}

.main{
  margin:0!important;
  padding:calc(var(--header-content-h) + var(--safe-top)) 0 calc(var(--nav-content-h) + var(--safe-bottom))!important;
  min-height:100dvh!important;background:transparent!important;
}
.main>.page,.main>.form-page,.main>.detail-page{margin-top:0!important}
.page{padding-top:0!important;padding-bottom:10px!important}
.form-page{padding-top:8px!important;padding-bottom:14px!important}
.detail-page{padding-top:12px!important;padding-bottom:14px!important;background:transparent!important}

.bottom-nav,
html[data-app-theme] .bottom-nav{
  position:fixed!important;z-index:45!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;transform:none!important;
  height:calc(var(--nav-content-h) + var(--safe-bottom))!important;
  min-height:calc(var(--nav-content-h) + var(--safe-bottom))!important;
  padding:5px 7px var(--safe-bottom)!important;margin:0!important;
  display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important;
  background:linear-gradient(180deg,rgba(237,241,244,.99),rgba(232,237,241,.99))!important;
  border:0!important;border-top:1px solid var(--ui-line)!important;border-radius:0!important;
  box-shadow:0 -8px 20px rgba(111,126,139,.11),inset 0 1px 0 rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.04)!important;backdrop-filter:blur(16px) saturate(1.04)!important;
  overflow:hidden!important;
}
.bottom-nav::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--safe-bottom) + 1px);background:#e8edf1!important;pointer-events:none}
.bottom-nav::after{display:none!important}
.nav-item{
  position:relative;z-index:1;min-width:0!important;margin:0!important;padding:3px 0!important;border-radius:16px!important;
  border:1px solid transparent!important;background:transparent!important;color:#73808b!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
}
.nav-item.active{
  color:#354552!important;border-color:rgba(139,153,164,.13)!important;
  background:linear-gradient(145deg,var(--ui-surface-hi),var(--ui-surface-lo))!important;
  box-shadow:var(--ui-raised-sm)!important;
}
.nav-item:active{transform:translateY(1px);box-shadow:var(--ui-recessed)!important}
.nav-item small{font-size:9px!important;line-height:1!important}
.nav-item>.ref-icon-mask{--ref-icon-size:19px!important}

/* Main raised surfaces */
:is(.card,.species-group-card,.taxon-group-card,.list-group,.individual-card,.room-stat,.manual-card,.output-card,.stat-card,.portfolio-empty,
.lineage-selector,.history-list,.maturity-card,.trade-status-card,.form-section,.ref-form-screen section,.manual-library-card,.manual-edit-card,
.manual-species-card,.csv-target,.csv-card,.listing-line,.builder-tools,.photo-box,.profile-card,.premium-card,.mypage-mini-stats>div,
.lot-count-grid label,.quote-past,.ocr-drop,.individual-ocr-reference,.voice-command-box){
  background:linear-gradient(145deg,rgba(247,249,250,.90),rgba(231,236,240,.90))!important;
  border:1px solid rgba(139,153,164,.13)!important;border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-raised)!important;color:var(--ui-text)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.02);backdrop-filter:blur(12px) saturate(1.02);
}
.form-section,.ref-form-screen section{padding:12px!important;margin:10px 0 14px!important}
.form-section>h3,.ref-form-screen section>h3{color:#46545f!important}

/* Recessed fields mirror the reference search/select controls. */
:is(.control-shell,.control,.field select.control,.field input.control,textarea.control,.searchbox,.temperature-row,.size-confirm-row input,
.lot-count-grid input,.quote-past,.ocr-raw){
  background:linear-gradient(145deg,#e8edf1,#f3f6f8)!important;
  border:1px solid rgba(139,153,164,.10)!important;border-radius:15px!important;
  box-shadow:var(--ui-recessed)!important;color:var(--ui-text)!important;
}
.control-shell{min-height:48px!important;padding:7px 11px!important}
.control-label{color:#77838d!important}
.control-input,.picker-value,.control{color:#34424d!important;background:transparent!important}
.searchbox{height:42px!important;padding:0 13px!important}
.searchbox input{color:#34424d!important;font-size:11.5px!important}
.searchbox input::placeholder{color:#89949c!important}
:is(.control-shell,.control,.searchbox):focus-within,:is(.control,textarea.control):focus{border-color:rgba(73,185,221,.26)!important;box-shadow:var(--ui-recessed),0 0 0 3px rgba(73,185,221,.08)!important}

/* Raised button language from the reference. */
:is(.btn,.choice-button,.mini-select,.individual-filter-tag,.individual-sort-direction button,.person-choice,.duration-chips button,
.builder-actions button,.builder-tabs button,.load-button,.add-line,.copy-line,.plain-list-row,.species-option.flat,.taxon-management-renumber,
.individual-management-renumber,.management-renumber-detail,.voice-target-button,.voice-pill,.individual-voice-action,.header-button){
  border:1px solid rgba(139,153,164,.13)!important;border-radius:15px!important;
  background:linear-gradient(145deg,var(--ui-surface-hi),var(--ui-surface-lo))!important;
  color:#42515c!important;box-shadow:var(--ui-raised-sm)!important;
}
:is(.btn,.choice-button,.mini-select,.individual-filter-tag,.individual-sort-direction button,.person-choice,.duration-chips button,
.builder-actions button,.builder-tabs button,.load-button,.add-line,.copy-line,.plain-list-row,.species-option.flat,.taxon-management-renumber,
.individual-management-renumber,.management-renumber-detail,.voice-target-button,.voice-pill,.individual-voice-action):active{
  transform:translateY(1px) scale(.99)!important;box-shadow:var(--ui-recessed)!important;
}
.btn.primary,.btn.green,.btn.pink,.btn.orange,.btn.brown,.fab{
  color:white!important;border-color:rgba(255,255,255,.2)!important;
  background:linear-gradient(145deg,#54c3e3,#4587df)!important;
  box-shadow:8px 8px 18px rgba(81,112,144,.20),-6px -6px 16px rgba(255,255,255,.66),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.btn.pink{background:linear-gradient(145deg,#ec6ac6,#a76bf1)!important}
.btn.green{background:linear-gradient(145deg,#63d9b6,#3bb79d)!important}
.btn.orange{background:linear-gradient(145deg,#f5a75e,#e47f52)!important}
.btn.danger{background:linear-gradient(145deg,#dc7979,#c85f68)!important;color:#fff!important}

/* Pills / selected controls */
:is(.individual-data-tag,.individual-active-tag,.badge,.subspecies-group-badge,.chip){
  border:1px solid rgba(139,153,164,.10)!important;border-radius:999px!important;
  background:linear-gradient(145deg,#f5f7f9,#e8edf1)!important;color:#56656f!important;
  box-shadow:3px 3px 8px rgba(111,126,139,.10),-3px -3px 8px rgba(255,255,255,.84)!important;
}
.toggle-group,.pill-switch{background:#e9edf1!important;border:1px solid rgba(139,153,164,.10)!important;border-radius:18px!important;box-shadow:var(--ui-recessed)!important;padding:3px!important}
.toggle-group label,.pill-switch button{border:0!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;color:#74808a!important}
.toggle-group label:has(input:checked),.pill-switch button.active{background:linear-gradient(145deg,#f8fafb,#e5ebef)!important;color:#3e5362!important;box-shadow:var(--ui-raised-sm)!important}

/* List rows use separated, floating cells rather than flat white strips. */
.taxon-group-body{background:transparent!important;padding:6px!important}
.individual-list-item-v1777,.list-row,.person-row{
  border-radius:18px!important;background:linear-gradient(145deg,rgba(247,249,250,.92),rgba(232,237,241,.92))!important;
  border:1px solid rgba(139,153,164,.10)!important;box-shadow:var(--ui-raised-sm)!important;
}
.individual-list-item-v1777{margin:7px 3px!important;padding:9px!important}
.list-photo{border-radius:15px!important;box-shadow:var(--ui-recessed)!important;background:#e9edf1!important}

/* Hidden swipe controls are clipped and completely invisible until swiping. */
.record-swipe-shell{position:relative!important;isolation:isolate!important;overflow:hidden!important;border-radius:18px!important;background:transparent!important}
.record-swipe-shell>.record-swipe-content{position:relative!important;z-index:2!important;width:100%!important;border-radius:18px!important;overflow:hidden!important;background:linear-gradient(145deg,#f5f7f9,#e7ecf0)!important}
.record-swipe-actions{position:absolute!important;z-index:1!important;inset:0 0 0 auto!important;width:140px!important;border-radius:18px!important;overflow:hidden!important;clip-path:inset(0 round 18px)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.record-swipe-shell.swiping .record-swipe-actions,.record-swipe-shell.swipe-open .record-swipe-actions{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.record-swipe-edit{background:linear-gradient(180deg,#77a7c2,#5e8ca8)!important;color:white!important}
.record-swipe-delete{background:linear-gradient(180deg,#dd7a7a,#bf5863)!important;color:white!important}

/* Fullscreen sheets: safe area is part of the header, not a blank margin. */
.ref-fullscreen{padding-top:0!important;background:var(--ui-bg)!important}
.ref-screen-head{
  top:0!important;height:calc(50px + var(--safe-top))!important;min-height:calc(50px + var(--safe-top))!important;
  padding-top:var(--safe-top)!important;margin:0!important;
  background:linear-gradient(180deg,rgba(238,242,245,.99),rgba(233,238,242,.98))!important;
  border-bottom:1px solid var(--ui-line)!important;box-shadow:0 6px 16px rgba(111,126,139,.09)!important;
}
.ref-form-screen{padding-top:7px!important;padding-bottom:calc(60px + var(--safe-bottom))!important}
.ref-submitbar,.manual-savebar,.builder-bottom,.selector-submit{
  bottom:0!important;margin:0!important;padding:7px 10px calc(7px + var(--safe-bottom))!important;
  background:linear-gradient(180deg,rgba(237,241,244,.99),rgba(232,237,241,.99))!important;border-top:1px solid var(--ui-line)!important;
}
.modal{padding-bottom:calc(15px + var(--safe-bottom))!important;background:linear-gradient(145deg,rgba(246,248,250,.98),rgba(231,236,240,.98))!important}
.wheel-sheet{padding-bottom:calc(18px + var(--safe-bottom))!important}

/* Voice controls follow the same visual language. */
.voice-fab{left:14px!important;right:auto!important;bottom:calc(var(--nav-content-h) + var(--safe-bottom) + 12px)!important;width:50px!important;height:50px!important;border-radius:50%!important;background:linear-gradient(145deg,#f7f9fa,#e3e9ed)!important;color:#3e5261!important;box-shadow:var(--ui-raised)!important}
.individual-voice-toolbar{margin:8px 0 13px!important;padding:9px!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(247,249,250,.94),rgba(231,236,240,.94))!important;border:1px solid rgba(139,153,164,.12)!important;box-shadow:var(--ui-raised-sm)!important}

/* Remove residual app-generated edge spacing. */
.individual-list-page{padding-top:0!important;padding-bottom:8px!important}
.individual-list-page .top-nav-tabs{margin-top:0!important;margin-bottom:7px!important}
.page-heading:first-child,.breed-page-title:first-child,.mypage-title-row:first-child{margin-top:0!important}
.sticky-submit{padding-bottom:0!important;background:none!important}

/* Themes retain text/semantic accents, but never replace the reference surfaces. */
html[data-app-theme] body,html[data-app-theme] .app-shell{background:var(--ui-bg)!important;color:var(--ui-text)!important}
html[data-app-theme] :is(.card,.species-group-card,.taxon-group-card,.list-group,.individual-card,.room-stat,.manual-card,.output-card,.stat-card,
.form-section,.control-shell,.searchbox,.modal,.wheel-sheet){border-color:rgba(139,153,164,.13)!important}

@media(min-width:521px){
  .app-header,.bottom-nav{left:50%!important;right:auto!important;width:520px!important;transform:translateX(-50%)!important}
}
@media(min-width:700px){.app-header,.bottom-nav{width:700px!important}}
@media(max-width:390px){
  :root{--ui-radius:18px;--header-content-h:52px;--nav-content-h:60px}
  .page{padding-left:9px!important;padding-right:9px!important}
  .form-page{padding-left:9px!important;padding-right:9px!important}
}


/* ========================================================================== 
   v1.7.86: eliminate header/tab dead space + direct swipeable tab strips
   ========================================================================== */
:root{
  --header-content-h:44px;
}
.app-header,
html[data-app-theme] .app-header{
  height:calc(var(--header-content-h) + var(--safe-top))!important;
  min-height:calc(var(--header-content-h) + var(--safe-top))!important;
  padding:var(--safe-top) 8px 0!important;
  grid-template-columns:38px minmax(0,1fr) 38px!important;
}
.header-button{
  width:34px!important;height:34px!important;padding:7px!important;border-radius:13px!important;
}
.main{
  padding-top:calc(var(--header-content-h) + var(--safe-top))!important;
}
.main>.page:first-child,
.main>.individual-list-page:first-child,
.individual-list-page,
.individual-library-v1777{
  margin-top:0!important;padding-top:0!important;
}
.individual-list-page .top-nav-tabs,
.top-nav-tabs{
  height:56px!important;
  min-height:56px!important;
  margin-top:0!important;
  margin-bottom:5px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:stretch!important;
  touch-action:pan-y!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.individual-list-page .top-nav-tab,
.top-nav-tab{
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0 2px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
}
.individual-list-page .top-nav-tab svg,
.top-nav-tab svg{margin:0!important;}
.individual-search-wrap{
  margin-top:0!important;
  padding-top:0!important;
}
/* Other horizontal tab strips also start flush with their container. */
.segment-row,.builder-tabs,.ref-status-tabs{
  touch-action:pan-y!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.segment-row{margin-top:0!important;}
@media(max-width:390px){
  :root{--header-content-h:42px;}
  .app-header,html[data-app-theme] .app-header{grid-template-columns:36px minmax(0,1fr) 36px!important;}
  .header-button{width:32px!important;height:32px!important;padding:6px!important;}
  .individual-list-page .top-nav-tabs,.top-nav-tabs,.individual-list-page .top-nav-tab,.top-nav-tab{height:54px!important;min-height:54px!important;}
}