/* Shared alignment for file labels and buttons, at every screen width. */
header{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:20px;min-height:82px;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top))}
header h1{flex:1;min-width:0;margin:0;font-size:17px}
header h1 .brand{gap:12px!important;cursor:default}
header .brand-logo{display:block;flex:none;width:72px;height:46px;object-fit:contain;filter:brightness(0)}
body[data-theme=dark] header .brand-logo{filter:none}
header h1 .ttl{max-width:none!important;overflow:visible;white-space:nowrap;line-height:1.2}
header h1 .ttl small{display:block;font-size:11px;letter-spacing:.02em;margin-top:5px;white-space:nowrap;max-width:none}
.header-actions{display:flex;align-items:center;gap:8px;flex:none}
header .header-actions>button,header .header-actions>.btn{display:inline-flex;align-items:center;justify-content:center;flex:none;height:44px;min-height:44px;margin:0;padding:0 14px;line-height:1;font-size:13px;box-sizing:border-box;white-space:nowrap}
header .header-actions>.ibtn{width:44px;padding:0}
header .header-actions>.btn span,header .header-actions>button span{display:inline}
header .header-actions .ic{flex:none;width:18px;height:18px}
header .more-menu{top:calc(100% + 6px);right:12px}
@media(max-width:860px){
  header{gap:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  header h1{font-size:16px}
  header .brand-logo{width:66px;height:42px}
  .header-actions{gap:5px}
  header .header-actions>button,header .header-actions>.btn{padding:0 10px}
  header .header-actions>.ibtn{padding:0}
  header .hdiv{display:none}
}
@media(max-width:600px){
  header{flex-direction:row;flex-wrap:nowrap;align-items:center;min-height:64px;gap:6px;padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
  header h1{flex:1;min-width:0;font-size:12px}
  header h1 .brand{gap:7px!important}
  header .brand-logo{width:42px;height:27px}
  header h1 .ttl small{font-size:8px;display:block;letter-spacing:0;margin-top:3px}
  .header-actions{display:flex;align-items:center;flex:none;gap:2px;width:auto}
  header .header-actions>button,header .header-actions>.btn,header .header-actions>.ibtn{width:36px;min-width:36px;height:44px;min-height:44px;padding:0;gap:0}
  header .header-actions>.btn span,header .header-actions>button span{display:none}
  header .header-actions .ic{width:17px;height:17px}
  header .header-actions>.header-open,header .header-actions>#saveBtn{width:46px;min-width:46px}
  header .header-actions>#undo,header .header-actions>#redo{width:28px;min-width:28px}
  header .header-actions>#moreOptions{width:28px;min-width:28px}
}
@media(max-width:380px){
  header h1{font-size:11px}
  header .brand-logo{width:36px;height:23px}
  header h1 .brand{gap:6px!important}
  header h1 .ttl small{font-size:7.5px}
  header .header-actions>button,header .header-actions>.btn,header .header-actions>.ibtn{width:32px;min-width:32px}
  header .header-actions>.header-open,header .header-actions>#saveBtn{width:44px;min-width:44px}
  header .header-actions>#undo,header .header-actions>#redo,header .header-actions>#moreOptions{width:26px;min-width:26px}
}