@media screen and (max-width: 700px) {
  .mobile-period-select { display: block; position: relative; min-width: 0; width: 100%; }
  .mobile-period-select .mobile-period-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; clip-path: inset(50%); overflow: hidden; pointer-events: none; }
  .mobile-period-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #d9cdbb; border-radius: 12px; background: #fffdf7; color: #34483d; font: inherit; text-align: left; cursor: pointer; }
  .mobile-period-trigger > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .mobile-period-trigger:disabled { opacity: .65; cursor: default; }
  .mobile-period-trigger:focus-visible, .mobile-period-option:focus-visible, .mobile-period-close:focus-visible { outline: 3px solid #168d80; outline-offset: 2px; }
  .layout[data-app-theme="light"] .mobile-period-trigger { background: #fff; border-color: #cbd5e1; color: #1e293b; }
  .layout[data-app-theme="dark"] .mobile-period-trigger { background: #172438; border-color: #475569; color: #f1f5f9; }
}
.mobile-period-dialog { --period-bg: #fffaf0; --period-fg: #34483d; --period-border: #e0d3c0; --period-active: #dcefe4; --period-accent: #126c54; padding: 0; border: 1px solid var(--period-border); border-radius: 18px; background: var(--period-bg); color: var(--period-fg); width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: min(70dvh, 560px); box-shadow: 0 18px 60px #0004; overflow: hidden; }
.mobile-period-dialog:not([open]) { display: none; }
.mobile-period-dialog[open] { display: flex; flex-direction: column; }
.mobile-period-dialog[data-theme="light"] { --period-bg: #fff; --period-fg: #1e293b; --period-border: #cbd5e1; --period-active: #e0f2fe; --period-accent: #075985; }
.mobile-period-dialog[data-theme="dark"] { --period-bg: #172438; --period-fg: #f1f5f9; --period-border: #475569; --period-active: #204a49; --period-accent: #8ce3c8; }
.mobile-period-dialog::backdrop { background: #071c28a6; }
.mobile-period-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--period-border); }
.mobile-period-header strong { font-size: 16px; }
.mobile-period-dialog .mobile-period-close { padding: 8px 10px; min-height: 44px; border: 1px solid var(--period-border); border-radius: 10px; color: var(--period-fg); background: transparent; font: inherit; cursor: pointer; }
.mobile-period-options { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 6px; touch-action: pan-y; }
.mobile-period-dialog .mobile-period-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; margin: 0; padding: 12px; border: 0; border-radius: 10px; text-align: left; background: transparent; color: var(--period-fg); font: inherit; cursor: pointer; }
.mobile-period-dialog .mobile-period-option[aria-selected="true"] { background: var(--period-active); color: var(--period-accent); font-weight: 700; }
.mobile-period-dialog .mobile-period-option:disabled { opacity: .5; cursor: default; }
@media print { .mobile-period-select { display: none !important; } .mobile-period-dialog { display: none !important; } }