:root {
  --ink: #111827; --ink-soft: #4b5563; --paper: #f4f7fb; --card: #fff;
  --line: #d8e1ee; --line-soft: #edf1f7; --blue: #1663d8; --blue-dark: #10459b;
  --blue-soft: #e8f0fe; --cyan: #0f9b9b; --red: #b42318; --red-soft: #fff0ee;
  --green: #067647; --green-soft: #e9f8f0; --amber: #92400e; --amber-soft: #fff4dd;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(135deg, rgba(22,99,216,.08), transparent 32%), var(--paper); color: var(--ink); font: 15px/1.55 "Noto Sans SC","PingFang SC",sans-serif; }
h1,h2,strong,.kpi-value { font-family: Outfit,"Noto Sans SC",sans-serif; }
button { cursor: pointer; } input,select,button { font: inherit; }
:is(a,button,input,select,[tabindex]):focus-visible { outline: 3px solid rgba(22,99,216,.32); outline-offset: 2px; }
.hidden { display: none !important; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(420px,100%); padding: 30px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(17,24,39,.1); }
.login-card h1 { margin: 18px 0 5px; font-size: 30px; } .login-card > p { margin: 0 0 24px; color: var(--ink-soft); }
.brand { display: flex; align-items: center; gap: 10px; } .brand span { width: 10px; height: 28px; border-radius: 3px; background: linear-gradient(180deg,var(--blue),var(--cyan)); } .brand.dark { color: #fff; } .brand.dark span { background: #fff; }
label { display: grid; gap: 5px; color: #374151; font-size: 13px; font-weight: 650; }
input,select { min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.login-card button { width: 100%; min-height: 44px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; }
.form-message { min-height: 22px; margin: 12px 0 0; color: var(--ink-soft); } .form-message.error { color: var(--red); }
.app-shell { display: grid; grid-template-columns: 220px minmax(0,1fr); min-height: 100vh; max-width: 1550px; margin: 0 auto; }
.side-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 24px 15px; background: #10233d; color: #dbe8fb; }
.side-rail nav { display: grid; gap: 5px; } .side-rail a { padding: 9px 10px; border-radius: 7px; color: #cbdffc; font-weight: 650; text-decoration: none; } .side-rail a:hover { background: rgba(255,255,255,.1); color: #fff; }
.runner-card { padding: 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; display: grid; gap: 3px; font-size: 13px; } .runner-card span { color: #a8c6ec; }
.logout-button { margin-top: auto; min-height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; background: transparent; color: #fff; font-weight: 650; }
main { min-width: 0; padding: 28px clamp(18px,3vw,44px) 70px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
.topbar h1 { margin: 0; font-size: clamp(27px,4vw,41px); } .period-label { margin: 0 0 3px; color: var(--ink-soft); font-size: 13px; }
.ghost-button { min-height: 38px; padding: 7px 15px; border: 1px solid var(--blue); border-radius: 7px; background: #fff; color: var(--blue); font-weight: 700; } .ghost-button:hover { background: var(--blue-soft); }
section { margin-bottom: 34px; scroll-margin-top: 20px; } .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 20px; } .section-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.query-grid { display: grid; grid-template-columns: repeat(5,minmax(150px,1fr)); gap: 11px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(17,24,39,.06); }
.query-actions { display: flex; align-items: end; gap: 7px; grid-column: span 2; }
.query-actions button { min-height: 40px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 700; }
.query-actions button:first-child { border-color: var(--blue); background: var(--blue); color: #fff; }
.query-actions button:first-child:hover { background: var(--blue-dark); }
.kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; } .kpi-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.kpi { min-height: 106px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; align-content: space-between; box-shadow: 0 10px 30px rgba(17,24,39,.05); }
.kpi span { color: var(--ink-soft); font-size: 12px; } .kpi-value { font-size: 24px; line-height: 1.15; }
.note-result-list { display: grid; gap: 12px; }
.note-card { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(17,24,39,.05); }
.note-card header { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-bottom: 11px; }
.note-card header a { color: var(--blue); font-family: ui-monospace,Menlo,monospace; font-size: 14px; font-weight: 700; text-decoration: none; } .note-card header a:hover { text-decoration: underline; }
.note-card header > div:first-child { display: grid; gap: 3px; } .note-card header span { color: var(--ink-soft); font-size: 13px; }
.recommendation { display: grid; gap: 2px; max-width: 360px; padding: 9px 12px; border-left: 4px solid var(--blue); border-radius: 7px; background: var(--blue-soft); } .recommendation span { color: var(--ink-soft); font-size: 12px; }
.tag-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tag.good { color: var(--green); background: var(--green-soft); } .tag.warn { color: var(--amber); background: var(--amber-soft); } .tag.low,.tag.neutral { color: #475467; background: #eef2f7; }
.comparison { margin: 0 0 11px; padding: 9px 11px; border-left: 3px solid var(--cyan); border-radius: 6px; background: #ecfbfb; color: #31596b; font-size: 13px; }
.placement-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.placement-card { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fafcff; }
.placement-card > div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .placement-card > div span { color: var(--ink-soft); }
.placement-card dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; } .placement-card dl div { display: grid; gap: 1px; } .placement-card dt { color: var(--ink-soft); font-size: 11px; } .placement-card dd { margin: 0; font-size: 13px; font-weight: 700; }
.data-card { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.data-card > div { display: grid; gap: 3px; padding: 11px; border-radius: 8px; background: #f8fafc; } .data-card span { color: var(--ink-soft); font-size: 12px; }
.empty-state { padding: 32px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; color: var(--ink-soft); text-align: center; }
@media (max-width: 1200px) { .query-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .placement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .data-card { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 960px) { .app-shell { grid-template-columns: 1fr; } .side-rail { position: static; height: auto; } .side-rail nav { grid-template-columns: repeat(3,minmax(0,1fr)); } .runner-card { display: none; } .query-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .query-actions { grid-column: span 2; } }
@media (max-width: 620px) { body { font-size: 14px; } .side-rail nav { grid-template-columns: 1fr 1fr; } .query-grid,.kpi-grid,.placement-grid,.data-card { grid-template-columns: 1fr; } .query-actions { grid-template-columns: 1fr; } }
.goal-list { display: grid; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.goal-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.goal-row strong { color: var(--blue); } .goal-row span { color: var(--ink-soft); }
.archive-cell { grid-column: span 3; border-left: 3px solid var(--cyan); }
.archive-cell a { color: var(--blue); font-weight: 700; text-decoration: none; }
.archive-cell a:hover { text-decoration: underline; }
.archive-cell > span:last-child { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 1200px) { .archive-cell { grid-column: span 3; } }
@media (max-width: 960px) { .archive-cell { grid-column: span 1; } }