#salesReportsPage { min-width:0; }
#apiAccessPage.active { gap:12px; }
#apiAccessPage .api-message:empty { display:none; }
#apiAccessPage .api-endpoint { overflow-wrap:anywhere; }
#apiAccessPage h2,#apiAccessPage h3 { margin:0; }
.report-period-controls { display:flex;gap:6px;min-width:0;align-items:center; }
.report-period-controls button { min-height:44px; }
#reportPeriodButton { white-space:normal;overflow-wrap:anywhere; }
.report-period-dialog .period-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.report-period-dialog .period-weeks { grid-template-columns:1fr; }
.report-period-dialog button[aria-pressed=true] { background:var(--teal);color:white; }
.period-range { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.period-shortcuts { display:flex;gap:8px;flex-wrap:wrap; }
.period-error { color:#b83240; }
@media(max-width:600px){.period-range{grid-template-columns:1fr}.report-period-controls{flex:1}#reportPeriodButton{flex:1;font-size:13px}.report-period-controls>button:not(#reportPeriodButton){padding:8px}.report-period-dialog .period-grid button{min-height:44px}}
#salesReportsPage.active { gap:12px; }
.workspace:has(#salesReportsPage.active) > .hero { padding:6px 0 10px;margin-bottom:12px; }
.workspace:has(#salesReportsPage.active) > .hero h1::before { content:'報表統計 / ';font-size:14px;font-weight:400;color:#536774; }
.report-toolbar { display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; }
#salesReportsPage .report-tabs,#salesReportsPage .report-tools { margin:0;gap:8px; }
#salesReportsPage .report-tabs button { background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;min-height:44px;padding:8px 16px; }
#salesReportsPage .report-tabs button[aria-selected=true] { border-bottom-color:var(--teal);color:var(--teal);font-weight:700; }
#salesReportsPage #reportStatus { display:flex;justify-content:space-between;gap:6px 20px;flex-wrap:wrap;font-size:12px;color:#536774;margin:0;line-height:1.6; }
.report-tools,.report-tabs { display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px; }
.report-tabs button[aria-selected=true] { background:var(--teal);color:white; }
.report-tools input { width:180px; }
.report-tools { align-items:end; }
#salesReportsPage > p:first-child { margin:0 0 16px; }
#salesReportsPage .report-tools label { margin:0; }
#salesReportsPage .report-chart h2 { font-size:18px;margin:0 0 8px; }
.report-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:16px 0;background:white;border-block:1px solid var(--line); }
.report-kpis article { min-width:0;overflow-wrap:anywhere;padding:0 18px;border-right:1px solid var(--line); }
.report-kpis article:last-child { border-right:0; }
.report-kpis strong { display:block;font-size:24px;margin:10px 0; }
.report-kpis small { display:block;color:#526873; }
.report-kpis small + small { margin-top:5px;font-size:12px; }
.report-kpis .report-up { color:#087f62; }
.report-kpis .report-down { color:#b83240; }
.report-chart { padding:12px 0; }
.report-chart-heading { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px; }
#salesReportsPage .report-chart-heading h2 { margin:0;font-size:18px; }
.report-chart-heading p { display:flex;gap:16px;margin:0;font-size:12px; }
.report-chart-heading span { display:flex;align-items:center;gap:6px; }
.report-chart-heading span::before { content:'';width:9px;height:9px;border-radius:50%;background:#00857b; }
.report-chart-heading .previous::before { background:#4285cf; }
.report-chart details { font-size:12px;color:#536774;margin-top:6px; }
.report-quality { font-size:13px;border-top:1px solid var(--line);padding-top:10px; }
.report-quality summary { cursor:pointer;color:#795c13;line-height:1.6; }
.report-chart canvas { display:block;width:100%;height:280px; }
.report-ranks { display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--line);padding:20px 0; }
.report-bar { margin:14px 0;overflow-wrap:anywhere; }
.report-bar div { display:flex;justify-content:space-between;gap:10px; }
.report-bar i { display:block;height:7px;background:#07847c;margin-top:7px;max-width:100%; }
.report-note { padding:12px;border-left:3px solid #be8900;background:#fff8dc;white-space:pre-line; }
.permission-dialog fieldset { margin:12px 0;border:1px solid var(--line);padding:12px; }
.permission-dialog .permission-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.permission-dialog .permission-grid label, .permission-dialog .api-scope-list label { display:flex;align-items:center;gap:8px;min-height:44px;margin:0; }
.api-scope-list { display:grid;gap:2px; }
.api-key-dialog > form { gap:0; }
.api-key-dialog .api-fields { display:grid;gap:16px;padding:16px; }
.api-key-dialog .api-fields > label { display:grid;gap:6px; }
.api-key-dialog .api-fields > label input, .api-key-dialog .api-fields > label select { width:100%;min-width:0; }
.api-key-dialog fieldset { min-width:0;margin:0; }
.permission-dialog footer { position:sticky;bottom:0;background:white;padding:14px;display:flex;gap:10px;border-top:1px solid var(--line); }
@media(max-width:600px){.report-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.report-kpis strong{font-size:21px}.report-ranks{grid-template-columns:1fr}.permission-dialog .permission-grid{grid-template-columns:1fr}.report-tabs{display:grid;grid-template-columns:repeat(4,1fr)}.report-tabs button{padding:10px 6px}.report-tools{align-items:flex-start}.report-chart canvas{height:240px}}
@media(max-width:600px){
  .report-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  #salesReportsPage .report-tools{align-items:center;display:flex}
  #salesReportsPage .report-tools label{flex:1;min-width:0}
  #salesReportsPage .report-tools input{width:100%;min-width:0}
  #salesReportsPage .report-tabs button{padding:8px 4px}
  .report-kpis{gap:16px 0}.report-kpis article{padding:0 12px}.report-kpis article:nth-child(2){border-right:0}
  .workspace:has(#salesReportsPage.active) > .hero h1::before{content:none}
  .workspace:has(#salesReportsPage.active) > .hero .account-menu{flex-basis:auto}
  .workspace:has(#salesReportsPage.active) > .hero .account-menu summary{max-width:110px;font-size:11px}
  .report-chart-heading{gap:8px;flex-wrap:wrap}
}