:root {
    --portal-ink: #17313b;
    --portal-muted: #667a82;
    --portal-line: #dce8e5;
    --portal-canvas: #f3f8f6;
    --role-accent: #087f71;
    --role-dark: #075f56;
    --role-soft: #e3f4ef;
    --portal-shadow: 0 14px 36px rgba(20, 55, 63, .08);
    --portal-shadow-soft: 0 5px 18px rgba(20, 55, 63, .05);
}

body.portal-shell {
    color: var(--portal-ink);
    background: radial-gradient(circle at 92% 2%, rgba(8, 127, 113, .07), transparent 24rem), var(--portal-canvas);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.portal-admin { --role-accent: #8b3044; --role-dark: #672234; --role-soft: #f8e9ed; }
body.portal-teacher { --role-accent: #087f71; --role-dark: #075f56; --role-soft: #e3f4ef; }
body.portal-student { --role-accent: #276da4; --role-dark: #1c507a; --role-soft: #e7f1f9; }
body.portal-vendor { --role-accent: #a86816; --role-dark: #7e4d0d; --role-soft: #fbf0df; }

/* 主題色只用在右邊白底內容區；深色側欄的連結另外處理，避免深色配深色看不清楚 */
.portal-shell .page-wrap a { color: var(--role-accent); }
.portal-shell .sidebar {
    border-right: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,rgba(255,255,255,.04),transparent 35%), linear-gradient(165deg,#112f3a 0%,#124f55 100%);
    box-shadow: 10px 0 36px rgba(13,43,50,.12);
}
.portal-shell .sidebar .brand-mark {
    color: #fff;
    background: var(--role-accent);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.portal-shell .nav-item { position: relative; min-height: 42px; }
.portal-shell .nav-item:hover,
.portal-shell .nav-item.active { background: rgba(255,255,255,.12); }
.portal-shell .nav-item.active { box-shadow: inset 3px 0 var(--role-accent); }
.portal-shell .nav-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: #d9efeb;
    background: rgba(255,255,255,.09);
    font-size: 13px;
    font-weight: 800;
}
.portal-shell .nav-icon::before { content: "•"; }
.portal-shell .nav-icon[data-icon="grid"]::before { content: "▦"; }
.portal-shell .nav-icon[data-icon="building"]::before { content: "▤"; }
.portal-shell .nav-icon[data-icon="link"]::before { content: "↗"; }
.portal-shell .nav-icon[data-icon="users"]::before { content: "◎"; }
.portal-shell .nav-icon[data-icon="upload"]::before { content: "↑"; }
.portal-shell .nav-icon[data-icon="visit"]::before { content: "◇"; }
.portal-shell .nav-icon[data-icon="key"]::before { content: "◆"; }
.portal-shell .nav-icon[data-icon="check"]::before { content: "✓"; }
.portal-shell .nav-icon[data-icon="report"]::before { content: "≡"; }
.portal-shell .nav-icon[data-icon="doc"]::before { content: "□"; }
.portal-shell .nav-icon[data-icon="shield"]::before { content: "◉"; }
.portal-shell .nav-icon[data-icon="sheet"]::before { content: "≣"; }

.portal-shell .topbar {
    border-bottom-color: rgba(202,219,215,.78);
    background: rgba(255,255,255,.9);
    box-shadow: 0 5px 18px rgba(20,55,63,.035);
    backdrop-filter: blur(14px);
}
.portal-shell .topbar-title .eyebrow,
.portal-shell .who .links a { color: var(--role-accent); }
.portal-shell .who .avatar { background: var(--role-accent); box-shadow: 0 5px 14px rgba(20,55,63,.14); }
.portal-shell .page-wrap { padding-top: 32px; }
.portal-shell h1 {
    color: #132f39;
    font-size: clamp(25px,2.6vw,32px);
    line-height: 1.3;
    letter-spacing: -.025em;
}
.portal-shell .lead { margin-bottom: 24px; color: var(--portal-muted); line-height: 1.75; }
.portal-shell .card {
    border-color: var(--portal-line);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: var(--portal-shadow-soft);
}
.portal-shell .card h2,
.portal-shell legend { color: var(--role-dark); }
.portal-shell .card h2 { font-size: 18px; letter-spacing: -.01em; }

.portal-shell input[type="text"],
.portal-shell input[type="email"],
.portal-shell input[type="tel"],
.portal-shell input[type="number"],
.portal-shell input[type="password"],
.portal-shell input[type="file"],
.portal-shell select,
.portal-shell textarea {
    min-height: 44px;
    border-color: #c7d6d2;
    border-radius: 10px;
    transition: border-color .16s,box-shadow .16s;
}
.portal-shell input:focus,
.portal-shell select:focus,
.portal-shell textarea:focus {
    border-color: var(--role-accent);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(8,127,113,.12);
}
.portal-shell .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--role-accent);
    box-shadow: 0 6px 15px rgba(20,55,63,.12);
    transition: transform .16s,background .16s,box-shadow .16s;
}
.portal-shell .btn:hover {
    background: var(--role-dark);
    box-shadow: 0 8px 20px rgba(20,55,63,.16);
    transform: translateY(-1px);
}
.portal-shell .btn.ghost,
.portal-shell .backlink {
    color: var(--role-accent);
    border-color: #b8d1cc;
    background: #fff;
    box-shadow: none;
}
.portal-shell .btn.danger { background: #a72f3c; }
.portal-shell .tag { padding: 4px 10px; }
.portal-shell table.t {
    border: 1px solid #e1ebe8;
    border-radius: 12px;
    background: #fff;
}
.portal-shell table.t th { color: #405a63; background: var(--role-soft); }
.portal-shell table.t tr:last-child td { border-bottom: 0; }
.portal-shell .todo li { padding: 14px 0; }
.portal-shell :focus-visible { outline: 3px solid rgba(8,127,113,.34); outline-offset: 3px; }

body.portal-shell.no-nav {
    min-height: 100vh;
    background: radial-gradient(circle at 15% 12%,var(--role-soft),transparent 28rem), radial-gradient(circle at 88% 88%,rgba(18,79,85,.09),transparent 30rem), #f5f9f8;
}
.portal-shell.no-nav .topbar { border-bottom: 0; box-shadow: none; }
.portal-shell.no-nav .page-wrap {
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr);
    gap: 18px;
    align-content: start;
    padding-top: clamp(40px,7vw,82px);
}
.portal-shell.no-nav .page-wrap > h1,
.portal-shell.no-nav .page-wrap > .lead,
.portal-shell.no-nav .page-wrap > .msg { grid-column: 1 / -1; }
.portal-shell.no-nav .page-wrap > h1,
.portal-shell.no-nav .page-wrap > .lead {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.portal-shell.no-nav .page-wrap > .card {
    max-width: none !important;
    margin: 0;
    padding: clamp(22px,3vw,30px);
}
.portal-shell.no-nav .page-wrap > .card:first-of-type {
    border-top: 4px solid var(--role-accent);
    box-shadow: var(--portal-shadow);
}

@media (max-width:760px) {
    .portal-shell.no-nav .page-wrap { grid-template-columns: 1fr; padding-top: 30px; }
    .portal-shell.no-nav .page-wrap > h1,
    .portal-shell.no-nav .page-wrap > .lead,
    .portal-shell.no-nav .page-wrap > .msg { grid-column: 1; }
    .portal-shell table.t { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .portal-shell .card { padding: 18px; }
}
@media (max-width:560px) {
    .portal-shell .page-wrap { padding-right: 14px; padding-left: 14px; }
    .portal-shell .bar .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion:reduce) {
    .portal-shell *,
    .portal-shell *::before,
    .portal-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}