| |
| .sidebar { |
| position: fixed; |
| left: 0; |
| top: 0; |
| bottom: 0; |
| width: 260px; |
| background: var(--bg-secondary); |
| border-right: 1px solid var(--glass-border); |
| display: flex; |
| flex-direction: column; |
| z-index: 50; |
| transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
|
|
| body.sidebar-collapsed .sidebar { |
| width: 64px; |
| } |
|
|
| .sidebar__header { |
| height: 72px; |
| padding: 0 24px; |
| border-bottom: 1px solid var(--glass-border); |
| display: flex; |
| align-items: center; |
| } |
|
|
| body.sidebar-collapsed .sidebar__header { |
| padding: 0; |
| justify-content: center; |
| } |
|
|
| body.sidebar-collapsed .navbar__logo { |
| justify-content: center; |
| width: 100%; |
| } |
|
|
| body.sidebar-collapsed .logo-svg { |
| margin-right: 0 !important; |
| } |
|
|
| .sidebar__nav { |
| flex: 1; |
| padding: 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| overflow-y: auto; |
| } |
|
|
| .sidebar__link { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 16px; |
| border-radius: var(--radius-sm); |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--text-secondary); |
| background: none; |
| border: none; |
| cursor: pointer; |
| font-family: inherit; |
| text-align: left; |
| width: 100%; |
| transition: all 0.3s ease; |
| position: relative; |
| } |
|
|
| body.sidebar-collapsed .sidebar__link { |
| justify-content: center; |
| padding: 12px 0; |
| } |
| body.sidebar-collapsed .sidebar__link-text { |
| opacity: 0; |
| transform: translateX(-10px); |
| pointer-events: none; |
| position: absolute; |
| } |
| .sidebar__link-text { |
| transition: all 0.3s ease; |
| white-space: nowrap; |
| } |
|
|
| .sidebar__link:hover { |
| background: var(--glass); |
| color: var(--text-primary); |
| } |
|
|
| .sidebar__link.active { |
| background: var(--accent-glow); |
| color: var(--accent-light); |
| font-weight: 600; |
| } |
|
|
| .sidebar__icon { |
| font-size: 18px; |
| width: 24px; |
| text-align: center; |
| } |
|
|
| .sidebar__footer { |
| padding: 16px; |
| border-top: 1px solid var(--glass-border); |
| transition: padding 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
| body.sidebar-collapsed .sidebar__footer { |
| padding: 16px 8px; |
| } |
|
|
| .sidebar__plan { |
| padding: 16px; |
| background: rgba(255, 255, 255, 0.02); |
| border-radius: var(--radius-sm); |
| border: 1px solid var(--glass-border); |
| transition: all 0.3s ease; |
| overflow: hidden; |
| } |
| body.sidebar-collapsed .sidebar__plan { |
| opacity: 0; |
| height: 0; |
| padding: 0; |
| margin: 0; |
| pointer-events: none; |
| border: none; |
| } |
|
|
| .sidebar__plan-label { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
|
|
| .sidebar__plan-bar { |
| height: 6px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 4px; |
| margin-bottom: 8px; |
| overflow: hidden; |
| } |
|
|
| .sidebar__plan-fill { |
| height: 100%; |
| background: var(--text-primary); |
| border-radius: 4px; |
| } |
|
|
| .sidebar__plan-usage { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| |
| .sidebar__profile { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| padding: 12px 16px; |
| border-radius: 20px; |
| background: rgba(255, 255, 255, 0.03); |
| cursor: pointer; |
| transition: var(--transition); |
| margin-top: 16px; |
| margin-bottom: 8px; |
| user-select: none; |
| -webkit-user-select: none; |
| } |
|
|
| .sidebar__profile:hover { |
| background: rgba(255, 255, 255, 0.08); |
| } |
|
|
| .profile-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: #10a37f; |
| color: #fff; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 13px; |
| font-weight: 600; |
| flex-shrink: 0; |
| } |
|
|
| .profile-info { |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .profile-name { |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--text-primary); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| line-height: 1.2; |
| margin-bottom: 2px; |
| } |
|
|
| .profile-role { |
| font-size: 12px; |
| color: var(--text-secondary); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| line-height: 1.2; |
| } |
|
|
| |
| .profile-dropdown { |
| position: absolute; bottom: 85px; left: 16px; width: calc(100% - 32px); |
| background: rgba(30, 30, 30, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); |
| border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 8px; |
| display: flex; flex-direction: column; opacity: 0; pointer-events: none; |
| transform: translateY(10px) scale(0.98); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); |
| box-shadow: 0 20px 40px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05) inset; |
| z-index: 100; transform-origin: bottom left; |
| } |
|
|
| body.sidebar-collapsed .profile-dropdown { |
| width: 240px; |
| } |
| .profile-dropdown.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } |
| .profile-dropdown__header { display: flex; align-items: center; gap: 12px; padding: 8px 8px 16px 8px; } |
| .profile-dropdown__divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; } |
| .profile-dropdown__item { |
| display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; |
| background: transparent; border: none; color: var(--text-primary); font-size: 14px; font-weight: 500; |
| cursor: pointer; transition: var(--transition); text-align: left; width: 100%; font-family: inherit; |
| } |
| .profile-dropdown__item:hover { background: rgba(255,255,255,0.1); } |
| .profile-dropdown__item i { width: 18px; height: 18px; color: var(--text-secondary); } |
| .profile-dropdown__item.text-danger { color: #ff4545; } |
| .profile-dropdown__item.text-danger i { color: #ff4545; } |
|
|
| |
| .profile-dropdown__item.has-submenu { position: relative; padding-right: 8px; } |
| .profile-submenu { |
| position: absolute; left: calc(100% + 8px); bottom: -60px; width: 260px; |
| background: rgba(35, 35, 35, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); |
| border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 8px; |
| display: flex; flex-direction: column; opacity: 0; pointer-events: none; |
| transform: translateX(-10px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); |
| box-shadow: 0 20px 40px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05) inset; |
| z-index: 101; cursor: default; |
| } |
| .profile-dropdown__item.has-submenu:hover .profile-submenu, |
| .profile-submenu:hover { opacity: 1; pointer-events: auto; transform: translateX(0); } |
| .profile-submenu .profile-dropdown__item { font-size: 14px; font-weight: 400; color: #ececec; } |
| .profile-submenu .profile-dropdown__item i { width: 16px; height: 16px; } |
|
|
| |
| .modal-overlay { |
| position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); |
| z-index: 1000; display: flex; align-items: center; justify-content: center; |
| opacity: 0; pointer-events: none; transition: opacity 0.2s ease; |
| } |
| .modal-overlay.show { opacity: 1; pointer-events: auto; } |
| .profile-modal { |
| background: #212121; width: 400px; max-width: 90%; border-radius: 16px; |
| box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| .modal-overlay.show .profile-modal { transform: scale(1); } |
| .profile-modal__header { padding: 24px 24px 16px; } |
| .profile-modal__header h3 { font-size: 16px; font-weight: 500; color: var(--text-primary); margin: 0; } |
| .profile-modal__body { padding: 0 24px; } |
| .modal-avatar-wrapper { display: flex; justify-content: center; margin-bottom: 24px; } |
| .modal-avatar-large { |
| width: 100px; height: 100px; border-radius: 50%; background: #10a37f; color: #fff; |
| font-size: 36px; font-weight: 400; display: flex; align-items: center; justify-content: center; position: relative; |
| } |
| .modal-avatar-cam { |
| position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; |
| background: #333; border: 2px solid #212121; display: flex; align-items: center; justify-content: center; |
| cursor: pointer; color: #fff; transition: background 0.2s; |
| } |
| .modal-avatar-cam:hover { background: #444; } |
| .modal-avatar-cam i { width: 14px; height: 14px; } |
| .modal-input-group { |
| border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 6px 12px 8px; margin-bottom: 12px; background: transparent; |
| } |
| .modal-input-group label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; } |
| .modal-input-group input { background: transparent; border: none; color: var(--text-primary); font-size: 14px; width: 100%; outline: none; } |
| .modal-hint { text-align: center; font-size: 12px; color: var(--text-secondary); margin-top: 24px; margin-bottom: 24px; } |
| .profile-modal__footer { padding: 16px 24px 24px; display: flex; justify-content: flex-end; gap: 12px; } |
| .profile-modal__footer .btn { border-radius: 20px; padding: 8px 16px; font-size: 14px; font-weight: 500; } |
| .profile-modal__footer .btn--ghost { background: #333; color: #fff; border: none; } |
| .profile-modal__footer .btn--ghost:hover { background: #444; } |
| .profile-modal__footer .btn--primary { background: #fff; color: #000; } |
| .profile-modal__footer .btn--primary:hover { background: #e0e0e0; } |
|
|
| |
| .theme-toggles { display: flex; gap: 12px; } |
| .theme-toggle { |
| flex: 1; padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.03); |
| border: 1px solid rgba(255,255,255,0.1); color: var(--text-secondary); |
| display: flex; flex-direction: column; align-items: center; gap: 8px; |
| cursor: pointer; transition: all 0.2s ease; |
| font-family: inherit; font-size: 13px; font-weight: 500; |
| } |
| .theme-toggle:hover { background: rgba(255,255,255,0.08); } |
| .theme-toggle.active { background: rgba(255,255,255,0.1); color: var(--text-primary); border-color: var(--accent-light); box-shadow: 0 0 0 1px var(--accent-light) inset; } |
| .theme-toggle i { width: 24px; height: 24px; } |
|
|
| .accent-colors { display: flex; gap: 16px; } |
| .accent-btn { |
| width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; |
| cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); outline: none; |
| } |
| .accent-btn:hover { transform: scale(1.1); } |
| .accent-btn.active { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary); transform: scale(1.05); } |
|
|
| |
| body.theme-light { |
| --bg-primary: #f4f5f7; |
| --bg-secondary: #ffffff; |
| --bg-card: #ffffff; |
| --bg-card-hover: #f9fafb; |
| --text-primary: #111827; |
| --text-secondary: #4b5563; |
| --text-muted: #9ca3af; |
| --glass: rgba(255,255,255,0.9); |
| --glass-border: rgba(0,0,0,0.1); |
| --border: rgba(0,0,0,0.1); |
| --border-strong: rgba(0,0,0,0.15); |
| --danger-bg: rgba(239, 68, 68, 0.1); |
| } |
| body.theme-light .profile-modal { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); } |
| body.theme-light .theme-toggle { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; } |
| body.theme-light .theme-toggle.active { background: #e0f2fe; color: #0284c7; border-color: #0ea5e9; } |
| body.theme-light .profile-dropdown { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); } |
| body.theme-light .profile-dropdown__item:hover { background: rgba(0,0,0,0.05); } |
| body.theme-light .profile-submenu { background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); } |
| body.theme-light .profile-submenu .profile-dropdown__item { color: var(--text-primary); } |
|
|
| |
| .ai-leak-hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr); |
| gap: 24px; |
| align-items: stretch; |
| margin-bottom: 24px; |
| } |
|
|
| .ai-leak-hero > div:first-child, |
| .ai-leak-command, |
| .ai-leak-scan-card, |
| .ai-leak-empty, |
| .ai-leak-score-card { |
| background: rgba(18, 18, 18, 0.62); |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 20px; |
| box-shadow: 0 16px 44px rgba(0,0,0,0.36), inset 0 1px 1px rgba(255,255,255,0.06); |
| } |
|
|
| .ai-leak-hero > div:first-child { |
| padding: 32px; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .ai-leak-hero > div:first-child::after { |
| content: ''; |
| position: absolute; |
| inset: auto -20% -70% 35%; |
| height: 220px; |
| background: radial-gradient(circle, rgba(10,132,255,0.24), transparent 64%); |
| pointer-events: none; |
| } |
|
|
| .ai-leak-kicker { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| color: #74c0fc; |
| background: rgba(10,132,255,0.1); |
| border: 1px solid rgba(10,132,255,0.2); |
| border-radius: 999px; |
| padding: 7px 12px; |
| font-size: 12px; |
| font-weight: 700; |
| margin-bottom: 18px; |
| } |
|
|
| .ai-leak-hero h2 { |
| font-size: 34px; |
| line-height: 1.08; |
| letter-spacing: 0; |
| max-width: 820px; |
| margin-bottom: 14px; |
| } |
|
|
| .ai-leak-hero p { |
| color: var(--text-secondary); |
| max-width: 780px; |
| font-size: 15px; |
| } |
|
|
| .ai-leak-command { |
| padding: 22px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 10px; |
| font-family: 'JetBrains Mono', monospace; |
| background: |
| linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), |
| rgba(8,8,8,0.86); |
| } |
|
|
| .ai-leak-command__line { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| color: var(--text-secondary); |
| font-size: 12px; |
| border-bottom: 1px solid rgba(255,255,255,0.06); |
| padding-bottom: 9px; |
| } |
|
|
| .ai-leak-command__line span { |
| color: var(--text-muted); |
| } |
|
|
| .ai-leak-command__line.danger { |
| color: #ff6b6b; |
| } |
|
|
| .ai-leak-scan-card { |
| padding: 22px; |
| margin-bottom: 18px; |
| } |
|
|
| .ai-leak-form { |
| display: grid; |
| grid-template-columns: minmax(260px, 1fr) auto auto; |
| gap: 16px; |
| align-items: end; |
| } |
|
|
| .ai-leak-toggle { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--text-secondary); |
| font-size: 13px; |
| min-height: 44px; |
| padding: 0 4px; |
| cursor: pointer; |
| } |
|
|
| .ai-leak-toggle input { |
| accent-color: var(--info); |
| } |
|
|
| .ai-leak-progress { |
| margin-top: 18px; |
| } |
|
|
| .ai-leak-progress__bar { |
| height: 8px; |
| background: rgba(255,255,255,0.06); |
| border-radius: 999px; |
| overflow: hidden; |
| } |
|
|
| .ai-leak-progress__bar span { |
| display: block; |
| height: 100%; |
| width: 0; |
| background: linear-gradient(90deg, #74c0fc, #32d74b); |
| border-radius: inherit; |
| transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
|
|
| .ai-leak-progress__text { |
| color: var(--text-muted); |
| font-size: 12px; |
| margin-top: 8px; |
| } |
|
|
| .ai-leak-empty { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 22px; |
| color: var(--text-secondary); |
| } |
|
|
| .ai-leak-empty i { |
| width: 28px; |
| height: 28px; |
| color: #32d74b; |
| } |
|
|
| .ai-leak-empty strong { |
| display: block; |
| color: var(--text-primary); |
| } |
|
|
| .ai-leak-empty span { |
| font-size: 13px; |
| } |
|
|
| .ai-leak-results { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .ai-leak-score-card { |
| padding: 24px; |
| } |
|
|
| .ai-leak-score-card__meta { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| color: var(--text-muted); |
| font-size: 12px; |
| margin-bottom: 20px; |
| } |
|
|
| .ai-leak-score-card__body { |
| display: flex; |
| align-items: center; |
| gap: 24px; |
| } |
|
|
| .ai-leak-score-ring { |
| width: 132px; |
| height: 132px; |
| border-radius: 50%; |
| display: grid; |
| place-items: center; |
| background: conic-gradient(#32d74b 0% 0%, rgba(255,255,255,0.08) 0% 100%); |
| flex: 0 0 auto; |
| } |
|
|
| .ai-leak-score-ring > div { |
| width: 104px; |
| height: 104px; |
| border-radius: 50%; |
| background: #0b0b0b; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid rgba(255,255,255,0.08); |
| } |
|
|
| .ai-leak-score-ring strong { |
| font-size: 34px; |
| line-height: 1; |
| } |
|
|
| .ai-leak-score-ring span { |
| color: var(--text-muted); |
| font-size: 11px; |
| text-transform: uppercase; |
| font-weight: 700; |
| } |
|
|
| .ai-leak-score-copy h3 { |
| font-size: 22px; |
| margin-bottom: 8px; |
| letter-spacing: 0; |
| } |
|
|
| .ai-leak-score-copy p { |
| color: var(--text-secondary); |
| max-width: 760px; |
| } |
|
|
| .ai-leak-metrics { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 14px; |
| } |
|
|
| .ai-leak-metrics div { |
| padding: 18px; |
| border-radius: 14px; |
| border: 1px solid rgba(255,255,255,0.08); |
| background: rgba(255,255,255,0.03); |
| } |
|
|
| .ai-leak-metrics span { |
| display: block; |
| font-size: 28px; |
| font-weight: 800; |
| } |
|
|
| .ai-leak-metrics label { |
| color: var(--text-muted); |
| font-size: 12px; |
| text-transform: uppercase; |
| font-weight: 700; |
| } |
|
|
| .ai-leak-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); |
| gap: 20px; |
| } |
|
|
| .ai-leak-side { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .ai-leak-findings { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| padding: 18px; |
| } |
|
|
| .ai-leak-finding { |
| border: 1px solid rgba(255,255,255,0.08); |
| border-left: 3px solid #74c0fc; |
| border-radius: 12px; |
| background: rgba(255,255,255,0.025); |
| padding: 16px; |
| } |
|
|
| .ai-leak-finding--critical { border-left-color: #ff4545; } |
| .ai-leak-finding--high { border-left-color: #ff7a45; } |
| .ai-leak-finding--medium { border-left-color: #ffd60a; } |
| .ai-leak-finding--low { border-left-color: #32d74b; } |
|
|
| .ai-leak-finding__top { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 12px; |
| } |
|
|
| .ai-leak-finding__title { |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .ai-leak-finding__meta, |
| .ai-leak-finding__asset { |
| color: var(--text-muted); |
| font-size: 12px; |
| } |
|
|
| .ai-leak-finding pre { |
| white-space: pre-wrap; |
| word-break: break-word; |
| margin: 0 0 12px; |
| padding: 12px; |
| border-radius: 10px; |
| background: rgba(0,0,0,0.36); |
| color: #e8e8e8; |
| font-size: 12px; |
| line-height: 1.6; |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .ai-leak-finding__fix { |
| margin-top: 10px; |
| color: var(--text-secondary); |
| font-size: 13px; |
| } |
|
|
| .ai-leak-remediation { |
| padding: 18px 22px 22px 42px; |
| color: var(--text-secondary); |
| font-size: 14px; |
| } |
|
|
| .ai-leak-remediation li { |
| margin-bottom: 12px; |
| padding-left: 6px; |
| } |
|
|
| .ai-leak-stack { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| padding: 18px; |
| } |
|
|
| .ai-leak-stack__item { |
| display: flex; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 12px; |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 10px; |
| background: rgba(255,255,255,0.025); |
| } |
|
|
| .ai-leak-stack__item span { |
| font-weight: 700; |
| } |
|
|
| .ai-leak-stack__item small, |
| .ai-leak-muted { |
| color: var(--text-muted); |
| } |
|
|
| .ai-leak-clean { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| gap: 8px; |
| padding: 34px 20px; |
| color: var(--text-secondary); |
| } |
|
|
| .ai-leak-clean i { |
| width: 36px; |
| height: 36px; |
| color: #32d74b; |
| } |
|
|
| .ai-leak-clean strong { |
| color: var(--text-primary); |
| } |
|
|
| .ai-engine-card { |
| background: rgba(18, 18, 18, 0.62); |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 20px; |
| box-shadow: 0 16px 44px rgba(0,0,0,0.36), inset 0 1px 1px rgba(255,255,255,0.06); |
| margin-bottom: 18px; |
| overflow: hidden; |
| } |
|
|
| .ai-engine-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 12px; |
| padding: 18px; |
| } |
|
|
| .ai-engine-tile { |
| border: 1px solid rgba(255,255,255,0.08); |
| background: rgba(255,255,255,0.025); |
| border-radius: 12px; |
| padding: 14px; |
| } |
|
|
| .ai-engine-tile strong { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| color: var(--text-primary); |
| font-size: 13px; |
| } |
|
|
| .ai-engine-tile span { |
| display: block; |
| color: var(--text-muted); |
| font-size: 12px; |
| margin-top: 6px; |
| } |
|
|
| .ai-engine-actions { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); |
| gap: 12px; |
| align-items: end; |
| padding: 0 18px 18px; |
| } |
|
|
| .ai-engine-toggle { |
| min-height: 44px; |
| align-self: end; |
| } |
|
|
| .ai-engine-output { |
| display: none; |
| border-top: 1px solid rgba(255,255,255,0.08); |
| padding: 18px; |
| } |
|
|
| .ai-engine-output.active { |
| display: block; |
| } |
|
|
| .ai-engine-output pre { |
| margin: 12px 0 0; |
| padding: 12px; |
| background: rgba(0,0,0,0.36); |
| border-radius: 10px; |
| color: #e8e8e8; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font: 12px/1.6 'JetBrains Mono', monospace; |
| } |
|
|
| .ai-engine-triage { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 10px; |
| } |
|
|
| .ai-engine-triage span { |
| border: 1px solid rgba(255,255,255,0.1); |
| border-radius: 999px; |
| color: var(--text-secondary); |
| font-size: 12px; |
| padding: 5px 9px; |
| } |
|
|
| |
| .flow-hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr); |
| gap: 20px; |
| align-items: stretch; |
| margin-bottom: 20px; |
| } |
|
|
| .flow-hero > div, |
| .flow-scan-card, |
| .flow-empty, |
| .flow-map-card { |
| background: rgba(18, 18, 18, 0.58); |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 20px; |
| box-shadow: 0 16px 44px rgba(0,0,0,0.34), inset 0 1px 1px rgba(255,255,255,0.06); |
| } |
|
|
| .flow-hero > div:first-child { |
| padding: 30px; |
| } |
|
|
| .flow-kicker { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| color: #9ee493; |
| background: rgba(50,215,75,0.1); |
| border: 1px solid rgba(50,215,75,0.18); |
| border-radius: 999px; |
| padding: 7px 12px; |
| font-size: 12px; |
| font-weight: 700; |
| margin-bottom: 18px; |
| } |
|
|
| .flow-hero h2 { |
| font-size: 32px; |
| line-height: 1.1; |
| letter-spacing: 0; |
| margin-bottom: 12px; |
| } |
|
|
| .flow-hero p { |
| color: var(--text-secondary); |
| max-width: 780px; |
| } |
|
|
| .flow-legend { |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| gap: 12px; |
| padding: 24px; |
| } |
|
|
| .flow-legend span { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--text-secondary); |
| font-size: 13px; |
| } |
|
|
| .flow-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| } |
|
|
| .flow-dot--low { background: #32d74b; } |
| .flow-dot--medium { background: #ffd60a; } |
| .flow-dot--high { background: #ff7a45; } |
| .flow-dot--critical { background: #ff4545; } |
|
|
| .flow-scan-card { |
| padding: 20px; |
| margin-bottom: 18px; |
| } |
|
|
| .flow-form { |
| display: grid; |
| grid-template-columns: minmax(260px, 1fr) auto auto auto auto; |
| gap: 14px; |
| align-items: end; |
| } |
|
|
| .flow-progress { |
| align-items: center; |
| gap: 12px; |
| margin-top: 14px; |
| color: var(--text-muted); |
| font-size: 13px; |
| } |
|
|
| .flow-progress span { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: #74c0fc; |
| box-shadow: 0 0 16px #74c0fc; |
| animation: pulse 1.2s infinite; |
| } |
|
|
| .flow-empty { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 22px; |
| color: var(--text-secondary); |
| } |
|
|
| .flow-empty i { |
| width: 28px; |
| height: 28px; |
| color: #9ee493; |
| } |
|
|
| .flow-empty strong { |
| display: block; |
| color: var(--text-primary); |
| } |
|
|
| .flow-results { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .flow-summary { |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| gap: 12px; |
| } |
|
|
| .flow-summary > div { |
| padding: 16px; |
| border-radius: 14px; |
| border: 1px solid rgba(255,255,255,0.08); |
| background: rgba(255,255,255,0.03); |
| } |
|
|
| .flow-summary span { |
| display: block; |
| color: var(--text-primary); |
| font: 800 28px/1 'JetBrains Mono', monospace; |
| } |
|
|
| .flow-summary label { |
| display: block; |
| color: var(--text-muted); |
| font-size: 11px; |
| font-weight: 700; |
| text-transform: uppercase; |
| margin-top: 8px; |
| } |
|
|
| .flow-layout { |
| display: grid; |
| grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr); |
| gap: 20px; |
| } |
|
|
| .flow-map-card { |
| padding: 24px; |
| overflow: hidden; |
| } |
|
|
| .flow-map { |
| min-height: 620px; |
| overflow-x: auto; |
| } |
|
|
| .flow-canvas { |
| position: relative; |
| min-width: 1100px; |
| height: 580px; |
| border-radius: 18px; |
| background: |
| linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px), |
| linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px), |
| rgba(0,0,0,0.22); |
| background-size: 120px 120px; |
| border: 1px solid rgba(255,255,255,0.07); |
| } |
|
|
| .flow-canvas svg { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| color: rgba(255,255,255,0.44); |
| pointer-events: none; |
| } |
|
|
| .flow-line { |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 2.3; |
| marker-end: url(#flow-arrow); |
| opacity: 0.9; |
| } |
|
|
| .flow-line--medium { color: #ffd60a; } |
| .flow-line--high { color: #ff7a45; } |
| .flow-line--critical { color: #ff4545; stroke-width: 3; } |
|
|
| .flow-line-label { |
| fill: rgba(255,255,255,0.64); |
| font: 11px 'JetBrains Mono', monospace; |
| paint-order: stroke; |
| stroke: rgba(0,0,0,0.7); |
| stroke-width: 4px; |
| } |
|
|
| .flow-node { |
| position: absolute; |
| width: 148px; |
| min-height: 68px; |
| padding: 11px; |
| border-radius: 12px; |
| border: 1px solid rgba(255,255,255,0.12); |
| background: rgba(14,14,14,0.9); |
| box-shadow: 0 12px 24px rgba(0,0,0,0.32); |
| } |
|
|
| .flow-node::before { |
| content: ''; |
| position: absolute; |
| inset: -1px auto -1px -1px; |
| width: 3px; |
| border-radius: 12px 0 0 12px; |
| background: #32d74b; |
| } |
|
|
| .flow-node--medium::before { background: #ffd60a; } |
| .flow-node--high::before { background: #ff7a45; } |
| .flow-node--critical::before { background: #ff4545; } |
|
|
| .flow-node strong, |
| .flow-node span, |
| .flow-node small { |
| display: block; |
| } |
|
|
| .flow-node strong { |
| color: var(--text-primary); |
| font-size: 12px; |
| line-height: 1.25; |
| } |
|
|
| .flow-node span { |
| color: var(--text-muted); |
| font-size: 10px; |
| text-transform: uppercase; |
| font-weight: 700; |
| margin-top: 5px; |
| } |
|
|
| .flow-node small { |
| color: var(--text-secondary); |
| font-size: 11px; |
| line-height: 1.35; |
| margin-top: 5px; |
| } |
|
|
| .flow-side { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
|
|
| .flow-chip-list { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| padding: 4px 0; |
| } |
|
|
| .flow-chip-list span { |
| border: 1px solid rgba(255,255,255,0.1); |
| border-radius: 999px; |
| color: var(--text-secondary); |
| background: rgba(255,255,255,0.03); |
| font-size: 12px; |
| padding: 7px 10px; |
| } |
|
|
| .flow-remediation { |
| color: var(--text-secondary); |
| padding-left: 20px; |
| } |
|
|
| .flow-remediation li { |
| margin-bottom: 12px; |
| line-height: 1.5; |
| } |
|
|
| |
| .tool-hero, |
| .tool-card, |
| .tool-output.active { |
| background: rgba(18, 18, 18, 0.58); |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 20px; |
| box-shadow: 0 16px 44px rgba(0,0,0,0.34), inset 0 1px 1px rgba(255,255,255,0.06); |
| margin-bottom: 18px; |
| } |
|
|
| .tool-hero { |
| padding: 30px; |
| } |
|
|
| .tool-hero h2 { |
| font-size: 32px; |
| letter-spacing: 0; |
| margin-bottom: 10px; |
| } |
|
|
| .tool-hero p { |
| color: var(--text-secondary); |
| max-width: 820px; |
| } |
|
|
| .dpdp-hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); |
| gap: 28px; |
| align-items: center; |
| } |
|
|
| .dpdp-grade-card { |
| border: 1px solid rgba(255,255,255,0.09); |
| border-radius: 14px; |
| background: rgba(255,255,255,0.035); |
| padding: 16px; |
| } |
|
|
| .dpdp-grade-card__title { |
| color: var(--text-primary); |
| font-size: 13px; |
| font-weight: 700; |
| margin-bottom: 10px; |
| } |
|
|
| .dpdp-grade-row { |
| display: grid; |
| grid-template-columns: 28px minmax(0, 1fr); |
| gap: 10px; |
| align-items: center; |
| padding: 7px 0; |
| border-top: 1px solid rgba(255,255,255,0.06); |
| } |
|
|
| .dpdp-grade-row:first-of-type { |
| border-top: 0; |
| } |
|
|
| .dpdp-grade-row b { |
| color: var(--text-primary); |
| font: 800 16px/1 'JetBrains Mono', monospace; |
| } |
|
|
| .dpdp-grade-row span { |
| color: var(--text-secondary); |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .tool-card { |
| padding: 20px; |
| } |
|
|
| .tool-form { |
| display: grid; |
| grid-template-columns: minmax(240px, 1fr) auto; |
| gap: 14px; |
| align-items: center; |
| } |
|
|
| .tool-form--three { |
| grid-template-columns: minmax(180px, 0.45fr) minmax(180px, 1fr) auto; |
| } |
|
|
| .tool-output { |
| display: none; |
| } |
|
|
| .tool-output.active { |
| display: block; |
| padding: 20px; |
| } |
|
|
| .tool-score { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| padding: 18px; |
| border-radius: 14px; |
| background: rgba(255,255,255,0.035); |
| border: 1px solid rgba(255,255,255,0.08); |
| margin-bottom: 16px; |
| } |
|
|
| .tool-score--compact { |
| padding: 14px 16px; |
| } |
|
|
| .tool-score--compact strong { |
| font-size: 22px; |
| } |
|
|
| .tool-score strong { |
| color: var(--text-primary); |
| font: 800 30px/1 'JetBrains Mono', monospace; |
| } |
|
|
| .tool-score span { |
| color: var(--text-secondary); |
| } |
|
|
| .tool-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .tool-result-list { |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| margin-top: 16px; |
| } |
|
|
| .tool-section-title { |
| color: var(--text-primary); |
| font-size: 16px; |
| margin: 4px 0 12px; |
| } |
|
|
| .tool-result-item { |
| padding: 14px; |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 12px; |
| background: rgba(255,255,255,0.025); |
| } |
|
|
| .tool-result-item strong, |
| .tool-result-item span { |
| display: block; |
| } |
|
|
| .tool-result-item strong { |
| color: var(--text-primary); |
| margin-bottom: 7px; |
| } |
|
|
| .tool-result-item span { |
| color: var(--text-secondary); |
| line-height: 1.5; |
| } |
|
|
| .tool-result-item .badge { |
| display: inline-flex; |
| width: fit-content; |
| margin: 0 6px 6px 0; |
| } |
|
|
| .tool-result-item pre { |
| white-space: pre-wrap; |
| word-break: break-word; |
| margin: 8px 0; |
| padding: 10px; |
| border-radius: 8px; |
| background: rgba(0,0,0,0.34); |
| color: #e8e8e8; |
| font: 12px/1.55 'JetBrains Mono', monospace; |
| } |
|
|
| #flow-api-table td, |
| #flow-register td { |
| max-width: 280px; |
| white-space: normal; |
| word-break: break-word; |
| } |
|
|
| .tool-timeline { |
| display: grid; |
| gap: 10px; |
| margin-bottom: 16px; |
| } |
|
|
| .tool-timeline div { |
| display: grid; |
| grid-template-columns: 180px 1fr; |
| gap: 14px; |
| padding: 13px; |
| border-radius: 12px; |
| border: 1px solid rgba(255,255,255,0.08); |
| background: rgba(255,255,255,0.025); |
| } |
|
|
| .tool-timeline b { |
| color: var(--text-primary); |
| } |
|
|
| .tool-timeline span { |
| color: var(--text-secondary); |
| } |
|
|
| |
| body.theme-light .topbar { background: rgba(255, 255, 255, 0.85); } |
| body.theme-light .metric-card, |
| body.theme-light .chart-card { |
| background: rgba(255, 255, 255, 0.7); |
| border-color: rgba(0, 0, 0, 0.08); |
| box-shadow: 0 8px 24px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.8); |
| } |
| body.theme-light .metric-card:hover { |
| box-shadow: 0 16px 32px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,1); |
| border-color: rgba(0,0,0,0.15); |
| } |
| body.theme-light .metric-card__value, |
| body.theme-light .chart-card__header h3 { |
| color: var(--text-primary); |
| text-shadow: none; |
| } |
| body.theme-light .metric-card::before, |
| body.theme-light .chart-card::before { background: none; } |
| body.theme-light .metric-card__icon-wrap { |
| background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); box-shadow: none; |
| } |
| body.theme-light .logo-redaction { fill: #111827 !important; } |
| body.theme-light .logo-bars { fill: #aaaaaa !important; } |
| body.theme-light .donut-center__value, |
| body.theme-light .donut-legend__item, |
| body.theme-light .chart-select, |
| body.theme-light select option { |
| color: var(--text-primary); |
| } |
| body.theme-light select option { background: #ffffff; } |
| body.theme-light .donut-center__label { color: var(--text-secondary); } |
| body.theme-light .donut-center { background: #ffffff !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.05) !important; } |
| body.theme-light .upload-zone { background: rgba(0,0,0,0.02); } |
| body.theme-light .upload-zone:hover { background: rgba(0,0,0,0.04); } |
| body.theme-light .settings-card input { border: 1px solid rgba(0,0,0,0.1); background: #ffffff; color: var(--text-primary); } |
|
|
| .dash-main { |
| margin-top: 0; |
| margin-left: 260px; |
| min-height: 100vh; |
| padding: 72px 0 40px; |
| position: relative; |
| z-index: 1; |
| transition: margin-left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
| body.sidebar-collapsed .dash-main { |
| margin-left: 64px; |
| } |
|
|
| |
| .topbar { |
| margin-top: 0; |
| height: 72px; |
| position: fixed; |
| top: 0; |
| left: 260px; |
| right: 0; |
| z-index: 40; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 32px; |
| background: rgba(0, 0, 0, 0.85); |
| backdrop-filter: blur(16px); |
| border-bottom: 1px solid var(--glass-border); |
| transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); |
| } |
| body.sidebar-collapsed .topbar { |
| left: 64px; |
| } |
|
|
| .topbar__left { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .topbar__title { |
| font-size: 20px; |
| font-weight: 700; |
| } |
|
|
| .topbar__menu { |
| display: none; |
| background: none; |
| border: none; |
| color: var(--text-primary); |
| font-size: 22px; |
| cursor: pointer; |
| } |
|
|
| .topbar__right { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
|
|
| .topbar__search { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 16px; |
| border-radius: var(--radius-sm); |
| background: var(--glass); |
| border: 1px solid var(--glass-border); |
| } |
|
|
| .topbar__search input { |
| background: none; |
| border: none; |
| outline: none; |
| color: var(--text-primary); |
| font-family: inherit; |
| font-size: 14px; |
| width: 180px; |
| } |
|
|
| .topbar__search input::placeholder { |
| color: var(--text-muted); |
| } |
|
|
| .topbar__notif { |
| position: relative; |
| background: none; |
| border: none; |
| font-size: 18px; |
| cursor: pointer; |
| color: var(--text-secondary); |
| padding: 8px; |
| } |
|
|
| .topbar__badge { |
| position: absolute; |
| top: 2px; |
| right: 2px; |
| width: 18px; |
| height: 18px; |
| border-radius: 50%; |
| background: var(--danger); |
| color: white; |
| font-size: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| } |
|
|
| .topbar__user { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--text-secondary); |
| } |
|
|
| .topbar__avatar { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| background: var(--bg-card); |
| border: 1px solid var(--glass-border); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 13px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| |
| .page { |
| display: none; |
| padding: 0 32px 32px; |
| } |
|
|
| .page.active { |
| display: block; |
| animation: fadeUp 0.3s ease; |
| } |
|
|
| |
| .dash-grid-4 { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 20px; |
| margin-bottom: 24px; |
| } |
|
|
| .dash-grid-2 { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 20px; |
| margin-bottom: 24px; |
| } |
|
|
| |
| |
| .metric-card { |
| display: flex; flex-direction: column; justify-content: space-between; |
| padding: 24px; |
| background: rgba(18, 18, 18, 0.6); |
| backdrop-filter: blur(24px); |
| -webkit-backdrop-filter: blur(24px); |
| border: 1px solid rgba(255,255,255,0.08); |
| border-radius: 20px; |
| position: relative; |
| overflow: hidden; |
| box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08); |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| .metric-card::before { |
| content: ''; position: absolute; inset: 0; |
| background: radial-gradient(120% 120% at 100% 0%, var(--glow-color, rgba(255,255,255,0.05)), transparent 50%); |
| z-index: 0; pointer-events: none; opacity: 0.8; transition: opacity 0.4s; |
| } |
| .metric-card:hover { |
| transform: translateY(-4px) scale(1.02); |
| border-color: rgba(255,255,255,0.2); |
| box-shadow: 0 20px 48px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.2); |
| } |
| .metric-card:hover::before { |
| opacity: 1; |
| background: radial-gradient(120% 120% at 100% 0%, var(--glow-color, rgba(255,255,255,0.1)), transparent 60%); |
| } |
|
|
| .metric-card__header { |
| display: flex; align-items: center; justify-content: space-between; |
| z-index: 1; position: relative; margin-bottom: 24px; |
| } |
| .metric-card__icon-wrap { |
| width: 48px; height: 48px; border-radius: 12px; |
| background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); |
| display: flex; align-items: center; justify-content: center; |
| color: var(--text-secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.3); |
| } |
| .metric-card__icon-wrap i { width: 20px; height: 20px; } |
|
|
| .metric-card__trend { |
| font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; |
| padding: 4px 10px; border-radius: 20px; display: flex; align-items: center; gap: 4px; |
| } |
| .metric-card__trend.up, .metric-card__trend.positive { background: rgba(50,215,75,0.1); color: #32d74b; border: 1px solid rgba(50,215,75,0.2); } |
| .metric-card__trend.down, .metric-card__trend.negative { background: rgba(255,69,69,0.1); color: #ff4545; border: 1px solid rgba(255,69,69,0.2); } |
| .metric-card__trend.neutral { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.1); } |
|
|
| .metric-card__content { z-index: 1; position: relative; } |
| .metric-card__label { |
| font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; |
| } |
| .metric-card__value { |
| font-family: 'JetBrains Mono', monospace; font-size: 38px; font-weight: 700; color: #fff; |
| line-height: 1; letter-spacing: -1px; text-shadow: 0 2px 10px rgba(255,255,255,0.1); |
| } |
|
|
| |
| .chart-card { |
| background: rgba(18, 18, 18, 0.5); |
| backdrop-filter: blur(24px); |
| -webkit-backdrop-filter: blur(24px); |
| border: 1px solid rgba(255,255,255,0.06); |
| border-radius: 24px; |
| padding: 28px; margin-bottom: 24px; |
| box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08); |
| position: relative; |
| overflow: hidden; |
| } |
| .chart-card::before { |
| content: ''; position: absolute; inset: 0; |
| background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03), transparent 70%); |
| z-index: 0; pointer-events: none; |
| } |
| .chart-card__header { |
| border-bottom: 1px solid rgba(255,255,255,0.05); |
| padding-bottom: 16px; margin-bottom: 16px; |
| display: flex; align-items: center; justify-content: space-between; |
| } |
| .chart-card__header h3 { |
| font-size: 16px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; margin: 0; |
| } |
|
|
| |
| .settings-card { |
| background: var(--bg-card); |
| border: 1px solid var(--glass-border); |
| border-radius: var(--radius); |
| overflow: hidden; |
| margin-bottom: 24px; |
| position: relative; |
| box-shadow: var(--shadow-premium); |
| } |
|
|
| .settings-card__body { |
| padding: 24px; |
| } |
|
|
| .settings-card__title { |
| font-size: 16px; |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: 8px; |
| } |
|
|
| .settings-card__desc { |
| font-size: 14px; |
| color: var(--text-secondary); |
| margin-bottom: 16px; |
| max-width: 600px; |
| line-height: 1.5; |
| } |
|
|
| .settings-card__footer { |
| padding: 12px 24px; |
| background: rgba(255, 255, 255, 0.02); |
| border-top: 1px solid var(--glass-border); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .settings-card__footer-text { |
| font-size: 13px; |
| color: var(--text-muted); |
| } |
|
|
| |
| .settings-layout { |
| display: flex; |
| gap: 48px; |
| max-width: 1000px; |
| margin: 0 auto; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .settings-layout::before { |
| content: ''; |
| position: absolute; |
| top: 10%; |
| left: 30%; |
| width: 400px; |
| height: 400px; |
| background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0%, transparent 60%); |
| filter: blur(100px); |
| z-index: -1; |
| pointer-events: none; |
| } |
|
|
| .settings-sidebar { |
| width: 220px; |
| flex-shrink: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| position: sticky; |
| top: 100px; |
| height: max-content; |
| } |
|
|
| .settings-tab { |
| text-align: left; |
| padding: 10px 16px; |
| border-radius: var(--radius-sm); |
| font-size: 14px; |
| color: var(--text-secondary); |
| background: none; |
| border: none; |
| cursor: pointer; |
| transition: var(--transition); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .settings-tab:hover { |
| background: rgba(255, 255, 255, 0.05); |
| color: var(--text-primary); |
| } |
|
|
| .settings-tab.active { |
| background: rgba(255, 255, 255, 0.1); |
| color: var(--text-primary); |
| font-weight: 600; |
| } |
|
|
| .settings-content { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .settings-section { |
| display: none; |
| } |
|
|
| .settings-section.active { |
| display: block; |
| animation: fadeUp 0.3s ease; |
| } |
|
|
| .chart-select { |
| padding: 6px 12px; |
| border-radius: var(--radius-xs); |
| background: var(--glass); |
| border: 1px solid var(--glass-border); |
| color: var(--text-primary); |
| font-family: inherit; |
| font-size: 13px; |
| cursor: pointer; |
| outline: none; |
| } |
|
|
| select option { |
| background: #111; |
| color: #fff; |
| } |
|
|
| .chart-area { |
| height: 250px; |
| position: relative; |
| } |
|
|
| |
| .bar-chart { |
| display: flex; align-items: flex-end; gap: 12px; height: 100%; padding: 0 12px; |
| } |
| .bar-col { |
| display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; |
| } |
| .bar { |
| width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; |
| background: linear-gradient(180deg, #0a84ff, rgba(10,132,255,0.05)); |
| box-shadow: 0 -4px 20px rgba(10,132,255,0.6), inset 0 2px 4px rgba(255,255,255,0.4); |
| border: 1px solid rgba(10,132,255,0.8); border-bottom: none; |
| transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease, filter 0.3s ease; |
| position: relative; |
| transform-origin: bottom; |
| } |
| .bar:hover { |
| filter: brightness(1.3); |
| box-shadow: 0 -8px 32px rgba(10,132,255,1), inset 0 2px 6px rgba(255,255,255,0.8); |
| transform: scaleY(1.02); |
| } |
| .bar-label { |
| font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-top: 16px; |
| } |
|
|
| |
| .chart-area { |
| display: flex; align-items: center; gap: 40px; height: 250px; |
| } |
| .donut-chart { |
| width: 200px; height: 200px; border-radius: 50%; position: relative; flex-shrink: 0; |
| box-shadow: 0 10px 40px rgba(0,0,0,0.8), inset 0 2px 8px rgba(255,255,255,0.15); |
| filter: drop-shadow(0 0 15px rgba(255,255,255,0.05)); |
| } |
| .donut-center { |
| position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; |
| } |
| .donut-center__value { |
| font-family: 'JetBrains Mono', monospace; font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -1.5px; line-height: 1; |
| text-shadow: 0 0 20px rgba(255,255,255,0.3); |
| } |
| .donut-center__label { |
| font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; |
| } |
|
|
| .donut-legend { |
| display: flex; flex-direction: column; gap: 10px; flex: 1; |
| max-height: 250px; overflow-y: auto; padding-right: 12px; |
| } |
| |
| .donut-legend::-webkit-scrollbar { width: 4px; } |
| .donut-legend::-webkit-scrollbar-track { background: transparent; } |
| .donut-legend::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } |
|
|
| .donut-legend__item { |
| display: flex; align-items: center; gap: 10px; font-size: 13px; color: #ddd; font-weight: 500; |
| background: rgba(255,255,255,0.02); padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); |
| transition: background 0.2s; |
| } |
| .donut-legend__item:hover { background: rgba(255,255,255,0.06); } |
| .donut-legend__dot { |
| width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; |
| } |
| .donut-legend__val { |
| margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #fff; font-size: 14px; |
| } |
|
|
| |
| .table-wrap { |
| overflow-x: auto; |
| } |
| #page-history .chart-card { |
| display: flex; flex-direction: column; height: calc(100vh - 104px); margin-bottom: 0; min-height: auto; |
| } |
| #page-history .table-wrap { |
| flex: 1; overflow: hidden; min-height: 0; |
| } |
|
|
| .data-table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 14px; |
| } |
|
|
| .data-table th { |
| text-align: left; |
| padding: 12px 16px; |
| font-size: 12px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| color: var(--text-muted); |
| border-bottom: 1px solid var(--glass-border); |
| } |
|
|
| .data-table td { |
| padding: 14px 16px; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.03); |
| color: var(--text-secondary); |
| } |
|
|
| .data-table tr:hover td { |
| background: var(--glass); |
| } |
|
|
| .table-pagination { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 16px; |
| margin-top: 16px; |
| padding-top: 16px; |
| border-top: 1px solid var(--glass-border); |
| } |
|
|
| .pagination-info { |
| font-size: 13px; |
| color: var(--text-muted); |
| } |
|
|
| |
| .badge { |
| padding: 4px 12px; |
| border-radius: 100px; |
| font-size: 12px; |
| font-weight: 600; |
| background: var(--glass); |
| border: 1px solid var(--glass-border); |
| color: var(--text-secondary); |
| } |
|
|
| .badge--success { |
| background: var(--success-bg); |
| color: var(--success); |
| border-color: transparent; |
| } |
|
|
| .badge--danger { |
| background: var(--danger-bg); |
| color: var(--danger); |
| border-color: transparent; |
| } |
|
|
| .badge--warning { |
| background: var(--warning-bg); |
| color: var(--warning); |
| border-color: transparent; |
| } |
|
|
| |
| .upload-zone { |
| border: 2px dashed rgba(255, 255, 255, 0.15); |
| border-radius: var(--radius); |
| padding: 60px 32px; |
| text-align: center; |
| cursor: pointer; |
| background: rgba(0, 0, 0, 0.3); |
| transition: var(--transition); |
| } |
|
|
| .upload-zone:hover, |
| .upload-zone.dragover { |
| border-color: rgba(255, 255, 255, 0.3); |
| background: rgba(255, 255, 255, 0.02); |
| } |
|
|
| .upload-zone__icon { |
| font-size: 48px; |
| margin-bottom: 12px; |
| } |
|
|
| .upload-zone__title { |
| font-size: 18px; |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
|
|
| .upload-zone__desc { |
| font-size: 14px; |
| color: var(--text-muted); |
| } |
|
|
| |
| .sidebar { |
| transition: var(--transition); |
| } |
|
|
| .topbar { |
| transition: var(--transition); |
| } |
|
|
| .dash-main { |
| transition: var(--transition); |
| } |
|
|
| .sidebar__profile { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| cursor: pointer; |
| padding: 8px; |
| border-radius: var(--radius-sm); |
| transition: var(--transition); |
| } |
|
|
| body.sidebar-collapsed .profile-info { |
| opacity: 0; |
| position: absolute; |
| pointer-events: none; |
| } |
|
|
| body.sidebar-collapsed .navbar__logo-text { |
| opacity: 0; |
| position: absolute; |
| pointer-events: none; |
| } |
|
|
| .file-item { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 16px; |
| border-radius: var(--radius-sm); |
| background: var(--glass); |
| margin-bottom: 8px; |
| border: 1px solid var(--glass-border); |
| } |
|
|
| .file-item__icon { |
| font-size: 28px; |
| } |
|
|
| .file-item__info { |
| flex: 1; |
| } |
|
|
| .file-item__name { |
| font-size: 14px; |
| font-weight: 600; |
| } |
|
|
| .file-item__size { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| .file-item__progress { |
| height: 4px; |
| background: var(--glass); |
| border-radius: 2px; |
| margin-top: 8px; |
| overflow: hidden; |
| } |
|
|
| .file-item__progress-bar { |
| height: 100%; |
| background: var(--text-primary); |
| border-radius: 2px; |
| transition: width 0.3s ease; |
| } |
|
|
| |
| .api-key-card { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 20px; |
| border-radius: var(--radius-sm); |
| background: var(--glass); |
| border: 1px solid var(--glass-border); |
| margin-bottom: 12px; |
| } |
|
|
| .api-key-card__info { |
| flex: 1; |
| } |
|
|
| .api-key-card__name { |
| font-size: 14px; |
| font-weight: 600; |
| margin-bottom: 4px; |
| } |
|
|
| .api-key-card__key { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 13px; |
| color: var(--text-muted); |
| letter-spacing: 0.5px; |
| } |
|
|
| .api-key-card__meta { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-top: 6px; |
| } |
|
|
| .api-key-card__actions { |
| display: flex; |
| gap: 8px; |
| } |
|
|
| |
| .code-block { |
| border-radius: var(--radius-sm); |
| overflow: hidden; |
| border: 1px solid var(--glass-border); |
| } |
|
|
| .code-block__header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 10px 16px; |
| background: var(--glass); |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
|
|
| .code-block__body { |
| padding: 16px; |
| margin: 0; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 13px; |
| line-height: 1.7; |
| color: var(--text-secondary); |
| overflow-x: auto; |
| background: rgba(0, 0, 0, 0.3); |
| } |
|
|
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
|
|
| .form-label { |
| display: block; |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text-secondary); |
| margin-bottom: 8px; |
| } |
|
|
| .form-input { |
| width: 100%; |
| padding: 12px 16px; |
| border-radius: var(--radius-sm); |
| background: var(--glass); |
| border: 1px solid var(--glass-border); |
| color: var(--text-primary); |
| font-family: inherit; |
| font-size: 14px; |
| outline: none; |
| transition: var(--transition); |
| } |
|
|
| .form-input:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px var(--accent-glow); |
| } |
|
|
| |
| .toggle-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 12px 0; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.03); |
| font-size: 14px; |
| color: var(--text-secondary); |
| } |
|
|
| .switch { |
| position: relative; |
| display: inline-block; |
| width: 44px; |
| height: 24px; |
| } |
|
|
| .switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
|
|
| .slider { |
| position: absolute; |
| inset: 0; |
| background: var(--glass-border); |
| border-radius: 24px; |
| cursor: pointer; |
| transition: var(--transition); |
| } |
|
|
| .slider::before { |
| content: ''; |
| position: absolute; |
| width: 18px; |
| height: 18px; |
| left: 3px; |
| bottom: 3px; |
| background: white; |
| border-radius: 50%; |
| transition: var(--transition); |
| } |
|
|
| .switch input:checked+.slider { |
| background: var(--accent); |
| } |
|
|
| .switch input:checked+.slider::before { |
| transform: translateX(20px); |
| } |
|
|
| |
| @media (max-width: 1024px) { |
| .dash-grid-4 { |
| grid-template-columns: repeat(2, 1fr); |
| } |
|
|
| .dash-grid-2 { |
| grid-template-columns: 1fr; |
| } |
|
|
| .ai-leak-hero, |
| .ai-leak-grid, |
| .ai-leak-form, |
| .ai-engine-actions, |
| .flow-hero, |
| .flow-form, |
| .flow-layout, |
| .dpdp-hero, |
| .tool-form, |
| .tool-form--three, |
| .tool-timeline div { |
| grid-template-columns: 1fr; |
| } |
|
|
| .ai-leak-metrics, |
| .flow-summary { |
| grid-template-columns: repeat(2, 1fr); |
| } |
|
|
| .ai-engine-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .sidebar { |
| transform: translateX(-100%); |
| } |
|
|
| .sidebar.open { |
| transform: translateX(0); |
| } |
|
|
| .dash-main { |
| margin-left: 0; |
| } |
|
|
| .topbar, |
| body.sidebar-collapsed .topbar { |
| left: 0; |
| padding: 0 16px; |
| } |
|
|
| .topbar__right { |
| gap: 8px; |
| } |
|
|
| .topbar__menu { |
| display: block; |
| } |
|
|
| .dash-grid-4 { |
| grid-template-columns: 1fr; |
| } |
|
|
| .topbar__search { |
| display: none; |
| } |
|
|
| .ai-leak-hero h2 { |
| font-size: 26px; |
| } |
|
|
| .ai-leak-score-card__body { |
| flex-direction: column; |
| align-items: flex-start; |
| } |
|
|
| .ai-leak-metrics { |
| grid-template-columns: 1fr; |
| } |
|
|
| .flow-summary { |
| grid-template-columns: 1fr; |
| } |
|
|
| .tool-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .ai-engine-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| |
| @keyframes countUp { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .metric-card__value { |
| animation: countUp 0.5s ease forwards; |
| } |
|
|
| |
| .page#page-overview .dash-grid-4::before { |
| display: none; |
| } |
|
|
| |
| .bar { |
| box-shadow: none; |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: transparent; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 3px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: rgba(255, 255, 255, 0.15); |
| }
|
| @keyframes spin { 100% { transform: rotate(360deg); } }
|
| .spin { animation: spin 1s linear infinite; }
|
|
|
