:root {
      --bg: #fbf6ec;
      --paper: #fffdf8;
      --wood: #d8b98b;
      --wood-soft: #ead8ba;
      --sakura: #f4c9cf;
      --sakura-soft: #fde8eb;
      --blue: #7897b5;
      --blue-soft: #e6f0f6;
      --ink: #3f3a34;
      --muted: #756f67;
      --active: #fff2b8;
      --line: rgba(121, 96, 64, 0.14);
      --shadow: 0 14px 30px rgba(124, 94, 54, 0.10);
      --radius: 22px;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html {
      overscroll-behavior-y: none;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
      overscroll-behavior-y: none;
      background:
        radial-gradient(circle at 12% 18%, rgba(244, 201, 207, 0.35) 0 46px, transparent 47px),
        radial-gradient(circle at 88% 14%, rgba(230, 240, 246, 0.9) 0 70px, transparent 71px),
        radial-gradient(circle at 74% 88%, rgba(234, 216, 186, 0.45) 0 84px, transparent 85px),
        linear-gradient(135deg, #fbf6ec 0%, #fffaf2 46%, #f7efe2 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.36;
      background-image:
        linear-gradient(rgba(120, 90, 50, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 90, 50, 0.025) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 88%);
    }

    .login-shell {
      position: relative;
      z-index: 1;
      display: grid;
      min-height: 100vh;
      place-items: center;
      padding: 32px 18px;
    }

    .login-card {
      width: min(440px, 100%);
      padding: 32px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 253, 248, 0.94);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }

    .login-brand {
      margin-bottom: 24px;
      text-align: center;
    }

    .login-mark {
      display: grid;
      width: 58px;
      height: 58px;
      margin: 0 auto 14px;
      place-items: center;
      border-radius: 18px;
      color: #3d4f63;
      background: linear-gradient(145deg, var(--active), var(--blue-soft));
      font-size: 1.45rem;
      font-weight: 800;
    }

    .login-brand h1 {
      margin: 0;
      font-size: 1.8rem;
      line-height: 1.2;
    }

    .login-brand p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .login-mode {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 22px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(230, 240, 246, 0.78);
    }

    .mode-button {
      display: grid;
      place-items: center;
      min-height: 42px;
      border: 0;
      border-radius: 999px;
      color: #4d6278;
      background: transparent;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
    }

    .mode-button.is-active {
      background: var(--paper);
      box-shadow: 0 8px 14px rgba(116, 88, 52, 0.1);
    }

    .login-form {
      display: grid;
      gap: 14px;
    }

    .form-field {
      display: grid;
      gap: 8px;
      color: #4a433b;
      font-size: 0.96rem;
      font-weight: 700;
    }

	    .form-field input,
	    .form-field textarea {
	      width: 100%;
	      min-height: 46px;
      border: 1px solid rgba(216, 185, 139, 0.42);
      border-radius: 14px;
      padding: 0 14px;
      color: var(--ink);
      background: rgba(255, 253, 248, 0.96);
      font: inherit;
	      outline: 0;
	    }

	    .form-field input[type="file"] {
	      padding: 10px 14px;
	    }

    .form-field textarea {
      min-height: 86px;
      padding-top: 12px;
      resize: vertical;
    }

	    .form-field input:focus-visible,
	    .form-field textarea:focus-visible,
	    .mode-button:focus-visible,
	    .primary-button:focus-visible,
	    .ghost-button:focus-visible,
	    .nav-button:focus-visible,
	    .danger-button:focus-visible,
	    .modal-close-button:focus-visible,
	    .image-thumb-button:focus-visible {
	      outline: 3px solid rgba(120, 151, 181, 0.45);
	      outline-offset: 3px;
	    }

    .form-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .check-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .check-label input {
      width: 16px;
      height: 16px;
      accent-color: var(--blue);
    }

    .link-button {
      border: 0;
      padding: 0;
      color: #3d6f9b;
      background: transparent;
      font: inherit;
      cursor: pointer;
    }

    .primary-button,
    .ghost-button,
    .danger-button {
      min-height: 44px;
      border-radius: 14px;
      padding: 0 18px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .primary-button {
      border: 1px solid rgba(120, 151, 181, 0.28);
      color: #fff;
      background: #3d6f9b;
      box-shadow: 0 10px 18px rgba(61, 111, 155, 0.18);
    }

    .ghost-button {
      border: 1px solid rgba(120, 151, 181, 0.24);
      color: #4d6278;
      background: var(--blue-soft);
    }

    .ghost-button.is-active {
      border-color: rgba(205, 164, 52, 0.5);
      background: var(--active);
    }

    .danger-button {
      border: 1px solid rgba(210, 132, 136, 0.3);
      color: #8b5154;
      background: #fff0f1;
    }

	    .primary-button:active,
	    .ghost-button:active,
	    .danger-button:active {
	      transform: scale(0.98);
	    }

	    .primary-button:disabled,
	    .ghost-button:disabled,
	    .danger-button:disabled {
	      cursor: not-allowed;
	      opacity: 0.66;
	      transform: none;
	    }

	    .primary-button:disabled {
	      border-color: rgba(132, 148, 164, 0.28);
	      color: #eef3f7;
	      background: #8d9cac;
	      box-shadow: none;
	    }

	    .login-contact-button {
	      width: 100%;
	    }

    .login-status,
    .cloud-status,
    .admin-status {
      min-height: 22px;
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.5;
    }

    .login-status.is-error,
    .cloud-status.is-error,
    .admin-status.is-error {
      color: #8b5154;
    }

    .app-shell {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      background: rgba(248, 244, 236, 0.58);
    }

    .admin-topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 68px;
      padding: 0 24px;
      border-bottom: 1px solid rgba(121, 96, 64, 0.13);
      background: rgba(255, 253, 248, 0.94);
      backdrop-filter: blur(10px);
    }

    .topbar-title {
      display: grid;
      gap: 3px;
    }

    .topbar-title strong {
      color: #344c67;
      font-size: 1.05rem;
    }

    .topbar-title span {
      color: var(--muted);
      font-size: 0.86rem;
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .session-chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      color: #4d6278;
      background: var(--blue-soft);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .admin-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      align-items: start;
      min-height: calc(100vh - 68px);
    }

    .admin-sidebar {
      position: sticky;
      top: 68px;
      min-height: calc(100vh - 68px);
      padding: 22px 14px;
      background: #304156;
      color: #dbe5ef;
    }

    .side-logo {
      margin: 0 10px 20px;
      color: #fff;
      font-size: 1.12rem;
      font-weight: 800;
    }

    .nav-button {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 44px;
      margin-top: 8px;
      border: 0;
      border-radius: 10px;
      padding: 0 14px;
      color: #dbe5ef;
      background: transparent;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .nav-button.is-active {
      color: #fff;
      background: rgba(120, 151, 181, 0.24);
    }

    .student-admin {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      padding: 48px 0 56px;
    }

    .admin-panel {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 253, 248, 0.9);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .admin-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--line);
    }

    .admin-panel-header h2 {
      margin: 0;
      color: #344c67;
      font-size: 1.45rem;
    }

    .student-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--line);
    }

    .student-form .form-field.is-wide,
    .student-form .admin-status,
    .student-form .form-actions {
      grid-column: 1 / -1;
    }

    .form-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .student-table-wrap {
      overflow-x: auto;
    }

    .student-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    .student-table th,
    .student-table td {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(121, 96, 64, 0.1);
      text-align: left;
      vertical-align: middle;
    }

    .student-table th {
      color: #5d554b;
      background: rgba(230, 240, 246, 0.72);
      font-size: 0.92rem;
    }

    .table-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

	    .table-actions button {
	      min-height: 34px;
	      border-radius: 10px;
	      padding: 0 10px;
	      font-size: 0.9rem;
	    }

	    .registration-table {
	      min-width: 820px;
	      table-layout: fixed;
	    }

	    .registration-table th:nth-child(1),
	    .registration-table td:nth-child(1) {
	      width: 170px;
	    }

	    .registration-table th:nth-child(2),
	    .registration-table td:nth-child(2) {
	      width: 120px;
	    }

	    .registration-table th:nth-child(3),
	    .registration-table td:nth-child(3) {
	      width: 150px;
	    }

	    .registration-table th:nth-child(5),
	    .registration-table td:nth-child(5) {
	      width: 112px;
	    }

	    .registration-table td {
	      word-break: break-word;
	    }

	    .registration-image-cell {
	      text-align: center;
	    }

	    .image-thumb-button {
	      display: inline-block;
	      width: 72px;
	      height: 54px;
	      overflow: hidden;
	      border: 1px solid rgba(120, 151, 181, 0.24);
	      border-radius: 10px;
	      padding: 0;
	      background: var(--blue-soft);
	      cursor: zoom-in;
	    }

	    .image-thumb-button img {
	      display: block;
	      width: 100%;
	      height: 100%;
	      max-width: 72px;
	      max-height: 54px;
	      object-fit: cover;
	    }

	    .muted-text {
	      color: var(--muted);
	      font-size: 0.92rem;
	    }

	    .modal-backdrop {
	      position: fixed;
	      z-index: 50;
	      inset: 0;
	      display: grid;
	      place-items: center;
	      overflow-y: auto;
	      padding: 18px;
	      background: rgba(33, 42, 52, 0.38);
	    }

	    .modal-card {
	      position: relative;
	      width: min(380px, 100%);
	      padding: 24px;
	      border-radius: 22px;
	      background: var(--paper);
	      box-shadow: 0 22px 48px rgba(30, 42, 55, 0.24);
	      max-height: calc(100vh - 36px);
	      overflow-y: auto;
	      text-align: center;
	    }

	    .registration-modal-card {
	      width: min(500px, calc(100vw - 36px));
	      padding: 30px;
	      border-radius: 26px;
	      text-align: left;
	    }

	    .image-modal-card {
	      width: min(760px, calc(100vw - 36px));
	      text-align: left;
	    }

	    .modal-title-row {
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      gap: 14px;
	      margin-bottom: 22px;
	      padding: 0 42px;
	      text-align: center;
	    }

	    .modal-title-row h2 {
	      margin: 0;
	    }

	    .modal-close-button {
	      position: absolute;
	      top: 18px;
	      right: 18px;
	      display: grid;
	      width: 36px;
	      height: 36px;
	      place-items: center;
	      border: 1px solid rgba(120, 151, 181, 0.22);
	      border-radius: 50%;
	      color: #4d6278;
	      background: var(--blue-soft);
	      font: inherit;
	      font-size: 1.45rem;
	      font-weight: 800;
	      line-height: 1;
	      cursor: pointer;
	      transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease;
	    }

	    .modal-close-button:hover {
	      background: #dcebf4;
	      box-shadow: 0 8px 16px rgba(120, 151, 181, 0.15);
	    }

	    .modal-close-button:active {
	      transform: scale(0.94);
	    }

	    .modal-card h2 {
	      margin: 0 0 10px;
	      color: #344c67;
	      font-size: 1.35rem;
	    }

	    .modal-card .modal-title-row h2 {
	      margin: 0;
	    }

	    .modal-card p {
	      margin: 0 0 18px;
	      color: var(--muted);
	      line-height: 1.7;
	    }

	    .registration-form {
	      display: grid;
	      gap: 13px;
	    }

	    .registration-form .form-field {
	      gap: 7px;
	      text-align: left;
	    }

	    .registration-preview {
	      display: block;
	      width: 100%;
	      max-height: 220px;
	      border: 1px solid var(--line);
	      border-radius: 14px;
	      object-fit: contain;
	      background: rgba(230, 240, 246, 0.38);
	    }

	    .registration-actions {
	      margin-top: 4px;
	      justify-content: center;
	    }

	    .registration-actions .primary-button {
	      min-width: 128px;
	    }

	    .registration-status {
	      margin-top: 0;
	    }

	    .registration-large-image {
	      display: block;
	      width: 100%;
	      max-height: min(70vh, 680px);
	      border: 1px solid var(--line);
	      border-radius: 16px;
	      object-fit: contain;
	      background: rgba(230, 240, 246, 0.38);
	    }

	    .image-modal-meta {
	      margin: 12px 0 0;
	      color: var(--muted);
	      text-align: center;
	      word-break: break-all;
	    }

	    .registration-success {
	      display: grid;
	      justify-items: center;
	      gap: 14px;
	      padding: 6px 0 2px;
	      text-align: center;
	    }

	    .registration-success[hidden] {
	      display: none;
	    }

	    .success-title {
	      margin: 0;
	      color: #344c67;
	      font-size: 1.2rem;
	      font-weight: 800;
	    }

	    .success-copy {
	      margin: 0;
	      color: var(--muted);
	      line-height: 1.7;
	    }

	    .whatsapp-contact-button {
	      min-width: 220px;
	      border-color: rgba(38, 211, 102, 0.38);
	      background: #26d366;
	      box-shadow: 0 12px 24px rgba(38, 211, 102, 0.2);
	    }

	    .whatsapp-contact-button:hover {
	      background: #20c45d;
	      box-shadow: 0 14px 28px rgba(38, 211, 102, 0.24);
	    }

    .page {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      padding: 48px 0 56px;
    }

    .hero {
      position: relative;
      padding: 36px 0 28px;
      text-align: center;
    }

    .sun {
      width: 54px;
      height: 54px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: linear-gradient(145deg, #f5d6a7, #f9cfd6);
      box-shadow: inset -8px -10px 18px rgba(190, 130, 98, 0.13);
    }

    h1 {
      margin: 0;
      font-size: 3.8rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .subtitle {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 1.2rem;
      line-height: 1.8;
    }

    .study-panel {
      margin-top: 24px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: rgba(255, 253, 248, 0.82);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }

    .search-area {
      margin: 0 auto 20px;
    }

    .search-field {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: min(620px, 100%);
      margin: 0 auto;
      padding: 10px 12px 10px 18px;
      border: 1px solid rgba(216, 185, 139, 0.38);
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(116, 88, 52, 0.06);
    }

    .search-symbol {
      flex: 0 0 auto;
      color: var(--blue);
      font-size: 1.2rem;
      line-height: 1;
    }

    .search-input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font: inherit;
      font-size: 1.02rem;
    }

    .search-input::placeholder {
      color: rgba(117, 111, 103, 0.72);
    }

    .search-input::-webkit-search-decoration,
    .search-input::-webkit-search-cancel-button {
      appearance: none;
    }

    .clear-search {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid rgba(120, 151, 181, 0.24);
      border-radius: 999px;
      color: #4d6278;
      background: var(--blue-soft);
      font: inherit;
      font-size: 0.94rem;
      cursor: pointer;
      transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .clear-search:hover {
      background: #dcebf4;
      box-shadow: 0 6px 12px rgba(120, 151, 181, 0.12);
    }

    .clear-search:active {
      transform: scale(0.95);
    }

    .clear-search[hidden] {
      display: none;
    }

    .search-input:focus-visible,
    .clear-search:focus-visible {
      outline: 3px solid rgba(120, 151, 181, 0.45);
      outline-offset: 3px;
    }

    .status {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      margin: 0 auto 30px;
      padding: 12px 20px;
      border: 1px solid rgba(216, 185, 139, 0.36);
      border-radius: 999px;
      color: #5d554b;
      background: rgba(255, 248, 226, 0.78);
      font-size: 1rem;
      text-align: center;
    }

    .status.is-error {
      border-color: rgba(210, 132, 136, 0.32);
      background: #fff0f1;
      color: #8b5154;
    }

    .category-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 20px;
      padding: 6px;
      border: 1px solid rgba(216, 185, 139, 0.38);
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 18px rgba(116, 88, 52, 0.06);
    }

    .category-tab {
      min-width: 0;
      min-height: 46px;
      padding: 0 14px;
      border: 0;
      border-radius: 999px;
      color: #5d554b;
      background: transparent;
      font: inherit;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .category-tab:hover {
      background: rgba(230, 240, 246, 0.72);
    }

    .category-tab:active {
      transform: scale(0.97);
    }

    .category-tab.is-active {
      color: #3d4f63;
      background: linear-gradient(145deg, var(--active), #fff7d9);
      box-shadow: 0 8px 14px rgba(132, 105, 70, 0.12);
    }

    .category-tab:focus-visible {
      outline: 3px solid rgba(120, 151, 181, 0.45);
      outline-offset: 3px;
    }

    .category-viewport {
      overflow: hidden;
      border-radius: 24px;
    }

    .category-track {
      display: flex;
      align-items: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      transition: height 180ms ease;
      -webkit-overflow-scrolling: touch;
    }

    .category-track::-webkit-scrollbar {
      display: none;
    }

    .category {
      flex: 0 0 100%;
      min-width: 0;
      margin-top: 0;
      padding: 2px 1px 8px;
      align-self: flex-start;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .category-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
      padding: 0 4px;
    }

    .category-title {
      margin: 0;
      color: #4a433b;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .category-count {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .pinyin-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .empty-state {
      min-height: 168px;
      margin: 0;
      display: grid;
      place-items: center;
      border: 1px dashed rgba(132, 105, 70, 0.2);
      border-radius: var(--radius);
      color: var(--muted);
      background: rgba(255, 253, 248, 0.62);
      text-align: center;
    }

    .empty-state[hidden] {
      display: none;
    }

    .pinyin-card {
      position: relative;
      overflow: hidden;
      min-height: 142px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, var(--paper), #fff8f1);
      box-shadow: 0 10px 20px rgba(116, 88, 52, 0.08);
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .pinyin-card::after {
      content: "";
      position: absolute;
      right: 14px;
      top: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(244, 201, 207, 0.74) 0 4px, transparent 5px),
        radial-gradient(circle at 70% 30%, rgba(120, 151, 181, 0.22) 0 9px, transparent 10px);
      opacity: 0.76;
    }

    .pinyin-card:hover {
      transform: translateY(-5px);
      border-color: rgba(216, 185, 139, 0.5);
      box-shadow: 0 18px 28px rgba(116, 88, 52, 0.13);
    }

    .pinyin-card.is-open {
      border-color: rgba(120, 151, 181, 0.42);
      background: linear-gradient(180deg, #fffdf8, #f8fbfc);
    }

    .pinyin-card.is-active {
      border-color: rgba(214, 176, 77, 0.62);
      background: linear-gradient(180deg, #fffdf8, #fff4c9);
    }

    .pinyin-label {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: 92px;
      border: 0;
      border-radius: 18px;
      color: #3d4f63;
      background: linear-gradient(145deg, var(--blue-soft), #fff8f7);
      font: inherit;
      font-size: 3.3rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .pinyin-card.is-long .pinyin-label {
      font-size: 2.45rem;
    }

    .pinyin-label:hover {
      box-shadow: inset 0 0 0 1px rgba(120, 151, 181, 0.12);
    }

    .pinyin-label:active {
      transform: scale(0.97);
    }

    .pinyin-label:focus-visible,
    .tone-button:focus-visible {
      outline: 3px solid rgba(120, 151, 181, 0.45);
      outline-offset: 3px;
    }

    .tone-buttons {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .tone-buttons[hidden] {
      display: none;
    }

    .tone-button {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 46px;
      padding: 0 8px;
      border: 1px solid rgba(132, 105, 70, 0.18);
      border-radius: 15px;
      color: #594d40;
      background: linear-gradient(180deg, #f4dfbe, var(--wood-soft));
      font: inherit;
      font-size: 1.06rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .pinyin-card.has-long-tones .tone-buttons {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pinyin-card.has-long-tones .tone-button {
      min-height: 44px;
      padding: 0 6px;
      font-size: 0.98rem;
    }

    .tone-button:hover {
      background: linear-gradient(180deg, #f8e5c9, #edd2a8);
      box-shadow: 0 8px 14px rgba(132, 105, 70, 0.13);
    }

    .tone-button:active {
      transform: scale(0.94);
    }

    .tone-button.is-active {
      border-color: rgba(205, 164, 52, 0.7);
      background: var(--active);
      box-shadow: 0 0 0 4px rgba(255, 242, 184, 0.55);
    }

    @media (max-width: 980px) {
      .page {
        width: min(100% - 24px, 760px);
        padding-top: 28px;
      }

      h1 {
        font-size: 3rem;
      }

      .study-panel {
        padding: 26px;
      }

      .admin-layout {
        grid-template-columns: 1fr;
      }

      .admin-sidebar {
        position: static;
        display: flex;
        min-height: 0;
        gap: 8px;
        overflow-x: auto;
        padding: 12px;
      }

      .side-logo {
        display: none;
      }

      .nav-button {
        flex: 0 0 auto;
        width: auto;
        margin-top: 0;
      }

      .student-form {
        grid-template-columns: 1fr;
      }

      .pinyin-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }
    }

    @media (max-width: 680px) {
      .page {
        width: min(100% - 18px, 460px);
        padding-bottom: 34px;
      }

      .hero {
        padding-top: 22px;
      }

      h1 {
        font-size: 2.35rem;
      }

      .subtitle {
        font-size: 1rem;
      }

      .study-panel {
        padding: 18px;
        border-radius: 24px;
      }

      .login-card {
        padding: 24px;
      }

      .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 16px;
      }

      .topbar-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .student-admin {
        width: min(100% - 18px, 460px);
        padding: 28px 0 34px;
      }

      .admin-panel-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .category-tabs {
        display: flex;
        overflow-x: auto;
        padding: 6px;
        border-radius: 22px;
        scrollbar-width: none;
      }

      .category-tabs::-webkit-scrollbar {
        display: none;
      }

      .category-tab {
        flex: 0 0 auto;
        min-width: 112px;
        min-height: 44px;
        padding: 0 12px;
        font-size: 0.96rem;
      }

      .search-field {
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
        border-radius: 22px;
      }

      .search-symbol {
        display: none;
      }

      .search-input {
        min-height: 42px;
        text-align: center;
      }

      .clear-search {
        width: 100%;
      }

      .category-header {
        align-items: start;
        flex-direction: column;
        gap: 6px;
      }

      .pinyin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pinyin-card {
        min-height: 132px;
        padding: 14px;
      }

      .pinyin-label {
        min-height: 82px;
        font-size: 2.8rem;
      }

      .pinyin-card.is-long .pinyin-label {
        font-size: 2rem;
      }

      .tone-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }

      .tone-button {
        min-height: 48px;
        font-size: 1rem;
      }
    }