/* VirtualMall UI Refresh — presentation-only layer.
   Loaded after the legacy V2/V3 styles so older pages keep their structure
   while sharing the same spacing, depth, money and card language. */
:root {
  --ui-blue: #2563eb;
  --ui-indigo: #4f46e5;
  --ui-cyan: #0891b2;
  --ui-teal: #0f766e;
  --ui-green: #16a34a;
  --ui-emerald: #059669;
  --ui-amber: #d97706;
  --ui-orange: #ea580c;
  --ui-rose: #e11d48;
  --ui-red: #dc2626;
  --ui-violet: #7c3aed;
  --ui-slate: #475569;
  --ui-card-shadow: 0 10px 30px rgba(15, 23, 42, .065), 0 2px 7px rgba(15, 23, 42, .035);
  --ui-card-shadow-hover: 0 18px 42px rgba(15, 23, 42, .11), 0 4px 12px rgba(15, 23, 42, .04);
}

/* Typography / hierarchy */
.vm-page-header { margin-bottom: 26px; }
.vm-page-title { font-size: clamp(1.55rem, 2.7vw, 2.15rem); font-weight: 880; letter-spacing: -.035em; }
.vm-page-subtitle { margin-top: 7px; font-size: .95rem; line-height: 1.65; }
.vm-section-title { font-size: 1.12rem; font-weight: 850; letter-spacing: -.015em; }
.vm-kicker { font-size: .72rem; letter-spacing: .09em; opacity: .92; }

