/* 第一層頁面共用外框。限定 shared-shell-page，避免影響顧客明細/施作表單等次級頁面。 */
.shared-shell-page .app{min-height:100vh}
.shared-shell-page .topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 28px;background:rgba(255,253,251,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#e7ddd7)
}
.shared-shell-page .brand{display:flex;align-items:center;gap:12px;min-width:0}
.shared-shell-page .logo{
  width:38px;height:38px;flex:0 0 38px;overflow:hidden;padding:0;border-radius:50%;
  background:transparent;display:grid;place-items:center
}
.shared-shell-page .logo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.shared-shell-page .brand-title{font-size:18px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.shared-shell-page .brand-sub{font-size:12px;color:var(--muted,#8a7f78);margin-top:2px}
.shared-shell-page .top-actions{display:flex;align-items:center;gap:10px;min-width:0}
.shared-shell-page .date-pill{
  padding:9px 12px;border:1px solid var(--line,#e7ddd7);border-radius:999px;
  background:#fff;font-size:13px;color:var(--muted,#8a7f78);white-space:nowrap
}
.shared-shell-page .avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#e9d8d1;color:#6f4e46;font-weight:800;font-size:13px
}
.shared-shell-page .layout{
  display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 71px)
}
.shared-shell-page .sidebar{
  display:block;padding:22px 16px;border-right:1px solid var(--line,#e7ddd7);background:#fbf7f4;min-width:0
}
.shared-shell-page .nav{display:grid;gap:8px}
.shared-shell-page .nav a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  color:#5d524d;text-decoration:none;font-size:14px;font-weight:700
}
.shared-shell-page .nav a.active{background:var(--accent,#8b645a);color:#fff}
.shared-shell-page .nav a:hover{background:#efe4df}
.shared-shell-page .nav a.active:hover{background:var(--accent,#8b645a)}
.shared-shell-page .nav-icon-svg{width:24px;height:20px;display:block;flex:0 0 auto}
.shared-shell-page .shell-content{min-width:0;width:100%}
.shared-shell-page .mobile-nav{display:none}
.shared-shell-page .topbar.auto-hide-header{transition:transform .22s ease}
.shared-shell-page .topbar.auto-hide-header.is-hidden{
  transform:translateY(calc(-100% - 1px));pointer-events:none
}
.shared-shell-page .topbar.auto-hide-header:focus-within{transform:translateY(0);pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .shared-shell-page .topbar.auto-hide-header{transition:none}
}
@media(max-width:1023px){
  body.shared-shell-page{padding-bottom:76px}
  .shared-shell-page .layout{grid-template-columns:minmax(0,1fr)}
  .shared-shell-page .sidebar{display:none}
  .shared-shell-page .mobile-nav{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:fixed;
    left:0;right:0;bottom:0;z-index:30;background:#fffdfb;
    border-top:1px solid var(--line,#e7ddd7);
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))
  }
  .shared-shell-page .mobile-nav a{
    display:grid;place-items:center;align-content:center;gap:3px;min-width:0;
    color:#7f726b;text-decoration:none;font-size:11px;font-weight:700
  }
  .shared-shell-page .mobile-nav a.active{color:var(--accent,#8b645a)}
  .shared-shell-page .mobile-nav .nav-icon-svg{width:18px;height:18px}
}
@media(max-width:767px){
  .shared-shell-page .topbar{padding:12px 14px}
  .shared-shell-page .brand-sub,.shared-shell-page .date-pill{display:none}
  .shared-shell-page .brand-title{font-size:18px}
}
@media(max-width:390px){
  .shared-shell-page .mobile-nav{padding-left:4px;padding-right:4px}
  .shared-shell-page .mobile-nav a{font-size:10px}
  .shared-shell-page .brand-title{font-size:16px}
}