/* 1/5 — balanced application layout */
html { min-width: 320px; }
.shell { grid-template-columns: 248px minmax(0, 1fr); }
aside { position: sticky; top: 0; height: 100vh; padding: 28px 18px; }
main { width: 100%; max-width: 1680px; padding: 0 44px 64px; }
header { height: 112px; }
.grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 18px; margin-top: 20px; }
.two { grid-template-columns: minmax(520px, 1.45fr) minmax(320px, .85fr); gap: 20px; margin-top: 20px; align-items: start; }
@media (max-width: 1100px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  main { padding-left: 28px; padding-right: 28px; }
  .two { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); width: 100%; overflow-x: hidden; }
  aside { position: static; width: 100%; min-width: 0; height: auto; }
  nav { width: 100%; max-width: 100%; }
  main { padding: 0 18px 36px; }
}

/* 2/5 — readable type hierarchy */
body { font-size: 15px; line-height: 1.55; letter-spacing: .005em; }
header h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
header p { margin-top: 7px; font-size: 14px; }
.brand { font-size: 17px; letter-spacing: .01em; }
nav button { font-size: 14px; font-weight: 520; }
.hero h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.025em; }
.hero > div > small { font-size: 13px; opacity: .82; }
.hero p { font-size: 14px; }
.score { font-size: 48px; line-height: 1; letter-spacing: -.035em; }
.stat small { font-size: 13px; font-weight: 560; }
.stat strong { font-size: 32px; line-height: 1.1; letter-spacing: -.025em; }
.panel h2 { font-size: 18px; line-height: 1.3; font-weight: 720; }
.channel b, .list-item b { font-size: 14px; }
.muted, .list-item small, .channel small { font-size: 12.5px; line-height: 1.55; }
th { font-size: 12px; letter-spacing: .04em; }
td { font-size: 14px; }
@media (max-width: 800px) {
  header h1 { font-size: 24px; }
  .hero h2 { font-size: 28px; }
  .score { font-size: 40px; }
}

