/* PintLog Japanese base theme */
:root {
  --color-bg:#e9dfcb;
  --color-grouped:#f8f1e3;
  --color-secondary:#efe3ce;
  --color-tertiary:#dfcfb5;
  --color-field-bg:#fffaf0;
  --color-field-border:rgba(69,45,32,.24);
  --color-field-focus-bg:#fffdf7;
  --color-field-focus-border:rgba(183,28,48,.62);
  --color-text:#241a16;
  --color-text-secondary:rgba(36,26,22,.68);
  --color-text-tertiary:rgba(36,26,22,.48);
  --color-text-muted:rgba(36,26,22,.72);
  --color-text-muted-soft:rgba(36,26,22,.55);
  --color-separator:rgba(69,45,32,.18);
  --color-accent:#b51e37;
  --color-success:#356859;
  --color-danger:#b51e37;
  --color-warning:#b37726;
  --color-fill:rgba(181,30,55,.13);
  --color-fill-subtle:rgba(181,30,55,.075);
  --color-segmented-active:#fff9ed;
  --color-tab-bar:rgba(29,22,18,.97);
  --color-header-bg:rgba(35,25,21,.97);
  --color-modal-backdrop:rgba(28,20,17,.62);
  --color-picker-menu:rgba(255,250,240,.98);
  --color-switch-thumb:#fffaf0;
  --color-chart-initials:#efe3ce;
  --color-shadow:rgba(60,38,24,.18);
  --gradient-hero:linear-gradient(145deg,#fffaf0 0%,#e7d6ba 100%);
  --gradient-trip-active:linear-gradient(145deg,rgba(181,30,55,.12),#f4e8d3);
  --gradient-auth-icon:linear-gradient(145deg,#871429,#c72d41);
  --color-auth-icon-glow:rgba(181,30,55,.24);
  --color-hero-glow:rgba(181,30,55,.12);
  --radius-ios:5px;
  --radius-ios-lg:8px;
  --radius-ios-xl:12px;
  --font-sans:'Yu Gothic','Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif;
}
html { color-scheme:light; background:#e9dfcb; }
body {
  color:var(--color-text)!important;
  background-color:#e9dfcb!important;
  background-image:
    linear-gradient(rgba(240,230,210,.91),rgba(233,223,203,.94)),
    repeating-radial-gradient(circle at 0 100%,transparent 0 19px,rgba(72,48,34,.13) 20px 21px,transparent 22px 39px),
    repeating-radial-gradient(circle at 40px 100%,transparent 0 19px,rgba(72,48,34,.13) 20px 21px,transparent 22px 39px)!important;
  background-size:auto,80px 40px,80px 40px!important;
  background-attachment:fixed!important;
}
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 92% 8%,rgba(188,0,45,.9) 0 74px,transparent 76px),
             repeating-conic-gradient(from -5deg at 92% 8%,rgba(188,0,45,.085) 0 4deg,transparent 4deg 11deg);
}
.text-white,.text-white\/30,.text-white\/40,.text-white\/50,.text-white\/60,.text-white\/70 { color:var(--color-text)!important; }
.app-shell { background:transparent!important; }
.app-header {
  color:#fff8e8!important; border-bottom:3px solid #b51e37!important;
  background-color:#211814!important;
  background-image:linear-gradient(90deg,#211814 0 68%,#561020),repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.03) 5px 6px)!important;
  box-shadow:0 5px 20px rgba(45,28,20,.24);
}
.app-header .app-top-nav-title,.app-header .top-nav-icon-btn,.app-header .top-nav-btn-label { color:#fff8e8!important; }
.app-top-nav-brand::after {
  content:'日本の乾杯'; margin-left:.7rem; color:#d9b76f; font:700 .62rem/1 Georgia,'Yu Mincho',serif; letter-spacing:.18em;
}
.app-top-nav-logo { border:1px solid #d9b76f; border-radius:50%; background:#fff8e8; }
.quick-add-form,.bg-ios-grouped,.modal-panel,.account-panel,.trip-card,.stats-card {
  color:var(--color-text)!important;
  border:1px solid rgba(75,49,33,.22)!important;
  border-top:4px solid #b51e37!important;
  background-color:#f8f1e3!important;
  background-image:linear-gradient(110deg,rgba(255,255,255,.48),transparent 50%),repeating-linear-gradient(90deg,rgba(72,48,34,.025) 0 1px,transparent 1px 7px)!important;
  box-shadow:0 12px 26px rgba(64,42,27,.12)!important;
}
.card-heading {
  color:#2b1d18!important; font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif!important;
  letter-spacing:.055em!important;
}
.card-heading::before { content:'印'; display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; margin-right:.55rem; color:#fff6e8; background:#b51e37; border:2px double #f0cdbb; font:700 .65rem/1 serif; transform:rotate(-4deg); vertical-align:middle; }
.ios-field,.picker-trigger,input,select,textarea {
  color:#241a16!important; background-color:#fffaf0!important; border-color:rgba(75,49,33,.28)!important;
}
input::placeholder,textarea::placeholder { color:rgba(36,26,22,.42)!important; }
.bg-ios-blue,#addBtn,.quick-add-primary {
  color:#fff9ec!important; background:linear-gradient(145deg,#8e142a,#c52a40)!important;
  border:1px solid #741023!important; border-radius:5px!important; box-shadow:inset 0 1px rgba(255,255,255,.2),0 6px 14px rgba(125,20,41,.2)!important;
}
.ios-tab-bar {
  color:#d6c5ad!important; background:linear-gradient(#2a1f1a,#17110e)!important;
  border-color:#b51e37!important; border-top-width:3px!important;
}
.ios-tab-item { color:#bba991!important; }
.ios-tab-item.active { color:#f0c96d!important; }
.ios-tab-label::after { display:block; margin-top:1px; font-size:8px; font-weight:700; letter-spacing:.12em; }
#tabBtnTonight .ios-tab-label::after { content:'記録'; }
#tabBtnStats .ios-tab-label::after { content:'統計'; }
#tabBtnRatings .ios-tab-label::after { content:'評価'; }
#tabBtnPhotos .ios-tab-label::after { content:'写真'; }
.auth-screen { background:transparent!important; }
.auth-card::before { content:'一杯の思い出を記録'; display:block; margin:0 auto 1rem; color:#9c1930; text-align:center; font:700 .72rem/1 Georgia,'Yu Mincho',serif; letter-spacing:.2em; }
.auth-card .bg-ios-grouped { border-top:4px solid #b51e37!important; }
::-webkit-scrollbar-track { background:#e5d7bf; }
::-webkit-scrollbar-thumb { background:#9c1930; }
@media(max-width:640px) {
  body::before { background:radial-gradient(circle at 96% 4%,rgba(188,0,45,.72) 0 48px,transparent 50px); }
  .app-top-nav-brand::after { display:none; }
}
/* Refined mobile viewport and visual balance */
html {
  width:100%;
  height:100%;
  min-height:100%;
  background:#e9dfcb!important;
}
body {
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  margin:0;
  overscroll-behavior-y:none;
  background-repeat:repeat,no-repeat,no-repeat!important;
}
#authScreen {
  width:100%;
  min-height:100vh!important;
  min-height:100svh!important;
  min-height:100dvh!important;
  padding-top:max(1.25rem,env(safe-area-inset-top,0px))!important;
  padding-right:max(1.25rem,env(safe-area-inset-right,0px))!important;
  padding-bottom:max(1.25rem,env(safe-area-inset-bottom,0px))!important;
  padding-left:max(1.25rem,env(safe-area-inset-left,0px))!important;
  box-sizing:border-box;
}
#appScreen.app-shell {
  width:100%;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
}
#appScreen.app-shell.hidden { display:none!important; }
.app-layout { flex:1 0 auto; min-height:0; }
.app-main { min-height:100%; }
.app-main>.tab-panel:not(.hidden) { min-height:calc(100dvh - 9rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
.app-header {
  position:sticky;
  top:0;
  width:100%;
  padding-top:env(safe-area-inset-top,0px);
  overflow:hidden;
  box-sizing:border-box;
}
.app-header::after {
  content:'';
  position:absolute;
  z-index:-1;
  right:-2.3rem;
  top:50%;
  width:7.25rem;
  height:7.25rem;
  border-radius:50%;
  background:#a91932;
  transform:translateY(-50%);
  opacity:.72;
}
.ios-tab-bar {
  min-height:calc(4.25rem + env(safe-area-inset-bottom,0px));
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  box-sizing:border-box;
}
.card-heading::before {
  content:''!important;
  display:inline-block!important;
  width:3px!important;
  height:1.05em!important;
  margin:0 .55rem 0 0!important;
  border:0!important;
  border-radius:2px!important;
  background:#b51e37!important;
  transform:none!important;
  vertical-align:-.08em!important;
}
.quick-add-form,.bg-ios-grouped,.modal-panel,.account-panel,.trip-card,.stats-card {
  border-top-width:2px!important;
  box-shadow:0 8px 22px rgba(64,42,27,.10)!important;
}
.splash-screen {
  min-height:100vh;
  min-height:100dvh;
  background-color:#211814!important;
  background-image:radial-gradient(circle at 76% 26%,#a91932 0 4.3rem,transparent 4.35rem),repeating-conic-gradient(from -7deg at 76% 26%,rgba(181,30,55,.14) 0 4deg,transparent 4deg 12deg)!important;
}
.splash-title {
  color:#fff7e8!important;
  font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif;
  letter-spacing:.09em;
}
.auth-card>div:first-child h1 {
  font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif;
  letter-spacing:.045em;
}
@supports not (height:100dvh) {
  #appScreen.app-shell,#authScreen,.splash-screen { min-height:-webkit-fill-available!important; }
}
@media(max-width:899px) {
  .app-main { padding-top:.75rem; padding-bottom:.5rem; }
  .tab-panel { padding-left:max(1rem,env(safe-area-inset-left,0px))!important; padding-right:max(1rem,env(safe-area-inset-right,0px))!important; }
  .quick-add-form { border-radius:8px!important; }
}
@media(min-width:900px) {
  #appScreen.app-shell { min-height:100vh; padding-bottom:2rem; }
  .app-header::after { display:none; }
  .app-main>.tab-panel:not(.hidden) { min-height:auto; }
}
/* Dark sumi refinement v3 */
:root {
  --color-bg:#15110f;
  --color-grouped:#241d19;
  --color-secondary:#2c231e;
  --color-tertiary:#3b2e27;
  --color-field-bg:#181310;
  --color-field-border:rgba(218,190,149,.22);
  --color-field-focus-bg:#211915;
  --color-field-focus-border:rgba(202,47,68,.72);
  --color-text:#f5ead8;
  --color-text-secondary:rgba(245,234,216,.72);
  --color-text-tertiary:rgba(245,234,216,.48);
  --color-text-muted:rgba(245,234,216,.7);
  --color-text-muted-soft:rgba(245,234,216,.52);
  --color-separator:rgba(218,190,149,.16);
  --color-accent:#e05262;
  --color-success:#79a994;
  --color-danger:#e05262;
  --color-warning:#d2a65a;
  --color-fill:rgba(224,82,98,.16);
  --color-fill-subtle:rgba(224,82,98,.09);
  --color-segmented-active:#49372d;
  --color-tab-bar:rgba(15,11,10,.98);
  --color-header-bg:rgba(24,17,14,.98);
  --color-picker-menu:rgba(38,29,24,.99);
  --color-chart-initials:#2d231e;
  --color-shadow:rgba(0,0,0,.42);
}
html { color-scheme:dark; background:#15110f!important; }
body {
  color:#f5ead8!important;
  background-color:#15110f!important;
  background-image:
    linear-gradient(rgba(21,17,15,.90),rgba(21,17,15,.96)),
    repeating-radial-gradient(circle at 0 100%,transparent 0 19px,rgba(222,192,145,.10) 20px 21px,transparent 22px 39px),
    repeating-radial-gradient(circle at 40px 100%,transparent 0 19px,rgba(222,192,145,.10) 20px 21px,transparent 22px 39px)!important;
}
body::before {
  background:radial-gradient(circle at 92% 8%,rgba(165,20,44,.72) 0 74px,transparent 76px),
             repeating-conic-gradient(from -5deg at 92% 8%,rgba(181,30,55,.07) 0 4deg,transparent 4deg 11deg)!important;
}
.text-white,.text-white\/30,.text-white\/40,.text-white\/50,.text-white\/60,.text-white\/70 { color:var(--color-text)!important; }
.quick-add-form,.bg-ios-grouped,.modal-panel,.account-panel,.trip-card,.stats-card {
  color:#f5ead8!important;
  border-color:rgba(210,166,90,.24)!important;
  border-top-color:#a91932!important;
  background-color:#241d19!important;
  background-image:linear-gradient(110deg,rgba(255,244,220,.025),transparent 52%),repeating-linear-gradient(90deg,rgba(238,208,163,.018) 0 1px,transparent 1px 7px)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
}
.card-heading { color:#f0dfc5!important; }
.ios-field,.picker-trigger,input,select,textarea {
  color:#f5ead8!important;
  background-color:#181310!important;
  border-color:rgba(218,190,149,.22)!important;
}
input::placeholder,textarea::placeholder { color:rgba(245,234,216,.38)!important; }
.app-header {
  background-color:#17110f!important;
  background-image:linear-gradient(90deg,#17110f 0 68%,#4a0d1c),repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.025) 5px 6px)!important;
}
.ios-tab-bar { background:linear-gradient(#1a1310,#0d0908)!important; }
.auth-screen { color:#f5ead8!important; }
.auth-card::before { color:#d2a65a!important; }

/* Account control: enforce a true circle on phone layouts */
.top-nav-icon-btn--account {
  width:2.75rem!important;
  min-width:2.75rem!important;
  max-width:2.75rem!important;
  height:2.75rem!important;
  min-height:2.75rem!important;
  padding:0!important;
  flex:0 0 2.75rem!important;
  border:1px solid rgba(218,190,149,.48)!important;
  border-radius:50%!important;
  background:rgba(245,234,216,.06)!important;
  color:#f5ead8!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  line-height:1!important;
}
.top-nav-icon-btn--account .top-nav-icon {
  display:block!important;
  width:1.3rem!important;
  height:1.3rem!important;
  margin:auto!important;
  flex:none!important;
}
.top-nav-icon-btn--account:active { background:rgba(224,82,98,.18)!important; border-color:#d2a65a!important; }
@media(min-width:900px) {
  .top-nav-icon-btn--account {
    width:auto!important; max-width:none!important; padding:0 .8rem!important; flex:0 0 auto!important;
    border-radius:999px!important;
  }
}
/* Mobile header and dark consistency v4 */
:root,
html[data-trip-theme] {
  --gradient-hero:linear-gradient(145deg,#2d221c 0%,#17110f 72%,#340b15 100%);
  --gradient-trip-active:linear-gradient(145deg,rgba(169,25,50,.24),#211815 72%);
  --gradient-auth-icon:linear-gradient(145deg,#a91932,#67101f);
  --gradient-photo-overlay:linear-gradient(to top,rgba(13,9,8,.96),rgba(13,9,8,.52) 55%,transparent);
  --color-hero-glow:rgba(181,30,55,.14);
  --color-auth-icon-glow:rgba(181,30,55,.22);
}
.bg-hero {
  color:#f5ead8!important;
  background-color:#241a17!important;
  background-image:linear-gradient(145deg,#30231d 0%,#18120f 68%,#3d0c18 100%)!important;
  border:1px solid rgba(210,166,90,.2)!important;
  border-top:2px solid #a91932!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
.bg-hero .text-white,
.bg-hero .text-ios-label-secondary { color:#f5ead8!important; }
.bg-hero .text-ios-label-secondary { opacity:.62; }
.bg-hero .text-ios-amber { color:#d8ad61!important; }
.bg-hero .card-heading--hero { color:#d8ad61!important; }
.bg-ios-secondary,.bg-ios-tertiary,.bg-ios-fill,.bg-ios-fill-subtle,.bg-ios-segmented-active {
  color:#f5ead8!important;
}
.bg-ios-secondary { background-color:#2c231e!important; }
.bg-ios-tertiary { background-color:#3b2e27!important; }
.bg-ios-fill { background-color:rgba(224,82,98,.16)!important; }
.bg-ios-fill-subtle { background-color:rgba(224,82,98,.09)!important; }
.bg-ios-segmented-active { background-color:#49372d!important; }
.modal-panel,.picker-menu,[class*='picker-menu'],.brand-picker-menu {
  color:#f5ead8!important;
  background-color:#261d18!important;
}
.divide-ios-separator>*+*,.border-ios-separator { border-color:rgba(218,190,149,.16)!important; }
.app-header::after { display:none!important; }
.app-top-nav-actions {
  position:relative;
  z-index:2;
  gap:.35rem!important;
}
.app-top-nav-trip,.app-top-nav-actions>div {
  display:flex;
  align-items:center;
  justify-content:center;
}
.top-nav-icon-btn {
  width:2.65rem;
  min-width:2.65rem;
  height:2.65rem;
  padding:0;
  border-radius:50%;
}
.top-nav-icon-btn--trip-active {
  border:1px solid rgba(210,166,90,.32);
  background:rgba(169,25,50,.2);
}
.top-nav-icon-btn--account {
  width:2.65rem!important;
  min-width:2.65rem!important;
  max-width:2.65rem!important;
  height:2.65rem!important;
  min-height:2.65rem!important;
  flex-basis:2.65rem!important;
  border-color:rgba(210,166,90,.46)!important;
  background:#241b17!important;
}
@media(max-width:899px) {
  .app-top-nav-inner { gap:.45rem; padding-right:max(.75rem,env(safe-area-inset-right,0px)); }
  .app-top-nav-brand { gap:.5rem; }
  .app-top-nav-actions { margin-left:auto; }
  .app-header .app-top-nav-title { color:#fff5e4!important; }
}
@media(min-width:900px) {
  .top-nav-icon-btn { width:auto; padding-inline:.65rem; border-radius:999px; }
  .top-nav-icon-btn--account { width:auto!important; max-width:none!important; height:2.75rem!important; padding-inline:.8rem!important; }
}
/* Phone chrome and safe-area integration v5 */
html { background-color:#0d0908!important; }
html::before,
html::after {
  content:'';
  position:fixed;
  left:0;
  right:0;
  z-index:9998;
  pointer-events:none;
  background:#0d0908;
}
html::before {
  top:0;
  height:env(safe-area-inset-top,0px);
}
html::after {
  bottom:0;
  height:env(safe-area-inset-bottom,0px);
}
body { accent-color:#b51e37; }
.app-header {
  padding-top:env(safe-area-inset-top,0px)!important;
  background-color:#17110f!important;
}
.ios-tab-bar {
  padding-bottom:env(safe-area-inset-bottom,0px)!important;
  background-color:#0d0908!important;
}
@media(display-mode:standalone) {
  html,body { background-color:#0d0908!important; }
}
/* Force matching Safari chrome in either system appearance v6 */
html {
  color-scheme:only dark!important;
  background:#17110f!important;
}
@media(prefers-color-scheme:light) {
  html,body { color-scheme:only dark!important; }
}
/* Pixel edge-to-edge chrome synchronization v7 */
html,
html::before,
html::after { background-color:#17110f!important; }
.app-header { background-color:#17110f!important; }
.ios-tab-bar {
  background:#17110f!important;
  background-color:#17110f!important;
}
@media(display-mode:standalone) {
  html,body,#appScreen { border-color:#17110f; }
}
/* Chrome 135+ Pixel gesture-area bleed v8 */
:root {
  --pintlog-bottom-bar-height:4.25rem;
  --pintlog-safe-max-bottom:env(safe-area-max-inset-bottom,36px);
}
#appScreen.app-shell {
  padding-bottom:calc(var(--pintlog-bottom-bar-height) + var(--pintlog-safe-max-bottom))!important;
}
.app-nav.ios-tab-bar {
  position:fixed!important;
  height:var(--pintlog-bottom-bar-height);
  min-height:var(--pintlog-bottom-bar-height);
  padding-bottom:var(--pintlog-safe-max-bottom)!important;
  bottom:calc(env(safe-area-inset-bottom,0px) - var(--pintlog-safe-max-bottom))!important;
  background:#17110f!important;
  box-sizing:content-box!important;
}
html::after {
  height:var(--pintlog-safe-max-bottom)!important;
  background:#17110f!important;
}
@media(min-width:900px) {
  #appScreen.app-shell { padding-bottom:2rem!important; }
  .app-nav.ios-tab-bar {
    position:sticky!important;
    height:auto;
    min-height:0;
    padding-bottom:0!important;
    bottom:auto!important;
    box-sizing:border-box!important;
  }
}