:root {
      --ink: #17233d;
      --muted: #65738f;
      --line: #e3ebf5;
      --canvas: #f7faff;
      --white: #fff;
      --blue: #236fe4;
      --blue-soft: #eaf3ff;
      --orange: #f0a52f;
      --orange-soft: #fff4dd;
      --violet: #8065df;
      --violet-soft: #f2edff;
      --radius: 20px;
      font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--canvas); }
    button, input { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #67a8ff; outline-offset: 3px; }
    .topbar { height: 88px; display: flex; align-items: center; gap: 34px; padding: 0 36px; background: #fff; border-bottom: 1px solid var(--line); }
    .brand { display: flex; align-items: center; gap: 13px; min-width: 250px; text-decoration: none; color: inherit; }
    .brand-mark { flex: none; width: 48px; height: 48px; }
    .brand-title { display: block; font-size: 23px; font-weight: 750; line-height: 1.15; letter-spacing: .025em; }
    .brand-en { display: block; color: #65748d; font-size: 9px; letter-spacing: .15em; margin-top: 4px; }
    .brand-note { color: #5c6c88; font-size: 15px; white-space: nowrap; letter-spacing: .07em; }
    .top-search { margin-left: auto; width: min(430px, 31vw); position: relative; }
    .top-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #8290a8; }
    .top-search input { width: 100%; height: 44px; padding: 0 14px 0 45px; background: #f8faff; border: 1px solid #e5ebf4; border-radius: 12px; color: var(--ink); }
    .top-search input::placeholder { color: #8795aa; }
    .preview-pill { flex: none; padding: 7px 11px; color: #426593; background: #eaf3ff; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
    .shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: calc(100vh - 88px); }
    .sidebar { padding: 28px 16px 22px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
    .nav-label { padding: 3px 14px 11px; color: #8a98ac; font-size: 11px; letter-spacing: .12em; }
    .nav-link { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 16px; margin-bottom: 8px; border-radius: 12px; color: #455775; font-size: 15px; font-weight: 600; text-decoration: none; }
    .nav-link svg { flex: none; }
    .nav-link:hover { background: #f2f7ff; color: var(--blue); }
    .nav-link.active { color: var(--blue); background: #e8f2ff; }
    .side-foot { margin-top: auto; padding: 20px 14px 0; border-top: 1px solid var(--line); color: #8795aa; font-size: 12px; line-height: 1.65; }
    main { padding: 44px clamp(26px, 4vw, 72px) 70px; max-width: 1600px; width: 100%; margin: 0 auto; }
    .welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 34px; }
    .welcome h1 { margin: 0; font-size: clamp(30px, 2.65vw, 43px); letter-spacing: -.045em; line-height: 1.23; }
    .welcome p { margin: 11px 0 0; color: var(--muted); font-size: 17px; }
    .welcome .count { color: #71809a; font-size: 13px; white-space: nowrap; padding-bottom: 6px; }
    .section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 17px; }
    .section-heading h2 { margin: 0; font-size: 17px; font-weight: 700; }
    .section-heading span { color: #8492a8; font-size: 13px; }
    .apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .app-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 294px; padding: 27px 28px 26px; text-align: left; border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .app-card[hidden] { display: none; }
    .app-card::after { content: ""; position: absolute; top: -50px; right: -55px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.42); pointer-events: none; }
    .app-card:hover { transform: translateY(-3px); box-shadow: 0 13px 35px rgba(43,72,130,.10); border-color: rgba(255,255,255,.85); }
    .app-card:active { transform: translateY(-1px); }
    .app-card.notes { background: linear-gradient(135deg, #fff5e3 0%, #fffaf1 100%); }
    .app-card.docs { background: linear-gradient(135deg, #eaf3ff 0%, #f4f9ff 100%); }
    .app-card.memory { background: linear-gradient(135deg, #f1edff 0%, #faf7ff 100%); }
    .app-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 19px; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); }
    .notes .app-icon { background: linear-gradient(145deg, #ffc45d, #f2a52b); }
    .docs .app-icon { background: linear-gradient(145deg, #79b6ff, #3e8bee); }
    .memory .app-icon { background: linear-gradient(145deg, #a996f3, #8168dd); }
    .app-name { position: relative; z-index: 1; margin-top: 24px; font-size: clamp(21px, 1.65vw, 27px); line-height: 1.25; font-weight: 750; letter-spacing: -.03em; }
    .app-desc { position: relative; z-index: 1; margin-top: 9px; max-width: 22em; color: #63718a; font-size: 14px; line-height: 1.65; }
    .app-bottom { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 650; }
    .notes .app-bottom { color: #b47115; }
    .docs .app-bottom { color: #236fe4; }
    .memory .app-bottom { color: #6b52ca; }
    .app-bottom svg { transition: transform .18s ease; }
    .app-card:hover .app-bottom svg { transform: translateX(4px); }
    .empty { display: none; grid-column: 1 / -1; padding: 40px; border: 1px dashed #c8d7ec; border-radius: var(--radius); background: #fff; color: var(--muted); }
    .empty.show { display: block; }
    .notice { display: flex; gap: 13px; align-items: flex-start; margin-top: 34px; padding: 18px 21px; background: #fff; border: 1px solid var(--line); border-radius: 15px; color: #536580; font-size: 13px; line-height: 1.7; }
    .notice svg { flex: none; color: var(--blue); margin-top: 2px; }
    .notice strong { color: var(--ink); }
    dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 24px 70px rgba(20,40,75,.22); color: var(--ink); }
    dialog::backdrop { background: rgba(20,38,66,.36); backdrop-filter: blur(3px); }
    .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 26px 28px 0; }
    .dialog-head h2 { margin: 0; font-size: 25px; }
    .dialog-close { border: 0; background: #f1f5fb; color: #5d6c83; width: 32px; height: 32px; border-radius: 9px; font-size: 21px; line-height: 1; }
    .dialog-body { padding: 8px 28px 28px; color: #5f6e86; font-size: 14px; line-height: 1.7; }
    .dialog-body p { margin: 0 0 16px; }
    .dialog-label { margin: 20px 0 4px; color: #8a96a9; font-size: 12px; }
    .dialog-value { color: var(--ink); overflow-wrap: anywhere; }
    .dialog-foot { padding: 17px 28px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
    .dialog-foot button { border: 0; border-radius: 10px; padding: 10px 18px; background: var(--blue); color: #fff; font-weight: 650; }
    @media (max-width: 1180px) {
      .brand-note { display: none; }
      .top-search { width: min(430px, 38vw); }
      .apps { gap: 14px; }
      .app-card { padding: 24px 21px; }
    }
    @media (max-width: 900px) {
      .shell { grid-template-columns: 76px minmax(0, 1fr); }
      .sidebar { padding-inline: 10px; }
      .nav-label, .nav-link span, .side-foot { display: none; }
      .nav-link { justify-content: center; padding: 0; }
      .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 650px) {
      .topbar { height: auto; min-height: 75px; padding: 12px 17px; flex-wrap: wrap; gap: 11px; }
      .brand { min-width: 0; }
      .brand-mark { width: 40px; height: 40px; }
      .brand-title { font-size: 19px; }
      .brand-en { font-size: 8px; }
      .preview-pill { margin-left: auto; }
      .top-search { order: 3; width: 100%; }
      .shell { display: block; }
      .sidebar { flex-direction: row; gap: 9px; padding: 8px 17px; border-right: 0; border-bottom: 1px solid var(--line); }
      .nav-link { width: auto; min-height: 38px; padding: 0 13px; margin: 0; gap: 7px; font-size: 13px; }
      .nav-link svg { width: 18px; height: 18px; }
      .nav-link span { display: inline; }
      main { padding: 30px 18px 50px; }
      .welcome { margin-bottom: 31px; }
      .welcome h1 { font-size: 29px; }
      .welcome p { font-size: 15px; }
      .welcome .count { display: none; }
      .apps { grid-template-columns: 1fr; gap: 14px; }
      .app-card { min-height: 218px; padding: 22px; }
      .app-icon { width: 55px; height: 55px; border-radius: 16px; }
      .app-icon svg { width: 29px; height: 29px; }
      .app-name { margin-top: 16px; font-size: 22px; }
      .app-bottom { padding-top: 13px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }
    a.app-card { text-decoration: none; }
    .app-icon { font-size: 36px; font-weight: 600; }
    .portal-logout { margin-top: 34px; }
    .portal-logout button { padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
    .no-apps { grid-column: 1 / -1; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); }
    .portal-login-body { display: grid; place-items: center; padding: 24px; }
    .portal-login { width: min(100%, 430px); padding: 40px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(43,72,130,.08); }
    .portal-login-mark { color: var(--blue); font-size: 16px; font-weight: 750; }
    .portal-login h1 { margin: 25px 0 8px; font-size: 31px; }
    .portal-login p { color: var(--muted); line-height: 1.6; }
    .portal-login-error { margin-top: 20px; padding: 12px 14px; border: 1px solid #f3b9b9; border-radius: 10px; background: #fff3f3; color: #a12929; font-size: 14px; line-height: 1.5; }
    .portal-login form { display: grid; gap: 16px; margin-top: 28px; }
    .portal-login label { display: grid; gap: 7px; font-size: 14px; font-weight: 650; }
    .portal-login input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; }
    .portal-login button { height: 46px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; }
    .portal-settings { width: min(100%, 760px); margin: 24px auto; }
    .portal-settings .admin-row { padding: 20px 0; border-top: 1px solid var(--line); }
    .portal-settings .admin-row h2 { margin: 0; font-size: 20px; }
    .portal-settings .admin-row h2 small { font-size: 12px; color: var(--blue); }
    .portal-settings .admin-row p { margin: 7px 0; font-size: 13px; }
    .portal-settings .admin-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
    .portal-settings .admin-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
    .portal-settings .admin-check input { width: 16px; height: 16px; }
    .portal-settings select { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; }
    .portal-login-success { margin-top: 20px; padding: 12px 14px; border: 1px solid #a8d8b7; border-radius: 10px; background: #edfff2; color: #1c7540; font-size: 14px; line-height: 1.5; }