/* Shared, dependency-free presentation layer. */
:root {
  --ui-brand: #087f65;
  --ui-dark: #064e40;
  --ui-soft: #edf8f3;
  --ui-line: #dce8e3;
  --ui-ink: #182f2b;
  --ui-muted: #60716d;
  --ui-shadow: 0 8px 32px -20px rgba(20, 46, 39, .24);
}
body.ui-plagi {
  --ui-brand: #315dc4;
  --ui-dark: #172f67;
  --ui-soft: #eef3fc;
  --ui-line: #dfe6f2;
  --ui-ink: #1d2c48;
  --ui-muted: #62708a;
}
body.ui-app {
  background: #f4f6f8;
  color: var(--ui-ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.ui-app :where(h1, h2, h3) { letter-spacing: -.025em; }
.ui-app :where(button, a, input, select, textarea) {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: ease;
}
.ui-app :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ui-brand);
  outline-offset: 3px;
}
.ui-app :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #ccd7d8;
  border-radius: 12px;
  background-color: #fcfdfd;
  min-height: 44px;
  color: var(--ui-ink);
}
.ui-app :where(input, textarea)::placeholder { color: #78858e; }
.ui-app :where(input, select, textarea):focus { border-color: var(--ui-brand); background-color: white; }
.ui-app :where(button, a).bg-umpar-base { background: var(--ui-brand); }
.ui-app :where(button, a).bg-umpar-base:hover { background: var(--ui-dark); }
.ui-app button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ui-app .text-slate-400 { color: #6b7b89; }
.ui-app .text-umpar-base { color: var(--ui-brand); }
.ui-app .text-umpar-dark { color: var(--ui-dark); }
.ui-app .animate-pulse { animation: none; }
.ui-app > header {
  background: #fff;
  backdrop-filter: none;
  border-color: var(--ui-line);
  box-shadow: 0 2px 12px rgba(20, 40, 50, .025);
}
.ui-app > header > div { max-width: 1440px; min-height: 78px; gap: 16px; }
.ui-app > header > div > a > .flex > div:first-child { width: 42px; height: 42px; border-radius: 14px; background: var(--ui-dark); box-shadow: 0 4px 10px -6px var(--ui-dark); }
.ui-app > header a[href="logout.php"] { padding: 8px 12px; background: #fff5f4; border: 1px solid #ffe2dd; border-radius: 10px; }
.ui-app > footer { background: transparent; border-color: var(--ui-line); backdrop-filter: none; }
.ui-app > header > div > a:last-child { flex-shrink: 0; }
.ui-app > main { max-width: 1440px; margin-inline: auto; padding-bottom: 36px; }
.ui-app main > .grid { margin-top: 24px; gap: 24px; align-items: start; }
.ui-app main > .grid > section {
  min-width: 0;
  background: white;
  backdrop-filter: none;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  box-shadow: var(--ui-shadow);
  padding: 28px;
}
.ui-app main > .grid > section:hover { box-shadow: var(--ui-shadow); }
.ui-app main > .grid > section > .mb-6 > h2 { text-align: left; font-size: 19px; }
.ui-app .overflow-x-auto { border: 1px solid var(--ui-line); border-radius: 14px; scrollbar-width: thin; scrollbar-color: #b5c7c1 #f4f7f6; }
.ui-app table thead tr { background: var(--ui-soft); color: var(--ui-dark); }
.ui-app table th { font-size: 12px; font-weight: 650; padding-block: 15px; }
.ui-app table td { border-bottom: 1px solid #edf1f3; padding-block: 15px; }
.ui-app table tbody tr:nth-child(even) { background-color: #fafcfc; }
.ui-app table tbody tr:hover { background-color: var(--ui-soft); }
.ui-app main form[method="GET"] { background: #f8fafb; box-shadow: none; padding: 14px; }
.ui-app main form[method="GET"] > .flex { flex-wrap: wrap; }
.ui-app main form[method="GET"] .min-w-\[240px\] { min-width: min(240px, 100%); }
.ui-app .fixed.inset-0[class*="z-50"] { overflow-y: auto; overscroll-behavior: contain; padding-block: 24px; }
.ui-app .fixed.inset-0[class*="z-50"] > div { max-height: calc(100dvh - 48px); overflow-y: auto; }
.ui-skip { position: fixed; top: 12px; left: 12px; transform: translateY(-180%); z-index: 10000; padding: 10px 16px; background: white; color: var(--ui-dark); border-radius: 10px; }
.ui-skip:focus { transform: translateY(0); }
.ui-intro { position: relative; isolation: isolate; overflow: hidden; padding: 38px; margin: 28px 20px 0; border: 1px solid var(--ui-dark); border-radius: 24px; background: linear-gradient(115deg, var(--ui-dark) 25%, var(--ui-brand)); color: white; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ui-intro::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 280px; height: 280px; right: 40px; top: -140px; border-radius: 50%; border: 1px solid #ffffff20; box-shadow: 0 0 0 36px #ffffff06, 0 0 0 72px #ffffff04; }
.ui-intro .ui-eyebrow { color: #ffffffbd; }
.ui-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ui-brand); margin-bottom: 12px; }
.ui-intro h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; font-weight: 700; margin-bottom: 10px; }
.ui-intro p { color: #ffffffe0; font-size: 14px; max-width: 580px; }
.ui-intro-mark { width: 90px; height: 90px; display: grid; place-items: center; flex-shrink: 0; border-radius: 26px; background: #ffffff16; border: 1px solid #ffffff35; color: white; font-size: 32px; transform: rotate(-6deg); }
body.ui-auth { padding: 40px 24px; background: radial-gradient(ellipse at 10% 20%, var(--ui-soft), transparent 60%), #f5f7f8; }
.ui-auth > .ui-auth-shell { max-width: 1120px; display: grid; grid-template-columns: 1.12fr 1fr; align-items: stretch; border: 1px solid var(--ui-line); border-radius: 30px; background: white; box-shadow: 0 32px 90px -50px rgba(20, 46, 50, .4); overflow: hidden; }
.ui-auth .ui-auth-card { padding: clamp(28px, 4vw, 52px); border: 0; border-radius: 0; box-shadow: none; background: white; backdrop-filter: none; align-self: center; }
.ui-auth-card > .text-center { text-align: left; }
.ui-auth-card > .text-center > .rounded-full { margin-left: 0; width: 48px; height: 48px; border-radius: 14px; color: var(--ui-brand); background: var(--ui-soft); }
.ui-auth-card h2 { font-size: 30px; font-weight: 650; }
.ui-auth-card > .text-center > p:first-of-type { margin-top: 7px; }
.ui-auth-card .ui-login-label { display: block; color: var(--ui-muted); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; margin: 20px 0 8px; font-weight: 650; }
.ui-auth-card .text-red-600.italic { color: var(--ui-muted); font-size: 13px; font-weight: 400; font-style: normal; background: #f5f7f8; border-left: 3px solid var(--ui-brand); padding: 10px 12px; border-radius: 0 8px 8px 0; margin-top: 18px; }
.ui-auth-card form > div + div { margin-top: 19px; }
.ui-auth-card input:not([type="hidden"]) { min-height: 48px; }
.ui-auth-card button[type="submit"] { min-height: 50px; background: linear-gradient(110deg, var(--ui-brand), var(--ui-dark)); box-shadow: 0 8px 18px -10px var(--ui-brand); position: relative; }
.ui-auth-card button[type="submit"]::after { content: "\2192"; display: inline-block; margin-left: 14px; transition: transform 180ms ease; }
.ui-auth-card button[type="submit"]:hover::after { transform: translateX(3px); }
.ui-auth-card > .mt-6 { border-top: 1px solid var(--ui-line); padding-top: 22px; margin-top: 30px; }
.ui-auth-story { position: relative; isolation: isolate; overflow: hidden; padding: 38px 44px; background: radial-gradient(ellipse at 100% 0%, #ffffff10, transparent 70%), var(--ui-dark); color: white; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.ui-auth-story::after { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; border: 1px solid #ffffff14; box-shadow: 0 0 0 45px #ffffff05, 0 0 0 90px #ffffff04; border-radius: 50%; right: -260px; bottom: -150px; }
.ui-brand-lockup { display: flex; align-items: center; gap: 12px; }
.ui-brand-lockup img { width: 46px; height: 46px; object-fit: contain; background: white; border-radius: 12px; padding: 6px; }
.ui-brand-lockup strong { display: block; font-size: 16px; }
.ui-brand-lockup small { font-size: 11px; color: #ffffffbd; }
.ui-auth-story .ui-eyebrow { color: #ffffffb8; }
.ui-auth-story h1 { font-size: clamp(30px, 3.1vw, 40px); line-height: 1.18; font-weight: 650; max-width: 420px; margin: 0 0 16px; }
.ui-auth-story p { color: #ffffffc4; font-size: 14px; line-height: 1.8; max-width: 370px; }
.ui-steps { display: grid; gap: 12px; margin-top: 24px; }
.ui-steps li { display: flex; gap: 12px; align-items: center; color: #ffffffe0; font-size: 13px; }
.ui-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 1px solid #ffffff38; font-size: 11px; color: #ffffffb8; }
.ui-story-footer { border-top: 1px solid #ffffff26; padding-top: 20px; font-size: 11px; color: #ffffffa8; }
.ui-artwork { position: relative; height: 172px; margin: 4px 0 12px; pointer-events: none; }
.ui-art-orbit { position: absolute; width: 230px; height: 144px; border: 1px solid #ffffff28; border-radius: 50%; left: 50%; top: 20px; transform: translateX(-50%) rotate(-15deg); }
.ui-art-sheet { position: absolute; width: 135px; height: 162px; border-radius: 12px; left: 50%; top: 3px; }
.ui-art-sheet-back { transform: translateX(-37%) rotate(13deg); background: #ffffff32; border: 1px solid #ffffff4d; }
.ui-art-sheet-front { transform: translateX(-61%) rotate(-9deg); background: #fbfdfc; padding: 17px; box-shadow: 0 16px 24px -14px #001b2690; }
.ui-art-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ui-art-symbol { color: var(--ui-brand); font-size: 24px; line-height: 1; }
.ui-art-seal { width: 23px; height: 23px; border-radius: 50%; background: var(--ui-soft); color: var(--ui-brand); display: grid; place-items: center; font-size: 10px; }
.ui-art-line { height: 4px; width: 100%; border-radius: 3px; background: #dce6e4; margin-bottom: 7px; }
.ui-art-line-title { height: 6px; width: 72%; background: var(--ui-brand); opacity: .7; }
.ui-art-line-short { width: 65%; }
.ui-art-divider { height: 1px; background: #e5ecea; margin: 12px 0; }
.ui-art-row { display: flex; gap: 7px; align-items: baseline; }
.ui-art-row > span { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--ui-brand); }
.ui-art-spark { position: absolute; color: #ffffffb0; font-size: 24px; font-weight: 300; }
.ui-art-spark-one { top: 24px; left: 17%; }
.ui-art-spark-two { bottom: 16px; right: 17%; font-size: 17px; }
.ui-journey, .ui-summary { margin: 20px 20px 0; }
.ui-journey { padding: 24px 28px 20px; border: 1px solid var(--ui-line); border-radius: 20px; background: white; }
.ui-journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.ui-journey-heading h2 { font-size: 15px; font-weight: 650; }
.ui-journey-heading > span { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 4px 10px; color: var(--ui-brand); background: var(--ui-soft); white-space: nowrap; }
.ui-progress { display: flex; gap: 16px; }
.ui-progress li { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; font-size: 12px; color: var(--ui-muted); }
.ui-progress li:not(:last-child)::after { content: ""; height: 1px; background: var(--ui-line); flex: 1; margin-left: 6px; }
.ui-step-dot { height: 32px; width: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #f1f4f6; border: 1px solid var(--ui-line); font-size: 11px; font-weight: 600; }
.ui-progress .is-done { color: var(--ui-brand); }
.ui-progress .is-done .ui-step-dot { background: var(--ui-soft); border-color: var(--ui-soft); }
.ui-progress .is-current { color: var(--ui-ink); font-weight: 650; }
.ui-progress .is-current .ui-step-dot { color: white; background: var(--ui-brand); border-color: var(--ui-brand); box-shadow: 0 0 0 4px var(--ui-soft); }
.ui-next-step { margin-top: 20px; padding-top: 15px; border-top: 1px solid #edf1f3; font-size: 12px; color: var(--ui-muted); display: flex; gap: 9px; align-items: baseline; }
.ui-next-step i { color: var(--ui-brand); }
.ui-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ui-summary-item { display: flex; align-items: center; gap: 16px; padding: 24px; background: white; border: 1px solid var(--ui-line); border-radius: 18px; }
.ui-summary-icon { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: var(--ui-soft); color: var(--ui-brand); font-size: 17px; }
.ui-summary-item > div > span { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-summary-item strong { display: block; font-size: 28px; font-weight: 650; letter-spacing: -.035em; line-height: 1.5; }
.ui-summary-item small { font-size: 12px; color: var(--ui-muted); margin-left: 8px; letter-spacing: 0; font-weight: 400; }
.ui-section-heading { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 650; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--ui-line); }
.ui-section-heading i { color: var(--ui-brand); }
.ui-status-grid > div { background-image: none; background-color: #fbfcfd; border-color: var(--ui-line); text-align: left; padding: 20px; }
.ui-status-grid > div > div:first-child { margin-left: 0; height: 40px; width: 40px; border-radius: 12px; box-shadow: none; }
.ui-status-grid > div > div:first-child i { font-size: 18px; }
.ui-status-grid > div > .text-xl { font-size: 17px; }
.ui-status-grid > div > .text-sm { font-size: 12px; line-height: 1.7; }
.ui-table-hint { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ui-muted); margin: 8px 2px; }
.ui-table-hint[hidden] { display: none; }
.ui-app input[type="file"] { padding: 8px; border: 1px dashed #a8bcb4; background: var(--ui-soft); max-width: 100%; }
.ui-app input[type="file"]::file-selector-button { color: var(--ui-dark); background: white; border: 1px solid var(--ui-line); border-radius: 8px; padding: 7px 12px; margin-right: 12px; cursor: pointer; }
.ui-app .fixed.inset-0[class*="z-50"] > div { border-radius: 22px; border: 1px solid var(--ui-line); box-shadow: 0 24px 70px -20px #152f4b55; }
.ui-app .fixed.inset-0[class*="z-50"] > div > .border-b { background: #f8fafb; }
@keyframes ui-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .ui-auth-shell, .ui-intro { animation: ui-enter 450ms ease-out both; }
  .ui-app main > .grid > section { animation: ui-enter 420ms ease-out both; }
  .ui-app main > .grid > section:nth-child(2) { animation-delay: 70ms; }
  .ui-summary-item, .ui-journey { animation: ui-enter 420ms ease-out both; }
  .ui-summary-item:nth-child(2) { animation-delay: 50ms; }
  .ui-summary-item:nth-child(3) { animation-delay: 100ms; }
  @media (hover: hover) { .ui-app button[type="submit"]:hover { transform: translateY(-1px); } }
}
@media (min-width: 1024px) { .ui-student main > .grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 2fr); } .ui-student main > .grid > section { grid-column: span 1; } }
@media (max-width: 900px) {
  .ui-auth > .ui-auth-shell { max-width: 520px; grid-template-columns: 1fr; }
  .ui-auth-story { padding: 28px; gap: 28px; }
  .ui-auth-story h1 { font-size: 30px; max-width: none; margin-bottom: 10px; }
  .ui-auth-story .ui-steps, .ui-auth-story .ui-story-footer { display: none; }
  .ui-artwork { display: none; }
  .ui-auth-story p { max-width: none; }
  .ui-auth-story .ui-eyebrow { margin-bottom: 8px; }
  .ui-app main > .grid > section { padding: 20px; }
  .ui-progress { gap: 10px; }
  .ui-progress li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ui-progress li:not(:last-child)::after { position: absolute; top: 16px; left: 36px; right: 0; }
  .ui-summary-item { padding: 18px; gap: 12px; }
  .ui-summary-icon { width: 36px; height: 36px; font-size: 14px; }
  .ui-summary-item small { display: block; margin-left: 0; }
}
@media (max-width: 600px) {
  body.ui-auth { padding: 16px; align-items: flex-start; }
  .ui-auth > .ui-auth-shell { border-radius: 20px; }
  .ui-auth-story { padding: 24px; gap: 20px; }
  .ui-auth-story h1 { font-size: 24px; margin: 0; }
  .ui-auth-story p, .ui-auth-story .ui-eyebrow { display: none; }
  .ui-auth .ui-auth-card { padding: 26px 24px; }
  .ui-app > header > div { padding-inline: 16px; min-height: 70px; }
  .ui-app > header h1 { font-size: 14px; }
  .ui-app > header .gap-6 { gap: 16px; }
  .ui-app main > .grid { padding-inline: 12px; gap: 16px; margin-top: 16px; }
  .ui-intro { margin: 18px 12px 0; padding: 24px 20px; border-radius: 18px; }
  .ui-intro-mark { display: none; }
  .ui-app :where(input:not([type="hidden"]), select, textarea) { font-size: 16px; }
  .ui-app main form[method="GET"] .relative { width: 100%; min-width: 0; }
  .ui-journey, .ui-summary { margin: 16px 12px 0; }
  .ui-journey { padding: 20px; }
  .ui-progress { gap: 8px; }
  .ui-progress li { min-width: 0; font-size: 10px; overflow-wrap: anywhere; }
  .ui-journey-heading h2 { font-size: 13px; }
  .ui-summary { gap: 8px; }
  .ui-summary-item { display: block; padding: 14px 10px; border-radius: 14px; }
  .ui-summary-icon { margin-bottom: 12px; }
  .ui-summary-item > div > span { font-size: 10px; min-height: 32px; }
  .ui-summary-item strong { font-size: 23px; }
  .ui-summary-item small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-app *, .ui-app *::before, .ui-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .ui-app { background: white; } .ui-skip, .ui-intro-mark { display: none; } }