.tools-shell { background:var(--color-background); }
.tools-main { padding:2.35rem var(--space-page-x) calc(var(--bottom-nav-height) + 2.7rem + env(safe-area-inset-bottom)); }
.tools-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.tools-header p { margin:0 0 .15rem; color:var(--color-gold); font-size:.875rem; font-weight:800; letter-spacing:.11em; }
.tools-header h1 { margin:0; color:var(--color-navy); font-family:var(--font-ui); font-size:clamp(2.25rem,10vw,3.15rem); font-weight:700; line-height:1; }
.tools-header > a { display:inline-flex; min-height:2.4rem; align-items:center; padding:.5rem .8rem; border:1px solid rgba(11,27,61,.14); border-radius:999px; background:#fff; font-size:.875rem; font-weight:800; box-shadow:0 .18rem .65rem rgba(11,27,61,.08); }
.tools-overview { margin-top:1.1rem; padding:1rem; border-radius:1.1rem; background:linear-gradient(145deg,#0b1b3d,#132d5d); color:#fff; box-shadow:var(--shadow-card); }
.tools-overview > p:first-child { margin:0; color:#e9bd45; font-size:.875rem; font-weight:800; letter-spacing:.12em; }
.tools-overview h2 { margin:.12rem 0 .35rem; font-size:1.05rem; }
.tools-overview > p:last-child { margin:0; color:rgba(255,255,255,.82); font-size:.875rem; line-height:1.65; }
.tools-status { margin:.9rem 0 0; padding:.7rem .85rem; border-radius:.75rem; background:rgba(11,27,61,.06); color:var(--color-text-muted); font-size:.875rem; }
.tools-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }
.tools-action { display:flex; min-height:5rem; flex-direction:column; justify-content:center; gap:.25rem; padding:.8rem; border:1px solid rgba(11,27,61,.08); border-radius:1rem; background:#fff; box-shadow:var(--shadow-card); text-align:left; }
.tools-action:last-child { grid-column:1/-1; }
.tools-action__icon { font-size:1.35rem; }
.tools-action__label { color:var(--color-navy); font-size:.875rem; font-weight:800; }
.tools-section { scroll-margin-top:1rem; margin-top:1.55rem; }
.tools-section__heading { margin-bottom:.72rem; }
.tools-section__heading p { margin:0; color:var(--color-gold); font-size:.875rem; font-weight:800; letter-spacing:.12em; }
.tools-section__heading h2 { margin:.05rem 0 0; font-size:1.42rem; }
.currency-card,.tools-info-card { padding:.9rem; border-radius:1rem; background:#fff; box-shadow:var(--shadow-card); }
.currency-card label { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color:#556276; font-size:.875rem; font-weight:700; }
.currency-card input,.phrase-search input { width:100%; min-height:2.7rem; border:1px solid rgba(11,27,61,.17); border-radius:.75rem; background:#fff; color:var(--color-text); font:inherit; padding:.6rem .7rem; }
#rate-input { width:7rem; }
.currency-rate-actions,.tools-link-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem; }
.currency-rate-actions button,.currency-rate-actions a,.tools-link-row a,.tools-link-row button { display:inline-flex; min-height:2.5rem; align-items:center; justify-content:center; border:1px solid rgba(11,27,61,.13); border-radius:.75rem; background:#f7f4ec; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; padding:.55rem .7rem; }
.currency-note,.tools-help { margin:.6rem 0 0; color:#617086; font-size:.875rem; line-height:1.6; }
.currency-grid { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:.55rem; margin-top:.9rem; }
.currency-grid > span { padding-bottom:.75rem; color:var(--color-gold); font-weight:900; }
.currency-grid label { display:block; }
.currency-grid input { margin-top:.3rem; }
.currency-subtitle { margin:.8rem 0 .35rem; color:var(--color-navy); font-size:.875rem; font-weight:800; }
.quick-amounts { display:flex; flex-wrap:wrap; gap:.4rem; }
.quick-amounts button { min-height:2.1rem; border:1px solid rgba(11,27,61,.12); border-radius:999px; background:#fff; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; padding:.35rem .55rem; }
.tools-info-card p { margin:0; color:#4e5d72; font-size:.875rem; line-height:1.65; }
.tools-info-card ol { margin:.55rem 0 0; padding-left:1.25rem; color:#46556a; font-size:.875rem; line-height:1.75; }
.phrase-controls { display:grid; gap:.65rem; }
.phrase-search { display:grid; gap:.25rem; color:#59667a; font-size:.875rem; font-weight:800; }
.phrase-categories { display:flex; gap:.4rem; margin-inline:calc(var(--space-page-x) * -1); padding:0 var(--space-page-x) .15rem; overflow-x:auto; scrollbar-width:none; }
.phrase-categories::-webkit-scrollbar { display:none; }
.phrase-categories button { flex:0 0 auto; min-height:2.2rem; border:1px solid rgba(11,27,61,.12); border-radius:999px; background:#fff; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; padding:.45rem .65rem; }
.phrase-categories button.is-active { border-color:var(--color-gold); background:#fff8df; color:#5f4c10; }
.phrase-count { margin:.55rem 0; color:#677386; font-size:.875rem; }
.phrase-list { display:grid; gap:.72rem; }
.phrase-card { padding:.85rem; border-radius:1rem; background:#fff; box-shadow:var(--shadow-card); }
.phrase-card__category { margin:0; color:var(--color-gold); font-size:.875rem; font-weight:800; }
.phrase-card__ja { margin:.28rem 0 0; color:#59667a; font-size:.875rem; }
.phrase-card__vi { margin:.45rem 0 0; color:var(--color-navy); font-size:1.05rem; font-weight:800; line-height:1.5; }
.phrase-card__en { margin:.35rem 0 0; color:#526075; font-size:.875rem; line-height:1.5; }
.phrase-actions { display:flex; flex-wrap:wrap; gap:.42rem; margin-top:.7rem; }
.phrase-actions button { min-height:2.25rem; border:1px solid rgba(11,27,61,.12); border-radius:.7rem; background:#f7f4ec; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; padding:.45rem .58rem; }
.show-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#fff; color:var(--color-navy); }
.show-dialog::backdrop { background:rgba(7,20,46,.64); }
.show-dialog__inner { display:flex; min-height:100dvh; flex-direction:column; padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)); }
.show-dialog__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.875rem; font-weight:800; }
.show-dialog__top button,.show-dialog__switch button { min-height:2.4rem; border:1px solid rgba(11,27,61,.15); border-radius:999px; background:#fff; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; padding:.45rem .75rem; }
.show-dialog__switch { display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
.show-dialog__switch button.is-active { background:var(--color-navy); color:#fff; }
.show-dialog__ja { margin:1.5rem 0 .5rem; text-align:center; color:#647086; font-size:.875rem; }
.show-dialog__main { display:grid; flex:1; place-items:center; margin:0; padding:1rem 0 3rem; text-align:center; font-size:clamp(2rem,9vw,3.8rem); font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
@media (max-width:350px) { .tools-actions { grid-template-columns:1fr; } .tools-action:last-child { grid-column:auto; } .currency-grid { grid-template-columns:1fr; } .currency-grid > span { padding:0; text-align:center; } }
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (max-width: 480px) {
    .tools-main { padding-top:calc(1rem + env(safe-area-inset-top)); }
  }
}
/* v1.12 photo Hero begins at the page top; standalone Safe Area is masked by the shared fixed guard. */
.tools-main { padding-top:0; }
@supports (-webkit-touch-callout: none) { @media (display-mode: standalone) and (max-width:480px) { .tools-main { padding-top:0; } } }

/* v1.12 follow-up: six-tool switcher, weather, live FX and readable controls */
.tools-overview > p:first-child,.tools-overview > p:last-child,.tools-status,.tools-action__label,.tools-section__heading p,.currency-card label,.currency-note,.tools-help,.currency-subtitle,.tools-info-card p,.tools-info-card ol,.phrase-search,.phrase-categories button,.phrase-count,.phrase-card__category,.phrase-card__ja,.phrase-card__en,.phrase-actions button,.show-dialog__top,.show-dialog__top button,.show-dialog__switch button,.tools-attribution { font-size:.875rem; }
.tools-actions { position:sticky; z-index:12; top:.35rem; display:flex; gap:.45rem; margin-inline:calc(var(--space-page-x) * -1); padding:.5rem var(--space-page-x); overflow-x:auto; background:color-mix(in srgb,var(--color-background) 94%,transparent); backdrop-filter:blur(12px); scrollbar-width:none; }
.tools-actions::-webkit-scrollbar { display:none; }
.tools-action,.tools-action:last-child { grid-column:auto; flex:0 0 auto; min-height:3.25rem; min-width:7.7rem; padding:.55rem .65rem; border-radius:.9rem; flex-direction:row; align-items:center; justify-content:flex-start; }
.tools-action.is-active { border-color:var(--color-gold); background:#fff8df; box-shadow:0 .2rem .8rem rgba(11,27,61,.12); }
.tools-action__icon { font-size:1.25rem; }
.tools-section[hidden] { display:none !important; }
.tools-section { margin-top:1.1rem; }
.currency-live-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.currency-live-rate { margin:.2rem 0 0; color:var(--color-navy); font-size:1.25rem; font-weight:900; }
.tools-primary-button { min-height:2.65rem; border:0; border-radius:.78rem; background:var(--color-navy); color:#fff; font:inherit; font-size:.875rem; font-weight:800; padding:.6rem .82rem; }
.currency-result { display:grid; gap:.15rem; margin:.9rem 0; padding:.85rem; border:1px solid rgba(212,166,42,.35); border-radius:.9rem; background:#fffaf0; color:#526075; font-size:.875rem; }
.currency-result strong { color:var(--color-navy); font-size:1.55rem; line-height:1.25; }
.quick-amounts--result { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.quick-vnd-button { display:grid; min-height:3.25rem !important; border-radius:.78rem !important; text-align:left; }
.quick-vnd-button strong { font-size:.875rem; }
.quick-vnd-button span { color:#687489; font-size:.875rem; }
.manual-rate { margin-top:.9rem; border-top:1px solid rgba(11,27,61,.08); padding-top:.8rem; }
.manual-rate summary { color:var(--color-navy); font-size:.875rem; font-weight:800; cursor:pointer; }
.manual-rate__body { display:flex; flex-wrap:wrap; align-items:end; gap:.55rem; padding-top:.7rem; }
.manual-rate__body label { flex:1 1 12rem; }
.manual-rate__body button { min-height:2.5rem; border:1px solid rgba(11,27,61,.14); border-radius:.7rem; background:#fff; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; padding:.5rem .7rem; }
.dcc-note { display:grid; gap:.25rem; margin-top:.85rem; padding:.75rem; border-left:.25rem solid var(--color-gold); border-radius:.4rem .75rem .75rem .4rem; background:#fff8df; color:#526075; font-size:.875rem; line-height:1.55; }
.dcc-note strong { color:var(--color-navy); }
.tools-attribution { margin:.75rem 0 0; color:#6a7586; line-height:1.5; }
.weather-card { padding:.9rem; border-radius:1rem; background:#fff; box-shadow:var(--shadow-card); }
.weather-city-tabs { display:flex; gap:.5rem; }
.weather-city-tabs button { min-height:2.6rem; flex:1; border:1px solid rgba(11,27,61,.13); border-radius:.75rem; background:#fff; color:var(--color-navy); font:inherit; font-size:.875rem; font-weight:800; }
.weather-city-tabs button.is-active { background:var(--color-navy); color:#fff; }
.weather-summary { margin-top:.8rem; padding:.85rem; border-radius:.9rem; background:linear-gradient(145deg,#eef6ff,#fffaf0); }
.weather-summary > div { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.weather-summary strong { color:var(--color-navy); font-size:2rem; }
.weather-summary span,.weather-summary em,.weather-summary p { font-size:.875rem; }
.weather-summary em { font-style:normal; color:#53647a; }
.weather-summary p { margin:.3rem 0 0; }
.weather-alert { padding-top:.45rem; border-top:1px solid rgba(11,27,61,.08); color:#38485f; line-height:1.55; }
.weather-days { display:grid; gap:.45rem; margin-top:.75rem; }
.weather-day { display:grid; grid-template-columns:1.2fr 1.4fr 1fr 1fr; gap:.4rem; padding:.65rem .7rem; border:1px solid rgba(11,27,61,.08); border-radius:.75rem; color:#536075; font-size:.875rem; }
.weather-day strong { color:var(--color-navy); }
.weather-links { display:flex; gap:.4rem; margin:.7rem 0; overflow-x:auto; scrollbar-width:none; }
.weather-links a { flex:0 0 auto; border:1px solid rgba(11,27,61,.12); border-radius:999px; padding:.45rem .65rem; background:#fff; color:var(--color-navy); font-size:.875rem; font-weight:800; }
.voice-options { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:.75rem; padding:.75rem; border-radius:.85rem; background:rgba(11,27,61,.05); }
.voice-options label { display:grid; gap:.25rem; color:#536075; font-size:.875rem; font-weight:800; }
.voice-options select { min-height:2.55rem; border:1px solid rgba(11,27,61,.15); border-radius:.7rem; background:#fff; font:inherit; font-size:.875rem; padding:.45rem; }
.voice-options p { grid-column:1/-1; margin:0; color:#687489; font-size:.875rem; line-height:1.55; }
.show-dialog__audio { display:flex; gap:.6rem; justify-content:center; padding-bottom:calc(.5rem + env(safe-area-inset-bottom)); }
.show-dialog__audio button { min-height:2.8rem; border:0; border-radius:.8rem; background:var(--color-navy); color:#fff; font:inherit; font-size:.9rem; font-weight:800; padding:.6rem .9rem; }
@media (max-width:390px) { .weather-day { grid-template-columns:1fr 1.3fr; } .voice-options { grid-template-columns:1fr; } .voice-options p { grid-column:auto; } }
.weather-hourly { display:flex; gap:.45rem; align-items:stretch; margin-top:.75rem; overflow-x:auto; scrollbar-width:none; }
.weather-hourly::-webkit-scrollbar { display:none; }
.weather-hourly__title { flex:0 0 6rem; align-self:center; color:var(--color-navy); font-size:.875rem; }
.weather-hourly__slot { display:grid; flex:0 0 4.5rem; place-items:center; gap:.1rem; padding:.5rem; border-radius:.7rem; background:#f5f7fa; font-size:.875rem; }
.weather-hourly__slot b { color:#526075; font-weight:700; }
.weather-hourly__slot em { color:var(--color-navy); font-style:normal; font-weight:900; }
.tools-action { font-size:.875rem; }

/* v1.12 public UI final: mouse-friendly tabs and iOS-safe inputs */
.tools-actions,.phrase-categories,.weather-links { scroll-snap-type:none; }
.tools-actions { top:calc(.35rem + var(--app-visual-viewport-top,0px)); }
.phrase-controls { position:sticky; z-index:10; top:calc(4.25rem + var(--app-visual-viewport-top,0px)); padding:.55rem 0; background:color-mix(in srgb,var(--color-background) 96%,transparent); backdrop-filter:blur(10px); }
.tools input,.tools-main input,.tools-main select,.tools-main textarea { font-size:1rem !important; }
.voice-options label { align-content:start; }
.voice-preview { min-height:2.45rem; border:1px solid rgba(11,27,61,.14); border-radius:.7rem; background:#fff; color:var(--color-navy); font:inherit; font-size:.9rem; font-weight:800; padding:.45rem .65rem; }
@media (min-width:700px){
 .tools-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-inline:0;padding:.6rem;border-radius:1rem;}
 .tools-action,.tools-action:last-child{min-width:0;width:100%;}
 .phrase-categories{overflow:visible;flex-wrap:wrap;margin-inline:0;padding-inline:0;}
 .weather-links{overflow:visible;flex-wrap:wrap;}
}


.currency-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;align-items:center;margin-top:.35rem}.currency-input-wrap input{min-width:0;width:100%}.currency-clear{min-width:3.2rem;min-height:2.75rem;border:1px solid rgba(11,44,103,.18);border-radius:.7rem;background:#fff;color:#0B2C67;font-weight:900}.quick-vnd-display{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;padding:.65rem .75rem;border-bottom:1px solid rgba(11,44,103,.08);font-size:.95rem}.quick-vnd-display strong{color:#0B2C67}.weather-trip-impact{margin-top:.85rem;padding:.8rem;border-radius:.85rem;background:rgba(212,166,42,.09);color:#34445b}.weather-trip-impact p{margin:.3rem 0 .6rem}.weather-trip-impact a{font-weight:900;color:#0B2C67}

/* 01-4 correction */
.currency-input-wrap{display:block}.currency-clear--all{display:inline-grid;place-items:center;min-width:4.2rem;min-height:2.75rem;margin-top:.55rem;border-color:#0B2C67;background:#0B2C67;color:#fff}.tools-attribution a{display:inline;color:#53647b;text-decoration:underline;text-underline-offset:.16em;font-weight:600}

/* v1.12 final UI-fix: currency input order, compact AC, and stable standalone sticky offset */
.currency-field__label { display:block; white-space:nowrap; }
.currency-field .currency-input-wrap { display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem; align-items:center; margin-top:.35rem; }
.currency-field--vnd .currency-input-wrap { grid-template-columns:minmax(0,1fr) auto; }
.currency-clear--all { margin:0; min-width:3.55rem; min-height:2.7rem; align-self:stretch; }
.currency-swap { align-self:end; padding-bottom:.72rem; }
.currency-result span,.currency-result strong { overflow-wrap:normal; word-break:keep-all; }
.quick-vnd-display { grid-template-columns:minmax(5.8rem,max-content) minmax(0,1fr); align-items:baseline; }
.quick-vnd-display strong,.quick-vnd-display span { white-space:nowrap; }
@media(max-width:430px){
  .currency-grid { grid-template-columns:1fr; gap:.45rem; }
  .currency-swap { padding:0; text-align:center; transform:rotate(90deg); line-height:1; }
  .quick-amounts--result { grid-template-columns:1fr; }
  .currency-result strong { font-size:1.4rem; }
}
@supports (-webkit-touch-callout:none){
  @media(display-mode:standalone) and (max-width:480px){
    .tools-actions { top:calc(env(safe-area-inset-top) + var(--app-visual-viewport-top,0px) + .2rem); }
    .phrase-controls { top:calc(env(safe-area-inset-top) + var(--app-visual-viewport-top,0px) + 4.25rem); }
  }
}


/* v1.12 ui-fix-revised: keep the existing Tools menu sticky below the safe area. */
@media(max-width:699px){
  .tools-actions{top:var(--app-sticky-top)!important;}
  .phrase-controls{top:calc(var(--app-sticky-top) + 4.25rem)!important;}
}