:root { --background: #000000; --background2: #141414; --foreground: #f8fafc; --card: #000000; --card-header: #141414; --card-foreground: #f8fafc; --popover: #000000; --popover-foreground: #f8fafc; --primary: #f8fafc; --primary-foreground: #0f172a; --secondary: #262626; --secondary-foreground: #f8fafc; --muted: #333333; --muted-foreground: #818181; --accent: #333333; --accent-foreground: #f8fafc; --destructive: #b30000; --destructive-foreground: #f8fafc; --border: #333333; --input: #333333; --ring: #ff0000; --theme-color: #f37021; --overlay: rgba(0, 0, 0, 0.9); --gradient-secondary: linear-gradient(270deg, #ffd24c, #f37021, #b27cff); --success: #10b981; --info: #03fff5; --warning: #f1c40f; --icon-fill: #f8fafc; color-scheme: dark; } html.light { --background: #ffffff; --background2: #f4f4f5; --foreground: #0f172a; --card: #ffffff; --card-header: #f4f4f5; --card-foreground: #0f172a; --popover: #ffffff; --popover-foreground: #0f172a; --primary: #0f172a; --primary-foreground: #ffffff; --secondary: #f1f5f9; --secondary-foreground: #0f172a; --muted: #f1f5f9; --muted-foreground: #64748b; --accent: #f1f5f9; --accent-foreground: #0f172a; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e2e8f0; --input: #e2e8f0; --ring: #f37021; --theme-color: #f37021; --overlay: rgba(255, 255, 255, 0.9); --icon-fill: #333333; color-scheme: light; } html { background-color: var(--background); -webkit-tap-highlight-color: transparent; } body { background-color: var(--background); color: var(--foreground); margin: 0; min-height: 100vh; width: 100vw; overflow-x: hidden; position: relative; transition: none !important; } .is-transitioning, .is-transitioning *, .is-transitioning *::before, .is-transitioning *::after { transition: none !important; } .theme-wrapper { position: relative; display: inline-block; } .theme-menu { position: absolute; top: 100%; margin-top: 10px; right: -55px; width: 260px; background-color: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: none; transform: none; transition: none; opacity: 1; z-index: 99999999 !important; } .theme-menu.active { display: block; } .theme-section-title { font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 10px; font-weight: 600; } .theme-divider { height: 1px; background-color: var(--border); margin: 12px 0; } .mode-list { display: flex; flex-direction: column; gap: 4px; } .mode-btn { background: transparent; border: none; color: var(--foreground); padding: 8px 12px; text-align: left; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; transition: background 0.2s; } .mode-btn:hover { background-color: var(--secondary); } .mode-btn.active { color: var(--theme-color); font-weight: 600; } .mode-btn .check-icon { margin-left: auto; opacity: 0; color: var(--theme-color); } .mode-btn.active .check-icon { opacity: 1; } .color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .color-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; position: relative; transition: transform 0.2s; } .color-btn:hover { transform: scale(1.1); } .color-btn.active { border-color: var(--foreground); } .color-btn::after { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; border-radius: 50%; background-color: var(--bg-color); } header { z-index: 50; position: relative; background-color: var(--background2); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; mix-blend-mode: normal; } ::view-transition-group(site-header) { animation: none; z-index: 1000; mix-blend-mode: normal; } .expand-transition::view-transition-new(root) { z-index: 9999; } .expand-transition::view-transition-old(root) { z-index: 1; } .shrink-transition::view-transition-old(root) { z-index: 9999; } .shrink-transition::view-transition-new(root) { z-index: 1; } .theme-btn { background: transparent; color: var(--foreground); border: 1px solid var(--border); width: 45px; height: 45px; border: none; outline: none; cursor: pointer; display: flex; align-items: center; justify-content: center; outline: none; position: relative; overflow: hidden; margin-right: -10px; } .theme-btn svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; stroke-width: 2px; } .sun-icon { display: none; } .moon-icon { display: block; } html.light .sun-icon { display: block; } html.light .moon-icon { display: none; } .off-canvas-menu { position: fixed; top: 0; right: -100%; width: 300px; height: 100%; background-color: var(--background2); z-index: 100; transition: right 0.3s ease; display: flex; flex-direction: column; } .off-canvas-menu.active { right: 0; } .menu-header { padding: 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--foreground); } .menu-content { flex: 1; overflow-y: auto; color: var(--foreground); display: flex; flex-direction: column; justify-content: space-between; } .menu-footer { padding: 15px; border-top: 1px solid var(--border); } .item { padding: 10px; background: var(--card); color: var(--foreground); border: 1px solid var(--border) !important; } input { background: var(--input); color: var(--foreground); border: 1px solid var(--border); padding: 8px; border-radius: 4px; width: 100%; box-sizing: border-box; } .search-result { padding: 10px; border-bottom: 1px solid var(--border); } .search-result h3 a { color: var(--theme-color); text-decoration: none; } mark { background: var(--theme-color); color: white; } * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; outline: none !important; } a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; } a:focus { outline: solid 0px !important; } button, a { transition: background-color 0.2s; } *:focus { outline: 0 !important; } ::-webkit-scrollbar { display: none; } ::-moz-selection { background-color: var(--theme-color); color: var(--background); } ::selection { background-color: var(--theme-color); color: var(--background); } ::-webkit-scrollbar { display: none !important; } html { scrollbar-width: none; } body { margin: 0; font-family: "Quicksand", sans-serif; font-size: 13px; color: var(--foreground); background-color: var(--background); min-height: 100vh; padding: 0; -ms-overflow-style: none; } .MJX-TEX { font-size: 12px !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .min-h-screen { min-height: 100vh; } .flex { display: flex; } .fc { flex-direction: column; } .flex1 { flex: 1 1 0%; } .container { width: 100%; } .mxa { margin-left: auto; margin-right: auto; } .padding1 { padding: 0.5rem; padding-bottom: 10rem; } .padding2 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .padding3 { padding-top: 1rem; } .padding4 { padding: 8px; } .margin1 { margin-bottom: 1rem; } .margin2 { margin-bottom: 1.5rem; } .margin3 { margin-top: 1rem; } .margin4 { margin-top: 5rem; } .margin4 > * + * { margin-top: 0.75rem; } .margin5 > * + * { margin-top: 1.5rem; } .gap1 { gap: 0.5rem; } .gap2 { gap: 0.75rem; } .gap3 { gap: 1rem; } .grid { display: grid; } .gridc1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gridc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gridc3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .itemsC { align-items: center; margin-bottom: 0; } .justifyC { justify-content: space-between; } .textCntr { text-align: center; } h1, h2, h3, h4, h5, h6 { color: var(--foreground); font-weight: 600; line-height: 1.2; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.125rem; } .text-muted-foreground { color: var(--muted-foreground); } .text-primary { color: var(--primary); } .textG { color: var(--success); } .textR { color: var(--destructive); } .textA { color: var(--theme-color); } .textY { color: var(--warning); } .textB { color: var(--info); } .textP { color: #8b5cf6; } #welcomeOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--background); display: none; justify-content: center; align-items: center; z-index: 9999; } .overlay-content { display: flex; background: var(--background); padding: 60px; text-align: center; color: var(--foreground); align-items: center; gap: 60px; max-width: 1150px; width: 90%; } .overlay-left img { width: 500px; height: 500px; object-fit: contain; } .overlay-right { flex: 1; text-align: left; } .overlay-right h2 { margin-bottom: 15px; font-size: 20px !important; } .overlay-right input { width: 100%; padding: 10px; font-size: 20px; margin-bottom: 15px; border: 1px solid var(--border); outline: none; background: var(--input); color: var(--foreground); } .overlay-right button { width: 100%; padding: 10px; font-size: 20px; background: var(--theme-color); color: #fff; border: none; cursor: pointer; margin-bottom: 25px; } #welcomeMsg { font-size: 36px !important; font-weight: bold; text-align: center; color: var(--theme-color); opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; } img { pointer-events: none !important; } @media (max-width: 768px) { .overlay-content { flex-direction: column; text-align: center; padding: 40px; gap: 20px; } .overlay-left img { max-width: 100%; height: 300px; } .overlay-right h2 { font-size: 13px !important; } .overlay-right input { font-size: 16px; padding: 10px; } .overlay-right button { font-size: 16px; padding: 10px; } #welcomeMsg { font-size: 30px !important; } } #heroTitle { font-size: 48px; font-weight: bold; text-align: center; line-height: 1.2; } header { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; background: linear-gradient(var(--overlay), var(--overlay)), url("../image/header.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 0 10px; color: #fff; position: sticky; top: 0; z-index: 100; user-select: none; } header a img, .uiu-term-header a img { display: block; height: 35px; filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.9)); } .header-links { display: flex; align-items: center; gap: 0; } .header-btn { text-decoration: none; color: #fff; padding: 5px; border-radius: 5px; transition: background 0.3s; } .header-btn:hover { color: var(--theme-color); } .hamburger-btn, .search-btn, .account-btn, .close-btn, .fullscreen-btn { width: 25px; height: 60px; border-radius: var(--radius); background: none; border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .hamburger-btn i, .search-btn i, .account-btn i, .close-btn i, .fullscreen-btn i { display: block; line-height: 1; } .hamburger-btn i, .close-btn i { font-size: 20px; } .search-btn i, .account-btn i { font-size: 16px; } .fullscreen-btn i { font-size: 17px; } @media (max-width: 768px) { .header-btn { display: none; } } .off-canvas-menu { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: var(--card); background: linear-gradient(var(--overlay), var(--overlay)), url("../image/ocanvas.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 100000; transition: right 0.4s ease; display: flex; flex-direction: column; user-select: none; } .off-canvas-menu.active { right: 0; } .menu-header { height: 50px; padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: rgba(0, 0, 0, 0.4); flex-shrink: 0; } .menu-title { font-size: 18px !important; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; } .menu-content { padding: 10px; flex: 1; overflow-y: auto; overflow-x: hidden; } .input-group { margin-bottom: 15px; } .input-group label { display: block; color: #fff; font-size: 13px; margin-bottom: 5px; } .input-group input { width: 100%; padding: 10px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); color: #fff; } .offcanvas-buttons { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; } .offcanvas-btn { display: block; text-align: center; padding: 7px 15px; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); color: #fff; text-decoration: none; border-radius: 0; font-weight: bold; margin-bottom: 10px; transition: background-color 0.3s; } .offcanvas-btn:hover { background-color: var(--theme-color); } .menu-footer, .menu-footer-f1 { flex-shrink: 0; border-top: 1px solid var(--border); background: rgba(0, 0, 0, 0.2); } .menu-footer { padding: 10px 15px; } .menu-footer-f1 { padding: 3px; text-align: center; } .developer-info { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; } .developer-avatar { border-radius: var(--radius); border: 2px solid var(--border); flex-shrink: 0; overflow: hidden; } .developer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .developer-content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .developer-name { font-size: 14px; font-weight: 700; color: #fff; margin: 0; text-align: left; } .social-links { display: flex; gap: 4px; } .social-link { width: 20px; height: 20px; border-radius: var(--radius); background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: #ccc; text-decoration: none; font-size: 10px; transition: all 0.3s ease; } .social-link:hover { background: var(--theme-color); color: #fff; transform: translateY(-1px); } .uiu-badge, .uiu-license-badge { display: inline-flex; color: #fff; padding: 5px 0; } .uiu-badge-left, .uiu-license-left { background-color: var(--muted); } .uiu-badge-left, .uiu-license-left, .uiu-badge-right, .uiu-license-right { padding: 2px 8px; font-size: 11px !important; } .uiu-badge-right { background-color: var(--theme-color); } .uiu-license-right { background-color: #008000; } .breadcrumb { display: flex; align-items: center; font-size: 13px; color: var(--foreground); padding: 6px 20px; padding-top: 10px; background: var(--background); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: 100%; box-sizing: border-box; margin-top: -6px !important; position: sticky; z-index: 9; top: 45px; user-select: none; } .breadcrumb a { text-decoration: none; color: var(--foreground); display: flex; align-items: center; } .breadcrumb a:hover { color: var(--theme-color); } .breadcrumb span { margin: 0 5px; color: var(--foreground); } .breadcrumb i { margin-right: 3px; } .breadcrumb span.bc-current-page { color: var(--theme-color); font-weight: bold; margin-left: -1px; } .container, .gsc-main { max-width: 1450px !important; margin: auto; } .card { background-color: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); overflow: hidden; } .card-title { font-size: 13px; font-weight: 600; } .card-description { color: var(--muted-foreground); } .card-content { padding: 0.8rem; } .card-content-grad { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .uiu-modal > div.card-content { background-color: #333 !important; } .form-group { margin-bottom: 1rem; } label { display: block; font-weight: 500; margin-bottom: 0.5rem; font-size: 13px; } input, select { font-family: "Quicksand", sans-serif; width: 100%; padding: 0.5rem; margin-bottom: 0.6rem; border: 1px solid var(--input); border-radius: var(--radius); background-color: transparent; color: var(--muted-foreground); } input:focus, select:focus { outline: none; border: 1px solid var(--theme-color); } button { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: all 0.2s; cursor: pointer; } .btn { font-size: 13px; padding: 0.75rem 1rem; margin-top: 1rem; width: 100%; background-color: var(--primary); color: var(--primary-foreground); border: 1px solid transparent; border-radius: var(--radius); } @media (max-width: 1024px) { #calculateCGPABtn, #resetCGPABtn, #calculateFeeBtn, #resetFeeBtn { margin-top: 0; } #resetCGPABtn, #resetFeeBtn { margin-bottom: 1.25rem; } } .btn-outline { background-color: transparent; color: var(--primary); border: 1px solid var(--border); } .btn-outline:hover { background-color: var(--theme-color); color: var(--accent-foreground); } .btn-destructive { background: none; border: none; font-weight: bold; } .btn-sm { padding: 0 0.15rem; border: none; outline: none; background: none; } .btn-sm:hover { background: none; } .btn-icon { padding: 0.5rem; width: 2rem; height: 2rem; } .tabs { display: flex; flex-direction: column; width: 100%; } .tabs-list { display: flex; width: 100%; margin-bottom: 1.5rem; background-color: transparent; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .tabs-trigger { width: 50%; text-align: center; padding: 0.8rem 1rem; background-color: var(--background2); color: var(--muted-foreground); border: none; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } .tabs-trigger:hover { background-color: var(--secondary); color: var(--foreground); } .tabs-trigger.active { background-color: var(--background); color: var(--foreground); } .tabs-content { display: none; animation: fadeIn 0.3s ease; } .tabs-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 0; font-size: 13px; } td, th { text-align: center; padding: 0.75rem; margin: 0; border-bottom: 1px solid var(--border); line-height: 0.75rem; } tr:last-child td { border-bottom: none; } .custom-table td, .custom-table th { text-align: left; line-height: 1.5rem; } .separator { height: 1px; background-color: var(--border); margin: 1rem 0; } .badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.5rem; font-weight: 500; line-height: 1; white-space: nowrap; } .badge-outline { background-color: transparent; border: 1px solid var(--border); color: var(--foreground); } .scroll-area { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); } @media (min-width: 768px) { .md\:gridc3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:p-8 { width: 100%; max-width: clamp(960px, 92vw, 1600px); padding: 2rem; margin: 0 auto; } .md\:flex-row { flex-direction: row; } } .icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } svg.icon.mr-2 { margin-right: 0.3rem; } .toggle-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .toggle-label { display: flex; align-items: center; gap: 1rem; flex: 1; font-size: 13px; } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--muted); transition: 0.4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: var(--foreground); transition: 0.4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--theme-color); } input:checked + .toggle-slider:before { transform: translateX(20px); } .toggle-description { font-size: 11px !important; color: var(--muted-foreground); font-style: italic; } .card { margin-bottom: 1.25rem; } select, input { height: 38px; } .btn { height: 38px; } .card-header { background-color: var(--card-header); border-bottom: 1px solid var(--border); padding: 0.7rem; display: flex; flex-direction: column; } .tabs-list { margin-bottom: 1.25rem; } .form-row { margin-bottom: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .note-g, .note-r, .note-b, .note-g1, .note-r1, .note-b1 { font-size: 13px; text-align: center; margin: 15px 0; padding: 8px; } .note-g { background-color: rgba(7, 158, 70, 0.226); color: var(--success); border: 1px solid rgba(36, 241, 6, 0.46); box-shadow: 0px 0px 2px #259c08; } .note-g1 { background-color: rgba(7, 158, 70, 0.226); color: var(--success); } .note-r, .note-r-sp1 { background-color: rgba(220, 17, 1, 0.16); color: var(--destructive); border: 1px solid rgba(241, 6, 6, 0.81); box-shadow: 0px 0px 2px var(--destructive); } .note-r1 { background-color: rgba(220, 17, 1, 0.16); color: var(--destructive); } .note-r-sp1 { width: 100%; text-align: left; margin: 0; } .note-b { background-color: rgba(1, 204, 220, 0.16); color: var(--info); border: 1px solid rgba(6, 241, 226, 0.81); box-shadow: 0px 0px 2px #03fff5; } .note-b1 { background-color: rgba(1, 204, 220, 0.16); color: var(--info); } .note-g sp { margin: 0; } .grad-txt { font-family: "Lobster", cursive; font-size: 35px !important; padding: 0 5px; text-align: center !important; font-weight: bold; background: var(--gradient-secondary); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 5s ease infinite; user-select: none; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .dark-select option { background-color: var(--background); color: var(--foreground); } #greeting { width: 100%; background: var(--background); color: var(--foreground); padding: 5px 20px; font-size: 13px !important; text-align: center; } .acc-wrapper { margin: 0 auto; line-height: 1.5; margin: 15px 0; } .acc-details-item { border-left: 1px dashed var(--foreground); border-right: 1px dashed var(--foreground); border-bottom: 1px dashed var(--foreground); padding: 1rem; color: var(--foreground); } .acc-details-item > * + * { margin-top: 1.5em; } .acc-item + .acc-item { margin-top: 0.5rem; } .acc-question-item { list-style: none; border: 1px dashed var(--border); padding: 0.75em 1em; cursor: pointer; position: relative; padding-left: calc(1.75rem + 0.75rem + 0.75rem); background-color: var(--card); font-weight: 700; } .acc-question-item::before { position: absolute; top: 50%; transform: translateY(-50%); left: 0.75rem; content: "↓"; width: 1.75rem; height: 1.75rem; color: var(--foreground); display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; } .acc-item[open] .acc-question-item { background-color: var(--theme-color); border: 2px solid var(--foreground); } .acc-item[open] .acc-question-item::before { content: "↑"; } .acc-details-item ul { list-style-type: disc; padding-left: 20px; margin: 10px 0; } .acc-details-item li { margin-bottom: 5px; line-height: 1.5; font-size: 14px; color: var(--foreground); } .container-h { font-size: 13px; display: flex; flex-wrap: wrap; width: 100%; gap: 20px; margin: 20px auto; } .left-column-h, .right-column-h { flex: 1; min-width: 300px; } .left-column-h { display: flex; justify-content: center; align-items: center; padding: 20px; } @media (min-width: 1000px) { .left-column-h { margin: 0 50px 0 100px; } } .right-column-h { color: var(--foreground); } .hero-sec h1 { font-family: "Lobster", cursive; margin-top: -1px; padding-bottom: 10px; font-weight: bold; flex: 1; transition: color 0.3s ease; background: var(--gradient-secondary); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 7s ease infinite; user-select: none; font-size: 35px !important; text-align: center; } .tool-all { margin: auto; padding: 20px; } .header-containerX { background-color: var(--theme-color); padding: 10px; border-radius: 5px 5px 0px 0px; } .item-heading { font-family: "Satisfy", cursive; text-align: center; color: #fff; font-size: 15px; font-weight: bold; margin-top: -5px; margin-bottom: -5px; } .containerx1 { margin: 0 auto; margin-bottom: 20px; border-top: none; background-color: var(--card); color: var(--foreground); border: 1px solid var(--border); padding: 10px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .item-containerX { margin: 4px; gap: 8px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); } .item { margin: 0; padding: 10px; font-size: 13px; background-color: rgba(var(--card), 0.5); color: var(--foreground); border: 1px solid var(--border); cursor: pointer; transition: background-color 0.3s; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; } .item:hover { color: #ffffff; transform: scale(1); transition: color 0.3s; } .item::before { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: var(--theme-color); transform: skewX(45deg); z-index: -1; transition: width 1000ms; } .item:hover::before { width: 250%; } @media (max-width: 600px) { .item-containerX { grid-template-columns: repeat(2, 1fr); gap: 8px; } .item { font-size: 13px; padding: 10px; } } .main-footer { background-color: var(--background); color: var(--foreground); text-align: center; padding: 5px; } .main-footer a { text-decoration: none; color: var(--theme-color); } .edit-btn, .remove-btn { padding: 2px 5px; margin: 0 2px; font-size: 11px; cursor: pointer; border: none; border-radius: 3px; color: #fff; } .edit-btn { background-color: var(--theme-color); } .remove-btn { background-color: var(--destructive); } .edit-btn:hover { opacity: 0.8; } .remove-btn:hover { opacity: 0.8; } .edit-btn:hover { opacity: 0.8; } .remove-btn:hover { opacity: 0.8; } .download-buttons { display: flex; gap: 10px; } .download-buttons i { font-size: 13px; margin-right: 5px; font-size: 11px !important; } .download-buttons .download-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 5px; background: #202020; border-radius: 2px; color: #fff; font-size: 13px; text-decoration: none; border: none; cursor: pointer; transition: 0.2s; } .download-buttons .download-btn:hover { background: #f37021; color: #fff; } @media (max-width: 770px) { .right-col { margin-top: 30px; } .resetTargetBtn { padding-top: 0px !important; } .tabs-trigger { padding: 6px; } } @media (min-width: 1024px) { .desktop-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; align-items: stretch; } .left-col, .right-col { display: flex; flex-direction: column; } #cgpaResult { position: -webkit-sticky; position: sticky; top: 100px; } #rightPlaceholder { flex: 1 1 auto; } #rightPlaceholder .card-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; text-align: center; } } .cs-host { position: relative; width: 100%; font-size: 13px; } .cs-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.5rem; border: 1px solid var(--input); background: transparent; color: var(--foreground); cursor: pointer; line-height: 1; min-height: 2rem; font-family: "Quicksand", sans-serif; } .cs-trigger:focus-visible { outline: none; border-color: var(--theme-color); } .cs-trigger[data-open="true"] .cs-caret { transform: rotate(180deg); } .cs-trigger[aria-expanded="true"], .cs-trigger[data-open="true"] { border: 1px solid var(--theme-color); } .cs-trigger:focus, .cs-trigger:focus-visible { outline: 2px solid var(--theme-color); outline-offset: 2px; } .cs-label { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; font-size: 13px; white-space: nowrap; color: var(--muted-foreground); } .cs-caret { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 0.15s ease; color: var(--foreground); } .cs-native { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cs-menu { position: fixed; z-index: 1000; background: var(--background2); color: var(--foreground); border: 1px solid var(--input); max-height: 380px !important; overflow: auto; opacity: 0; transform: scale(0.98); transition: opacity 0.12s ease, transform 0.12s ease; } .cs-menu[data-open="true"] { z-index: 999999; opacity: 1; transform: none; } .cs-menu[data-direction="up"] { transform-origin: bottom; } .cs-menu[data-direction="down"] { transform-origin: top; } .cs-option { padding: 0.5rem 0.75rem; cursor: pointer; outline: none; } .cs-option:hover, .cs-option:focus-visible { background: var(--theme-color); } .h-8.cs-trigger { min-height: 38px; padding-top: 0.25rem; padding-bottom: 0.25rem; margin-bottom: 0.6rem; } @media (max-width: 770px) { .small-table { font-size: 0.75rem; } .small-table th, .small-table td { padding-left: 4px; padding-right: 4px; } } .q-no { background-color: var(--success); color: #fff; padding: 0 6px 2px 6px; margin-right: 8px; border-radius: 50px; } .flex { display: flex !important; flex-direction: row !important; } .flex-c { display: flex !important; flex-direction: column !important; } .sidebar { font-size: 13px; width: 240px; min-width: 240px; padding-bottom: 130px; background-color: var(--card); border-right: 1px solid var(--border); color: var(--foreground); height: 100vh; overflow-y: auto; position: sticky; top: 80px; left: 0; transition: width 0.3s ease; user-select: none; background: linear-gradient(var(--overlay), var(--overlay)), url("../image/ocanvas.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sidebar.collapsed { width: 60px; min-width: 60px; padding: 0; } .sidebar.collapsed .sidebar-header span { display: none; } @media (max-width: 768px) { .sidebar { position: fixed; left: -280px; top: 0; height: 100vh; z-index: 1000; transition: left 0.3s ease; } .sidebar.open { left: 0; } } .sidebar-t { font-size: 13px; width: 240px; min-width: 240px; padding-bottom: 130px; background-color: var(--card); border-right: 1px solid var(--border); color: var(--foreground); height: calc(100vh - 80px); overflow-y: auto; position: fixed !important; top: 79px; left: 0; transition: width 0.3s ease; user-select: none; z-index: 1000; background: linear-gradient(var(--overlay), var(--overlay)), url("/assets/image/ocanvas.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } .sidebar-t-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: transparent; color: var(--foreground); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--border); } .toggle-icon { transition: transform 0.3s ease; color: var(--foreground); } .sidebar-t-nav { padding: 10px; } .sidebar-item { padding: 10px; font-size: 13px; transition: background-color 0.2s ease, transform 0.2s ease; overflow: hidden; white-space: nowrap; border-radius: 40px; color: var(--foreground); } .sidebar-link { display: flex; align-items: center; color: var(--foreground); text-decoration: none; width: 100%; } .sidebar-item i { width: 20px; text-align: center; margin-right: 10px; flex-shrink: 0; font-size: 15px; color: var(--foreground); opacity: 0.9; } .sidebar-item:hover { background-color: var(--theme-color); cursor: pointer; transform: scale(1.03); } .sidebar-item:hover .sidebar-link, .sidebar-item:hover i { color: #fff !important; opacity: 1; } .sidebar-t.collapsed { width: 60px; min-width: 60px; padding: 0; } .sidebar-t.collapsed .sidebar-t-header { justify-content: center; padding: 0.75rem 0; } .sidebar-t.collapsed .sidebar-t-header span { display: none; } .sidebar-t.collapsed .toggle-icon { transform: rotate(180deg); } .sidebar-t.collapsed .sidebar-item { padding: 10px 0; display: flex; justify-content: center; } .sidebar-t.collapsed .sidebar-link { justify-content: center; } .sidebar-t.collapsed .sidebar-item span { display: none; } .sidebar-t.collapsed .sidebar-item i { margin-right: 0; } @media (max-width: 768px) { .sidebar-t { left: -280px; top: 0; height: 100vh; transition: left 0.3s ease; } .sidebar-t.open { left: 0; } } .stickyResult { position: sticky; top: 500px; } @media (min-width: 1024px) { .left-col { position: sticky !important; top: 95px; align-self: flex-start; } } table#off-c-t { width: 80%; margin: 2rem auto; border-collapse: collapse; font-family: Arial, sans-serif; } #off-c-t td { padding: 0.75rem 1rem; vertical-align: middle; border: 1px solid var(--border); } .icon { margin-right: 0.75rem; } .badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 600; color: #fff; border-radius: 0.1rem; margin-right: 0.2rem; } .bg-primary { background-color: #0d6efd; } .bg-success { background-color: var(--success); } .float-end { float: right; } .course-row { cursor: pointer; } .collapse-row { display: none; background: var(--muted); } .seach-con { background: rgba(0, 0, 0, 0.2); padding: 10px; padding-bottom: 0; position: sticky; top: 0; z-index: 1000; } #searchBox { width: 100%; font-size: 13px; border: 1px solid var(--border); margin-bottom: 1rem; background: rgba(0, 0, 0, 0.2); color: white; } .result { width: 100%; margin-bottom: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .result h3 { font-size: 13px; } .result a { color: #fff; font-size: 13px; text-decoration: none; } .result a:hover { color: var(--theme-color); } .badge-01 { background: linear-gradient(135deg, #ff416c, #ff4b2b); } .badge-02 { background: linear-gradient(135deg, #00b09b, #96c93d); } .badge-03 { background: linear-gradient(135deg, #8e2de2, #4a00e0); } .badge-04 { background: linear-gradient(135deg, #ff9966, #ff5e62); } .badge-05 { background: linear-gradient(135deg, #2193b0, #6dd5ed); } .badge-06 { background: linear-gradient(135deg, #f7971e, #ffd200); color: #222; } .badge-07 { background: linear-gradient(135deg, #00c6ff, #0072ff); } .badge-08 { background: linear-gradient(135deg, #ee9ca7, #ffdde1); color: #222; } .badge-09 { background: linear-gradient(135deg, #56ab2f, #a8e063); } .badge-10 { background: linear-gradient(135deg, #f953c6, #b91d73); } mark { background: yellow; font-weight: bold; color: black; } .hero-content h1 { font-family: "Quicksand", sans-serif; } .navbar { font-family: "Quicksand", sans-serif; font-size: 13px; width: 2%; position: fixed; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; padding: 10px; align-items: center; z-index: 99; user-select: none; } .navbar button { font-size: 13px; background: transparent; color: var(--foreground); border: none; padding: 13px; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .navbar button:hover { color: var(--theme-color) !important; } .navbar i { font-size: 13px; margin-bottom: 5px; margin-top: -10px !important; padding-left: -50px; } .navbar span { font-family: "Quicksand", sans-serif; font-size: 12px; margin-top: -1px; } .modal-share { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card); border: 1px solid var(--theme-color); color: var(--theme-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width: 90%; max-width: 500px; padding: 20px; z-index: 1001; } .modal-share h2 { margin: 0 0 15px; font-size: 20px !important; } .modal-share .share-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .modal-share .share-buttons a { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--theme-color); background-color: transparent; color: var(--theme-color); text-decoration: none; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .modal-share .share-buttons a:hover { background-color: var(--theme-color); border: 1px solid var(--theme-color); color: var(--background); } .modal-share .copy-link { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--theme-color); background-color: transparent; color: var(--theme-color); padding: 5px; } .modal-share .copy-link input { border: none; outline: none; margin: 0; flex: 1; background: transparent; color: var(--theme-color); } .modal-share .copy-link button { background: var(--theme-color); color: var(--background); border: none; padding: 10px; border-radius: 2px; cursor: pointer; } .modal-share .close { position: absolute; top: 15px; right: 18px; background: transparent; border: none; font-size: 25px !important; color: var(--foreground); cursor: pointer; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; } .share-buttons i { padding: 0; } .index-modal table { width: 100%; border-collapse: collapse; font-family: Hind Siliguri, sans-serif !important; z-index: 1001; } .index-modal colgroup col:nth-child(1) { width: 8%; text-align: center; border-right: 1px solid var(--theme-color); } .index-modal th { text-align: center; background: var(--theme-color); color: var(--background); padding: 10px; font-size: 18px; position: sticky; top: 0; } .index-modal td { padding: 10px; } .index-modal tr:nth-child(odd) { background-color: var(--card); } .index-modal tr:nth-child(even) { background-color: var(--muted); } .index-modal td a { text-decoration: none; color: var(--foreground); } .index-modal td a:hover { text-decoration: none; color: var(--theme-color); font-weight: bold; } @media (max-width: 1200px) { body { padding-bottom: 60px !important; } .navbar { width: 95%; border-radius: 30px; height: 50px; background: var(--background); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--border); position: fixed; bottom: 10px !important; left: 50%; top: auto; transform: translateX(-50%); flex-direction: row; justify-content: space-around; padding-top: 20px; } } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--background); z-index: 999999; display: flex; justify-content: center; align-items: center; flex-direction: column; color: var(--foreground); background-color: var(--background); } .gradient-text { font-family: "Lobster", cursive !important; font-size: 40px !important; margin-top: 20px; text-align: center; padding: 10px; font-weight: bold; background: linear-gradient(270deg, #fff, var(--theme-color), #fff); background-size: 400% 400%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 10s ease infinite; user-select: none; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } #content-preload { display: none; color: var(--foreground); } .fadeIn { animation: fadeIn 0s ease-in-out forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .spinner { border: 4px solid var(--muted); border-top: 4px solid var(--theme-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { transform: rotateZ(45deg); perspective: 1000px; border-radius: 50%; width: 48px; height: 48px; color: var(--foreground); } .loader:before, .loader:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; transform: rotateX(70deg); animation: 1s spin linear infinite; } .loader:after { color: var(--theme-color); transform: rotateY(70deg); animation-delay: 0.4s; } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); } } @keyframes rotateccw { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes spin { 0%, 100% { box-shadow: 0.2em 0px 0 0px currentcolor; } 12% { box-shadow: 0.2em 0.2em 0 0 currentcolor; } 25% { box-shadow: 0 0.2em 0 0px currentcolor; } 37% { box-shadow: -0.2em 0.2em 0 0 currentcolor; } 50% { box-shadow: -0.2em 0 0 0 currentcolor; } 62% { box-shadow: -0.2em -0.2em 0 0 currentcolor; } 75% { box-shadow: 0px -0.2em 0 0 currentcolor; } 87% { box-shadow: 0.2em -0.2em 0 0 currentcolor; } } #commentSection { display: none; } .mode-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .mode-btn { display: flex; align-items: center; gap: 8px; } .check-icon { margin-left: auto; width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .uiu-term-panel, .uiu-term-toggle-btn { transition: none !important; animation: none !important; } } .uiu-term-toggle-btn { position: fixed; bottom: 20px; right: 20px; width: 35px; height: 35px; border-radius: 50%; background: var(--theme-color); border: none; color: #fff; font-size: 15px; cursor: pointer; z-index: 10004; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } @media (max-width: 1200px) { .uiu-term-toggle-btn { bottom: 70px; right: 20px; z-index: 997 !important; } } .uiu-term-toggle-btn:hover { transform: scale(1.05); color: #fff; background-color: var(--theme-color); filter: brightness(1.1); } .uiu-term-toggle-btn:active { transform: scale(0.95); } .uiu-term-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.22s ease; } .uiu-term-overlay.uiu-term-visible { opacity: 1; visibility: visible; } .uiu-term-panel { caret-color: transparent; position: fixed; bottom: 0; left: 0; width: 100%; height: 50vh; background: var(--card); border: 1px solid var(--border); border-bottom: none; z-index: 99999; transform: translateY(100%); transition: transform 0.22s ease; display: flex; flex-direction: column; font-family: "Fira Code", "JetBrains Mono", "Consolas", "Monaco", monospace; color: var(--foreground); padding-bottom: env(safe-area-inset-bottom, 0); background: linear-gradient(var(--overlay), var(--overlay)), url("/assets/image/ocanvas.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } .uiu-term-panel.uiu-term-open { transform: translateY(0); } .uiu-term-panel.uiu-term-fullscreen { height: 100vh; padding-bottom: env(safe-area-inset-bottom, 0); } .uiu-term-header { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 15px; background: var(--card-header); border-bottom: 1px solid var(--border); min-height: 44px; } .uiu-term-title { font-size: 13px; font-weight: 500; color: var(--info); margin: 0; } .uiu-term-header-actions { display: flex; gap: 0; margin-left: auto; } .uiu-term-header-btn { width: 25px; height: 32px; border: none; background: transparent; color: var(--muted-foreground); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.15s ease; } .uiu-term-header-btn .fa-xmark { font-size: 18px; } .uiu-term-header-btn .fa-compress { font-size: 15px; } .uiu-term-header-btn:hover { color: var(--foreground); } .uiu-term-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .uiu-term-output { flex: 1; padding: 16px; overflow-y: auto; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; padding-bottom: 100px; background-color: rgba(0, 0, 0, 0.2); user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; } .uiu-term-output::-webkit-scrollbar { width: 8px; } .uiu-term-output::-webkit-scrollbar-track { background: var(--background2); } .uiu-term-output::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; } .uiu-term-output::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); } .uiu-term-line { margin-bottom: 4px; user-select: text; } .uiu-term-prompt { color: var(--info); font-weight: 500; } .uiu-term-command { color: var(--foreground); } .uiu-term-output-text { color: var(--foreground); margin-left: 0; user-select: text; } .uiu-term-error { color: var(--destructive); } .uiu-term-success { color: var(--success); } .uiu-term-info { color: var(--success); color: var(--foreground); } .uiu-term-secondary { color: var(--muted-foreground); margin-bottom: 5px; } .uiu-term-link { color: var(--info); text-decoration: underline; cursor: pointer; } .uiu-term-link:hover { color: var(--theme-color); } .uiu-term-suggestions { position: fixed; bottom: 0; left: 0; right: 0; background: var(--popover); border-top: 1px solid var(--border); padding: 12px 16px; font-size: 12px; z-index: 10001; max-height: 150px; overflow-y: auto; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3); } .uiu-term-suggestions-title { color: var(--muted-foreground); margin-bottom: 8px; font-weight: 500; } .uiu-term-suggestions-list { color: var(--info); display: flex; flex-wrap: wrap; gap: 8px; } .uiu-term-suggestion { padding: 0 3px; background: var(--secondary); color: var(--secondary-foreground); cursor: pointer; transition: background 0.15s ease; border: 1px solid transparent; } .uiu-term-suggestion:hover { background: var(--muted); border-color: var(--info); } @media (max-width: 768px) { .uiu-term-output, .uiu-term-suggestions, .uiu-term-suggestion { font-size: 9px; } } .uiu-term-ascii { color: var(--info); font-size: 11px; line-height: 1.1; text-align: center; margin: 12px 0; } .uiu-term-ptq-tree { margin: 8px 0; } .uiu-term-ptq-level { margin-left: 16px; margin-bottom: 4px; } .uiu-term-ptq-item { cursor: pointer; padding: 1px 6px 0 6px; display: inline-block; margin-right: 8px; margin-bottom: 4px; border: 1px solid rgba(36, 241, 6, 0.46); background-color: rgba(7, 158, 70, 0.226); color: var(--success); } .uiu-term-ptq-item:hover { background: var(--muted); } .uiu-term-ptq-link { text-decoration: none; cursor: pointer; padding: 1px 6px 0 6px; display: inline-block; margin-right: 8px; margin-bottom: 4px; background-color: rgba(1, 204, 220, 0.16); color: var(--info); border: 1px solid rgba(6, 241, 226, 0.81); } .uiu-term-ptq-link:hover { filter: brightness(1.2); } @media (prefers-contrast: high) { .uiu-term-panel, .uiu-term-header, .uiu-term-input-area { border-color: var(--foreground); } } @media print { .uiu-term-toggle-btn, .uiu-term-overlay, .uiu-term-panel { display: none !important; } } .uiu-term-input-line-active { position: relative; user-select: none; } .uiu-term-inline-input { background: transparent; border: none; outline: none; color: var(--foreground); font-family: inherit; font-size: inherit; line-height: inherit; display: inline; min-width: 1ch; user-select: text; } .uiu-term-inline-input:empty:before { content: " "; white-space: pre; } .uiu-term-cursor { color: var(--theme-color); caret-color: transparent; animation: uiu-term-cursor-blink 1s infinite; } @keyframes uiu-term-cursor-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @media (max-width: 1200px) { .uiu-term-panel { height: 50vh; } .uiu-term-panel.uiu-term-fullscreen { height: 100dvh; } } .uiu-term-username { color: var(--theme-color); font-weight: bold; display: inline-block; margin-right: 3px; } .uiu-term-heading { color: var(--theme-color); margin-top: -6px; } .uiu-term-sep { opacity: 0.6; } .uiu-rps-container { border-radius: 1px !important; background-color: transparent !important; margin-top: 10px; margin-bottom: 10px; } .uiu-rps-container .rps-action-btn { cursor: pointer; padding: 8px 12px; color: var(--foreground); border: 1px solid var(--border); border-radius: 1px !important; font-weight: 600; user-select: none; background-color: transparent !important; transition: background-color 0.15s ease, transform 0.05s ease; } .uiu-rps-container .rps-action-btn:hover { filter: brightness(1.2); border-color: var(--theme-color); } .uiu-rps-container .rps-action-btn:active { transform: translateY(1px); } .uiu-rps-container .rps-action-btn[data-move="rock"], .uiu-rps-container .rps-action-btn[data-move="paper"], .uiu-rps-container .rps-action-btn[data-move="scissors"] { background-color: rgba(1, 204, 220, 0.16); color: var(--info); border: 1px solid rgba(6, 241, 226, 0.81); border-radius: 0; padding: 8px 12px; } .uiu-rps-title { text-align: center; font-size: 15px; font-weight: 900; color: var(--theme-color) !important; letter-spacing: 10px !important; } .help-control { width: 100%; border: 1px solid rgba(36, 241, 6, 0.46); background-color: rgba(7, 158, 70, 0.226); color: var(--success); border-radius: 0 !important; text-align: center; padding: 1px; } .uiu-snake-container div { border-radius: 3px; } .uiu-snake-container { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; margin-bottom: 10px; padding: 12px; width: 600px; background: transparent; border: 1px solid var(--border); border-radius: 1px; color: var(--foreground); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (max-width: 768px) { .uiu-snake-container { width: 100%; } .uiu-snake-popup { font-size: 5px; } } .uiu-snake-title { text-align: center; font-size: 15px; font-weight: 900; color: var(--theme-color); letter-spacing: 15px; } .uiu-snake-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 13px; color: var(--muted-foreground); } .uiu-snake-info.paused { color: var(--warning); } .uiu-snake-info.gameover { color: var(--destructive); } .uiu-snake-grid { --grid-size: 20; --gap: 1px; position: relative; display: grid; width: 100%; aspect-ratio: 1 / 1; grid-template-columns: repeat(var(--grid-size), 1fr); grid-template-rows: repeat(var(--grid-size), 1fr); gap: var(--gap); background: transparent; border: 1px solid var(--border); background: linear-gradient(var(--overlay), var(--overlay)), url("/assets/image/snake.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } .uiu-snake-grid.is-paused::after { content: "PAUSED"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); color: var(--warning); font-weight: 700; letter-spacing: 1px; } .uiu-snake-grid.is-gameover::after { content: attr(data-message); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.1); color: var(--destructive); font-weight: 800; letter-spacing: 1px; z-index: 10; } .uiu-snake-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .uiu-snake-info-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 12px; color: var(--muted-foreground); } .uiu-snake-help { text-align: center; font-size: 12px; color: var(--muted-foreground); } .uiu-btn { cursor: pointer; user-select: none; margin: 0; padding: 10px; font-size: 13px; background-color: var(--card); color: var(--foreground); border: 1px solid var(--border); transition: background-color 0.3s; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; } .uiu-btn:hover { color: #ffffff; transform: scale(1); transition: color 0.3s; } .uiu-btn::before { content: ""; position: absolute; left: -50px; top: 0; width: 0; height: 100%; background-color: var(--theme-color); transform: skewX(45deg); z-index: -1; transition: width 1000ms; } .uiu-btn:hover::before { width: 250%; } .uiu-btn--mini { padding: 8px 10px; font-size: 12px; font-weight: 600; } .uiu-snake-cell, .uiu-snake-food { width: 100%; height: 100%; } .uiu-snake-cell { background: var(--success); } .uiu-snake-cell.is-head { background: #34d399; } .uiu-snake-food { background: var(--theme-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; } .uiu-snake-popups { position: relative; padding: 0; overflow: visible; pointer-events: none; } .uiu-snake-popup { position: absolute; top: 35px; right: 10px; transform: translateX(-50%); padding: 0 6px; border-radius: 0 !important; background: var(--theme-color); color: #111; font-weight: 800; font-size: 12px; line-height: 1.2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); animation: uiuSnakePopFadeUp 900ms ease forwards; z-index: 1000; } @keyframes uiuSnakePopFadeUp { 0% { transform: translateY(6px); opacity: 0; } 15% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } } .uiu-snake-dpad { display: none; } @media (max-width: 768px) { .uiu-snake-dpad { display: grid; place-items: center; } } .uiu-snake-dpad-grid { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 6px; justify-content: center; touch-action: manipulation; } .uiu-btn--arrow { width: 100%; height: 100%; font-size: 13px; line-height: 1; padding: 0; } .uiu-btn--arrow:hover { background-color: var(--theme-color); } .uiu-btn--arrow.is-up { grid-column: 2; grid-row: 1; } .uiu-btn--arrow.is-left { grid-column: 1; grid-row: 2; } .uiu-btn--arrow.is-right { grid-column: 3; grid-row: 2; } .uiu-btn--arrow.is-down { grid-column: 2; grid-row: 3; } .uiu-snake-controls button, .uiu-rps-controls button { display: inline-flex; align-items: center; gap: 0.4rem; background-color: transparent; } .uiu-snake-controls button i.fa-solid, .uiu-rps-controls button i.fa-solid { font-size: 1rem; line-height: 1; } .uiu-snake-controls i.fa-pause { color: var(--warning); } .uiu-snake-controls i.fa-play { color: var(--success); } .uiu-snake-controls i.fa-rotate-left, .uiu-rps-controls i.fa-rotate-left { color: var(--info); } .uiu-snake-controls i.fa-arrows-left-right { color: #9b59b6; } .uiu-snake-controls i.fa-xmark, .uiu-rps-controls i.fa-xmark { color: var(--destructive); } .uiu-ttt-container div { border-radius: 3px; } .uiu-ttt-container { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; margin-bottom: 10px; padding: 12px; width: 600px; background: transparent; border: 1px solid var(--border); border-radius: 1px; color: var(--foreground); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (max-width: 768px) { .uiu-ttt-container { width: 100%; } .uiu-ttt-popup { font-size: 5px; } } .uiu-ttt-title { text-align: center; font-size: 15px; font-weight: 900; color: var(--theme-color); letter-spacing: 15px; } .uiu-ttt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 13px; color: var(--muted-foreground); } .uiu-ttt-info.paused { color: var(--warning); } .uiu-ttt-info.gameover { color: var(--destructive); } .uiu-ttt-grid { --gap: 1px; position: relative; display: grid; width: 100%; aspect-ratio: 1 / 1; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: var(--gap); background: transparent; border: 1px solid var(--border); background: linear-gradient(var(--overlay), var(--overlay)); background-size: cover; background-position: center; background-repeat: no-repeat; } .uiu-ttt-grid.is-gameover::after { content: attr(data-message); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.1); color: var(--destructive); font-weight: 800; letter-spacing: 1px; z-index: 10; } .uiu-ttt-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .uiu-ttt-info-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; font-size: 12px; color: var(--muted-foreground); } .uiu-ttt-help { text-align: center; font-size: 12px; color: var(--muted-foreground); } .uiu-ttt-cell { display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--border); font-weight: 900; font-size: clamp(28px, 8vw, 58px); line-height: 1; user-select: none; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .uiu-ttt-cell:hover { background: var(--secondary); } .uiu-ttt-cell:active { transform: scale(0.98); } .uiu-ttt-cell.is-disabled { cursor: not-allowed; opacity: 0.7; } .uiu-ttt-cell.is-x { color: var(--theme-color); } .uiu-ttt-cell.is-o { color: var(--success); } .uiu-ttt-cell.is-win { background: var(--secondary); box-shadow: inset 0 0 0 2px var(--theme-color); } .uiu-ttt-controls button { display: inline-flex; align-items: center; gap: 0.4rem; background-color: transparent; } .uiu-ttt-controls button i.fa-solid { font-size: 1rem; line-height: 1; } .uiu-ttt-controls i.fa-rotate-left { color: var(--info); } .uiu-ttt-controls i.fa-shuffle { color: #9b59b6; } .uiu-ttt-controls i.fa-forward-step { color: var(--success); } .uiu-ttt-controls i.fa-brain { color: var(--warning); } .uiu-ttt-controls i.fa-xmark { color: var(--destructive); } .uiu-ext-card { position: relative; width: 100%; background-color: var(--card); border: 1px solid var(--border); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .uiu-ext-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); border-color: var(--theme-color); } .uiu-ext-content { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .uiu-ext-header { display: flex; gap: 12px; align-items: flex-start; justify-content: center; align-items: center; } .uiu-ext-logo { width: 48px; height: 48px; border-radius: 10px; background-color: var(--background2); border: 2px solid var(--border); object-fit: contain; flex-shrink: 0; } .uiu-ext-head-text { display: flex; flex-direction: column; gap: 4px; } .uiu-ext-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--foreground); line-height: 1.2; } .uiu-ext-badges { display: flex; flex-wrap: wrap; gap: 6px; } .uiu-ext-badge { font-size: 8px; font-weight: 600; padding: 2px 6px; padding-top: 3px; border-radius: 4px; background-color: var(--secondary); color: var(--secondary-foreground); text-transform: uppercase; letter-spacing: 0.5px; } .uiu-badge-secure { font-size: 8px; padding-top: 2px; background-color: rgba(16, 185, 129, 0.15); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); } .uiu-ext-desc { margin: 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .uiu-ext-features { display: flex; gap: 12px; font-size: 11px; color: var(--foreground); opacity: 0.9; } .uiu-ext-feat-item { display: flex; align-items: center; gap: 4px; } .uiu-ext-feat-item svg { color: var(--theme-color); } .uiu-ext-btn { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border-radius: 3px; background: var(--theme-color); color: #ffffff; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .uiu-ext-btn:hover { filter: brightness(1.1); } .uiu-ext-btn:hover svg { transform: translateX(3px); } .uiu-ext-btn svg { transition: transform 0.2s ease; }