:root{
  --bg:var(--background-color,#f7f9fc);
  --card:var(--surface-color,#ffffff);
  --text:var(--default-color,#0f172a);
  --muted:var(--muted-color,#64748b);
  --line:var(--border-color,#e5e7eb);
  --brand:var(--accent-color,#0a8d73);
  --brand-ink:var(--accent-hover,#087a63);
  --ok:#16a34a;
  --warn:#b45309;
  --radius:16px;
  --brand-tint:color-mix(in srgb,var(--brand) 10%,#ffffff);
  --brand-ring:color-mix(in srgb,var(--brand) 20%,transparent);
}
*{box-sizing:border-box}
.wrap{margin:0 auto;padding:0 16px}
.page-title-div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
h1{font-size:clamp(22px,3.5vw,32px);margin:0}
figure {margin: 0 0 0rem;}
.pill{font-size:12px;color:var(--brand-ink);background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 25%,#ffffff);padding:4px 8px;border-radius:999px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pad{padding:18px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.controls .btn{border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.85em}
.btn.brand{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.btn.brand:hover{background:var(--brand-ink)}
.btn.minor{background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px}
thead th{font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:.03em;background:var(--bg)}
th,td{padding:8px 10px;border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:none}
input[type=text],input[type=number],select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
input[type=text]::placeholder,input[type=number]::placeholder{color:#94a3b8}
input[type=number]{appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.chk,.del{align-items:center;justify-content:center}
.del button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.del button:hover{border-color:var(--brand);color:var(--brand-ink)}
.add-row{width:100%;margin-top:10px}
.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.stat{background:var(--brand-tint);border:1px solid var(--line);border-radius:12px;padding:12px}
.stat .k{font-size:12px;color:var(--muted);text-transform:uppercase}
.stat .v{font-weight:700;font-size:20px}
.term-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1px solid color-mix(in srgb,var(--brand) 20%,#ffffff);background:var(--brand-tint);border-radius:999px;padding:8px 12px;font-size:13px}
.chip b{font-weight:700}
.rownote{font-size:12.5px;color:var(--muted);margin-top:10px}
footer{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.help{font-size:13px;color:var(--muted)}
.right{margin-left:auto;display:flex;gap:8px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.global-scale{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.global-scale label{font-size:.85rem;color:#475569;margin-right:.15rem}
.global-scale select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;line-height:1.2;height:2.1rem;background:var(--card);color:var(--text)}
.global-scale select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
td[data-h=Grade] .row-override{display:flex;align-items:center;gap:.35rem;margin-bottom:.25rem}
td[data-h=Grade] .small{color:#64748b;font-size:12px}
.muted{color:#64748b;font-weight:400;font-size:.75em}
#countrySel{width:6ch;min-width:6rem;text-align-last:center}
#scaleSel{width:min(48vw,14rem);max-width:14rem}



/* uploader / controls */
.controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.controls .right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.btn.icon-only{padding:.35rem .5rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line,#e3e6ea);background:#fff;border-radius:.5rem}
.btn-upload i{font-size:1.6rem}
.btn-upload-labeled{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .85rem;border-radius:999px;font-weight:600}
.upload-count{font-size:.85rem;color:#6c757d;min-width:1.5rem;text-align:right}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
.btn-upload:hover{background:#f8f9fa}
.uploader-bar{display:none}

/* compact info card */
.ci-card{border:1px solid var(--line,#e5e7eb);background:var(--bg,#fff);border-radius:14px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.ci-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ci-title{font-weight:700;font-size:1rem;letter-spacing:.2px}
.ci-sub{color:var(--text-muted,#6b7280);font-size:.9rem;margin-top:2px}
.ci-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ci-btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:8px 12px;font-weight:600;text-decoration:none;border:1px solid var(--line,#e5e7eb)}
.ci-btn.primary{background:var(--brand,#007A33);color:#fff;border-color:transparent}
.ci-btn.ghost{background:#fff;color:var(--text,#111827)}
.ci-note{margin-top:10px}
.muted{color:var(--text-muted,#6b7280)}
.small{font-size:.9rem}
.ci-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ci-pill{border:1px dashed var(--line,#e5e7eb);padding:4px 8px;border-radius:999px;font-size:.8rem;color:var(--text-muted,#6b7280)}

/* mobile */
@media (max-width:780px){
  .wrap{margin:0 auto;padding:0 12px}
  .page-title-div{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:10px}
  .controls{gap:6px;justify-content:space-between}
  .controls .btn{font-size:14px}
  .right{margin-left:0;width:100%;justify-content:space-between;margin-top:8px}
  .summary{grid-template-columns:1fr;gap:8px}
  .stat{padding:10px}
  .stat .v{font-size:18px}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid var(--line);padding:12px 8px;position:relative}
  tbody td,tbody th{border:0;padding:0}
  tbody td[data-h]:before{content:attr(data-h);display:block;font-size:11px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
  .del{grid-column:1/-1;justify-content:flex-end;margin-top:8px}
  input[type=text],input[type=number],select{padding:12px;font-size:16px}
  .term-summary{gap:6px}
  .chip{font-size:12px;padding:6px 10px}
  footer{flex-direction:column;gap:6px}
  .badge{align-self:flex-start}
  .card.pad{padding:14px}
  .rownote{font-size:12px;line-height:1.4}

  /* responsive control grid */
  .controls{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"add clear""sample sample""scale scale""act act";gap:8px;align-items:stretch}
  #addRow{grid-area:add}
  #clearAll{grid-area:clear}
  #sample{grid-area:sample}
  .global-scale{grid-area:scale}
  .right{grid-area:act}
  .controls .btn{font-size:15px;border-radius:12px;width:100%}
  .right{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  #uploadBtn{grid-column:1/-1}

  /* selects */
  .global-scale{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
  .global-scale label{font-size:.9rem;margin:0}
  #countrySel,#scaleSel{width:100%;max-width:100%;min-width:0;padding:6px 10px;font-size:16px}

  /* convert table to cards */
  table{margin-top:8px;border-collapse:separate}
  tbody tr{display:block;padding:12px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-top:10px}
  tbody td{display:flex;align-items:center;gap:10px;padding:2px 0;border:0}
  tbody td:last-child{border-bottom:0}
  tbody td[data-h]::before{content:attr(data-h);flex:0 0 34%;min-width:92px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
  tbody td>*:not(.row-override){flex:1 1 auto}
  td[data-h=Grade] .small{font-size:12px;color:#64748b}
  td[data-h="Honors/AP"]{align-items:center}
  td[data-h="Honors/AP"] input[type=checkbox]{width:20px;height:20px}
  td[data-h=Remove]{justify-content:flex-end}
  td[data-h=Remove] .del button{padding:10px 14px;border-radius:10px;font-weight:600}

  /* thumb-friendly inputs */
  input[type=text],input[type=number],select{padding:8px;font-size:16px}
}
@media (max-width:640px){.global-scale{gap:.35rem}}
.topbar.dark-background {background: #0b1220;}
.hint{display:inline-flex; align-items:center; justify-content:center;width:1.25rem; height:1.25rem; margin-left:6px;border:1px solid var(--line, #e5e7eb); border-radius:999px;background:var(--card,#fff);color:var(--muted,#64748b);font:600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;cursor:help; padding:0;}
.hint:hover{ color:var(--text,#0f172a); border-color:var(--muted,#64748b);}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}


.hero {
    position: relative;
    isolation: isolate
}

    .hero::before {
        content: "";
        position: absolute;
        inset: -120px -120px auto -120px;
        z-index: -1;
        height: 70%;
        background: radial-gradient(1200px 500px at 10% -10%, rgba(20,184,166,.15), transparent 60%), radial-gradient(900px 400px at 90% -10%, rgba(10,141,115,.15), transparent 60%)
    }

.hero-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: center
}

.hero h1 {
    font-size: clamp(1.7rem,3.2vw + 1rem,3.2rem);
    line-height: 1.08;
    margin: .25rem 0 .6rem
}

.stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .8rem;
    margin-top: 1rem
}

.stat {
    background: var(--bg-soft);
    padding: .8rem;
    border-radius: 12px;
    text-align: center
}

    .stat b {
        font-size: 1.2rem
    }


.section {
    padding: 26px 0
}

    .section h2 {
        font-size: clamp(1.4rem, 1.2rem + 1.6vw, 2.2rem);
        margin: 0 0 .6rem
    }

    .section .lead {
        color: var(--muted)
    }

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .6rem 0
}


.cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}