:root {
      --bg: #edf4f1;
      --surface: #ffffff;
      --surface-2: #f8fbf9;
      --ink: #1c2321;
      --muted: #63706b;
      --line: #d7e1dc;
      --accent: #0f7a66;
      --accent-dark: #0a5145;
      --accent-2: #c76a32;
      --soft: #e8f1ee;
      --danger: #a83636;
      --shadow: 0 20px 55px rgba(24, 45, 39, .10);
      --shadow-strong: 0 28px 90px rgba(15, 42, 35, .18);
      --radius: 12px;
      --ease: cubic-bezier(.2, .8, .2, 1);
      font-family: Arial, Helvetica, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 8% 5%, rgba(15, 122, 102, .18), transparent 26%),
        radial-gradient(circle at 95% 14%, rgba(199, 106, 50, .12), transparent 25%),
        linear-gradient(135deg, #f8fbfa 0%, var(--bg) 58%, #e7efec 100%);
      color: var(--ink);
      min-height: 100vh;
      accent-color: var(--accent);
      padding-bottom: 34px;
    }

    button, input, select, textarea {
      font: inherit;
    }

    button {
      border: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-dark));
      color: #fff;
      padding: 10px 14px;
      cursor: pointer;
      font-weight: 700;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease), background .18s var(--ease), filter .18s var(--ease);
      box-shadow: 0 10px 22px rgba(18, 107, 91, .18);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(18, 107, 91, .23); filter: saturate(1.04); }
    button:active { transform: translateY(0) scale(.97); }

    button .btn-ripple {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: rgba(255,255,255,.42);
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0);
      animation: ripple .58s var(--ease);
      z-index: 0;
    }

    button.secondary .btn-ripple {
      background: rgba(15, 122, 102, .16);
    }

    button.is-loading {
      pointer-events: none;
      color: transparent !important;
    }

    button.is-loading::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.5);
      border-top-color: #fff;
      animation: spin .72s linear infinite;
      z-index: 2;
    }

    button.secondary.is-loading::after {
      border-color: rgba(15, 122, 102, .22);
      border-top-color: var(--accent);
    }

    button.secondary {
      background: #f3f7f5;
      color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: none;
    }

    button.warning { background: linear-gradient(135deg, var(--accent-2), #98501f); }
    button.danger { background: var(--danger); }
    button.icon { padding: 7px 10px; min-width: 38px; }
    button:disabled { opacity: .45; cursor: not-allowed; }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 11px;
      background: rgba(255,255,255,.9);
      color: var(--ink);
      outline: none;
      transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
    }

    input:focus, select:focus, textarea:focus {
      border-color: rgba(18, 107, 91, .55);
      box-shadow: 0 0 0 3px rgba(18, 107, 91, .12);
      background: #fff;
    }

    select option {
      color: #111827;
      background: #fff;
    }

    textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
    label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }

    .copyright-footer {
      position: fixed;
      left: 50%;
      bottom: 10px;
      z-index: 40;
      transform: translateX(-50%);
      max-width: calc(100vw - 24px);
      padding: 6px 12px;
      border: 1px solid rgba(15, 122, 102, .16);
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 10px 30px rgba(20, 45, 39, .10);
      color: rgba(28, 35, 33, .72);
      font: 600 12px/1.3 "Segoe UI", Arial, Helvetica, sans-serif;
      white-space: nowrap;
      backdrop-filter: blur(12px);
      pointer-events: none;
    }

    .module-screen {
      min-height: 100vh;
      padding: 32px;
      display: grid;
      place-items: center;
      animation: fadeIn .35s var(--ease);
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      position: relative;
      overflow: hidden;
    }

    .module-screen::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(15, 122, 102, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 122, 102, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at 50% 42%, #000 0 34%, transparent 74%);
    }

    .module-screen::after {
      content: "";
      position: fixed;
      left: 50%;
      top: 50%;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(15,122,102,.10), transparent 66%);
      pointer-events: none;
      animation: ambientGlow 7s ease-in-out infinite alternate;
    }

    .module-shell {
      width: min(1040px, 100%);
      display: grid;
      gap: 20px;
      position: relative;
      z-index: 1;
    }

    .module-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,250,.82)),
        rgba(255,255,255,.9);
      border: 1px solid rgba(205, 222, 216, .88);
      border-radius: 18px;
      padding: 22px 24px;
      box-shadow: 0 28px 80px rgba(21, 48, 41, .12);
      backdrop-filter: blur(18px);
      animation: moduleIn .48s var(--ease);
    }

    .module-heading {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .module-logo {
      width: 58px;
      height: 58px;
      border-radius: 16px;
      box-shadow: 0 18px 44px rgba(15, 122, 102, .22);
    }

    .module-head h1 { margin: 0; font-size: 30px; letter-spacing: 0; color: #12231f; }
    .module-head p { margin: 8px 0 0; color: var(--muted); }

    .module-user {
      display: grid;
      gap: 10px;
      justify-items: end;
      color: var(--muted);
      font-size: 14px;
    }

    .module-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      align-items: stretch;
    }

    .module-card {
      min-height: 208px;
      display: grid;
      align-content: start;
      justify-items: start;
      gap: 12px;
      text-align: left;
      border-radius: 18px;
      border: 1px solid rgba(15, 122, 102, .16);
      background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,252,250,.88)),
        var(--surface);
      color: var(--ink);
      box-shadow: 0 22px 62px rgba(20, 45, 39, .10);
      padding: 26px;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      line-height: 1.35;
      font-weight: 400;
      isolation: isolate;
      animation: moduleCardIn .52s var(--ease) backwards;
    }

    .module-card:nth-child(2) { animation-delay: .06s; }
    .module-card:nth-child(3) { animation-delay: .12s; }

    .module-card:hover {
      transform: translateY(-5px);
      border-color: rgba(15, 122, 102, .28);
      box-shadow: 0 34px 90px rgba(20, 45, 39, .16);
    }
    .module-card.pending { background: #f8fbf9; border-color: var(--line); }
    .module-card strong {
      font-size: 22px;
      color: #14231f;
      letter-spacing: 0;
      line-height: 1.25;
      font-weight: 700;
      text-shadow: none;
    }
    .module-card small {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 600;
      text-shadow: none;
    }

    .module-card.is-loading {
      color: var(--ink) !important;
    }

    .module-card.is-loading::after {
      display: none;
    }

    .module-icon {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: var(--soft);
      color: var(--accent-dark);
      box-shadow: inset 0 0 0 1px rgba(15, 122, 102, .08), 0 12px 26px rgba(15, 122, 102, .12);
      transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
    }

    .module-card:hover .module-icon {
      transform: scale(1.06) rotate(-2deg);
      background: linear-gradient(135deg, var(--accent), var(--accent-dark));
      color: #fff;
    }

    .module-icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .app-shell {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      min-height: 100vh;
      animation: fadeIn .35s var(--ease);
    }

    .diploma-shell {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      min-height: 100vh;
      animation: fadeIn .35s var(--ease);
    }

    .account-shell {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      min-height: 100vh;
      animation: fadeIn .35s var(--ease);
    }

    .sidebar {
      position: sticky;
      top: 0;
      min-height: 100vh;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 36%),
        linear-gradient(180deg, #14251f 0%, #0d1815 100%);
      color: #eef7f4;
      padding: 22px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 8px 0 24px rgba(16, 28, 24, .18);
    }

    .brand {
      padding: 0 6px 12px;
      border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .brand-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .app-logo {
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
    }

    .login-logo {
      width: 68px;
      height: 68px;
      display: block;
      margin: 0 auto 14px;
      border-radius: 18px;
      box-shadow: 0 18px 42px rgba(15, 122, 102, .22);
    }

    .brand h1 {
      margin: 0;
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .brand p { margin: 8px 0 0; color: #b9cbc5; line-height: 1.45; font-size: 13px; }

    .nav {
      display: grid;
      gap: 8px;
    }

    .nav button {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      text-align: left;
      background: transparent;
      color: #d9e8e4;
      border: 1px solid transparent;
      justify-content: flex-start;
      padding: 11px 10px;
      box-shadow: none;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    .nav button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,.14), transparent);
      opacity: 0;
      transition: opacity .18s var(--ease);
    }

    .nav button:hover::before { opacity: 1; }

    .nav button.active {
      background: rgba(255,255,255,.13);
      border-color: rgba(255,255,255,.18);
      color: #fff;
      box-shadow: inset 3px 0 0 #7ed8c6;
    }

    .content {
      padding: 28px;
      display: grid;
      gap: 18px;
      align-content: start;
      min-width: 0;
      perspective: 1200px;
    }

    .content.is-switching {
      animation: contentPulse .34s var(--ease);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .topbar h2 {
      margin: 0;
      font-size: 29px;
      letter-spacing: 0;
    }

    .topbar p { margin: 6px 0 0; color: var(--muted); }

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

    .panel {
      background: rgba(255,255,255,.88);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
      backdrop-filter: blur(10px);
      animation: riseIn .32s var(--ease);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }

    .panel:hover {
      border-color: #c8d8d1;
      box-shadow: 0 24px 60px rgba(24, 45, 39, .13);
    }

    .panel h3 {
      margin: 0 0 12px;
      font-size: 18px;
      letter-spacing: 0;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
      gap: 16px;
      align-items: start;
    }

    .generator-layout {
      display: grid;
      grid-template-columns: minmax(520px, 1fr) minmax(250px, 320px);
      gap: 16px;
      align-items: start;
    }

    .generator-layout .print-panel {
      grid-column: 1;
      grid-row: 1;
    }

    .generator-options-panel {
      grid-column: 2;
      grid-row: 1;
      position: sticky;
      top: 18px;
      max-height: calc(100vh - 36px);
      overflow: auto;
      padding: 14px;
      align-self: start;
    }

    .generator-options-panel h3 {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .exam-set-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .diploma-designer-grid {
      grid-template-columns: minmax(280px, .95fr) minmax(360px, 1.05fr);
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .full { grid-column: 1 / -1; }

    .list {
      display: grid;
      gap: 9px;
      max-height: 570px;
      overflow: auto;
      padding-right: 3px;
    }

    .row-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px;
      display: grid;
      gap: 8px;
      background: linear-gradient(180deg, #fff, #fbfdfc);
      transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
    }

    .row-item:hover {
      transform: translateY(-1px);
      border-color: #bfd3cc;
      box-shadow: 0 12px 28px rgba(28, 35, 33, .08);
    }

    .row-title {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 10px;
    }

    .row-title strong {
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--soft);
      color: #24574f;
      border-radius: 999px;
      padding: 4px 8px;
      font-weight: 700;
    }

    .empty {
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 10px;
      padding: 18px;
      text-align: center;
      background: #fbfcfa;
    }

    .spec-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 76px 40px;
      gap: 9px;
      align-items: end;
      margin-bottom: 10px;
    }

    .generator-settings {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }

    .preview-wrap {
      background:
        linear-gradient(45deg, rgba(15, 122, 102, .05), transparent),
        #e8eeeb;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      overflow: auto;
    }

    .preview-pager {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
    }

    .preview-pager span {
      min-width: 110px;
      text-align: center;
      color: var(--muted);
      font-weight: 700;
      font-size: .92rem;
    }

    .exam-paper {
      background: #fff;
      width: min(100%, 21cm);
      height: auto;
      min-height: 29.7cm;
      margin: 0 auto;
      padding: .5cm 1.35cm 1.15cm;
      color: #111;
      box-shadow: 0 8px 25px rgba(0,0,0,.12);
      line-height: 1.35;
      font-family: "Times New Roman", Times, serif;
      font-size: 14pt;
      overflow: visible;
    }

    .exam-page-break {
      break-after: page;
      page-break-after: always;
    }

    .exam-half {
      min-height: 14.025cm;
      box-sizing: border-box;
      overflow: visible;
      padding: .25cm 0;
    }

    .exam-half.empty-half { border-top: 1px dashed #cfd6d2; opacity: .35; }

    .exam-page-break:last-child {
      break-after: auto;
      page-break-after: auto;
    }

    .exam-head {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .65cm;
      text-align: center;
      margin-bottom: 1.05cm;
      font-weight: 700;
      align-items: start;
      font-size: 14pt;
      line-height: 1.25;
    }

    .exam-head.three-col {
      grid-template-columns: minmax(0, 1fr) .35fr minmax(0, 1.22fr);
      gap: .18cm;
    }

    .exam-head > div {
      white-space: nowrap;
      text-align: center;
      justify-self: center;
    }

    .exam-head .center-col {
      min-height: 2.2cm;
      display: flex;
      align-items: end;
      justify-content: center;
    }

    .exam-title {
      text-align: center;
      margin: 0 0 .45cm;
      font-size: 14pt;
    }

    .exam-title h1 {
      font-size: 14pt;
      margin: 0 0 .18cm;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .diploma-preview-wrap {
      overflow: auto;
      padding: 18px;
      background: #e8eeeb;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .diploma-certificate {
      position: relative;
      width: var(--paper-width, 29.7cm);
      height: var(--paper-height, 21cm);
      max-width: 100%;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0 8px 25px rgba(0,0,0,.12);
      overflow: hidden;
      color: #111;
    }

    .diploma-pdf-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      pointer-events: none;
    }

    .diploma-pdf-empty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #64748b;
      background: repeating-linear-gradient(135deg, #fff, #fff 16px, #f1f5f9 16px, #f1f5f9 32px);
      font-weight: 700;
    }

    .diploma-field {
      position: absolute;
      transform: translate(-50%, -50%);
      white-space: pre-wrap;
      text-align: center;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .diploma-field[data-diploma-field] {
      cursor: move;
      user-select: none;
      outline: 1px dashed rgba(15, 118, 110, .45);
      outline-offset: 3px;
    }

    .diploma-export-row {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: start;
      cursor: pointer;
    }

    .student-extra-fields {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(248, 251, 249, .72);
    }

    .student-extra-list {
      display: grid;
      gap: 8px;
    }

    .student-extra-row {
      display: grid;
      grid-template-columns: minmax(120px, .85fr) minmax(160px, 1.15fr) auto;
      gap: 8px;
      align-items: center;
    }

    .empty.compact {
      padding: 8px 0;
      min-height: 0;
      border: 0;
      background: transparent;
    }

    .diploma-print-page {
      page-break-after: always;
      break-after: page;
      display: grid;
      place-items: center;
    }

    .diploma-print-page:last-child {
      page-break-after: auto;
      break-after: auto;
    }

    .exam-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 20px;
      margin: 18px 0;
    }

    .question {
      margin: .22cm 0;
      break-inside: avoid;
      font-size: 14pt;
    }

    .question strong { display: inline; }
    .answer-space { height: 70px; border-bottom: 1px dotted #888; margin-top: 8px; }

    .answer-head {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .65cm;
      text-align: center;
      margin-bottom: 1.05cm;
      font-weight: 700;
      align-items: start;
      font-size: 14pt;
      line-height: 1.25;
    }

    .answer-head > div {
      white-space: nowrap;
      text-align: center;
      justify-self: center;
    }

    .answer-exam {
      margin: 0 0 .35cm;
      break-inside: avoid;
    }

    .answer-exam h1 {
      margin: 0 0 .22cm;
      font-size: 14pt;
      text-transform: uppercase;
    }

    .answer-question {
      margin: .18cm 0;
      break-inside: avoid;
      font-size: 14pt;
    }

    .answer-content {
      margin-top: .08cm;
      padding-left: .35cm;
    }

    .answer-gap {
      height: .28cm;
      line-height: .28cm;
    }

    .hidden { display: none !important; }

    main > section:not(.hidden) {
      animation: pageIn .42s var(--ease);
      transform-origin: 50% 18px;
    }

    .view-leaving {
      animation: pageOut .16s var(--ease) forwards !important;
      pointer-events: none;
    }

    .import-export {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .style-grid {
      display: grid;
      grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) 100px 130px 130px;
      gap: 10px;
      align-items: end;
    }

    .check-label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 39px;
    }

    .check-label input {
      width: auto;
    }

    .hint {
      padding: 10px 12px;
      border: 1px dashed var(--line);
      border-radius: 12px;
      color: var(--muted);
      background: #f8fbf9;
      font-weight: 600;
    }

    .login-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      animation: fadeIn .35s var(--ease);
    }

    .login-card {
      width: min(100%, 420px);
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(217, 222, 215, .9);
      border-radius: 18px;
      box-shadow: var(--shadow-strong);
      padding: 28px;
      backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
      animation: riseIn .42s var(--ease);
    }

    .login-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, var(--accent), #7ed8c6, var(--accent-2));
    }

    .login-card h1 {
      margin: 0 0 8px;
      font-size: 28px;
    }

    .login-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.45; }
    .login-form { display: grid; gap: 12px; }
    .login-error { color: var(--danger); min-height: 20px; font-size: 13px; font-weight: 700; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(13, 24, 21, .42);
      backdrop-filter: blur(10px);
      animation: fadeIn .22s var(--ease);
    }

    .trial-modal {
      width: min(100%, 420px);
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 18px;
      box-shadow: var(--shadow-strong);
      padding: 24px;
      text-align: center;
      animation: riseIn .28s var(--ease);
    }

    .trial-modal h2 {
      margin: 0 0 10px;
      font-size: 22px;
      color: #14231f;
    }

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

    .trial-countdown {
      margin: 0 0 18px;
      padding: 12px;
      border: 1px solid rgba(15, 122, 102, .16);
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(232,241,238,.95), rgba(255,255,255,.92));
      color: #0e5d50;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
    }

    .trial-modal.expired .trial-countdown {
      border-color: rgba(168, 54, 54, .2);
      background: rgba(168, 54, 54, .08);
      color: var(--danger);
    }

    .form-modal {
      text-align: left;
    }

    .form-modal h2 {
      text-align: center;
    }

    .form-modal .actions {
      justify-content: flex-end;
    }

    .user-box {
      margin-top: auto;
      border-top: 1px solid rgba(255,255,255,.13);
      padding: 14px 6px 0;
      display: grid;
      gap: 8px;
      color: #d9e8e4;
      font-size: 13px;
    }

    .user-box strong { color: #fff; }

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

    .stat-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    }

    .stat-card::after {
      content: "";
      position: absolute;
      right: -18px;
      top: -18px;
      width: 74px;
      height: 74px;
      border-radius: 50%;
      background: rgba(15, 122, 102, .09);
    }

    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(24,45,39,.13); }

    .stat-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
    .stat-card strong { display: block; margin-top: 8px; font-size: 30px; }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
      gap: 16px;
      align-items: start;
    }

    ::selection {
      background: rgba(15, 122, 102, .22);
      color: #10231f;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(222, 232, 227, .65);
      border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #92bdb2, #477c70);
      border: 2px solid rgba(222, 232, 227, .65);
      border-radius: 999px;
    }

    .content::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(15, 122, 102, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 122, 102, .035) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(120deg, transparent 0%, #000 24%, transparent 76%);
      opacity: .65;
      z-index: -1;
    }

    .brand h1 {
      background: linear-gradient(135deg, #fff, #9de5d7);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand p {
      color: rgba(217, 232, 228, .78);
    }

    .topbar {
      background: rgba(255,255,255,.44);
      border: 1px solid rgba(215, 225, 220, .72);
      border-radius: 18px;
      padding: 14px 16px;
      box-shadow: 0 16px 45px rgba(24, 45, 39, .07);
      backdrop-filter: blur(14px);
    }

    .topbar h2 {
      background: linear-gradient(135deg, #14231f, #0f7a66);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nav button {
      isolation: isolate;
    }

    .nav button::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 5px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(126,216,198,.45), transparent);
      opacity: 0;
      transition: opacity .2s var(--ease);
    }

    .nav button.active::after,
    .nav button:hover::after {
      opacity: 1;
    }

    .nav button.active {
      background:
        linear-gradient(90deg, rgba(126,216,198,.18), rgba(255,255,255,.08)),
        rgba(255,255,255,.10);
      box-shadow:
        inset 3px 0 0 #7ed8c6,
        0 10px 30px rgba(0,0,0,.12);
    }

    .content button:not(.secondary):not(.danger)::before,
    .login-card button:not(.secondary):not(.danger)::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 42%, transparent 70%);
      transform: translateX(-110%);
      transition: transform .55s var(--ease);
    }

    .content button:not(.secondary):not(.danger),
    .login-card button:not(.secondary):not(.danger) {
      position: relative;
      overflow: hidden;
    }

    .content button:not(.secondary):not(.danger):hover::before,
    .login-card button:not(.secondary):not(.danger):hover::before {
      transform: translateX(110%);
    }

    .panel {
      position: relative;
      overflow: hidden;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(15,122,102,.22), rgba(199,106,50,.13));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: .65;
    }

    .panel h3 {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .panel h3::before {
      content: "";
      width: 8px;
      height: 20px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent), #7ed8c6);
      box-shadow: 0 0 18px rgba(15,122,102,.24);
    }

    .row-item {
      position: relative;
      overflow: hidden;
    }

    .row-item::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, var(--accent), transparent);
      opacity: 0;
      transition: opacity .18s var(--ease);
    }

    .row-item:hover::before {
      opacity: 1;
    }

    .pill {
      background: linear-gradient(135deg, rgba(232,241,238,.95), rgba(218,235,229,.9));
      border: 1px solid rgba(15, 122, 102, .12);
    }

    .stat-card {
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,249,.92)),
        #fff;
    }

    .stat-card strong {
      color: #0e5d50;
      letter-spacing: 0;
    }

    .login-screen {
      background:
        radial-gradient(circle at 50% 8%, rgba(126,216,198,.22), transparent 34%),
        radial-gradient(circle at 25% 80%, rgba(199,106,50,.12), transparent 30%);
    }

    .login-card {
      width: min(100%, 450px);
    }

    .login-card h1 {
      background: linear-gradient(135deg, #15231f, #0f7a66);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .user-box {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      padding: 12px;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes riseIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pageIn {
      from { opacity: 0; transform: translateY(14px) scale(.985) rotateX(1.4deg); filter: blur(4px); }
      to { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); }
    }

    @keyframes pageOut {
      from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
      to { opacity: 0; transform: translateY(-8px) scale(.992); filter: blur(3px); }
    }

    @keyframes contentPulse {
      from { opacity: .92; }
      to { opacity: 1; }
    }

    @keyframes ripple {
      to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes moduleIn {
      from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(5px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    @keyframes moduleCardIn {
      from { opacity: 0; transform: translateY(22px) scale(.975); filter: blur(5px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    @keyframes ambientGlow {
      from { transform: translate(-50%, -50%) scale(.94); opacity: .72; }
      to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
    }

    .file-input { max-width: 280px; }

    @media (max-width: 900px) {
      .module-grid { grid-template-columns: 1fr; }
      .module-head { align-items: stretch; flex-direction: column; }
      .module-heading { align-items: flex-start; }
      .module-user { justify-items: start; }
      .app-shell, .diploma-shell, .account-shell { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-2, .form-grid { grid-template-columns: 1fr; }
      .content { padding: 16px; }
      .exam-paper { padding: 18px 18px 28px; min-height: auto; }
      .exam-head, .answer-head, .exam-info { grid-template-columns: 1fr; }
      .exam-head { margin-bottom: 26px; }
      .spec-row, .generator-settings, .style-grid, .stats-grid, .dashboard-grid, .generator-layout { grid-template-columns: 1fr; }
      .generator-layout .print-panel,
      .generator-options-panel {
        grid-column: 1;
      }
      .generator-options-panel {
        grid-row: 2;
        position: static;
        max-height: none;
        overflow: visible;
      }
      .generator-layout .print-panel { grid-row: 1; }
    }

    @media (max-width: 640px) {
      .module-screen { padding: 16px; }
      .module-card { min-height: 160px; padding: 18px; }
    }

    @media print {
      @page { size: 21cm 29.7cm; margin: .5cm 1.35cm 1.15cm 1.35cm; }
      body { background: #fff; }
      .sidebar, .topbar, .panel:not(.print-panel), .copyright-footer { display: none !important; }
      .app-shell, .diploma-shell, .account-shell, .content { display: block; padding: 0; }
      .print-panel { border: 0; box-shadow: none; padding: 0; }
      .preview-pager { display: none !important; }
      .preview-wrap { border: 0; background: #fff; padding: 0; overflow: visible; }
      .exam-paper { width: 18.3cm; height: 28.05cm; min-height: 28.05cm; box-shadow: none; padding: 0; margin: 0 auto; overflow: hidden; }
      .exam-half { height: 14.025cm; box-sizing: border-box; padding: .25cm 0; overflow: hidden; }
      .empty-half { display: none; }
      .diploma-preview-wrap { border: 0; background: #fff; padding: 0; overflow: visible; }
      .diploma-certificate { max-width: none; box-shadow: none; margin: 0 auto; }
    }