:root { --ink:#2c2842; --muted:#7b7792; --lav:#8d79bd; --lav-dark:#6e5a9b; --lav-light:#f1edfb; --mint:#dff3e7; --peach:#fff0e7; --line:#ebe8f2; --paper:#fff; --bg:#f7f6fb; --danger:#bd5a62; --shadow:0 20px 55px rgba(63,45,105,.08); font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 15% -10%, #eee8ff 0, transparent 33%),var(--bg); color:var(--ink); } button,input,select { font:inherit; } button { cursor:pointer; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:16px; top:12px; z-index:20; background:#fff; padding:8px 12px; border-radius:8px; }
.site-shell { min-height:100vh; } .topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid rgba(141,121,189,.12); background:rgba(255,255,255,.76); backdrop-filter:blur(16px); position:sticky; top:0; z-index:10; } .brand { display:flex; align-items:center; gap:12px; border:0; padding:0; color:inherit; background:transparent; text-align:left; cursor:pointer; } .brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(145deg,#a995d6,#765eaa); font-weight:800; box-shadow:0 8px 18px rgba(113,86,167,.25); } .brand strong,.brand span { display:block; } .brand strong { font-size:16px; } .brand span { color:var(--muted); font-size:12px; margin-top:3px; } .top-actions { display:flex; align-items:center; gap:10px; } .demo-badge { font-size:12px; color:#6f5c9f; background:var(--lav-light); padding:8px 12px; border-radius:999px; }
.btn { border:0; border-radius:10px; padding:10px 14px; color:var(--ink); background:#fff; transition:transform .15s,box-shadow .15s,background .15s; } .btn:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(71,52,115,.1); } .btn:focus-visible,.tab:focus-visible,.role-pill:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #cabcf0; outline-offset:2px; } .btn.primary { color:#fff; background:linear-gradient(135deg,var(--lav),var(--lav-dark)); } .btn.ghost { border:1px solid var(--line); background:rgba(255,255,255,.7); } .btn.danger { color:var(--danger); } .btn.small { padding:7px 10px; font-size:12px; } .login-btn { background:var(--ink); color:#fff; }
.demo-banner { margin:22px auto 0; width:min(1220px,92vw); display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid #e2d9f5; background:#fbf9ff; border-radius:16px; color:#625481; } .demo-banner > span { color:#ac90df; font-size:20px; } .demo-banner strong,.demo-banner p { display:block; } .demo-banner strong { font-size:13px; } .demo-banner p { margin:3px 0 0; color:#8b829f; font-size:12px; } .demo-banner button { margin-left:auto; border:0; background:none; color:#a49bb7; font-size:22px; }
.app-layout { width:min(1220px,92vw); margin:18px auto 50px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:24px; } .sidebar { align-self:start; position:sticky; top:96px; } .class-card { padding:19px; border-radius:20px; color:#fff; background:linear-gradient(150deg,#7563a1,#4c456a); box-shadow:var(--shadow); } .class-card strong { display:block; font-size:28px; margin:8px 0 5px; } .class-card > span:not(.eyebrow) { color:#ddd7ee; font-size:12px; } .class-lock { margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); font-size:12px; color:#ddd7ee; } .eyebrow { color:var(--lav); font-size:11px; letter-spacing:.08em; font-weight:800; text-transform:uppercase; } .class-card .eyebrow { color:#d7ccef; } .role-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:16px 0 12px; } .role-strip .eyebrow { width:100%; } .role-pill { border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 11px; color:var(--muted); font-size:12px; } .role-pill.selected { color:var(--lav-dark); border-color:#c9bce8; background:var(--lav-light); font-weight:700; } .tabs { display:grid; gap:5px; } .tab { padding:11px 13px; text-align:left; border:0; border-radius:11px; color:var(--muted); background:transparent; } .tab:hover { background:#f0edf7; } .tab.active { color:var(--lav-dark); background:#eee9fa; font-weight:800; } .sidebar-footer { margin-top:35px; padding:14px; border-top:1px solid var(--line); color:#9993aa; font-size:11px; line-height:1.6; } .sidebar-footer button { display:block; border:0; padding:0; margin-top:7px; color:var(--lav-dark); background:none; font-size:11px; }
.main-panel { min-width:0; } .date-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; } .date-navigation { display:flex; align-items:center; gap:7px; } .date-title { border:0; background:none; color:var(--ink); font-weight:800; font-size:16px; } .icon-btn { width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:10px; font-size:25px; line-height:1; } .date-input { width:0; height:0; opacity:0; position:absolute; } .content-section { padding:27px; border:1px solid rgba(141,121,189,.12); background:rgba(255,255,255,.83); border-radius:23px; box-shadow:var(--shadow); } .section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:22px; } .section-heading h2 { margin:7px 0 4px; font-size:25px; letter-spacing:-.03em; } .section-heading p { margin:0; color:var(--muted); font-size:13px; } .section-actions { display:flex; gap:8px; flex-wrap:wrap; } .status-line { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; margin:0 0 15px; } .dot { width:7px; height:7px; border-radius:50%; display:inline-block; } .dot.draft { background:#e5a45f; } .dot.live { background:#65b48b; } .updated { margin-left:auto; color:#aaa3b8; }
.assignment-list { display:grid; gap:10px; } .assignment-card { border:1px solid var(--line); border-radius:15px; background:#fff; } .published-card { padding:17px 18px; } .assignment-kicker { color:var(--lav-dark); font-size:12px; font-weight:800; } .assignment-title { margin-top:6px; font-size:17px; font-weight:800; white-space:pre-wrap; } .assignment-range { color:#6b647e; font-size:13px; margin-top:5px; } .assignment-note { margin:9px 0 0; padding-top:9px; border-top:1px dashed var(--line); color:var(--muted); font-size:12px; } .editor-card { display:grid; grid-template-columns:110px 1.1fr 1fr 1fr auto; align-items:end; gap:10px; padding:13px; transition:border-color .15s,box-shadow .15s,opacity .15s; } .editor-card.dragging { opacity:.55; } .editor-card.drag-over { border-color:#a995d6; box-shadow:0 0 0 3px #eee8fa; } .editor-card label,.student-picker label { display:grid; gap:6px; color:#837b95; font-size:11px; font-weight:700; } .editor-card input,.editor-card textarea,.student-picker select { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 10px; color:var(--ink); background:#fcfbff; font-size:13px; } .editor-card textarea { min-height:74px; resize:vertical; line-height:1.6; font-family:inherit; } .freeform-card { grid-template-columns:110px 1fr auto; align-items:start; } .freeform-field { min-width:0; } .drag-mark { width:42px; min-height:42px; border:1px dashed #d8d0e8; border-radius:10px; color:#9686b8; background:#faf8ff; font-size:20px; line-height:1; align-self:center; cursor:grab; touch-action:none; } .drag-mark:hover { color:var(--lav-dark); border-color:#bba9df; background:#f4efff; } .drag-mark:active { cursor:grabbing; } .row-actions { display:flex; gap:4px; align-items:center; } .row-actions .btn { padding:7px 8px; font-size:11px; } .publish-bar { display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); margin-top:20px; padding-top:18px; } .publish-hint { color:var(--muted); font-size:12px; margin-left:auto; }
.empty-state { text-align:center; padding:52px 20px; border:1px dashed #dcd6ea; border-radius:16px; color:var(--muted); } .empty-icon { display:block; color:#b29bdf; font-size:29px; margin-bottom:9px; } .empty-state strong { display:block; color:var(--ink); font-size:15px; } .empty-state p { margin:6px 0 0; font-size:12px; } .notice-card { display:flex; gap:12px; align-items:flex-start; margin-top:15px; padding:14px 16px; border-radius:13px; background:#fff6eb; color:#876b4d; } .notice-card span { padding:3px 7px; background:#f8dbb5; border-radius:999px; font-size:11px; } .notice-card p { margin:2px 0; font-size:13px; }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(100px,1fr)); gap:8px; overflow:auto; padding-bottom:4px; } .day-card { min-height:148px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; cursor:pointer; } .day-card.selected { border-color:#ad9bd5; box-shadow:inset 0 0 0 2px #eee8fa; } .day-card-head { display:flex; justify-content:space-between; margin-bottom:12px; } .day-card-head strong { font-size:15px; } .day-card-head span { color:var(--muted); font-size:11px; } .mini-assignment { margin-top:7px; color:#615b70; font-size:11px; line-height:1.4; } .mini-assignment b { color:var(--lav-dark); margin-right:4px; } .day-empty { margin-top:25px; color:#b4afbd; font-size:11px; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; } .calendar-weekdays { color:#aaa2b7; font-size:11px; text-align:center; margin-bottom:6px; } .calendar-day { min-height:92px; padding:9px; border:1px solid var(--line); border-radius:13px; background:#fff; text-align:left; } .calendar-day.selected { border:2px solid #a18acb; padding:8px; } .calendar-day.muted { opacity:.4; } .calendar-day strong { display:block; margin-bottom:7px; } .calendar-dot { display:block; color:var(--lav-dark); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .calendar-more { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.contact-book { display:flex; direction:rtl; font-size:calc(var(--projection-font-size,20px) * 1.15); gap:var(--contact-column-gap,.35em); min-height:280px; padding:20px; border:1px solid #dfd6c2; border-radius:12px; background:#fffdf4; overflow:auto; } .contact-date,.contact-item { min-width:125px; writing-mode:vertical-rl; direction:ltr; text-orientation:mixed; border-left:1px solid #e5decf; padding:0 20px; line-height:1; letter-spacing:.07em; } .contact-date { min-width:108px; font-weight:800; color:#675f4d; } .contact-item small { color:#a69c88; font-size:.66em; } .contact-item strong { color:#716295; } .contact-item span { font-size:1.08em; } .contact-item em { color:#7e755f; font-style:normal; font-size:.72em; } .contact-empty { align-self:center; margin:auto; color:#aaa28d; }
.contact-book.direction-ltr { direction:ltr; }
.font-size-control { display:flex; align-items:center; gap:8px; padding:5px 9px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font-size:11px; white-space:nowrap; } .font-size-control input { width:130px; accent-color:var(--lav-dark); } .font-size-control output { min-width:34px; color:var(--lav-dark); font-weight:800; }
.summary-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:18px; } .summary-card { display:grid; gap:4px; padding:13px; border-radius:13px; border:1px solid var(--line); } .summary-card strong { font-size:22px; } .summary-card span { font-size:11px; color:var(--muted); } .status-submitted { background:#eaf8ef; border-color:#cdebd8; color:#3e8b61; } .status-missing { background:#fff0ef; border-color:#f2d3d0; color:#b65e63; } .status-late { background:#fff4df; border-color:#f2dfb8; color:#ae7a2d; } .status-exempt { background:#f0edfa; border-color:#ddd5f0; color:#78649e; } .status-unchecked { background:#f5f4f7; border-color:#e8e5ec; color:#777181; } .submission-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:13px; } .submission-table { width:100%; border-collapse:collapse; min-width:620px; background:#fff; } .submission-table th,.submission-table td { border-bottom:1px solid var(--line); padding:10px; text-align:left; font-size:12px; } .submission-table thead th { color:var(--muted); background:#fbfaff; } .submission-table thead th small { display:block; color:var(--ink); margin-top:3px; font-size:11px; } .submission-table tbody th { position:sticky; left:0; background:#fff; } .student-select-control { display:flex; align-items:center; gap:7px; color:inherit; font:inherit; cursor:pointer; } .student-select-control input { width:16px; height:16px; margin:0; accent-color:var(--lav-dark); } .assignment-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 7px; margin-top:7px; color:var(--muted); font-size:10px; font-weight:500; } .column-bulk-actions { display:flex; gap:4px; margin-top:7px; } .column-bulk-actions .btn.tiny { padding:5px 6px; font-size:10px; white-space:nowrap; } .status-select { border:1px solid transparent; border-radius:7px; padding:6px 7px; color:inherit; font-size:11px; font-weight:700; } .cell-note { display:block; max-width:110px; color:var(--muted); margin-top:5px; } .student-picker { width:220px; margin-bottom:17px; } .parent-lookup { display:flex; align-items:flex-end; gap:10px; max-width:460px; margin-bottom:20px; } .parent-lookup label { display:grid; gap:6px; flex:1; color:var(--muted); font-size:12px; font-weight:700; } .parent-lookup input { width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 12px; color:var(--ink); background:#fcfbff; font-size:14px; } .parent-result h3 { margin:0 0 12px; font-size:18px; } .parent-status-list { display:grid; gap:9px; } .parent-status-card { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 16px; border:1px solid var(--line); border-radius:13px; background:#fff; } .parent-status-card strong,.parent-status-card span { display:block; } .parent-status-card > div span { color:var(--muted); font-size:12px; margin-top:4px; } .status-chip { padding:7px 9px; border-radius:999px; font-size:11px; white-space:nowrap; }
.toast { position:fixed; right:24px; bottom:24px; z-index:30; max-width:360px; padding:13px 17px; border-radius:13px; color:#fff; box-shadow:0 15px 38px rgba(37,29,64,.2); background:#3b3651; font-size:13px; } .toast-success { background:#3d8f68; } .toast-error { background:#b65460; }
.site-footer { width:min(1220px,92vw); margin:0 auto 34px; padding:22px 4px 8px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid rgba(141,121,189,.15); color:#8c849e; font-size:12px; } .footer-brand { display:flex; align-items:center; gap:10px; } .footer-brand img { width:34px; height:34px; object-fit:contain; } .footer-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(145deg,#47c7d3,#765eaa); font-size:17px; box-shadow:0 7px 16px rgba(71,137,169,.2); } .footer-brand strong,.footer-brand span { display:block; } .footer-brand strong { color:#51486a; font-size:14px; } .footer-brand span { margin-top:2px; color:#a09aaf; font-size:11px; } .footer-note { margin-left:auto; }
@media (max-width:900px) { .app-layout { grid-template-columns:1fr; } .sidebar { position:static; } .class-card { display:flex; align-items:center; gap:12px; padding:14px; } .class-card strong { margin:0; font-size:21px; } .class-card .class-lock { margin:0 0 0 auto; padding:0; border:0; } .role-strip { padding:12px 0 5px; } .tabs { display:flex; overflow:auto; } .tab { white-space:nowrap; } .sidebar-footer { display:none; } .editor-card { grid-template-columns:1fr 1fr; } .freeform-card { grid-template-columns:1fr 1fr; } .freeform-card .freeform-field { grid-column:span 2; } .editor-card .wide-field { grid-column:span 2; } .row-actions { grid-column:span 2; justify-content:flex-end; } }
@media (max-width:600px) { .topbar { height:auto; min-height:70px; padding:12px 4vw; gap:9px; align-items:flex-start; } .top-actions { flex-wrap:wrap; justify-content:flex-end; } .demo-badge { display:none; } .demo-banner { margin-top:13px; } .app-layout { width:94vw; margin-top:12px; } .content-section { padding:19px 15px; border-radius:17px; } .section-heading { display:block; } .section-actions { margin-top:15px; } .date-toolbar { margin-bottom:12px; } .date-title { font-size:14px; } .updated,.publish-hint { display:none; } .editor-card { grid-template-columns:1fr; } .freeform-card { grid-template-columns:1fr; } .freeform-card .freeform-field,.editor-card .wide-field,.row-actions { grid-column:auto; } .site-footer { width:94vw; align-items:flex-start; flex-direction:column; gap:10px; } .footer-note { margin-left:0; } .summary-grid { grid-template-columns:repeat(3,1fr); } .calendar-day { min-height:69px; padding:7px; } .calendar-day strong { font-size:12px; } .calendar-dot { font-size:9px; } .contact-book { min-height:250px; padding:13px 8px; } .contact-date,.contact-item { min-width:75px; padding:0 10px; } .contact-item span { font-size:16px; } }
@media print { body { background:#fff; } .topbar,.demo-banner,.sidebar,.date-toolbar,.section-actions,.publish-bar,.role-strip,.toast,.demo-badge,.btn,.status-select,.site-footer { display:none !important; } .app-layout { display:block; width:100%; margin:0; } .content-section { border:0; box-shadow:none; padding:0; } .section-heading { margin-bottom:10px; } .assignment-card,.day-card,.parent-status-card { break-inside:avoid; } .submission-table-wrap { overflow:visible; } .submission-table { min-width:0; } .contact-book { display:block; direction:rtl; font-size:17px; min-height:0; padding:16mm 14mm; border:1px solid #222; border-radius:0; background:#fff; } .contact-date { min-width:0; padding:0 0 10px; border-left:0; border-bottom:2px solid #222; writing-mode:horizontal-tb; text-align:right; } .contact-item { display:grid; direction:rtl; grid-template-columns:2.5em 7em 1fr; align-items:baseline; gap:8px; min-width:0; padding:10px 0; border-left:0; border-bottom:1px dashed #999; writing-mode:horizontal-tb; line-height:var(--contact-spacing,1.5); text-align:right; } .contact-item small { font-size:.6em; } .contact-item strong { color:#222; } .contact-item span { font-size:1em; } .contact-item em { font-size:.65em; } }
.contact-book.direction-ltr .contact-item,.contact-book.direction-ltr .contact-date { direction:ltr; text-align:left; }
/* Match continuation columns to the selected reading direction, not just item order. */
@media screen {
  .contact-book.direction-ltr .contact-item,
  .contact-book.direction-ltr .contact-date { writing-mode: vertical-lr; }
}
.cloud-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;margin-bottom:12px;background:#f0edf8;border-radius:12px}.cloud-status [role=status]{flex:1}.parent-lookup{flex-wrap:wrap}.content-section:has(#formal-roster) input,.content-section:has(#formal-roster) textarea{font:inherit;border:1px solid #ded9ec;border-radius:9px;padding:12px;background:#fbfaff;max-width:100%;box-sizing:border-box}.content-section:has(#formal-roster) label{display:inline-flex;flex-direction:column;gap:8px;margin:8px}.content-section:has(#formal-roster) hr{border:0;border-top:1px solid #e9e4f3;margin:28px 0}@media print{.cloud-status{display:none!important}}
.share-link-row{display:flex;gap:10px;align-items:center}.share-link-row input{flex:1;min-width:0}.share-link-help{color:var(--muted)}.recent-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfaff}.recent-dates strong{margin-right:4px}@media(max-width:600px){.share-link-row{align-items:stretch;flex-direction:column}.share-link-row .btn{width:100%}}
.share-qr{margin:16px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfaff}.share-qr summary{cursor:pointer;font-weight:700}.share-qr img{display:block;margin-top:10px;background:#fff;padding:8px}
.query-code-help{flex-basis:100%;margin:0;color:var(--muted);font-size:11px;font-weight:400}

/* iOS glass theme */
:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --lav: #7567d8;
  --lav-dark: #5547b5;
  --lav-light: rgba(117,103,216,.12);
  --line: rgba(255,255,255,.72);
  --paper: rgba(255,255,255,.7);
  --bg: #eef1fb;
  --shadow: 0 24px 70px rgba(58,66,110,.14);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% -8%, rgba(159,180,255,.58), transparent 34%),
    radial-gradient(circle at 92% 2%, rgba(255,194,220,.5), transparent 31%),
    linear-gradient(145deg, #f6f7fd 0%, #eef1fb 50%, #f9f3f8 100%);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 40%, rgba(255,255,255,.2));
  z-index: -1;
}

.topbar {
  height: 72px;
  border-bottom: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.58);
  box-shadow: 0 8px 30px rgba(70,76,116,.08);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}

.brand-mark {
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(145deg, #8f83eb, #5b55c7);
  box-shadow: 0 10px 24px rgba(91,85,199,.3), inset 0 1px 1px rgba(255,255,255,.45);
}

.brand strong { letter-spacing: -.02em; }
.brand span, .demo-badge, .eyebrow { color: #6659bb; }
.demo-badge { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.78); box-shadow: 0 5px 18px rgba(70,76,116,.08); }

.demo-banner,
.class-card,
.content-section,
.assignment-card,
.day-card,
.calendar-day,
.summary-card,
.parent-status-card,
.share-qr,
.recent-dates,
.cloud-status {
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 18px 45px rgba(74,80,126,.1), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.demo-banner { background: rgba(255,255,255,.5); color: #5f5687; }
.class-card { background: linear-gradient(145deg, rgba(92,82,169,.92), rgba(63,65,133,.86)); }
.class-card .eyebrow { color: #e8e6ff; }
.content-section { background: rgba(255,255,255,.62); }
.section-heading h2 { letter-spacing: -.045em; }

.tab, .role-pill, .icon-btn, .date-title, .btn.ghost {
  border: 1px solid rgba(255,255,255,.76);
  background: rgba(255,255,255,.42);
  box-shadow: 0 4px 14px rgba(80,84,130,.05);
}
.tab:hover, .role-pill:hover, .btn.ghost:hover { background: rgba(255,255,255,.72); }
.tab.active, .role-pill.selected { background: rgba(126,113,222,.16); border-color: rgba(126,113,222,.28); color: var(--lav-dark); }

.btn { border: 1px solid rgba(255,255,255,.68); box-shadow: 0 6px 16px rgba(67,70,116,.08), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.primary { background: linear-gradient(135deg, #8174e6, #5b53c6); box-shadow: 0 10px 22px rgba(91,83,198,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover { background: linear-gradient(135deg, #8f83ec, #665bd0); }

input, select, textarea,
.editor-card input, .editor-card textarea, .student-picker select,
.parent-lookup input, .share-link-row input {
  border-color: rgba(160,156,190,.25);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 2px rgba(76,78,112,.04), 0 3px 12px rgba(80,84,130,.04);
}
input:focus, select:focus, textarea:focus { border-color: rgba(117,103,216,.58); background: rgba(255,255,255,.82); box-shadow: 0 0 0 4px rgba(117,103,216,.12); outline: none; }

.assignment-card, .day-card, .calendar-day, .parent-status-card { background: rgba(255,255,255,.58); }
.assignment-card:hover, .day-card:hover, .calendar-day:hover, .parent-status-card:hover { box-shadow: 0 22px 48px rgba(74,80,126,.14), inset 0 1px 0 rgba(255,255,255,.7); }
.published-card { background: rgba(255,255,255,.66); }
.editor-card.drag-over { border-color: rgba(117,103,216,.6); box-shadow: 0 0 0 4px rgba(117,103,216,.12), 0 18px 38px rgba(74,80,126,.14); }
.drag-mark { border-color: rgba(117,103,216,.28); background: rgba(255,255,255,.48); }

.summary-card { background: rgba(255,255,255,.56); }
.status-submitted { background: rgba(218,247,230,.7); }
.status-missing { background: rgba(255,228,229,.7); }
.status-late { background: rgba(255,241,207,.75); }
.status-exempt { background: rgba(235,230,255,.72); }
.status-unchecked { background: rgba(245,245,249,.72); }
.submission-table-wrap { border-color: rgba(255,255,255,.78); box-shadow: 0 16px 40px rgba(74,80,126,.08); }
.submission-table { background: rgba(255,255,255,.5); }
.submission-table thead th { background: rgba(246,245,255,.72); }
.submission-table tbody th { background: rgba(255,255,255,.7); }

.contact-book { background: rgba(255,253,244,.78); box-shadow: 0 18px 50px rgba(82,76,105,.12), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.font-size-control { border-color: rgba(255,255,255,.78); background: rgba(255,255,255,.58); box-shadow: 0 7px 18px rgba(70,76,116,.07); }
.site-footer { border-top-color: rgba(255,255,255,.72); }

@media print {
  body { background: #fff !important; }
  body::before, .topbar, .demo-banner, .content-section, .assignment-card, .site-footer { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .content-section { background: #fff !important; }
}

/* Readable primary navigation */
.topbar { min-height: 84px; height: auto; gap: 20px; padding: 12px max(24px, 4vw); }
.topbar-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar .brand { flex: none; }
.topbar .brand-mark { width: 44px; height: 44px; font-size: 19px; }
.topbar .brand strong { font-size: 18px; line-height: 1.3; }
.topbar .brand span { font-size: 13px; line-height: 1.4; }
.topbar .demo-badge { flex: none; font-size: 13px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.top-actions { gap: 10px; flex: none; }
.top-actions .nav-action,
.nav-more-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 17px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
}
.top-actions .nav-primary { color: #fff; background: #28243f; box-shadow: 0 9px 22px rgba(40,36,63,.2); }
.top-actions .nav-primary:hover { background: #46406b; }
.nav-more { position: relative; }
.nav-more-toggle { gap: 9px; border: 1px solid rgba(255,255,255,.76); background: rgba(255,255,255,.6); box-shadow: 0 4px 14px rgba(80,84,130,.08); cursor: pointer; list-style: none; }
.nav-more-toggle::-webkit-details-marker { display: none; }
.nav-more-toggle span { color: var(--lav-dark); transition: transform .18s ease; }
.nav-more[open] .nav-more-toggle span { transform: rotate(180deg); }
.nav-more-toggle:hover, .nav-more[open] .nav-more-toggle { background: rgba(255,255,255,.9); }
.nav-more-toggle:focus-visible, .top-actions .nav-action:focus-visible { outline: 3px solid #cabcf0; outline-offset: 2px; }
.nav-more-panel { position: absolute; z-index: 15; top: calc(100% + 10px); right: 0; display: grid; gap: 8px; min-width: 210px; padding: 10px; border: 1px solid rgba(255,255,255,.88); border-radius: 18px; background: rgba(248,247,255,.94); box-shadow: 0 18px 42px rgba(46,44,81,.2); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.nav-more-panel .nav-action { width: 100%; justify-content: flex-start; }

@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; justify-content: space-between; }
  .topbar-identity { flex: 1 1 260px; }
  .top-actions { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 760px) {
  .topbar { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 12px 4vw 14px; }
  .topbar-identity { width: 100%; justify-content: space-between; }
  .topbar .demo-badge { font-size: 12px; padding: 7px 10px; }
  .top-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; min-width: 0; gap: 8px; }
  .top-actions .nav-action, .nav-more-toggle { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 15px; }
  .nav-more-panel { min-width: min(240px,calc(100vw - 24px)); }
  .parent-portal-topbar { grid-template-columns: 1fr auto; align-items: center; }
  .parent-portal-topbar .top-actions { display: flex; width: auto; }
}
@media (max-width: 380px) {
  .topbar .brand strong { font-size: 16px; }
  .topbar .brand span { font-size: 12px; }
  .topbar .demo-badge { display: none; }
}

/* Teacher-only submission roster */
.submission-table .student-select-control { white-space: nowrap; }
.student-seat { display: inline-flex; min-width: 2.8em; justify-content: center; padding: 5px 7px; border-radius: 8px; color: #5e5290; background: #f0edfa; font-size: 12px; font-weight: 800; }
.student-name { font-size: 13px; font-weight: 700; }

.topbar-identity .apply-class-btn { min-height: 46px; padding: 10px 16px; border-color: #c8b9ed; color: #5c4b91; background: rgba(245,241,255,.8); font-size: 15px; font-weight: 800; white-space: nowrap; }
.topbar-identity .apply-class-btn:hover { background: #f0e9ff; }
.sidebar-footer a { display: inline-block; margin-top: 8px; color: var(--lav-dark); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .topbar-identity { flex-wrap: wrap; gap: 10px; } .topbar-identity .apply-class-btn { min-height: 44px; font-size: 14px; } }

/* Keep Arabic numerals readable inside the vertical contact book. */
.contact-book .vertical-number { text-combine-upright: all; font-variant-numeric: tabular-nums; }
.contact-item small .vertical-number,
.contact-item em .vertical-number { font-size: 2em; font-weight: 900; line-height: 1.15; }
.contact-book .contact-glyph { display: inline-grid; grid-template-columns: 1em .58em; grid-template-rows: 1fr; width: 1.58em; height: max(1.12em, 24px); margin-bottom: calc(var(--contact-char-spacing, .8) * .3em); writing-mode: horizontal-tb; direction: ltr; text-orientation: upright; vertical-align: top; line-height: 1; letter-spacing: 0; text-decoration: none; }
.contact-book .contact-glyph-plain { grid-template-columns: 1em; width: 1em; }
.contact-book .contact-hanzi { display: block; grid-column: 1; align-self: center; justify-self: center; width: 1em; font-size: 1em; line-height: 1; text-align: center; }
.contact-book .contact-range-mark .contact-hanzi { transform: rotate(90deg); }
.contact-book .contact-date .date-number { display: inline-grid; place-items: center; width: 1em; height: max(1.12em, 24px); margin-bottom: calc(var(--contact-char-spacing, .8) * .3em); writing-mode: horizontal-tb; direction: ltr; text-combine-upright: none; line-height: 1; letter-spacing: 0; }
.contact-book .date-number-text { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contact-book .date-number-text.digits-2 { font-size: .78em; }
.contact-book .date-number-text.digits-3 { font-size: .56em; }
.contact-book .contact-phonetic { display: flex; grid-column: 2; align-items: center; justify-content: center; width: .58em; height: 100%; color: #8570b5; font-size: 1em; font-weight: 700; line-height: 1; letter-spacing: 0; writing-mode: horizontal-tb; }
.contact-book .zhuyin-syllable { position: relative; display: block; font-size: max(8px, .34em); line-height: 1; letter-spacing: 0; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; }
.contact-book .zhuyin-body { display: inline; font-size: inherit; }
.contact-book .zhuyin-tone { position: absolute; right: -.72em; top: 50%; transform: translateY(-50%); display: inline-block; color: #a14a64; font-size: .9em; font-weight: 800; line-height: 1; writing-mode: horizontal-tb; text-orientation: upright; }
.contact-book .zhuyin-only { grid-template-columns: .58em; width: .58em; color: #66538f; }
.contact-book .zhuyin-only .contact-phonetic { grid-column: 1; }
.contact-book .contact-item > span { font-size: 1.08em; }
@media (max-width: 600px) { .contact-book .contact-item > span { font-size: 1.08em; } }
@media print { .contact-book .contact-item > span { font-size: 1em; } }
.contact-book .contact-item { line-height: 1; }
.contact-book .contact-date { white-space: nowrap; }
.contact-book .contact-item { white-space: normal; max-height: calc(100vh - 260px); overflow-wrap: anywhere; }
.contact-book .contact-latin-run { display: inline-block; white-space: nowrap; text-orientation: sideways; unicode-bidi: isolate; }
.contact-book.latin-upright .contact-latin-run { text-orientation: upright; }
.contact-book.latin-sideways .contact-latin-run { text-orientation: sideways; }
.contact-book:fullscreen .contact-item,
.contact-book:-webkit-full-screen .contact-item { max-height: calc(100vh - 16vh); }
@media print {
  .contact-book .contact-date,
  .contact-book .contact-item { white-space: normal; }
  .contact-book .contact-item { max-height: none; overflow-wrap: anywhere; }
  .contact-book .contact-range-mark .contact-hanzi { transform: none; }
}
.contact-book .page-prefix { display:inline-block; writing-mode:horizontal-tb; text-orientation:mixed; direction:ltr; unicode-bidi:isolate; text-combine-upright:all; letter-spacing:0; font-size:.82em; font-weight:700; }
.contact-book.zhuyin-only-mode .contact-item strong,
.contact-book.zhuyin-only-mode .contact-item span,
.contact-book.zhuyin-only-mode .contact-date { font-weight: 700; }
.contact-book.zhuyin-only-mode .contact-date,
.contact-book.zhuyin-only-mode .contact-item { display: flex; flex-direction: row; align-items: center; }
.contact-book.zhuyin-only-mode .zhuyin-only { grid-template-columns: 1em; width: 1em; height: auto; min-height: 1em; }
.contact-book.zhuyin-only-mode .zhuyin-only .contact-phonetic { width: 1em; height: auto; }
.contact-book.zhuyin-only-mode .zhuyin-only .zhuyin-syllable { font-size: max(18px, .65em); }
.contact-book.zhuyin-only-mode .zhuyin-only { margin-bottom: calc(.36em + var(--contact-char-spacing, .8) * .2em); }

/* Keep each reminder beside its own vertical homework column. */
.contact-entry { display: flex; flex: none; align-items: flex-start; gap: .25em; direction: inherit; }
.contact-reminder { display: block; flex: none; max-height: calc(100vh - 260px); padding: .15em 0; color: #596c54; font-size: .55em; font-weight: 500; line-height: 1.35; letter-spacing: .03em; text-orientation: mixed; writing-mode: vertical-rl; direction: ltr; white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-book:fullscreen .contact-reminder,
.contact-book:-webkit-full-screen .contact-reminder { max-height: 84vh; }
.assignment-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.assignment-title-row .assignment-note { display: inline; max-width: 100%; margin: 0; padding: 0; border: 0; font-size: 13px; font-weight: 400; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.contact-layout-picker { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid #cbd3bc; border-radius: 8px; }
.contact-layout-picker .btn { margin: 0; }
.contact-layout-picker .btn[aria-pressed="true"] { background: var(--lav-dark, #315b46); border-color: var(--lav-dark, #315b46); color: #fff; }

/* Keep phonetic syllables beside their characters in normal horizontal text. */
.contact-book.layout-horizontal { flex-direction: column; direction: ltr; gap: var(--contact-column-gap, .77em); width: 100%; min-width: 0; }
.contact-book.layout-horizontal .contact-date,
.contact-book.layout-horizontal .contact-item { display: block; min-width: 0; max-width: 100%; max-height: none; writing-mode: horizontal-tb; direction: ltr; text-align: left; text-orientation: mixed; letter-spacing: 0; line-height: 1.8; white-space: normal; border-left: 0; padding: 0; }
.contact-book.layout-horizontal .contact-date { border-bottom: 1px solid #cbd3bc; padding-bottom: .5em; }
.contact-book.layout-horizontal .contact-entry { flex: none; width: 100%; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .2em .8em; direction: ltr; }
.contact-book.layout-horizontal .contact-item { flex: 0 1 auto; overflow-wrap: anywhere; }
.contact-book.layout-horizontal .contact-item > small { display: inline-block; margin-right: .5em; font-size: .75em; }
.contact-book.layout-horizontal .contact-item > strong { display: inline; margin-right: .6em; }
.contact-book.layout-horizontal .contact-item > span { display: inline; font-size: 1em; white-space: pre-wrap; }
.contact-book.layout-horizontal .contact-item > em { display: inline; margin-left: .6em; font-size: .8em; }
.contact-book.layout-horizontal .contact-glyph { height: 1.2em; margin-bottom: 0; margin-inline-end: calc(var(--contact-char-spacing, 1.4) * .05em); vertical-align: middle; }
.contact-book.layout-horizontal .contact-latin-run { white-space: normal; overflow-wrap: anywhere; writing-mode: horizontal-tb; }
.contact-book.layout-horizontal .contact-range-mark .contact-hanzi { transform: none; }
.contact-book.layout-horizontal .vertical-number { font-size: 1em; line-height: inherit; text-combine-upright: none; }
.contact-book.layout-horizontal .date-number { display: inline; width: auto; height: auto; margin: 0; }
.contact-book.layout-horizontal .date-number-text { display: inline; font-size: 1em; }
.contact-book.layout-horizontal .contact-reminder { flex: 0 1 auto; max-width: 100%; max-height: none; padding: 0; writing-mode: horizontal-tb; line-height: 1.6; }
.contact-book.layout-horizontal .zhuyin-only { height: auto; margin-inline-end: .45em; }

.print-contact-sheet { display: none; }

@page { size: A4 portrait; margin: 8mm; }
@media print {
  html, body { width: 100%; margin: 0; padding: 0; background: #fff !important; }
  .print-surface,
  .print-surface > .section-heading,
  .print-surface > .contact-book { display: none !important; }
  .app-layout, .main-panel { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
  .print-contact-sheet {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3mm;
    width: 100%;
    margin: 0;
    padding: 0;
    break-inside: avoid;
  }
  .contact-slip {
    box-sizing: border-box;
    height: 63mm;
    padding: 4mm 5mm;
    overflow: hidden;
    border: 1px dashed #666;
    background: #fff;
    color: #111;
    font: 11pt/1.3 system-ui, sans-serif;
    break-inside: avoid;
  }
  .print-density-12 .contact-slip { height: 44mm; }
  .print-density-6 .contact-slip { height: 85mm; }
  .print-density-4 .contact-slip { height: 128mm; }
  .contact-slip-head { display: flex; justify-content: space-between; gap: 2mm; padding-bottom: 2mm; border-bottom: 1px solid #444; font-size: 10pt; }
  .contact-slip-head strong { font-size: 12pt; }
  .contact-slip-head span { text-align: right; white-space: nowrap; }
  .contact-slip-list { margin: 2mm 0 0; padding-left: 6mm; }
  .contact-slip-row { margin: 0 0 1.2mm; padding-left: 1mm; overflow-wrap: anywhere; }
  .contact-slip-row strong { margin-right: 1.5mm; }
  .contact-slip-range { margin-left: 1.5mm; }
  .contact-slip-row small { display: inline; margin-left: 2mm; color: #333; font-size: 8pt; }
  .contact-slip-empty { list-style: none; margin-left: -6mm; }
}
.submissions-section .section-heading p { font-size: 15px; line-height: 1.7; }
.submissions-section .summary-card { padding: 16px; }
.submissions-section .summary-card strong { font-size: 28px; }
.submissions-section .summary-card span { font-size: 14px; }
.submissions-section .submission-table th,
.submissions-section .submission-table td { padding: 14px 13px; font-size: 15px; }
.submissions-section .submission-table thead th { font-size: 16px; }
.submissions-section .submission-table thead th small { font-size: 14px; }
.submissions-section .assignment-stats { font-size: 13px; line-height: 1.5; }
.submissions-section .column-bulk-actions .btn.tiny { padding: 7px 9px; font-size: 13px; }
.submissions-section .student-seat { font-size: 14px; }
.submissions-section .student-name { font-size: 16px; }
.submissions-section .status-select { padding: 9px 10px; font-size: 14px; }
.submissions-section .cell-note { font-size: 13px; }

/* Application onboarding and administrator workspace */
.application-fields{border:0;padding:0;margin:0;min-width:0}.application-fields:disabled{opacity:.65}.application-identity{overflow-wrap:anywhere}.application-feedback{padding:14px 18px;border-radius:14px;background:#edf5ff;color:#254c73;line-height:1.65}.application-receipt{border:1px solid #ded8ed;border-radius:16px;padding:18px;margin:16px 0;background:#ffffffa8}.application-receipt h3{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.application-receipt h3 span,.status-pill{font-size:14px;padding:6px 12px;border-radius:20px}.status-pending{background:#fff1d2;color:#835500}.status-approved{background:#e2f5eb;color:#216340}.status-rejected{background:#ffeaee;color:#a42e45}.admin-wrap{max-width:1120px;margin:32px auto;padding:32px;font-size:17px}.admin-wrap [hidden]{display:none!important}.admin-heading,.admin-section-heading,.admin-card-heading,.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.admin-heading h1{font-size:30px;margin:12px 0}.admin-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.admin-actions .btn{min-height:46px;font-size:16px}.admin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}.admin-summary>div{padding:20px;border:1px solid #fff;border-radius:18px;background:#ffffffa8;display:flex;flex-direction:column;gap:8px}.admin-summary strong{font-size:32px;color:#6551b5}.admin-toolbar{margin:20px 0}.admin-toolbar input{width:20px;height:20px;vertical-align:middle}.admin-wrap select{font:inherit;padding:10px;border-radius:10px;border:1px solid #dcd8eb;background:#fff}.admin-section-heading{margin-top:32px}.admin-card{border:1px solid #ded8ed;border-radius:18px;padding:24px;margin:16px 0;background:#ffffffb8;overflow-wrap:anywhere}.admin-card h3{font-size:22px;margin:0}.admin-card p{line-height:1.7}.admin-card summary{cursor:pointer;padding:10px 0}.admin-students{line-height:2}.admin-muted{color:#666;font-size:14px}.admin-empty{padding:28px;border:1px dashed #cfc5e5;border-radius:16px;text-align:center;color:#666}.admin-error{background:#ffeaee;color:#91243a;border-radius:12px;padding:16px;overflow-wrap:anywhere}.btn:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){.admin-wrap{margin:12px;padding:20px}.admin-summary{gap:8px}.admin-summary>div{padding:12px}.admin-summary span{font-size:14px}.admin-card{padding:18px}.application-account-grid{grid-template-columns:1fr}.application-actions .btn{flex:1 1 140px}.admin-actions .btn{flex:1 1 150px}}
/* Private teacher/admin feature suggestions. */
.suggestion-panel{display:grid;gap:14px}.suggestion-panel form{display:grid;gap:12px}.suggestion-panel blockquote{margin:12px 0;padding:12px 16px;border-left:4px solid var(--lav);background:#f7f4ff;border-radius:10px}.suggestion-image{display:block;max-width:min(100%,640px);max-height:420px;object-fit:contain;border:1px solid var(--line);border-radius:12px;margin:10px 0}

/* Workspace usability, September 2026. */
:where(button,a,input,select,textarea):focus-visible { outline:3px solid #6550c4; outline-offset:3px; }
.admin-page { width:min(1180px,calc(100% - 32px)); margin:28px auto; padding:32px; }
.admin-page .section-heading { gap:20px; flex-wrap:wrap; }
.admin-page .admin-heading-actions { display:flex; flex-wrap:wrap; gap:10px; }
.admin-page h1 { margin:16px 0; font-size:32px; }
.admin-page .admin-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:24px 0; }
.admin-page .admin-summary > div { padding:20px; border-radius:16px; background:rgba(255,255,255,.8); }
.admin-page .admin-summary strong { display:block; font-size:28px; }
.admin-page .admin-summary span { display:block; margin-top:6px; font-size:16px; color:var(--muted); }
.admin-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:6px; margin-bottom:20px; border:1px solid var(--line); background:rgba(255,255,255,.5); border-radius:16px; }
.admin-tabs button { flex:1; min-height:48px; border:0; border-radius:12px; background:transparent; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.admin-tabs button.active { background:#6550c4; color:#fff; box-shadow:0 4px 12px #6550c426; }
.admin-page .admin-search-row { display:flex; align-items:end; gap:20px; margin-bottom:22px; }
.admin-page .admin-search-row .login-field { flex:1; }
.admin-page .login-field { display:grid; gap:8px; margin:12px 0; font-size:16px; }
.admin-page input:not([type=checkbox]),.admin-page select,.admin-page textarea { width:100%; min-height:44px; font:inherit; border:1px solid #d5d0e2; border-radius:10px; padding:10px 12px; background:white; color:var(--ink); }
.admin-page .admin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.admin-page .admin-card { margin:14px 0; padding:22px; overflow-wrap:anywhere; }
.admin-page .admin-card .actions { flex-wrap:wrap; gap:10px; }
.admin-page .btn { min-height:44px; font-size:16px; }
.admin-page .admin-error { overflow-wrap:anywhere; }
.admin-page [hidden] { display:none!important; }
@media(max-width:640px){
 .admin-page{width:calc(100% - 20px);margin:10px auto;padding:20px 16px}
 .admin-page h1{font-size:27px}.admin-page .admin-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .admin-tabs{display:grid;grid-template-columns:1fr 1fr}.admin-page .admin-search-row{display:block}
 .admin-page .admin-card{padding:16px}.admin-page .admin-heading-actions{width:100%}.admin-page .admin-heading-actions .btn{flex:1}
}

/* Do not compress the search input using the checkbox dimensions. */
.admin-page .admin-search { min-width:0; width:100%; }
.admin-page .admin-search input { height:auto; }

/* The authorized administrator entry stays visible beside My Workspace. */
.top-actions .nav-admin { background:#f0ebff; color:#4f389e; border:1px solid #b7a8e2; font-weight:700; }
.top-actions .nav-admin:hover { background:#e5dcff; }