:root { --rail-width: 244px; --dock-height: 66px; }
#mobile-dock { display: none; }
#app-rail {
  color: #f6f9ef;
  background: #183e33;
  border: 0;
}
#app-rail .brand { padding: 28px 20px; }
#app-rail .mark { background: #d1ed91; color: #193f33; }
#workspace-menu { display: flex; flex-direction: column; gap: 20px; }
#workspace-menu nav { display: grid; gap: 5px; }
#workspace-menu nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  min-height: 44px; border-radius: 10px; font-size: 15px; font-weight: 600;
}
#workspace-menu nav svg { width: 20px; height: 20px; flex-shrink: 0; }
#workspace-menu nav a:hover { background: #ffffff14; }
#workspace-menu nav a[aria-current] { background: #d4eba4; color: #18392a; }
.rail-account { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid #ffffff29; }
.rail-account #storage-label { font-size: 13px; overflow-wrap: anywhere; }
.rail-account #storage-label:empty { display:none; }
.rail-account button { min-height: 42px; }
#app-rail .text-btn { color: #d5e9b7; }
#app-rail #account { color: #eef5e6; background: #ffffff0c; border: 1px solid #ffffff34; }
#menu-drawer { padding: 18px; max-width: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drawer-head button { width: 44px; height: 44px; }
#menu-drawer .rail-account { border-color: #dce2d5; }
#menu-drawer nav a:hover { background: #edf3e5; }
#menu-drawer nav a[aria-current] { background: #d4eba4; }
@media (min-width: 841px) {
  body:not(.signed-out) { padding-left: var(--rail-width); }
  body:not(.signed-out) main { padding-bottom: 32px; }
  #app-rail {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0;
    width: var(--rail-width); overflow-y: auto;
  }
  #rail-slot, #workspace-menu { display: flex; flex-direction: column; flex: 1; }
  #workspace-menu { padding: 0 15px 20px; }
  .rail-account { margin-top: auto; }
}
@media (max-width: 840px) {
  body:not(.signed-out) { padding-bottom: calc(var(--dock-height) + 22px + env(safe-area-inset-bottom, 0px)); }
  #app-rail .brand { width: fit-content; padding: 12px 18px; font-size: 21px; }
  #app-rail .mark { width: 31px; height: 31px; font-size: 22px; }
  #rail-slot { display: none; }
  #mobile-dock {
    position: fixed; z-index: 4; bottom: 0; inset-inline: 0; display: flex;
    justify-content: center; align-items: flex-end; height: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); background: #183e33; border-top: 1px solid #2b5346;
  }
  #menu-trigger {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 2px; min-width: 76px; padding: 0 8px 6px; border: 0; border-radius: 10px;
    background: transparent; color: white; font-size: 12px; font-weight: 650;
  }
  .menu-icon {
    width: 52px; height: 52px; border: 4px solid #183e33; border-radius: 50%;
    display: grid; place-content: center; gap: 4px; background: #cde989;
  }
  .menu-icon::before, .menu-icon::after, .menu-icon i {
    content: ''; display: block; width: 18px; height: 2px; border-radius: 1px; background: #244434;
  }
  #menu-drawer {
    position: fixed; inset: auto auto calc(var(--dock-height) + env(safe-area-inset-bottom, 0px)) 0;
    margin: 0; width: min(360px, calc(100% - 20px)); max-height: calc(100dvh - var(--dock-height) - 24px - env(safe-area-inset-bottom, 0px));
    overflow: auto; overscroll-behavior: contain; border-radius: 0 18px 0 0;
    box-shadow: 5px -8px 28px #15362924; padding-left: max(18px, env(safe-area-inset-left, 0px));
  }
  #menu-drawer::backdrop { background: #102b233e; }
  body:has(#menu-drawer[open]) { overflow: hidden; }
  #status:not(:empty) { bottom: calc(var(--dock-height) + 15px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
}

#account-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 32px 0; max-width:1164px; margin:auto; }
#account-tools button { min-height:44px; padding:6px 12px; font-size:14px; }
#settings-open { display:inline-flex; align-items:center; gap:7px; }
.settings-avatar,.photo-preview { display:inline-grid; place-items:center; overflow:hidden; border-radius:50%; background:#d7e6c5; color:#224736; font-weight:700; }
.settings-avatar { width:28px; height:28px; }
.settings-avatar img,.photo-preview img { width:100%; height:100%; object-fit:cover; }
#settings-dialog { width:min(520px,calc(100% - 24px)); }
.settings-fields { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.settings-fields label:has(input[name^="address_line"]),.settings-fields label:has(input[name="business_email"]) {grid-column:1/-1}
.photo-editor { display:flex; align-items:center; gap:16px; margin-top:14px; }
.photo-editor>div { min-width:0; }
.photo-preview { height:64px; width:64px; flex:none;font-size:23px; }
.photo-editor input { font-size:13px; }
.photo-editor label { margin:0; }
@media(max-width:840px){
  #app-rail { display:flex; align-items:center; height:58px; padding-right:105px; }
  #account-tools { position:absolute; right:max(8px,env(safe-area-inset-right)); top:0; height:58px; padding:0; gap:5px; }
  #account-tools button { background:#254e40; color:#fff; padding:6px 9px; }
  #settings-open .settings-word { display:none; }
  #settings-open { min-width:44px; justify-content:center; }
}
@media(max-width:390px){
  #app-rail .brand { padding-left:10px; gap:6px; font-size:18px; }
  .settings-fields { grid-template-columns:1fr; }
}