/* Money is always visually identifiable and explicitly denominated in JPY. */
.vm-money { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vm-money-value { font-weight: inherit; letter-spacing: -.012em; }
.vm-currency { font-size: .56em; line-height: 1; font-weight: 800; letter-spacing: .055em; color: #7c8798; vertical-align: .12em; }
.text-danger .vm-currency, .text-success .vm-currency, .text-warning .vm-currency { color: currentColor; opacity: .72; }
.v3-stat .vm-currency, .vm-stat-value .vm-currency, .v2-balance .vm-currency, .product-card-price .vm-currency, .product-detail-price .vm-currency, .cart-summary-total .vm-currency { font-size: .42em; }

/* Shared surface depth. */
.card, .vm-panel, .v2-card, .v3-panel, .table-responsive {
  box-shadow: var(--ui-card-shadow);
  border-color: #e2e8f0;
}
.card, .vm-panel, .v2-card, .v3-panel { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.v2-card { border-radius: 18px; }
.v3-panel { border-radius: 18px; }
.v3-panel > h2, .v2-card h2 { letter-spacing: -.015em; }
.table-responsive { border-radius: 16px; overflow: hidden; }
.table thead th { padding-top: 14px; padding-bottom: 14px; background: linear-gradient(180deg,#fbfcfe,#f6f8fb); }
.table tbody td { padding-top: 14px; padding-bottom: 14px; }
.table tbody tr { transition: background-color .13s ease; }
.table tbody tr:hover { background: #f8fbff; }

/* V3 operational cards gain a colored rail, soft tint and stronger numeric hierarchy. */
.v3-stats { gap: 17px; }
.v3-stat {
  --tone: var(--ui-blue);
  --tone-soft: #eff6ff;
  min-height: 146px;
  padding: 22px 22px 20px;
  border-radius: 18px;
  overflow: hidden;
  border-color: #e3e9f2;
  background: linear-gradient(145deg, #fff 0%, #fff 72%, var(--tone-soft) 145%);
  box-shadow: var(--ui-card-shadow);
}
.v3-stat::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--tone); opacity:.9; }
.v3-stat::after { content:""; position:absolute; width:86px; height:86px; right:-34px; top:-34px; border-radius:50%; background:var(--tone-soft); opacity:.9; }
.v3-stat > span, .v3-stat > strong, .v3-stat > small { position:relative; z-index:1; }
.v3-stat > span { font-size: .82rem; font-weight: 760; color:#637086; }
.v3-stat strong { font-size: clamp(1.65rem, 2.6vw, 2rem); letter-spacing: -.025em; color:#172033; }
.v3-stat small { line-height:1.55; }
a.v3-stat:hover, a.v3-stat:focus-visible { border-color: color-mix(in srgb, var(--tone) 38%, #e2e8f0); box-shadow: var(--ui-card-shadow-hover); transform: translateY(-3px); }
.v3-stat.urgent, .v3-stat.is-important { --tone:var(--ui-red); --tone-soft:#fff1f2; border-color:#fecdd3; background:linear-gradient(145deg,#fff 0%,#fff 68%,#fff1f2 135%); }
.v3-stat.urgent strong { color:#b91c1c; }
.v3-stat.tone-blue { --tone:var(--ui-blue); --tone-soft:#eff6ff; }
.v3-stat.tone-indigo { --tone:var(--ui-indigo); --tone-soft:#eef2ff; }
.v3-stat.tone-cyan { --tone:var(--ui-cyan); --tone-soft:#ecfeff; }
.v3-stat.tone-teal { --tone:var(--ui-teal); --tone-soft:#f0fdfa; }
.v3-stat.tone-green { --tone:var(--ui-green); --tone-soft:#f0fdf4; }
.v3-stat.tone-emerald { --tone:var(--ui-emerald); --tone-soft:#ecfdf5; }
.v3-stat.tone-amber { --tone:var(--ui-amber); --tone-soft:#fffbeb; }
.v3-stat.tone-orange { --tone:var(--ui-orange); --tone-soft:#fff7ed; }
.v3-stat.tone-rose { --tone:var(--ui-rose); --tone-soft:#fff1f2; }
.v3-stat.tone-violet { --tone:var(--ui-violet); --tone-soft:#f5f3ff; }
.v3-stat.tone-slate { --tone:var(--ui-slate); --tone-soft:#f1f5f9; }

/* Dashboard section bands make priorities readable without turning the whole UI colorful. */
.ui-dashboard-section { margin: 26px 0 32px; }
.ui-dashboard-section + .ui-dashboard-section { margin-top: 32px; }
.ui-dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.ui-dashboard-heading h2 { margin:0; font-size:1.1rem; font-weight:860; color:#1e293b; }
.ui-dashboard-heading p { margin:3px 0 0; color:#718096; font-size:.8rem; }
.ui-dashboard-heading .ui-section-icon { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:#eef2ff; color:#4f46e5; }
.ui-dashboard-heading.is-attention .ui-section-icon { background:#fff7ed; color:#ea580c; }
.ui-dashboard-heading.is-service .ui-section-icon { background:#f5f3ff; color:#7c3aed; }
.ui-dashboard-heading.is-business .ui-section-icon { background:#ecfdf5; color:#059669; }

/* Buyer area */
.frontend-area .app-main { padding-top: 28px; }
.frontend-area .store-filter-panel { box-shadow: var(--ui-card-shadow); border-radius:18px; }
.frontend-area .product-card { border-radius:18px; box-shadow:0 5px 18px rgba(15,23,42,.055); }
.frontend-area .product-card:hover { transform:translateY(-5px); box-shadow:var(--ui-card-shadow-hover); border-color:#cfd9e7; }
.frontend-area .product-card:hover .product-img { transform:scale(1.045); }
.frontend-area .product-media-tag { background:rgba(15,23,42,.72); box-shadow:0 3px 10px rgba(15,23,42,.12); }
.frontend-area .product-card-price { font-size:1.28rem; letter-spacing:-.025em; }
.frontend-area .product-card-category { display:inline-flex; width:max-content; max-width:100%; padding:3px 8px; border-radius:999px; background:#f1f5f9; color:#64748b; }
.frontend-area .buyer-profile-card { background:linear-gradient(135deg,#fff 0%,#f7fbff 70%,#eef6ff 100%); border-color:#dbe7f5; }
.frontend-area .buyer-quick-link { transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.frontend-area .buyer-quick-link:hover { transform:translateY(-2px); border-color:#bfdbfe; box-shadow:0 8px 18px rgba(37,99,235,.08); }
.frontend-area .vm-stat-card { box-shadow:var(--ui-card-shadow); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.frontend-area a.vm-stat-card:hover { transform:translateY(-3px); box-shadow:var(--ui-card-shadow-hover); border-color:#bfdbfe; }
.frontend-area .vm-stat-value { font-size:clamp(1.45rem,2.7vw,2rem); }

/* Seller / control shells: keep dense operational layout while adding separation. */
.seller-area, .control-area { background:#f4f7fb; }
.seller-content, .control-content { max-width:1540px; }
.seller-topbar, .control-topbar { box-shadow:0 1px 0 rgba(15,23,42,.02), 0 8px 28px rgba(15,23,42,.025); }
.seller-sidebar, .control-sidebar { box-shadow:10px 0 34px rgba(15,23,42,.07); }
.seller-area .v2-card, .seller-area .v3-panel, .control-area .v2-card, .control-area .v3-panel { background:#fff; }
.seller-area .v3-toolbar, .control-area .v3-toolbar { padding:12px 14px; border:1px solid #e2e8f0; border-radius:14px; background:#fff; box-shadow:0 4px 15px rgba(15,23,42,.035); }
.seller-area .v3-filter, .control-area .v3-filter { border-radius:15px; box-shadow:0 5px 18px rgba(15,23,42,.04); }

/* Important numeric surfaces outside V3 cards. */
.v2-balance { color:#1d4ed8; font-size:clamp(1.8rem,4vw,2.55rem); letter-spacing:-.03em; }
.v2-money { letter-spacing:-.02em; }
.order-summary-item strong .vm-money, .control-detail-item strong .vm-money { font-size:1.04em; }

/* Status chips become a little more substantial without changing status meaning. */
.vm-status { min-height:28px; padding:4px 10px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.025); }

/* Buyer orders: desktop stays a table, mobile becomes a tappable order card. */
.buyer-orders-table .buyer-order-row[data-row-link] { position:relative; }
.buyer-orders-table .buyer-order-row[data-row-link] td:first-child a::after { content:""; position:absolute; inset:0; }

@media (max-width: 767.98px) {
  .vm-page-title { font-size:1.62rem; }
  .vm-page-header { margin-bottom:20px; }
  .v3-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .v3-stat { min-height:128px; padding:17px 16px 15px; border-radius:15px; }
  .v3-stat strong { font-size:1.55rem; }
  .ui-dashboard-section { margin:20px 0 26px; }

  .buyer-orders-wrap { overflow:visible; border:0; box-shadow:none; background:transparent; }
  .buyer-orders-table { display:block; background:transparent; }
  .buyer-orders-table thead { display:none; }
  .buyer-orders-table tbody { display:grid; gap:11px; }
  .buyer-orders-table .buyer-order-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"number number" "product amount" "status date";
    gap:8px 12px;
    padding:15px 16px 14px;
    border:1px solid #e1e8f0;
    border-radius:15px;
    background:#fff;
    box-shadow:0 7px 22px rgba(15,23,42,.055);
  }
  .buyer-orders-table .buyer-order-row td { display:block; padding:0 !important; border:0; background:transparent !important; }
  .buyer-orders-table .buyer-order-row td:nth-child(1) { grid-area:number; padding-right:24px !important; font-size:.72rem; color:#64748b; }
  .buyer-orders-table .buyer-order-row td:nth-child(1) a { color:#64748b; font-weight:700 !important; }
  .buyer-orders-table .buyer-order-row td:nth-child(1)::after { content:"›"; position:absolute; right:15px; top:12px; color:#94a3b8; font-size:1.35rem; line-height:1; }
  .buyer-orders-table .buyer-order-row td:nth-child(2) { grid-area:product; font-size:.93rem; font-weight:780; color:#1e293b; min-width:0; }
  .buyer-orders-table .buyer-order-row td:nth-child(2) .small { font-weight:500; margin-top:4px; }
  .buyer-orders-table .buyer-order-row td:nth-child(3) { grid-area:amount; align-self:start; text-align:right; font-size:1.03rem; color:#0f172a; }
  .buyer-orders-table .buyer-order-row td:nth-child(4) { grid-area:status; align-self:end; }
  .buyer-orders-table .buyer-order-row td:nth-child(5) { grid-area:date; align-self:end; text-align:right; color:#64748b; font-size:.73rem; white-space:nowrap; }
  .buyer-orders-table .buyer-order-row:hover { transform:none; }

  .frontend-area .product-card { border-radius:14px; }
  .frontend-area .product-card-price { font-size:1.08rem; }
  .frontend-area .product-card-category { padding:2px 6px; }
}

@media (max-width: 430px) {
  .v3-stats { grid-template-columns:1fr 1fr; }
  .v3-stat { min-height:124px; }
  .v3-stat strong { font-size:1.42rem; }
  .vm-currency { letter-spacing:.03em; }
  .buyer-orders-table .buyer-order-row { padding:14px; gap:7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-stat, .product-card, .vm-stat-card, .buyer-quick-link { transition:none !important; }
}

/* Authentication surfaces */
.auth-shell, .portal-login-card { box-shadow: var(--ui-card-shadow-strong, 0 22px 60px rgba(15,23,42,.14)); }
.auth-main h2, .portal-login-card h1 { letter-spacing:-.025em; }
.auth-main h2 { font-size:1.6rem; }