.header-actions { display: flex; align-items: center; gap: 16px; }
.header-actions a { color: var(--mint); text-decoration: none; font-size: 13px; }
.range-panel { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #10231e, #0a1714); box-shadow: 0 18px 55px #0003; }
.range-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 16px 18px; }
.range-choice { display: grid; gap: 8px; }
.control-label, .range-current span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.range-presets { display: flex; gap: 4px; padding: 4px; border: 1px solid #183028; border-radius: 11px; background: #06110e; }
.range-presets button, .apply-button, .summary-actions button { min-height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 650; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.range-presets button:hover { color: var(--text); background: #10251f; }
.range-presets button.active { color: var(--text); background: #1b3a31; box-shadow: inset 0 0 0 1px #2b5548; }
.range-current { display: grid; gap: 5px; min-width: 260px; text-align: right; }
.range-current strong { color: #d7e8e2; font-size: 14px; font-weight: 600; }
.custom-range[hidden] { display: none !important; }
.custom-range { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 16px 18px 18px; border-top: 1px solid var(--line); background: #07151188; }
.custom-range-intro { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.custom-range-intro div { display: grid; gap: 1px; }
.custom-range-intro strong { font-size: 13px; }
.custom-range-intro small { color: var(--muted); font-size: 11px; }
.calendar-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #295044; border-radius: 10px; background: #102a22; color: var(--mint); font-size: 17px; }
.custom-range-fields { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex: 1; }
.custom-range label, .login-card label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.custom-range label span { padding-left: 2px; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.custom-range input, .login-card input { border: 1px solid var(--line); border-radius: 10px; outline: none; background: #050e0c; color: var(--text); padding: 10px 12px; font: inherit; color-scheme: dark; }
.custom-range input { min-width: 168px; min-height: 42px; }
.custom-range input:focus { border-color: #3b7c68; box-shadow: 0 0 0 3px #54e0aa18; }
.custom-range input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; filter: invert(85%) sepia(12%) saturate(396%) hue-rotate(105deg); }
.date-arrow { align-self: center; margin-top: 17px; color: #5e7c73; }
.apply-button { min-height: 42px; background: var(--mint); color: #05251b; font-weight: 750; }
.apply-button:hover { background: #72e7b9; box-shadow: 0 8px 24px #54e0aa20; }
.summary-panel { margin-bottom: 18px; }
.summary-output { border-top: 1px solid var(--line); padding: 24px; white-space: pre-wrap; line-height: 1.7; color: #dcebe6; min-height: 105px; }
.summary-actions { display: flex; align-items: center; gap: 14px; padding: 0 24px 20px; }
.summary-actions button { background: #1a342c; color: var(--text); }
.summary-actions span { font-size: 12px; color: var(--muted); }
.primary-button { border: 0; border-radius: 9px; background: var(--mint); color: #05251b; padding: 12px 16px; font-weight: 750; cursor: pointer; }
.primary-button.compact { padding: 10px 14px; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, #10231e, #0a1714); box-shadow: 0 30px 90px #0007; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border-radius: 13px; background: var(--mint); color: #05251b; font-weight: 850; }
.login-card h1 { margin: 10px 0 8px; font-size: 30px; letter-spacing: -.035em; }
.login-card > p { margin: 0 0 24px; color: var(--muted); }
.login-card form { display: grid; gap: 18px; }
.login-card input { padding: 12px; }
.login-error { margin-bottom: 18px; padding: 11px 13px; border: 1px solid #ff777744; border-radius: 9px; background: #ff777711; color: #ffaaaa; font-size: 13px; }
@media (max-width: 620px) {
    .header-actions { margin-top: 18px; }
    .range-toolbar { align-items: stretch; flex-direction: column; }
    .range-presets { width: 100%; overflow: auto; }
    .range-presets button { flex: 1 0 auto; }
    .range-current { min-width: 0; text-align: left; }
    .custom-range { align-items: stretch; flex-direction: column; }
    .custom-range-fields { align-items: stretch; flex-direction: column; }
    .custom-range input { width: 100%; }
    .date-arrow { display: none; }
    .summary-panel .primary-button { margin-top: 16px; }
}
@media (min-width: 621px) and (max-width: 980px) {
    .custom-range { align-items: stretch; flex-direction: column; }
    .custom-range-fields { justify-content: flex-start; }
}