/* alignment.html — page-specific styles */
:root{
--bg:#0b0e13;
--panel:rgba(255,255,255,.05);
--panel-2:rgba(255,255,255,.06);
--border:rgba(255,255,255,.1);
--text:#f2f5f9;
--muted:#8c99a8;
--primary:#2b8be6;
--primary-2:#5468f2;
--accent:#2b88e5;
--green:#10b981;
--amber:#fbbf24;
--red:#f87171;
--grad:linear-gradient(135deg,#2b8be6,#5468f2);
--subnav:#26303f;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:linear-gradient(135deg,#0b0e13 0%,#141c28 100%);
min-height:100vh;
color:#c9d2dc;
font-size:14px;
line-height:1.6;
}
.app{display:flex;min-height:100vh;position:relative;z-index:1}
/* Sidebar */
aside.sidebar{
width:280px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border-right:1px solid var(--border);
color:#fff;
padding:24px 0;
box-shadow:2px 0 25px rgba(0,0,0,.3);
flex-shrink:0;
overflow-y:auto;
}
.sidebar-header{padding:0 24px 24px;border-bottom:1px solid var(--border);margin-bottom:24px}
.sidebar .logo{
display:flex;align-items:center;font-size:20px;font-weight:600;
background:linear-gradient(135deg,#ff6b00,#ff9933);
background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.sidebar .logo img{height:32px;display:block}
.header-buttons{margin-top:16px}
.header-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;
background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;
color:var(--muted);cursor:pointer;font-size:13px;font-weight:500;width:100%;font-family:inherit;
transition:all .3s ease;}
.header-btn:hover{background:rgba(43,139,230,.2);border-color:#2b8be6;color:#2b8be6}
.header-btn .material-icons{font-size:18px}
.nav-item{
display:flex;align-items:center;padding:12px 24px;cursor:pointer;
transition:all .3s ease;border:none;background:none;color:#fff;
width:100%;text-align:left;position:relative;border-radius:0 25px 25px 0;
margin:4px 0;font-size:14px;font-family:inherit;
}
.nav-item:hover{background:rgba(255,255,255,.1);transform:translateX(5px)}
.nav-item.active-page{
background:linear-gradient(135deg,rgba(43,139,230,.3),rgba(84,104,242,.3));
border-left:4px solid #5468f2;color:#fff;font-weight:500;
box-shadow:0 4px 20px rgba(84,104,242,.3);
}
.nav-item .material-icons{margin-right:12px;font-size:20px;flex-shrink:0;color:inherit}
.nav-text{flex:1;white-space:nowrap;overflow:hidden}
.expand-icon{margin-left:auto;transition:transform .3s ease;font-size:18px;flex-shrink:0}
.nav-item.section-header{background:rgba(43,139,230,.2);border-left:4px solid #2b8be6;
color:#cdd4df;font-weight:600;margin:8px 0 4px;box-shadow:0 4px 15px rgba(43,139,230,.2)}
.nav-item.section-header.expanded{background:var(--subnav)}
.nav-item.section-header.expanded .expand-icon{transform:rotate(90deg)}
.nav-subitems{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--subnav);backdrop-filter:blur(10px)}
.nav-subitems.expanded{max-height:1000px}
.nav-subitems .nav-item{background:transparent;padding-left:52px;font-weight:400;margin:2px 0}
.nav-subitems .nav-item:hover{background:rgba(255,255,255,.1);transform:translateX(8px)}
/* Main */
main{flex:1;display:flex;flex-direction:column;background:rgba(255,255,255,.02);overflow:auto;min-width:0}
header.top{
background:rgba(255,255,255,.05);backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);padding:20px 32px;
box-shadow:0 4px 20px rgba(0,0,0,.1);display:flex;align-items:center;
justify-content:space-between;flex-shrink:0;
}
header.top h1{
margin:0;font-size:26px;font-weight:700;
background:linear-gradient(135deg,#ff6b00,#ff9933);
background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
header.top p{margin:4px 0 0;color:var(--muted);font-size:13px}
.page-body{padding:32px;flex:1}
/* Cards */
.card{
background:var(--panel);backdrop-filter:blur(20px);border:1px solid var(--border);
border-radius:20px;padding:24px;box-shadow:0 20px 40px rgba(0,0,0,.25);
transition:all .3s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 25px 50px rgba(0,0,0,.35)}
.card h3{
margin:0 0 16px;font-size:15px;font-weight:600;display:flex;
justify-content:space-between;align-items:center;color:var(--text);
}
.card h3 .pill{
font-size:11px;padding:4px 12px;border-radius:999px;
background:rgba(43,139,230,.2);color:#c9d2dc;font-weight:500;
border:1px solid rgba(43,139,230,.25);
}
/* Buttons */
.btn{
padding:10px 20px;border:none;border-radius:12px;font-weight:600;cursor:pointer;
transition:all .3s ease;font-size:14px;font-family:inherit;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--grad);color:#fff;box-shadow:0 4px 15px rgba(43,139,230,.25);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(43,139,230,.35)}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.15)}
/* Select / Form Controls */
.control-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px;align-items:flex-end}
.control-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px}
.control-group label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.control-group select{
background:rgba(0,0,0,.3);border:1px solid var(--border);color:var(--text);
padding:10px 36px 10px 14px;border-radius:12px;font-size:13px;font-weight:500;
outline:none;font-family:inherit;cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;
transition:border-color .2s,box-shadow .2s;
}
.control-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(43,139,230,.15)}
.control-group select option{background:#141c28;color:var(--text)}
/* Badges */
.badge{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;display:inline-block}
.b-green{background:rgba(16,185,129,.2);color:var(--green)}
.b-amber{background:rgba(251,191,36,.15);color:var(--amber)}
.b-blue{background:rgba(43,136,229,.15);color:var(--accent)}
.b-purple{background:rgba(84,104,242,.2);color:#b8c1fa}
.b-red{background:rgba(248,113,113,.15);color:var(--red)}
/* Alignment Flow */
.alignment-container{display:flex;flex-direction:column;gap:24px}
.flow-grid{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;align-items:stretch}
.flow-col{display:flex;flex-direction:column;gap:16px}
.flow-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative}
.flow-connector .arrow-line{
width:2px;flex:1;background:linear-gradient(180deg,rgba(43,139,230,.4),rgba(84,104,242,.4));
position:relative;
}
.connector-arrow{
width:40px;height:40px;border-radius:50%;
background:rgba(43,139,230,.15);border:1px solid rgba(43,139,230,.3);
display:flex;align-items:center;justify-content:center;
color:var(--primary);flex-shrink:0;
}
.connector-arrow .material-icons{font-size:20px}
.flow-card{
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:16px;padding:20px;transition:all .3s ease;
}
.flow-card:hover{border-color:rgba(43,139,230,.3);background:rgba(255,255,255,.06)}
.flow-card.problem{border-left:3px solid var(--red)}
.flow-card.solution{border-left:3px solid var(--primary)}
.flow-card.outcome{border-left:3px solid var(--green)}
.flow-card.results{border-left:3px solid var(--accent)}
.flow-card.benefits{border-left:3px solid var(--amber)}
.flow-card-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.flow-card-icon{
width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;
}
.flow-card-icon.red{background:rgba(248,113,113,.15);color:var(--red)}
.flow-card-icon.blue{background:rgba(43,139,230,.15);color:var(--primary)}
.flow-card-icon.green{background:rgba(16,185,129,.15);color:var(--green)}
.flow-card-icon.cyan{background:rgba(43,136,229,.15);color:var(--accent)}
.flow-card-icon.amber{background:rgba(251,191,36,.15);color:var(--amber)}
.flow-card-title{font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.flow-card-body{color:var(--muted);font-size:13px;line-height:1.7}
.flow-card-body ul{list-style:none;padding:0;margin:0}
.flow-card-body li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:flex-start;gap:8px}
.flow-card-body li:last-child{border-bottom:none}
.flow-card-body li .material-icons{font-size:16px;margin-top:2px;flex-shrink:0}
/* Column Headers */
.col-header{
text-align:center;padding:12px;border-radius:14px;
font-weight:700;font-size:14px;letter-spacing:.5px;
}
.col-header.left{background:linear-gradient(135deg,rgba(248,113,113,.12),rgba(251,191,36,.08));color:var(--text);border:1px solid rgba(248,113,113,.2)}
.col-header.right{background:linear-gradient(135deg,rgba(43,139,230,.12),rgba(43,136,229,.08));color:var(--text);border:1px solid rgba(43,139,230,.2)}
.col-header .role-name{font-size:16px;margin-bottom:2px}
.col-header .role-sub{font-size:11px;color:var(--muted);font-weight:400}
/* Benefits Section */
.benefits-bar{
background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(16,185,129,.08));
border:1px solid rgba(251,191,36,.2);border-radius:16px;padding:24px;
margin-top:8px;
}
.benefits-bar h3{
margin:0 0 16px;font-size:15px;font-weight:600;color:var(--amber);
display:flex;align-items:center;gap:8px;
}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.benefit-item{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:16px;display:flex;gap:12px;align-items:flex-start;
transition:all .3s ease;
}
.benefit-item:hover{border-color:rgba(251,191,36,.3);background:rgba(255,255,255,.06)}
.benefit-icon{
width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;background:rgba(251,191,36,.15);color:var(--amber);
}
.benefit-icon .material-icons{font-size:18px}
.benefit-text{font-size:13px;color:var(--muted);line-height:1.6}
.benefit-text strong{color:var(--text);display:block;margin-bottom:2px}
/* Placeholder */
.placeholder{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:80px 40px;text-align:center;color:var(--muted);
}
.placeholder .material-icons{font-size:64px;margin-bottom:16px;opacity:.3}
.placeholder h2{font-size:20px;font-weight:600;color:var(--text);margin-bottom:8px}
.placeholder p{font-size:14px;max-width:460px}
/* Summary header row */
.summary-row{
display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;
}
.summary-stat{
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;
}
.summary-stat .stat-icon{
width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.summary-stat .stat-icon.blue{background:rgba(43,139,230,.15);color:var(--primary)}
.summary-stat .stat-icon.purple{background:rgba(84,104,242,.15);color:var(--primary-2)}
.stat-info .stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stat-info .stat-value{font-size:18px;font-weight:700;color:var(--text);margin-top:2px}
/* Page visibility */
.page-section{display:none}
.page-section.active{display:block}
/* ── Strategy Map Styles ── */
.strat-map-wrapper{position:relative}
.strat-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.strat-kpi{
background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:16px 20px;display:flex;align-items:center;gap:14px;
backdrop-filter:blur(20px);transition:all .3s ease;
}
.strat-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.strat-kpi-icon{
width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.strat-kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.strat-kpi-value{font-size:22px;font-weight:700;color:var(--text);margin-top:2px}
/* Strategy Lanes */
.strat-lanes{display:flex;flex-direction:column;gap:0;position:relative}
.strat-lane{
position:relative;padding:28px 24px 20px;
border:1px solid var(--border);
background:var(--panel);backdrop-filter:blur(20px);
transition:all .3s ease;
}
.strat-lane:first-child{border-radius:20px 20px 0 0}
.strat-lane:last-child{border-radius:0 0 20px 20px}
.strat-lane + .strat-lane{border-top:none}
.strat-lane-label{
position:absolute;top:0;left:0;
padding:6px 18px;border-radius:0 0 12px 0;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
z-index:2;
}
.strat-lane.financial .strat-lane-label{background:rgba(16,185,129,.2);color:var(--green)}
.strat-lane.customer .strat-lane-label{background:rgba(43,139,230,.2);color:var(--primary)}
.strat-lane.process .strat-lane-label{background:rgba(84,104,242,.2);color:#b8c1fa}
.strat-lane.capability .strat-lane-label{background:rgba(251,191,36,.2);color:var(--amber)}
.strat-lane.financial{background:linear-gradient(135deg,rgba(16,185,129,.04),rgba(16,185,129,.02))}
.strat-lane.customer{background:linear-gradient(135deg,rgba(43,139,230,.04),rgba(43,139,230,.02))}
.strat-lane.process{background:linear-gradient(135deg,rgba(84,104,242,.04),rgba(84,104,242,.02))}
.strat-lane.capability{background:linear-gradient(135deg,rgba(251,191,36,.04),rgba(251,191,36,.02))}
/* Objective Nodes */
.strat-nodes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding-top:12px}
.strat-node{
background:rgba(255,255,255,.05);border:1px solid var(--border);
border-radius:14px;padding:14px 18px;min-width:180px;max-width:240px;
cursor:pointer;transition:all .3s ease;position:relative;text-align:center;
flex:1;
}
.strat-node:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.strat-node.selected{border-width:2px;transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.strat-node.financial{border-color:rgba(16,185,129,.3)}
.strat-node.financial.selected{border-color:var(--green);background:rgba(16,185,129,.1)}
.strat-node.customer{border-color:rgba(43,139,230,.3)}
.strat-node.customer.selected{border-color:var(--primary);background:rgba(43,139,230,.1)}
.strat-node.process{border-color:rgba(84,104,242,.3)}
.strat-node.process.selected{border-color:var(--primary-2);background:rgba(84,104,242,.1)}
.strat-node.capability{border-color:rgba(251,191,36,.3)}
.strat-node.capability.selected{border-color:var(--amber);background:rgba(251,191,36,.1)}
.strat-node-icon{
width:36px;height:36px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
margin:0 auto 8px;
}
.strat-node.financial .strat-node-icon{background:rgba(16,185,129,.15);color:var(--green)}
.strat-node.customer .strat-node-icon{background:rgba(43,139,230,.15);color:var(--primary)}
.strat-node.process .strat-node-icon{background:rgba(84,104,242,.15);color:#b8c1fa}
.strat-node.capability .strat-node-icon{background:rgba(251,191,36,.15);color:var(--amber)}
.strat-node-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.strat-node-metric{font-size:11px;color:var(--muted)}
.strat-node-progress{
height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden;
}
.strat-node-progress-fill{height:100%;border-radius:2px;transition:width .6s ease}
.strat-node.financial .strat-node-progress-fill{background:var(--green)}
.strat-node.customer .strat-node-progress-fill{background:var(--primary)}
.strat-node.process .strat-node-progress-fill{background:var(--primary-2)}
.strat-node.capability .strat-node-progress-fill{background:var(--amber)}
/* Connection SVG overlay */
.strat-svg-overlay{
position:absolute;top:0;left:0;width:100%;height:100%;
pointer-events:none;z-index:1;
}
.strat-nodes{position:relative;z-index:2}
/* Detail Panel */
.strat-detail{
background:var(--panel);border:1px solid var(--border);border-radius:20px;
padding:24px;margin-top:24px;backdrop-filter:blur(20px);
box-shadow:0 20px 40px rgba(0,0,0,.25);display:none;
}
.strat-detail.visible{display:block;animation:fadeSlide .3s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.strat-detail-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.strat-detail-icon{
width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
}
.strat-detail-title{font-size:18px;font-weight:700;color:var(--text)}
.strat-detail-perspective{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.strat-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.strat-detail-section{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
border-radius:14px;padding:18px;
}
.strat-detail-section h4{
font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
.strat-detail-section h4 .material-icons{font-size:16px}
.strat-detail-list{list-style:none;padding:0;margin:0}
.strat-detail-list li{
padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);
font-size:13px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;
}
.strat-detail-list li:last-child{border-bottom:none}
.strat-detail-list li .material-icons{font-size:16px;margin-top:1px;flex-shrink:0}
/* Lane connectors arrows between lanes */
.lane-arrows{
display:flex;justify-content:center;gap:60px;padding:4px 0;position:relative;z-index:2;
}
.lane-arrow{
display:flex;flex-direction:column;align-items:center;gap:0;
}
.lane-arrow .material-icons{font-size:20px;color:rgba(255,255,255,.2)}
/* Strat map controls row */
.strat-controls{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.strat-toggle-group{
display:inline-flex;border-radius:10px;border:1px solid var(--border);
overflow:hidden;background:rgba(0,0,0,.2);
}
.strat-toggle{
background:transparent;border:none;border-right:1px solid var(--border);
color:var(--muted);padding:8px 16px;font-size:12px;font-weight:600;
cursor:pointer;font-family:inherit;transition:background .2s,color .2s;
}
.strat-toggle:last-child{border-right:none}
.strat-toggle.active{background:rgba(43,139,230,.2);color:var(--primary)}
.strat-toggle:hover:not(.active){background:rgba(255,255,255,.06);color:var(--text)}
/* ── Stakeholder View Styles ── */
.sh-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
.sh-kpi{
background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:14px 18px;backdrop-filter:blur(20px);transition:all .3s ease;text-align:center;
}
.sh-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.3)}
.sh-kpi-value{font-size:24px;font-weight:700;color:var(--text);margin-bottom:2px}
.sh-kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
/* Power/Interest Matrix */
.sh-matrix-wrap{position:relative;margin-bottom:24px}
.sh-matrix{
position:relative;height:420px;
background:rgba(0,0,0,.2);border-radius:16px;border:1px solid var(--border);
overflow:hidden;
}
.sh-matrix-quadrant{
position:absolute;width:50%;height:50%;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.12);
}
.sh-matrix-quadrant.q1{top:0;right:0;background:rgba(248,113,113,.04);border-bottom:1px dashed rgba(255,255,255,.06);border-left:1px dashed rgba(255,255,255,.06)}
.sh-matrix-quadrant.q2{top:0;left:0;background:rgba(251,191,36,.03);border-bottom:1px dashed rgba(255,255,255,.06);border-right:1px dashed rgba(255,255,255,.06)}
.sh-matrix-quadrant.q3{bottom:0;right:0;background:rgba(43,139,230,.04);border-top:1px dashed rgba(255,255,255,.06);border-left:1px dashed rgba(255,255,255,.06)}
.sh-matrix-quadrant.q4{bottom:0;left:0;background:rgba(255,255,255,.01);border-top:1px dashed rgba(255,255,255,.06);border-right:1px dashed rgba(255,255,255,.06)}
.sh-matrix-axis-x{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.5px}
.sh-matrix-axis-y{position:absolute;top:50%;left:10px;transform:rotate(-90deg) translateX(50%);transform-origin:left center;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.5px}
.sh-matrix-label-lo-x{position:absolute;bottom:8px;left:24px;color:rgba(255,255,255,.2);font-size:10px}
.sh-matrix-label-hi-x{position:absolute;bottom:8px;right:12px;color:rgba(255,255,255,.2);font-size:10px}
.sh-matrix-label-lo-y{position:absolute;bottom:12px;left:10px;color:rgba(255,255,255,.2);font-size:10px;transform:rotate(-90deg);transform-origin:left bottom}
.sh-matrix-label-hi-y{position:absolute;top:12px;left:10px;color:rgba(255,255,255,.2);font-size:10px;transform:rotate(-90deg);transform-origin:left bottom}
.sh-dot{
position:absolute;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .3s ease;z-index:3;
border:2px solid rgba(255,255,255,.15);
box-shadow:0 4px 15px rgba(0,0,0,.3);
}
.sh-dot:hover{transform:scale(1.2);z-index:10;box-shadow:0 6px 25px rgba(0,0,0,.5)}
.sh-dot.selected{transform:scale(1.25);z-index:10;border-color:rgba(201,209,220,.14);box-shadow:0 0 20px rgba(43,139,230,.4)}
.sh-dot .material-icons{font-size:20px;color:#fff}
.sh-dot-tooltip{
position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
background:rgba(0,0,0,.9);color:#fff;padding:6px 12px;border-radius:8px;
font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;
opacity:0;transition:opacity .2s;z-index:20;
}
.sh-dot:hover .sh-dot-tooltip{opacity:1}
/* Stakeholder Cards Grid */
.sh-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:24px}
.sh-card{
background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:20px;backdrop-filter:blur(20px);transition:all .3s ease;cursor:pointer;
}
.sh-card:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.35);border-color:rgba(43,139,230,.3)}
.sh-card.selected{border-color:var(--primary);background:rgba(43,139,230,.06);box-shadow:0 15px 35px rgba(43,139,230,.15)}
.sh-card-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sh-card-avatar{
width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:800;color:#fff;flex-shrink:0;
}
.sh-card-name{font-size:15px;font-weight:700;color:var(--text)}
.sh-card-role{font-size:12px;color:var(--muted);margin-top:2px}
.sh-card-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.sh-card-metric{text-align:center;padding:8px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.05)}
.sh-card-metric-value{font-size:16px;font-weight:700;color:var(--text)}
.sh-card-metric-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.sh-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.sh-card-tag{
padding:3px 10px;border-radius:999px;font-size:10px;font-weight:600;
background:rgba(43,139,230,.12);color:var(--primary);border:1px solid rgba(43,139,230,.2);
}
.sh-card-engagement{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.sh-card-engagement-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sh-card-engagement-text{font-size:11px;color:var(--muted)}
/* Stakeholder Detail Panel */
.sh-detail{
background:var(--panel);border:1px solid var(--border);border-radius:20px;
padding:28px;backdrop-filter:blur(20px);box-shadow:0 20px 40px rgba(0,0,0,.25);
display:none;margin-bottom:24px;
}
.sh-detail.visible{display:block;animation:fadeSlide .3s ease}
.sh-detail-top{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px}
.sh-detail-avatar{
width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;
font-size:26px;font-weight:800;color:#fff;flex-shrink:0;
}
.sh-detail-info{flex:1}
.sh-detail-name{font-size:22px;font-weight:700;color:var(--text)}
.sh-detail-role{font-size:14px;color:var(--muted);margin-top:2px}
.sh-detail-badges{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.sh-detail-close{
background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:10px;
width:36px;height:36px;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);transition:all .2s;
}
.sh-detail-close:hover{background:rgba(255,255,255,.15);color:var(--text)}
.sh-detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.sh-detail-section{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
border-radius:14px;padding:18px;
}
.sh-detail-section h4{
font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
margin-bottom:12px;display:flex;align-items:center;gap:6px;font-weight:600;
}
.sh-detail-section h4 .material-icons{font-size:16px}
.sh-detail-list{list-style:none;padding:0;margin:0}
.sh-detail-list li{
padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;
color:var(--muted);display:flex;align-items:flex-start;gap:8px;
}
.sh-detail-list li:last-child{border-bottom:none}
.sh-detail-list li .material-icons{font-size:15px;margin-top:2px;flex-shrink:0}
/* RACI Table */
.sh-raci-wrap{margin-top:24px}
.sh-raci{width:100%;border-collapse:collapse}
.sh-raci th,.sh-raci td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--border);font-size:12px}
.sh-raci th{color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:10px;position:sticky;top:0;background:rgba(11,14,19,.95);z-index:2}
.sh-raci td:first-child,.sh-raci th:first-child{text-align:left;padding-left:16px;font-weight:500}
.sh-raci tr:hover td{background:rgba(255,255,255,.03)}
.raci-cell{
width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;
justify-content:center;font-size:11px;font-weight:800;
}
.raci-R{background:rgba(43,139,230,.2);color:var(--primary)}
.raci-A{background:rgba(248,113,113,.2);color:var(--red)}
.raci-C{background:rgba(251,191,36,.2);color:var(--amber)}
.raci-I{background:rgba(84,104,242,.15);color:#b8c1fa}
/* Comms plan */
.sh-comms{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
.sh-comm-item{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
border-radius:12px;padding:16px;transition:all .3s ease;
}
.sh-comm-item:hover{border-color:rgba(43,139,230,.2);background:rgba(255,255,255,.05)}
.sh-comm-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sh-comm-icon{
width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;
}
.sh-comm-icon .material-icons{font-size:18px}
.sh-comm-title{font-size:13px;font-weight:600;color:var(--text)}
.sh-comm-freq{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.sh-comm-desc{font-size:12px;color:var(--muted);line-height:1.6}
/* Filter toggles for stakeholder page */
.sh-filters{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
/* ── Roadmap Styles ── */
.rm-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
.rm-kpi{
background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:14px 18px;backdrop-filter:blur(20px);transition:all .3s ease;text-align:center;
}
.rm-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.3)}
.rm-kpi-value{font-size:24px;font-weight:700;color:var(--text);margin-bottom:2px}
.rm-kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.rm-filters{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
/* Timeline container */
.rm-timeline-wrap{
background:var(--panel);border:1px solid var(--border);border-radius:20px;
backdrop-filter:blur(20px);overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.rm-timeline-header{
display:flex;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;
background:rgba(11,14,19,.95);backdrop-filter:blur(20px);
}
.rm-swimlane-label-head{
width:200px;min-width:200px;padding:14px 20px;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
border-right:1px solid var(--border);display:flex;align-items:center;
}
.rm-quarters{display:flex;flex:1}
.rm-quarter{
flex:1;min-width:0;text-align:center;padding:10px 0;font-size:12px;font-weight:700;
color:var(--muted);letter-spacing:.5px;border-right:1px solid rgba(255,255,255,.04);
position:relative;
}
.rm-quarter.current{color:var(--primary);background:rgba(43,139,230,.06)}
.rm-quarter .rm-q-label{font-size:13px;color:var(--text)}
.rm-quarter .rm-q-range{font-size:10px;color:var(--muted);margin-top:1px}
.rm-months{display:flex;border-top:1px solid rgba(255,255,255,.04);margin-top:6px;padding-top:4px}
.rm-month{flex:1;font-size:9px;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:.3px}
/* Swimlane Rows */
.rm-swimlane{display:flex;border-bottom:1px solid rgba(255,255,255,.04);min-height:90px}
.rm-swimlane:last-child{border-bottom:none}
.rm-swimlane:hover{background:rgba(255,255,255,.015)}
.rm-swimlane-label{
width:200px;min-width:200px;padding:16px 20px;border-right:1px solid var(--border);
display:flex;align-items:flex-start;gap:12px;flex-shrink:0;
}
.rm-lane-icon{
width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;
}
.rm-lane-icon .material-icons{font-size:18px}
.rm-lane-name{font-size:13px;font-weight:600;color:var(--text)}
.rm-lane-sub{font-size:11px;color:var(--muted);margin-top:2px}
.rm-lane-track{flex:1;position:relative;display:flex;align-items:center;padding:12px 0;min-height:80px}
/* Items / bars */
.rm-item{
position:absolute;height:38px;border-radius:10px;
display:flex;align-items:center;padding:0 12px;gap:6px;
font-size:11px;font-weight:600;color:#fff;cursor:pointer;
transition:all .3s ease;overflow:hidden;white-space:nowrap;
border:1px solid rgba(255,255,255,.1);z-index:2;min-width:60px;
}
.rm-item:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.4);z-index:10}
.rm-item.selected{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,255,255,.4),0 8px 25px rgba(0,0,0,.4);z-index:10}
.rm-item .material-icons{font-size:14px;flex-shrink:0}
.rm-item-text{overflow:hidden;text-overflow:ellipsis}
.rm-item.status-done{background:linear-gradient(135deg,rgba(16,185,129,.7),rgba(16,185,129,.5))}
.rm-item.status-active{background:linear-gradient(135deg,rgba(43,139,230,.7),rgba(84,104,242,.5))}
.rm-item.status-planned{background:linear-gradient(135deg,rgba(251,191,36,.5),rgba(251,191,36,.3));color:rgba(255,255,255,.9)}
.rm-item.status-at-risk{background:linear-gradient(135deg,rgba(248,113,113,.6),rgba(248,113,113,.4))}
.rm-item.status-blocked{background:linear-gradient(135deg,rgba(248,113,113,.8),rgba(220,38,38,.6))}
/* Milestone diamonds */
.rm-milestone{
position:absolute;z-index:3;cursor:pointer;transition:all .3s ease;
}
.rm-milestone:hover{transform:scale(1.3)}
.rm-milestone-diamond{
width:18px;height:18px;background:var(--amber);border:2px solid rgba(255,255,255,.3);
transform:rotate(45deg);border-radius:3px;
}
.rm-milestone-label{
position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);
font-size:9px;color:var(--muted);white-space:nowrap;text-align:center;font-weight:600;
}
/* Today line */
.rm-today{
position:absolute;top:0;bottom:0;width:2px;z-index:4;
background:linear-gradient(180deg,var(--red),rgba(248,113,113,.2));
}
.rm-today::before{
content:'TODAY';position:absolute;top:-20px;left:50%;transform:translateX(-50%);
font-size:8px;font-weight:800;color:var(--red);letter-spacing:1px;
background:rgba(248,113,113,.15);padding:2px 8px;border-radius:4px;
}
/* Quarter grid lines */
.rm-q-grid{
position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.04);z-index:1;
}
/* Dependency arrows */
.rm-dep-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* Roadmap Detail Panel */
.rm-detail{
background:var(--panel);border:1px solid var(--border);border-radius:20px;
padding:24px;backdrop-filter:blur(20px);box-shadow:0 20px 40px rgba(0,0,0,.25);
display:none;margin-top:24px;
}
.rm-detail.visible{display:block;animation:fadeSlide .3s ease}
.rm-detail-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.rm-detail-icon{
width:48px;height:48px;border-radius:14px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;
}
.rm-detail-icon .material-icons{font-size:24px;color:#fff}
.rm-detail-title{font-size:20px;font-weight:700;color:var(--text)}
.rm-detail-sub{font-size:13px;color:var(--muted);margin-top:2px}
.rm-detail-badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rm-detail-close{
background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:10px;
width:36px;height:36px;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--muted);transition:all .2s;margin-left:auto;flex-shrink:0;
}
.rm-detail-close:hover{background:rgba(255,255,255,.15);color:var(--text)}
.rm-detail-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.rm-detail-section{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
border-radius:14px;padding:18px;
}
.rm-detail-section h4{
font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
margin-bottom:12px;display:flex;align-items:center;gap:6px;font-weight:600;
}
.rm-detail-section h4 .material-icons{font-size:16px}
.rm-detail-list{list-style:none;padding:0;margin:0}
.rm-detail-list li{
padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;
color:var(--muted);display:flex;align-items:flex-start;gap:8px;
}
.rm-detail-list li:last-child{border-bottom:none}
.rm-detail-list li .material-icons{font-size:15px;margin-top:2px;flex-shrink:0}
/* Progress bar inside detail */
.rm-progress-bar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-top:8px}
.rm-progress-fill{height:100%;border-radius:4px;transition:width .6s ease}
/* Legend */
.rm-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.rm-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.rm-legend-swatch{width:24px;height:10px;border-radius:4px}
/* ── OKR Tracker Styles ── */
.okr-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px}
.okr-kpi{
background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:14px 18px;backdrop-filter:blur(20px);transition:all .3s ease;text-align:center;
}
.okr-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.3)}
.okr-kpi-value{font-size:24px;font-weight:700;color:var(--text);margin-bottom:2px}
.okr-kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.okr-filters{display:flex;gap:12px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
/* Objective Accordion */
.okr-obj{
background:var(--panel);border:1px solid var(--border);border-radius:18px;
backdrop-filter:blur(20px);margin-bottom:16px;overflow:hidden;transition:all .3s ease;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.okr-obj:hover{box-shadow:0 15px 40px rgba(0,0,0,.25)}
.okr-obj.expanded{border-color:rgba(43,139,230,.25)}
.okr-obj-header{
display:flex;align-items:center;gap:14px;padding:20px 24px;cursor:pointer;
transition:background .2s;
}
.okr-obj-header:hover{background:rgba(255,255,255,.02)}
.okr-obj-icon{
width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;
}
.okr-obj-icon .material-icons{font-size:22px}
.okr-obj-info{flex:1;min-width:0}
.okr-obj-title{font-size:16px;font-weight:700;color:var(--text)}
.okr-obj-owner{font-size:12px;color:var(--muted);margin-top:2px}
.okr-obj-meta{display:flex;gap:8px;align-items:center;flex-shrink:0}
.okr-obj-pct{font-size:22px;font-weight:800;min-width:52px;text-align:right}
.okr-obj-expand{
width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
justify-content:center;background:rgba(255,255,255,.05);border:1px solid var(--border);
color:var(--muted);transition:all .2s;flex-shrink:0;
}
.okr-obj.expanded .okr-obj-expand{background:rgba(43,139,230,.15);color:var(--primary);transform:rotate(180deg)}
.okr-obj-progress{
height:6px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:10px;overflow:hidden;
}
.okr-obj-progress-fill{height:100%;border-radius:3px;transition:width .6s ease}
/* Key Results inside objective */
.okr-krs{padding:0 24px 20px;display:none}
.okr-obj.expanded .okr-krs{display:block}
.okr-kr{
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
border-radius:14px;padding:16px 18px;margin-bottom:10px;
transition:all .3s ease;
}
.okr-kr:last-child{margin-bottom:0}
.okr-kr:hover{border-color:rgba(43,139,230,.2);background:rgba(255,255,255,.05)}
.okr-kr-top{display:flex;align-items:flex-start;gap:12px}
.okr-kr-status{
width:28px;height:28px;border-radius:8px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;margin-top:1px;
}
.okr-kr-status .material-icons{font-size:16px}
.okr-kr-info{flex:1;min-width:0}
.okr-kr-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.5}
.okr-kr-metric{font-size:11px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.okr-kr-metric span{display:flex;align-items:center;gap:4px}
.okr-kr-metric .material-icons{font-size:13px}
.okr-kr-pct{font-size:16px;font-weight:700;flex-shrink:0;min-width:42px;text-align:right}
.okr-kr-bar{
height:5px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:10px;overflow:hidden;
}
.okr-kr-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
/* KR detail expandable area */
.okr-kr-detail{display:none;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05)}
.okr-kr.kr-expanded .okr-kr-detail{display:block}
.okr-kr-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.okr-kr-detail-section{
background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);
border-radius:10px;padding:14px;
}
.okr-kr-detail-section h5{
font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
margin-bottom:8px;display:flex;align-items:center;gap:5px;font-weight:600;
}
.okr-kr-detail-section h5 .material-icons{font-size:14px}
.okr-kr-detail-list{list-style:none;padding:0;margin:0}
.okr-kr-detail-list li{
padding:5px 0;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;
border-bottom:1px solid rgba(255,255,255,.03);
}
.okr-kr-detail-list li:last-child{border-bottom:none}
.okr-kr-detail-list li .material-icons{font-size:13px;margin-top:2px;flex-shrink:0}
/* Check-in history dots */
.okr-checkin-dots{display:flex;gap:4px;align-items:flex-end;height:32px;margin-top:6px}
.okr-checkin-dot{
width:8px;border-radius:3px 3px 0 0;background:rgba(43,139,230,.4);
transition:all .2s;position:relative;
}
.okr-checkin-dot:hover{opacity:.8}
/* Cycle selector */
.okr-cycle-selector{
display:inline-flex;align-items:center;gap:8px;
background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;
padding:4px 6px;
}
.okr-cycle-btn{
background:none;border:none;color:var(--muted);cursor:pointer;
display:flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:6px;transition:all .2s;
}
.okr-cycle-btn:hover{background:rgba(255,255,255,.08);color:var(--text)}
.okr-cycle-label{font-size:13px;font-weight:700;color:var(--text);min-width:80px;text-align:center}
/* Confidence tag */
.okr-confidence{
display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
border-radius:6px;font-size:10px;font-weight:700;
}
.okr-confidence.high{background:rgba(16,185,129,.15);color:var(--green)}
.okr-confidence.medium{background:rgba(251,191,36,.15);color:var(--amber)}
.okr-confidence.low{background:rgba(248,113,113,.15);color:var(--red)}
/* ─── Alignment Approval Panel ─── */
.appr-panel{
background:var(--panel);border:1px solid var(--border);border-radius:20px;
padding:28px;margin-top:24px;
}
.appr-title{
font-size:18px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px;margin-bottom:4px;
}
.appr-title .material-icons{color:var(--primary);font-size:22px}
.appr-desc{color:var(--muted);font-size:13px;margin-bottom:24px}
.appr-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.appr-card{
background:rgba(255,255,255,.04);border:2px solid var(--border);border-radius:16px;
padding:24px;text-align:center;transition:all .3s;position:relative;
}
.appr-card.approved{border-color:var(--green);background:rgba(16,185,129,.06)}
.appr-card.rejected{border-color:var(--red);background:rgba(248,113,113,.06)}
.appr-card-avatar{
width:52px;height:52px;border-radius:14px;margin:0 auto 12px;
display:flex;align-items:center;justify-content:center;font-size:24px;
}
.appr-card-role{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}
.appr-card-sub{color:var(--muted);font-size:12px;margin-bottom:16px}
.appr-status{
display:inline-flex;align-items:center;gap:6px;padding:6px 16px;
border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px;
}
.appr-status.pending{background:rgba(255,255,255,.08);color:var(--muted)}
.appr-status.approved{background:rgba(16,185,129,.15);color:var(--green)}
.appr-status.rejected{background:rgba(248,113,113,.15);color:var(--red)}
.appr-btn-row{display:flex;gap:10px;justify-content:center}
.appr-btn{
padding:10px 22px;border-radius:12px;font-family:inherit;font-size:13px;
font-weight:600;cursor:pointer;transition:all .2s;border:none;
display:inline-flex;align-items:center;gap:6px;
}
.appr-btn.approve{background:rgba(16,185,129,.15);color:var(--green)}
.appr-btn.approve:hover{background:rgba(16,185,129,.25);transform:translateY(-1px)}
.appr-btn.reject{background:rgba(248,113,113,.15);color:var(--red)}
.appr-btn.reject:hover{background:rgba(248,113,113,.25);transform:translateY(-1px)}
.appr-btn:disabled{opacity:.4;cursor:default;transform:none!important}
.appr-reasons{
margin-top:16px;display:none;
}
.appr-reasons.show{display:block}
.appr-reasons-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.appr-reason-opt{
display:flex;align-items:center;gap:10px;padding:10px 14px;
border-radius:10px;cursor:pointer;transition:all .2s;margin-bottom:4px;
background:rgba(255,255,255,.03);border:1px solid transparent;
}
.appr-reason-opt:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.appr-reason-opt.selected{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.3)}
.appr-reason-radio{
width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;
}
.appr-reason-opt.selected .appr-reason-radio{border-color:var(--red);background:var(--red)}
.appr-reason-opt.selected .appr-reason-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#171e27}
.appr-reason-text{color:var(--text);font-size:13px}
.appr-reason-submit{
margin-top:12px;padding:8px 20px;border-radius:10px;background:rgba(248,113,113,.15);
color:var(--red);font-family:inherit;font-size:13px;font-weight:600;
cursor:pointer;border:1px solid rgba(248,113,113,.2);transition:all .2s;
}
.appr-reason-submit:hover{background:rgba(248,113,113,.25)}
.appr-divider{
height:1px;background:var(--border);margin:24px 0;
}
/* Executive Summary */
.exec-summary{
display:none;animation:summaryIn .5s ease forwards;
}
.exec-summary.show{display:block}
@keyframes summaryIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.exec-summary-head{
display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.exec-summary-badge{
display:inline-flex;align-items:center;gap:6px;padding:8px 18px;
border-radius:12px;background:rgba(16,185,129,.15);color:var(--green);
font-size:14px;font-weight:700;
}
.exec-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.exec-summary-card{
background:rgba(255,255,255,.04);border:1px solid var(--border);
border-radius:14px;padding:20px;
}
.exec-summary-card h4{
font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;
display:flex;align-items:center;gap:8px;
}
.exec-summary-card h4 .material-icons{font-size:18px}
.exec-summary-card ul{list-style:none;padding:0}
.exec-summary-card ul li{
padding:6px 0;color:var(--muted);font-size:13px;display:flex;align-items:flex-start;gap:8px;
border-bottom:1px solid rgba(255,255,255,.04);
}
.exec-summary-card ul li:last-child{border-bottom:none}
.exec-summary-card ul li .material-icons{font-size:14px;margin-top:2px;flex-shrink:0}
.exec-summary-footer{
display:flex;align-items:center;justify-content:space-between;
padding:16px 20px;background:rgba(255,255,255,.04);border-radius:14px;
border:1px solid var(--border);
}
.exec-summary-stamp{display:flex;align-items:center;gap:10px}
.exec-summary-stamp-icon{
width:40px;height:40px;border-radius:12px;background:rgba(16,185,129,.15);
display:flex;align-items:center;justify-content:center;color:var(--green);
}
.exec-summary-stamp-text{font-size:13px;color:var(--text);font-weight:600}
.exec-summary-stamp-date{font-size:11px;color:var(--muted)}
/* ─── Product Picker Modal ─── */
.pp-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
z-index:5000;display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.pp-overlay.open{opacity:1;pointer-events:all}
.pp-modal{
background:linear-gradient(135deg,#141c28,#1b2432);border:1px solid var(--border);
border-radius:20px;width:640px;max-width:92vw;max-height:80vh;display:flex;
flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.5);
transform:scale(.95) translateY(10px);transition:transform .25s ease;
}
.pp-overlay.open .pp-modal{transform:scale(1) translateY(0)}
.pp-modal-head{
display:flex;align-items:center;justify-content:space-between;
padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.pp-modal-title{font-size:18px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px}
.pp-modal-title .material-icons{color:var(--primary);font-size:22px}
.pp-close{
background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;
border-radius:8px;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.pp-close:hover{background:rgba(255,255,255,.1);color:var(--text)}
.pp-search-wrap{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.pp-search{
width:100%;background:rgba(255,255,255,.07);border:1px solid var(--border);
border-radius:12px;color:var(--text);padding:10px 14px 10px 40px;
font-family:inherit;font-size:14px;outline:none;transition:border-color .2s;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23a1a1aa'%3E%3Cpath d='M12.5 11h-.79l-.28-.27A6.47 6.47 0 0013 6.5 6.5 6.5 0 106.5 13c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L17.49 16l-4.99-5zm-6 0C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:14px center;
}
.pp-search:focus{border-color:var(--primary)}
.pp-list{overflow-y:auto;flex:1;padding:8px}
.pp-item{
display:flex;align-items:center;gap:14px;padding:14px 20px;margin:4px 8px;
border-radius:14px;cursor:pointer;transition:all .2s;border:1px solid transparent;
}
.pp-item:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.pp-item.selected{background:rgba(43,139,230,.12);border-color:var(--primary)}
.pp-item-icon{
width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;font-size:18px;
}
.pp-item-info{flex:1;min-width:0}
.pp-item-name{font-weight:600;color:var(--text);font-size:14px}
.pp-item-meta{color:var(--muted);font-size:12px;margin-top:2px;display:flex;gap:12px}
.pp-item-badge{
padding:3px 10px;border-radius:8px;font-size:11px;font-weight:600;
display:inline-flex;align-items:center;gap:4px;
}
.pp-item-badge.green{background:rgba(16,185,129,.15);color:var(--green)}
.pp-item-badge.amber{background:rgba(251,191,36,.15);color:var(--amber)}
.pp-item-badge.red{background:rgba(248,113,113,.15);color:var(--red)}
.pp-modal-foot{
padding:16px 24px;border-top:1px solid var(--border);display:flex;
align-items:center;justify-content:space-between;flex-shrink:0;
}
.pp-foot-info{color:var(--muted);font-size:12px}
.pp-foot-actions{display:flex;gap:10px}
.pp-item-score{
display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;margin-left:8px;
}
.pp-item-score-val{
font-size:18px;font-weight:800;
background:var(--grad);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.pp-item-score-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.pp-item-tier{
padding:3px 10px;border-radius:8px;font-size:10px;font-weight:700;white-space:nowrap;
}
.pp-item-tier.t1{background:rgba(16,185,129,.15);color:var(--green)}
.pp-item-tier.t2{background:rgba(43,139,230,.15);color:var(--primary)}
.pp-item-tier.t3{background:rgba(251,191,36,.15);color:var(--amber)}
.pp-item-impact{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ─── Settings Page ─── */
.set-grid{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 80px)}
.set-sidebar{
background:var(--panel);border-right:1px solid var(--border);padding:20px 0;
overflow-y:auto;
}
.set-nav-item{
display:flex;align-items:center;gap:12px;padding:12px 24px;cursor:pointer;
border:none;background:none;color:var(--muted);width:100%;text-align:left;
font-family:inherit;font-size:14px;transition:all .2s;
}
.set-nav-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.set-nav-item.active{
background:linear-gradient(90deg,rgba(43,139,230,.15),transparent);
color:var(--primary);border-left:3px solid var(--primary);font-weight:600;
}
.set-nav-item .material-icons{font-size:20px}
.set-panel{padding:32px;overflow-y:auto}
.set-section{
background:var(--panel);border:1px solid var(--border);border-radius:16px;
padding:28px;margin-bottom:24px;
}
.set-section-title{
font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;
display:flex;align-items:center;gap:10px;
}
.set-section-title .material-icons{font-size:22px;color:var(--primary)}
.set-section-desc{color:var(--muted);font-size:13px;margin-bottom:20px;line-height:1.5}
.set-row{
display:flex;align-items:center;justify-content:space-between;
padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.set-row:last-child{border-bottom:none}
.set-row-info{flex:1;min-width:0}
.set-row-label{font-weight:600;color:var(--text);font-size:14px;margin-bottom:2px}
.set-row-hint{color:var(--muted);font-size:12px;line-height:1.4}
.set-toggle{
position:relative;width:44px;height:24px;cursor:pointer;flex-shrink:0;margin-left:16px;
}
.set-toggle input{opacity:0;width:0;height:0;position:absolute}
.set-toggle .slider{
position:absolute;inset:0;border-radius:12px;
background:rgba(255,255,255,.15);transition:all .3s;
}
.set-toggle .slider::after{
content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;
border-radius:50%;background:#171e27;transition:all .3s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.set-toggle input:checked+.slider{background:var(--primary)}
.set-toggle input:checked+.slider::after{transform:translateX(20px)}
.set-select{
background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:10px;
color:var(--text);padding:8px 14px;font-family:inherit;font-size:13px;
cursor:pointer;min-width:160px;outline:none;transition:border-color .2s;
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.set-select:focus{border-color:var(--primary)}
.set-select option{background:#141c28;color:var(--text)}
.set-input{
background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:10px;
color:var(--text);padding:8px 14px;font-family:inherit;font-size:13px;
outline:none;transition:border-color .2s;width:220px;
}
.set-input:focus{border-color:var(--primary)}
.set-color-grid{display:flex;gap:8px;flex-wrap:wrap}
.set-color-swatch{
width:32px;height:32px;border-radius:10px;cursor:pointer;border:2px solid transparent;
transition:all .2s;position:relative;
}
.set-color-swatch:hover{transform:scale(1.15)}
.set-color-swatch.active{border-color:rgba(201,209,220,.14);box-shadow:0 0 12px rgba(255,255,255,.3)}
.set-color-swatch.active::after{
content:'✓';position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.set-user-card{
display:flex;align-items:center;gap:16px;padding:20px;
background:rgba(255,255,255,.04);border-radius:12px;margin-bottom:20px;
}
.set-avatar{
width:56px;height:56px;border-radius:16px;
background:var(--grad);display:flex;align-items:center;justify-content:center;
font-size:22px;font-weight:700;color:#fff;flex-shrink:0;
}
.set-user-name{font-size:16px;font-weight:700;color:var(--text)}
.set-user-role{color:var(--muted);font-size:13px}
.set-badge{
display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
border-radius:8px;font-size:11px;font-weight:600;
}
.set-badge.pro{background:rgba(84,104,242,.2);color:var(--primary-2)}
.set-badge.active{background:rgba(16,185,129,.15);color:var(--green)}
.set-shortcut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.set-shortcut{
display:flex;align-items:center;justify-content:space-between;
padding:12px 16px;background:rgba(255,255,255,.04);border-radius:10px;
}
.set-shortcut-label{color:var(--muted);font-size:13px}
.set-shortcut-keys{
display:flex;gap:4px;
}
.set-kbd{
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;
color:var(--text);font-family:'Inter',monospace;min-width:24px;text-align:center;
}
.set-data-row{
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;background:rgba(255,255,255,.04);border-radius:10px;margin-bottom:8px;
}
.set-data-info{display:flex;align-items:center;gap:12px}
.set-data-info .material-icons{color:var(--primary);font-size:20px}
.set-data-title{font-weight:600;color:var(--text);font-size:13px}
.set-data-meta{color:var(--muted);font-size:11px}
.set-btn-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.set-btn{
padding:8px 18px;border-radius:10px;font-family:inherit;font-size:13px;
font-weight:600;cursor:pointer;transition:all .2s;border:none;
}
.set-btn.primary{background:var(--grad);color:#fff}
.set-btn.primary:hover{opacity:.9;transform:translateY(-1px)}
.set-btn.danger{background:rgba(248,113,113,.15);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.set-btn.danger:hover{background:rgba(248,113,113,.25)}
.set-btn.ghost{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--border)}
.set-btn.ghost:hover{background:rgba(255,255,255,.12)}
.set-notif-row{
display:flex;align-items:center;gap:12px;padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}
.set-notif-row:last-child{border-bottom:none}
.set-notif-icon{
width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;
}
.set-notif-icon.blue{background:rgba(43,139,230,.15);color:var(--primary)}
.set-notif-icon.green{background:rgba(16,185,129,.15);color:var(--green)}
.set-notif-icon.amber{background:rgba(251,191,36,.15);color:var(--amber)}
.set-notif-icon.red{background:rgba(248,113,113,.15);color:var(--red)}
.set-version{
text-align:center;padding:20px;color:var(--muted);font-size:12px;
border-top:1px solid var(--border);margin-top:12px;
}
/* Print */
@media print{
body{background:#fff;color:#253141}
.sidebar{display:none}
.card,.flow-card,.benefits-bar,.strat-lane,.strat-detail,.sh-detail,.sh-card,.rm-timeline-wrap,.rm-detail,.okr-obj,.appr-panel,.appr-card,.exec-summary-card{border:1px solid #d6dce4;box-shadow:none;background:#fafafa}
}
@media(max-width:900px){
.app{flex-direction:column}
aside.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border)}
.flow-grid{grid-template-columns:1fr;gap:16px}
.flow-connector{flex-direction:row;height:40px}
.flow-connector .arrow-line{height:2px;width:100%}
.control-row{flex-direction:column}
.strat-kpis{grid-template-columns:1fr 1fr}
.strat-detail-grid{grid-template-columns:1fr}
.strat-nodes{flex-direction:column}
.sh-kpis{grid-template-columns:repeat(3,1fr)}
.sh-detail-grid{grid-template-columns:1fr}
.sh-cards-grid{grid-template-columns:1fr}
.sh-matrix{height:320px}
.rm-kpis{grid-template-columns:repeat(3,1fr)}
.rm-detail-grid{grid-template-columns:1fr}
.rm-swimlane-label,.rm-swimlane-label-head{width:140px;min-width:140px}
.okr-kpis{grid-template-columns:repeat(3,1fr)}
.okr-kr-detail-grid{grid-template-columns:1fr}
.set-grid{grid-template-columns:1fr}
.set-sidebar{border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:0}
.set-nav-item{white-space:nowrap;padding:12px 16px}
.set-nav-item.active{border-left:none;border-bottom:3px solid var(--primary)}
.set-shortcut-grid{grid-template-columns:1fr}
.appr-cards{grid-template-columns:1fr}
.exec-summary-grid{grid-template-columns:1fr}
}
/* ─── AI Assistant Styles ─── */
.ai-fab{
position:fixed;bottom:28px;right:28px;width:56px;height:56px;border-radius:50%;
background:linear-gradient(135deg,#5468f2,#2b8be6);border:none;cursor:pointer;
box-shadow:0 8px 32px rgba(84,104,242,.4);z-index:4000;
display:flex;align-items:center;justify-content:center;
transition:all .3s ease;animation:aiFabPulse 3s ease-in-out infinite;
}
.ai-fab:hover{transform:scale(1.1);box-shadow:0 12px 40px rgba(84,104,242,.5)}
.ai-fab .material-icons{color:#fff;font-size:26px}
@keyframes aiFabPulse{0%,100%{box-shadow:0 8px 32px rgba(84,104,242,.4)}50%{box-shadow:0 8px 32px rgba(84,104,242,.6),0 0 0 8px rgba(84,104,242,.1)}}
.ai-panel{
position:fixed;right:-420px;top:0;bottom:0;width:420px;
background:linear-gradient(180deg,#0b0e13,#141c28);
border-left:1px solid rgba(84,104,242,.2);z-index:4500;
display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);
box-shadow:-8px 0 40px rgba(0,0,0,.4);
}
.ai-panel.open{right:0}
.ai-panel-header{
display:flex;align-items:center;gap:12px;padding:20px 24px;
border-bottom:1px solid rgba(84,104,242,.15);flex-shrink:0;
background:linear-gradient(135deg,rgba(84,104,242,.08),rgba(43,139,230,.06));
}
.ai-panel-logo{
width:40px;height:40px;border-radius:12px;
background:linear-gradient(135deg,#5468f2,#2b8be6);
display:flex;align-items:center;justify-content:center;
}
.ai-panel-logo .material-icons{color:#fff;font-size:22px}
.ai-panel-title{font-size:16px;font-weight:700;color:var(--text)}
.ai-panel-sub{font-size:11px;color:var(--primary-2);font-weight:600;letter-spacing:.5px}
.ai-panel-close{
margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--border);
border-radius:10px;width:36px;height:36px;display:flex;align-items:center;
justify-content:center;cursor:pointer;color:var(--muted);transition:all .2s;
}
.ai-panel-close:hover{background:rgba(255,255,255,.12);color:var(--text)}
.ai-messages{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.ai-msg{display:flex;gap:10px;align-items:flex-start;animation:aiMsgIn .3s ease}
@keyframes aiMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ai-msg-avatar{
width:32px;height:32px;border-radius:10px;display:flex;align-items:center;
justify-content:center;flex-shrink:0;font-size:14px;font-weight:700;
}
.ai-msg-avatar.ai{background:linear-gradient(135deg,#5468f2,#2b8be6);color:#fff}
.ai-msg-avatar.user{background:rgba(255,255,255,.1);color:var(--text)}
.ai-msg-content{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
border-radius:14px;padding:12px 16px;flex:1;min-width:0;
font-size:13px;line-height:1.7;color:var(--muted);
}
.ai-msg.ai .ai-msg-content{border-color:rgba(84,104,242,.12);background:rgba(84,104,242,.04)}
.ai-msg-content strong{color:var(--text)}
.ai-msg-content ul{margin:8px 0 0;padding-left:16px}
.ai-msg-content li{margin-bottom:4px}
.ai-typing{display:flex;gap:4px;padding:8px 0}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--primary-2);
animation:aiTyping 1.4s infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes aiTyping{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.ai-input-area{
padding:16px 24px;border-top:1px solid rgba(84,104,242,.15);flex-shrink:0;
background:rgba(0,0,0,.2);
}
.ai-input-row{display:flex;gap:10px;align-items:flex-end}
.ai-input{
flex:1;background:rgba(255,255,255,.06);border:1px solid var(--border);
border-radius:12px;color:var(--text);padding:10px 14px;font-family:inherit;
font-size:13px;outline:none;resize:none;min-height:42px;max-height:120px;
transition:border-color .2s;
}
.ai-input:focus{border-color:var(--primary-2)}
.ai-input::placeholder{color:rgba(255,255,255,.25)}
.ai-send{
width:42px;height:42px;border-radius:12px;border:none;cursor:pointer;
background:linear-gradient(135deg,#5468f2,#2b8be6);
display:flex;align-items:center;justify-content:center;
transition:all .2s;flex-shrink:0;
}
.ai-send:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(84,104,242,.3)}
.ai-send .material-icons{color:#fff;font-size:20px}
.ai-quick-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ai-quick-btn{
padding:5px 12px;border-radius:8px;border:1px solid rgba(84,104,242,.2);
background:rgba(84,104,242,.06);color:var(--primary-2);font-size:11px;
font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;
}
.ai-quick-btn:hover{background:rgba(84,104,242,.15);border-color:rgba(84,104,242,.4)}
/* AI Insight Cards (inline in pages) */
.ai-insight-card{
background:linear-gradient(135deg,rgba(84,104,242,.06),rgba(43,139,230,.04));
border:1px solid rgba(84,104,242,.2);border-radius:16px;padding:20px;
margin-bottom:20px;position:relative;overflow:hidden;
}
.ai-insight-card::before{
content:'';position:absolute;top:0;right:0;width:120px;height:120px;
background:radial-gradient(circle,rgba(84,104,242,.1),transparent 70%);pointer-events:none;
}
.ai-insight-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ai-insight-badge{
display:inline-flex;align-items:center;gap:5px;padding:4px 12px;
border-radius:8px;background:linear-gradient(135deg,rgba(84,104,242,.2),rgba(43,139,230,.15));
color:var(--primary-2);font-size:11px;font-weight:700;letter-spacing:.5px;
}
.ai-insight-badge .material-icons{font-size:14px}
.ai-insight-title{font-size:14px;font-weight:700;color:var(--text)}
.ai-insight-body{font-size:13px;color:var(--muted);line-height:1.7}
.ai-insight-body ul{list-style:none;padding:0;margin:8px 0 0}
.ai-insight-body li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:8px}
.ai-insight-body li:last-child{border-bottom:none}
.ai-insight-body li .material-icons{font-size:16px;margin-top:2px;flex-shrink:0;color:var(--primary-2)}
.ai-insight-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ai-insight-btn{
padding:7px 14px;border-radius:10px;border:1px solid rgba(84,104,242,.2);
background:rgba(84,104,242,.08);color:var(--primary-2);font-size:12px;
font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;
display:inline-flex;align-items:center;gap:5px;
}
.ai-insight-btn:hover{background:rgba(84,104,242,.18);border-color:rgba(84,104,242,.4);transform:translateY(-1px)}
.ai-insight-btn .material-icons{font-size:15px}
.ai-insight-btn.primary{background:linear-gradient(135deg,rgba(84,104,242,.25),rgba(43,139,230,.2));border-color:rgba(84,104,242,.3)}
/* AI Score Ring */
.ai-score-ring{position:relative;width:52px;height:52px;flex-shrink:0}
.ai-score-ring svg{transform:rotate(-90deg)}
.ai-score-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:4}
.ai-score-ring .ring-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ai-score-value{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:800;color:var(--text);
}
/* AI Suggestion Chips */
.ai-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ai-chip{
display:inline-flex;align-items:center;gap:5px;padding:6px 14px;
border-radius:999px;border:1px solid rgba(84,104,242,.2);
background:rgba(84,104,242,.06);color:var(--primary-2);font-size:12px;
font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;
}
.ai-chip:hover{background:rgba(84,104,242,.15);border-color:rgba(84,104,242,.4);transform:translateY(-1px)}
.ai-chip .material-icons{font-size:14px}
/* AI Loading Shimmer */
.ai-shimmer{
background:linear-gradient(90deg,rgba(84,104,242,.04) 25%,rgba(84,104,242,.1) 50%,rgba(84,104,242,.04) 75%);
background-size:200% 100%;animation:aiShimmer 1.5s infinite;border-radius:10px;
}
@keyframes aiShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* AI Header Button */
.btn.ai-btn{
background:linear-gradient(135deg,#5468f2,#2b8be6);
box-shadow:0 4px 15px rgba(84,104,242,.25);
}
.btn.ai-btn:hover{box-shadow:0 6px 25px rgba(84,104,242,.4);transform:translateY(-1px)}
/* AI Confidence Meter */
.ai-confidence{display:flex;align-items:center;gap:8px}
.ai-confidence-bar{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.ai-confidence-fill{height:100%;border-radius:3px;transition:width .6s ease}
.ai-confidence-label{font-size:11px;font-weight:700;min-width:36px;text-align:right}
/* ── Pria Chatbot ── */
.pria-fab{position:fixed;bottom:28px;right:28px;z-index:9998;width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,#2b8be6,#5468f2);border:none;color:#fff;cursor:pointer;
box-shadow:0 8px 25px rgba(43,139,230,.45);display:flex;align-items:center;justify-content:center;
animation:priaPulse 3s infinite}
.pria-fab .material-icons{font-size:30px}
@keyframes priaPulse{0%{box-shadow:0 8px 25px rgba(43,139,230,.45),0 0 0 0 rgba(84,104,242,.6)}
70%{box-shadow:0 8px 25px rgba(43,139,230,.45),0 0 0 16px rgba(84,104,242,0)}
100%{box-shadow:0 8px 25px rgba(43,139,230,.45),0 0 0 0 rgba(84,104,242,0)}}
.pria-win{position:fixed;bottom:104px;right:28px;z-index:9999;width:400px;height:calc(100vh - 210px);max-height:calc(100vh - 210px);
background:rgba(21,27,36,.96);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden}
.pria-win.open{display:flex}
.pria-hd{background:linear-gradient(135deg,#2b8be6,#5468f2);padding:16px;display:flex;align-items:center;gap:12px;color:#fff}
.pria-av{width:42px;height:42px;border-radius:50%;background:url('../pria-avatar.png') center/cover,#202a39;border:2px solid rgba(255,255,255,.3)}
.pria-hd .nm{font-weight:700;font-size:16px}
.pria-hd .st{font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px}
.pria-hd .st::before{content:"";width:8px;height:8px;background:#10b981;border-radius:50%}
.pria-x{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pria-msgs{flex:1;padding:18px;overflow-y:auto;background:rgba(0,0,0,.2);scroll-behavior:smooth}
.pria-msg{margin-bottom:14px;display:flex;align-items:flex-start;gap:10px;animation:priaSlideIn .3s}
@keyframes priaSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pria-msg.user{justify-content:flex-end}
.pria-msg .av{width:30px;height:30px;border-radius:50%;background:url('../pria-avatar.png') center/cover,linear-gradient(135deg,#2b8be6,#5468f2);color:transparent;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden}
.pria-msg .bub{max-width:78%;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.5;color:#d8e9fa;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:4px}
.pria-msg.user .bub{background:linear-gradient(135deg,#2b8be6,#5468f2);color:#fff;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.pria-msg .bub.ai h2,.pria-msg .bub.ai h3{margin:6px 0;color:#b8c1fa;font-size:13px}
.pria-msg .bub.ai ul,.pria-msg .bub.ai ol{margin:6px 0;padding-left:18px}
.pria-msg .bub.ai p{margin:4px 0}
.pria-input{padding:14px;background:rgba(0,0,0,.3);border-top:1px solid rgba(255,255,255,.08)}
.pria-input-row{display:flex;align-items:center;gap:8px}
.pria-input input{flex:1;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#edf5fd;font-size:13px;outline:none;font-family:inherit}
.pria-input input:focus{border-color:#2b8be6}
#pria-ai-btn{width:40px;height:40px;border-radius:50%;border:2px solid rgba(84,104,242,.5);
background:linear-gradient(135deg,rgba(43,139,230,.2),rgba(84,104,242,.35));color:#8c9bf7;cursor:pointer;
display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
#pria-ai-btn:hover{background:linear-gradient(135deg,rgba(43,139,230,.4),rgba(84,104,242,.55));border-color:#5468f2;color:#b8c1fa;transform:scale(1.08);box-shadow:0 0 16px rgba(84,104,242,.4)}
#pria-ai-btn .material-icons{font-size:20px}
#pria-ai-btn.loading{pointer-events:none;animation:sparklePulse 1.2s ease-in-out infinite}
@keyframes sparklePulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(84,104,242,.3)}50%{opacity:.6;box-shadow:0 0 20px rgba(84,104,242,.6)}}
.pria-qa{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pria-qa button{padding:6px 10px;font-size:11px;border-radius:14px;cursor:pointer;
background:rgba(43,139,230,.15);border:1px solid rgba(43,139,230,.4);color:#c9d2dc;font-family:inherit;transition:all .2s}
.pria-qa button:hover{background:rgba(43,139,230,.3);border-color:#2b8be6}
.pria-qa button.tut{background:rgba(16,185,129,.15);border-color:#10b981;color:#6ee7b7}
.pria-qa button.vid{background:rgba(239,68,68,.15);border-color:#ef4444;color:#fca5a5}
.pria-qa button.meet{background:rgba(84,104,242,.15);border-color:#5468f2;color:#b8c1fa}
.pria-qa button.gen{background:rgba(251,191,36,.15);border-color:#fbbf24;color:#fcd34d}
/* AI Embedded Features */
.ai-rotate-card{background:linear-gradient(135deg,rgba(84,104,242,.08),rgba(43,139,230,.06));border:1px solid rgba(84,104,242,.2);border-radius:16px;padding:20px 24px;margin-bottom:20px;position:relative;overflow:hidden}
.ai-rotate-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(84,104,242,.12),transparent 70%);pointer-events:none}
.ai-rotate-card .ai-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:8px;background:linear-gradient(135deg,rgba(84,104,242,.2),rgba(43,139,230,.15));color:#8c9bf7;font-size:11px;font-weight:700;letter-spacing:.5px}
.ai-rotate-card .ai-badge .material-icons{font-size:14px}
.ai-rotate-card .ai-insight-text{font-size:14px;color:#d8e9fa;line-height:1.7;margin:14px 0}
.ai-rotate-card .ai-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ai-rotate-card .ai-tag{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#8c99a8}
.ai-rotate-card .ai-tag.positive{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:#6ee7b7}
.ai-rotate-card .ai-tag.warning{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:#fcd34d}
.ai-rotate-card .ai-tag.negative{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);color:#fca5a5}
.ai-rotate-card .ai-refresh{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8c99a8;transition:all .2s}
.ai-rotate-card .ai-refresh:hover{background:rgba(84,104,242,.15);color:#b8c1fa;transform:rotate(180deg)}
.ai-rotate-card .ai-timestamp{font-size:11px;color:rgba(255,255,255,.3);margin-top:10px}
.ai-gen-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;margin-bottom:16px}
.ai-gen-card h4{font-size:14px;font-weight:700;color:#f2f5f9;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ai-gen-card h4 .material-icons{font-size:18px;color:#5468f2}
.ai-gen-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ai-gen-btn{padding:8px 16px;border-radius:10px;border:1px solid rgba(84,104,242,.25);background:rgba(84,104,242,.08);color:#b8c1fa;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.ai-gen-btn:hover{background:rgba(84,104,242,.2);border-color:rgba(84,104,242,.5);transform:translateY(-1px)}
.ai-gen-btn .material-icons{font-size:16px}
.ai-gen-output{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px;margin-top:12px;font-size:13px;line-height:1.7;color:#d8e9fa;max-height:400px;overflow-y:auto;display:none}
.ai-gen-output.visible{display:block}
.ai-gen-actions{display:flex;gap:8px;margin-top:12px}
.ai-gen-actions button{padding:6px 12px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;display:inline-flex;align-items:center;gap:4px}
.ai-gen-copy{background:rgba(43,139,230,.15);border:1px solid rgba(43,139,230,.3);color:#9dc8f3}
.ai-gen-copy:hover{background:rgba(43,139,230,.3)}
.ai-gen-download{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#6ee7b7}
.ai-gen-download:hover{background:rgba(16,185,129,.3)}
.ai-gen-pria{background:rgba(84,104,242,.15);border:1px solid rgba(84,104,242,.3);color:#b8c1fa}
.ai-gen-pria:hover{background:rgba(84,104,242,.3)}
/* AI Interactive Features */
.ai-nl-search{display:flex;gap:8px;margin-bottom:16px;align-items:center}
.ai-nl-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(84,104,242,.2);border-radius:12px;color:#edf5fd;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}
.ai-nl-input:focus{border-color:#5468f2;box-shadow:0 0 0 3px rgba(84,104,242,.1)}
.ai-nl-input::placeholder{color:rgba(255,255,255,.25)}
.ai-nl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ai-nl-chip{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(84,104,242,.12);border:1px solid rgba(84,104,242,.25);color:#b8c1fa;display:inline-flex;align-items:center;gap:4px}
.ai-nl-chip .material-icons{font-size:12px}
.ai-nl-explain{font-size:12px;color:#8c99a8;margin:6px 0;font-style:italic}
.ai-simulator{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px}
.ai-sim-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0}
.ai-sim-select{padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#edf5fd;font-size:13px;font-family:inherit;min-width:180px}
.ai-sim-slider{-webkit-appearance:none;width:120px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);outline:none}
.ai-sim-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#5468f2,#2b8be6);cursor:pointer;border:2px solid rgba(255,255,255,.3)}
.ai-sim-result{margin-top:14px;padding:16px;border-radius:12px;display:none}
.ai-sim-result.visible{display:block}
.ai-companion-panel{position:fixed;right:-440px;top:0;bottom:0;width:440px;background:rgba(21,27,36,.97);backdrop-filter:blur(20px);border-left:1px solid rgba(84,104,242,.15);z-index:4000;transition:right .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.4)}
.ai-companion-panel.open{right:0}
/* ── Pria AI Insights Banner (per-page) ── */
.ai-insight-banner{margin:0 0 20px 0;padding:14px 18px;background:linear-gradient(135deg,rgba(84,104,242,.14),rgba(43,139,230,.10));border:1px solid rgba(84,104,242,.35);border-radius:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ai-insight-banner .aib-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.ai-insight-banner .aib-ico{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#5468f2,#5468f2);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(84,104,242,.4)}
.ai-insight-banner .aib-ico .material-icons{color:#fff;font-size:20px}
.ai-insight-banner .aib-title{font-size:13.5px;font-weight:600;color:#c9d2dc}
.ai-insight-banner .aib-sub{font-size:12px;color:#8c99a8;margin-top:2px}
.ai-insight-banner .aib-actions{display:flex;gap:8px;flex-wrap:wrap}
.aib-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:rgba(84,104,242,.18);border:1px solid rgba(84,104,242,.45);color:#c9d2dc;font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .15s ease;font-family:inherit}
.aib-btn:hover{background:rgba(84,104,242,.32);transform:translateY(-1px)}
.aib-btn .material-icons{font-size:15px;color:#b8c1fa}
.aib-chips{margin:-8px 0 16px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aib-chips-label{font-size:11px;color:#8c99a8;text-transform:uppercase;letter-spacing:.6px;font-weight:500;margin-right:4px}
.aib-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;background:rgba(84,104,242,.08);border:1px solid rgba(84,104,242,.25);color:#cdd4df;font-size:11.5px;border-radius:14px;cursor:pointer;transition:all .15s ease;font-family:inherit}
.aib-chip:hover{background:rgba(84,104,242,.2);border-color:rgba(84,104,242,.5);color:#fff}
.aib-chip .material-icons{font-size:13px;color:#b8c1fa}
/* ── Inline explain-with-AI sparkle ── */
.explain-ai-btn{background:transparent;border:none;padding:2px;margin-left:6px;cursor:pointer;vertical-align:middle;opacity:.55;transition:opacity .15s ease,transform .15s ease;display:inline-flex;align-items:center}
.explain-ai-btn:hover{opacity:1;transform:scale(1.15)}
.explain-ai-btn .material-icons{font-size:15px;color:#8c9bf7}
/* ── Generic AI Modal (Pria insights) ── */
.pai-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10050;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.pai-modal-overlay.open{display:flex}
.pai-modal{width:min(880px,94vw);max-height:86vh;background:linear-gradient(180deg,#151b24 0%,#10151b 100%);border:1px solid rgba(84,104,242,.4);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(84,104,242,.18)}
.pai-modal-hd{padding:16px 20px;background:linear-gradient(90deg,#1431ed,#4255d9);color:#fff;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:space-between}
.pai-modal-hd h3{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0}
.pai-modal-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pai-modal-x:hover{background:rgba(255,255,255,.28)}
.pai-modal-body{padding:20px 22px;overflow-y:auto;flex:1;color:#cdd4df;font-size:14px;line-height:1.6}
.pai-modal-body h1,.pai-modal-body h2,.pai-modal-body h3{color:#8c9bf7;margin-top:16px;margin-bottom:8px;font-weight:700}
.pai-modal-body h1{font-size:19px;border-bottom:1px solid rgba(84,104,242,.25);padding-bottom:6px}
.pai-modal-body h2{font-size:16px}
.pai-modal-body h3{font-size:14px;color:#b8c1fa}
.pai-modal-body ul,.pai-modal-body ol{padding-left:22px;margin:6px 0 10px 0}
.pai-modal-body li{margin-bottom:5px}
.pai-modal-body p{margin-bottom:8px}
.pai-modal-body strong{color:#f2f5f9}
.pai-modal-body em{color:#b8c1fa}
.pai-modal-body code{background:rgba(84,104,242,.15);padding:2px 6px;border-radius:4px;font-size:12px;color:#b8c1fa}
.pai-modal-body table{border-collapse:collapse;width:100%;margin:10px 0}
.pai-modal-body th,.pai-modal-body td{border:1px solid rgba(84,104,242,.2);padding:6px 10px;text-align:left;font-size:13px}
.pai-modal-body thead th{background:rgba(84,104,242,.15);color:#c9d2dc}
.pai-modal-ft{padding:12px 20px;border-top:1px solid rgba(84,104,242,.2);display:flex;justify-content:flex-end;gap:8px}
.pai-modal-btn{background:rgba(84,104,242,.2);border:1px solid rgba(84,104,242,.45);color:#c9d2dc;padding:7px 14px;font-size:12.5px;font-weight:600;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pai-modal-btn:hover{background:rgba(84,104,242,.34)}
.pai-modal-btn .material-icons{font-size:15px}
.pai-loader{text-align:center;padding:24px 0;color:#8c9bf7}
.pai-loader .material-icons{display:block;margin:0 auto 8px;font-size:30px;animation:pai-spark 1.2s ease-in-out infinite}
@keyframes pai-spark{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}}
/* ── Floating Pria toast ── */
.pai-toast{position:fixed;bottom:96px;right:24px;background:linear-gradient(135deg,#1431ed,#4255d9);color:#fff;padding:10px 16px;font-size:13px;font-weight:500;border-radius:22px;box-shadow:0 8px 24px rgba(20,49,237,.45);z-index:99999;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;max-width:360px}
.pai-toast.show{opacity:1;transform:translateY(0)}