:root {
  --mine-canvas: var(--wm-color-primary-wash);
  --mine-panel: var(--wm-color-surface);
  --mine-ink: var(--wm-color-ink);
  --mine-muted: var(--wm-color-muted);
  --mine-teal: var(--wm-color-action);
  --mine-teal-soft: var(--wm-color-primary-soft);
  --mine-line: var(--wm-color-line);
  --mine-orange: var(--wm-color-accent);
  --mine-blue: var(--wm-color-primary-strong);
  --mine-badge: var(--wm-color-danger);
  --page-width: var(--mobile-shell-content-width, 346.56px);
  --bottom-nav-height: 62px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--wm-color-app-bg); }
body { min-height: 100vh; margin: 0; color: var(--mine-ink); background: var(--wm-color-app-bg); font-family: var(--wm-font-ui); -webkit-font-smoothing: antialiased; }
button { border: 0; cursor: pointer; font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mine-teal); outline-offset: 2px; }

.mine-page { position: relative; width: min(100%, var(--page-width)); height: 100%; min-height: 0; margin: 0 auto; overflow: hidden; background: var(--mine-canvas); }
.mine-topbar { position: absolute; top: 25px; right: 0; left: 0; z-index: 6; display: grid; height: 51px; place-items: center; background: rgba(255, 255, 255, var(--chrome-alpha)); border-bottom: 1px solid rgba(var(--wm-primary-rgb), calc(var(--chrome-alpha) * .2)); backdrop-filter: blur(var(--chrome-blur)); transition: background-color .05s linear, border-color .05s linear; }
.mine-topbar h1 { margin: 0; color: var(--mine-ink); font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: 20px; }
.mine-notification { position:absolute; right:13px; top:7px; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:30px; color:var(--wm-color-primary-strong); text-decoration:none; font-size:10px; line-height:13px; }
.mine-notification img { width:23px; height:23px; object-fit:contain; }

.mine-main { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 76px 11px calc(var(--bottom-nav-height) + 32px + env(safe-area-inset-bottom)); background: transparent; scrollbar-width: none; overscroll-behavior: contain; }
.mine-main::-webkit-scrollbar { display: none; }

.mine-hero { height: 174px; margin: -98px -11px 0; background: url('./assets/confirmed/mine-hero-bg.png?v=20260925-3') 50% 14% / cover no-repeat; }

.mine-profile-card, .mine-order-card, .mine-stat-card, .mine-menu-card { background: var(--mine-panel); border: 1px solid var(--wm-color-line); border-radius: 19px; box-shadow: 0 3px 14px rgba(var(--wm-ink-rgb), .035); }

.mine-profile-card { position: relative; z-index: 2; display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 76px; align-items: center; gap: 10px; margin-top: -34px; padding: 8px 12px; }
.mine-profile-avatar { padding:0; background:transparent; border-radius:50%; }
.mine-profile-avatar img { display: block; width: 58px; height: 58px; object-fit: cover; border-radius: 50%; }
.mine-profile-card > div { display: grid; min-width: 0; gap: 3px; }
.mine-profile-card strong { color: var(--mine-ink); font-size: 18px; font-weight: 800; line-height: 24px; }
.mine-profile-card span { color: var(--mine-muted); font-size: 13px; line-height: 18px; }
.mine-profile-name { display:flex; min-width:0; align-items:center; gap:8px; padding:0; color:var(--mine-ink); background:transparent; text-align:left; }
.mine-profile-name strong { overflow-wrap:anywhere; }
.mine-profile-name img { flex:none; width:18px; height:18px; object-fit:contain; }
.mine-page.is-guest .mine-profile-card { grid-template-columns:42px minmax(0,1fr); gap:11px; }
.mine-page.is-guest .mine-profile-avatar { display:grid; place-items:center; width:42px; height:42px; background:var(--wm-color-primary-soft); }
.mine-page.is-guest .mine-profile-avatar img { width:24px; height:24px; border-radius:0; }
.mine-page.is-guest .mine-profile-name strong { font-size:15px; line-height:21px; font-weight:600; }
.mine-page.is-guest .mine-profile-name img { display:none; }
.mine-page.is-guest [data-profile-phone] { font-size:11px; line-height:17px; }
.mine-order-head button b, .mine-order-preview button b, .mine-menu-card b { font-size: 18px; font-weight: 400; line-height: 1; }