/* 3/5 — consistent spacing and card rhythm */
.hero { padding: 34px 36px; border-radius: 18px; min-height: 176px; }
.card, .panel { padding: 24px; border-radius: 14px; }
.stat { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; }
.stat strong { margin-top: 16px; }
.panel h2 { margin-bottom: 18px; }
.channel { grid-template-columns: minmax(190px, 1fr) minmax(170px, .7fr) 56px; gap: 20px; padding: 18px 0; }
.channel > div:first-child { min-width: 0; }
.channel small { display: block; margin-top: 5px; max-width: 48ch; }
.mini-progress { margin-top: 10px; }
.list-item { padding: 17px 0; }
.list-item small { display: inline-block; margin-top: 5px; }
.toolbar { margin-bottom: 20px; }
th, td { padding: 16px 18px; }
.login-card { padding: 44px; }
@media (max-width: 800px) {
  .hero { padding: 26px 28px; min-height: 0; }
  .card, .panel { padding: 20px; }
  .channel { grid-template-columns: minmax(120px,1fr) 130px 44px; gap: 10px; }
}
@media (max-width: 520px) {
  .channel { grid-template-columns: 1fr auto; }
  .channel > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* 4/5 — purposeful color and status system */
:root {
  --ink: #17211d;
  --muted: #6f7d77;
  --line: #e3e9e6;
  --bg: #f4f7f5;
  --nav: #102c24;
  --green: #28745d;
  --mint: #e5f3ed;
  --amber: #a76513;
  --red: #b83b3b;
}
body { background: linear-gradient(180deg, #f7f9f8 0, var(--bg) 220px); }
aside { background: linear-gradient(180deg, #112f27 0%, #0d2821 100%); box-shadow: 12px 0 32px rgba(17,47,39,.06); }
.hero { background: radial-gradient(circle at 82% 25%, rgba(134,221,184,.18), transparent 34%), linear-gradient(120deg,#153c31,#246b55); box-shadow: 0 14px 34px rgba(28,82,65,.16); }
.card, .panel, .table-wrap { border-color: rgba(30,70,57,.09); box-shadow: 0 5px 18px rgba(24,55,45,.045); }
.pill { background: #e8f3ef; color: #24614f; font-weight: 650; }
.pill.high, .high { background: #fbe9e9; color: #a93434; }
.pill.medium, .medium { background: #fff1d8; color: #986014; }
.pill.low { background: #edf1f0; color: #66736e; }
.danger { color: var(--red); }
.mini-progress { background: #e7eeeb; }
.mini-progress i { background: linear-gradient(90deg,#45a27f,#2c7a64); }
th { background: #f8faf9; color: #65746e; }
.login { background: radial-gradient(circle at 25% 18%,#d6eee4,transparent 36%),linear-gradient(145deg,#f8faf9,#edf4f1); }

/* 5/5 — interaction and focus clarity */
button, .btn, a { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
nav button { position: relative; min-height: 44px; padding-left: 16px; }
nav button.active { background: rgba(255,255,255,.11); color: #fff; font-weight: 680; }
nav button.active::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: #83d9b5; }
nav button:hover { background: rgba(255,255,255,.075); transform: translateX(2px); }
.toolbar button, .btn, .primary, .login button { min-height: 42px; border-radius: 9px; font-weight: 680; box-shadow: 0 4px 12px rgba(33,108,82,.13); }
.toolbar button:hover, .btn:not(.secondary):hover, .primary:hover, .login button:hover { background: #205f4c; box-shadow: 0 7px 18px rgba(33,108,82,.2); transform: translateY(-1px); }
.btn.secondary { border: 1px solid #d9e7e1; background: #f2f7f5; color: #245e4d; box-shadow: none; }
.btn.secondary:hover { background: #e6f1ec; border-color: #bdd8cd; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: #f8fbfa; }
input, select, textarea { outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
input:focus, select:focus, textarea:focus { border-color: #55a387 !important; box-shadow: 0 0 0 3px rgba(63,145,113,.13); }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(69,162,127,.35); outline-offset: 2px; }
.close:hover { color: var(--red); transform: rotate(4deg); }
@media (max-width: 800px) {
  nav button.active::before { left: 10px; right: 10px; top: auto; bottom: 2px; width: auto; height: 3px; }
  nav button:hover { transform: none; }
}

/* Doodle theme — warm paper, ink outlines and playful marker accents */
:root {
  --ink: #282722;
  --muted: #746f64;
  --line: #d8d0bf;
  --bg: #f3eddf;
  --nav: #2c3733;
  --green: #2f8984;
  --mint: #dcefeb;
  --amber: #ef9b27;
  --red: #d75b58;
  --paper: #fffaf0;
  --yellow: #edc94a;
  --cyan: #2eacd0;
  --coral: #dd6b62;
}
body {
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 34%, rgba(75,62,39,.045) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255,255,255,.32), transparent 260px);
  background-size: 19px 19px, 23px 23px, auto;
}
aside {
  color: #fffaf0;
  background: #303a36;
  border-right: 2px solid #252b28;
  box-shadow: 7px 0 0 rgba(47,137,132,.18);
}
.brand-mark {
  color: #282722;
  background: var(--yellow);
  border: 2px solid #282722;
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
  box-shadow: 3px 3px 0 #1f2422;
  transform: rotate(-2deg);
}
.brand { font-family: "Kaiti SC", "STKaiti", "KaiTi", cursive; font-size: 19px; }
nav button { color: #d9d4c8; border: 1.5px solid transparent; }
nav button.active {
  color: #282722;
  background: var(--paper);
  border-color: #1e2421;
  border-radius: 7px 11px 8px 10px;
  box-shadow: 3px 3px 0 var(--cyan);
  transform: rotate(-.35deg);
}
nav button.active::before { display: none; }
nav button:hover { color: #fff; background: rgba(255,250,240,.09); }
header h1, .hero h2, .panel h2 {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", sans-serif;
}
header h1 { position: relative; width: max-content; }
header h1::after {
  content: "";
  position: absolute;
  left: 1px; right: -8px; bottom: -5px;
  height: 6px;
  background: var(--yellow);
  border-radius: 50% 35% 55% 40%;
  transform: rotate(-1.5deg);
  opacity: .72;
  z-index: -1;
}
.hero {
  color: #282722;
  background-color: #f8c75d;
  background-image:
    radial-gradient(circle at 85% 22%, rgba(255,255,255,.42) 0 2px, transparent 2.5px),
    linear-gradient(125deg, rgba(255,255,255,.22), transparent 45%);
  background-size: 18px 18px, auto;
  border: 2px solid #282722;
  border-radius: 14px 19px 15px 22px;
  box-shadow: 7px 8px 0 #2f8984;
  transform: rotate(-.12deg);
}
.hero p, .hero > div > small { color: #4d473c; opacity: 1; }
.progress { height: 10px; background: rgba(40,39,34,.16); border: 1.5px solid #282722; }
.progress i { background: #fffaf0; }
.score { font-family: "Trebuchet MS", sans-serif; text-shadow: 2px 2px 0 rgba(255,255,255,.55); }
.card, .panel, .table-wrap {
  background: var(--paper);
  border: 1.8px solid #3c3932;
  border-radius: 10px 14px 11px 16px;
  box-shadow: 4px 5px 0 rgba(67,61,49,.16);
}
.grid .card:nth-child(1) { border-top: 6px solid var(--cyan); transform: rotate(-.25deg); }
.grid .card:nth-child(2) { border-top: 6px solid var(--green); transform: rotate(.2deg); }
.grid .card:nth-child(3) { border-top: 6px solid var(--coral); transform: rotate(-.15deg); }
.grid .card:nth-child(4) { border-top: 6px solid var(--yellow); transform: rotate(.25deg); }
.stat strong { font-family: "Trebuchet MS", sans-serif; }
.panel h2::before { content: "✦"; margin-right: 8px; color: var(--coral); font-family: sans-serif; }
.two .panel:nth-child(2) h2::before { content: "↗"; color: var(--cyan); font-weight: 900; }
.pill {
  color: #274e4b;
  background: #dcefeb;
  border: 1px solid #6baaa3;
  border-radius: 8px 11px 7px 10px;
}
.pill.high, .high { color: #8f332f; background: #f9d8d5; border-color: #d97b73; }
.pill.medium, .medium { color: #7d4d08; background: #ffe5a8; border-color: #d99a32; }
.pill.low { color: #5a625f; background: #e9e8e1; border-color: #aaa99f; }
.mini-progress { height: 8px; background: #e8e1d3; border: 1px solid #b6ad9b; }
.mini-progress i { background: var(--cyan); }
.channel, .list-item, th, td { border-color: #ded5c3; }
th { color: #575248; background: #eee5d4; }
tbody tr:hover { background: #fff4d8; }
.toolbar button, .btn, .primary, .login button {
  color: #282722;
  background: var(--yellow);
  border: 1.8px solid #282722;
  border-radius: 7px 10px 8px 12px;
  box-shadow: 3px 3px 0 #282722;
}
.toolbar button:hover, .btn:not(.secondary):hover, .primary:hover, .login button:hover {
  color: #282722;
  background: #f7d966;
  box-shadow: 1px 1px 0 #282722;
  transform: translate(2px,2px);
}
.btn.secondary { color: #245c58; background: #dff1ed; border: 1.5px solid #477c77; box-shadow: 2px 2px 0 #8bb8b1; }
.btn.secondary:hover { background: #cae8e2; border-color: #315f5a; }
input, select, textarea {
  color: var(--ink);
  background: #fffdf7;
  border: 1.5px solid #7d776b !important;
  border-radius: 6px 9px 7px 10px !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan) !important; box-shadow: 3px 3px 0 rgba(46,172,208,.28); }
.login { background-color: var(--bg); background-image: radial-gradient(circle at 22% 16%,rgba(46,172,208,.16),transparent 25%),radial-gradient(circle at 82% 82%,rgba(237,201,74,.2),transparent 28%); }
.login-card { background: var(--paper); border: 2px solid #282722; border-radius: 18px 13px 20px 15px; box-shadow: 9px 10px 0 var(--green); }
dialog { background: var(--paper); border: 2px solid #282722; border-radius: 13px 18px 14px 20px; box-shadow: 8px 9px 0 rgba(40,39,34,.35); }
.dialog-card { padding: 26px; position: relative; }
.dialog-card > h2 { margin: 0 42px 22px 0; }
.dialog-card form { padding: 0; }
@media (max-width: 800px) {
  aside { box-shadow: 0 5px 0 rgba(47,137,132,.2); }
  nav button.active { transform: none; }
  .hero { box-shadow: 5px 6px 0 #2f8984; }
}

/* Softer sidebar + more organic hand-drawn outlines */
aside {
  color: #302e29;
  background-color: #b9d7d8;
  background-image:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.42) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 44%, rgba(47,78,79,.08) 0 1px, transparent 1.5px),
    linear-gradient(155deg, rgba(255,255,255,.2), transparent 52%);
  background-size: 22px 22px, 27px 27px, auto;
  border-right: 0;
  box-shadow: 7px 0 0 #efc85a, 10px 0 0 rgba(40,39,34,.2);
}
.brand { color: #272a28; }
.brand .brand-mark { color: #292923; }
nav button { color: #3f5656; font-weight: 640; }
nav button:hover { color: #242a28; background: rgba(255,250,240,.42); }
nav button.active {
  color: #282722;
  background: #fffaf0;
  border-color: #302e29;
  border-radius: 18px 25px 16px 23px / 20px 15px 24px 17px;
  box-shadow: 4px 6px 0 #2eacd0;
  transform: rotate(-.35deg) skewX(-.25deg);
}
.aside-foot { color: #2f3e3d; border-top: 0; position: relative; }
.aside-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C32 1 54 7 83 4 S137 2 165 5 S218 7 259 3' fill='none' stroke='%23465f5e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.aside-foot small, .aside-foot .ghost { color: #526d6c; }

.hero, .card, .panel, .table-wrap, .login-card, dialog {
  position: relative;
  border-radius: 19px 27px 18px 24px / 23px 17px 28px 19px;
}
.card::after, .panel::after, .login-card::after {
  content: "";
  position: absolute;
  inset: 3px -3px -4px 3px;
  border-right: 1px solid rgba(40,39,34,.34);
  border-bottom: 1px solid rgba(40,39,34,.34);
  border-radius: 22px 18px 27px 16px / 17px 26px 18px 24px;
  pointer-events: none;
  transform: rotate(.18deg);
}
.hero {
  border-radius: 25px 17px 29px 19px / 18px 27px 20px 30px;
  transform: rotate(-.18deg) skewX(-.08deg);
}
.table-wrap { border-radius: 17px 25px 18px 23px / 22px 16px 25px 18px; }
.pill { border-radius: 11px 16px 9px 14px / 13px 9px 15px 10px; transform: rotate(-.2deg); }
.toolbar button, .btn, .primary, .login button {
  border-radius: 12px 17px 10px 15px / 15px 10px 18px 11px;
}
@media (max-width: 800px) {
  aside { box-shadow: 0 5px 0 #efc85a, 0 8px 0 rgba(40,39,34,.16); }
  nav button.active { transform: none; }
}

/* Channel overview — keep compact status fields on one line */
.channel-table table { min-width: 1080px; table-layout: auto; }
.channel-table th, .channel-table td { vertical-align: middle; }
.channel-table th { text-align: center; white-space: nowrap; word-break: keep-all; }
.channel-table th:nth-child(1), .channel-table td:nth-child(1) { width: 170px; min-width: 170px; white-space: nowrap; text-align: center; }
.channel-table td:nth-child(1) b { display: block; width: 100%; text-align: center; }
.channel-table th:nth-child(2), .channel-table td:nth-child(2) { width: 190px; min-width: 190px; white-space: nowrap !important; word-break: keep-all !important; text-align: center; }
.channel-table th:nth-child(3), .channel-table td:nth-child(3) { width: 90px; min-width: 90px; white-space: nowrap; text-align: center; }
.channel-table th:nth-child(4), .channel-table td:nth-child(4) { width: 150px; min-width: 150px; white-space: nowrap !important; word-break: keep-all; text-align: center; }
.channel-table th:nth-child(5), .channel-table td:nth-child(5) { min-width: 220px; padding-left: 10px; padding-right: 10px; }
.channel-table th:nth-child(6), .channel-table td:nth-child(6) { width: 110px; min-width: 110px; white-space: nowrap; text-align: center; }
.channel-table th:nth-child(7), .channel-table td:nth-child(7) { width: 82px; min-width: 82px; white-space: nowrap; text-align: center; }
.channel-table td:nth-child(2) .pill { display: inline-flex; align-items: center; justify-content: center; min-width: 9.5em; white-space: nowrap !important; word-break: keep-all !important; line-height: 1; }
.channel-table td:nth-child(7) .btn { white-space: nowrap; }

/* Qualifications — centered, note-first and persistently sortable */
.qualification-table table { min-width: 960px; }
.qualification-table th, .qualification-table td { text-align: center; vertical-align: middle; }
.qualification-table th { white-space: nowrap; }
.qualification-table th:nth-child(1), .qualification-table td:nth-child(1) { min-width: 220px; }
.qualification-table th:nth-child(2), .qualification-table td:nth-child(2) { width: 82px; min-width: 82px; white-space: nowrap; }
.qualification-table th:nth-child(3), .qualification-table td:nth-child(3) { width: 128px; min-width: 128px; white-space: nowrap; }
.qualification-table th:nth-child(4), .qualification-table td:nth-child(4) { min-width: 210px; padding-left: 10px; padding-right: 10px; }
.qualification-table th:nth-child(5), .qualification-table td:nth-child(5) { width: 108px; min-width: 108px; white-space: nowrap; }
.qualification-table th:nth-child(6), .qualification-table td:nth-child(6) { width: 112px; min-width: 112px; white-space: nowrap; }
.qualification-table th:nth-child(7), .qualification-table td:nth-child(7) { width: 156px; min-width: 156px; white-space: nowrap; }
.qualification-notes { color: var(--muted); line-height: 1.45; }
.qualification-name { display: flex; align-items: center; justify-content: center; }
.qualification-row[draggable="true"] { cursor: grab; }
.qualification-row[draggable="true"]:active { cursor: grabbing; }
.qualification-row.dragging { opacity: .48; background: #fff1bd; }
.qualification-row.drag-over { box-shadow: inset 0 3px 0 var(--cyan); }
.qualification-row.drag-over td { background: rgba(46,172,208,.07); }

/* Platform account re-authentication */
.vault-locked { max-width: 540px; margin: 48px auto; text-align: center; padding: 44px; }
.vault-lock-icon { font-size: 36px; margin-bottom: 12px; }
.vault-locked .btn { margin-top: 12px; }
.vault-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-top: 14px; padding-bottom: 14px; }
.vault-actions { display: flex; align-items: center; gap: 10px; }
.account-table th, .account-table td { text-align: center; vertical-align: middle; white-space: nowrap; }
.account-table table { min-width: 1320px; }
@media(max-width:600px){.vault-notice{align-items:flex-start;flex-direction:column}.vault-actions{width:100%;flex-wrap:wrap}}

/* Multi-APP context switcher */
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.app-switcher-label { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.app-switcher-label select { min-width: 210px; max-width: 320px; padding: 9px 34px 9px 12px; color: var(--ink); background: var(--paper); border: 1.5px solid #625e55; border-radius: 11px 16px 10px 14px; font-weight: 650; }
@media(max-width:800px){header{height:auto;min-height:104px;align-items:flex-start;padding:20px 0;gap:12px}.header-actions{align-items:flex-end;flex-direction:column}.app-switcher-label{align-items:flex-end;flex-direction:column;gap:4px}.app-switcher-label select{min-width:150px;max-width:180px}}

/* Folder-based material library */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(330px,1fr)); gap: 22px; }
.folder-card { position: relative; width: 100%; background: var(--paper); border: 2px solid var(--ink); border-radius: 22px 18px 24px 19px; box-shadow: 6px 7px 0 rgba(38,37,32,.13); color: var(--ink); overflow: hidden; }
.folder-card:hover { transform: translateY(-2px); box-shadow: 7px 9px 0 rgba(38,37,32,.16); }
.folder-open { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; text-align: left; padding: 24px 76px 24px 24px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.folder-card b { display: block; font-size: 20px; margin-bottom: 8px; }
.folder-card small { display: block; color: var(--muted); }
.folder-icon { font-size: 36px; }
.folder-delete { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 7px 10px; border: 1.5px solid #b65d55; border-radius: 10px 8px 11px 9px; background: #fff1ed; color: #9c4038; cursor: pointer; }
.danger-btn { border-color: #b65d55 !important; background: #fff1ed !important; color: #9c4038 !important; }
.folder-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.folder-toolbar h2 { text-align: center; margin: 0; }
.file-actions { display: flex; gap: 8px; white-space: nowrap; }
.row-actions { display: flex; justify-content: center; gap: 7px; white-space: nowrap; }
.folder-files td:nth-child(2) { max-width: 320px; overflow-wrap: anywhere; }
@media(max-width:700px){.folder-grid{grid-template-columns:1fr}.folder-open{grid-template-columns:auto 1fr}.folder-open>.pill{grid-column:2}.folder-toolbar{grid-template-columns:auto 1fr}.folder-toolbar h2{text-align:left}.folder-files table{min-width:900px}}

/* Multi-APP dashboard and project calendar */
.dashboard-hero { margin-bottom: 22px; }
.dashboard-hero .progress { width: min(760px,58vw); }
.app-progress-overview { margin-bottom: 24px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 12px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.section-heading small { color: var(--muted); }
.app-progress-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; }
.app-progress-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 17px 18px; text-align: left; background: var(--paper); color: var(--ink); border: 2px solid #7d776b; border-radius: 15px 19px 14px 17px; cursor: pointer; box-shadow: 4px 5px 0 rgba(38,37,32,.09); }
.app-progress-item.active { border-color: var(--cyan); background: #e7f6f6; box-shadow: 4px 5px 0 #87c9c6; }
.app-progress-item b,.app-progress-item small { display: block; }
.app-progress-item small { margin-top: 3px; color: var(--muted); }
.app-progress-item strong { font-size: 20px; }
.app-progress-item>i { grid-column: 1/-1; height: 7px; border: 1.5px solid #777064; border-radius: 999px; overflow: hidden; background: #efe9dc; }
.app-progress-item>i>em { display: block; height: 100%; background: var(--yellow); border-radius: inherit; }
.app-progress-item.active>i>em { background: var(--cyan); }
.project-calendar { padding: 26px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.calendar-head h2 { margin: 0 0 5px; font-size: 21px; }
.calendar-head p { margin: 0; color: var(--muted); font-size: 13px; }
.calendar-nav { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.calendar-nav b { min-width: 104px; text-align: center; }
.calendar-nav .btn { padding: 7px 11px; }
.calendar-week,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-week { border: 1.5px solid #b9b09f; border-bottom: 0; border-radius: 13px 13px 0 0; overflow: hidden; background: #eee4d0; }
.calendar-week span { padding: 9px 5px; text-align: center; font-size: 12px; font-weight: 700; color: #625b50; }
.calendar-grid { border-left: 1.5px solid #b9b09f; border-top: 1.5px solid #b9b09f; }
.calendar-day { min-height: 124px; padding: 8px; background: #fffaf0; border-right: 1.5px solid #b9b09f; border-bottom: 1.5px solid #b9b09f; overflow: hidden; }
.calendar-day.outside { background: #f3eee3; }
.calendar-day.has-events { background: #fffdf7; }
.day-number { display: block; margin-bottom: 7px; color: #6c655a; font-size: 12px; font-weight: 700; }
.day-events { display: grid; gap: 5px; }
.calendar-event { padding: 5px 6px; border-left: 4px solid var(--cyan); border-radius: 5px 8px 6px 4px; background: #dff2f1; font-size: 11px; line-height: 1.3; overflow: hidden; }
.calendar-event small { display: block; color: #477774; font-size: 9px; }
.calendar-event.kind-资质备案 { border-color: var(--yellow); background: #fff0bc; }
.calendar-event.kind-APP计划 { border-color: var(--coral); background: #ffe1d9; }
.calendar-event.kind-审核节点 { border-color: #8a86c9; background: #ebe9fb; }
.more-events { color: var(--muted); padding-left: 4px; }
@media(max-width:900px){.dashboard-hero .progress{width:55vw}.project-calendar{overflow-x:auto}.calendar-head,.calendar-week,.calendar-grid{min-width:760px}.app-progress-list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media(max-width:600px){.dashboard-hero .progress{width:100%}.section-heading,.calendar-head{align-items:flex-start;flex-direction:column}.app-progress-list{grid-template-columns:1fr}}