/* Confirmed white surface UI. Typography and spacing match the approved mobile design. */
:root,body { background:#ffffff; background-image:none; }
.app-nav { background:#ffffff; background-image:none; }
.restaurant-row,.restaurant-row--review {
  background:#ffffff;
  background-image:none;
  border-radius:20px;
  box-shadow:0 2px 4px rgba(35,35,35,.025),0 9px 24px rgba(35,35,35,.08),inset 0 0 0 1px rgba(35,35,35,.025);
}

.app-header { border-bottom-color:#efefef; }
.brand-seal { border-radius:9px; box-shadow:0 3px 7px rgba(35,35,35,.10); }
.header-avatar .avatar { background:#fff; border-color:#eeece9; box-shadow:0 3px 10px rgba(35,35,35,.06); }
.home-toolbar { gap:16px; }
.home-toolbar > .search-field {
  grid-row:1;
  min-height:54px;
  padding:0 18px;
  border:1px solid #f0f0f0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 3px 5px rgba(35,35,35,.02),0 9px 22px rgba(35,35,35,.085);
}
.home-toolbar > .home-filter-row { grid-row:2; align-items:center; }
.home-filter-row .tabs { gap:10px; }
.home-filter-row .tabs button { padding:8px 13px; border:0; border-radius:15px; }
.home-filter-row .tabs button.active {
  background:#fff;
  color:var(--ink);
  box-shadow:0 3px 10px rgba(35,35,35,.085),inset 0 0 0 1px rgba(35,35,35,.02);
}
.home-filter-row .city-field { padding:0 11px; background:#fff; border-radius:15px; box-shadow:0 3px 10px rgba(35,35,35,.045); }

.brand-copy,.brand-seal,.tabs button,.avatar,.app-nav a {
  font-family:"Youyou Journal Text",serif;
  font-weight:400;
}
.brand-copy { font-size:20px; line-height:1.15; letter-spacing:.04em; }
.restaurant-name {
  font-family:"Youyou Journal Text",serif;
  font-size:26px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:.045em;
}
.restaurant-name .branch { font-family:"Youyou Journal Text",serif; font-size:12px; letter-spacing:0; }
.restaurant-row .dish-line,.restaurant-row .feeling-line,
.restaurant-row--review .dish-line,.restaurant-row--review .feeling-line {
  font-family:"Youyou Journal Text",serif;
  font-size:14px;
  line-height:1.75;
}
.dish-label { font-size:13px; }
.tabs button { font-size:20px; line-height:1.3; }
.search-input { font-size:15px; }
.byline,.vote-button { font-size:12px; }
@media(max-width:760px) {
  .restaurant-row,.restaurant-row--review,.restaurant-row--numbered { padding:12px 16px 10px; }
  .restaurant-row .restaurant-body,.restaurant-row--review .restaurant-body { margin:6px 0 8px; }
  .restaurant-row > .row-footer,.restaurant-row--review > .row-footer { padding-top:8px; }
  .restaurant-row .restaurant-meta,.restaurant-row--review .restaurant-meta { margin-top:3px; }
}

.home-toolbar { position:relative; isolation:isolate; }
.home-toolbar::before {
  content:'';
  position:absolute;
  top:-24px;
  left:-22px;
  right:-22px;
  bottom:-7px;
  background:#fff;
  box-shadow:0 7px 12px -9px rgba(30,34,36,.24);
  z-index:-1;
  pointer-events:none;
}
.home-toolbar > .search-field { justify-content:center; gap:8px; }
.home-toolbar .search-input { flex:0 1 10em; width:10em; text-align:left; }
.home-filter-row .tabs { flex:1; width:auto; min-width:0; gap:0; }
.home-filter-row .tabs button,
.home-filter-row .tabs button.active {
  position:relative;
  flex:1;
  min-width:0;
  padding:8px 0 12px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.home-filter-row .tabs button.active::after {
  content:'';
  position:absolute;
  bottom:0;
  left:calc(50% - 17px);
  width:34px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:#302d27;
}
.home-filter-row .city-field {
  flex:0 0 76px;
  justify-content:flex-end;
  padding:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}
.home-filter-row .city-select { width:76px; max-width:76px; }

@media(max-width:760px) {
  .app-header { height:72px; }
  #app { padding-top:14px; }
  .home-toolbar { gap:10px; }
  .home-toolbar::before { top:-14px; }
  .home-toolbar > .search-field { min-height:46px; }
  .home-toolbar .search-input { padding-top:9px; padding-bottom:9px; }
  .home-filter-row .tabs button,
  .home-filter-row .tabs button.active { padding:6px 0 10px; }
}

/* Keep the same handwriting on details and forms. */
:root { --handwritten:"Youyou Journal Text","PingFang SC","Microsoft YaHei",sans-serif; --serif:var(--handwritten); }

.search-results:has(.place-search-hint) { border-top:0; margin-top:14px; }
.place-search-controls { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:end; gap:12px; max-width:720px; }
.place-search-controls label { display:grid; gap:9px; min-width:0; font-size:13px; }
.place-search-controls .input { min-width:0; min-height:46px; }
.app-shell:has(#app[data-page="add"]) .header-city-field { display:none; }
@media(max-width:760px) {
  .place-search-controls { grid-template-columns:92px minmax(0,1fr); gap:10px; }
}

/* Profile photos and visible form confirmation controls. */
.avatar { overflow:hidden; }
.avatar > img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.profile-field-label { font-size:14px; }
.avatar-upload { gap:18px; flex-wrap:wrap; }
#avatar-preview { display:inline-flex; flex:none; }
#avatar-preview .avatar { width:76px; height:76px; background:#faf8f5; }
.avatar-upload-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.avatar-upload-actions .field-hint { flex-basis:100%; }
.avatar-upload [hidden], .avatar-upload-actions [hidden], .form-error[hidden] { display:none; }
.form-error { margin:10px 0 0; color:var(--accent-deep); font-size:13px; line-height:1.7; }
.required-hint { margin-left:12px; color:var(--sub); font-size:12px; font-weight:400; }
.board-options--compact .board-option { min-height:54px; gap:10px; }
.board-option input[type="radio"] {
  appearance:none; -webkit-appearance:none; display:inline-block; flex:0 0 20px;
  width:20px; height:20px; margin:0; border:1.5px solid #b8afa4; border-radius:50%;
  background:#fff; cursor:pointer;
}
.board-option input[type="radio"]:checked {
  border-color:var(--accent); background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.board-option:has(input:checked) { border-color:var(--accent); background:#fcf3ee; color:var(--accent-deep); }
.board-option:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.form-actions { padding:14px 0; background:#fff; }
@media(max-width:760px) {
  body:not([data-page="login"]):not([data-page="register"]) #app { padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)); }
  .form-actions { position:sticky; bottom:calc(70px + env(safe-area-inset-bottom, 0px)); z-index:3; border-top:1px solid #efefef; }
  .form-actions > .primary { flex:1; min-height:46px; }
  #profile-form .form-actions { flex-wrap:wrap; }
  .required-hint { display:block; margin:5px 0 0; }
}