.mine-order-card { margin-top: 9px; padding: 8px 9px 5px; }
.mine-order-head { display: flex; min-height: 26px; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 2px 6px; }
.mine-order-head > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mine-order-head img { display: block; width: 22px; height: 22px; object-fit: contain; }
.mine-order-head h2 { margin: 0; color: var(--mine-ink); font-size: 14px; font-weight: 800; line-height: 18px; }

.mine-order-statuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 4px; padding: 8px 4px 7px; background: var(--wm-color-primary-wash); border-radius: 14px; }
.mine-order-statuses button { position: relative; display: flex; min-width: 0; min-height: 50px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 0 1px; color: var(--mine-ink); background: transparent; }
.mine-order-statuses button + button { border-left: 0; }
.mine-status-icon { position: relative; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; flex: 0 0 32px; }
.mine-order-statuses img { display: block; width: 29px; height: 29px; object-fit: contain; background: transparent; mix-blend-mode: multiply; }
.mine-order-statuses strong { position: absolute; top: -3px; right: -5px; display: inline-flex; min-width: 14px; height: 14px; align-items: center; justify-content: center; padding: 0 3px; color: #fff; background: var(--mine-badge); border: 2px solid var(--mine-panel); border-radius: 999px; font-size: 8px; font-weight: 700; line-height: 10px; }
.mine-order-statuses strong.is-zero { display: none; }
.mine-order-statuses button > span:last-child { display: block; color: var(--mine-ink); font-size: 10px; line-height: 16px; text-align: center; white-space: nowrap; }

.mine-order-preview { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; min-height: 60px; align-items: center; gap: 7px; margin-top: 4px; padding: 8px; background: var(--wm-color-primary-wash); border-radius: 13px; }
.mine-order-preview > img { display: block; width: 60px; height: 48px; object-fit: cover; border-radius: 8px; }
.mine-order-preview p { display: -webkit-box; min-width: 0; margin: 0; overflow: hidden; color: var(--mine-ink); font-size: 12px; line-height: 17px; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mine-order-preview p em { margin-left: 4px; color: var(--mine-orange); font-style: normal; white-space: nowrap; }
.mine-order-preview button { display: inline-flex; min-width: 68px; height: 30px; align-items: center; justify-content: center; gap: 2px; padding: 0 5px; color: var(--mine-teal); background: var(--mine-teal-soft); border: 1px solid var(--wm-color-line); border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }

.mine-stat-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 82px; align-items: center; margin-top: 9px; padding: 8px; }
.mine-stat-card button { display: flex; min-width: 0; min-height: 66px; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 4px; color: var(--mine-ink); background: transparent; }
.mine-stat-card button + button { border-left: 0; }
.mine-stat-icon { display: inline-flex; width: 31px; height: 31px; align-items: center; justify-content: center; flex: 0 0 31px; overflow: visible; }
.mine-stat-icon img { display: block; width: 31px; height: 31px; object-fit: contain; }
.mine-stat-icon--coupon img { transform: translateX(-5px); }
.mine-stat-icon--favorite img { transform: translateX(4px); }
.mine-stat-icon--compare img { transform: translateX(6px); }
.mine-stat-card strong { overflow: hidden; font-size: 11px; font-weight: 700; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.mine-stat-card em { color: var(--mine-teal); font-size: 13px; font-style: normal; font-weight: 800; line-height: 18px; }
.mine-stat-card .mine-stat-orange { color: var(--mine-orange); }
.mine-stat-card .mine-stat-blue { color: var(--mine-blue); }

.mine-menu-card { display: grid; gap: 2px; margin-top: 9px; overflow: hidden; padding: 4px 8px 5px; }
.mine-menu-card button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 48px; align-items: center; width: 100%; padding: 5px 6px 5px 4px; color: var(--mine-ink); background: transparent; border-radius: 12px; text-align: left; overflow: visible; }
.mine-menu-card button + button { border-top: 0; }
.mine-menu-card img { display: block; width: 22px; height: 22px; object-fit: contain; justify-self: center; overflow: visible; }
.mine-menu-card button[data-action="service"] img { width: 20px; height: 20px; transform: translateY(-1px); }
.mine-menu-card button[data-action="privacy"] img, .mine-menu-card button[data-action="terms"] img { width:20px; height:20px; }
.mine-menu-card button[data-action="about"] img { width: 20px; height: 20px; transform: translateY(-1px); }
.mine-menu-card span { display: flex; min-height: 19px; align-items: center; padding-left: 9px; font-size: 13px; line-height: 19px; }
.mine-menu-card b { color: var(--mine-muted); font-size: 18px; }
.mine-logout-card { display:block; width:100%; min-height:49px; margin-top:9px; padding:12px; color:var(--wm-color-danger); background:var(--mine-panel); border:1px solid var(--mine-line); border-radius:17px; font-size:15px; line-height:23px; font-weight:600; }
.mine-logout-card[hidden], .mine-page [hidden] { display:none!important; }
.mine-profile-form { margin:0; padding:0 17px 37px; }
.mine-profile-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,168px); align-items:center; gap:12px; min-height:62px; border-bottom:1px solid var(--wm-color-line); font-size:14px; line-height:20px; }
.mine-profile-row--avatar { min-height:92px; }
.mine-profile-row:has(output) { border-bottom:0; }
.mine-profile-row label { color:var(--wm-color-ink); }
.mine-profile-row input { width:100%; min-width:0; height:36px; padding:7px 12px; border:1px solid var(--wm-color-line-strong); border-radius:8px; color:var(--wm-color-ink); background:var(--wm-color-surface); font:14px/20px var(--wm-font-ui); }
.mine-profile-row output { color:var(--wm-color-muted); font:14px/20px var(--wm-font-ui); }
.mine-profile-picker { position:relative; justify-self:end; width:68px; height:68px; padding:0; background:transparent; border-radius:50%; }
.mine-profile-picker > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.mine-profile-picker .mine-camera { position:absolute; right:-2px; bottom:0; display:grid; place-items:center; width:25px; height:25px; border:2px solid white; border-radius:50%; background:var(--wm-color-primary-strong); }
.mine-camera img { width:16px; height:16px; filter:brightness(0) invert(1); }
.mine-profile-actions { display:flex; gap:10px; margin-top:19px; }
.mine-profile-actions button { flex:1; min-width:0; height:43px; padding:8px; border:0; border-radius:9px; background:var(--wm-color-primary-soft); color:var(--wm-color-ink); font:600 16px/22px var(--wm-font-ui); }
.mine-profile-actions button[type="submit"] { background:var(--wm-color-primary-strong); color:white; }
.mine-profile-actions button:disabled { opacity:.55; cursor:wait; }
.mine-profile-form input[type="file"] { display:none; }
.account-modal.mine-profile-sheet .account-modal-content, .account-modal.mine-logout-dialog .account-modal-content { padding:0; }
.mine-profile-sheet .account-modal-header { padding:9px 18px 6px; }
.account-modal.mine-logout-dialog { width:calc(100% - 86px); margin-top:80px; border-radius:11px; }
.mine-logout-dialog .account-confirm-body { padding:20px 14px 12px; text-align:center; }
.mine-logout-dialog h2 { margin:0 0 6px; color:var(--mine-ink); font-size:16px; line-height:22px; }
.mine-logout-dialog p { margin:0; font-size:12px; line-height:20px; color:var(--wm-color-muted-strong); }
.mine-logout-dialog .account-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; border-top:1px solid var(--wm-color-line); }
.mine-logout-dialog .account-confirm-actions button { min-height:44px; padding:10px 6px; border-radius:0; color:var(--wm-color-muted-strong); background:var(--wm-color-surface); font:600 14px/20px var(--wm-font-ui); }
.mine-logout-dialog .account-confirm-actions button:last-child { color:var(--wm-color-danger); background:var(--wm-color-surface); }
.mine-logout-dialog .account-confirm-actions button + button { border-left:1px solid var(--wm-color-line); color:var(--wm-color-danger); }

@media (max-width: 350px) {
  .mine-main { padding-right: 9px; padding-left: 9px; }
  .mine-order-statuses img { width: 29px; height: 29px; }
  .mine-order-preview { grid-template-columns: 60px minmax(0, 1fr); }
  .mine-order-preview > img { width: 60px; height: 48px; }
  .mine-order-preview button { grid-column: 2; justify-self: start; }
}