/* Subset of the legacy styles.css used by public pages (generated, see tests/test_legacy_css.py). */
:root { --bg: #f7f9fc; --fg: #2a2a2a; --card-bg: #ffffff; --primary: #667eea; --primary-hover: #5568d3; --table-header-bg: #667eea; --table-row-alt: #f8f9ff; --btn-radius: 8px; }
body.dark-mode { --bg: #1e1e2f; --fg: #e0e0e0; --card-bg: #2c2c3e; --primary: #667eea; --primary-hover: #764ba2; --table-header-bg: #667eea; --table-row-alt: #252538; }
[hidden], .is-hidden { display: none !important; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
@media (min-width: 1025px) {
  :is(#movieTable, #tvShowTable, #animeTable, #videoGameTable, #musicTable, #bookTable).mobile-library :is(th, td) { width: auto; min-width: 80px; padding: 16px 12px; white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
  :is(#movieTable, #tvShowTable, #animeTable, #videoGameTable, #musicTable, #bookTable).mobile-library :is(th, td):nth-child(2) { min-width: 220px; width: 22%; text-align: left; line-height: 1.5; }
  :is(#movieTable, #tvShowTable, #animeTable, #videoGameTable, #musicTable, #bookTable).mobile-library :is(th, td):last-child { position: static; box-shadow: none; min-width: 216px; width: 216px; white-space: normal; }
}
@media (max-width: 1024px) {
  :is(#movieTable, #tvShowTable, #animeTable, #videoGameTable, #musicTable, #bookTable).mobile-library td:is([data-card-field="cover"], [data-card-field="title"], [data-card-field="actions"])::before { content: none; }
  .mobile-library tr.card-expanded td[data-card-field="detail"], .mobile-library tr:has(input, textarea, select) td[data-card-field="detail"] { display: block; }
  .mobile-library tr:has(input, textarea, select) .library-card-details { display: none; }
}
.public-site-nav { align-items: center; border-bottom: 1px solid var(--border, rgba(102, 126, 234, 0.24)); color: var(--fg, #2a2a2a); display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; margin-bottom: 24px; padding-bottom: 18px; }
.public-site-nav a { color: inherit; text-decoration: none; }
.public-site-nav a:hover { color: var(--primary, #667eea); text-decoration: underline; text-underline-offset: 4px; }
.public-site-nav__links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.public-site-nav__links a { color: var(--fg-secondary, #555); font-size: 0.95rem; font-weight: 600; }
.public-site-nav__links .public-site-nav__cta { border: 1px solid var(--primary, #667eea); border-radius: 8px; color: var(--primary, #667eea); padding: 4px 10px; }
.public-site-nav__links .public-site-nav__cta:hover { background: rgba(102, 126, 234, 0.12); text-decoration: none; }
.action-btn-full { margin-top: 10px; width: 100%; }
.reactivate-container { margin-top: 10px; text-align: center; }
html { height: 100%; }
body { background-image: image-set(url("/omnitrackr_vortex.webp") 1x type("image/webp"), url("/omnitrackr_vortex.png") 1x type("image/png")); background-size: cover; background-position: center center; background-attachment: fixed; background-color: var(--bg); color: var(--fg); font-family: Arial, sans-serif; line-height: 1.6; margin: 0px; padding: 20px 20px 0px; transition: background-color 0.3s, color 0.3s; min-height: 100vh; display: flex; flex-direction: column; }
@media (max-width: 768px) {
  body { background-image: none; background-attachment: scroll; padding: 10px 10px 0px; }
}
.container { max-width: 1600px; padding: 0px 20px; box-sizing: border-box; margin-left: 250px; margin-right: auto; transition: margin-left 0.3s, max-width 0.3s; flex: 1 1 0%; width: 100%; display: block; }
.container > * { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (min-width: 1850px) {
  .container { margin-left: calc(50% - 675px); max-width: 1600px; }
}
.header { margin-bottom: 12px; padding: 18px 20px; border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 14px; background: linear-gradient(115deg, rgb(35, 35, 64), rgb(23, 45, 53)); display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; gap: 20px; align-items: center; }
.header h1, .header .app-title { font-size: 1.65rem; font-family: Poppins, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; margin: 0px; background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 50%, rgb(240, 147, 251) 100%) 0% 0% / 200% 200% text; -webkit-text-fill-color: transparent; letter-spacing: 0px; position: relative; filter: drop-shadow(rgba(102, 126, 234, 0.4) 0px 4px 8px) drop-shadow(rgba(118, 75, 162, 0.3) 0px 0px 20px); text-transform: uppercase; }
@media (max-width: 768px) {
  .header { grid-template-columns: minmax(0px, 1fr) auto; padding: 16px; gap: 14px 8px; }
  .header h1, .header .app-title { font-size: 1.35rem; animation: auto ease 0s 1 normal none running none; filter: drop-shadow(rgba(102, 126, 234, 0.4) 0px 2px 4px); }
}
@keyframes gradient-shift { 
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@supports not (-webkit-background-clip: text) {
  .header h1, .header .app-title { color: rgb(102, 126, 234); text-shadow: rgba(102, 126, 234, 0.6) 0px 2px 8px, rgba(118, 75, 162, 0.4) 0px 0px 25px; }
}
.tab { flex: 0 0 auto; padding: 12px 24px; background-color: var(--card-bg); border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 3px solid transparent; cursor: pointer; font-size: 16px; font-weight: bold; color: var(--fg); transition: 0.3s; min-height: 44px; }
@media (max-width: 768px) {
  .tab { padding: 10px 16px; font-size: 14px; min-height: 48px; white-space: nowrap; }
}
.tab.active { background-color: var(--primary); color: white; border-bottom-color: var(--primary); }
.tab:hover:not(.active) { background-color: var(--table-row-alt); }
.card { background-color: var(--card-bg); padding: 24px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px; margin-bottom: 24px; transition: transform 0.2s, box-shadow 0.2s; width: 100%; max-width: 100%; box-sizing: border-box; }
.card:hover { box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px; }
@media (max-width: 768px) {
  .card { padding: 16px; margin-bottom: 16px; transition: none; }
  .card:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px; transform: none; }
  button.action-btn:hover { transform: none; }
}
.card h2 { margin-top: 0px; margin-bottom: 20px; color: var(--fg); font-weight: 700; font-size: 1.5rem; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { padding: 12px 16px; margin: 8px 0px; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 8px; width: calc(100% - 36px); background-color: var(--bg); color: var(--fg); font-size: 1rem; transition: 0.2s; box-sizing: border-box; }
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: rgba(102, 126, 234, 0.1) 0px 0px 0px 3px; }
@media (max-width: 768px) {
  input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { padding: 14px 16px; font-size: 16px; min-height: 48px; appearance: none; }
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 45px; }
}
body.dark-mode input, body.dark-mode select { border-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.1); color: var(--fg); }
body.dark-mode input:focus, body.dark-mode select:focus { border-color: var(--primary); background-color: rgba(255, 255, 255, 0.15); color: var(--fg); }
body.dark-mode select option { background-color: rgb(26, 26, 46); color: var(--fg); padding: 8px; }
label { display: inline-block; margin-right: 10px; }
button.action-btn { min-height: 36px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); color: white; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; margin-right: 8px; margin-top: 8px; min-width: 100px; font-weight: 600; font-size: 0.9rem; transition: 0.2s; box-shadow: rgba(102, 126, 234, 0.3) 0px 2px 8px; }
button.action-btn:hover { transform: translateY(-2px); box-shadow: rgba(102, 126, 234, 0.4) 0px 4px 12px; background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%); }
button.action-btn:active { transform: translateY(0px); box-shadow: rgba(102, 126, 234, 0.3) 0px 2px 6px; }
table { width: 100%; border-collapse: separate; border-spacing: 0px; table-layout: auto; background-color: transparent; }
th, td { padding: 16px 12px; vertical-align: middle; text-align: left; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgba(0, 0, 0, 0.08); transition: background-color 0.2s; }
body.dark-mode th, body.dark-mode td { border-bottom-color: rgba(255, 255, 255, 0.08); }
table[id^="customTab"][id$="Table"] th, table[id^="customTab"][id$="Table"] td { text-align: center; }
th { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); color: white; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; position: sticky; top: 0px; z-index: 10; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; text-align: center; }
th:first-child { border-top-left-radius: 12px; }
th:last-child { border-top-right-radius: 12px; }
th:last-child, td:last-child { position: sticky; right: 0px; z-index: 5; white-space: nowrap; }
th:last-child { z-index: 11; box-shadow: rgba(0, 0, 0, 0.1) -4px 2px 4px; }
td:last-child { background-color: var(--card-bg); box-shadow: rgba(0, 0, 0, 0.06) -4px 0px 4px; }
tbody tr:nth-child(2n) td:last-child { background-color: var(--table-row-alt); }
tbody tr:hover td:last-child { background-color: rgba(102, 126, 234, 0.05); }
body.dark-mode tbody tr:hover td:last-child { background-color: rgba(102, 126, 234, 0.1); }
tbody tr { transition: 0.2s; background-color: var(--card-bg); }
tbody tr:nth-child(2n) { background-color: var(--table-row-alt); }
tbody tr:hover { background-color: rgba(102, 126, 234, 0.05); transform: scale(1.01); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
body.dark-mode tbody tr:hover { background-color: rgba(102, 126, 234, 0.1); }
tbody tr:last-child td { border-bottom: none; }
table input[type="text"], table input[type="number"] { margin: 0px; padding: 8px 12px; width: 100%; box-sizing: border-box; font: inherit; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 6px; background-color: var(--bg); transition: 0.2s; }
table input[type="text"]:focus, table input[type="number"]:focus { outline: none; border-color: var(--primary); box-shadow: rgba(102, 126, 234, 0.1) 0px 0px 0px 2px; }
body.dark-mode table input[type="text"], body.dark-mode table input[type="number"] { border-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.05); }
table input[type="checkbox"] { margin: 0px auto; display: block; width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary); }
table a { color: var(--primary); text-decoration: none; font-weight: 500; transition: 0.2s; padding: 4px 8px; border-radius: 4px; }
table a:hover { background-color: rgba(102, 126, 234, 0.1); text-decoration: underline; }
body.dark-mode table a:hover { background-color: rgba(102, 126, 234, 0.2); }
table img { border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; transition: transform 0.2s, box-shadow 0.2s; }
table img:hover { transform: scale(1.05); box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px; }
button.action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.card > div:first-of-type { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid rgba(0, 0, 0, 0.05); }
body.dark-mode .card > div:first-of-type { border-bottom-color: rgba(255, 255, 255, 0.1); }
.card > div:first-of-type h2 { margin: 0px; color: var(--fg); font-weight: 700; font-size: 1.75rem; }
.card > div:first-of-type span { font-weight: 600; color: var(--primary); font-size: 1.1rem; padding: 6px 12px; background-color: rgba(102, 126, 234, 0.1); border-radius: 8px; }
body.dark-mode .card > div:first-of-type span { background-color: rgba(102, 126, 234, 0.2); }
.card > div:nth-of-type(2) { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding: 16px; background-color: rgba(0, 0, 0, 0.02); border-radius: 8px; }
body.dark-mode .card > div:nth-of-type(2) { background-color: rgba(255, 255, 255, 0.03); }
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr { display: block; }
  th:last-child, td:last-child { position: static; box-shadow: none; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  tr { margin-bottom: 10px; }
  td { border: none; position: relative; padding-left: 50%; }
  td::before { position: absolute; top: 12px; left: 6px; width: 45%; white-space: nowrap; }
  td:nth-of-type(1)::before { content: "Poster"; }
  td:nth-of-type(2)::before { content: "Title"; }
  td:nth-of-type(3)::before { content: "Director"; }
  td:nth-of-type(4)::before { content: "Year"; }
  td:nth-of-type(5)::before { content: "Rating"; }
  td:nth-of-type(6)::before { content: "Watched"; }
  td:nth-of-type(7)::before { content: "Review"; }
  td:nth-of-type(8)::before { content: "IMDb"; }
  td:nth-of-type(9)::before { content: "Actions"; }
}
@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes shimmer { 
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (max-width: 768px) {
  .screenshot-modal-content { max-width: 95%; max-height: 85vh; }
  .screenshot-modal-close { top: 10px; right: 15px; font-size: 30px; width: 35px; height: 35px; }
  .screenshot-modal-caption { font-size: 1rem; padding: 10px 16px; bottom: 10px; }
  .landing-faq { padding: 40px 15px; }
  .faq-title { font-size: 2rem; margin-bottom: 30px; }
  .faq-question { padding: 16px 20px; font-size: 1rem; }
  .faq-answer { padding: 0px 20px; }
  .faq-question[aria-expanded="true"] + .faq-answer { padding: 0px 20px 16px; }
  .faq-answer p { font-size: 0.9rem; }
}
#mainContainer, #mainFooter, .notification-bell { display: none; }
#landingPage { display: block; min-height: 100vh; background-color: var(--bg); padding: 0px; margin: 0px; }
.landing-hero { text-align: center; padding: 80px 20px 60px; background-image: image-set(url("/vortex.webp") 1x type("image/webp"), url("/vortex.gif") 1x type("image/gif")); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }
.landing-hero::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); z-index: 0; }
.landing-hero > * { position: relative; z-index: 1; }
.features-title { text-align: center; font-size: 2.5rem; color: var(--fg); margin-bottom: 40px; font-weight: 700; letter-spacing: 0.05em; }
.screenshot-modal { display: none; position: fixed; z-index: 10000; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow: auto; animation: 0.3s ease 0s 1 normal none running fadeIn; }
.screenshot-modal.show { display: flex; align-items: center; justify-content: center; }
.screenshot-modal-content { margin: auto; display: block; max-width: 90%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 32px; animation: 0.3s ease 0s 1 normal none running zoomIn; }
.screenshot-modal-caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; font-size: 1.2rem; text-align: center; background: rgba(0, 0, 0, 0.7); padding: 12px 24px; border-radius: 8px; max-width: 80%; }
.screenshot-modal-close { position: absolute; top: 20px; right: 35px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10001; transition: opacity 0.3s; line-height: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); border-radius: 50%; }
.screenshot-modal-close:hover { opacity: 0.7; background: rgba(0, 0, 0, 0.7); }
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes zoomIn { 
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.landing-faq { padding: 60px 20px; max-width: 900px; margin: 0px auto 80px; }
.faq-title { text-align: center; font-size: 2.5rem; color: var(--fg); margin-bottom: 40px; font-weight: 700; letter-spacing: 0.05em; }
.faq-container { display: flex; flex-direction: column; gap: 16px; }
.faq-item { background-color: var(--card-bg); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; overflow: hidden; transition: box-shadow 0.3s; }
.faq-item:hover { box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px; }
.faq-question { width: 100%; padding: 20px 24px; background-color: transparent; border: none; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--fg); font-size: 1.1rem; font-weight: 600; transition: background-color 0.2s; }
.faq-question:hover { background-color: rgba(102, 126, 234, 0.05); }
.faq-question:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.faq-icon { font-size: 1.5rem; font-weight: 300; color: var(--primary); transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0px; overflow: hidden; transition: max-height 0.3s, padding 0.3s; padding: 0px 24px; }
.faq-question[aria-expanded="true"] + .faq-answer { max-height: 500px; padding: 0px 24px 20px; }
.faq-answer p { color: var(--fg); opacity: 0.85; line-height: 1.7; margin: 0px; font-size: 0.95rem; }
.faq-answer a { color: var(--primary); text-decoration: none; transition: opacity 0.2s; }
.faq-answer a:hover { opacity: 0.8; text-decoration: underline; }
@keyframes iconWiggle { 
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg) scale(1.1); }
  75% { transform: rotate(5deg) scale(1.1); }
}
@keyframes iconSlide { 
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(8px); }
}
.landing-auth { padding: 60px 20px; display: flex; justify-content: center; align-items: center; min-height: 400px; }
.auth-container { background-color: var(--card-bg); padding: 40px; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px; max-width: 400px; width: 90%; }
.landing-auth .auth-container { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px; }
.auth-container h2 { margin-top: 0px; color: var(--primary); text-align: center; }
.auth-form input { width: 100%; padding: 12px; margin: 10px 0px; border: 1px solid rgb(204, 204, 204); border-radius: var(--btn-radius); box-sizing: border-box; background-color: var(--bg); color: var(--fg); }
.auth-form button { width: 100%; padding: 12px; margin-top: 10px; background-color: var(--primary); color: white; border: none; border-radius: var(--btn-radius); cursor: pointer; font-size: 1rem; }
.auth-form button { transition: 0.3s; }
.auth-form button:hover { background-color: var(--primary-hover); box-shadow: rgba(102, 126, 234, 0.6) 0px 0px 20px; transform: translateY(-2px); }
.auth-toggle { text-align: center; margin-top: 20px; color: var(--fg); }
.auth-toggle a { color: var(--primary); text-decoration: none; cursor: pointer; }
.auth-toggle a:hover { text-decoration: underline; }
#authError { color: rgb(244, 67, 54); text-align: center; margin: 10px 0px; min-height: 20px; }
#authSuccess { color: rgb(76, 175, 80); text-align: center; margin: 10px 0px; padding: 10px; background-color: rgba(76, 175, 80, 0.1); border-radius: 4px; font-weight: bold; }
#userDisplay, .user-display-btn { position: fixed; top: 60px; right: 20px; background-color: var(--card-bg); padding: 8px 16px; border-radius: var(--btn-radius); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; z-index: 100; display: none; border: 1px solid rgba(0, 0, 0, 0.1); cursor: pointer; transition: 0.3s; font-size: 0.95rem; color: var(--fg); align-items: center; gap: 10px; }
body.dark-mode #userDisplay, body.dark-mode .user-display-btn { border-color: rgba(255, 255, 255, 0.1); }
#userDisplay:hover, .user-display-btn:hover { background-color: var(--primary); color: white; transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; }
#userDisplay:not(:empty), .user-display-btn:not(:empty) { display: inline-flex; }
#logoutBtn { position: fixed; top: 120px; right: 20px; display: none; padding: 8px 16px; background-color: rgb(244, 67, 54); color: white; border: none; border-radius: var(--btn-radius); cursor: pointer; z-index: 100; }
#logoutBtn:hover { background-color: rgb(211, 47, 47); }
@media (max-width: 768px) {
  .landing-hero { background: linear-gradient(135deg, rgb(30, 30, 47) 0%, rgb(45, 27, 78) 50%, rgb(30, 30, 47) 100%); }
  .features-title { font-size: 2rem; }
}
#landingPage { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(102, 126, 234, 0.08), transparent 520px),
    var(--bg); }
#landingPage .landing-hero { order: 1; }
#landingPage .landing-faq { order: 10; }
#landingPage .landing-auth { order: 11; }
.landing-hero { min-height: 78vh; padding: 72px 20px 42px; display: flex; align-items: center; text-align: left; background-size: cover; background-position: center center; background-image: linear-gradient(90deg, rgba(12, 16, 32, 0.86), rgba(12, 16, 32, 0.58)), image-set(url("/vortex.webp") 1x type("image/webp"), url("/vortex.gif") 1x type("image/gif")); }
@media (prefers-reduced-motion: reduce) {
  .landing-hero { background-image: linear-gradient(90deg, rgba(12, 16, 32, 0.86), rgba(12, 16, 32, 0.58)), url("/vortex-still.webp"); }
}
.landing-hero::before { display: none; }
.features-title, .screenshots-title, .faq-title { letter-spacing: 0px; }
.landing-auth { min-height: unset; padding: 72px 20px; background: var(--bg); }
.auth-container { max-width: 440px; border-radius: 8px; }
.auth-context, .auth-helper-text { color: var(--fg-secondary); line-height: 1.55; text-align: center; }
#registerForm, #forgotPasswordForm, #resetPasswordForm, #authSuccess, #resendVerificationContainer { display: none; }
#resendVerificationContainer { margin-top: 15px; text-align: center; }
#resendVerificationContainer p { margin-bottom: 10px; color: var(--fg-secondary); font-size: 0.9rem; }
.auth-full-button { width: 100%; background-color: var(--primary); }
.auth-secondary-link { display: inline-block; margin-top: 5px; font-size: 0.9em; }
@media (max-width: 900px) {
  .landing-hero { min-height: unset; padding: 54px 18px 34px; }
}
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideUp { 
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
@media (max-width: 768px) {
  .container { margin-left: 0px; max-width: 100%; padding: 0px 10px; }
  #logoutBtn { right: 10px; top: 120px; left: auto; padding: 6px 12px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
  body { padding: 8px 8px 60px; }
  .header { margin-bottom: 10px; }
  .header h1, .header .app-title { font-size: 1.2rem; }
  .container { padding: 0px 8px; }
  .card { padding: 12px; margin-bottom: 15px; }
  .card > div:first-of-type h2 { font-size: 1.5rem; }
  .action-btn { padding: 8px 12px; font-size: 0.85rem; min-height: 44px; }
  .card > div:nth-of-type(2) { padding: 12px; gap: 8px; }
  input[type="text"], input[type="number"], select { padding: 10px; font-size: 14px; min-height: 44px; }
}
.review-report { border-top: 1px solid var(--border); color: var(--fg-secondary); margin-top: 1rem; padding-top: 0.75rem; }
.review-report summary { cursor: pointer; font-size: 0.82rem; width: fit-content; }
.review-report form { align-items: end; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.65rem; }
.review-report label { display: grid; font-size: 0.78rem; gap: 0.25rem; }
.review-report select, .review-report button { font: inherit; padding: 0.5rem 0.65rem; }
.review-report__status { flex-basis: 100%; font-size: 0.78rem; margin: 0px; }
@media (max-width: 360px) {
  .header { padding: 12px; gap: 12px 6px; }
}