/* Icare employee experience. Decorative chrome surrounds quiet, readable work. */
.shell,
dialog,
.login {
  --experience-ink: #142a43;
  --experience-muted: #526a82;
  --experience-blue: #0065bd;
  --experience-navy: #071e36;
  --experience-border: #d5e3ef;
  --experience-accent: #28c9ec;
  --experience-accent-rgb: 40, 201, 236;
  --experience-paper: #ffffff;
  --experience-shadow: 0 14px 42px #173d6510, 0 2px 7px #173d6505;
  --experience-ease: cubic-bezier(.2,.75,.25,1);
  color: var(--experience-ink);
}
.shell[data-workspace="onboarding"], .shell[data-view="onboarding"] { --experience-accent: #35d7b4; --experience-accent-rgb: 53, 215, 180; }
.shell[data-workspace="records"], .shell[data-view="records"] { --experience-accent: #afa3ff; --experience-accent-rgb: 175, 163, 255; }
.shell[data-workspace="training"], .shell[data-view="training"] { --experience-accent: #77b8ff; --experience-accent-rgb: 119, 184, 255; }
.shell {
  position: relative;
  isolation: isolate;
  grid-template-columns: 264px minmax(0,1fr);
  background: #f0f6fc;
  background-image: radial-gradient(ellipse at 98% 3%,#d9eaff 0,transparent 37%),radial-gradient(ellipse at 40% 100%,#e1f7f6 0,transparent 36%);
  min-height: 100dvh;
}
.shell::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 76% 12%,#28c9ec0c,transparent 40%),radial-gradient(ellipse at 93% 77%,#7f72d811,transparent 37%);
  animation: experience-ambient 24s ease-in-out infinite alternate;
}
.shell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#365d8310 1px,transparent 1px),linear-gradient(90deg,#365d8310 1px,transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg,#0007,transparent 720px);
  mask-image: linear-gradient(180deg,#0007,transparent 720px);
}
.shell > div { min-width: 0; }
.shell .sidebar {
  isolation: isolate;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 18px 22px;
  background: linear-gradient(156deg,#082f50 0%,#071e36 46%,#06182c 100%);
  border-right: 1px solid #5fc7f42a;
  box-shadow: 12px 0 40px #051b3310;
  scrollbar-width: thin;
  scrollbar-color: #4a708e transparent;
}
.shell .sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 0 3%,#26c4e627,transparent 45%),radial-gradient(ellipse at 100% 70%,#9279ff17,transparent 42%),linear-gradient(115deg,transparent 45%,#75dfff07 46%,transparent 47%);
}
.shell .sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,var(--experience-accent),transparent);
}
.shell .sidebar-brand {
  position: relative;
  padding: 18px 17px;
  margin: 0 5px 26px;
  border: 1px solid #ffffffa1;
  border-radius: 19px;
  background: linear-gradient(135deg,#f8fcff,#eaf5fb);
  box-shadow: 0 10px 28px #00000013,inset 0 1px 0 #fff;
}
.shell .sidebar-brand img { display: block; width: 174px; height: auto; margin: auto; mix-blend-mode: multiply; }
.shell .sidebar-brand .brand-caption { display: block; margin-top: 10px; color: #496f8a; text-transform: uppercase; font-size: 9px; letter-spacing: .2em; text-align: center; font-weight: 700; }
.shell .sidebar .eyebrow { color: #8cadc7; font-size: 10px; letter-spacing: .2em; padding: 0 14px; margin: 13px 0 12px; }
.shell .nav { gap: 9px; }
.shell .nav button {
  position: relative;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  gap: 12px;
  background: transparent;
  color: #c8dcec;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .22s,color .22s,border-color .22s,box-shadow .22s,transform .22s var(--experience-ease);
}
.shell .nav button > svg {
  width: 33px;
  height: 33px;
  padding: 7px;
  border: 1px solid #c7e8ff18;
  border-radius: 10px;
  background: #c7e8ff08;
  color: #9fc6e2;
  transition: background .22s,color .22s,border-color .22s;
}
.shell .nav button:hover { background: #92cbf00d; border-color: #9aeaff25; color: #fff; transform: translateX(3px); }
.shell .nav button:hover > svg { color: #fff; border-color: #b6e7ff42; background: #a6e5ff13; }
.shell .nav button.active {
  color: #fff;
  background: linear-gradient(110deg,#1474b449,#218fac21);
  border-color: #62d1f15c;
  box-shadow: inset 0 1px 0 #b7f4ff11,0 5px 20px #0000000c;
}
.shell .nav button.active::before { content: ""; position: absolute; width: 3px; height: 24px; border-radius: 4px; background: var(--experience-accent); left: -2px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 12px rgba(var(--experience-accent-rgb),.5); }
.shell .nav button.active > svg { color: #d8faff; background: #56d9ed17; border-color: #85e8fa42; }
.shell .nav .num { color: #94b8d2; font-size: 10px; letter-spacing: .08em; }
.shell .nav button.active .num { color: #c9edff; }
.shell .side-bottom { margin-top: auto; padding: 28px 8px 0; }
.shell .side-bottom::before { content: ""; display: block; height: 1px; margin: 0 5px 18px; background: linear-gradient(90deg,transparent,#a0d4f23b,transparent); }
.shell .side-bottom .btn { min-height: 44px; margin-top: 8px; border-radius: 11px; padding: 10px 12px; background: #90c4f008; border-color: #aacded16; color: #d5e5f0; font-size: 12px; font-weight: 550; }
.shell .side-bottom .btn:hover { background: #b6deff15; border-color: #aacded45; color: #fff; }
.shell .side-bottom .btn > svg { width: 17px; height: 17px; color: #a0c4de; }
.shell .side-bottom p { margin-top: 20px; padding: 0 3px; color: #9eb9cc; line-height: 1.9; font-size: 10px; overflow-wrap: anywhere; }
.shell .topbar {
  position: relative;
  height: 88px;
  padding: 0 38px;
  gap: 18px;
  border-bottom: 1px solid #cddfeb;
  background: #f9fcffe8;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.shell .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; color: #627b93; letter-spacing: .015em; }
.shell .breadcrumb span { color: #294663; font-weight: 650; font-size: 12px; }
.shell .user { gap: 11px; }
.shell .avatar { width: 43px; height: 43px; border: 1px solid #b9d7ea; background: linear-gradient(140deg,#e9f6ff,#dbeaf9); color: #06599c; box-shadow: inset 0 1px 0 #fff; font-size: 13px; }
.shell .user-name { font-size: 12px; color: #253f5a; }
.shell .user-email { font-size: 10px; color: #607a92; }
.shell .user-name .badge { margin-left: 5px; padding: 3px 7px; font-size: 9px; }
.shell .preview-banner { border-bottom: 1px solid #e8ca88; background: #fff7e4; color: #704c0f; padding: 10px 38px; }
.shell .main { width: 100%; max-width: 1600px; padding: 32px 38px 58px; }
.shell .page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  min-height: 180px;
  padding: 32px 34px;
  margin-bottom: 25px;
  border: 1px solid #4b8bb657;
  border-radius: 25px;
  background: linear-gradient(120deg,#082b49 0%,#0a385c 57%,#123558 100%);
  box-shadow: 0 16px 38px #0b315c17,inset 0 1px 0 #b7e6ff11;
  color: #fff;
  gap: 24px;
}
.shell .page-head::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 82% 25%,rgba(var(--experience-accent-rgb),.14),transparent 54%),linear-gradient(110deg,transparent 55%,#3dbce105 55.2%,transparent 55.5%);
}
.shell .page-head::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
  width: 270px;
  height: 270px;
  right: -65px;
  top: -116px;
  border: 1px solid rgba(var(--experience-accent-rgb),.17);
  border-radius: 50%;
  box-shadow: 0 0 0 27px rgba(var(--experience-accent-rgb),.025),0 0 0 55px rgba(var(--experience-accent-rgb),.04),0 0 0 83px rgba(var(--experience-accent-rgb),.02);
}
.shell .page-head > div { min-width: 0; }
.shell .page-head h1 { font-size: clamp(27px,2.6vw,38px); letter-spacing: -.04em; font-weight: 650; line-height: 1.15; color: #fff; }
.shell .page-head p { font-size: 14px; line-height: 1.7; color: #c7dae9; max-width: 650px; margin-top: 12px; }
.shell .page-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #b4eaf9; font-size: 9px; letter-spacing: .19em; margin-bottom: 14px; }
.shell .page-head .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--experience-accent); border-radius: 50%; box-shadow: 0 0 12px rgba(var(--experience-accent-rgb),.6); flex: none; }
.shell .page-head > .btn { flex: none; border-color: #a2d6f645; background: #e2f7ff0d; color: #ecf8ff; }
.shell .page-head > .btn:hover { border-color: #b5edff85; background: #c7f1ff1b; }
.shell .page-head > .btn.primary { background: #f0fbff; border-color: #effaff; color: #075183; box-shadow: 0 7px 21px #00162c22; }
.shell .page-head > .btn.primary:hover { background: #d5f4ff; border-color: #d5f4ff; }
.shell h2, dialog h2 { letter-spacing: -.035em; color: #17344f; }
.shell h3, dialog h3 { color: #213d56; }
.shell .muted, .shell small, dialog .muted, dialog small { color: var(--experience-muted); }
.shell .card { position: relative; border-color: var(--experience-border); border-radius: 19px; background: #fff; box-shadow: var(--experience-shadow); }
.shell .card-body { padding: 25px; }
.shell .section-head { gap: 20px; padding: 24px 25px; border-bottom: 1px solid #dce8f2; background: linear-gradient(115deg,#ffffff,#f7fbff); }
.shell .section-head h2 { font-size: 22px; }
.shell .section-head h3 { font-size: 16px; }
.shell .section-head .muted { font-size: 12px; line-height: 1.6; }
.shell .section-head .eyebrow { color: #0c69a5; font-size: 10px; letter-spacing: .14em; }
.shell .stats { gap: 17px; margin-bottom: 27px; }
.shell .stat { isolation: isolate; min-height: 111px; padding: 23px; gap: 17px; overflow: hidden; transition: border-color .23s,box-shadow .23s,transform .23s var(--experience-ease); }
.shell .stat::before { content: ""; position: absolute; pointer-events: none; z-index: -1; right: -28px; top: -36px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle,#4ea6ee0f,transparent 65%); }
.shell .stat:hover { border-color: #aecfe5; box-shadow: 0 18px 40px #16457212; transform: translateY(-3px); }
.shell .stat-icon { width: 49px; height: 49px; flex: none; border: 1px solid #c5e3f8; border-radius: 14px; background: linear-gradient(140deg,#eef9ff,#deeffc); color: #0870b7; box-shadow: inset 0 1px 0 #ffffff,0 4px 14px #0473be09; }
.shell .stat:nth-child(2) .stat-icon { border-color: #c7eadd; background: linear-gradient(140deg,#effcf6,#dff4e9); color: #197654; }
.shell .stat:nth-child(3) .stat-icon { border-color: #dad6f3; background: linear-gradient(140deg,#f6f3ff,#ece6fb); color: #7662bc; }
.shell .stat-value { font-size: 31px; color: #173651; line-height: 1.2; letter-spacing: -.045em; }
.shell .stat-label { color: #58718b; font-size: 12px; line-height: 1.6; margin-top: 5px; }
.shell .btn, dialog .btn, .login .btn {
  position: relative;
  min-height: 44px;
  border-radius: 11px;
  border-color: #c7dbe9;
  background: #fff;
  color: #274e6d;
  font-weight: 600;
  font-size: 13px;
  padding: 11px 17px;
  gap: 8px;
  box-shadow: 0 1px 2px #15395705;
  transition: border-color .18s,color .18s,background .18s,box-shadow .18s,transform .18s var(--experience-ease);
}
.shell .btn:hover, dialog .btn:hover, .login .btn:hover { background: #f0f8ff; border-color: #9cc2dd; box-shadow: 0 4px 14px #1d598610; text-decoration: none; }
.shell .btn:active, dialog .btn:active, .login .btn:active { transform: translateY(1px); box-shadow: none; }
.shell .btn.primary, dialog .btn.primary, .login .btn.primary { background: linear-gradient(115deg,#0065b8,#087abe); border-color: #0065b8; color: #fff; box-shadow: 0 5px 14px #0065b822,inset 0 1px 0 #ffffff17; }
.shell .btn.primary:hover, dialog .btn.primary:hover, .login .btn.primary:hover { background: linear-gradient(115deg,#00549c,#006aab); border-color: #00549c; box-shadow: 0 7px 20px #0065b830; }
.shell .btn.ghost, dialog .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: #58708a; }
.shell .btn.ghost:hover, dialog .btn.ghost:hover { background: #eaf4fb; border-color: #d5e8f5; color: #075b97; }
.shell .btn.danger, dialog .btn.danger { color: #a32635; border-color: #eac5cc; background: #fff9fa; }
.shell .btn.danger:hover, dialog .btn.danger:hover { background: #ffedf0; border-color: #dba7b3; }
.shell .btn > svg, dialog .btn > svg { width: 17px; height: 17px; }
.shell button:disabled, dialog button:disabled { opacity: .5; box-shadow: none; transform: none; }
.shell :is(button,a,input,select,textarea,summary):focus-visible,
dialog :is(button,a,input,select,textarea,summary):focus-visible,
.login :is(button,a,input,select,textarea):focus-visible {
  outline: 3px solid #0676ce;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #b9e6ff4d;
}
.shell .sidebar :is(button,a):focus-visible { outline-color: #91ebff; box-shadow: 0 0 0 6px #45ccea18; }
.shell :is(input,select,textarea), dialog :is(input,select,textarea), .login :is(input,select,textarea) {
  min-height: 46px;
  padding: 12px 14px;
  border-color: #bbd0df;
  border-radius: 11px;
  color: #1f3d57;
  background: #fcfeff;
  box-shadow: inset 0 1px 2px #19385104;
  transition: border-color .18s,box-shadow .18s,background .18s;
}
.shell :is(input,textarea)::placeholder, dialog :is(input,textarea)::placeholder, .login :is(input,textarea)::placeholder { color: #71889c; opacity: 1; }
.shell :is(input,select,textarea):hover, dialog :is(input,select,textarea):hover { border-color: #8dafc8; }
.shell :is(input,select,textarea):focus, dialog :is(input,select,textarea):focus, .login :is(input,select,textarea):focus { border-color: #2585c6; background: #fff; }
.shell :is(input,select,textarea):disabled, dialog :is(input,select,textarea):disabled { background: #eef3f7; color: #6a7e90; }
.shell input[type="file"], dialog input[type="file"] { padding: 9px 11px; border: 1px dashed #9fc3db; background: #f5faff; line-height: 1.8; }
.shell input[type="file"]::file-selector-button, dialog input[type="file"]::file-selector-button { border: 1px solid #c0dbea; border-radius: 7px; padding: 6px 11px; margin-right: 13px; color: #156495; background: #e7f4fc; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.shell label, dialog label, .login label { font-size: 12px; font-weight: 650; color: #294963; margin-top: 18px; margin-bottom: 7px; }
.shell .check-label, dialog .check-label { font-weight: 400; line-height: 1.65; color: #36536b; gap: 11px; font-size: 13px; }
.shell :is(.check-label,.checkbox-row) input, dialog :is(.check-label,.checkbox-row) input { min-height: 19px; width: 19px; height: 19px; margin-top: 2px; accent-color: #0871b9; box-shadow: none; flex: none; }
.shell .checkbox-row, dialog .checkbox-row { padding: 14px; border-color: #d2e1eb; border-radius: 11px; background: #fafcfe; font-weight: 400; transition: border-color .18s,background .18s; }
.shell .checkbox-row:hover, dialog .checkbox-row:hover { border-color: #9ebed4; background: #f1f8ff; }
.shell .checkbox-row:has(input:checked), dialog .checkbox-row:has(input:checked) { background: #edf7ff; border-color: #9dc6e3; }
.shell .badge, dialog .badge { padding: 5px 9px; border-radius: 7px; color: #4d6981; border-color: #cbdde9; background: #f5f9fc; font-size: 10px; font-weight: 650; line-height: 1.35; letter-spacing: .01em; }
.shell .badge.blue, dialog .badge.blue { background: #edf7ff; border-color: #c1dff3; color: #07619a; }
.shell .badge.green, dialog .badge.green { background: #edf9f1; border-color: #c1e5cc; color: #1c704d; }
.shell .badge.amber, dialog .badge.amber { background: #fff7e9; border-color: #eed7a8; color: #865b0b; }
.shell .notice, dialog .notice, .login .notice { padding: 17px 19px; border-radius: 13px; border-color: #caddf0; background: linear-gradient(115deg,#f1f8ff,#f6fbff); color: #305a7b; font-size: 13px; line-height: 1.7; }
.shell .notice strong, dialog .notice strong { color: #1b4b70; }
.shell .notice.warning, dialog .notice.warning { border-color: #ead5a8; background: linear-gradient(115deg,#fff8ea,#fffaf1); color: #795815; }
.shell .notice.warning strong, dialog .notice.warning strong { color: #79520d; }
.shell .error, dialog .error, .login .error { border: 1px solid #ebc2c9; border-radius: 12px; padding: 15px 17px; color: #9b2836; background: #fff2f4; font-size: 13px; line-height: 1.65; }
.shell .empty, dialog .empty { position: relative; padding: 50px 26px; border: 1px dashed #b9d0e2; border-radius: 17px; background: radial-gradient(ellipse at 50% 15%,#e8f5ff,transparent 60%),#fafcff; color: #5b7289; min-height: 160px; }
.shell .empty > svg, dialog .empty > svg { width: 52px; height: 52px; padding: 12px; border: 1px solid #c2deef; border-radius: 15px; background: #eaf7ff; color: #2476ac; margin-bottom: 16px; box-shadow: 0 6px 20px #1962960b; }
.shell .empty h3, dialog .empty h3 { font-size: 19px; color: #244763; }
.shell .empty p, dialog .empty p { max-width: 56ch; margin: 10px auto 0; font-size: 13px; line-height: 1.7; }
.shell .empty[role="status"], dialog .empty[role="status"] { display: grid; justify-items: center; align-content: center; gap: 16px; }
.shell .empty[role="status"]::before, dialog .empty[role="status"]::before { content: ""; width: 28px; height: 28px; border: 2px solid #c8e3f5; border-top-color: #0878bf; border-radius: 50%; animation: experience-spin 1s linear infinite; }
.shell .library-layout { grid-template-columns: 222px minmax(0,1fr); gap: 23px; align-items: start; }
.shell .category-list { border: 1px solid #d2e2ee; border-radius: 18px; background: #f9fcffe6; padding: 15px 10px; gap: 5px; box-shadow: 0 5px 20px #204a7407; }
.shell .category-list h3 { padding: 6px 13px 13px; font-size: 10px; color: #5b7690; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.shell .category { min-height: 46px; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; color: #58708a; transition: background .18s,color .18s,border-color .18s; }
.shell .category:hover { background: #eaf4fb; border-color: #d0e4f2; color: #1b5f8e; }
.shell .category.active { border-color: #bedbf0; color: #075f98; background: #e8f5ff; box-shadow: inset 0 1px 0 #fff8; }
.shell .category-count { background: #d4e6f23b; color: #597a92; padding: 3px 6px; border-radius: 6px; font-size: 10px; }
.shell .category.active .category-count { background: #c2e4fa99; color: #095d91; }
.shell .searchbar { padding: 20px 23px; gap: 12px; border-color: #dce8f2; background: #f7fbff; }
.shell .search-input > svg { top: 14px; left: 14px; width: 18px; height: 18px; color: #537896; }
.shell .search-input input { padding-left: 43px; border-color: #c5daea; background: #fff; }
.shell .searchbar select { max-width: 210px; font-size: 12px; }
.shell .list-heading { gap: 12px; padding: 14px 24px; border-color: #e2edf5; background: #fcfdff; color: #6b8195; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.shell .document-row { position: relative; padding: 20px 24px; gap: 17px; border-bottom-color: #e2edf4; transition: background .18s,box-shadow .18s; }
.shell .document-row:hover { background: #f7fbff; box-shadow: inset 3px 0 0 #64b7e6; }
.shell .file-icon { position: relative; overflow: hidden; width: 44px; height: 53px; border-color: #bfd9ed; border-radius: 10px; background: linear-gradient(145deg,#f6fcff,#deeffb); color: #1e75ae; font-size: 9px; letter-spacing: .02em; box-shadow: 0 3px 9px #18619508,inset 0 1px 0 #fff; }
.shell .file-icon::before { content: ""; position: absolute; width: 13px; height: 13px; top: -1px; right: -1px; border-left: 1px solid #bfd9ed; border-bottom: 1px solid #bfd9ed; border-radius: 0 0 0 4px; background: #e3f0fa; }
.shell .file-icon::after { content: ""; position: absolute; bottom: 8px; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: #9fc4dd; opacity: .6; }
.shell .doc-title { min-height: 44px; display: inline-flex; align-items: center; max-width: 100%; color: #27475f; font-weight: 650; font-size: 13px; line-height: 1.6; transition: color .18s; }
.shell .doc-title:hover { color: #006cb2; }
.shell .doc-meta { margin-top: 0; gap: 7px; color: #698195; font-size: 10px; line-height: 1.65; }
.shell .row-actions { gap: 7px; }
.shell .row-actions .btn { font-size: 11px; min-height: 44px; padding: 10px 12px; }
.shell .row-actions .btn > svg { width: 16px; height: 16px; }
.shell .pagination { padding: 18px 23px; border-top-color: #dce8f2; background: #fbfdff; font-size: 11px; }
.shell .pagination .btn { min-height: 44px; font-size: 11px; padding: 10px 13px; }
.shell .tabs-local { gap: 8px; margin-bottom: 25px; }
.shell .tabs-local button { min-height: 46px; border-color: #ccdeed; border-radius: 12px; padding: 11px 18px; color: #5d758b; background: #fafdff; font-size: 12px; font-weight: 600; box-shadow: 0 2px 7px #173d6503; transition: background .18s,color .18s,border-color .18s,box-shadow .18s; }
.shell .tabs-local button:hover { color: #126798; background: #edf7ff; border-color: #a6c9e3; }
.shell .tabs-local button.active { color: #075d96; border-color: #97c3e3; background: #e5f3ff; box-shadow: inset 0 1px 0 #fff,0 4px 12px #1473ae09; }
.shell .packet-card { padding: 25px; border-top: 3px solid #79bde0; transition: border-color .22s,box-shadow .22s,transform .22s var(--experience-ease); }
.shell .packet-card:nth-child(3n+2) { border-top-color: #7dcbb8; }
.shell .packet-card:nth-child(3n+3) { border-top-color: #b4a7e1; }
.shell .packet-card:hover { border-color: #b4d4e8; box-shadow: 0 17px 36px #12437114; transform: translateY(-3px); }
.shell .packet-card .badge { margin-bottom: 17px; }
.shell .packet-card h3 { font-size: 19px; }
.shell .packet-card p { color: #5e758b; font-size: 13px; line-height: 1.75; }
.shell .packet-card .btn { margin-top: 22px; font-size: 12px; }
.shell .profile-card { padding: 24px; gap: 16px; border-top: 3px solid #bdd6ea; transition: border-color .2s,box-shadow .2s; }
.shell .profile-card:hover { border-color: #a7cce3; box-shadow: 0 15px 36px #1c4a7211; }
.shell .profile-card .avatar { width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(145deg,#eff5ff,#e6e5f9); border-color: #cbd5ee; color: #5e65a1; }
.shell .profile-card h3 { font-size: 17px; line-height: 1.4; }
.shell .profile-card p { font-size: 12px; color: #5a748b; line-height: 1.7; }
.shell .profile-card .btn { margin-top: 17px; font-size: 11px; }
.shell .onboarding-layout { grid-template-columns: 275px minmax(0,1fr); gap: 24px; align-items: start; }
.shell .onboarding-layout > aside { background: #fafdff; }
.shell .checklist { padding: 17px; gap: 9px; }
.shell .checklist button { position: relative; padding: 14px 13px; gap: 12px; min-height: 77px; font-size: 12px; border-color: #d3e3ee; border-radius: 12px; background: #fff; color: #35536c; transition: background .18s,border-color .18s,box-shadow .18s; }
.shell .checklist button:hover { background: #f0f8ff; border-color: #a8cee5; }
.shell .checklist button.active { background: #eaf6ff; border-color: #83badc; box-shadow: 0 4px 14px #126ca511; color: #125c8b; }
.shell .checklist button > svg { width: 30px; height: 30px; padding: 6px; background: #edf6fd; border-radius: 8px; color: #317ba9; }
.shell .checklist small { display: inline-block; font-size: 10px; margin-top: 3px; line-height: 1.7; }
.shell .progress-track { height: 8px; margin-top: 21px; background: #e2edf6; border-radius: 9px; box-shadow: inset 0 1px 2px #23405b09; }
.shell .progress-track progress { height: 8px; border: none; appearance: none; -webkit-appearance: none; background: #e2edf6; }
.shell .progress-track progress::-webkit-progress-bar { background: #e2edf6; border-radius: 9px; }
.shell .progress-track progress::-webkit-progress-value { background: linear-gradient(90deg,#0068b4,#21b9c3); border-radius: 9px; }
.shell .progress-track progress::-moz-progress-bar { background: linear-gradient(90deg,#0068b4,#21b9c3); border-radius: 9px; }
.shell .reader, dialog .reader { padding: 31px; font-size: 14px; line-height: 1.85; background: #fff; color: #2c4459; }
.shell .reader .doc-text, dialog .reader .doc-text { max-width: 76ch; }
.shell .reader h3, dialog .reader h3 { margin: 28px 0 16px; font-size: 19px; color: #213e56; }
.shell .reader p, dialog .reader p { margin-bottom: 15px; }
.shell .reader table, dialog .reader table { font-size: 12px; margin: 20px 0; }
.shell .reader td, dialog .reader td { padding: 12px; border-color: #d1e0eb; }
.shell .reader tr:nth-child(even) td, dialog .reader tr:nth-child(even) td { background: #f8fbfd; }
.shell .reader-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 23px 27px; background: #f4f9fd; border-color: #d1e2ef; }
.shell .reader-foot .notice, .shell .reader-foot .check-label { flex-basis: 100%; }
.shell .reader-foot .space { margin-top: 8px; }
dialog .signature-preview { color: #134b74; background: linear-gradient(120deg,#f0f8fe,#f8fbff); border: 1px solid #c9dfef; border-radius: 14px; min-height: 122px; padding: 27px 17px; font-size: 39px; }
dialog .signature-canvas { height: 180px; border: 1px solid #a8c6dc; border-radius: 13px; background-color: #fff; background-image: linear-gradient(transparent calc(100% - 40px),#c9ddea calc(100% - 40px),#c9ddea calc(100% - 39px),transparent calc(100% - 39px)); }
dialog #signature-draw > .btn { margin-top: 9px; }
.shell .training-row { padding: 23px 25px; gap: 17px; border-color: #dfeaf3; transition: background .18s; }
.shell .training-row:hover { background: #f7fbff; }
.shell .training-row .stat-icon { width: 44px; height: 44px; border-radius: 12px; }
.shell .training-row .doc-main strong { font-size: 13px; font-weight: 650; color: #284965; }
.shell .training-row .doc-meta { margin-top: 6px; }
.shell .training-row p.muted { font-size: 12px; max-width: 68ch; line-height: 1.7; }
.shell .course-library .section-head { padding: 25px; }
.shell .course-library .section-head h2 { font-size: 25px; }
.shell .course-library .section-head p { max-width: 62ch; font-size: 13px; }
.shell .course-filters { padding: 23px 25px; gap: 18px; background: #f5faff; border-color: #d9e7f2; }
.shell .course-filters label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #5e7892; margin-bottom: 9px; }
.shell .course-filters :is(input,select) { font-size: 12px; background: #fff; }
.shell .course-row { position: relative; isolation: isolate; padding: 27px 25px; border-color: #dce9f3; gap: 19px; transition: background .2s; }
.shell .course-row:hover { background: #f6fbff; }
.shell .course-row .file-icon { width: 49px; height: 61px; border-color: #c9c4e9; background: linear-gradient(145deg,#faf7ff,#eae7fa); color: #7162a9; margin-top: 5px; }
.shell .course-row .file-icon::before { border-color: #c9c4e9; background: #eee9fa; }
.shell .course-row .file-icon::after { background: #b5acd8; }
.shell .course-row .doc-title { min-height: 44px; font-size: 16px; color: #25475f; letter-spacing: -.02em; }
.shell .course-row .doc-title:hover { color: #0069ab; }
.shell .course-row .doc-meta { font-size: 10px; }
.shell .course-summary { font-size: 13px; line-height: 1.75; color: #5b748a; max-width: 70ch; margin-top: 11px; }
.shell .course-status { margin-top: 14px; }
.shell .course-actions { gap: 8px; flex-basis: 160px; padding-top: 8px; }
.shell .course-actions .btn { font-size: 11px; min-height: 44px; border-radius: 10px; }
.shell .course-actions .btn:first-child { border-color: #b2d4eb; background: #edf7ff; color: #145f91; }
.shell .course-actions .btn:first-child:hover { border-color: #8fbcdc; background: #e0f1fd; }
dialog .course-player { position: relative; padding: 23px; margin: 0 0 25px; border: 1px solid #c4dded; border-radius: 17px; background: radial-gradient(ellipse at 100% 0,#d5ebfb,transparent 75%),#f4faff; }
dialog .course-player h3 { font-size: 19px; }
dialog .course-player > .muted { color: #53738d; font-size: 12px; line-height: 1.7; }
dialog .course-player audio { width: 100%; margin: 20px 0 13px; accent-color: #0871b2; border-radius: 12px; }
dialog .course-player .upload-hint { color: #59728a; margin-bottom: 17px; font-size: 12px; line-height: 1.75; }
dialog .course-player > .btn { background: #fff; font-size: 12px; }
dialog .course-introduction { font-size: 15px; color: #3d586f; line-height: 1.85; margin-top: 23px; }
dialog .course-objectives { list-style: none; padding-left: 0; display: grid; gap: 10px; margin-top: 17px; }
dialog .course-objectives li { position: relative; padding: 13px 17px 13px 37px; border: 1px solid #dde9f1; border-radius: 11px; background: #f8fbfe; line-height: 1.7; font-size: 13px; color: #3c5b73; margin: 0; }
dialog .course-objectives li::before { content: ""; position: absolute; width: 7px; height: 7px; top: 21px; left: 16px; border: 2px solid #3a96c7; border-radius: 50%; }
dialog .course-transcript { border-color: #c7ddeb; border-radius: 13px; background: #fcfeff; padding: 0 19px; }
dialog .course-transcript summary { padding: 17px 0; min-height: 52px; color: #245f87; font-size: 13px; list-style-position: outside; margin-left: 12px; }
dialog .course-transcript summary::marker { color: #3a91bb; }
dialog .course-transcript[open] summary { border-bottom: 1px solid #e0ebf3; margin-bottom: 16px; }
dialog .course-transcript pre { color: #3d596f; line-height: 1.9; font-size: 13px; margin-bottom: 23px; }
dialog .course-transcript .btn { font-size: 12px; }
dialog {
  width: min(810px,calc(100vw - 38px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow-x: hidden;
  border: 1px solid #b2d3e9;
  border-radius: 24px;
  background: #fff;
  color: #1f3e55;
  box-shadow: 0 30px 100px #01183270,0 0 0 5px #ffffff09;
  scrollbar-width: thin;
  scrollbar-color: #b2cbdc transparent;
}
dialog::backdrop { background: #04182ec2; backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
dialog[open] { animation: experience-dialog .28s var(--experience-ease) both; }
dialog .modal-head { position: relative; padding: 27px 28px; border-bottom: 1px solid #cce0ef; background: linear-gradient(120deg,#eff8ff,#f8fcff); gap: 18px; }
dialog .modal-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg,#0065bd,#2bc5db,#b3a5ef); }
dialog .modal-head h2 { font-size: 25px; line-height: 1.3; max-width: 44ch; }
dialog .modal-head p { font-size: 12px; margin-top: 8px; color: #5e7890; line-height: 1.7; }
dialog .modal-head > .btn { flex: none; width: 44px; padding: 10px; border: 1px solid #d0e1ee; border-radius: 12px; background: #fff8; color: #4f708a; }
dialog .modal-head > .btn:hover { background: #fff; border-color: #a0c6df; }
dialog .modal-body { padding: 27px 28px 29px; }
dialog .modal-body > p { font-size: 13px; line-height: 1.8; color: #4d697f; }
dialog .modal-foot { padding: 20px 28px; gap: 11px; border-top: 1px solid #cfe1ee; background: #f4f9fd; }
dialog .modal-foot .btn { font-size: 12px; }
dialog .field-grid { gap: 0 20px; }
dialog .permission-grid { gap: 20px; }
dialog .hr { border-color: #d3e2ee; margin: 27px 0; }
dialog .upload-hint { font-size: 11px; color: #607a90; line-height: 1.75; margin-top: 9px; }
dialog .invite-url { display: block; padding: 18px; border: 1px solid #c4dff1; background: #eef8ff; border-radius: 12px; color: #215d89; line-height: 1.85; font-size: 12px; }
dialog [data-field-row] { padding: 18px; background: #f7fbff; border-color: #d4e4f0; }
dialog [data-field-row] label { margin-top: 3px; }
dialog [data-field-row] .check-label { margin: 0; }
dialog [data-field-editor] > h3 { font-size: 18px; }
dialog [data-field-editor] > p.muted { font-size: 12px; }
dialog .timeline { position: relative; gap: 11px; padding-left: 13px; }
dialog .timeline::before { content: ""; position: absolute; left: 3px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(#8fb9d6,#d7e4ed); }
dialog .timeline > div { position: relative; padding: 16px 18px; border: 1px solid #d3e3ef; border-left: 1px solid #d3e3ef; border-radius: 12px; background: #f8fbfe; }
dialog .timeline > div::before { content: ""; position: absolute; width: 7px; height: 7px; border: 2px solid #2f8abf; border-radius: 50%; left: -14px; top: 21px; background: #fff; }
dialog .timeline strong { color: #315570; font-size: 12px; }
dialog .timeline p { font-size: 11px; color: #6a8092; line-height: 1.7; margin-top: 5px; }
dialog .audit-detail { padding: 9px 11px; background: #edf4f9; border-radius: 7px; color: #5a7288; font-size: 10px; line-height: 1.75; margin-top: 9px; }
dialog #backup-status > .badge { padding: 7px 11px; font-size: 11px; }
dialog #backup-status > .space:not(.notice):not(.error) { padding: 17px 19px; border: 1px solid #d7e5ef; border-radius: 12px; background: #f9fcff; }
dialog #backup-status strong { color: #254e6c; font-size: 12px; }
dialog #backup-status p { color: #59748b; font-size: 12px; line-height: 1.7; }
#toast { bottom: 25px; padding: 15px 23px; border: 1px solid #5bc0e260; border-radius: 14px; background: linear-gradient(120deg,#073759,#0a2945); color: #effaff; box-shadow: 0 12px 36px #05234635,inset 0 1px 0 #b7edff0d; font-size: 13px; line-height: 1.65; }
#toast.visible { animation: experience-toast .24s var(--experience-ease) both; }
.login { min-height: 100dvh; background: #f0f6fd; }
.login .login-story { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 95% 10%,#24abc035,transparent 48%),radial-gradient(ellipse at 10% 90%,#5378c923,transparent 50%),linear-gradient(145deg,#093953,#071d35 70%); padding: clamp(35px,6vw,88px); }
.login .login-story::before { content: ""; position: absolute; pointer-events: none; inset: 0; z-index: -1; background-image: linear-gradient(#98eaff0b 1px,transparent 1px),linear-gradient(90deg,#98eaff0b 1px,transparent 1px); background-size: 65px 65px; -webkit-mask-image: radial-gradient(ellipse at 100% 40%,#000,transparent 80%); mask-image: radial-gradient(ellipse at 100% 40%,#000,transparent 80%); }
.login .login-story::after { content: ""; pointer-events: none; position: absolute; z-index: -1; right: -170px; bottom: 13%; width: 370px; height: 370px; border: 1px solid #70d9ef27; border-radius: 50%; box-shadow: 0 0 0 42px #70d9ef07,0 0 0 83px #70d9ef05; }
.login .login-brand { background: linear-gradient(135deg,#f7fcff,#e7f2fa); border: 1px solid #ffffffb8; padding: 15px 17px; border-radius: 18px; box-shadow: 0 14px 30px #0002; width: 204px; }
.login .login-brand img { width: 169px; height: auto; display: block; mix-blend-mode: multiply; }
.login .login-story .eyebrow { color: #a1e1ec; letter-spacing: .2em; font-size: 10px; margin-bottom: 19px; }
.login .login-story h1 { color: #effaff; font-size: clamp(38px,4vw,61px); line-height: 1.12; max-width: 580px; }
.login .login-story p { margin-top: 23px; color: #bad5e7; font-size: 16px; line-height: 1.85; max-width: 450px; }
.login .login-story footer { color: #97b9d1; font-size: 11px; line-height: 1.8; max-width: 400px; }
.login .login-form { background: radial-gradient(ellipse at 100% 0,#e1f4ff,transparent 65%),#f6faff; padding: 45px; }
.login .login-box { padding: 36px; max-width: 460px; border: 1px solid #c8deee; border-radius: 25px; background: #fff; box-shadow: 0 22px 65px #173d6514; }
.login .login-box h2 { font-size: 30px; color: #1b405b; }
.login .login-box > p.muted { font-size: 13px; line-height: 1.85; margin-top: 15px; }
.login .login-box .btn { margin-top: 23px; }
.login .signin-foot { color: #607d93; font-size: 11px; line-height: 1.9; border-color: #d7e6f0; padding-top: 22px; margin-top: 28px; }
.login #code { letter-spacing: .2em; font-size: 21px; font-variant-numeric: tabular-nums; padding: 13px 16px; }
.login #code-notice { font-size: 12px; }
/* Optional enhancements mounted by experience.js. */
.shell .experience-command { gap: 7px; min-height: 42px; padding: 9px 13px; font-size: 11px; border-radius: 10px; background: #eef6fc; border-color: #d0e3ef; color: #4b6d87; box-shadow: none; }
.shell .experience-command kbd { padding: 1px 4px; border: 1px solid #c8dcea; border-radius: 4px; font-size: 9px; color: #627e92; background: #fff; }
.shell .experience-motion-toggle, .shell .experience-compact-toggle { min-height: 44px; padding: 10px 12px; font-size: 11px; }
.shell .experience-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shell .workspace-intro { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px; margin-bottom: 24px; padding: 26px 28px; border: 1px solid #bedbed; border-radius: 20px; background: linear-gradient(120deg,#f7fcff,#ebf7ff); box-shadow: 0 8px 30px #184b7509; }
.shell .workspace-intro h2 { font-size: 24px; color: #234b68; }
.shell .workspace-intro p { font-size: 13px; line-height: 1.8; color: #57758d; max-width: 70ch; }
.shell .workspace-intro .eyebrow { color: #257496; font-size: 9px; letter-spacing: .15em; margin-bottom: 9px; }
.shell .workspace-shortcuts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.shell .workspace-shortcuts .btn { font-size: 11px; background: #ffffffb8; border-color: #c6dfef; }
.shell .workspace-orbit { align-self: center; display: grid; place-content: center; width: 92px; height: 92px; border: 1px solid #b5d9ed; border-radius: 50%; background: radial-gradient(circle,#fff 40%,#d9f0fb 100%); box-shadow: 0 0 0 10px #e1f1f766,inset 0 0 18px #cee9f95c; color: #3491b4; flex: none; }
.shell .workspace-orbit svg { width: 30px; height: 30px; }
.shell .experience-chapter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid #c9dfed; border-radius: 14px; background: #f5faff; margin-bottom: 22px; }
.shell .experience-chapter strong { font-size: 12px; color: #315b77; }
.shell .experience-chapter p { font-size: 11px; color: #607d93; }
.shell .course-cover { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; overflow: hidden; width: 106px; height: 116px; border: 1px solid #c3daf0; border-radius: 15px; background: linear-gradient(145deg,#edf8ff,#e0eafa); color: #3a75b0; }
.shell .course-cover::before { content: ""; position: absolute; z-index: -1; width: 100px; height: 100px; border: 1px solid #87acd534; border-radius: 50%; right: -33px; top: -32px; box-shadow: 0 0 0 14px #87acd50d,0 0 0 28px #87acd508; }
.shell .course-cover svg { width: 35px; height: 35px; }
.shell .course-cover span { position: absolute; bottom: 10px; left: 10px; color: #597ea4; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.shell .course-row:nth-child(3n+2) .course-cover { background: linear-gradient(145deg,#f2fafa,#d9edec); color: #428983; border-color: #c0ddda; }
.shell .course-row:nth-child(3n+3) .course-cover { background: linear-gradient(145deg,#f6f3ff,#e8e1f5); color: #7a65b3; border-color: #d3c8e9; }
.shell .experience-enter { animation: experience-enter .55s var(--experience-ease) backwards; animation-delay: var(--experience-delay,0ms); }
.shell .experience-ready .experience-enter { will-change: auto; }
.shell.experience-paused::before, .shell[data-motion="paused"]::before { animation-play-state: paused; }
.shell.experience-paused .experience-enter, .shell[data-motion="paused"] .experience-enter { animation: none; }
.shell.experience-compact .document-row { padding-top: 12px; padding-bottom: 12px; }
.shell.experience-compact .course-row { padding-top: 18px; padding-bottom: 18px; }
.shell.experience-compact .stat { min-height: 95px; padding: 18px 22px; }
/* Shared chrome and workspace features. */
.shell .workspace-frame { position: relative; min-width: 0; }
.shell .shell-ambient, .shell .experience-ambient { position: fixed; inset: 0 0 0 264px; z-index: -1; pointer-events: none; overflow: hidden; }
.shell .shell-beam { position: absolute; display: block; width: 44vw; height: 44vw; max-width: 820px; max-height: 820px; border-radius: 50%; background: radial-gradient(circle,#64c8f314 0,transparent 63%); left: 16%; top: -17%; animation: experience-beam 28s ease-in-out infinite alternate; }
.shell .shell-beam:nth-child(2) { left: auto; right: -13%; top: 25%; background: radial-gradient(circle,#a99bea12,transparent 65%); animation-delay: -14s; animation-duration: 34s; }
.shell .shell-grid { position: absolute; inset: 0; background-image: linear-gradient(#45729b08 1px,transparent 1px),linear-gradient(90deg,#45729b08 1px,transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(#0004,transparent 85%); mask-image: linear-gradient(#0004,transparent 85%); }
.shell .experience-orbit { position: absolute; width: 390px; height: 390px; border: 1px solid #4894c10d; border-radius: 50%; }
.shell .experience-orbit-1 { right: -115px; top: 55px; }
.shell .experience-orbit-2 { right: -83px; top: 87px; width: 325px; height: 325px; }
.shell .experience-orbit-3 { left: -180px; bottom: -180px; width: 430px; height: 430px; }
.shell .experience-particle { position: absolute; display: block; width: 3px; height: 3px; border-radius: 50%; background: #5d96b845; animation: experience-particle 12s ease-in-out infinite alternate; }
.shell .experience-particle-1 { top: 13%; left: 17%; }
.shell .experience-particle-2 { top: 42%; left: 79%; animation-delay: -3s; }
.shell .experience-particle-3 { top: 81%; left: 23%; animation-delay: -7s; }
.shell .experience-particle-4 { top: 19%; left: 61%; animation-delay: -2s; }
.shell .experience-particle-5 { top: 61%; left: 91%; animation-delay: -9s; }
.shell .experience-particle-6 { top: 89%; left: 68%; animation-delay: -5s; }
.shell .experience-particle-7 { top: 39%; left: 36%; animation-delay: -11s; }
.shell .experience-particle-8 { top: 70%; left: 52%; animation-delay: -1s; }
.shell .sidebar-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin: -9px 5px 26px; color: #a9d7dc; font-size: 9px; letter-spacing: .08em; }
.shell .sidebar-status > span:first-child, .shell .sidebar-status .status-dot { width: 5px; height: 5px; border-radius: 50%; background: #56d6b1; box-shadow: 0 0 9px #56d6b15c; flex: none; animation: experience-status 4s ease-in-out infinite; }
.shell .nav-label { display: block; color: inherit; font-size: 12px; font-weight: 600; }
.shell .nav-caption { display: block; font-size: 9px; font-weight: 400; color: #8cabbe; margin-top: 4px; line-height: 1.5; }
.shell .nav button.active .nav-caption { color: #acd6e9; }
.shell .sidebar-story { position: relative; padding: 17px 15px; margin: 27px 5px 0; border: 1px solid #93c7e51c; border-radius: 13px; background: linear-gradient(130deg,#59aecd09,#98a6fb06); color: #c7dce9; }
.shell .sidebar-story .eyebrow { padding: 0; margin: 0 0 8px; color: #80bccf; font-size: 8px; letter-spacing: .15em; }
.shell .sidebar-story p { font-size: 11px; color: #b2cddd; line-height: 1.8; margin: 0; }
.shell .topbar-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.shell .experience-density-toggle { font-size: 11px; padding: 10px 12px; min-height: 44px; background: #fff8; }
.shell .experience-motion-toggle { background: #fff8; }
.shell .experience-motion-toggle[aria-pressed="false"] { color: #6b7992; background: #f4f6fa; }
.shell .experience-density-toggle[aria-pressed="true"] { color: #066193; border-color: #a6d0e6; background: #e9f6fe; }
.shell .page-head.workspace-intro { display: flex; flex-wrap: nowrap; min-height: 192px; padding: 33px 35px; margin-bottom: 25px; border-color: #4b8bb657; border-radius: 25px; background: linear-gradient(120deg,#082b49,#0a385c 57%,#123558); color: #fff; box-shadow: 0 16px 38px #0b315c17,inset 0 1px 0 #b7e6ff11; }
.shell .page-head.workspace-intro h1 { color: #fff; }
.shell .page-head.workspace-intro p { color: #c7dae9; font-size: 14px; margin-top: 13px; }
.shell .page-head.workspace-intro .eyebrow { color: #b4eaf9; font-size: 9px; letter-spacing: .19em; margin-bottom: 14px; }
.shell .workspace-intro-copy { flex: 1; min-width: 0; max-width: 780px; position: relative; z-index: 1; }
.shell .workspace-intro-actions { display: flex; flex-direction: column; align-items: flex-end; flex: none; gap: 12px; position: relative; z-index: 1; }
.shell .workspace-intro-actions > .btn { border-color: #a2d6f645; background: #e2f7ff0d; color: #ecf8ff; font-size: 12px; }
.shell .workspace-intro-actions > .btn:hover { border-color: #b5edff85; background: #c7f1ff1b; }
.shell .workspace-intro-actions > .btn.primary { background: #f0fbff; border-color: #effaff; color: #075183; box-shadow: 0 7px 21px #00162c22; }
.shell .workspace-intro-actions > .btn.primary:hover { background: #d5f4ff; border-color: #d5f4ff; }
.shell .workspace-access-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #b5d5e52b; border-radius: 8px; background: #d3f1ff06; color: #a8cedf; font-size: 9px; line-height: 1.6; }
.shell .workspace-access-chip > svg { width: 12px; height: 12px; color: #9ed8e4; }
.shell .page-head .workspace-orbit { position: absolute; pointer-events: none; right: 23px; bottom: -40px; width: 190px; height: 190px; border-color: rgba(var(--experience-accent-rgb),.13); border-radius: 50%; color: rgba(var(--experience-accent-rgb),.22); background: none; box-shadow: 0 0 0 18px rgba(var(--experience-accent-rgb),.02),0 0 0 42px rgba(var(--experience-accent-rgb),.015); z-index: -1; }
.shell .page-head .workspace-orbit > span { position: absolute; inset: 22px; display: grid; place-content: center; border: 1px solid rgba(var(--experience-accent-rgb),.14); border-radius: 50%; }
.shell .page-head .workspace-orbit > span:nth-child(2) { inset: 46px; }
.shell .page-head .workspace-orbit > span:nth-child(3) { inset: 70px; border-radius: 16px; transform: rotate(15deg); }
.shell .page-head .workspace-orbit svg { width: 26px; height: 26px; }
.shell .stat-index { position: absolute; right: 17px; top: 12px; font-size: 9px; color: #9db6cb; letter-spacing: .07em; }
.shell .stat-edge { position: absolute; inset: auto 19px 0; height: 2px; background: linear-gradient(90deg,#63b5e9,transparent); opacity: .5; }
.shell .stat:nth-child(2) .stat-edge { background: linear-gradient(90deg,#64bfa0,transparent); }
.shell .stat:nth-child(3) .stat-edge { background: linear-gradient(90deg,#b0a0df,transparent); }
.shell .experience-light::after { content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(150px circle at var(--experience-light-x,50%) var(--experience-light-y,50%),#38aee614,transparent 80%); opacity: 0; transition: opacity .25s; }
.shell .experience-light-active::after { opacity: 1; }
.shell .experience-loading { display: grid; justify-items: center; align-content: center; gap: 17px; min-height: 240px; padding: 42px 25px; border: 1px solid #d1e3ee; border-radius: 19px; background: radial-gradient(ellipse at 50% 30%,#e4f4fe,transparent 70%),#fafcff; color: #52738d; font-size: 12px; }
.shell .loading-symbol { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #bcdced; border-radius: 16px; background: #eef9ff; color: #227cae; box-shadow: 0 8px 28px #2d7bad0e; }
.shell .loading-symbol::before { content: ""; position: absolute; width: 75px; height: 75px; border: 1px solid transparent; border-top-color: #68b7df; border-right-color: #68b7df; border-radius: 50%; animation: experience-spin 2s linear infinite; }
.shell .loading-symbol svg { width: 24px; height: 24px; }
.shell .loading-lines { display: grid; gap: 8px; width: min(230px,80%); }
.shell .loading-line { display: block; height: 5px; border-radius: 5px; background: linear-gradient(90deg,#dcecf7,#b6ddf2,#dcecf7); background-size: 200% 100%; animation: experience-loading 1.8s ease-in-out infinite; }
.shell .loading-line:nth-child(2) { width: 82%; justify-self: center; animation-delay: .15s; }
.shell .loading-line:nth-child(3) { width: 62%; justify-self: center; animation-delay: .3s; }
.shell .experience-enter { animation: none; }
.shell[data-motion="on"] .experience-enter:not(.experience-ready) { opacity: 0; transform: translateY(12px); }
.shell[data-motion="on"] .experience-enter.experience-ready { animation: experience-enter .55s var(--experience-ease) backwards; animation-delay: var(--experience-delay,0ms); }
.shell[data-motion="off"] .experience-enter { animation: none; opacity: 1; transform: none; }
.shell[data-motion-active="false"]::before,
.shell[data-motion-active="false"] .experience-enter.experience-ready,
.shell[data-motion-active="false"] :is(.shell-beam,.experience-particle,.loading-line),
.shell[data-motion-active="false"] .loading-symbol::before,
.shell[data-motion-active="false"] .sidebar-status > span:first-child { animation-play-state: paused; }
.shell[data-motion-active="false"] .experience-light::after { opacity: 0; }
.shell[data-density="compact"] .document-row { padding-top: 12px; padding-bottom: 12px; }
.shell[data-density="compact"] .course-row { padding-top: 18px; padding-bottom: 18px; }
.shell[data-density="compact"] .stat { min-height: 95px; padding: 18px 22px; }
/* Native quick navigation dialog is independent of the work dialog. */
dialog.experience-command-dialog { width: min(670px,calc(100vw - 32px)); max-height: min(720px,calc(100dvh - 48px)); border-color: #99cce3; background: #f8fcff; border-radius: 23px; }
.experience-command-dialog .experience-command-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 25px; border-bottom: 1px solid #79b2d332; background: radial-gradient(ellipse at 100% 0,#25b6d622,transparent 65%),linear-gradient(120deg,#082b49,#0a3455); color: #fff; }
.experience-command-dialog .experience-command-head h2 { color: #effaff; font-size: 23px; letter-spacing: -.035em; }
.experience-command-dialog .experience-command-close { display: grid; place-items: center; min-width: 44px; width: 44px; height: 44px; padding: 11px; border: 1px solid #a9daed37; border-radius: 11px; background: #c4f1ff08; color: #c8e6f4; transition: background .18s,border-color .18s; }
.experience-command-dialog .experience-command-close:hover { background: #b5e7fa19; border-color: #b7e7f568; }
.experience-command-dialog .experience-command-close:focus-visible { outline-color: #8edfff; box-shadow: 0 0 0 6px #49b5df20; }
.experience-command-dialog .experience-command-close svg { width: 18px; height: 18px; }
.experience-command-dialog .experience-command-search-label { display: block; margin: 21px 25px 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #5a7a93; font-weight: 700; }
.experience-command-dialog input.experience-command-search { display: block; width: calc(100% - 50px); margin: 0 25px 18px; min-height: 54px; padding: 15px 16px; border: 1px solid #aecfe4; border-radius: 13px; background: #fff; color: #244e6a; font-size: 15px; box-shadow: 0 4px 15px #18507c08; }
.experience-command-dialog .experience-command-results { display: grid; gap: 6px; max-height: 388px; overflow-y: auto; padding: 0 17px 20px; scrollbar-width: thin; scrollbar-color: #b5d1e3 transparent; }
.experience-command-dialog .experience-command-option { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 69px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; color: #254b68; transition: border-color .15s,background .15s; }
.experience-command-dialog .experience-command-option:hover, .experience-command-dialog .experience-command-option[aria-selected="true"] { border-color: #b7d7ec; background: #eaf5fd; }
.experience-command-dialog .experience-command-icon { display: grid; place-items: center; flex: none; width: 35px; height: 35px; border: 1px solid #c9dfed; border-radius: 10px; background: #f6fbff; color: #277aac; }
.experience-command-dialog .experience-command-icon svg { width: 18px; height: 18px; }
.experience-command-dialog .experience-command-option[aria-selected="true"] .experience-command-icon { background: #d7edfb; border-color: #aacfe5; color: #136ca0; }
.experience-command-dialog .experience-command-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.experience-command-dialog .experience-command-label { font-size: 13px; font-weight: 650; line-height: 1.5; color: #294f6b; }
.experience-command-dialog .experience-command-description { font-size: 10px; line-height: 1.6; color: #648198; }
.experience-command-dialog .experience-command-key { flex: none; display: grid; place-items: center; width: 25px; height: 24px; border: 1px solid #ccdfec; border-radius: 6px; color: #7291a9; background: #fff7; font-size: 13px; }
.experience-command-dialog .experience-command-empty { margin: 9px 9px 0; padding: 30px 22px; border: 1px dashed #bad3e4; border-radius: 13px; background: #f2f8fd; color: #607f96; font-size: 13px; line-height: 1.8; text-align: center; }
.experience-command-dialog .experience-command-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 25px; border-top: 1px solid #d3e4ef; background: #eef6fc; color: #607f96; font-size: 10px; line-height: 1.8; }
.experience-command-dialog .experience-command-count { font-size: 10px; color: #4d7692; }
.login.invite-experience .invite-steps { display: grid; gap: 13px; list-style: none; padding: 0; margin: 30px 0 0; max-width: 430px; }
.login.invite-experience .invite-steps li { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #96d3e225; border-radius: 12px; color: #c1deeb; background: #9cd7ed05; font-size: 12px; line-height: 1.7; }
.login.invite-experience .invite-steps li > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #6dc4dc13; border: 1px solid #8dd9ee2c; color: #a4deed; font-size: 10px; font-variant-numeric: tabular-nums; flex: none; }
.login.invite-experience .invite-assurance { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; padding: 14px 16px; border: 1px solid #d0e5f1; border-radius: 12px; background: #f2f9fe; color: #577b93; font-size: 11px; line-height: 1.8; }
.login.invite-experience .invite-assurance > svg { width: 17px; height: 17px; color: #327b9e; margin-top: 3px; }
.shell .onboarding-next-card { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; padding: 24px 27px; border: 1px solid #b7ded5; border-radius: 18px; background: linear-gradient(120deg,#f0fbf7,#edf9fb); margin-bottom: 23px; box-shadow: 0 8px 25px #1e796d09; }
.shell .onboarding-next-card h3 { font-size: 19px; color: #275b5c; }
.shell .onboarding-next-card p { color: #4c7a7b; font-size: 13px; line-height: 1.8; }
.shell .onboarding-next-card .eyebrow { color: #428c7f; font-size: 9px; letter-spacing: .13em; margin-bottom: 8px; }
.shell .onboarding-next-card .btn { background: #fff; border-color: #b8dcd7; color: #277c71; }
.shell .onboarding-next-card > div:not(.stat-icon) { flex: 1; min-width: 190px; }
.shell .onboarding-next-card > .stat-icon { width: 49px; height: 49px; border-color: #b3dcd4; background: #e3f5ef; color: #2f8c75; }
.shell .sidebar-story > svg { position: absolute; right: 13px; top: 14px; width: 13px; height: 13px; color: #84b7cc; opacity: .5; }
.shell .sidebar-story .eyebrow { padding-right: 18px; }
.shell .side-bottom a { color: #a9cddd; }
.shell .side-bottom a:hover { color: #e2f8ff; }
.shell .space-after, dialog .space-after { margin-bottom: 24px; }
.shell .no-margin, dialog .no-margin { margin: 0; }
dialog .packet-document-option { display: block; padding: 14px 16px; }
dialog .packet-document-option strong { color: #30546f; font-size: 12px; }
dialog .packet-document-option small { display: block; font-size: 10px; line-height: 1.75; margin-top: 4px; }
dialog .record-detail-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 20px; padding: 12px 0; border-bottom: 1px solid #e0eaf2; font-size: 12px; line-height: 1.8; }
dialog .record-detail-line strong { color: #41617b; font-size: 11px; }
.login.invite-experience .login-box > .eyebrow { display: inline-flex; align-items: center; margin-bottom: 17px; padding: 5px 9px; border: 1px solid #c9e2f0; border-radius: 7px; background: #eff8ff; color: #367c9f; font-size: 8px; letter-spacing: .1em; }
.login.invite-experience .invite-steps strong { display: block; color: #d3e9f4; font-size: 12px; font-weight: 600; }
.login.invite-experience .invite-steps small { display: block; font-size: 10px; line-height: 1.7; color: #9fc1d5; margin-top: 2px; }
.login.invite-experience .login-story .invite-assurance { border-color: #96d3e225; background: #9cd7ed05; color: #aacddd; font-size: 11px; }
.login.invite-experience .login-story .invite-assurance small { color: inherit; font-size: 11px; line-height: 1.8; }
.login.invite-experience .login-story .invite-assurance > svg { color: #91c5d8; }
@keyframes experience-beam { from { transform: translate3d(-2%,0,0); opacity: .65; } to { transform: translate3d(8%,6%,0); opacity: 1; } }
@keyframes experience-particle { from { transform: translateY(0); opacity: .25; } to { transform: translateY(-16px); opacity: .6; } }
@keyframes experience-status { 0%,100% { box-shadow: 0 0 8px #56d6b13d; } 50% { box-shadow: 0 0 12px #56d6b177; } }
@keyframes experience-loading { 0%,100% { background-position: 0 50%; opacity: .6; } 50% { background-position: 100% 50%; opacity: 1; } }
@keyframes experience-ambient { from { opacity: .55; } to { opacity: 1; } }
@keyframes experience-spin { to { transform: rotate(360deg); } }
@keyframes experience-dialog { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes experience-toast { from { opacity: 0; transform: translate(-50%,8px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes experience-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media(min-width:1450px) {
  .shell .main { padding: 38px 46px 65px; }
  .shell .topbar, .shell .preview-banner { padding-left: 46px; padding-right: 46px; }
  .shell .page-head { padding: 35px 39px; min-height: 195px; }
  .shell .library-layout { grid-template-columns: 230px minmax(0,1fr); gap: 26px; }
}
@media(max-width:1200px) {
  .shell { grid-template-columns: 226px minmax(0,1fr); }
  .shell .sidebar { padding: 26px 12px 20px; }
  .shell .sidebar-brand { padding: 16px 12px; margin-left: 3px; margin-right: 3px; }
  .shell .sidebar-brand img { width: 166px; }
  .shell .nav button { padding: 11px; gap: 10px; font-size: 12px; }
  .shell .nav button > svg { width: 30px; height: 30px; padding: 6px; }
  .shell .main { padding: 27px 25px 50px; }
  .shell .topbar { padding: 0 25px; }
  .shell .preview-banner { padding-left: 25px; padding-right: 25px; }
  .shell .page-head { padding: 27px; min-height: 170px; }
  .shell .page-head h1 { font-size: 32px; }
  .shell .page-head p { font-size: 13px; max-width: 57ch; }
  .shell .page-head > .btn { font-size: 11px; padding: 11px 13px; }
  .shell .library-layout { grid-template-columns: 190px minmax(0,1fr); gap: 17px; }
  .shell .onboarding-layout { grid-template-columns: 236px minmax(0,1fr); gap: 20px; }
  .shell .stat { padding: 21px 17px; gap: 12px; }
  .shell .stat-icon { width: 43px; height: 43px; border-radius: 12px; }
  .shell .stat-value { font-size: 28px; }
  .shell .stat-label { font-size: 11px; }
  .shell .document-row { padding: 18px 20px; gap: 13px; }
  .shell .row-actions { gap: 4px; }
  .shell .row-actions .btn { padding: 10px; }
  .shell .course-actions { flex-basis: 135px; }
  .shell .course-row { padding: 24px 20px; gap: 15px; }
  .shell .experience-command kbd { display: none; }
  .shell .shell-ambient, .shell .experience-ambient { left: 226px; }
  .shell .topbar-actions { gap: 8px; }
  .shell .topbar :is(.experience-motion-toggle,.experience-density-toggle) { width: 44px; min-width: 44px; padding: 10px; }
  .shell .topbar :is(.experience-motion-toggle,.experience-density-toggle) > span { display: none; }
  .shell .page-head.workspace-intro { min-height: 180px; padding: 29px; }
  .shell .page-head.workspace-intro p { font-size: 13px; }
  .shell .workspace-intro-actions > .btn { font-size: 11px; padding: 11px 13px; }
}
@media(max-width:1000px) and (min-width:801px) {
  .shell { grid-template-columns: 212px minmax(0,1fr); }
  .shell .sidebar-brand img { width: 153px; }
  .shell .nav .num { display: none; }
  .shell .main { padding: 24px 21px 45px; }
  .shell .topbar { padding: 0 21px; }
  .shell .page-head { flex-wrap: wrap; gap: 17px; padding: 26px; }
  .shell .page-head h1 { font-size: 30px; }
  .shell .page-head p { max-width: none; }
  .shell .stats { gap: 11px; }
  .shell .stat { padding: 20px 15px; min-height: 105px; }
  .shell .stat .stat-icon { display: none; }
  .shell .library-layout { grid-template-columns: 165px minmax(0,1fr); gap: 14px; }
  .shell .category-list { padding: 12px 7px; }
  .shell .category { padding: 10px 9px; font-size: 11px; }
  .shell .searchbar { flex-wrap: wrap; padding: 17px; }
  .shell .search-input { flex-basis: 100%; }
  .shell .searchbar select { max-width: none; width: 100%; }
  .shell .document-row { flex-wrap: wrap; }
  .shell .document-row .doc-main { min-width: calc(100% - 61px); }
  .shell .document-row .row-actions { margin-left: 57px; }
  .shell .course-row { flex-wrap: wrap; }
  .shell .course-row .doc-main { min-width: calc(100% - 65px); }
  .shell .course-actions { flex-basis: 100%; margin-left: 64px; justify-content: flex-start; padding-top: 0; }
  .shell .course-actions .btn { width: auto; }
  .shell .onboarding-layout { grid-template-columns: 1fr; }
  .shell .checklist { display: flex; flex-wrap: wrap; }
  .shell .checklist button { flex: 1 1 190px; }
  .shell .user-email { display: none; }
  .shell .experience-command { width: 44px; padding: 10px; font-size: 0; gap: 0; }
  .shell .experience-command > span { display: none; }
  .shell .shell-ambient, .shell .experience-ambient { left: 212px; }
  .shell .page-head.workspace-intro { flex-wrap: wrap; gap: 20px; padding: 27px; }
  .shell .workspace-intro-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 11px; }
}
@media(max-width:800px) {
  .shell { display: block; }
  .shell .sidebar { position: static; height: auto; padding: 20px 22px 19px; overflow: visible; }
  .shell .sidebar-brand { display: inline-block; padding: 11px 15px; margin: 0; border-radius: 14px; }
  .shell .sidebar-brand img { width: 145px; height: auto; }
  .shell .sidebar-brand .brand-caption { display: none; }
  .shell .sidebar .eyebrow { display: none; }
  .shell .nav { grid-template-columns: 1fr 1fr; margin-top: 18px; gap: 8px; }
  .shell .nav button { min-height: 53px; padding: 10px 13px; font-size: 12px; border-color: #97c9e912; background: #8ac2ed04; }
  .shell .nav button > svg { width: 29px; height: 29px; padding: 6px; }
  .shell .nav button:hover { transform: none; }
  .shell .nav button.active::before { left: -1px; height: 19px; }
  .shell .nav .num { font-size: 9px; }
  .shell .side-bottom { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin-top: 9px; }
  .shell .side-bottom::before { display: none; }
  .shell .side-bottom .btn { width: auto; min-height: 44px; font-size: 10px; padding: 10px 11px; margin-top: 0; }
  .shell .side-bottom .btn > svg { width: 15px; height: 15px; }
  .shell .side-bottom p { display: none; }
  .shell .topbar { height: 76px; padding: 0 22px; gap: 10px; }
  .shell .user-email { display: none; }
  .shell .user-name { font-size: 11px; }
  .shell .avatar { width: 36px; height: 36px; font-size: 11px; }
  .shell .breadcrumb { font-size: 10px; gap: 3px; }
  .shell .breadcrumb span { font-size: 11px; margin-left: 2px; }
  .shell .main { padding: 25px 22px 44px; }
  .shell .page-head { padding: 27px; min-height: 170px; border-radius: 21px; gap: 20px; }
  .shell .page-head h1 { font-size: 31px; }
  .shell .page-head p { max-width: 60ch; font-size: 13px; }
  .shell .page-head .eyebrow { margin-bottom: 13px; }
  .shell .stats { gap: 12px; }
  .shell .stat { padding: 19px; min-height: 101px; }
  .shell .stat-icon { display: none; }
  .shell .stat-value { font-size: 27px; }
  .shell .stat-label { font-size: 11px; }
  .shell .library-layout { display: block; }
  .shell .category-list { display: flex; flex-wrap: wrap; padding: 14px; gap: 7px; margin-bottom: 20px; }
  .shell .category-list h3 { width: 100%; padding: 0 2px 7px; }
  .shell .category { border-color: #d1e3ef; background: #fff; padding: 10px 13px; font-size: 11px; }
  .shell .category-count { display: none; }
  .shell .onboarding-layout { grid-template-columns: 1fr; }
  .shell .checklist { display: flex; flex-wrap: wrap; }
  .shell .checklist button { flex: 1 1 195px; }
  .shell .grid2, .shell .grid3 { gap: 16px; }
  .shell .packet-card, .shell .profile-card { padding: 22px; }
  .shell .course-filters { grid-template-columns: 1fr 1fr; gap: 17px; }
  .shell .course-search { grid-column: 1/-1; }
  .shell .workspace-intro { padding: 23px; }
  .shell .workspace-orbit { width: 76px; height: 76px; }
  .shell .workspace-intro h2 { font-size: 22px; }
  .shell .experience-command kbd { display: none; }
  .login { grid-template-columns: 1fr; }
  .login .login-story { padding: 35px; gap: 35px; }
  .login .login-brand { width: 185px; padding: 12px 15px; }
  .login .login-brand img { width: 153px; }
  .login .login-story h1 { font-size: 43px; }
  .login .login-story p { font-size: 15px; margin-top: 18px; max-width: 56ch; }
  .login .login-form { padding: 35px; }
  .login .login-box { max-width: 560px; }
  .shell .shell-ambient, .shell .experience-ambient { left: 0; }
  .shell .sidebar-status { display: inline-flex; margin: 0 0 0 18px; vertical-align: middle; font-size: 8px; }
  .shell .sidebar-story { display: none; }
  .shell .nav-caption { font-size: 8px; line-height: 1.5; margin-top: 3px; }
  .shell .nav-label { font-size: 11px; }
  .shell .topbar-actions { gap: 7px; }
  .shell .page-head.workspace-intro { padding: 28px; min-height: 175px; }
  .shell .workspace-intro-actions { gap: 11px; }
  .shell .page-head .workspace-orbit { display: grid; }
}
@media(max-width:650px) {
  .shell .page-head { flex-wrap: wrap; min-height: 0; gap: 19px; }
  .shell .page-head > .btn { padding: 11px 15px; }
  .shell .course-filters { grid-template-columns: 1fr; padding: 20px; }
  .shell .course-search { grid-column: auto; }
  .shell .course-row { flex-wrap: wrap; padding: 23px 20px; gap: 14px; }
  .shell .course-row .doc-main { min-width: calc(100% - 64px); }
  .shell .course-row .doc-title { font-size: 15px; }
  .shell .course-actions { flex-basis: 100%; margin-left: 63px; justify-content: flex-start; padding: 0; }
  .shell .course-actions .btn { width: auto; flex: 1 1 128px; }
  .shell .course-cover { width: 78px; height: 96px; }
  .shell .course-cover svg { width: 29px; height: 29px; }
  .shell .course-cover span { left: 8px; font-size: 7px; }
  .shell .course-row:has(.course-cover) .doc-main { min-width: calc(100% - 94px); }
  .shell .course-row:has(.course-cover) .course-actions { margin-left: 0; }
  .shell .course-summary { font-size: 13px; }
  .shell .course-library .list-heading { flex-wrap: wrap; gap: 5px; }
  .shell .course-library .list-heading > span:last-child { display: none; }
  .shell .workspace-intro { grid-template-columns: 1fr; }
  .shell .workspace-orbit { display: none; }
  .shell .topbar .experience-command { width: 42px; min-height: 44px; padding: 10px; font-size: 0; gap: 0; }
  .shell .topbar .experience-command > svg { width: 18px; height: 18px; }
  .shell .topbar .experience-command { min-width: 44px; width: 44px; }
  .shell .topbar .experience-command > span { display: none; }
  .shell .page-head.workspace-intro { flex-wrap: wrap; min-height: 0; padding: 27px; }
  .shell .workspace-intro-copy { flex-basis: 100%; }
  .shell .workspace-intro-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .shell .workspace-access-chip { font-size: 8px; }
}
@media(max-width:550px) {
  .shell .sidebar { padding: 18px 16px 17px; }
  .shell .sidebar-brand { padding: 10px 13px; border-radius: 13px; }
  .shell .sidebar-brand img { width: 135px; }
  .shell .nav { margin-top: 16px; gap: 7px; }
  .shell .nav button { padding: 10px; font-size: 11px; gap: 8px; }
  .shell .nav button > svg { width: 28px; height: 28px; padding: 6px; border-radius: 8px; }
  .shell .nav .num { display: none; }
  .shell .side-bottom { gap: 6px; }
  .shell .side-bottom .btn { font-size: 9px; padding: 9px; }
  .shell .topbar { min-height: 70px; height: auto; padding: 13px 16px; }
  .shell .user-name { display: none; }
  .shell .user { gap: 0; }
  .shell .breadcrumb { display: block; font-size: 9px; line-height: 1.8; }
  .shell .breadcrumb span { display: block; margin-left: 0; font-size: 11px; }
  .shell .main { padding: 22px 15px 38px; }
  .shell .page-head { padding: 25px 22px; border-radius: 19px; margin-bottom: 20px; }
  .shell .page-head h1 { font-size: 29px; }
  .shell .page-head p { font-size: 13px; line-height: 1.75; }
  .shell .page-head .eyebrow { font-size: 8px; letter-spacing: .16em; }
  .shell .page-head > .btn { font-size: 11px; }
  .shell .stats { grid-template-columns: 1fr; gap: 9px; margin-bottom: 22px; }
  .shell .stat { padding: 15px 18px; min-height: 72px; border-radius: 13px; display: flex; justify-content: flex-start; gap: 14px; }
  .shell .stat .stat-icon { display: grid; width: 37px; height: 37px; border-radius: 10px; }
  .shell .stat .stat-icon svg { width: 17px; height: 17px; }
  .shell .stat > div:last-child { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
  .shell .stat-value { font-size: 25px; }
  .shell .stat-label { font-size: 11px; margin-top: 0; line-height: 1.6; }
  .shell .stat:hover, .shell .packet-card:hover { transform: none; }
  .shell .card { border-radius: 16px; }
  .shell .section-head { padding: 21px 19px; flex-wrap: wrap; gap: 11px; }
  .shell .section-head h2 { font-size: 21px; }
  .shell .section-head h3 { font-size: 16px; }
  .shell .section-head .muted { font-size: 11px; }
  .shell .card-body { padding: 21px 19px; }
  .shell .grid2, .shell .grid3 { grid-template-columns: 1fr; gap: 15px; }
  .shell .category-list { padding: 12px; max-height: 181px; overflow: auto; margin-bottom: 18px; }
  .shell .category { font-size: 10px; min-height: 44px; padding: 10px 11px; }
  .shell .category-list h3 { font-size: 9px; }
  .shell .searchbar { flex-wrap: wrap; padding: 17px; }
  .shell .search-input { min-width: 100%; }
  .shell .searchbar select { width: 100%; max-width: none; }
  .shell .searchbar :is(input,select) { font-size: 12px; }
  .shell .document-row { padding: 18px 17px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .shell .document-row .file-icon { width: 35px; height: 45px; border-radius: 8px; font-size: 8px; }
  .shell .document-row .file-icon::before { width: 10px; height: 10px; }
  .shell .document-row .file-icon::after { left: 9px; right: 9px; bottom: 7px; }
  .shell .document-row .doc-main { min-width: calc(100% - 50px); }
  .shell .document-row .doc-title { font-size: 12px; min-height: 38px; }
  .shell .doc-meta { font-size: 9px; gap: 6px; margin-top: 4px; }
  .shell .document-row .row-actions { margin-left: 47px; gap: 6px; }
  .shell .row-actions .btn { font-size: 10px; padding: 10px 11px; }
  .shell .row-actions .download-label { display: inline; }
  .shell .list-heading { padding: 12px 17px; font-size: 9px; }
  .shell .pagination { padding: 16px 17px; font-size: 10px; flex-wrap: wrap; gap: 12px; }
  .shell .pagination .flex { gap: 9px; }
  .shell .pagination .btn { font-size: 10px; padding: 10px 12px; }
  .shell .tabs-local { gap: 7px; margin-bottom: 21px; }
  .shell .tabs-local button { min-height: 44px; padding: 10px 13px; font-size: 11px; }
  .shell .packet-card { padding: 23px; border-radius: 16px; }
  .shell .profile-card { padding: 23px; gap: 14px; border-radius: 16px; }
  .shell .profile-card .avatar { width: 43px; height: 43px; border-radius: 13px; }
  .shell .profile-card h3 { font-size: 17px; }
  .shell .profile-card p { font-size: 12px; }
  .shell .checklist { padding: 15px; }
  .shell .checklist button { flex: 1 1 100%; min-height: 70px; }
  .shell .reader, dialog .reader { padding: 23px 19px; font-size: 14px; }
  .shell .reader h3, dialog .reader h3 { font-size: 18px; }
  .shell .reader table, dialog .reader table { font-size: 12px; }
  .shell .reader td, dialog .reader td { padding: 10px; }
  .shell .reader-foot { padding: 20px 19px; gap: 11px; }
  .shell .reader-foot .btn { width: 100%; font-size: 12px; }
  .shell .training-row { padding: 21px 19px; gap: 13px; }
  .shell .training-row .doc-main { min-width: 100%; }
  .shell .training-row .stat-icon { width: 36px; height: 36px; }
  .shell .training-row .doc-main strong { font-size: 13px; }
  .shell .course-library .section-head { padding: 22px 19px; }
  .shell .course-library .section-head h2 { font-size: 23px; }
  .shell .course-library .section-head p { font-size: 12px; }
  .shell .course-filters { padding: 19px; gap: 17px; }
  .shell .course-row { padding: 23px 19px; gap: 13px; }
  .shell .course-row .file-icon { width: 41px; height: 52px; }
  .shell .course-row .doc-main { min-width: calc(100% - 55px); }
  .shell .course-row .doc-title { font-size: 15px; line-height: 1.55; }
  .shell .course-row .doc-meta { font-size: 9px; }
  .shell .course-actions { margin-left: 54px; gap: 7px; }
  .shell .course-actions .btn { flex-basis: 120px; font-size: 10px; }
  .shell .course-summary { font-size: 12px; line-height: 1.8; }
  .shell .course-cover { width: 66px; height: 84px; border-radius: 12px; }
  .shell .course-cover svg { width: 24px; height: 24px; }
  .shell .course-cover span { font-size: 6px; }
  .shell .course-row:has(.course-cover) .doc-main { min-width: calc(100% - 80px); }
  .shell .notice, dialog .notice { padding: 16px; font-size: 12px; }
  .shell .empty, dialog .empty { padding: 39px 22px; }
  .shell .empty h3, dialog .empty h3 { font-size: 18px; }
  .shell .empty p, dialog .empty p { font-size: 12px; }
  .shell .preview-banner { padding: 10px 16px; font-size: 10px; line-height: 1.6; }
  .shell .workspace-intro { padding: 22px 20px; border-radius: 17px; }
  .shell .workspace-intro h2 { font-size: 21px; }
  .shell .workspace-intro p { font-size: 12px; }
  .shell .workspace-shortcuts { gap: 7px; }
  .shell .workspace-shortcuts .btn { font-size: 10px; padding: 10px 12px; }
  .shell .experience-chapter { padding: 15px 17px; }
  dialog { width: calc(100vw - 22px); max-height: calc(100dvh - 24px); border-radius: 19px; }
  dialog .modal-head { padding: 23px 19px!important; gap: 12px; }
  dialog .modal-head h2 { font-size: 23px; }
  dialog .modal-head p { font-size: 11px; }
  dialog .modal-body { padding: 22px 19px!important; }
  dialog .modal-foot { padding: 18px 19px!important; flex-wrap: wrap; }
  dialog .modal-foot .btn { flex: 1 1 150px; font-size: 11px; }
  dialog .field-grid, dialog .permission-grid { grid-template-columns: 1fr; }
  dialog label { font-size: 12px; }
  dialog :is(input,select,textarea), .login :is(input,select,textarea) { font-size: 16px; }
  dialog .check-label { font-size: 12px; }
  dialog .course-player { padding: 20px 17px; border-radius: 14px; }
  dialog .course-player h3 { font-size: 18px; }
  dialog .course-player > .muted { font-size: 11px; }
  dialog .course-introduction { font-size: 14px; }
  dialog .course-objectives li { font-size: 12px; padding: 12px 14px 12px 32px; }
  dialog .course-objectives li::before { left: 13px; top: 19px; }
  dialog .course-transcript { padding: 0 15px; }
  dialog .course-transcript summary { font-size: 12px; }
  dialog .course-transcript pre { font-size: 13px; }
  dialog .signature-preview { font-size: 34px; }
  dialog .signature-canvas { height: 170px; }
  #toast { bottom: 16px; padding: 13px 18px; border-radius: 12px; font-size: 12px; }
  .login .login-story { padding: 30px 25px; gap: 31px; }
  .login .login-story h1 { font-size: 38px; }
  .login .login-story p { font-size: 14px; }
  .login .login-form { padding: 25px 16px 35px; }
  .login .login-box { padding: 27px 23px; border-radius: 21px; }
  .login .login-box h2 { font-size: 27px; }
  .login .login-brand { width: 175px; padding: 12px 14px; }
  .login .login-brand img { width: 145px; }
  .shell .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .shell .topbar-actions { gap: 5px; }
  .shell .topbar-actions :is(.experience-command,.experience-motion-toggle,.experience-density-toggle) { width: 44px; min-width: 44px; padding: 10px; }
  .shell .topbar-actions .user { margin-left: 2px; }
  .shell .topbar-actions .avatar { width: 31px; height: 31px; font-size: 10px; }
  .shell .sidebar-status { display: none; }
  .shell .nav-caption { font-size: 8px; }
  .shell .nav-label { font-size: 10px; }
  .shell .page-head.workspace-intro { padding: 25px 22px; border-radius: 19px; gap: 19px; margin-bottom: 20px; }
  .shell .page-head.workspace-intro p { font-size: 13px; }
  .shell .page-head.workspace-intro .eyebrow { font-size: 8px; letter-spacing: .16em; }
  .shell .workspace-intro-actions > .btn { font-size: 11px; padding: 11px 14px; }
  .shell .workspace-access-chip { font-size: 8px; }
  .shell .page-head .workspace-orbit { width: 150px; height: 150px; right: -20px; bottom: -32px; }
  .shell .page-head .workspace-orbit > span:nth-child(3) { inset: 54px; }
  .shell .stat-index { right: 12px; top: 7px; font-size: 7px; }
  .shell .stat-edge { inset: auto 15px 0; }
  .shell[data-density="compact"] .stat { min-height: 66px; padding: 12px 17px; }
  .shell[data-density="compact"] .document-row { padding-top: 11px; padding-bottom: 11px; }
  .shell .onboarding-next-card { padding: 21px 19px; gap: 14px; }
  .shell .onboarding-next-card h3 { font-size: 18px; }
  .shell .onboarding-next-card p { font-size: 12px; }
  .shell .onboarding-next-card > div:not(.stat-icon) { min-width: 150px; }
  .shell .onboarding-next-card > .btn { width: 100%; }
  .experience-command-dialog .experience-command-head { padding: 20px 19px; gap: 13px; }
  .experience-command-dialog .experience-command-head h2 { font-size: 21px; }
  .experience-command-dialog .experience-command-search-label { margin: 19px 20px 10px; font-size: 9px; }
  .experience-command-dialog input.experience-command-search { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); font-size: 16px; }
  .experience-command-dialog .experience-command-results { padding-left: 12px; padding-right: 12px; max-height: min(360px,40dvh); }
  .experience-command-dialog .experience-command-option { gap: 11px; padding: 13px 11px; min-height: 72px; }
  .experience-command-dialog .experience-command-label { font-size: 12px; }
  .experience-command-dialog .experience-command-description { font-size: 10px; }
  .experience-command-dialog .experience-command-key { display: none; }
  .experience-command-dialog .experience-command-foot { padding: 14px 20px; font-size: 9px; gap: 9px; }
  .login.invite-experience .invite-steps { gap: 10px; margin-top: 25px; }
  .login.invite-experience .invite-steps li { padding: 12px 14px; }
}
@media(max-width:360px) {
  .shell .main { padding-left: 12px; padding-right: 12px; }
  .shell .sidebar { padding-left: 12px; padding-right: 12px; }
  .shell .nav button { font-size: 10px; padding: 9px 8px; gap: 7px; }
  .shell .nav button > svg { width: 25px; height: 25px; padding: 5px; }
  .shell .page-head { padding: 23px 19px; }
  .shell .page-head h1 { font-size: 27px; }
  .shell .document-row { padding-left: 15px; padding-right: 15px; }
  .shell .course-actions { margin-left: 0; }
  .shell .course-row .course-cover { display: none; }
  .shell .course-row:has(.course-cover) .doc-main { min-width: 100%; }
  .shell .page-head.workspace-intro { padding: 23px 19px; }
  .shell .topbar-actions { gap: 4px; }
}
/* Reading hierarchy: labels remain legible at every workspace width. */
.shell .nav-label { font-size: 13px; }
.shell .nav-caption { font-size: 11px; line-height: 1.55; }
.shell .sidebar-status { font-size: 11px; letter-spacing: .035em; }
.shell .sidebar .eyebrow { font-size: 11px; letter-spacing: .13em; }
.shell .sidebar-story .eyebrow { font-size: 10px; }
.shell .sidebar-story p { font-size: 12px; }
.shell .side-bottom .btn { font-size: 12px; }
.shell .side-bottom p { font-size: 11px; }
.shell .breadcrumb { font-size: 12px; }
.shell .breadcrumb span { font-size: 13px; }
.shell .page-head p, .shell .page-head.workspace-intro p { font-size: 16px; line-height: 1.75; }
.shell .page-head .eyebrow, .shell .page-head.workspace-intro .eyebrow { font-size: 11px; letter-spacing: .12em; }
.shell .workspace-access-chip { font-size: 11px; }
.shell .stat-label { font-size: 13px; }
.shell .stat-index { font-size: 10px; }
.shell .section-head .muted { font-size: 13px; }
.shell .section-head .eyebrow { font-size: 11px; }
.shell .doc-title { font-size: 14px; }
.shell .doc-meta { font-size: 12px; gap: 8px; }
.shell .row-actions .btn { font-size: 12px; }
.shell .list-heading { font-size: 11px; }
.shell .category-list h3 { font-size: 11px; letter-spacing: .08em; }
.shell .category { font-size: 13px; }
.shell .category-count { font-size: 11px; }
.shell .pagination { font-size: 12px; }
.shell .pagination .btn { font-size: 12px; }
.shell .badge, dialog .badge { font-size: 11px; }
.shell .packet-card p, .shell .profile-card p { font-size: 14px; }
.shell .packet-card .btn, .shell .profile-card .btn { font-size: 13px; }
.shell .checklist button { font-size: 14px; }
.shell .checklist small { font-size: 12px; }
.shell .reader, dialog .reader { font-size: 16px; line-height: 1.8; }
.shell .reader table, dialog .reader table { font-size: 14px; }
.shell .training-row .doc-main strong { font-size: 14px; }
.shell .training-row p.muted { font-size: 14px; }
.shell .course-library .section-head p { font-size: 14px; }
.shell .course-filters label { font-size: 11px; }
.shell .course-filters :is(input,select) { font-size: 14px; }
.shell .course-row .doc-meta { font-size: 12px; }
.shell .course-summary { font-size: 14px; }
.shell .course-actions .btn { font-size: 12px; }
.shell .notice, dialog .notice, .login .notice { font-size: 14px; }
.shell .empty p, dialog .empty p { font-size: 14px; }
.shell label, dialog label, .login label { font-size: 14px; }
.shell .check-label, dialog .check-label { font-size: 14px; }
.shell .tabs-local button { font-size: 13px; }
dialog .modal-head p { font-size: 14px; }
dialog .modal-body > p { font-size: 15px; }
dialog .modal-foot .btn { font-size: 13px; }
dialog .course-player > .muted { font-size: 14px; }
dialog .course-player .upload-hint { font-size: 14px; }
dialog .course-player > .btn { font-size: 13px; }
dialog .course-objectives li { font-size: 14px; }
dialog .course-transcript summary { font-size: 14px; }
dialog .course-transcript pre { font-size: 15px; }
dialog .upload-hint { font-size: 13px; }
dialog .packet-document-option strong { font-size: 14px; }
dialog .packet-document-option small { font-size: 12px; }
dialog .record-detail-line { font-size: 14px; }
dialog .record-detail-line strong { font-size: 13px; }
dialog .timeline strong { font-size: 14px; }
dialog .timeline p { font-size: 13px; }
dialog .audit-detail { font-size: 12px; }
dialog #backup-status strong { font-size: 14px; }
dialog #backup-status p { font-size: 14px; }
.shell .onboarding-next-card .eyebrow { font-size: 11px; }
.shell .onboarding-next-card p { font-size: 14px; }
.experience-command-dialog .experience-command-search-label { font-size: 11px; }
.experience-command-dialog .experience-command-label { font-size: 14px; }
.experience-command-dialog .experience-command-description { font-size: 12px; }
.experience-command-dialog .experience-command-foot, .experience-command-dialog .experience-command-count { font-size: 11px; }
.login .login-box > p.muted { font-size: 15px; }
.login .signin-foot { font-size: 13px; }
.login.invite-experience .login-box > .eyebrow { font-size: 11px; }
.login.invite-experience .invite-steps strong { font-size: 14px; }
.login.invite-experience .invite-steps small { font-size: 12px; }
.login.invite-experience .invite-steps li > span:first-child { font-size: 12px; }
.login.invite-experience .invite-assurance { font-size: 13px; }
.login.invite-experience .login-story .invite-assurance small { font-size: 13px; }
.shell :is(.doc-meta,.list-heading,.user-email,.category-count,.stat-label,.course-summary),
.shell .course-row .doc-meta { color: #526a82; }
.shell .breadcrumb { color: #526a82; }
.shell .experience-command kbd { color: #526a82; }
.shell :is(input,textarea)::placeholder, dialog :is(input,textarea)::placeholder, .login :is(input,textarea)::placeholder { color: #526a82; }
.experience-command-dialog :is(.experience-command-description,.experience-command-foot,.experience-command-count,.experience-command-empty,.experience-command-search-label) { color: #526a82; }
.experience-command-dialog .experience-command-key { color: #526a82; }
@media(max-width:1200px) {
  .shell .nav-label { font-size: 12px; }
  .shell .nav-caption { font-size: 11px; }
  .shell .page-head.workspace-intro p { font-size: 15px; }
  .shell .workspace-access-chip { font-size: 10px; }
}
@media(max-width:1000px) and (min-width:801px) {
  .shell .course-actions { flex: 1 1 calc(100% - 64px); min-width: 0; max-width: calc(100% - 64px); }
}
@media(max-width:800px) {
  .shell .nav button { min-height: 69px; align-items: flex-start; }
  .shell .nav button > svg { margin-top: 2px; }
  .shell .nav-label { font-size: 12px; }
  .shell .nav-caption { font-size: 11px; }
  .shell .breadcrumb { font-size: 11px; }
  .shell .breadcrumb span { font-size: 12px; }
  .shell .sidebar-status { font-size: 10px; }
  .shell .page-head .eyebrow, .shell .page-head.workspace-intro .eyebrow { font-size: 10px; }
  .shell .workspace-access-chip { font-size: 10px; }
  .shell .stat-label { font-size: 12px; }
}
@media(max-width:550px) {
  .shell .nav { gap: 8px; }
  .shell .nav button { padding: 12px 10px; gap: 9px; min-height: 78px; }
  .shell .nav-label { font-size: 12px; line-height: 1.5; }
  .shell .nav-caption { font-size: 10px; line-height: 1.5; }
  .shell .side-bottom .btn { font-size: 11px; }
  .shell .breadcrumb { font-size: 10px; }
  .shell .breadcrumb span { font-size: 11px; }
  .shell .page-head p, .shell .page-head.workspace-intro p { font-size: 15px; }
  .shell .page-head .eyebrow, .shell .page-head.workspace-intro .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .shell .page-head .workspace-eyebrow { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; }
  .shell .page-head .workspace-eyebrow > span:first-child { white-space: nowrap; flex-shrink: 0; }
  .shell .page-head .workspace-eyebrow > span:nth-child(2) { flex-basis: 100%; }
  .shell .workspace-access-chip { font-size: 10px; }
  .shell .workspace-intro-actions { width: 100%; max-width: 100%; flex: 0 1 auto; justify-content: flex-start; align-items: center; }
  .shell .workspace-intro-actions > .btn { max-width: 100%; }
  .shell .workspace-intro-actions > .btn { font-size: 13px; }
  .shell .stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .shell .stat { display: block; min-height: 113px; padding: 14px 9px; text-align: center; }
  .shell .stat .stat-icon { display: none; }
  .shell .stat > div:last-child { display: grid; align-content: start; justify-content: normal; justify-items: center; gap: 7px; width: 100%; }
  .shell .stat-value { font-size: 23px; }
  .shell .stat-label { font-size: 12px; line-height: 1.55; overflow-wrap: normal; }
  .shell .stat-index { display: none; }
  .shell[data-density="compact"] .stat { min-height: 104px; padding: 12px 8px; }
  .shell .stat-index { font-size: 9px; }
  .shell .category { font-size: 12px; }
  .shell .category-list h3 { font-size: 10px; }
  .shell .document-row .doc-title { font-size: 14px; min-height: 44px; }
  .shell .doc-meta, .shell .course-row .doc-meta { font-size: 11px; line-height: 1.7; }
  .shell .row-actions .btn { font-size: 12px; }
  .shell .list-heading { font-size: 11px; }
  .shell .pagination { font-size: 12px; }
  .shell .pagination .btn { font-size: 12px; }
  .shell .section-head .muted { font-size: 12px; }
  .shell .packet-card p, .shell .profile-card p { font-size: 15px; }
  .shell .profile-card .btn { font-size: 13px; }
  .shell .reader, dialog .reader { font-size: 16px; }
  .shell .reader table, dialog .reader table { font-size: 14px; }
  .shell .reader-foot .btn { font-size: 14px; }
  .shell .course-library .section-head p { font-size: 14px; }
  .shell .course-row .doc-title { font-size: 16px; }
  .shell .course-summary { font-size: 14px; }
  .shell .course-actions .btn { font-size: 12px; }
  .shell .course-actions { flex: 1 1 calc(100% - 54px); max-width: calc(100% - 54px); min-width: 0; }
  .shell .course-row:has(.course-cover) .course-actions { flex-basis: 100%; max-width: 100%; }
  .shell .notice, dialog .notice { font-size: 14px; }
  .shell .empty p, dialog .empty p { font-size: 14px; }
  .shell :is(input,select,textarea), .shell .searchbar :is(input,select), .shell .course-filters :is(input,select) { font-size: 16px; }
  dialog .modal-head p { font-size: 13px; }
  dialog .modal-foot .btn { font-size: 13px; }
  dialog .course-player > .muted { font-size: 13px; }
  dialog .course-objectives li { font-size: 14px; }
  dialog .course-transcript summary { font-size: 14px; }
  dialog .course-transcript pre { font-size: 15px; }
  .shell .onboarding-next-card p { font-size: 14px; }
  .experience-command-dialog .experience-command-search-label { font-size: 10px; }
  .experience-command-dialog .experience-command-label { font-size: 14px; }
  .experience-command-dialog .experience-command-description { font-size: 12px; }
  .experience-command-dialog .experience-command-foot { font-size: 11px; }
  .login .login-story p { font-size: 16px; }
  .login.invite-experience .login-story { padding: 24px 22px; gap: 22px; }
  .login.invite-experience .login-story .login-brand { width: 158px; padding: 10px 12px; border-radius: 13px; }
  .login.invite-experience .login-story .login-brand img { width: 132px; }
  .login.invite-experience .login-story .eyebrow { font-size: 10px; margin-bottom: 12px; }
  .login.invite-experience .login-story h1 { font-size: 34px; }
  .login.invite-experience .login-story p { font-size: 15px; line-height: 1.7; margin-top: 14px; }
  .login.invite-experience .invite-steps { display: none; }
  .login.invite-experience .login-story .invite-assurance { display: none; }
  .login.invite-experience .login-form { padding: 24px 16px 32px; }
  .login.invite-experience .login-box { padding: 25px 22px; }
  .login.invite-experience .login-box h2 { font-size: 26px; }
  .login.invite-experience .login-box > p.muted { margin-top: 12px; font-size: 14px; line-height: 1.7; }
  .login.invite-experience .login-box > .eyebrow { font-size: 10px; margin-bottom: 15px; }
  .login.invite-experience .login-box .btn { margin-top: 20px; }
}
@media(max-width:360px) {
  .shell .course-actions { margin-left: 0; flex-basis: 100%; max-width: 100%; }
  .login.invite-experience .login-story h1 { font-size: 31px; }
}
@media(hover:none) {
  .shell .stat:hover, .shell .packet-card:hover, .shell .nav button:hover { transform: none; }
}
body:has(.shell[data-motion="off"]) :is(dialog[open],#toast.visible) { animation: none; }
@media(prefers-reduced-motion:reduce) {
  .shell, .shell *, .shell::before, .shell::after, .shell *::before, .shell *::after, dialog, dialog *, dialog *::before, dialog *::after, dialog::backdrop, .login *, .login *::before, .login *::after, #toast { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .shell .experience-enter { opacity: 1!important; transform: none!important; }
  .shell .empty[role="status"]::before, dialog .empty[role="status"]::before { animation: none!important; border-top-color: #0878bf; border-right-color: #0878bf; }
}
@media print {
  .shell { display: block; background: #fff; }
  .shell::before, .shell::after, .shell .sidebar, .shell .topbar, .shell .preview-banner, .shell .experience-tools, .shell .workspace-intro { display: none!important; }
  .shell .main { max-width: none; padding: 0; }
  .shell .page-head { background: #fff; color: #142a43; border-color: #bbb; box-shadow: none; padding: 20px 0; }
  .shell .page-head :is(h1,p,.eyebrow) { color: #142a43; }
  .shell .page-head::before, .shell .page-head::after { display: none; }
  .shell .card { box-shadow: none; break-inside: avoid; }
  .shell .experience-enter { animation: none; opacity: 1; transform: none; }
  dialog { position: static; max-height: none; width: 100%; box-shadow: none; border-color: #bbb; }
  dialog .modal-head > .btn, dialog .modal-foot { display: none; }
  dialog::backdrop { background: transparent; }
  #toast { display: none!important; }
}

/* Batch access: each selected workspace has its own visible permission. */
dialog #access-form .access-area-fieldset { min-width: 0; margin: 25px 0 20px; padding: 0; border: 0; }
dialog #access-form .access-area-fieldset legend { font-size: 16px; font-weight: 650; color: #173b55; }
dialog #access-form .access-selection-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
dialog #access-form .access-selection-actions .btn { min-height: 44px; font-size: 13px; }
dialog #access-form .access-area-grid { display: grid; gap: 11px; min-width: 0; }
dialog #access-form .access-area-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.72fr); gap: 20px; align-items: center; min-width: 0; padding: 15px 16px; border: 1px solid #c7dce9; border-radius: 12px; background: linear-gradient(130deg,#fcfeff,#f3f8fc); transition: background .18s ease,border-color .18s ease,box-shadow .18s ease; }
dialog #access-form .access-area-row.is-selected { border-color: #78adc5; background: linear-gradient(130deg,#f3faff,#e6f3fa); box-shadow: inset 0 0 0 1px #b6dce941; }
dialog #access-form .access-area-label { display: flex; align-items: center; gap: 10px; min-height: 58px; min-width: 0; margin: 0; cursor: pointer; }
dialog #access-form .access-area-label input { flex: none; width: 19px; height: 19px; min-height: 19px; margin: 0; accent-color: #0059a9; }
dialog #access-form .access-area-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid #c6dfed; border-radius: 9px; background: #e9f4fa; color: #075d99; }
dialog #access-form .access-area-icon svg { width: 19px; height: 19px; }
dialog #access-form .access-area-copy { display: block; min-width: 0; }
dialog #access-form .access-area-copy strong { display: block; color: #173b55; font-size: 14px; font-weight: 600; line-height: 1.45; }
dialog #access-form .access-area-current { display: block; margin-top: 5px; color: #526879; font-size: 12px; font-weight: 400; line-height: 1.65; }
dialog #access-form .access-area-permission { min-width: 0; }
dialog #access-form .access-area-permission label { margin: 0 0 7px; color: #526879; font-size: 12px; font-weight: 550; line-height: 1.5; }
dialog #access-form .access-area-permission select { min-height: 44px; width: 100%; font-size: 13px; }
dialog #access-form .access-area-permission select:disabled { color: #526879; background: #edf3f7; border-color: #d2e0ea; cursor: default; }
dialog #access-form .access-selection-summary { color: #173b55; border-color: #bfd8e8; background: #edf6fb; }
dialog #access-form .access-selection-summary strong { font-size: 14px; font-weight: 650; }
dialog #access-form .access-selection-summary p { font-size: 13px; line-height: 1.75; color: #526879; }
dialog #access-form .access-selection-list { display: grid; gap: 6px; margin: 11px 0; padding-left: 20px; font-size: 13px; line-height: 1.7; }
dialog #access-form #access-confirm { accent-color: #0059a9; }
@media(max-width:600px) {
  dialog #access-form .access-area-row { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 15px; }
  dialog #access-form .access-area-label { min-height: 52px; }
  dialog #access-form .access-area-copy strong { font-size: 15px; }
  dialog #access-form .access-area-permission select { font-size: 16px; }
  dialog #access-form .access-area-current,dialog #access-form .access-area-permission label { font-size: 13px; }
  dialog #access-form .access-selection-actions { gap: 9px; }
  dialog #access-form .access-selection-actions .btn { flex: 1 1 135px; }
}