@import url('./tokens.css');

.site-skip{position:absolute;top:-100px;left:16px;z-index:20;padding:12px;background:var(--color-surface);color:var(--color-primary-dark)}
.site-skip:focus{top:8px}
.site-header{position:relative;z-index:5;background:var(--color-surface);border-bottom:1px solid var(--color-border);font:13px/1.55 var(--font-family);color:var(--color-text)}
.site-header *{box-sizing:border-box}
.site-header .site-topline{max-width:1440px;min-height:76px;margin:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-header .site-identity{display:flex;align-items:center;gap:16px;min-width:0}
.site-header .site-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text);flex-shrink:0}
.site-header .site-brand img{width:38px;height:38px;object-fit:contain}
.site-header .site-brand strong{font-size:24px;line-height:1.2;letter-spacing:-.04em;font-weight:780}
.site-header .site-tool-name{border-left:1px solid var(--color-border);padding-left:16px;font-size:14px;font-weight:650;color:var(--color-text);line-height:1.4}
.site-header .site-icon{display:block;width:19px;height:19px;fill:currentColor;stroke:none;flex-shrink:0}
.site-header :focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.site-save{font-size:12px;font-weight:400;color:var(--color-text-muted);line-height:1.5;white-space:normal;margin:6px 0 0}
.site-header .site-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.site-header .site-actions :is(.button,.btn){min-height:44px;height:auto;border:1px solid var(--color-button-border);border-radius:var(--radius-button);padding:9px 13px;background:var(--color-surface);color:var(--color-text);font:700 12px/1.5 var(--font-family);display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;box-shadow:none;cursor:pointer}
.site-header .site-actions :is(.button,.btn):hover{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary-dark)}
.site-header .site-actions :is(.button,.btn).danger{background:transparent;border-color:transparent;color:#b43030}
.site-header .site-actions :is(.button,.btn).danger:hover{background:var(--tone-red-background);border-color:#efc1c1}
.site-header .download-menu{position:relative}
.site-header .download-options{position:absolute;right:0;top:calc(100% + 7px);z-index:20;min-width:260px;max-width:calc(100vw - 32px);padding:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-level3)}
.site-header .menu-item{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 12px;text-align:left;border:0;border-radius:7px;background:transparent;color:var(--color-text);font:500 12px/1.5 var(--font-family);cursor:pointer}
.site-header .menu-item:hover{background:var(--color-primary-soft)}
.site-header [hidden]{display:none!important}
@media(max-width:799px){.site-header .site-topline{gap:12px}.site-header .site-actions{width:100%}}
@media(max-width:599px){.site-header .site-topline{padding:14px 16px;gap:12px}.site-header .site-identity{gap:12px}.site-header .site-tool-name{padding-left:12px;font-size:13px}.site-header .site-actions{gap:6px}.site-header .site-actions :is(.button,.btn){flex:1;padding:9px 10px}.site-header .site-actions .download-menu{flex:1}.site-header .download-menu>#download{width:100%}.site-header .download-options{right:auto;left:0}.site-header .site-actions .site-icon{width:17px;height:17px}.site-header .site-actions #reset .site-icon{display:none}}
@media(max-width:370px){.site-header .site-actions :is(.button,.btn){font-size:11px;padding-inline:8px;gap:4px}.site-header .site-actions .site-icon{display:none}}
@media print{.site-header,.site-skip{display:none!important}}