/* === LAYOUT — App shell, header, footer, responsive === */
.app{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative}

/* Header */
.hdr{flex-shrink:0;padding:6px 16px;display:flex;justify-content:space-between;align-items:center;background:var(--white);border-bottom:1.5px solid var(--border);z-index:10}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-mark{width:40px;height:40px;flex-shrink:0}
.logo-mark svg{width:100%;height:100%}
.logo-txt{font-size:1.2rem;font-weight:900;letter-spacing:-0.03em;line-height:1}
.logo-txt b{color:var(--send)}
.logo-txt .sub{display:block;font-size:.55rem;font-weight:700;color:var(--text-lt);letter-spacing:.06em;text-transform:uppercase;margin-top:-1px}
.hdr-r{display:flex;align-items:center;gap:4px}
.hdr-btn{padding:6px 10px;border-radius:var(--rs);font-size:.72rem;font-weight:700;color:var(--text-mid);cursor:pointer;border:none;background:transparent;font-family:inherit;transition:all .15s}
.hdr-btn:hover{color:var(--text);background:var(--bg)}

/* Footer */
.ftr{flex-shrink:0;padding:5px 16px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;background:var(--white);border-top:1.5px solid var(--border);z-index:10}
.ftr-i{font-size:.6rem;font-weight:600;color:var(--text-lt)}.ftr-i a{color:var(--text-lt);text-decoration:none}.ftr-i a:hover{color:var(--text-mid)}
.ftr-dot{width:2px;height:2px;border-radius:50%;background:var(--text-ft)}

/* Responsive */
@media(max-height:680px){.hdr{padding:5px 12px}}