/* Design A4 — bento grid */
.A4 { min-height: 100vh; background: var(--surface-2); color: var(--text); }

.A4-top { display: flex; align-items: center; gap: 20px; padding: 16px 28px; position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.A4-brand { display: flex; align-items: center; gap: 11px; }
.A4-bn { font-weight: 700; font-size: 15px; line-height: 1.2; }
.A4-bn small { display: block; font-family: var(--display); font-size: 9px; letter-spacing: .28em; color: var(--text-soft); margin-top: 2px; }
.A4-search { margin-left: 12px; flex: 1; max-width: 380px; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; color: var(--text-soft); }
.A4-search input { border: none; background: none; outline: none; width: 100%; font-size: 13px; color: var(--text); }
.A4-tr { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.A4-ti { position: relative; color: var(--text-soft); padding: 8px; border-radius: 10px; } .A4-ti:hover { background: var(--surface); color: var(--text); }
.A4-ti.dot::after { content: ""; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.A4-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(96px, auto); gap: 16px; padding: 22px 28px 96px; grid-auto-flow: dense; }
.A4-tile { background: var(--page-bg); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(20,30,50,.05); display: flex; flex-direction: column; }
.A4-th { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.A4-th h2 { font-size: 14.5px; font-weight: 700; }
.A4-th a, .A4-th span { font-size: 12px; color: var(--text-soft); }
.A4-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; }
.A4-delta.up { color: #1f9d57; }
.A4-badge { background: var(--accent); color: var(--brand-ink); font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; font-style: normal; }

/* spans */
.A4-rev { grid-column: span 2; grid-row: span 2; }
.A4-goal { grid-row: span 2; align-items: center; text-align: center; }
.A4-tasks { grid-row: span 2; }
.A4-act { grid-column: span 2; grid-row: span 2; }
.A4-quick { grid-column: span 2; }
.A4-inq { grid-column: span 2; }

.A4-revv { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.A4-revv small { display: block; font-size: 12px; font-weight: 400; color: var(--text-soft); margin-top: 3px; }
.A4-rev .mini-bars { flex: 1; min-height: 90px; }
.A4-months { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--text-soft); }

/* KPI tiles — colour rhythm */
.A4-kpi { justify-content: center; gap: 6px; }
.A4-kl { font-size: 12.5px; color: var(--text-soft); }
.A4-kv { font-size: 26px; font-weight: 700; }
.A4-kd { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.A4-kd.up { color: #1f9d57; } .A4-kd.dn { color: #d1493f; }
.A4-kpi.k0 { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.A4-kpi.k0 .A4-kl { color: rgba(255,255,255,.72); } .A4-kpi.k0 .A4-kd.up { color: var(--accent-2); }
.A4-kpi.k3 { background: var(--accent-soft); border-color: transparent; }

.A4-goal { justify-content: center; }
.A4-goalt { font-size: 12px; color: var(--text-soft); margin-top: 14px; line-height: 1.7; }
.A4-goalt b { display: block; color: var(--brand); font-size: 15px; margin-top: 2px; }

.A4-tasks ul, .A4-act ul, .A4-inq ul { list-style: none; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.A4-tasks li, .A4-act li, .A4-inq li { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.A4-tasks li:last-child, .A4-act li:last-child, .A4-inq li:last-child { border-bottom: none; }
.A4-li { flex: 1; min-width: 0; line-height: 1.35; }
.A4-li b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.A4-li span { font-size: 10.5px; color: var(--text-soft); }
.A4-pri { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
.A4-pri.p高 { background: rgba(209,73,63,.13); color: #c33; }
.A4-pri.p中 { background: var(--accent-soft); color: #9a6a12; }
.A4-pri.p低 { background: var(--surface-2); color: var(--text-soft); }
.A4-qd { font-family: var(--mono); font-size: 11.5px; color: var(--text-soft); flex: none; }

.A4-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.A4-qa button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); transition: .18s; }
.A4-qa button span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); }
.A4-qa button:hover { background: var(--brand-soft); border-color: var(--brand-line); transform: translateY(-2px); }

@media (max-width: 980px) {
  .A4-grid { grid-template-columns: repeat(2, 1fr); }
  .A4-rev, .A4-act, .A4-quick, .A4-inq { grid-column: span 2; }
  .A4-goal, .A4-tasks { grid-row: span 1; }
}
@media (max-width: 640px) {
  .A4-grid { grid-template-columns: 1fr; padding: 16px 16px 92px; }
  .A4-rev, .A4-act, .A4-quick, .A4-inq { grid-column: span 1; }
  .A4-top { padding: 12px 16px; } .A4-search { display: none; }
  .A4-qa { grid-template-columns: 1fr 1fr; }
}