:root{--page: #f7f6f2;--card: #ffffff;--ink: #2d2d2a;--ink2: #6f6e68;--ink3: #a3a29a;--line: #e6e4dd;--line2: #d3d1c7;--side: #1e2b33;--side2: #27363f;--brand: #0e7c6b;--brand-2: #4dd9b4;--blue-bg: #e8f1fb;--blue: #1a63ab;--blue-fill: #2f7fd1;--amber-bg: #faeeda;--amber: #8a540e;--green-bg: #eaf3de;--green: #3f7014;--red-bg: #fbe9e7;--red: #a63a2c;--t-xl: 20px;--t-lg: 15px;--t-md: 13.5px;--t-sm: 12.5px;--t-xs: 11.5px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--r-sm: 6px;--r-md: 8px;--r-lg: 14px;--sh-1: 0 1px 2px rgba(0,0,0,.04);--sh-2: 0 6px 20px rgba(0,0,0,.12);--font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--page);color:var(--ink);font-size:var(--t-md);line-height:1.6}button{font:inherit;cursor:pointer}input,textarea,select{font:inherit}.app{display:grid;grid-template-columns:200px 1fr;min-height:100vh}.side{background:var(--side);color:#fff;padding:var(--s-4) 0}.side h1{font-size:var(--t-lg);padding:0 var(--s-4) var(--s-4);color:var(--brand-2)}.side nav{display:flex;flex-direction:column}.side nav button{background:none;border:0;color:#cfd6da;text-align:left;padding:var(--s-3) var(--s-4);font-size:var(--t-md)}.side nav button.on{background:var(--side2);color:#fff;border-left:3px solid var(--brand-2)}.main{padding:var(--s-5);overflow:auto}.main h2{font-size:var(--t-xl);margin-bottom:var(--s-2)}.hint{color:var(--ink2);font-size:var(--t-sm);margin-bottom:var(--s-4)}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-4);margin-bottom:var(--s-4)}table{width:100%;border-collapse:collapse;font-size:var(--t-md)}th,td{text-align:left;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line)}th{color:var(--ink2);font-size:var(--t-sm);font-weight:600}.grade{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:var(--r-sm);font-size:var(--t-xs);font-weight:700}.grade.A{background:var(--green-bg);color:var(--green)}.grade.B{background:var(--blue-bg);color:var(--blue)}.grade.C{background:var(--line);color:var(--ink2)}.tag{display:inline-block;background:var(--line);color:var(--ink2);border-radius:var(--r-sm);padding:1px 6px;font-size:var(--t-xs);margin-right:var(--s-1)}.btn{background:var(--brand);color:#fff;border:0;border-radius:var(--r-md);padding:var(--s-2) var(--s-4);font-size:var(--t-md)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:none;color:var(--brand);border:1px solid var(--line2)}textarea,input[type=text]{width:100%;border:1px solid var(--line2);border-radius:var(--r-md);padding:var(--s-2) var(--s-3)}textarea{min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm)}.err{background:var(--red-bg);color:var(--red);padding:var(--s-2) var(--s-3);border-radius:var(--r-md);font-size:var(--t-sm);margin-bottom:var(--s-3)}.ok{background:var(--green-bg);color:var(--green);padding:var(--s-2) var(--s-3);border-radius:var(--r-md);font-size:var(--t-sm);margin-bottom:var(--s-3)}.row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}.muted{color:var(--ink3);font-size:var(--t-sm)}