/* ============================================================
   CordonData marketing site — extracted styles
   (migrated from the inline <style> block + new mockup theme)
   ============================================================ */

body { background-color: #000000; color: #ffffff; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

.grid-fade {
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 80% 55% at 50% 45%, #000000 65%, transparent 100%);
}

.glass {
    background: rgba(9, 9, 11, 0.6); /* card-dark base */
    backdrop-filter: blur(16px);
    border: 1px solid #27272a; /* border-dark */
}

.glow-text { text-shadow: 0 0 40px rgba(255, 255, 255, 0.3); }

/* Modal Animation */
.modal-enter { opacity: 0; transform: scale(0.95); }
.modal-enter-active { opacity: 1; transform: scale(1); transition: all 0.2s ease-out; }

/* Scroll Progress Bar */
#scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7); z-index: 100; transition: width 0.1s linear; }

/* Sticky Bottom CTA */
#sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; transform: translateY(100%); transition: transform 0.3s ease; }
#sticky-cta.visible { transform: translateY(0); }

/* FAQ Accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-item .faq-chevron { transition: transform 0.3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item { cursor: pointer; }

/* Section reveal */
.reveal-section { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-section.visible { opacity: 1; transform: translateY(0); }

/* Keyframes (page + mockups) */
@keyframes slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Hero animations */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroGlowPulse { 0%, 100% { text-shadow: 0 0 40px rgba(255,255,255,0.3); } 50% { text-shadow: 0 0 60px rgba(255,255,255,0.5), 0 0 80px rgba(255,255,255,0.15); } }
@keyframes heroSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroBadgePop { 0% { opacity: 0; transform: scale(0) translateY(10px); } 60% { transform: scale(1.15) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes messageAppear { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes heroBadgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

.hero-animate-text { animation: heroFadeUp 0.8s ease both; }
.hero-animate-text-2 { animation: heroFadeUp 0.8s ease 0.2s both; }
.hero-animate-text-3 { animation: heroFadeUp 0.8s ease 0.4s both; }
.hero-animate-btn-1 { animation: heroFadeUp 0.8s ease 0.6s both; }
.hero-animate-btn-2 { animation: heroFadeUp 0.8s ease 0.7s both; }
.hero-animate-mockup { animation: heroSlideRight 0.9s ease 0.3s both; }
.hero-animate-badge { animation: heroBadgePop 0.6s ease 1.2s both; }
.hero-glow-text { animation: heroGlowPulse 3s ease-in-out infinite; }
.hero-float { animation: floatUpDown 4s ease-in-out infinite; }
.hero-gradient-text { background: linear-gradient(90deg, #ffffff, #a1a1aa, #ffffff, #71717a); background-size: 300% 100%; animation: gradientShift 4s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-badge-live { animation: heroBadgePulse 2s ease-in-out infinite; }
.animate-blink { animation: blink 1s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* Demo / hero frame show-hide (containers keep position:absolute inset-0) */
.demo-frame { position:absolute; inset:0; transition: opacity 0.5s ease; }
.demo-frame.inactive { opacity: 0 !important; z-index: 5 !important; pointer-events: none; }
.demo-frame.active { opacity: 1 !important; z-index: 10 !important; }
.hero-screen-clickable { transition: opacity 0.5s ease; }

/* ============================================================
   LIGHT APP MOCKUP THEME  (rendered inside the dark window chrome)
   The real CordonData app is light-themed; these classes recreate
   it faithfully. Namespaced under .cd-app.
   ============================================================ */
.cd-app {
    --bg:#101013; --bg2:#09090b; --bg3:#1c1c21;
    --bd:#27272a; --bd2:#1a1a1d; --bd3:#3f3f46;
    --tx:#fafafa; --tx2:#d4d4d8; --tx3:#a1a1aa; --tx4:#71717a;
    --ac:#60a5fa; --ac-bg:rgba(59,130,246,0.15); --ac-bd:rgba(59,130,246,0.40);
    --ok:#4ade80; --ok-bg:rgba(34,197,94,0.14);
    --warn:#fbbf24; --warn-bg:rgba(245,158,11,0.13);
    --danger:#f87171; --danger-bg:rgba(239,68,68,0.14);
    --purple:#c084fc; --purple-bg:rgba(168,85,247,0.18);
    --brand:#22c55e;
    position:absolute; inset:0; display:flex; overflow:hidden;
    background:var(--bg2); color:var(--tx);
    font-family:Inter,system-ui,sans-serif; font-size:13px; line-height:1.45;
    text-align:left; letter-spacing:0;
}
.cd-app *{ box-sizing:border-box; }
.cd-app ::-webkit-scrollbar{ width:7px; height:7px; }
.cd-app ::-webkit-scrollbar-thumb{ background:#3f3f46; border-radius:999px; }
.cd-app ::-webkit-scrollbar-track{ background:transparent; }

/* hero mount renders the same frames smaller */
#hero-screen-area .cd-app{ font-size:10px; }
#hero-screen-area .cd-sb{ width:148px; }

/* ---- Sidebar ---- */
.cd-sb{ width:188px; flex:none; background:var(--bg); border-right:1px solid var(--bd);
    display:flex; flex-direction:column; padding:11px 10px; }
.cd-sb-brand{ display:flex; align-items:center; gap:7px; padding:2px 4px 10px; }
.cd-sb-brand b{ color:var(--tx); font-weight:700; font-size:1.02em; }
.cd-sb-brand .lg{ color:var(--ac); }
.cd-sb-new{ display:flex; align-items:center; gap:7px; justify-content:center;
    border:1px solid var(--bd); background:var(--bg); color:var(--tx2);
    border-radius:9px; padding:7px 10px; font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.cd-sb-new:hover{ background:var(--bg2); }
.cd-sb-label{ font-size:.78em; text-transform:uppercase; letter-spacing:.06em; color:var(--tx4); font-weight:600; padding:13px 6px 5px; }
.cd-nav{ display:flex; flex-direction:column; gap:1px; }
.cd-nav-item{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
    color:var(--tx2); cursor:pointer; font-weight:500; }
.cd-nav-item i{ width:15px; height:15px; }
.cd-nav-item:hover{ background:var(--bg3); }
.cd-nav-item[data-active="true"]{ background:var(--ac-bg); color:var(--ac); font-weight:600; }
.cd-sb-spacer{ flex:1; }
.cd-sb-appear{ display:flex; align-items:center; gap:8px; padding:8px 9px; color:var(--tx3); border-top:1px solid var(--bd); }
.cd-sb-user{ display:flex; align-items:center; gap:8px; padding:9px 6px 2px; }
.cd-avatar{ width:26px; height:26px; flex:none; border-radius:50%; background:#a855f7; color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.82em; }
.cd-sb-user .nm{ color:var(--tx); font-weight:600; font-size:.95em; line-height:1.2; }
.cd-sb-user .em{ color:var(--tx4); font-size:.8em; }

/* ---- Main shell ---- */
.cd-main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg2); }
.cd-top{ height:46px; flex:none; display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--bg); border-bottom:1px solid var(--bd); }
.cd-top-title{ font-size:1.18em; font-weight:700; color:var(--tx); }
.cd-body{ flex:1; min-height:0; display:flex; overflow:hidden; }

/* ---- Generic primitives ---- */
.cd-card{ background:var(--bg); border:1px solid var(--bd); border-radius:10px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.cd-muted{ color:var(--tx3); }
.cd-btn{ display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:6px 12px; font-weight:600; cursor:pointer; border:1px solid var(--bd); background:var(--bg); color:var(--tx2); }
.cd-btn:hover{ background:var(--bg2); }
.cd-btn-pri{ background:var(--ac); border-color:var(--ac); color:#fff; }
.cd-btn-pri:hover{ filter:brightness(1.05); background:var(--ac); }
.cd-btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.cd-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:.82em; font-weight:600; }
.cd-badge.b-blue{ background:var(--ac-bg); color:var(--ac); }
.cd-badge.b-green{ background:var(--ok-bg); color:var(--ok); }
.cd-badge.b-red{ background:var(--danger-bg); color:var(--danger); }
.cd-badge.b-amber{ background:var(--warn-bg); color:var(--warn); }
.cd-badge.b-purple{ background:var(--purple-bg); color:var(--purple); }
.cd-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }

/* tables */
.cd-table{ width:100%; border-collapse:collapse; background:var(--bg); }
.cd-app svg{ width:15px; height:15px; flex:none; }  /* lucide swaps <i> for <svg>, so size svgs directly */
/* single-line rows: long file names truncate with an ellipsis instead of wrapping (which made rows ~72px tall) */
.cd-table td, .cd-table th{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-fname{ min-width:0; overflow:hidden; }
.cd-fname span, .cd-fname{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-table th{ text-align:left; font-size:.76em; text-transform:uppercase; letter-spacing:.04em; color:var(--tx4); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--bd); white-space:nowrap; cursor:pointer; user-select:none; }
.cd-table td{ padding:9px 12px; border-bottom:1px solid var(--bd2); color:var(--tx2); vertical-align:middle; }
.cd-table tbody tr{ cursor:pointer; }
.cd-table tbody tr:hover td{ background:var(--bg2); }
.cd-table tr.sel td{ background:var(--ac-bg); }
.cd-fname{ display:flex; align-items:center; gap:8px; color:var(--tx); font-weight:500; }
.cd-fname i{ width:15px; height:15px; flex:none; }
.cd-ic-folder{ color:var(--ac); } .cd-ic-pdf{ color:var(--danger); } .cd-ic-doc{ color:#2563eb; } .cd-ic-xls{ color:var(--ok); }

/* highlight + flash (evidence / compliance) */
.cd-hl{ background:rgba(245,158,11,0.20); outline:1px solid rgba(245,158,11,0.55); border-radius:2px; }
.cd-hl td{ color:#fde68a !important; }
.cd-flash{ animation: cdFlash 1.1s ease; }
@keyframes cdFlash{ 0%,100%{ background:rgba(245,158,11,0.10); } 45%{ background:rgba(245,158,11,0.32); } }
.cd-app mark{ background:rgba(245,158,11,0.26); color:#fde68a; border-radius:2px; padding:0 2px; }

/* ---- Frame 1: Ask AI ---- */
.cd-split{ display:flex; flex:1; min-height:0; }
.cd-chat{ flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--bd); background:var(--bg); }
.cd-chat-scroll{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:13px; }
.cd-bubble{ align-self:flex-end; max-width:78%; background:var(--ac-bg); color:var(--tx); border:1px solid var(--ac-bd); padding:8px 12px; border-radius:13px 13px 4px 13px; }
.cd-steps{ display:flex; flex-direction:column; gap:7px; padding:11px 13px; }
.cd-step{ display:flex; align-items:center; gap:8px; color:var(--tx3); font-size:.95em; }
.cd-step i{ width:13px; height:13px; }
.cd-step.done{ color:var(--ok); font-weight:600; }
.cd-spinner{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(147,51,234,.25); border-top-color:var(--purple); animation:spin .8s linear infinite; flex:none; }
.cd-answer{ color:var(--tx2); line-height:1.6; }
.cd-answer b, .cd-answer strong{ color:var(--tx); font-weight:700; }
.cd-answer .ln{ display:flex; justify-content:space-between; gap:14px; padding:3px 0; border-bottom:1px dashed var(--bd); }
.cd-cite{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:var(--bg); border:1px solid var(--bd); border-radius:8px; padding:6px 11px; color:var(--tx2); font-weight:500; cursor:pointer; }
.cd-cite:hover{ background:var(--bg2); border-color:var(--ac-bd); }
.cd-cite i{ width:14px; height:14px; color:var(--danger); }
.cd-chat-input{ flex:none; border-top:1px solid var(--bd); padding:11px 14px; display:flex; align-items:center; gap:9px; background:var(--bg); }
.cd-input-box{ flex:1; display:flex; align-items:center; gap:8px; border:1px solid var(--bd); border-radius:999px; padding:8px 14px; color:var(--tx4); background:var(--bg2); }
.cd-think{ display:inline-flex; align-items:center; gap:5px; background:var(--bg3); color:var(--tx2); border-radius:999px; padding:6px 11px; font-weight:600; font-size:.9em; cursor:pointer; }
.cd-think.on{ background:var(--ac-bg); color:var(--ac); }
.cd-send{ width:32px; height:32px; flex:none; border-radius:50%; background:var(--ac); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cd-send i{ width:15px; height:15px; }

.cd-evi{ width:42%; min-width:300px; flex:none; display:flex; flex-direction:column; background:var(--bg2); }
.cd-evi-tab{ display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--bg); border-bottom:1px solid var(--bd); border-left:3px solid var(--danger); font-weight:600; color:var(--tx); }
.cd-evi-tab i{ width:14px; height:14px; color:var(--danger); }
.cd-evi-tab .x{ margin-left:auto; color:var(--tx4); }
.cd-evi-banner{ margin:11px; padding:9px 11px; background:var(--warn-bg); border-left:3px solid var(--warn); border-radius:0 6px 6px 0; }
.cd-evi-banner b{ color:var(--warn); display:block; margin-bottom:2px; }
.cd-evi-banner span{ color:var(--tx3); font-size:.92em; }
.cd-evi-page{ margin:0 11px 11px; flex:1; overflow-y:auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; padding:14px 16px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.cd-evi-page h4{ font-weight:700; color:var(--tx); }
.cd-evi-page .sub{ color:var(--tx3); font-size:.9em; margin:1px 0 9px; }
.cd-doc-table{ width:100%; border-collapse:collapse; font-size:.92em; }
.cd-doc-table td{ padding:3px 4px; border-bottom:1px solid var(--bd2); color:var(--tx2); }
.cd-doc-table td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cd-doc-table tr.ind td:first-child{ padding-left:16px; color:var(--tx3); }
.cd-doc-table tr.hd td{ color:var(--tx4); text-transform:uppercase; font-size:.82em; border-bottom:1px solid var(--bd); }
.cd-doc-table tr.tot td{ font-weight:700; color:var(--tx); border-top:1px solid var(--bd3); }
.cd-evi-ctrl{ display:flex; align-items:center; justify-content:space-between; padding:8px 13px; border-top:1px solid var(--bd); color:var(--tx3); background:var(--bg); }
.cd-evi-ctrl span{ display:inline-flex; align-items:center; gap:8px; }

/* ---- Frame 2: Global Search ---- */
.cd-search-bar{ flex:none; padding:13px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-search-in{ display:flex; align-items:center; gap:9px; border:1px solid var(--bd); border-radius:9px; padding:9px 13px; color:var(--tx4); background:var(--bg2); }
.cd-search-in i{ width:15px; height:15px; }
.cd-search-q{ flex:1; }
.cd-search-in[data-typed="true"]{ color:var(--tx); border-color:var(--ac-bd); background:var(--bg); }
.cd-caret{ width:1.5px; height:15px; background:var(--ac); }
.cd-search-in:not([data-typed="true"]) .cd-caret{ display:none; }
.cd-search-in[data-typed="true"] .cd-caret{ animation:cdBlink 1s steps(1) infinite; }
@keyframes cdBlink{ 50%{ opacity:0; } }
.cd-snip{ font-size:.84em; color:var(--tx3); margin-top:3px; padding-left:23px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:560px; }
.cd-search-meta{ margin-top:7px; color:var(--ac); font-size:.92em; }
.cd-facets{ width:218px; flex:none; border-right:1px solid var(--bd); overflow-y:auto; padding:12px 10px; background:var(--bg); }
.cd-facet-grp{ margin-bottom:14px; }
.cd-facet-grp h5{ font-size:.76em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:600; padding:0 6px 5px; }
.cd-facet{ display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:7px; cursor:pointer; color:var(--tx2); }
.cd-facet:hover{ background:var(--bg2); }
.cd-facet .box{ width:14px; height:14px; flex:none; border:1.5px solid var(--bd3); border-radius:4px; display:flex; align-items:center; justify-content:center; }
.cd-facet[data-on="true"] .box{ background:var(--ac); border-color:var(--ac); }
.cd-facet[data-on="true"] .box::after{ content:"✓"; color:#fff; font-size:.7em; line-height:1; }
.cd-facet .nm{ flex:1; }
.cd-facet .ct{ color:var(--tx4); font-variant-numeric:tabular-nums; }
.cd-results{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.cd-results .scroll{ flex:1; overflow-y:auto; }
.cd-results-foot{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-top:1px solid var(--bd); background:var(--bg); color:var(--tx3); }
.cd-sortcue{ color:var(--ac); margin-left:3px; }

/* ---- Frame 3: My Library ---- */
.cd-subnav{ flex:none; display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 14px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-subnav .it{ padding:5px 10px; border-radius:7px; color:var(--tx2); cursor:pointer; font-weight:500; }
.cd-subnav .it:hover{ background:var(--bg2); }
.cd-subnav .it[data-active="true"]{ background:var(--ac-bg); color:var(--ac); font-weight:600; }
.cd-crumb{ flex:none; display:flex; align-items:center; gap:6px; padding:8px 16px; color:var(--tx3); background:var(--bg2); border-bottom:1px solid var(--bd); }
.cd-crumb b{ color:var(--tx); font-weight:600; }
.cd-kebab{ display:inline-flex; align-items:center; justify-content:center; color:var(--tx4); cursor:pointer; padding:3px; border-radius:5px; }
.cd-kebab:hover{ background:var(--bg3); color:var(--tx2); }
.cd-ctx{ position:absolute; z-index:40; min-width:178px; background:var(--bg); border:1px solid var(--bd); border-radius:9px; box-shadow:0 12px 30px -6px rgba(16,24,40,.25); padding:5px; }
.cd-ctx .it{ display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:6px; color:var(--tx2); cursor:pointer; font-size:.95em; }
.cd-ctx .it:hover{ background:var(--bg2); }
.cd-ctx .it.danger{ color:var(--danger); }
.cd-ctx .sep{ height:1px; background:var(--bd); margin:4px 2px; }
.cd-selinfo{ width:296px; flex:none; border-left:1px solid var(--bd); background:var(--bg); overflow-y:auto; padding:13px; }
.cd-selinfo h4{ font-weight:700; color:var(--tx); }
.cd-selinfo-actions{ display:flex; gap:6px; margin:11px 0; }
.cd-selinfo-actions span{ width:30px; height:30px; border:1px solid var(--bd); border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--tx3); cursor:pointer; }
.cd-selinfo-actions span:hover{ background:var(--bg2); }
.cd-prop{ margin:7px 0; }
.cd-prop .k{ font-size:.78em; text-transform:uppercase; letter-spacing:.04em; color:var(--tx4); }
.cd-prop .v{ color:var(--tx); }
.cd-aistatus{ display:flex; align-items:center; gap:7px; margin:11px 0; padding:7px 10px; background:var(--ok-bg); border-radius:7px; color:var(--ok); font-weight:600; }
.cd-acc{ border-top:1px solid var(--bd); }
.cd-acc-h{ display:flex; align-items:center; gap:8px; padding:10px 2px; color:var(--tx2); font-weight:600; cursor:pointer; }
.cd-acc-h i.chev{ margin-left:auto; width:14px; height:14px; transition:transform .25s; }
.cd-acc[data-open="true"] .cd-acc-h i.chev{ transform:rotate(180deg); }
.cd-acc-body{ display:none; padding:0 2px 12px; color:var(--tx2); }
.cd-acc[data-open="true"] .cd-acc-body{ display:block; }
.cd-ask-in{ display:flex; gap:7px; align-items:center; border:1px solid var(--bd); border-radius:8px; padding:7px 10px; background:var(--bg2); color:var(--tx4); }

/* Modal (AI Compare) */
.cd-modal{ position:absolute; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.45); }
.cd-modal[data-open="true"]{ display:flex; }
.cd-modal-card{ width:min(86%,640px); max-height:84%; overflow:hidden; background:var(--bg); border-radius:14px; box-shadow:0 24px 60px -12px rgba(0,0,0,.4); display:flex; flex-direction:column; }
.cd-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--bd); }
.cd-modal-head h3{ font-weight:700; color:var(--tx); font-size:1.08em; }
.cd-tabs{ display:flex; gap:4px; padding:10px 16px 0; border-bottom:1px solid var(--bd); }
.cd-tab{ padding:8px 13px; border-radius:8px 8px 0 0; color:var(--tx3); cursor:pointer; font-weight:600; border-bottom:2px solid transparent; }
.cd-tab[data-active="true"]{ color:var(--ac); border-bottom-color:var(--ac); }
.cd-modal-body{ padding:16px 18px; overflow-y:auto; }
.cd-vchip{ display:inline-flex; align-items:center; gap:6px; background:var(--bg3); border-radius:7px; padding:5px 10px; color:var(--tx2); font-weight:500; margin-right:8px; }
.cd-vchip.a{ border-left:3px solid var(--ac); } .cd-vchip.b{ border-left:3px solid var(--purple); }
.cd-textarea{ width:100%; min-height:64px; border:1px solid var(--bd); border-radius:9px; padding:10px 12px; color:var(--tx2); background:var(--bg2); margin:12px 0; }

/* Global Search compare tray (floating) */
.cd-cmp-tray{ position:absolute; bottom:60px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--bd); border-radius:999px; padding:7px 9px 7px 14px; box-shadow:0 10px 30px -8px rgba(0,0,0,.45); z-index:35; }
.cd-cmp-tray .lbl{ color:var(--tx2); font-weight:600; }
.cd-cmp-tray .cd-vchip{ margin:0; }
.cd-cmp-tray .cd-btn-pri[data-disabled="true"]{ pointer-events:none; }

/* Global Search — active-filter pills bar */
.cd-filterbar{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; padding:8px 16px; border-bottom:1px solid var(--bd); background:var(--bg2); }
.cd-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--ac-bg); color:var(--ac); border:1px solid var(--ac-bd); border-radius:999px; padding:3px 10px; font-size:.86em; font-weight:600; cursor:pointer; }
.cd-pill:hover{ filter:brightness(1.08); }
.cd-pill.cd-pill-clear{ background:transparent; border-color:var(--bd); color:var(--tx3); }
.cd-pill.cd-pill-clear:hover{ background:var(--bg3); color:var(--tx2); }
.cd-facet-allnone{ float:right; display:inline-flex; gap:7px; text-transform:none; letter-spacing:0; }
.cd-facet-allnone span{ color:var(--ac); cursor:pointer; font-weight:600; font-size:.92em; }
.cd-facet-allnone span:hover{ text-decoration:underline; }

/* Global Search — row checkbox + multi-select bar */
.cd-check{ width:15px; height:15px; flex:none; border:1.5px solid var(--bd3); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; vertical-align:middle; }
.cd-check[data-checked="true"]{ background:var(--ac); border-color:var(--ac); }
.cd-check[data-checked="true"]::after{ content:"✓"; color:#fff; font-size:.7em; line-height:1; }
.cd-multibar{ display:flex; align-items:center; gap:8px; background:var(--ac-bg); color:var(--ac); padding:7px 16px; border-bottom:1px solid var(--bd); font-weight:600; font-size:.92em; }
.cd-multibar b{ color:var(--ac); }
.cd-multibar-clear{ margin-left:auto; color:var(--tx3); cursor:pointer; font-weight:600; }
.cd-multibar-clear:hover{ color:var(--tx2); text-decoration:underline; }

/* Global Search — name-cell inline OCR / RAG badges */
.cd-badge-ocr{ width:14px; height:14px; color:var(--warn); margin-left:6px; cursor:help; flex:none; }
.cd-badge-rag{ width:14px; height:14px; color:var(--danger); margin-left:6px; cursor:help; flex:none; }

/* Global Search — detail panel tabs + sections */
.cd-f2-dtabs{ padding:8px 0 0; margin-bottom:8px; }
.cd-f2-dtabs .cd-tab{ padding:6px 11px; font-size:.92em; }
.cd-f2-dsec{ font-size:.74em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:700; margin:14px 0 5px; padding-top:9px; border-top:1px solid var(--bd2); }
.cd-f2-dstatus{ margin-top:10px; }
.cd-f2-matched{ background:var(--warn-bg); border-left:3px solid var(--warn); border-radius:0 6px 6px 0; padding:8px 10px; color:var(--tx3); font-size:.88em; line-height:1.5; cursor:pointer; }
.cd-f2-matched:hover{ filter:brightness(1.08); }
.cd-f2-prevmini{ max-width:none; margin:6px 0 0; padding:14px 16px; }
.cd-f2-prevmini h4{ font-size:1em; }
.cd-f2-prevmini p{ font-size:.9em; margin:7px 0; }

/* Global Search — Select-for-Compare banner + SharePoint auth modal */
.cd-cmp-banner{ display:flex; align-items:center; gap:9px; margin:0; padding:8px 16px; background:var(--ac-bg); border-bottom:1px solid var(--ac-bd); border-left:3px solid var(--ac); color:var(--tx2); font-size:.92em; }
.cd-cmp-banner i{ color:var(--ac); }
.cd-cmp-banner b{ color:var(--tx); }
.cd-f2-authbody{ text-align:center; padding:14px 6px 6px; display:flex; flex-direction:column; align-items:center; }

/* My Library document preview (redaction / sticky-note / annotation tools) */
.cd-prev-card{ width:min(92%,900px); height:88%; max-height:88%; }
.cd-prev-toolbar{ flex:none; display:flex; align-items:center; gap:8px; padding:9px 16px; border-bottom:1px solid var(--bd); flex-wrap:wrap; background:var(--bg); }
.cd-prev-body{ flex:1; min-height:0; overflow-y:auto; padding:22px; background:var(--bg2); }
.cd-prev-doc{ position:relative; max-width:680px; margin:0 auto; background:var(--bg); border:1px solid var(--bd); border-radius:8px; padding:24px 28px; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.cd-prev-doc h4{ font-weight:700; color:var(--tx); }
.cd-prev-doc .sub{ color:var(--tx3); font-size:.9em; margin:2px 0 12px; }
.cd-prev-doc p{ margin:9px 0; line-height:1.65; color:var(--tx2); }
.cd-redact{ display:inline-block; background:#0b0b0c; color:#5b5b62; font-size:.72em; letter-spacing:.12em; border-radius:3px; padding:2px 12px; vertical-align:middle; }
.cd-sticky{ position:absolute; top:-12px; right:-14px; width:158px; background:#fde68a; color:#3f2d00; font-size:.8em; line-height:1.4; padding:10px 12px; border-radius:3px; box-shadow:0 8px 22px -6px rgba(0,0,0,.6); transform:rotate(2.5deg); }
.cd-sticky b{ display:block; margin-bottom:3px; }

/* ---- Frame 4: System Explorer ---- */
.cd-rail{ width:236px; flex:none; border-right:1px solid var(--bd); overflow-y:auto; padding:11px 9px; background:var(--bg); }
.cd-rail-sec{ font-size:.74em; text-transform:uppercase; letter-spacing:.06em; color:var(--tx4); font-weight:600; padding:13px 6px 5px; }
.cd-ws{ display:flex; align-items:center; gap:7px; justify-content:space-between; border:1px solid var(--bd); border-radius:8px; padding:7px 10px; color:var(--tx); font-weight:600; cursor:pointer; }
.cd-tnode{ display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:7px; color:var(--tx2); cursor:pointer; }
.cd-tnode:hover{ background:var(--bg2); }
.cd-tnode[data-active="true"]{ background:var(--ac-bg); color:var(--ac); font-weight:600; }
.cd-tnode i.tw{ width:13px; height:13px; transition:transform .2s; }
.cd-tnode[data-exp="true"] i.tw{ transform:rotate(90deg); }
.cd-tnode .ico{ width:14px; height:14px; }
.cd-tchildren{ display:none; margin-left:14px; border-left:1px solid var(--bd); padding-left:5px; }
.cd-tnode[data-exp="true"] + .cd-tchildren{ display:block; }
.cd-exp-head{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-exp-head .bc{ color:var(--tx); font-weight:600; display:flex; align-items:center; gap:6px; }
.cd-exp-actions{ display:flex; gap:8px; align-items:center; }

/* ---- Frame 5: Activity ---- */
.cd-act-ctrl{ flex:none; display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-act-tabs{ display:flex; gap:4px; }
.cd-act-tab{ padding:6px 11px; border-radius:7px; color:var(--tx3); cursor:pointer; font-weight:600; border-bottom:2px solid transparent; }
.cd-act-tab[data-active="true"]{ color:var(--ac); border-bottom-color:var(--ac); }
.cd-act-user{ display:flex; align-items:center; gap:7px; color:var(--tx3); }
.cd-act-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.cd-toast{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:#1e1e24; color:#fafafa; border:1px solid #3f3f46; padding:9px 16px; border-radius:9px; font-weight:600; transition:all .3s ease; z-index:80; box-shadow:0 10px 30px -6px rgba(0,0,0,.3); }
.cd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Frame 6: Compliance ---- */
.cd-comp-tabs{ flex:none; display:flex; gap:4px; padding:10px 16px 0; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-comp-tab{ display:flex; align-items:center; gap:7px; padding:9px 13px; color:var(--tx3); cursor:pointer; font-weight:600; border-bottom:2px solid transparent; }
.cd-comp-tab[data-active="true"]{ color:var(--ac); border-bottom-color:var(--ac); }
.cd-comp-tab .ct{ background:var(--bg3); border-radius:999px; padding:0 7px; font-size:.82em; }
.cd-finding{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--bd2); cursor:pointer; background:var(--bg); }
.cd-finding:hover{ background:var(--bg2); }
.cd-finding.sel{ background:var(--ac-bg); }
.cd-finding .nm{ flex:1; min-width:0; color:var(--tx); font-weight:500; display:flex; align-items:center; gap:8px; }
.cd-finding .mask{ font-family:ui-monospace,monospace; color:var(--tx3); }
.cd-finding .src{ color:var(--tx4); font-size:.88em; }
.cd-finding.redacted{ background:var(--danger-bg); }
.cd-finding.redacted .nm{ text-decoration:line-through; color:var(--tx4); }
.cd-comp-detail{ width:336px; flex:none; border-left:1px solid var(--bd); background:var(--bg); padding:14px; overflow-y:auto; }
.cd-comp-excerpt{ background:var(--bg2); border:1px solid var(--bd); border-radius:8px; padding:11px; color:var(--tx2); line-height:1.6; margin:11px 0; }
.cd-comp-actions{ display:flex; gap:8px; margin-top:12px; }

/* Ask AI suggested questions */
.cd-suggest{ display:flex; gap:7px; flex-wrap:wrap; align-self:flex-start; margin-top:1px; }
.cd-suggest span{ font-size:.9em; color:var(--ac); background:var(--ac-bg); border:1px solid var(--ac-bd); border-radius:999px; padding:4px 11px; cursor:pointer; }
.cd-suggest span:hover{ background:rgba(96,165,250,0.24); }

/* ===== Demo full-screen lightbox ===== */
#demo-lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
#demo-lightbox.open{ display:flex; }
#demo-lightbox .dl-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.82); backdrop-filter:blur(6px); }
#demo-lightbox .dl-window{ position:relative; width:min(1500px,95vw); height:min(920px,92vh); display:flex; flex-direction:column; background:#0a0a0c; border:1px solid #27272a; border-radius:16px; overflow:hidden; box-shadow:0 40px 120px -20px rgba(0,0,0,0.85); }
#demo-lightbox .dl-bar{ flex:none; display:flex; align-items:center; gap:8px; padding:11px 16px; background:#161619; border-bottom:1px solid #27272a; }
#demo-lightbox .dl-bar .tl{ width:12px; height:12px; border-radius:50%; }
#demo-lightbox .dl-title{ font:600 12px Inter,system-ui,sans-serif; color:#d4d4d8; }
#demo-lightbox .dl-spacer{ flex:1; }
#demo-lightbox .dl-hint{ font:500 11px Inter,system-ui,sans-serif; color:#71717a; }
#demo-lightbox .dl-close{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:#a1a1aa; border:1px solid #3f3f46; border-radius:8px; padding:6px 12px; font:600 12px Inter,system-ui,sans-serif; transition:all .15s; }
#demo-lightbox .dl-close:hover{ color:#fff; border-color:#52525b; background:#27272a; }
#demo-lightbox .dl-body{ position:relative; flex:1; min-height:0; background:#09090b; }#demo-lightbox #demo-screen{ height:100% !important; }
#demo-lightbox .dl-body .cd-app{ font-size:13.5px; }
#demo-lightbox .dl-foot{ flex:none; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:13px; background:#101013; border-top:1px solid #27272a; }
body.dl-open{ overflow:hidden; }/* ── Continuous auto-play demo ──────────────────────────────────────────────
   The inline mount is a non-interactive show (continuous animation + progress
   bar). The Expand lightbox is the fully interactive copy. Frame dots, control
   buttons, Pause and Expand all live outside .cd-app, so they stay clickable. */
#demo-screen .cd-app{ pointer-events:none; }
#demo-lightbox .dl-body .cd-app{ pointer-events:auto !important; }
/* Stories-style segmented progress bar — one pill per frame */
/* Continuous video-player-style scrubber */
#demo-progress{ display:flex; align-items:center; padding:10px 8px; background:transparent; cursor:pointer; }
#demo-progress .cd-prog-track{ position:relative; flex:1; height:4px; background:rgba(255,255,255,.15); border-radius:4px; cursor:pointer; transition:height .15s; }
#demo-progress .cd-prog-track:hover{ height:6px; }
#demo-progress .cd-prog-track::before{ content:''; position:absolute; left:0; right:0; top:-12px; bottom:-12px; }
#demo-progress .cd-prog-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#22c55e; border-radius:4px; transition:width .1s linear; box-shadow:0 0 6px rgba(34,197,94,.4); pointer-events:none; }
#demo-progress .cd-prog-head{ position:absolute; top:50%; transform:translate(-50%,-50%); left:0%; width:13px; height:13px; border-radius:50%; background:#22c55e; border:2px solid #fff; box-shadow:0 0 5px rgba(34,197,94,.7); pointer-events:none; opacity:0; transition:left .1s linear, opacity .15s; }
#demo-progress .cd-prog-track:hover .cd-prog-head{ opacity:1; }
#demo-progress .cd-prog-tick{ position:absolute; top:-2px; bottom:-2px; width:1px; background:rgba(255,255,255,.2); border-radius:1px; pointer-events:none; }
#demo-progress[data-paused="true"] .cd-prog-fill{ background:#71717a; box-shadow:none; }
#demo-progress[data-paused="true"] .cd-prog-head{ background:#71717a; box-shadow:none; }
#cd-prog-tip{ position:absolute; background:rgba(0,0,0,.85); color:#fff; font-size:10px; font-family:Inter,sans-serif; padding:3px 8px; border-radius:5px; pointer-events:none; white-space:nowrap; display:none; z-index:1000; }


/* ============================================================
   Admin frames 7-11 (generated) + admin sidebar back button
   ============================================================ */
.cd-sb-back{ color:var(--tx3); font-size:.92em; margin:2px 0 4px; }
.cd-sb-back:hover{ color:var(--tx); background:var(--bg3); }
.cd-admin-pill{ display:inline-flex; align-items:center; gap:5px; margin-left:10px; padding:3px 9px; border-radius:999px; background:var(--ac-bg); color:var(--ac); font-size:.78em; font-weight:600; }

/* ---- Frame 7 css ---- */
/* ---- Frame 7: Admin — Model Service & Global Settings ---- */
.cd-admin-pill{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; background:var(--purple-bg); color:var(--purple); border-radius:999px; padding:4px 11px; font-size:.82em; font-weight:600; }
.cd-admin-panel{ flex:1; min-height:0; overflow-y:auto; padding:16px; }
.cd-prov-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cd-prov-head h4, .cd-admin-panel h4{ font-weight:700; color:var(--tx); font-size:1.02em; }
.cd-prov-head-act{ display:flex; gap:8px; }
.cd-prov-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:11px; }
.cd-prov-card{ border:1px solid var(--bd); border-radius:12px; padding:13px; display:flex; flex-direction:column; gap:8px; background:var(--bg); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.cd-prov-card:hover{ border-color:var(--ac-bd); }
.cd-prov-top{ display:flex; align-items:center; gap:7px; }
.cd-prov-nm{ font-weight:700; color:var(--tx); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cd-prov-meta{ display:flex; align-items:center; gap:8px; }
.cd-prov-lat{ display:inline-flex; align-items:center; gap:4px; color:var(--tx3); font-size:.85em; }
.cd-prov-foot{ display:flex; align-items:center; gap:7px; color:var(--tx3); font-size:.88em; }
.cd-prov-foot b{ color:var(--tx); }
.cd-prov-sw{ margin-left:auto; width:34px; height:18px; border-radius:999px; background:var(--bg3); position:relative; cursor:pointer; flex:none; transition:background .2s; }
.cd-prov-sw .dot{ position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--tx4); transition:all .2s; }
.cd-prov-sw[data-on="true"], .cd-prov-sw.on{ background:var(--ac); }
.cd-prov-sw[data-on="true"] .dot, .cd-prov-sw.on .dot{ left:18px; background:#fff; }
.cd-prov-table{ border:1px solid var(--bd); border-radius:10px; overflow:hidden; }
.cd-caps{ display:inline-flex; gap:5px; flex-wrap:wrap; }
.cd-cap{ background:var(--bg3); color:var(--tx3); border-radius:6px; padding:1px 7px; font-size:.8em; }
.cd-tok{ display:flex; align-items:center; gap:8px; min-width:120px; }
.cd-tok-n{ color:var(--tx2); font-variant-numeric:tabular-nums; font-size:.9em; width:42px; }
.cd-progress{ flex:1; min-width:54px; height:6px; background:var(--bg3); border-radius:999px; overflow:hidden; }
.cd-progress .bar{ height:100%; background:var(--ac); border-radius:999px; transition:width .5s ease; }
.cd-mlock{ width:12px; height:12px; color:var(--warn); margin-left:4px; }

/* Global Settings — role cards */
.cd-global-intro{ display:flex; align-items:flex-start; gap:8px; background:var(--ac-bg); border:1px solid var(--ac-bd); border-radius:9px; padding:9px 12px; color:var(--tx2); margin-bottom:13px; line-height:1.5; }
.cd-roles{ display:flex; flex-direction:column; }
.cd-role-card{ border:1px solid var(--bd); border-radius:12px; padding:13px 14px; margin-bottom:11px; background:var(--bg); box-shadow:0 1px 2px rgba(16,24,40,.05); transition:border-color .25s, box-shadow .25s; }
.cd-role-card.focus{ border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-bg); }
.cd-role-head{ display:flex; align-items:center; gap:10px; }
.cd-role-ic{ width:28px; height:28px; flex:none; border-radius:8px; background:var(--purple-bg); color:var(--purple); display:flex; align-items:center; justify-content:center; }
.cd-role-title{ font-weight:700; color:var(--tx); }
.cd-tier{ display:inline-flex; gap:5px; flex-wrap:wrap; margin-left:6px; }
.cd-tier .chip{ background:var(--bg3); border-radius:7px; padding:3px 9px; font-size:.84em; color:var(--tx3); white-space:nowrap; }
.cd-tier .chip.on{ background:var(--ac-bg); color:var(--ac); font-weight:600; }
.cd-probe{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.86em; }
.cd-probe-ok{ color:var(--ok); font-weight:600; }
.cd-role-pick{ display:flex; align-items:center; gap:10px; margin-top:11px; }
.cd-role-prov{ display:inline-flex; align-items:center; gap:6px; color:var(--tx3); font-size:.9em; }
.cd-role-model{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--bd); border-radius:8px; padding:6px 11px; background:var(--bg2); color:var(--tx); font-weight:600; cursor:pointer; }
.cd-role-model:hover{ border-color:var(--ac-bd); background:var(--bg); }
.cd-role-adv{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin-top:13px; padding-top:12px; border-top:1px solid var(--bd2); }
.cd-rfield{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.cd-rfield label{ font-size:.78em; text-transform:uppercase; letter-spacing:.04em; color:var(--tx4); min-width:96px; }
.cd-slider{ flex:1; min-width:70px; height:5px; background:var(--bg3); border-radius:999px; position:relative; }
.cd-slider .fill{ position:absolute; left:0; top:0; height:100%; background:var(--ac); border-radius:999px; transition:width .4s; }
.cd-slider .knob{ position:absolute; top:-4px; width:13px; height:13px; border-radius:50%; background:var(--ac); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:left .4s; transform:translateX(-50%); }
.cd-rval{ color:var(--tx); font-weight:600; font-variant-numeric:tabular-nums; width:34px; text-align:right; }
.cd-rinput{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--bd); border-radius:7px; padding:5px 10px; background:var(--bg2); color:var(--tx); font-variant-numeric:tabular-nums; font-weight:600; }
.cd-rinput.detecting{ color:var(--ac); border-color:var(--ac-bd); animation:pulse 1s ease-in-out infinite; }
.cd-btn-auto{ padding:5px 10px; color:var(--ac); border-color:var(--ac-bd); background:var(--ac-bg); }
.cd-btn-auto:hover{ background:var(--ac-bg); filter:brightness(1.1); }
.cd-btn-auto[data-busy="true"]{ pointer-events:none; opacity:.7; }

/* Processing Features */
.cd-feat-card{ border:1px solid var(--bd); border-radius:12px; padding:14px; margin-bottom:11px; background:var(--bg); }
.cd-feat-h{ display:flex; align-items:center; gap:9px; color:var(--tx); font-weight:700; margin-bottom:6px; }

/* Add-provider connection result */
.cd-conn-res{ display:inline-flex; align-items:center; gap:6px; color:var(--tx3); font-size:.9em; }
.cd-conn-res.ok{ color:var(--ok); font-weight:600; }
.cd-conn-res.ok i{ width:13px; height:13px; }

/* ---- Frame 8 css ---- */
/* ---- Frame 8: Knowledge Bases ---- */
.cd-kb-list{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.cd-kb-toolbar{ flex:none; display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-kb-grid{ flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:13px; padding:16px; align-content:start; }
.cd-kb-card{ border:1px solid var(--bd); border-radius:12px; padding:14px; background:var(--bg); cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:border-color .15s; min-width:0; }
.cd-kb-card:hover{ border-color:var(--ac-bd); background:var(--bg2); }
.cd-kb-cardtop{ display:flex; align-items:flex-start; gap:10px; }
.cd-kb-icon{ width:32px; height:32px; flex:none; border-radius:9px; background:var(--ac-bg); color:var(--ac); display:flex; align-items:center; justify-content:center; }
.cd-kb-name{ color:var(--tx); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-kb-desc{ color:var(--tx3); font-size:.88em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-kb-cardfoot{ display:flex; align-items:center; gap:7px; margin-top:12px; }
.cd-kb-prog{ height:6px; background:var(--bg3); border-radius:999px; overflow:hidden; }
.cd-kb-prog .bar{ height:100%; background:var(--ac); border-radius:999px; transition:width .22s linear; }
.cd-kb-prog.mini{ height:4px; margin-top:5px; max-width:170px; }

/* detail view */
.cd-kb-detail{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.cd-kb-dhead{ flex:none; display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-kb-dhead b{ color:var(--tx); font-weight:700; font-size:1.05em; }
.cd-kb-back{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--bd); border-radius:8px; color:var(--tx2); cursor:pointer; }
.cd-kb-back:hover{ background:var(--bg2); }
.cd-kb-tabwrap{ flex:1; min-height:0; overflow-y:auto; }
.cd-kb-pane{ display:flex; flex-direction:column; }
.cd-kb-tablewrap{ padding:0 14px 14px; }
.cd-kb-warn{ background:var(--danger-bg); border-left:3px solid var(--danger); border-radius:0 6px 6px 0; }
.cd-kb-banrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:0 14px 11px; }
.cd-kb-chip{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px; font-size:.85em; font-weight:600; }
.cd-kb-chip.warn{ background:var(--purple-bg); color:var(--purple); }
.cd-kb-chip.amber{ background:var(--warn-bg); color:var(--warn); }
.cd-kb-failed{ margin-left:auto; color:var(--danger); font-weight:600; font-size:.88em; cursor:pointer; }
.cd-kb-failed:hover{ text-decoration:underline; }
.cd-kb-chunk{ color:var(--tx2); white-space:normal; line-height:1.5; max-width:520px; }

/* sync tab */
.cd-kb-synctop{ display:flex; align-items:center; gap:9px; padding:14px 16px 10px; }
.cd-kb-syncpanel{ margin:0 16px 14px; border:1px solid var(--bd); border-radius:11px; padding:13px; background:var(--bg); }
.cd-kb-syncrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--tx2); }
.cd-kb-syncrow b{ color:var(--tx); font-weight:700; }
.cd-kb-counters{ display:flex; gap:18px; margin-top:11px; color:var(--tx3); font-size:.9em; }
.cd-kb-counters b{ color:var(--tx); font-weight:700; }
.cd-kb-cron{ display:flex; align-items:center; justify-content:space-between; margin:0 16px 14px; border:1px solid var(--bd); border-radius:11px; padding:11px 13px; background:var(--bg); }
.cd-kb-cron-l{ display:flex; align-items:center; gap:9px; color:var(--tx2); font-weight:600; }
.cd-kb-croninput{ font-family:ui-monospace,monospace; background:var(--bg3); border-radius:6px; padding:2px 9px; color:var(--tx); font-weight:600; }
.cd-kb-toggle{ width:38px; height:21px; flex:none; border-radius:999px; background:var(--bg3); position:relative; cursor:pointer; transition:background .2s; }
.cd-kb-toggle .knob{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--tx3); transition:all .2s; }
.cd-kb-toggle[data-on="true"]{ background:var(--ac); }
.cd-kb-toggle[data-on="true"] .knob{ left:19px; background:#fff; }
.cd-kb-tlhead{ padding:2px 16px 6px; font-size:.78em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:600; }
.cd-kb-timeline{ margin:0 16px 16px; border:1px solid var(--bd); border-radius:11px; padding:6px 13px; background:var(--bg); }
.cd-kb-tlrow{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--bd2); }
.cd-kb-tlrow:last-child{ border-bottom:none; }
.cd-kb-tldot{ width:9px; height:9px; flex:none; border-radius:50%; background:var(--ac); }
.cd-kb-tldot.b-green{ background:var(--ok); } .cd-kb-tldot.b-amber{ background:var(--warn); } .cd-kb-tldot.b-purple{ background:var(--purple); } .cd-kb-tldot.b-red{ background:var(--danger); }
.cd-kb-tltx{ color:var(--tx2); }

/* test tab */
.cd-kb-testbar{ display:flex; align-items:center; gap:10px; padding:14px 16px 8px; }
.cd-kb-testmeta{ padding:0 16px 10px; color:var(--ac); font-size:.9em; }

/* create wizard */
.cd-kb-steps{ display:flex; align-items:center; gap:8px; padding:13px 18px 4px; }
.cd-kb-step{ display:inline-flex; align-items:center; gap:7px; color:var(--tx4); font-weight:600; font-size:.92em; }
.cd-kb-step .n{ width:21px; height:21px; flex:none; border-radius:50%; border:1.5px solid var(--bd3); display:inline-flex; align-items:center; justify-content:center; font-size:.85em; }
.cd-kb-step[data-active="true"]{ color:var(--ac); }
.cd-kb-step[data-active="true"] .n{ background:var(--ac); border-color:var(--ac); color:#fff; }
.cd-kb-stepline{ flex:1; height:1px; background:var(--bd); }
.cd-kb-wstep .cd-prop{ margin:10px 0; }
.cd-kb-wstep .cd-ask-in{ margin-top:4px; }
.cd-kb-drop{ border:2px dashed var(--bd3); border-radius:12px; padding:26px; text-align:center; color:var(--tx3); }
.cd-kb-wfoot{ display:flex; justify-content:flex-end; gap:9px; padding:13px 18px; border-top:1px solid var(--bd); }

/* ---- Frame 9 css ---- */
/* ---- Frame 9: Connectors / Sources ---- */
.cd-f9-list{ flex:1; min-height:0; overflow-y:auto; padding:16px; }
.cd-f9-listhead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cd-f9-listhead b{ color:var(--tx); font-weight:700; }
.cd-src-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; }
.cd-src-card{ border:1px solid var(--bd); border-radius:12px; padding:14px; background:var(--bg); display:flex; flex-direction:column; gap:10px; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:border-color .15s, background .15s; }
.cd-src-card:hover{ border-color:var(--ac-bd); background:var(--bg2); }
.cd-src-top{ display:flex; align-items:center; gap:10px; }
.cd-src-ico{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--ac-bg); color:var(--ac); display:flex; align-items:center; justify-content:center; }
.cd-src-ico i{ width:18px; height:18px; }
.cd-src-id{ flex:1; min-width:0; }
.cd-src-id .nm{ color:var(--tx); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-src-id .ty{ font-size:.85em; }
.cd-src-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cd-src-last{ font-size:.86em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-src-foot{ display:flex; gap:8px; }
.cd-src-card[data-status="warning"]{ border-color:rgba(245,158,11,0.4); }
.cd-src-card[data-status="failed"]{ border-color:rgba(239,68,68,0.4); }

.cd-progress{ height:6px; background:var(--bg3); border-radius:999px; overflow:hidden; }
.cd-progress .bar{ height:100%; background:var(--ac); border-radius:999px; transition:width .25s ease; }

.cd-f9-detail{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.cd-f9-crumb{ flex:none; display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-f9-crumb b{ color:var(--tx); font-weight:600; }
.cd-f9-cols{ flex:1; min-height:0; padding:16px; }
.cd-f9-main{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.cd-f9-sec{ background:var(--bg); border:1px solid var(--bd); border-radius:11px; padding:14px 16px; }
.cd-f9-sec h5{ font-size:.78em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:600; margin-bottom:11px; }
.cd-type-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.cd-type-tile{ border:1px solid var(--bd); border-radius:10px; padding:12px 6px; text-align:center; cursor:pointer; color:var(--tx2); display:flex; flex-direction:column; align-items:center; gap:7px; font-size:.9em; font-weight:500; transition:border-color .15s, background .15s; }
.cd-type-tile:hover{ background:var(--bg2); }
.cd-type-tile i{ width:20px; height:20px; color:var(--tx3); }
.cd-type-tile[data-active="true"]{ border-color:var(--ac); background:var(--ac-bg); color:var(--ac); }
.cd-type-tile[data-active="true"] i{ color:var(--ac); }
.cd-form{ display:flex; flex-direction:column; gap:11px; }
.cd-f9-fld{ display:flex; flex-direction:column; gap:5px; }
.cd-f9-fld label{ font-size:.82em; color:var(--tx3); font-weight:600; }
.cd-f9-testrow{ display:flex; align-items:center; gap:12px; margin-top:13px; flex-wrap:wrap; }
.cd-f9-test{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; font-size:.92em; border-left:3px solid var(--bd3); background:var(--bg2); color:var(--tx2); }
.cd-f9-test b{ color:var(--tx); font-weight:700; }
.cd-f9-test.ok{ background:var(--ok-bg); border-left-color:var(--ok); color:var(--ok); }
.cd-f9-test.ok b{ color:var(--ok); }
.cd-f9-test.ok i{ color:var(--ok); }
.cd-f9-test.fail{ background:var(--danger-bg); border-left-color:var(--danger); color:var(--danger); }
.cd-f9-test.fail b{ color:var(--danger); }
.cd-f9-test.fail i{ color:var(--danger); }
.cd-f9-test.testing{ color:var(--tx3); }
.cd-f9-freq{ display:flex; gap:7px; flex-wrap:wrap; }
.cd-f9-freq span{ padding:6px 12px; border:1px solid var(--bd); border-radius:999px; color:var(--tx2); cursor:pointer; font-weight:500; font-size:.92em; }
.cd-f9-freq span:hover{ background:var(--bg2); }
.cd-f9-freq span[data-active="true"]{ background:var(--ac-bg); border-color:var(--ac); color:var(--ac); font-weight:600; }
.cd-f9-histtable td, .cd-f9-histtable th{ padding:7px 10px; }
.cd-f9-histtable tbody tr{ cursor:default; }
.cd-f9-savebar{ display:flex; justify-content:flex-end; gap:9px; padding-top:2px; }

/* ---- Frame 10 css ---- */

/* ===== Frame 10: Workflow Builder + Assistant ===== */
.cd-f10-modes{ display:inline-flex; gap:4px; margin-left:6px; }
.cd-f10-modes .it{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:7px; color:var(--tx3); cursor:pointer; font-weight:600; font-size:.9em; }
.cd-f10-modes .it:hover{ background:var(--bg3); }
.cd-f10-modes .it[data-active="true"]{ background:var(--ac-bg); color:var(--ac); }

.cd-f10-wf{ flex:1; min-height:0; display:flex; flex-direction:column; }
.cd-f10-build{ flex:1; min-height:0; display:flex; }

/* palette */
.cd-f10-palette{ width:172px; flex:none; border-right:1px solid var(--bd); padding:11px; overflow-y:auto; background:var(--bg); }
.cd-f10-pal-title{ font-weight:700; color:var(--tx); font-size:.95em; margin-bottom:9px; }
.cd-f10-pal-grp{ font-size:.74em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:600; margin:11px 0 6px; }
.cd-f10-pal-node{ display:flex; align-items:center; gap:7px; padding:6px 8px; border:1px solid var(--bd); border-radius:8px; margin-bottom:6px; cursor:grab; background:var(--bg2); }
.cd-f10-pal-node:hover{ border-color:var(--ac-bd); background:var(--bg3); }
.cd-f10-pal-node .nm{ color:var(--tx2); font-size:.9em; font-weight:500; }

/* canvas */
.cd-f10-canvas-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cd-f10-canvas-head{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:8px 13px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-f10-canvas-head .bc{ display:flex; align-items:center; gap:6px; color:var(--tx2); font-weight:600; font-size:.92em; }
.cd-f10-zoom{ display:inline-flex; align-items:center; gap:7px; color:var(--tx3); font-size:.85em; }
.cd-f10-canvas{ position:relative; flex:1; min-height:0; overflow:auto;
  background-color:var(--bg2);
  background-image:radial-gradient(circle, var(--bd) 1px, transparent 1px);
  background-size:18px 18px; }
.cd-f10-edges{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }
.cd-f10-edge{ stroke:var(--ac); stroke-width:1.6; fill:none; opacity:.55; }

.cd-f10-node{ position:absolute; width:140px; box-sizing:border-box; border:1px solid var(--bd); border-radius:10px; background:var(--bg); padding:8px 10px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:border-color .15s, box-shadow .15s; }
.cd-f10-node:hover{ border-color:var(--ac-bd); }
.cd-f10-node[data-active="true"]{ border-color:var(--ac); box-shadow:0 0 0 2px var(--ac-bg); }
.cd-f10-node .hd{ display:flex; align-items:center; gap:6px; }
.cd-f10-node .hd .t{ color:var(--tx); font-weight:600; font-size:.92em; }
.cd-f10-node .st{ display:flex; align-items:center; gap:5px; margin-top:5px; }
.cd-f10-node .st .lt{ color:var(--tx4); font-size:.78em; }
.cd-f10-node .io{ width:9px; height:9px; border-radius:50%; background:var(--bd3); position:absolute; top:50%; transform:translateY(-50%); border:1.5px solid var(--bg); }
.cd-f10-node .io.in{ left:-5px; }
.cd-f10-node .io.out{ right:-5px; }

/* config panel */
.cd-f10-cfg{ width:240px; flex:none; border-left:1px solid var(--bd); background:var(--bg); overflow-y:auto; padding:13px; }
.cd-f10-cfg-h{ display:flex; align-items:center; gap:9px; padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--bd2); }
.cd-f10-cfg-h .ti{ color:var(--tx); font-weight:700; }
.cd-f10-prop{ display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--bd2); font-size:.92em; }
.cd-f10-prop .k{ width:84px; flex:none; color:var(--tx4); }
.cd-f10-prop .v{ color:var(--tx2); min-width:0; flex:1; }
.cd-f10-field{ margin-top:11px; }
.cd-f10-field .lbl{ font-size:.85em; color:var(--tx4); display:flex; justify-content:space-between; }
.cd-f10-field .lbl b{ color:var(--tx2); }
.cd-f10-slider{ height:5px; background:var(--bg3); border-radius:999px; position:relative; margin-top:7px; }
.cd-f10-slider .knob{ position:absolute; top:-4px; width:13px; height:13px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 3px var(--ac-bg); }
.cd-f10-modelpick{ display:inline-flex; align-items:center; gap:5px; background:var(--bg3); border-radius:7px; padding:3px 8px; cursor:pointer; color:var(--tx2); font-weight:600; font-size:.95em; }
.cd-f10-modelpick:hover{ background:var(--ac-bg); color:var(--ac); }
.cd-f10-tok{ background:var(--purple-bg); color:var(--purple); border-radius:5px; padding:0 4px; font-family:ui-monospace,monospace; font-size:.92em; }

/* test panel */
.cd-f10-testpanel{ flex:none; border-top:1px solid var(--bd); background:var(--bg); }
.cd-f10-test-head{ display:flex; align-items:center; gap:11px; padding:9px 13px; cursor:pointer; }
.cd-f10-test-head > span:first-child{ display:flex; align-items:center; gap:6px; color:var(--tx); font-weight:700; font-size:.92em; }
.cd-f10-test-inputs{ display:flex; gap:7px; flex-wrap:wrap; }
.cd-f10-pill{ background:var(--bg3); border-radius:7px; padding:3px 9px; font-size:.82em; color:var(--tx3); }
.cd-f10-pill b{ color:var(--tx2); }
.cd-f10-runtree{ display:none; padding:4px 13px 11px; }
.cd-f10-testpanel[data-open="true"] .cd-f10-runtree{ display:block; }
.cd-f10-runtree .row{ display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--bd2); }
.cd-f10-runtree .row .nm{ display:flex; align-items:center; gap:8px; color:var(--tx2); font-size:.92em; }

/* assistant mode */
.cd-f10-as{ flex:1; min-height:0; display:flex; }
.cd-f10-as-cfg{ width:300px; flex:none; border-right:1px solid var(--bd); background:var(--bg); overflow-y:auto; padding:13px; }
.cd-f10-as-sec{ margin-bottom:15px; }
.cd-f10-as-sec .h{ display:flex; align-items:center; gap:7px; color:var(--tx); font-weight:700; font-size:.92em; margin-bottom:7px; }
.cd-f10-listrow{ display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--bd); border-radius:8px; margin-bottom:6px; background:var(--bg2); }
.cd-f10-listrow .nm{ flex:1; min-width:0; color:var(--tx2); font-size:.9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-f10-as-chat{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg2); }
.cd-f10-chat-head{ flex:none; display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--bd); color:var(--tx); font-weight:700; font-size:.95em; }
.cd-f10-chat-scroll{ flex:1; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.cd-f10-chat-empty{ margin:auto; text-align:center; color:var(--tx4); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.9em; }
.cd-f10-msg{ max-width:84%; padding:9px 13px; border-radius:12px; font-size:.92em; line-height:1.5; }
.cd-f10-msg-u{ align-self:flex-end; background:var(--ac-bg); color:var(--tx); border:1px solid var(--ac-bd); }
.cd-f10-msg-a{ align-self:flex-start; background:var(--bg); color:var(--tx2); border:1px solid var(--bd); }
.cd-f10-chat-cite{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:4px 9px; background:var(--bg2); border:1px solid var(--bd); border-radius:999px; font-size:.85em; color:var(--tx3); }
.cd-f10-chat-in{ flex:none; display:flex; align-items:center; gap:8px; margin:0 14px 14px; padding:9px 13px; border:1px solid var(--bd); border-radius:11px; background:var(--bg); color:var(--tx4); cursor:pointer; }
.cd-f10-chat-in > span:first-of-type{ flex:1; }
.cd-f10-send{ width:26px; height:26px; flex:none; border-radius:7px; background:var(--ac); color:#fff; display:flex; align-items:center; justify-content:center; }

/* menus / modal */
.cd-f10-modelmenu .it .cd-dot, .cd-f10-kbpick .it .cd-dot{ width:7px; height:7px; }
.cd-f10-pub-ok{ display:flex; align-items:center; gap:8px; color:var(--tx); font-weight:600; }


/* ---- Frame 11 css ---- */
/* ---- Frame 11: Admin Dashboard + Users & SSO ---- */
.cd-f11-panel{ flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.cd-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 14px 4px; flex:none; }
.cd-stat{ border:1px solid var(--bd); border-radius:12px; padding:13px 14px; background:var(--bg); cursor:pointer; transition:border-color .15s, background .15s; min-width:0; }
.cd-stat:hover{ border-color:var(--ac-bd); background:var(--bg); }
.cd-stat-h{ display:flex; align-items:center; gap:7px; font-size:.86em; }
.cd-stat .big{ font-size:1.7em; font-weight:700; color:var(--tx); line-height:1.2; margin-top:4px; }
.cd-stat-sub{ font-size:.82em; color:var(--tx3); }
.cd-f11-cols{ display:flex; gap:12px; padding:12px 14px 16px; flex:1; min-height:0; overflow-y:auto; align-items:flex-start; }
.cd-f11-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.cd-f11-block{ padding:12px 13px; }
.cd-f11-bh{ display:flex; align-items:center; gap:7px; font-weight:600; color:var(--tx); font-size:.96em; margin-bottom:9px; flex-wrap:wrap; }
.cd-f11-mini td{ padding:7px 6px; border-bottom:1px solid var(--bd2); }
.cd-f11-mini tr:hover td{ background:transparent; }
.cd-f11-legend{ margin-left:auto; display:flex; gap:11px; font-size:.78em; font-weight:500; color:var(--tx3); }
.cd-f11-legend .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:4px; }
.cd-chart{ height:120px; padding:4px 2px 0; }
.cd-f11-svg{ display:block; }
.cd-f11-area{ opacity:0; transition:opacity .9s ease .25s; }
.cd-f11-line, .cd-f11-line2{ stroke-dasharray:340; stroke-dashoffset:340; }
.cd-f11-drawn .cd-f11-area{ opacity:1; }
.cd-f11-drawn .cd-f11-line{ animation:cdF11Draw 1s ease forwards; }
.cd-f11-drawn .cd-f11-line2{ animation:cdF11Draw 1.2s ease .15s forwards; }
@keyframes cdF11Draw{ to{ stroke-dashoffset:0; } }
.cd-timeline{ padding:2px 0; }
.cd-tl-row{ display:flex; gap:10px; padding:7px 2px; border-bottom:1px solid var(--bd2); }
.cd-tl-row:last-child{ border-bottom:none; }
.cd-tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--ac); margin-top:5px; flex:none; }
.cd-tl-body{ min-width:0; flex:1; }
.cd-tl-txt{ color:var(--tx2); line-height:1.4; }
.cd-tl-txt b{ color:var(--tx); font-weight:600; }
.cd-tl-time{ font-size:.78em; color:var(--tx4); margin-top:1px; }
.cd-f11-top{ display:flex; align-items:center; gap:9px; padding:6px 2px; border-bottom:1px solid var(--bd2); }
.cd-f11-top:last-child{ border-bottom:none; }
.cd-f11-top .nm{ flex:1; min-width:0; color:var(--tx2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-f11-top .ct{ color:var(--tx); font-weight:700; }
.cd-spark{ height:18px; flex:none; opacity:.85; }
.cd-f11-quick{ display:flex; gap:8px; flex-wrap:wrap; }
.cd-f11-toolbar{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--bd); flex:none; }
.cd-f11-sec-t{ display:flex; align-items:center; gap:7px; font-weight:600; color:var(--tx); }
.cd-check{ width:16px; height:16px; border:1.5px solid var(--bd3); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; vertical-align:middle; transition:background .15s, border-color .15s; }
.cd-check[data-checked="true"]{ background:var(--ac); border-color:var(--ac); }
.cd-check[data-checked="true"]::after{ content:"✓"; color:#fff; font-size:.74em; font-weight:700; line-height:1; }
.cd-f11-reason{ font-family:ui-monospace,monospace; font-size:.82em; color:var(--tx3); background:var(--bg3); border-radius:5px; padding:2px 7px; }
.cd-f11-fade{ opacity:0; transition:opacity .25s ease; }
.cd-f11-alias{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--bd); border-radius:9px; margin-bottom:7px; background:var(--bg2); }
.cd-f11-alias-m{ flex:1; min-width:0; }
.cd-f11-alias-m .idp{ color:var(--tx); font-weight:600; font-size:.92em; }
.cd-f11-alias-m .al{ font-size:.82em; }
#hero-screen-area .cd-stat-grid{ grid-template-columns:repeat(2,1fr); }
#hero-screen-area .cd-f11-cols{ flex-direction:column; }/* ===== Existing-frame enhancements css ===== */

/* ---- frame 1 enh css ---- */

/* ---- Frame 1 deepening: welcome, KB picker, pending docs, citations, thinking, error, recent chats ---- */
#demo-screen .cd-chat-input-wrap{ flex:none; }#demo-screen .cd-welcome, .cd-app .cd-welcome{ padding:30px 18px 12px; }#demo-screen .cd-welcome-greet, .cd-app .cd-welcome-greet{ font-size:1.7em; font-weight:700; background:linear-gradient(90deg,var(--ac),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:0; }#demo-screen .cd-welcome-sub, .cd-app .cd-welcome-sub{ color:var(--tx3); margin-top:6px; }#demo-screen .cd-welcome-cards, .cd-app .cd-welcome-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }#demo-screen .cd-welcome-card, .cd-app .cd-welcome-card{ padding:14px; display:flex; align-items:center; gap:9px; cursor:pointer; color:var(--tx2); font-weight:600; transition:border-color .2s,background .2s; }#demo-screen .cd-welcome-card i, .cd-app .cd-welcome-card i{ width:16px; height:16px; color:var(--ac); flex:none; }#demo-screen .cd-welcome-card:hover, .cd-app .cd-welcome-card:hover{ border-color:var(--ac-bd); background:var(--bg2); }#demo-screen .cd-kb-pick, .cd-app .cd-kb-pick{ display:inline-flex; align-items:center; gap:5px; background:var(--bg3); color:var(--tx2); border-radius:999px; padding:6px 11px; font-weight:600; font-size:.9em; cursor:pointer; white-space:nowrap; }#demo-screen .cd-kb-pick:hover, .cd-app .cd-kb-pick:hover{ background:var(--bd); }#demo-screen .cd-pending, .cd-app .cd-pending{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 14px 0; }#demo-screen .cd-pending > i, .cd-app .cd-pending > i{ color:var(--ac); }#demo-screen .cd-pchip, .cd-app .cd-pchip{ display:inline-flex; align-items:center; gap:6px; background:var(--ac-bg); color:var(--ac); border:1px solid var(--ac-bd); border-radius:999px; padding:3px 10px; font-size:.86em; font-weight:600; }#demo-screen .cd-pchip .x, .cd-app .cd-pchip .x{ cursor:pointer; color:var(--ac); opacity:.75; }#demo-screen .cd-pchip .x:hover, .cd-app .cd-pchip .x:hover{ opacity:1; }#demo-screen .cd-clear-all, .cd-app .cd-clear-all{ font-size:.85em; color:var(--tx4); cursor:pointer; }#demo-screen .cd-clear-all:hover, .cd-app .cd-clear-all:hover{ color:var(--ac); }#demo-screen .cd-cites, .cd-app .cd-cites{ display:flex; flex-direction:column; gap:6px; align-self:flex-start; }#demo-screen .cd-cites .cd-cite, .cd-app .cd-cites .cd-cite{ gap:6px; }#demo-screen .cd-cite-num, .cd-app .cd-cite-num{ background:var(--ac); color:#fff; border-radius:999px; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; font-size:.78em; font-weight:700; flex:none; }#demo-screen .cd-cites .cd-cite .nm, .cd-app .cd-cites .cd-cite .nm{ color:var(--tx2); }#demo-screen .cd-msg-actions, .cd-app .cd-msg-actions{ display:flex; gap:4px; align-self:flex-start; margin:-4px 0 2px; opacity:.55; transition:opacity .2s; }#demo-screen .cd-msg-actions:hover, .cd-app .cd-msg-actions:hover{ opacity:1; }#demo-screen .cd-msg-actions span, .cd-app .cd-msg-actions span{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; color:var(--tx3); cursor:pointer; }#demo-screen .cd-msg-actions span:hover, .cd-app .cd-msg-actions span:hover{ background:var(--bg3); color:var(--ac); }#demo-screen .cd-msg-actions i, .cd-app .cd-msg-actions i{ width:14px; height:14px; }#demo-screen .cd-think-panel, .cd-app .cd-think-panel{ border:1px solid var(--bd); border-radius:9px; background:var(--bg2); padding:6px 11px; color:var(--tx3); align-self:stretch; }#demo-screen .cd-think-panel summary, .cd-app .cd-think-panel summary{ cursor:pointer; display:flex; align-items:center; gap:7px; font-weight:600; color:var(--purple); list-style:none; }#demo-screen .cd-think-panel summary::-webkit-details-marker, .cd-app .cd-think-panel summary::-webkit-details-marker{ display:none; }#demo-screen .cd-think-panel summary i, .cd-app .cd-think-panel summary i{ width:14px; height:14px; }#demo-screen .cd-think-panel summary .chev, .cd-app .cd-think-panel summary .chev{ margin-left:auto; transition:transform .25s; }#demo-screen .cd-think-panel[open] summary .chev, .cd-app .cd-think-panel[open] summary .chev{ transform:rotate(180deg); }#demo-screen .cd-think-body, .cd-app .cd-think-body{ margin-top:7px; line-height:1.6; font-size:.95em; }#demo-screen .cd-err, .cd-app .cd-err{ border-left:3px solid var(--danger); background:var(--danger-bg); color:var(--danger); display:flex; align-items:center; gap:9px; padding:11px 13px; align-self:stretch; font-weight:600; border-radius:0 8px 8px 0; }#demo-screen .cd-err .cd-btn, .cd-app .cd-err .cd-btn{ padding:4px 11px; color:var(--danger); border-color:var(--danger); background:transparent; }#demo-screen .cd-err .cd-btn:hover, .cd-app .cd-err .cd-btn:hover{ background:var(--danger-bg); }#demo-screen .cd-sb-recent, .cd-app .cd-sb-recent{ display:flex; flex-direction:column; gap:1px; max-height:148px; overflow-y:auto; }#demo-screen .cd-recent-item, .cd-app .cd-recent-item{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 9px; border-radius:7px; color:var(--tx3); cursor:pointer; font-size:.92em; }#demo-screen .cd-recent-item .t, .cd-app .cd-recent-item .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }#demo-screen .cd-recent-item:hover, .cd-app .cd-recent-item:hover{ background:var(--bg3); color:var(--tx2); }#demo-screen .cd-recent-item[data-active="true"], .cd-app .cd-recent-item[data-active="true"]{ background:var(--ac-bg); color:var(--ac); font-weight:600; }#demo-screen .cd-recent-item .x, .cd-app .cd-recent-item .x{ opacity:0; flex:none; display:inline-flex; color:var(--tx4); }#demo-screen .cd-recent-item:hover .x, .cd-app .cd-recent-item:hover .x{ opacity:1; }#demo-screen .cd-recent-item .x:hover, .cd-app .cd-recent-item .x:hover{ color:var(--danger); }#demo-screen .cd-recent-empty, .cd-app .cd-recent-empty{ padding:6px 9px; font-size:.88em; }#demo-screen .cd-sb-recent + .cd-clear-all, .cd-app .cd-sb-recent + .cd-clear-all{ padding:6px 9px; font-size:.82em; }


/* ---- frame 3 enh css ---- */
/* ===== Frame 3 (My Library) deepening ===== */
.cd-f3-libtools{ flex:none; display:flex; align-items:center; gap:9px; padding:9px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-f3-viewtoggle{ display:inline-flex; border:1px solid var(--bd); border-radius:8px; overflow:hidden; }
.cd-f3-viewtoggle span{ display:inline-flex; align-items:center; padding:6px 10px; color:var(--tx3); cursor:pointer; }
.cd-f3-viewtoggle span:hover{ background:var(--bg2); }
.cd-f3-viewtoggle span[data-active="true"]{ background:var(--ac-bg); color:var(--ac); }
.cd-f3-viewtoggle span i{ width:15px; height:15px; }
.cd-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; padding:14px; }
.cd-grid-tile{ padding:14px 10px; text-align:center; border:1px solid var(--bd); border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; }
.cd-grid-tile:hover{ background:var(--bg2); border-color:var(--ac-bd); }
.cd-grid-tile i{ width:30px; height:30px; }
.cd-grid-tile span{ font-size:.82em; color:var(--tx2); word-break:break-word; line-height:1.25; }
.cd-uprow{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--bd2); }
.cd-uprow .cd-fname{ flex:1; min-width:0; }
.cd-uprow .cd-progress{ flex:none; width:120px; }
.cd-uprow .f3-uppct{ width:38px; text-align:right; font-size:.84em; }
.cd-f3-proc{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:9px 0; padding:8px 10px; border:1px solid var(--bd); border-radius:8px; background:var(--bg2); }
.cd-f3-proc .cd-progress{ flex:1; min-width:60px; }
.cd-f3-proc .cd-badge{ flex:none; }
.cd-f3-proc .cd-btn{ flex:none; padding:3px 9px; font-size:.84em; }
.cd-f3-procmeta{ flex-basis:100%; font-size:.8em; color:var(--tx3); }
.cd-f3-auditrow{ display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--bd2); }
.cd-f3-verrow{ display:flex; align-items:center; gap:6px; padding:5px 0; }
.cd-f3-verup{ margin-top:8px; }
.cd-doctype-pick{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--bd); border-radius:7px; padding:5px 10px; background:var(--bg2); color:var(--tx); cursor:pointer; font-weight:600; }
.cd-doctype-pick:hover{ border-color:var(--ac-bd); }
.cd-dublin-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px 12px; margin-top:8px; }
.cd-check{ width:15px; height:15px; border:1.5px solid var(--bd3); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.cd-check[data-checked="true"]{ background:var(--ac); border-color:var(--ac); }
.cd-check[data-checked="true"]::after{ content:"✓"; color:#fff; font-size:.7em; line-height:1; }
.cd-f3-bulk{ position:absolute; bottom:60px; left:50%; transform:translateX(-50%); display:none; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--bd); border-radius:999px; padding:7px 14px; box-shadow:0 10px 30px -8px rgba(0,0,0,.45); z-index:35; color:var(--tx2); font-weight:600; }
.cd-f3-bulk .cd-btn{ padding:4px 11px; }
.cd-f3-bulk .cd-clear-all{ color:var(--tx3); cursor:pointer; font-weight:500; }
.cd-f3-bulk .cd-clear-all:hover{ color:var(--tx); }
.cd-jobs{ position:absolute; top:0; right:0; bottom:0; width:300px; background:var(--bg); border-left:1px solid var(--bd); box-shadow:-12px 0 30px -10px rgba(0,0,0,.4); z-index:55; padding:14px; overflow-y:auto; animation:f3JobSlide .28s ease; }
@keyframes f3JobSlide{ from{ transform:translateX(40px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.cd-jobs h4{ font-weight:700; color:var(--tx); margin-bottom:10px; }
.cd-f3-jobcard{ border:1px solid var(--bd); border-radius:10px; padding:12px; background:var(--bg2); }
.cd-f3-jobtop{ display:flex; align-items:center; justify-content:space-between; }
.cd-f3-jobtop b{ color:var(--tx); }
.cd-f3-sharelink{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 10px; border:1px solid var(--ac-bd); border-radius:8px; background:var(--ac-bg); }
.cd-f3-sharelink code{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ac); font-size:.86em; }
.cd-anno-hl{ position:absolute; height:18px; border-radius:2px; opacity:.55; pointer-events:none; }
.cd-stamp{ position:absolute; top:12px; right:18px; border:3px solid var(--danger); color:var(--danger); font-weight:800; letter-spacing:.08em; padding:4px 12px; border-radius:6px; transform:rotate(-12deg); font-size:.9em; opacity:.85; pointer-events:none; }
.cd-swatch-row{ display:none; align-items:center; gap:6px; }
.cd-swatch{ width:18px; height:18px; border-radius:4px; cursor:pointer; border:2px solid transparent; }
.cd-swatch[data-active="true"]{ border-color:var(--tx); }
.cd-f3-stampwrap{ position:relative; }
.cd-f3-stampmenu{ position:absolute; top:30px; left:0; z-index:40; min-width:150px; background:var(--bg); border:1px solid var(--bd); border-radius:9px; box-shadow:0 12px 30px -6px rgba(16,24,40,.25); padding:5px; display:none; }
.cd-f3-stampmenu .it{ padding:6px 10px; border-radius:6px; color:var(--tx2); cursor:pointer; font-size:.9em; }
.cd-f3-stampmenu .it:hover{ background:var(--bg2); }
.cd-f3-recip{ display:none; align-items:center; gap:6px; font-size:.84em; color:var(--tx3); border:1px solid var(--bd); border-radius:7px; padding:4px 9px; background:var(--bg2); }
.cd-f3-prevsearch{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--bd); border-radius:8px; padding:5px 10px; background:var(--bg2); color:var(--tx3); cursor:pointer; }
.cd-f3-prevsearch i{ width:14px; height:14px; }
.cd-f3-prevnav{ display:inline-flex; align-items:center; gap:6px; color:var(--tx3); }
.cd-f3-prevnav i{ width:14px; height:14px; cursor:pointer; }
.cd-f3-prevnav i:hover{ color:var(--tx); }

/* ---- frame 4 enh css ---- */

/* ===== Frame 4 deepening ===== */
.cd-f4-tools{ display:flex; align-items:center; gap:8px; padding:8px 16px; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-f4-tools .grow{ flex:1; }
.cd-f4-vtoggle{ display:inline-flex; border:1px solid var(--bd); border-radius:8px; overflow:hidden; }
.cd-f4-vtoggle span{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; color:var(--tx4); cursor:pointer; }
.cd-f4-vtoggle span:hover{ background:var(--bg3); color:var(--tx2); }
.cd-f4-vtoggle span[data-active="true"]{ background:var(--ac-bg); color:var(--ac); }
.cd-rail-actions{ display:flex; gap:5px; padding:2px 4px 0; }
.cd-rail-actions span{ width:26px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--bd); border-radius:6px; color:var(--tx4); cursor:pointer; }
.cd-rail-actions span:hover{ background:var(--bg3); color:var(--tx2); }
.cd-f4-grid{ display:none; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; padding:14px; }
.cd-f4-tile{ padding:14px 10px; text-align:center; border:1px solid var(--bd); border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--tx2); }
.cd-f4-tile:hover{ background:var(--bg2); border-color:var(--ac-bd); }
.cd-f4-tile.sel{ background:var(--ac-bg); border-color:var(--ac-bd); }
.cd-f4-tile i{ width:28px; height:28px; }
.cd-f4-tile span{ font-size:.86em; word-break:break-word; line-height:1.3; }
.cd-table tr.sel td{ background:var(--ac-bg); }
.cd-f4-skel{ display:inline-block; height:10px; border-radius:5px; background:var(--bg3); animation:pulse 1.1s ease-in-out infinite; }
.cd-f4-empty{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:48px 16px; color:var(--tx4); }
.cd-f4-empty i{ width:34px; height:34px; }
.cd-f4-error{ display:none; align-items:center; gap:11px; margin:16px; padding:13px 15px; background:var(--danger-bg); border-left:3px solid var(--danger); border-radius:0 8px 8px 0; color:var(--danger); }
.cd-f4-error .cd-btn{ margin-left:auto; }
.cd-f4-detail{ width:320px; flex:none; border-left:1px solid var(--bd); background:var(--bg); overflow-y:auto; padding:13px; }
.cd-f4-detail h4{ font-weight:700; color:var(--tx); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cd-f4-dname{ display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
.cd-f4-dname i{ flex:none; }
.cd-f4-section{ font-size:.74em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:600; margin:14px 0 4px; display:flex; align-items:center; gap:6px; }
.cd-f4-cnt{ background:var(--bg3); border-radius:999px; padding:0 7px; font-size:.86em; color:var(--tx3); }
.cd-f4-jsonbtn{ display:none; margin-top:10px; font-family:ui-monospace,monospace; font-size:.84em; color:var(--ac); cursor:pointer; padding:5px 9px; border:1px solid var(--ac-bd); border-radius:7px; background:var(--ac-bg); }
.cd-f4-jsonbody{ display:none; margin-top:8px; padding:11px; background:var(--bg2); border:1px solid var(--bd); border-radius:8px; font-family:ui-monospace,monospace; font-size:.78em; line-height:1.55; color:var(--tx3); white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; }
.cd-f4-auth{ display:none; flex-direction:column; align-items:center; gap:11px; padding:26px 16px; text-align:center; border:1px dashed var(--bd3); border-radius:12px; color:var(--tx3); }
.cd-f4-auth .lk{ width:34px; height:34px; color:var(--warn); }
.cd-f4-ms{ display:inline-flex; align-items:center; gap:8px; background:var(--ac); color:#fff; border-radius:8px; padding:8px 14px; font-weight:600; cursor:pointer; }
.cd-f4-ms:hover{ filter:brightness(1.06); }
.cd-f4-prevdoc{ display:none; }
.cd-f4-dropzone{ border:2px dashed var(--bd3); border-radius:12px; padding:26px; text-align:center; color:var(--tx3); display:flex; flex-direction:column; align-items:center; gap:9px; }
.cd-f4-dropzone i{ width:30px; height:30px; color:var(--ac); }
.cd-f4-uprow{ display:flex; align-items:center; gap:10px; margin-top:10px; color:var(--tx2); }
.cd-f4-uprow .nm{ flex:none; width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9em; }
.cd-f4-cmp-banner{ display:none; align-items:center; gap:10px; margin:10px 16px 0; padding:9px 13px; background:var(--ac-bg); border:1px solid var(--ac-bd); border-radius:9px; color:var(--tx2); }
.cd-f4-cmp-banner i{ color:var(--ac); }
.cd-f4-cmp-banner .cd-btn{ margin-left:auto; }
.cd-f4-field{ margin-bottom:11px; }
.cd-f4-field label{ display:block; font-size:.78em; text-transform:uppercase; letter-spacing:.04em; color:var(--tx4); margin-bottom:4px; }


/* ---- frame 5 enh css ---- */

/* ===== Frame 5 deepening: view tabs, user wall, chat drawer, filters, auditor mgmt ===== */
.cd-badge.b-cyan{ background:rgba(6,182,212,.14); color:#0891b2; }
.cd-badge.b-gold{ background:rgba(202,138,4,.14); color:#a16207; }
.cd-badge.b-geek{ background:rgba(37,99,235,.12); color:#1d4ed8; }
.cd-f5-vtabs{ flex:none; display:flex; gap:4px; padding:8px 16px 0; border-bottom:1px solid var(--bd); background:var(--bg); }
.cd-f5-vtab{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:8px 8px 0 0; color:var(--tx3); cursor:pointer; font-weight:600; border-bottom:2px solid transparent; }
.cd-f5-vtab[data-active="true"]{ color:var(--ac); border-bottom-color:var(--ac); }
.cd-f5-wallhead{ flex:none; display:flex; align-items:center; gap:12px; padding:12px 16px 4px; }
.cd-f5-wallhead .cd-search-in{ flex:1; }
.cd-userwall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; padding:14px; overflow-y:auto; }
.cd-usercard{ border:1px solid var(--bd); border-radius:12px; padding:14px; cursor:pointer; background:var(--bg); transition:border-color .15s,transform .15s; }
.cd-usercard:hover{ border-color:var(--ac-bd); transform:translateY(-2px); box-shadow:0 6px 16px -8px rgba(16,24,40,.18); }
.cd-usercard .hd{ display:flex; align-items:center; gap:9px; }
.cd-usercard .hd b{ color:var(--tx); display:block; }
.cd-usercard .hd .cd-muted{ font-size:.82em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-usercard .hd .ago{ font-size:.78em; color:var(--tx4); white-space:nowrap; }
.cd-usercard .stats{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:11px; color:var(--tx3); font-size:.84em; }
.cd-usercard .stats .st{ display:inline-flex; align-items:center; gap:5px; }
.cd-usercard .stats .st i{ width:13px; height:13px; color:var(--tx4); }
.cd-usercard .stats .st b{ color:var(--tx2); }
.cd-f5-prompt{ cursor:pointer; }
tr[data-act="f5-open-chat"]{ cursor:pointer; }
tr[data-act="f5-open-chat"]:hover .cd-f5-prompt{ color:var(--ac); text-decoration:underline; }
.cd-f5-actfilter{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--bd); border-radius:8px; padding:6px 10px; font-weight:600; color:var(--tx2); cursor:pointer; background:var(--bg); }
.cd-f5-actfilter:hover{ background:var(--bg2); }
.cd-f5-menu{ min-width:180px; }
.cd-f5-menu .it .cd-muted{ font-size:.86em; margin-left:6px; }
.cd-f5-confirm{ flex:none; display:flex; align-items:center; gap:10px; margin:10px 16px; padding:10px 13px; border:1px solid var(--danger); background:var(--danger-bg); border-radius:9px; color:var(--tx2); font-weight:500; }
.cd-f5-grant{ display:flex; align-items:center; gap:10px; }
.cd-chatdrawer{ position:absolute; top:0; right:0; bottom:0; width:55%; max-width:560px; background:var(--bg); border-left:1px solid var(--bd); box-shadow:-12px 0 30px -16px rgba(0,0,0,.25); z-index:70; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; }
.cd-chatdrawer[data-open="true"]{ transform:translateX(0); }
.cd-chatdrawer-head{ flex:none; display:flex; align-items:flex-start; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--bd); }
.cd-chatdrawer-head h4{ font-weight:700; color:var(--tx); }
.cd-chatdrawer .cd-tabs{ flex:none; }
.cd-chatdrawer-body{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px; }
.cd-f5-msg{ display:flex; gap:9px; margin-bottom:12px; align-items:flex-start; }
.cd-f5-msg .av{ width:26px; height:26px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72em; font-weight:700; color:#fff; }
.cd-f5-msg.u .av{ background:var(--purple); }
.cd-f5-msg.ai .av{ background:var(--ok); }
.cd-f5-msg .bub{ border:1px solid var(--bd); border-radius:10px; padding:8px 11px; color:var(--tx2); background:var(--bg2); line-height:1.5; }
.cd-f5-msg.u .bub{ background:var(--purple-bg); border-color:transparent; }
.cd-f5-drsec{ border:1px solid var(--bd); border-radius:10px; padding:11px; margin-bottom:12px; }
.cd-f5-drsec.purple{ border-left:3px solid var(--purple); }
.cd-f5-drsec.green{ border-left:3px solid var(--ok); }
.cd-f5-drsec h6{ display:flex; align-items:center; gap:6px; font-size:.82em; text-transform:uppercase; letter-spacing:.04em; color:var(--tx4); margin-bottom:9px; font-weight:700; }
.cd-f5-drsec.purple h6{ color:var(--purple); }
.cd-f5-drsec.green h6{ color:var(--ok); }
.cd-f5-ragdoc, .cd-f5-actdoc{ display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--bd2); font-size:.9em; flex-wrap:wrap; }
.cd-f5-ragdoc:first-of-type, .cd-f5-actdoc:first-of-type{ border-top:none; }
.cd-f5-ragdoc i{ width:15px; height:15px; flex:none; }
.cd-f5-ragdoc .nm, .cd-f5-actdoc .nm{ color:var(--tx); font-weight:600; }
.cd-f5-ragdoc .score{ font-family:ui-monospace,monospace; color:var(--ok); font-weight:700; }


/* ---- frame 6 enh css ---- */
/* ---- Frame 6 compliance deepening ---- */
.cd-f6-secnav{ margin-left:auto; display:inline-flex; gap:3px; background:var(--bg3); border-radius:9px; padding:3px; }
.cd-f6-sectab{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:7px; color:var(--tx3); cursor:pointer; font-weight:600; font-size:.86em; }
.cd-f6-sectab[data-active="true"]{ background:var(--bg); color:var(--ac); }
.cd-f6-filters{ flex:none; display:flex; align-items:center; gap:8px; padding:9px 16px; border-bottom:1px solid var(--bd); background:var(--bg); position:relative; }
.cd-f6-doctable td{ vertical-align:middle; }
.cd-f6-listhdr{ padding:11px 16px 6px; font-size:.78em; text-transform:uppercase; letter-spacing:.05em; color:var(--tx4); font-weight:600; border-top:1px solid var(--bd2); }
.cd-f6-ver{ display:inline-block; margin-left:4px; padding:1px 6px; border-radius:5px; background:var(--bg3); color:var(--tx3); font-size:.82em; font-weight:600; }
.cd-f6-ver.rescan{ background:var(--warn-bg); color:var(--warn); }
.cd-f6-rulehdr{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--bd); }
.cd-f6-rulehdr b{ color:var(--tx); font-weight:700; }
.cd-f6-toggle{ display:inline-flex; width:34px; height:18px; border-radius:999px; background:var(--bg3); cursor:pointer; padding:2px; transition:background .2s; }
.cd-f6-toggle .dot{ width:14px; height:14px; border-radius:50%; background:var(--tx4); transition:transform .2s, background .2s; }
.cd-f6-toggle[data-on="true"]{ background:var(--ok-bg); }
.cd-f6-toggle[data-on="true"] .dot{ transform:translateX(16px); background:var(--ok); }
.cd-f6-drawer{ position:absolute; top:46px; right:0; bottom:0; width:520px; max-width:86%; background:var(--bg); border-left:1px solid var(--bd); box-shadow:-12px 0 30px -10px rgba(0,0,0,.4); transform:translateX(100%); transition:transform .28s ease; z-index:55; display:flex; }
.cd-f6-drawer[data-open="true"]{ transform:translateX(0); }
.cd-f6-drawer-inner{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cd-f6-drawer-head{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--bd); }
.cd-f6-drawer-head h4{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--tx); }
.cd-f6-drawer-scroll{ flex:1; overflow-y:auto; padding:14px 16px; }
.cd-f6-sec-h{ display:flex; align-items:center; gap:7px; margin:16px 0 9px; font-weight:700; color:var(--tx); }
.cd-f6-sec-h:first-child{ margin-top:2px; }
.cd-f6-warn{ display:flex; align-items:center; gap:9px; background:var(--danger-bg); border-left:3px solid var(--danger); border-radius:0 7px 7px 0; padding:10px 12px; color:var(--danger); margin:6px 0 10px; }
.cd-f6-warn b{ color:var(--danger); }
.cd-f6-aclrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cd-f6-aclcard{ border:1px solid var(--bd); border-radius:9px; padding:9px 11px; background:var(--bg2); }
.cd-f6-aclcard.ok{ border-left:3px solid var(--ok); }
.cd-f6-aclcard.deny{ border-left:3px solid var(--tx4); }
.cd-f6-aclcard .k{ font-size:.76em; text-transform:uppercase; letter-spacing:.04em; color:var(--tx4); font-weight:600; }
.cd-f6-aclcard .v{ color:var(--tx); font-weight:600; margin-top:2px; }
.cd-f6-fgrid{ display:flex; flex-direction:column; gap:9px; }
.cd-f6-fcard{ border:1px solid var(--bd); border-radius:10px; padding:11px 12px; background:var(--bg2); }
.cd-f6-fcard.secret{ border-left:3px solid var(--purple); }
.cd-f6-fcard.pii{ border-left:3px solid var(--danger); }
.cd-f6-fcard.nhi{ border-left:3px solid var(--warn); }
.cd-f6-fcard-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cd-f6-fcard-h b{ color:var(--tx); font-weight:700; }
.cd-f6-fcard-q{ font-family:ui-monospace,monospace; color:var(--tx2); background:var(--bg3); border-radius:7px; padding:7px 9px; margin:8px 0; word-break:break-all; }
.cd-f6-code{ font-family:ui-monospace,monospace; line-height:1.9; color:var(--tx2); background:var(--bg2); border:1px solid var(--bd); border-radius:9px; padding:13px; }
.cd-f6-code mark.pii{ background:var(--warn-bg); color:var(--warn); border-radius:3px; padding:1px 4px; }
.cd-f6-code mark.sec{ background:var(--danger-bg); color:var(--danger); border-radius:3px; padding:1px 4px; }
.cd-f6-code mark.nhi{ background:var(--purple-bg); color:var(--purple); border-radius:3px; padding:1px 4px; }
.cd-f6-burnbox{ border:1px solid var(--bd); border-radius:9px; padding:11px 13px; background:var(--bg2); }
.cd-f6-testres{ display:flex; align-items:center; gap:8px; border-radius:8px; padding:9px 11px; margin:6px 0; font-weight:600; }
.cd-f6-testres.ok{ background:var(--ok-bg); color:var(--ok); }
.cd-f6-testres.fail{ background:var(--danger-bg); color:var(--danger); }/* ============================================================
   Demo "what am I doing" overlay — synthetic cursor, click
   ripple, target highlight ring, and a narrating caption chip.
   Children of #demo-screen so they travel into the lightbox too.
   ============================================================ */
/* evidence panel slide-in */
.cd-evi{ transition: opacity .5s ease, transform .5s ease; }
.cd-evi.cd-evi-off{ opacity:0; pointer-events:none; transform:translateX(14px); }
/* typing cursor in Ask-AI input */
.cd-input-box.cd-typing{ box-shadow:0 0 0 2px var(--ac-bd); background:var(--ac-bg); }
.cd-f1-typed{ color:var(--tx); }
.cd-f1-typed::after{ content:'|'; color:var(--ac); animation:cdBlink .7s step-end infinite; }
@keyframes cdBlink{ 0%,100%{opacity:1} 50%{opacity:0} }
.cd-cursor{ position:absolute; z-index:159; width:28px; height:28px; pointer-events:none; opacity:0; transform:translate(-2px,-1px); transition:left .8s cubic-bezier(.34,.1,.2,1), top .8s cubic-bezier(.34,.1,.2,1), opacity .3s; filter:drop-shadow(0 2px 5px rgba(0,0,0,.65)); }
.cd-cursor.show{ opacity:1; }
.cd-cursor svg{ width:28px; height:28px; display:block; }
.cd-ripple{ position:absolute; z-index:155; width:20px; height:20px; border-radius:50%; background:var(--ac); opacity:0; pointer-events:none; transform:translate(-50%,-50%); }
.cd-ripple.go{ animation:cdRipple .8s ease-out 1; }
@keyframes cdRipple{ 0%{ opacity:.6; transform:translate(-50%,-50%) scale(.4);} 100%{ opacity:0; transform:translate(-50%,-50%) scale(3.5);} }
.cd-tap-ring{ position:absolute; z-index:152; border:2px solid var(--ac); border-radius:9px; pointer-events:none; opacity:0; transition:left .8s cubic-bezier(.34,.1,.2,1), top .8s cubic-bezier(.34,.1,.2,1), width .8s, height .8s, opacity .2s; box-shadow:0 0 0 4px var(--ac-bg); }
@keyframes cdRing{ 0%{ box-shadow:0 0 0 2px var(--ac-bg);} 40%{ box-shadow:0 0 0 12px rgba(96,165,250,.22); border-color:var(--ac);} 75%{ box-shadow:0 0 0 6px rgba(96,165,250,.12);} 100%{ box-shadow:0 0 0 4px var(--ac-bg);} }
.cd-tap-ring.show{ opacity:1; animation:cdRing 1.6s ease 1; }
.cd-caption{ position:absolute; z-index:160; left:50%; top:13px; transform:translateX(-50%); display:flex; align-items:center; gap:9px; max-width:84%; background:rgba(12,12,15,.94); color:#fafafa; border:1px solid var(--ac-bd); border-radius:999px; padding:8px 18px; font:600 13.5px Inter,system-ui,sans-serif; box-shadow:0 8px 30px rgba(0,0,0,.5); pointer-events:none; opacity:0; transition:opacity .3s; }
.cd-caption.show{ opacity:1; }
.cd-cap-dot{ width:8px; height:8px; border-radius:50%; background:var(--ac); flex:none; animation:cdCap 1.2s ease infinite; }
@keyframes cdCap{ 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.1);} }
.cd-cap-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#demo-lightbox .cd-caption{ font-size:15px; top:18px; padding:9px 20px; }
#demo-lightbox .cd-cursor{ width:26px; height:26px; }

/* pause/play flash overlay — shows briefly when user clicks screen to toggle pause */
.cd-pause-flash{ position:absolute; z-index:200; left:50%; top:50%; transform:translate(-50%,-50%) scale(.7); background:rgba(0,0,0,.7); color:#fff; font-size:38px; line-height:1; width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .25s, transform .25s; }
.cd-pause-flash.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ── Gallery / demo tab buttons ─────────────────────────────────────────── */
.gallery-tab-active {
    background: #ffffff;
    color: #000;
    border-color: rgba(255,255,255,0.2);
}
.gallery-tab-inactive {
    background: transparent;
    color: #a1a1aa;
    border-color: #2a2a2e;
}
.gallery-tab-inactive:hover {
    color: #f4f4f5;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
}
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }