/* EduTN Liquid Glass theme layer. Loaded after each site's existing stylesheet. */
:root {
  --glass-bg: rgba(15, 25, 43, 0.68);
  --glass-bg-strong: rgba(18, 31, 53, 0.84);
  --glass-bg-soft: rgba(28, 43, 68, 0.48);
  --glass-border: rgba(180, 215, 255, 0.16);
  --glass-border-bright: rgba(132, 211, 255, 0.34);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 18px 55px rgba(1, 8, 20, 0.28);
  --glass-shadow-soft: 0 10px 34px rgba(1, 8, 20, 0.2);
  --glass-blur: blur(18px) saturate(135%);
  --glass-radius: 18px;
  --glass-radius-sm: 12px;
  --glass-accent: #67e8f9;
  --glass-accent-2: #6ee7b7;
  --glass-text: #f5f9ff;
  --glass-muted: #a9bad2;
}

html { background: #08111f; }
body {
  color: var(--glass-text);
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(74, 144, 226, 0.18), transparent 68%),
    radial-gradient(760px 500px at 96% 4%, rgba(72, 211, 183, 0.11), transparent 66%),
    linear-gradient(145deg, #08111f 0%, #0b1728 48%, #0b1422 100%);
  background-attachment: fixed;
}
body::before {
  opacity: .24;
  background-image: linear-gradient(rgba(180,215,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(180,215,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
}

nav {
  background: rgba(8, 17, 31, 0.66);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 30px rgba(1, 8, 20, .16);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
nav.scrolled { background: rgba(8, 17, 31, .84); border-bottom-color: var(--glass-border-bright); }

.edtn-prompt-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; background: rgba(3, 10, 20, .78); backdrop-filter: blur(8px); }
.edtn-prompt-box { width: min(440px, 100%); padding: 28px; border: 1px solid rgba(34, 197, 94, .3); border-radius: var(--radius, 14px); background: linear-gradient(145deg, var(--surface2), var(--surface)); color: var(--white); text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); animation: edtnPromptIn 180ms ease-out; }
.edtn-prompt-message { margin: 0; line-height: 1.8; color: var(--text); }
.edtn-prompt-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.edtn-prompt-actions button { border: 0; border-radius: var(--radius-sm, 8px); padding: 11px 20px; cursor: pointer; font: inherit; font-weight: 700; }
.edtn-prompt-cancel { background: var(--surface2); color: var(--text); }
.edtn-prompt-confirm { background: var(--green); color: var(--bg); }
@keyframes edtnPromptIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.nav-logo { text-shadow: 0 0 24px rgba(103, 232, 249, .18); }
.nav-links { gap: 0; }
.nav-links a { color: var(--glass-muted); padding-left: 9px; padding-right: 9px; font-size: .8rem; white-space: nowrap; transition: color .22s ease, background .22s ease, transform .22s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--glass-text); background: rgba(255,255,255,.055); }
.nav-hamburger span { background: var(--glass-text); }
.mobile-menu {
  background: rgba(10, 20, 35, .86);
  border: 1px solid var(--glass-border);
  border-top: 0;
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.hero, .page-hero, .shop-hero {
  isolation: isolate;
  background: linear-gradient(135deg, rgba(18, 37, 62, .36), rgba(12, 24, 42, .12));
}
.hero::after, .page-hero::after, .shop-hero::after {
  content: '';
  position: absolute;
  inset: 12% 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166, 228, 255, .34), transparent);
  pointer-events: none;
}
.hero h1, .page-hero h1, .shop-hero h1 { text-shadow: 0 8px 35px rgba(0,0,0,.24); }

.section, .content-section, .shop-section { position: relative; }
.section-title, .section-heading, .page-title { color: var(--glass-text); }

.project-overview { padding-top: 28px; padding-bottom: 28px; }
.project-overview-inner {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr);
  gap: 24px;
  align-items: stretch;
  padding: 26px;
  background: linear-gradient(120deg, rgba(44, 75, 108, .42), rgba(12, 27, 46, .52));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-soft), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.project-overview-intro { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px 8px 4px; }
.project-overview-intro h2 { max-width: 420px; margin: 10px 0; color: var(--glass-text); font-family: 'Syne', sans-serif; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; }
.project-overview-intro p { max-width: 470px; color: var(--glass-muted); line-height: 1.7; }
.project-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.project-point { padding: 18px; border: 1px solid rgba(180, 215, 255, .13); border-radius: var(--glass-radius-sm); background: rgba(5, 15, 28, .28); transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.project-point:hover { transform: translateY(-3px); border-color: var(--glass-border-bright); background: rgba(103, 232, 249, .07); }
.project-point-mark { display: inline-flex; margin-bottom: 20px; color: var(--glass-accent); font: 700 .72rem/1 'DM Sans', sans-serif; letter-spacing: .12em; }
.project-point h3 { margin-bottom: 8px; color: var(--glass-text); font-family: 'Syne', sans-serif; font-size: 1rem; }
.project-point p { color: var(--glass-muted); font-size: .86rem; line-height: 1.65; }

.subject-card, .item-card, .contact-card, .product-card, .resource-card, .auth-card, .admin-card, .modal-content, .empty-state, .stat-card {
  background: linear-gradient(145deg, rgba(32, 52, 80, .68), rgba(14, 27, 47, .58));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-soft), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.subject-card, .item-card, .contact-card, .product-card { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.subject-card:hover, .item-card:hover, .contact-card:hover, .product-card:hover {
  border-color: var(--glass-border-bright);
  box-shadow: 0 20px 52px rgba(1, 8, 20, .3), 0 0 0 1px rgba(103,232,249,.05);
  transform: translateY(-4px);
}
.item-card::before, .product-card::before, .auth-card::before {
  background: linear-gradient(90deg, transparent, rgba(170, 229, 255, .28), transparent);
}

.toolbar, .filters-bar, .filter-bar, .resource-toolbar {
  background: rgba(12, 24, 42, .64);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-sm);
  box-shadow: var(--glass-shadow-soft), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.search-wrap, .filter-search, .form-input, .form-select, select, textarea, input[type='text'], input[type='email'], input[type='password'], input[type='tel'] {
  color: var(--glass-text);
  background: rgba(5, 14, 27, .46);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.search-input, .filter-search input { background: transparent; border-color: transparent; }
.form-input:focus, .form-select:focus, select:focus, textarea:focus, input:focus, .search-wrap:focus-within, .filter-search:focus-within {
  outline: none;
  border-color: rgba(103, 232, 249, .7);
  background: rgba(8, 22, 39, .66);
  box-shadow: 0 0 0 3px rgba(103, 232, 249, .11), 0 8px 24px rgba(1, 8, 20, .16);
}
::placeholder { color: #7f94af; }

.btn, .btn-auth, .btn-add, .btn-download, .download-btn, button, .pill, .filter-btn {
  border: 1px solid rgba(160, 218, 255, .2);
  border-radius: var(--glass-radius-sm);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.btn-primary, .btn-auth, .btn-add {
  color: #07131f;
  background: linear-gradient(135deg, #8af0df 0%, #67e8f9 52%, #7dd3fc 100%);
  border-color: rgba(220, 255, 251, .56);
  box-shadow: 0 10px 26px rgba(58, 205, 215, .2), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-ghost, .btn-download, .download-btn, .filter-btn, .pill {
  color: var(--glass-text);
  background: rgba(255,255,255,.055);
}
.btn:hover, .btn-auth:hover, .btn-add:hover, .btn-download:hover, .download-btn:hover, button:hover:not(:disabled), .filter-btn:hover, .pill:hover { transform: translateY(-2px); border-color: var(--glass-border-bright); box-shadow: 0 12px 28px rgba(1, 8, 20, .22); }
.btn:active, .btn-auth:active, .btn-add:active, button:active { transform: translateY(0); }
button:disabled, .btn:disabled, .btn-auth:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.filter-btn.active, .pill.active, .filter-tabs .active { color: #07131f; background: linear-gradient(135deg, #8af0df, #67e8f9); border-color: transparent; }
.product-tag, .item-type, .badge-new, .badge-hot, .badge-promo { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.product-cover-placeholder, .product-cover { background: linear-gradient(145deg, rgba(47, 78, 111, .7), rgba(9, 19, 34, .76)); }

.auth-wrapper { position: relative; }
.auth-card { overflow: hidden; }
.auth-card::after { content: ''; position: absolute; width: 220px; height: 220px; top: -120px; right: -80px; border-radius: 50%; background: rgba(103,232,249,.08); filter: blur(5px); pointer-events: none; }
.auth-alert, .admin-alert, .alert, .toast { border: 1px solid var(--glass-border); border-radius: var(--glass-radius-sm); box-shadow: var(--glass-shadow-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.table-wrap, table, .admin-table-wrap { border-color: var(--glass-border); }
table { background: rgba(12, 24, 42, .45); border-radius: var(--glass-radius-sm); overflow: hidden; }
th { background: rgba(103, 232, 249, .08); color: var(--glass-text); }
td { border-color: rgba(180, 215, 255, .1); color: var(--glass-muted); }
tr:hover td { background: rgba(255,255,255,.035); color: var(--glass-text); }

footer { background: rgba(7, 16, 29, .72); border-top: 1px solid var(--glass-border); box-shadow: 0 -16px 45px rgba(1, 8, 20, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.footer-col a, .footer-brand p, .footer-bottom { color: var(--glass-muted); }

#page-loader { background: #08111f; }
#progress-bar { background: linear-gradient(90deg, var(--glass-accent-2), var(--glass-accent)); box-shadow: 0 0 14px rgba(103,232,249,.42); }
#scroll-top { background: rgba(16, 35, 57, .74); border: 1px solid var(--glass-border-bright); box-shadow: var(--glass-shadow-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

@media (max-width: 900px) {
  .section, .content-section, .shop-section { padding-left: clamp(16px, 4vw, 36px); padding-right: clamp(16px, 4vw, 36px); }
  .products-grid, .items-grid { gap: 16px; }
  .project-overview-inner { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 640px) {
  nav { padding-left: 16px; padding-right: 16px; }
  .hero, .page-hero, .shop-hero { padding-left: 16px; padding-right: 16px; }
  .toolbar, .filters-bar, .filter-bar, .resource-toolbar { border-radius: var(--glass-radius-sm); }
  .form-row { gap: 0; }
  .subject-card, .item-card, .contact-card, .product-card, .auth-card { border-radius: 15px; }
  .products-grid, .items-grid { grid-template-columns: 1fr; }
  .project-overview { padding-top: 16px; padding-bottom: 16px; }
  .project-overview-inner { padding: 18px; }
  .project-overview-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Final visual pass: sharper contrast, layered depth, and stronger interaction states. */
:root {
  --glass-bg: rgba(11, 22, 38, .72);
  --glass-bg-strong: rgba(13, 28, 48, .9);
  --glass-bg-soft: rgba(24, 45, 70, .48);
  --glass-border: rgba(182, 224, 255, .2);
  --glass-border-bright: rgba(103, 232, 249, .72);
  --glass-highlight: rgba(255, 255, 255, .11);
  --glass-shadow: 0 24px 70px rgba(1, 8, 20, .38);
  --glass-shadow-soft: 0 14px 38px rgba(1, 8, 20, .28);
  --glass-accent: #78efff;
  --glass-accent-2: #71f1c4;
}

::selection { color: #06131d; background: var(--glass-accent); }

body {
  background:
    radial-gradient(720px 440px at 12% 0%, rgba(55, 143, 219, .2), transparent 70%),
    radial-gradient(680px 460px at 92% 18%, rgba(42, 218, 181, .14), transparent 68%),
    linear-gradient(125deg, #06101d 0%, #0b192b 48%, #07121f 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .28;
  background-image: linear-gradient(115deg, transparent 0 46%, rgba(120, 239, 255, .035) 50%, transparent 54%);
  background-size: 520px 520px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

nav {
  background: linear-gradient(180deg, rgba(5, 14, 27, .88), rgba(9, 23, 39, .68));
  border-bottom-color: rgba(120, 239, 255, .26);
  box-shadow: 0 12px 38px rgba(1, 8, 20, .24), inset 0 -1px 0 rgba(255, 255, 255, .04);
}

.nav-logo span {
  color: #06131d;
  background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
  box-shadow: 0 0 22px rgba(103, 232, 249, .3), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--glass-text);
  background: linear-gradient(135deg, rgba(120, 239, 255, .12), rgba(113, 241, 196, .06));
  box-shadow: inset 0 0 0 1px rgba(120, 239, 255, .14);
}

.hero, .page-hero, .shop-hero {
  background: linear-gradient(135deg, rgba(32, 67, 98, .3), rgba(8, 21, 37, .12));
}

.hero h1, .page-hero h1, .shop-hero h1, .section-header h2 {
  text-shadow: 0 10px 34px rgba(0, 0, 0, .3);
}

.hero h1 em, .section-tag, .section-title, .section-heading { color: var(--glass-accent); }

.hero-badge, .page-tag, .tag, .count-badge, .item-type, .file-type {
  background: linear-gradient(135deg, rgba(120, 239, 255, .12), rgba(113, 241, 196, .06));
  border-color: rgba(120, 239, 255, .32);
}

.stats-row {
  background: linear-gradient(135deg, rgba(27, 67, 91, .28), rgba(8, 22, 38, .32));
  border-color: rgba(120, 239, 255, .18);
}

.stat-num span, .subject-arrow, .item-meta svg, .breadcrumb a:hover { color: var(--glass-accent); }

.subject-card, .item-card, .contact-card, .product-card, .resource-card, .auth-card, .admin-card, .modal-content, .stat-card {
  background: linear-gradient(145deg, rgba(31, 59, 87, .76), rgba(8, 23, 40, .7));
  border-color: rgba(182, 224, 255, .22);
  box-shadow: 0 18px 52px rgba(1, 8, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.subject-card:hover, .item-card:hover, .contact-card:hover, .product-card:hover {
  border-color: var(--glass-border-bright);
  box-shadow: 0 26px 68px rgba(1, 8, 20, .4), 0 0 0 1px rgba(120, 239, 255, .08);
}

.subject-icon, .item-icon, .page-icon {
  background: linear-gradient(145deg, rgba(120, 239, 255, .16), rgba(113, 241, 196, .06));
  border: 1px solid rgba(120, 239, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.toolbar, .filters-bar, .filter-bar, .resource-toolbar {
  background: rgba(7, 19, 34, .76);
  border-color: rgba(182, 224, 255, .2);
  box-shadow: 0 16px 42px rgba(1, 8, 20, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.search-input, .form-input, .form-select, select, textarea, input[type='text'], input[type='email'], input[type='password'], input[type='tel'] {
  background: rgba(3, 13, 25, .58);
  border-color: rgba(182, 224, 255, .2);
}

.search-input:focus, .form-input:focus, .form-select:focus, select:focus, textarea:focus, input:focus, .search-wrap:focus-within {
  border-color: var(--glass-accent);
  box-shadow: 0 0 0 3px rgba(120, 239, 255, .13), 0 12px 28px rgba(1, 8, 20, .2);
}

.btn-primary, .btn-auth, .btn-add, .item-btn {
  color: #06131d;
  background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent) 55%, #8bd8ff);
  border-color: rgba(226, 255, 252, .68);
  box-shadow: 0 12px 30px rgba(56, 211, 216, .24), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.btn-primary:hover, .btn-auth:hover, .btn-add:hover, .item-btn:hover {
  background: linear-gradient(135deg, #a3ffe6, #8af5ff 55%, #b2e6ff);
  box-shadow: 0 16px 36px rgba(56, 211, 216, .34), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.btn-ghost, .btn-download, .download-btn, .filter-btn, .pill {
  color: var(--glass-text);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(182, 224, 255, .24);
}

.btn-ghost:hover, .btn-download:hover, .download-btn:hover, .filter-btn:hover, .pill:hover {
  color: var(--glass-accent);
  background: rgba(120, 239, 255, .1);
  border-color: var(--glass-border-bright);
}

.filter-btn.active, .pill.active, .filter-tabs .active {
  color: #06131d;
  background: linear-gradient(135deg, var(--glass-accent-2), var(--glass-accent));
}

footer, .footer, .footer-main {
  background: linear-gradient(180deg, rgba(7, 17, 30, .72), rgba(4, 12, 22, .9));
  border-top-color: rgba(120, 239, 255, .2);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--glass-accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .subject-card, .item-card, .contact-card, .product-card, .auth-card { border-radius: 14px; }
  .hero, .page-hero, .shop-hero { background: linear-gradient(135deg, rgba(25, 58, 86, .26), rgba(8, 21, 37, .14)); }
}