/* ==========================================================================
   Virtuoso QA demo engine — shared styles
   ==========================================================================
   Design tokens, app-chrome (sidebar/topbar/content), buttons, tabs, modals,
   the tour popup/highlight overlay, mobile notice, and the responsive
   scaling wrapper (#zoomOuter / #zoomWrap).

   IMPORTANT: the scaling wrapper uses `transform: scale()`, not the CSS
   `zoom` property. `zoom` is not supported consistently in Safari/iOS, which
   is why this project switched to `transform`. Do not reintroduce `zoom`.

   `transform` on #zoomWrap creates a new containing block for its
   position:fixed descendants. Several overlays inside the wrapper
   (.tour-popup, .directive-panel, .center-modal, etc.) therefore use
   percentage-based max-width (e.g. max-width:92%) rather than vw units,
   because vw units would be measured against the real viewport, not the
   scaled wrapper. Keep that in mind if you touch these rules.

   This file is shared across every per-vertical demo page. Vertical-specific
   visual content (project cards, requirement text, etc.) lives in the
   per-vertical HTML/JS, not here. If you need a new generic visual pattern,
   it belongs here so every vertical gets it "for free"; if it is tied to one
   vertical's specific screen content, it belongs in that vertical's page.
   ========================================================================== */

  :root{
    --purple-950:#0F1554; --purple-900:#15205F; --purple-800:#1D2E74; --purple-700:#1E5FD1;
    --purple-600:#2776FB; --purple-500:#6F65FB; --purple-400:#A79AFC; --purple-100:#EBF7FF;
    --gray-50:#F7F9FC; --gray-100:#EEF2F8; --gray-200:#E1E7F0; --gray-400:#98A2B8; --gray-600:#5C6B85;
    --text-dark:#0F1554; --green:#7CB342; --green-bg:#F0F7E6; --red:#D6336C;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--gray-50);color:var(--text-dark);overflow-x:hidden;}
  #zoomOuter{position:relative;overflow:hidden;width:100%;}
  #zoomWrap{width:1280px;-webkit-transform-origin:top left;transform-origin:top left;}
  .screen{display:none;min-height:100vh;}
  .screen.active{display:flex;}

  .sidebar{width:200px;flex-shrink:0;background:var(--purple-950);color:#fff;display:flex;flex-direction:column;padding:20px 14px;min-height:100vh;}
  .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;margin-bottom:24px;padding:0 6px;}
  .nav-ico{width:17px;height:17px;flex-shrink:0;opacity:.9;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-size:13.5px;color:#D8CFF0;cursor:pointer;margin-bottom:2px;transition:background .15s;}
  .nav-item:hover{background:var(--purple-800);}
  .nav-item.active{background:var(--purple-700);color:#fff;font-weight:600;}
  .nav-divider{border-top:1px solid var(--purple-800);margin:10px 4px;}
  .nav-spacer{flex:1;}
  .nav-bottom{border-top:1px solid var(--purple-800);padding-top:10px;margin-top:8px;}
  .user-row{display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:13.5px;font-weight:600;color:#fff;}
  .avatar{width:26px;height:26px;border-radius:50%;background:var(--purple-400);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}

  .main{flex:1;display:flex;flex-direction:column;min-width:0;}
  .topbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:16px 32px;border-bottom:1px solid var(--gray-200);background:#fff;}
  .searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--gray-200);border-radius:6px;padding:7px 12px;font-size:13px;color:var(--gray-400);width:230px;}
  .kbd{background:var(--gray-100);border-radius:4px;padding:1px 6px;font-size:11px;color:var(--gray-600);margin-left:auto;}
  .help-circle{width:26px;height:26px;border-radius:50%;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;color:var(--gray-600);font-size:13px;}
  .content{padding:28px 36px;flex:1;}
  .page-title{font-size:22px;font-weight:700;margin:0 0 4px 0;}
  .breadcrumb{display:flex;align-items:center;gap:6px;color:var(--gray-600);font-size:14px;margin-bottom:22px;}

  .tabs{display:flex;gap:0;margin-bottom:0;}
  .tab{padding:9px 20px;border:1px solid var(--gray-200);background:#fff;font-size:13.5px;font-weight:600;color:var(--purple-700);cursor:pointer;white-space:nowrap;}
  .tab:first-child{border-radius:6px 0 0 6px;}
  .tab:last-child{border-radius:0 6px 6px 0;}
  .tab.active{background:var(--purple-700);color:#fff;border-color:var(--purple-700);}
  .row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:nowrap;}
  .btn-primary{background:var(--purple-600);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
  .btn-primary:hover{background:var(--purple-700);}
  .btn-primary:disabled{background:var(--gray-200);color:var(--gray-600);cursor:default;}
  .btn-secondary{background:#fff;color:var(--purple-700);border:1px solid #C9B3F0;border-radius:6px;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
  .search-project{display:flex;align-items:center;gap:8px;border:1px solid var(--gray-200);border-radius:6px;padding:8px 12px;font-size:13px;color:var(--gray-400);width:260px;}
  .proj-count{color:var(--gray-600);font-size:13px;margin-bottom:14px;}
  .project-card{display:flex;align-items:stretch;border:1px solid var(--gray-200);border-radius:8px;margin-bottom:16px;background:#fff;cursor:pointer;transition:box-shadow .15s, border-color .15s;position:relative;}
  /* .recommended ribbon: originally scoped to the old row-style
     .project-card, now shared with the hub's grid .project-tile cards too -
     kept here as the one authoritative definition rather than duplicated
     per page. */
  .project-card.recommended, .project-tile.recommended{border:2px solid var(--purple-600);box-shadow:0 4px 20px rgba(39,118,251,.18);}
  .project-card.recommended::before, .project-tile.recommended::before{
    content:'Recommended for you';position:absolute;top:-11px;left:16px;
    background:var(--purple-600);color:#fff;font-size:11px;font-weight:700;
    padding:3px 10px;border-radius:5px;letter-spacing:.2px;
  }
  .project-card:hover{box-shadow:0 2px 10px rgba(31,17,71,.08);border-color:var(--purple-400);}
  .project-icon{width:70px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--gray-100);border-radius:7px 0 0 7px;}
  .project-body{flex:1;padding:16px 20px;display:flex;flex-direction:column;justify-content:center;}
  .project-name-row{display:flex;align-items:center;justify-content:space-between;}
  .project-name{font-size:15px;font-weight:700;}
  .project-date{color:var(--gray-600);font-size:12.5px;}
  .project-empty{color:var(--gray-600);font-size:13px;margin-top:14px;}
  .project-side{width:220px;flex-shrink:0;border-left:1px solid var(--gray-200);padding:16px 20px;font-size:12.5px;color:var(--gray-600);}
  .project-side div{margin-bottom:6px;}
  .project-side a{color:var(--purple-600);text-decoration:underline;cursor:pointer;}

  .subtabs{display:flex;gap:22px;border-bottom:1px solid var(--gray-200);margin-bottom:40px;font-size:13.5px;color:var(--gray-600);}
  .subtab{padding-bottom:12px;cursor:pointer;}
  .subtab.active{color:var(--text-dark);font-weight:700;border-bottom:2px solid var(--purple-700);}
  .empty-hero{display:flex;align-items:center;gap:40px;max-width:760px;margin:40px auto 0;}
  .empty-hero h2{font-size:22px;margin:0 0 10px;}
  .empty-hero p{font-size:14px;color:var(--gray-600);line-height:1.55;max-width:420px;}
  .hero-btns{display:flex;gap:10px;margin-top:16px;}

  .kb-layout{display:flex;gap:0;flex:1;}
  .kb-filters{width:230px;flex-shrink:0;padding:20px 20px 20px 0;border-right:1px solid var(--gray-200);}
  .filter-group summary{font-weight:700;font-size:13px;color:var(--purple-700);cursor:pointer;margin-bottom:8px;}
  .filter-input{border:1px solid var(--gray-200);border-radius:6px;padding:8px 10px;font-size:12.5px;color:var(--gray-400);width:100%;margin-bottom:16px;}
  .kb-main{flex:1;padding:20px 0 20px 24px;min-width:0;}
  .kb-empty-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 20px;}
  .kb-empty-wrap h3{font-size:20px;margin:20px 0 10px;}
  .kb-empty-wrap p{font-size:13.5px;color:var(--gray-600);max-width:420px;line-height:1.55;margin:0 0 4px;}
  table.sources{width:100%;border-collapse:collapse;font-size:15px;}
  table.sources th{text-align:left;color:var(--gray-600);font-weight:600;padding:14px 12px;border-bottom:1px solid var(--gray-200);}
  table.sources td{padding:20px 12px;border-bottom:1px solid var(--gray-100);vertical-align:top;}
  .source-title{color:var(--purple-700);font-weight:700;cursor:default;font-size:15.5px;}
  .source-title.clickable{cursor:pointer;text-decoration:underline;}
  .new-tag{color:var(--red);font-weight:700;font-size:11px;margin-left:6px;}
  .file-tag{background:var(--gray-100);border-radius:5px;padding:2px 8px;font-size:11px;color:var(--gray-600);margin-right:6px;}
  .file-meta{color:var(--gray-600);font-size:12px;}
  .row-flash{animation:flash 1.8s ease;}
  @keyframes flash{0%{background:#FDF1DA;}100%{background:transparent;}}

  .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(20,10,40,.35);display:none;align-items:center;justify-content:center;z-index:500;}
  .modal-backdrop.active{display:flex;}
  .modal-box{background:#fff;border-radius:10px;width:640px;max-width:90%;padding:32px;box-shadow:0 20px 60px rgba(20,10,40,.25);}
  .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .modal-head h3{font-size:17px;margin:0;}
  .modal-close{cursor:pointer;color:var(--gray-600);font-size:18px;border:none;background:none;}
  .dropzone{border:2px dashed var(--gray-200);border-radius:10px;padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s, background .15s;}
  .dropzone:hover{border-color:var(--purple-400);background:var(--purple-100);}
  .dropzone.uploading{border-color:var(--purple-400);background:var(--purple-100);}
  .dropzone h4{margin:14px 0 6px;font-size:15px;}
  .dropzone .browse{color:var(--purple-600);text-decoration:underline;font-weight:600;}
  .dropzone .formats{font-size:11.5px;color:var(--gray-600);margin-top:14px;line-height:1.5;}
  .spinner{width:34px;height:34px;border:3px solid var(--gray-200);border-top-color:var(--purple-600);border-radius:50%;margin:0 auto;animation:spin .8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .tour-highlight{position:fixed;pointer-events:none;border-radius:8px;z-index:600;box-shadow:0 0 0 4px var(--purple-400), 0 0 0 9999px rgba(20,10,40,.45);}
  .tour-popup{position:fixed;z-index:601;background:#fff;border-radius:10px;padding:20px 22px;width:340px;max-width:calc(100vw - 24px);box-shadow:0 12px 34px rgba(20,10,40,.3);}
  .tour-step{font-size:12.5px;font-weight:700;color:var(--purple-500);letter-spacing:.3px;margin-bottom:8px;}
  .tour-popup h4{margin:0 0 10px;font-size:17.5px;}
  .tour-popup p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--gray-600);}
  .tour-footer{display:flex;align-items:center;justify-content:space-between;}
  .tour-btn{background:var(--purple-600);color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;}
  .tour-back{background:none;border:1px solid var(--gray-200);color:var(--purple-600);border-radius:6px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;}
  .tour-back:disabled{color:var(--gray-400);cursor:default;border-color:var(--gray-100);}

  .center-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(20,10,40,.55);display:flex;align-items:center;justify-content:center;z-index:700;}
  .center-modal{background:#fff;border-radius:14px;padding:36px;width:440px;max-width:90vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);}
  .center-modal h2{font-size:20px;margin:14px 0 10px;}
  .center-modal p{font-size:13.5px;color:var(--gray-600);line-height:1.6;margin:0 0 22px;}

  .chat-shell{display:flex;flex:1;min-height:0;}
  .chat-left{flex:0 1 440px;max-width:440px;min-width:0;padding:22px 26px;overflow-y:auto;}
  .chat-left p{font-size:13px;line-height:1.6;color:var(--text-dark);margin:0 0 12px;}
  .chat-left ol{padding-left:18px;margin:0 0 12px;}
  .chat-left li{margin-bottom:9px;font-size:13px;line-height:1.55;}
  .chat-right{width:460px;flex-shrink:0;border-left:1px solid var(--gray-200);padding:24px 24px;overflow-y:auto;}
  .chat-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .chat-title-row{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--purple-700);}
  .chat-topright{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--purple-600);}
  .chat-close{border:none;background:none;font-size:18px;color:var(--gray-600);cursor:pointer;}
  .source-chip{display:inline-flex;align-items:center;gap:6px;background:var(--purple-100);color:var(--purple-700);border-radius:6px;padding:7px 12px;font-size:12.5px;margin:0 8px 8px 0;}
  .chat-input-row{display:flex;gap:10px;border:1px solid var(--gray-200);border-radius:8px;padding:12px 14px;margin-top:20px;align-items:flex-end;}
  .chat-input-row textarea{flex:1;border:none;resize:none;font-size:13.5px;font-family:inherit;outline:none;height:44px;}
  .send-btn{background:var(--purple-800);color:#fff;border:none;border-radius:6px;width:34px;height:34px;flex-shrink:0;cursor:pointer;font-size:15px;}
  .ai-hint{text-align:center;font-size:11.5px;color:var(--gray-400);margin-top:8px;}
  .cursor-blink{display:inline-block;width:2px;background:var(--purple-600);margin-left:1px;animation:blink 1s step-start infinite;}
  @keyframes blink{50%{opacity:0;}}

  .review-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .review-header h3{margin:0;font-size:17px;}
  .review-actions{display:flex;gap:10px;}
  .btn-cancel{background:#fff;border:1px solid var(--gray-200);color:var(--purple-700);border-radius:6px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;}
  .btn-create{background:var(--purple-700);color:#fff;border:none;border-radius:6px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;}
  .btn-create:disabled{background:var(--gray-200);color:var(--gray-600);cursor:default;}
  .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
  .tag-chip-x{background:var(--purple-100);color:var(--purple-700);border-radius:5px;padding:4px 10px;font-size:12px;font-weight:600;}
  .field-label{font-size:12.5px;font-weight:700;color:var(--gray-600);margin:14px 0 6px;}
  .field-input{border:1px solid var(--gray-200);border-radius:6px;padding:9px 12px;font-size:13.5px;width:100%;background:var(--gray-50);}
  .risk-select{border:1px solid var(--gray-200);border-radius:6px;padding:8px 12px;font-size:13px;width:170px;}
  .req-card{border:1px solid var(--gray-200);border-radius:8px;padding:20px;margin-top:16px;max-height:280px;overflow-y:auto;}
  .req-card h2{font-size:19px;margin:0 0 12px;}
  .req-card p{font-size:13.5px;line-height:1.6;color:var(--text-dark);margin:0 0 8px;}
  .req-card ul{margin:0 0 10px;padding-left:20px;font-size:13.5px;line-height:1.7;}
  .review-footer{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:20px;position:relative;}
  .review-footer-bottom{display:flex;align-items:center;justify-content:space-between;}
  .stepper-select{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px;font-weight:600;color:var(--purple-700);cursor:pointer;border:1px solid var(--gray-200);border-radius:6px;padding:10px 14px;width:100%;}
  .stepper-select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .arrow-btn{border:1px solid var(--gray-200);background:#fff;border-radius:6px;width:32px;height:32px;cursor:pointer;color:var(--gray-600);}
  .arrow-row{display:flex;gap:8px;align-items:center;}
  .approve-reject{display:flex;gap:8px;}
  .btn-approve{background:#fff;border:1px solid var(--green);color:var(--green);border-radius:6px;padding:8px 16px;font-weight:600;font-size:13px;cursor:pointer;}
  .btn-approve.done{background:var(--green);color:#fff;}
  .btn-reject{background:#fff;border:1px solid var(--red);color:var(--red);border-radius:6px;padding:8px 16px;font-weight:600;font-size:13px;cursor:pointer;}
  .dropdown-list{position:absolute;bottom:44px;left:0;background:#fff;border:1px solid var(--gray-200);border-radius:8px;box-shadow:0 8px 24px rgba(20,10,40,.15);width:340px;z-index:50;display:none;}
  .dropdown-list.open{display:block;}
  .dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--gray-100);}
  .dropdown-item:last-child{border-bottom:none;}
  .dropdown-item:hover{background:var(--gray-50);}
  .dropdown-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--gray-400);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0;}
  .dropdown-check.done{background:var(--green);border-color:var(--green);}

  .directive-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(20,10,40,.25);display:none;z-index:400;}
  .directive-backdrop.active{display:block;}
  .directive-panel{position:fixed;top:0;right:0;bottom:0;width:820px;max-width:92%;background:#fff;box-shadow:-10px 0 40px rgba(20,10,40,.2);z-index:401;transform:translateX(100%);transition:transform .3s ease;padding:30px 36px;overflow-y:auto;}
  .directive-panel.active{transform:translateX(0);}
  .directive-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .directive-panel-head h3{font-size:19px;margin:0;}
  .directive-banner{background:var(--purple-100);border-left:4px solid var(--purple-600);border-radius:6px;padding:14px 16px;font-size:13px;color:var(--purple-700);margin-bottom:22px;}
  .directive-banner strong{display:block;margin-bottom:4px;font-size:13.5px;}
  .directive-content-box{border:1px solid var(--gray-200);border-radius:8px;padding:18px;background:var(--gray-50);font-family:ui-monospace, Menlo, monospace;font-size:12px;line-height:1.7;white-space:pre-wrap;max-height:420px;overflow-y:auto;color:var(--text-dark);}
  .directive-table td, .directive-table th{padding:12px 8px;font-size:13px;border-bottom:1px solid var(--gray-100);}
  .saved-tag{color:var(--green);font-weight:700;font-size:12px;margin-left:10px;}
  .add-scope-btn{border:1px dashed var(--purple-400);color:var(--purple-600);background:none;border-radius:6px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;margin-top:6px;}
  #mobileNotice{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purple-950);color:#fff;z-index:900;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 26px;}
  #mobileNotice img{height:26px;margin-bottom:26px;}
  #mobileNotice h2{font-size:20px;margin:0 0 12px;font-weight:700;}
  #mobileNotice p{font-size:14.5px;line-height:1.6;color:#C9D3EA;margin:0 0 12px;max-width:340px;}
  #mobileNotice .mn-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;width:100%;max-width:280px;}
  #mobileNotice .mn-primary{background:var(--purple-600);color:#fff;border:none;border-radius:8px;padding:14px 18px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;}
  #mobileNotice .mn-secondary{background:none;color:#C9D3EA;border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:13px 18px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;}
  .toast{position:fixed;top:24px;right:24px;background:var(--green-bg);color:var(--green);border:1px solid var(--green);border-radius:8px;padding:12px 18px;font-size:13.5px;font-weight:700;z-index:800;box-shadow:0 8px 24px rgba(20,10,40,.15);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s, transform .25s;}
  .toast.show{opacity:1;transform:translateY(0);}
  .log-line{margin-bottom:9px;}
  .log-section{font-weight:700;color:var(--gray-600);}
  .log-action{color:#2F7A3E;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;}
  .log-ai{color:var(--text-dark);}
  .log-ai::before{content:'✨ ';}
  .log-fail{color:#B02A37;font-weight:700;}
  .log-shot{color:var(--gray-400);font-size:12px;}
  .log-completed{background:var(--green-bg);border:1px solid var(--green);border-radius:8px;padding:16px;margin-top:14px;}
  .log-completed .head{display:flex;align-items:center;gap:8px;font-weight:700;color:#1C7A45;margin-bottom:8px;}
  .log-completed p{margin:0 0 10px;color:var(--text-dark);}
  .log-completed a{color:var(--purple-600);font-weight:600;text-decoration:none;}
  .nlp-checkpoint{display:flex;align-items:center;gap:8px;font-style:italic;color:var(--text-dark);font-weight:600;margin-bottom:8px;font-size:13.5px;}
  .nlp-line{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--text-dark);padding-left:22px;}
  .nlp-line code{background:var(--gray-100);border-radius:4px;padding:1px 6px;font-size:12px;color:var(--purple-700);}
  .exec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;}
  .exec-dot.amber{background:#F5A623;}
  .exec-dot.green{background:var(--green);}
  .exec-dot.grey{background:var(--gray-200);}
  .preview-mock{width:100%;font-size:12px;color:var(--gray-600);}
  .preview-card{background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(20,10,40,.1);padding:24px;max-width:280px;margin:0 auto;}
  .preview-tile{background:#fff;border-radius:8px;height:60px;box-shadow:0 2px 8px rgba(20,10,40,.06);}