:root { color-scheme: light; --ink: #263332; --muted: #5b6a68; --line: #c8e1df; --paper: #f1f7f6; --panel: #fff; --brand: #009688; --brand-dark: #00695c; --danger: #b42318; --danger-bg: #fff1f0; --ok: #067647; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); } a { color: var(--brand-dark); } a:hover { color: var(--brand); } button, input, select { font: inherit; } button { border: 0; border-radius: .55rem; padding: .65rem 1rem; background: #e0f2f1; color: var(--ink); cursor: pointer; } button:hover { background: #c8e6e3; } button.primary { background: var(--brand); color: white; } button.primary:hover { background: var(--brand-dark); } button.danger { background: var(--danger); color: white; } button.small { padding: .4rem .7rem; font-size: .9rem; } button:disabled { opacity: .5; cursor: not-allowed; }
.topbar { background: var(--brand); color: white; padding: 1.25rem max(1rem, calc((100vw - 1180px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .topbar h1 { margin: .1rem 0 0; font-size: 1.35rem; } .top-actions { display: flex; align-items: center; gap: .8rem; font-size: .9rem; } .top-actions button { background: var(--brand-dark); color: white; }
main { max-width: 1180px; margin: 1.5rem auto 4rem; padding: 0 1rem; display: grid; gap: 1rem; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: .85rem; padding: 1.1rem; box-shadow: 0 2px 8px rgba(0,105,92,0.06); } .panel-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .7rem; } .danger-panel { border-color: #f4b4b0; background: var(--danger-bg); } .eyebrow { margin: 0; color: #7f938f; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } .muted { color: var(--muted); } .error, .danger-text { color: var(--danger); } .status { font-weight: 700; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .course-card { border: 1px solid var(--line); border-radius: .7rem; padding: 1rem; } .course-card h2 { margin: .2rem 0 .5rem; font-size: 1.2rem; } .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0; } lesson-list { display: block; overflow-x: auto; } lesson-list h3 { font-size: 1rem; margin: 1rem 0 .4rem; } table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { border-top: 1px solid var(--line); padding: .55rem .4rem; text-align: left; white-space: nowrap; } .ok { color: var(--ok); margin-right: .5rem; } .missing { color: var(--danger); margin-right: .5rem; }
.link-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: .7rem; }
.course-tools { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; } .course-tools > form > textarea { min-height: 4rem; width: 100%; font-family: monospace; font-size: .8rem; } .course-tools code { background: #e0f2f1; padding: .1rem .3rem; border-radius: .3rem; overflow-wrap: anywhere; } .course-tools .token-box { padding: .6rem; border-radius: .5rem; background: #e0f2f1; overflow-wrap: anywhere; font-family: monospace; } .course-tools h3 { margin: 0; font-size: 1rem; } .course-tools td { white-space: normal; vertical-align: top; } .course-tools table textarea { width: 12rem; min-height: 2.5rem; font-size: .85rem; } label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; } input, select { min-height: 2.5rem; border: 1px solid var(--line); border-radius: .5rem; padding: .45rem .6rem; background: white; } input:focus, select:focus { outline: none; border-color: var(--brand); } .generated-link { grid-column: 1 / -1; margin-top: .5rem; padding: .7rem; border-radius: .5rem; background: #e0f2f1; overflow-wrap: anywhere; } .generated-link a { display: block; color: var(--brand-dark); } .generated-link small { display: block; color: var(--muted); margin-top: .3rem; }
.user-create { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .7rem; align-items: end; margin-bottom: 1rem; } .totp-output { margin-top: .8rem; display: grid; gap: .6rem; } .totp-output textarea { min-height: 5rem; width: 100%; } .totp-output code { overflow-wrap: anywhere; }
.login-card { width: min(430px, calc(100vw - 2rem)); margin: 12vh auto; background: white; border: 1px solid var(--line); border-radius: .9rem; padding: 1.5rem; display: grid; gap: 1rem; box-shadow: 0 8px 30px rgba(0,105,92,0.12); } .login-card h1 { margin: 0; } .login-card button { justify-self: start; background: var(--brand); color: white; } .login-card button:hover { background: var(--brand-dark); } @media (max-width: 760px) { .topbar { align-items: flex-start; flex-direction: column; } .link-form { grid-template-columns: 1fr; } .generated-link { grid-column: auto; } }
.tabs { display: flex; gap: .3rem; background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 max(1rem, calc((100vw - 1180px)/2)); overflow-x: auto; } .tabs button { background: none; border-radius: 0; padding: .8rem 1rem; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; white-space: nowrap; } .tabs button:hover { background: none; color: var(--ink); } .tabs button.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.subtabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; } .subtabs button { background: none; border-radius: .5rem .5rem 0 0; padding: .5rem .9rem; color: var(--muted); font-weight: 600; font-size: .9rem; } .subtabs button:hover { background: #e0f2f1; } .subtabs button.active { color: var(--brand-dark); background: #e0f2f1; }
.back-link { background: none; padding: 0; color: var(--brand-dark); font-weight: 600; margin-bottom: .8rem; display: inline-flex; } .back-link:hover { background: none; color: var(--brand); text-decoration: underline; }
.course-grid { align-items: start; }