:root {
    --navy-900: #0d1520;
    --navy-800: #131d2b;
    --navy-700: #1d2b40;
    --red-600:  #c2410c;
    --red-700:  #9a330a;
    --orange:   #f28c28;
    --blue:     #3b82f6;
    --green:    #22a55b;

    --bg:        #eef1f6;
    --surface:   #ffffff;
    --text:      #18202f;
    --text-soft: #5b6578;
    --border:    #d5dbe6;
    --focus:     rgba(194, 65, 12, .25);

    --radius: 10px;
    color-scheme: light;
    --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    border-left: 4px solid;
}
.alert--error { color: #7c2a06; background: #fdece4; border-color: var(--red-600); }
.alert--info  { color: #123e86; background: #e6efff; border-color: var(--blue); }

.alert--success { color: #14532d; background: #e3f6ea; border-color: var(--green); }
.alert--warning { color: #7a4a05; background: #fff3dc; border-color: var(--orange); }

.link { color: var(--red-600); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }
.link--button { padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }

[hidden] { display: none !important; }

.grade-img {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    vertical-align: -3px;
}
.grade-img--lg { width: 22px; height: 22px; }
.grade-ico {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 11px;
    background: #20252d;
    border-radius: 1px;
}
.grade-ico::after { content: ""; position: absolute; inset: 3px 2px; }
.grade-ico--off::after { border-top: 1.5px solid #fff; border-bottom: 1.5px solid #fff; }
.grade-ico--sof { background: #b8860b; }
.grade-ico--sof::after { border-top: 1.5px solid #20252d; border-bottom: 1.5px solid #20252d; }
.grade-ico--cap::after { background: repeating-linear-gradient(115deg, #fff 0 1.5px, transparent 1.5px 3.5px); }
.grade-ico--sap::after { inset: 2px 5px; background: #c2410c; transform: skewX(-15deg); }
.grade-ico--sssm { background: #b91c1c; }
.grade-ico--pats { background: #64748b; }