/* Sentio IA Ultimate - Frontend SaaS App */
.sentioapp{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.sentioapp-shell{display:grid;grid-template-columns:280px 1fr;min-height:70vh;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;background:#fff}
@media (max-width:980px){.sentioapp-shell{grid-template-columns:1fr}.sentioapp-side{display:none}}
.sentioapp-side{background:#0b1220;color:#fff;padding:16px;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;justify-content:center;padding:16px 0;margin-bottom:12px}
.brand-logo{height:126px;width:auto;object-fit:contain;max-width:100%}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.nav a{color:inherit;text-decoration:none;padding:10px;border-radius:12px}
.nav a.active,.nav a:hover{background:#f1f5f9;color:#0f172a}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.sentioapp-main{padding:16px;background:#f8fafc}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.topbar h1{margin:0;font-size:26px}
.muted{color:#334155;margin:4px 0 0}
.sentio-btn{border:1px solid #d1d5db;background:#fff;border-radius:12px;padding:10px 16px;cursor:pointer;text-decoration:none;color:#0f172a;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:all 0.2s;font-size:14px}
.sentio-btn:hover{background:#f8fafc;border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.sentio-btn.primary{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-color:#1e40af;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.sentio-btn.primary:hover{background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);box-shadow:0 6px 16px rgba(37,99,235,0.4);transform:translateY(-2px)}
.sentio-btn.ghost{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.sentio-btn.ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,.3)}
.sentio-btn:disabled{opacity:.6;cursor:not-allowed}
.help-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1px solid #cbd5e1;font-size:12px;line-height:1}
.view{display:grid;gap:14px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,0.04);transition:all 0.3s}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.12);transform:translateY(-2px)}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media (max-width:980px){.grid2{grid-template-columns:1fr}}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px}
@media (max-width:980px){.metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.metrics{grid-template-columns:1fr}}
.metric{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);position:relative;transition:all 0.3s}
.metric:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.12);border-color:#cbd5e1}
.metric .icon{font-size:22px}
.metric .val{font-size:28px;font-weight:900;margin-top:6px}
.metric .lbl{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-weight:800;gap:8px}
.form label{display:block;font-weight:800;margin-top:10px}
.form input,.form textarea,.form select{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:10px;margin-top:6px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.list li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid #e5e7eb;border-radius:14px;padding:10px;background:#fff}
.note{border:1px solid #e5e7eb;border-radius:14px;padding:10px;background:#fff}
.note.success{border-color:#86efac;background:#f0fdf4}
.note.info{border-color:#93c5fd;background:#eff6ff}
.note .title{font-weight:900}
.note .time{margin-top:6px;font-size:12px;color:#64748b}
.empty{border:1px dashed #cbd5e1;border-radius:16px;padding:16px;text-align:center;background:#fff}
.chat{position:fixed;right:18px;bottom:18px;width:360px;height:520px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:none;flex-direction:column;z-index:99999}
.chat.open{display:flex}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#0b1220;color:#fff;border-radius:18px 18px 0 0}
.chat-title{font-weight:900}
.chat-close{background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer}
.chat-body{padding:12px;overflow:auto;flex:1;background:#f8fafc}
.msg{max-width:85%;padding:10px;border-radius:14px;margin-bottom:8px}
.msg.bot{background:#fff;border:1px solid #e5e7eb}
.msg.user{background:#2563eb;color:#fff;margin-left:auto}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid #d1d5db;background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;color:#0f172a;transition:all .15s ease}
.chip:hover{background:#f1f5f9;border-color:#2563eb;color:#2563eb;transform:translateY(-1px)}
.chat-foot{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e7eb}
.chat-foot input{flex:1;border-radius:12px;border:1px solid #d1d5db;padding:10px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:99998;padding:20px}
.modal.open{display:flex}
.modal-card{width:min(900px,95vw);max-height:90vh;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#0b1220;color:#fff;flex-shrink:0}
.modal-title{font-weight:900}
.modal-close{background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{padding:12px 14px;border-top:1px solid #e5e7eb;display:flex;gap:10px;justify-content:flex-end;flex-shrink:0}
.sentioapp-guest{border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#fff}
.tooltip{position:fixed;max-width:320px;background:#0b1220;color:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:none;z-index:999999}
.tooltip.show{display:block}
.tooltip .tt-title{font-weight:900;margin-bottom:6px}
.tooltip .tt-desc{color:#e2e8f0;font-size:13px;line-height:1.35}
.tour{position:fixed;inset:0;display:none;z-index:999999}
.tour.open{display:block}
.tour-mask{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.tour-highlight{position:absolute;border-radius:14px;box-shadow:0 0 0 6px rgba(37,99,235,.35);outline:2px solid rgba(255,255,255,.9);background:transparent;pointer-events:none}
.tour-card{position:absolute;right:18px;bottom:18px;width:min(420px,90vw);background:#fff;border-radius:18px;border:1px solid #e5e7eb;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:12px}
.tour-progress{font-size:12px;color:#64748b;font-weight:800}
.tour-title{font-weight:900;font-size:18px;margin-top:6px}
.tour-text{color:#0f172a;margin-top:6px;line-height:1.45}
.tour-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.short-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.short-grid div{border:1px solid #e5e7eb;border-radius:14px;padding:10px;display:flex;align-items:center;justify-content:space-between}
.short-grid strong{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;border:1px solid #d1d5db}


/* v2.5.6 - Modern light SaaS UI + Improved contrast + Professional icons */
.sentioapp-shell{background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.06)}
.sentioapp-side{background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);color:#0f172a;border-right:1px solid #e2e8f0}
.brand .logo{background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);color:#fff}
.nav-section{margin-top:10px;font-size:11px;letter-spacing:.08em;font-weight:800;color:#475569}
.side-search{margin-top:6px}
.side-search input{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#0f172a}
.nav a{background:transparent;border-radius:12px;padding:10px 12px;color:#1e293b;font-weight:600;transition:all .15s ease}
.nav a.active{background:#e0e7ff;color:#2563eb}
.nav a:hover{background:#f1f5f9;color:#0f172a}
.nav a .dashicons{font-size:18px;width:18px;height:18px;margin-right:8px;vertical-align:middle}
.sentio-btn{border-radius:12px;transition:all .15s ease}
.sentio-btn.primary{background:#2563eb;border-color:#2563eb}
.sentio-btn.primary:hover{background:#1d4ed8;transform:translateY(-1px)}
.sentio-btn:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,.1)}
.topbar{background:#fff;border-bottom:1px solid #e2e8f0}
.view{padding:18px;background:#f8fafc}

/* Pricing */
.sentio-pricing{max-width:1100px;margin:0 auto}
.pricing-head{padding:16px 6px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr}}
.pricing-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px;box-shadow:0 10px 20px rgba(15,23,42,.04);display:flex;flex-direction:column;gap:12px}
.pricing-title{font-size:18px;font-weight:900}
.pricing-meta{display:flex;flex-direction:column;gap:6px;color:#334155}
.pricing-tag{position:absolute;top:12px;right:12px;background:#111827;color:#fff;font-size:11px;font-weight:800;padding:6px 10px;border-radius:999px}


/* Professional icons + sidebar submenu */
.nav .dashicons{font-size:18px; width:18px; height:18px; line-height:18px;}
.nav-link,.nav-sublink{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; color:#334155; text-decoration:none; font-weight:600;}
.nav-link:hover,.nav-sublink:hover{background:#f1f5f9; color:#0f172a}
.nav-link.active,.nav-sublink.active{background:#dbeafe; color:#0f172a}
.nav-group{margin-top:6px}
.nav-group-title{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; color:#0f172a; font-weight:700; user-select:none}
.nav-sub{margin-left:10px; border-left:1px solid #e2e8f0; padding-left:10px}
.nav-sublink{padding:8px 10px; font-size:13px}

/* Fix left clipping + improve layout */
.sentioapp{padding:16px; box-sizing:border-box}
.sentioapp-shell{overflow:visible}
.sentioapp-main{overflow:visible}

/* Mobile drawer */
.sentioapp-menu-btn{display:none; background:transparent; border:0; font-size:18px; padding:8px 10px; border-radius:10px; cursor:pointer}
.sentioapp-menu-btn:hover{background:#f1f5f9}
.sentioapp-overlay{display:none}
@media (max-width:900px){
  .sentioapp{padding:10px}
  .sentioapp-shell{grid-template-columns:1fr}
  .sentioapp-side{display:block; position:fixed; top:0; left:-290px; width:270px; height:100vh; z-index:9999; box-shadow:0 20px 50px rgba(15,23,42,.25); transition:left .2s ease}
  .sentioapp-side.open{left:0}
  .sentioapp-menu-btn{display:inline-flex; align-items:center; justify-content:center}
  .sentioapp-overlay{display:block; position:fixed; inset:0; background:rgba(2,6,23,.35); z-index:9998; opacity:0; pointer-events:none; transition:opacity .2s ease}
  .sentioapp.drawer-open .sentioapp-overlay{opacity:1; pointer-events:auto}
}


/* Tools */
.tool-head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.tool-title{display:flex; align-items:center; gap:10px; font-size:18px; margin:0}
.tool-title .help-icon{margin-left:auto}
.tool-actions{margin-top:12px}
.tool-output{margin-top:10px; white-space:pre-wrap}

/* Pricing */
.pricing-meta .dashicons{font-size:16px;width:16px;height:16px;line-height:16px;vertical-align:middle;margin-right:6px;color:#0f172a;opacity:.85}
.pricing-meta div{display:flex;align-items:center;gap:8px}

.tools-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}

/* Dashboard layout + charts (v2.5.5) */
.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media (max-width:980px){.dashboard-grid{grid-template-columns:1fr}}
.charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}
@media (max-width:980px){.charts-grid{grid-template-columns:1fr}}
.chart-box{border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:12px}
.chart-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;margin:0 0 8px}
.chart-sub{color:#64748b;font-size:12px;margin-top:2px}
.note-list{max-height:420px;overflow:auto}
.tooltip{pointer-events:none}

/* v2.5.6 - Tutorial + Pricing improvements + Examples */

/* Tutorial Modal */
.modal-wide{max-width:min(960px,94vw)}
.tutorial-header{margin-bottom:16px}
.tutorial-progress{display:flex;gap:10px;justify-content:center;padding:14px 0;border-bottom:1px solid #e2e8f0;margin-bottom:14px}
.tutorial-progress-step{width:36px;height:36px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-weight:900;color:#94a3b8;background:#f8fafc;cursor:pointer;transition:all .2s}
.tutorial-progress-step.active{border-color:#2563eb;background:#2563eb;color:#fff}
.tutorial-body{min-height:380px;padding:14px 0}
.tutorial-footer{display:flex;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid #e2e8f0;margin-top:14px}

/* Tutorial Types */
.tutorial-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tutorial-type-card{background:#f8fafc;border:2px solid #e2e8f0;border-radius:14px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px}
.tutorial-type-card:hover{border-color:#93c5fd;background:#eff6ff;transform:translateY(-2px)}
.tutorial-type-card.selected{border-color:#2563eb;background:#dbeafe;box-shadow:0 4px 12px rgba(37,99,235,.15)}
.tutorial-type-icon{font-size:32px}
.tutorial-type-title{font-weight:900;font-size:14px;color:#0f172a}
.tutorial-type-desc{font-size:12px;color:#64748b;line-height:1.3}
.tutorial-type-examples{font-size:11px;color:#94a3b8;margin-top:4px;font-style:italic}

/* Tutorial Guide */
.tutorial-guide{display:flex;flex-direction:column;gap:14px}
.tutorial-guide-section{padding:14px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}
.tutorial-guide-title{font-weight:900;margin-bottom:8px;color:#0f172a}
.tutorial-guide-text{color:#334155;line-height:1.5;margin-bottom:8px}
.tutorial-guide-list{margin:0;padding-left:20px;color:#334155;line-height:1.6}
.tutorial-guide-list li{margin-bottom:6px}
.tutorial-examples-box{padding:14px;background:#fff;border-radius:12px;border:1px solid #e2e8f0}
.tutorial-examples-title{font-weight:900;margin-bottom:10px;color:#0f172a}
.tutorial-code-example{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:8px;font-family:monospace;font-size:13px;line-height:1.5}
.tutorial-example-item{padding:10px;background:#f8fafc;border-radius:8px;font-size:13px;line-height:1.6;color:#334155}
.tutorial-input-section{margin-top:10px}
.tutorial-input-section label{display:block;font-weight:700;margin-bottom:6px;color:#0f172a}
.tutorial-input-section input,.tutorial-input-section textarea{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font-family:inherit;font-size:14px}
.tutorial-input-section textarea{resize:vertical;min-height:80px}

/* Tutorial Summary */
.tutorial-summary{display:flex;flex-direction:column;gap:14px}
.tutorial-summary-item{padding:12px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0;display:grid;grid-template-columns:140px 1fr;gap:10px;align-items:center}
.tutorial-summary-label{font-weight:700;color:#64748b;font-size:13px}
.tutorial-summary-value{font-weight:900;color:#0f172a;font-size:14px}
.tutorial-final-note{padding:14px;background:#dbeafe;border-radius:10px;border:1px solid #93c5fd;margin-top:6px}
.tutorial-final-note strong{color:#0f172a}
.tutorial-final-note p{color:#334155;margin-top:6px;line-height:1.5}

/* Examples block in dashboard */
.example-item{animation:slideIn .3s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Improved Pricing Page */
.pricing-head{text-align:center;padding:24px 16px}
.pricing-head h2{font-size:32px;font-weight:900;margin:0 0 8px;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pricing-head .muted{font-size:16px}
.pricing-toggle{display:flex;justify-content:center;gap:12px;margin:20px 0}
.pricing-toggle .sentio-btn{min-width:140px;font-weight:700;transition:all .2s}
.pricing-toggle .sentio-btn.primary{box-shadow:0 4px 12px rgba(37,99,235,.25)}
.pricing-banner{padding:14px;border-radius:14px;margin:16px 0;text-align:center;font-size:15px}
.pricing-banner.success{background:#f0fdf4;border:1px solid #86efac;color:#15803d}
.pricing-banner.info{background:#eff6ff;border:1px solid #93c5fd;color:#1e40af}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto}
.pricing-card{transition:all .3s;position:relative}
.pricing-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,23,42,.12)}
.pricing-title{font-size:20px;font-weight:900;color:#0f172a;margin-bottom:4px}
.pricing-sub{font-size:13px;color:#64748b;margin-bottom:12px;min-height:36px}
.pricing-price{font-size:14px;color:#0f172a;padding:14px;background:#f8fafc;border-radius:12px;margin-bottom:12px;text-align:center}
.pricing-price .num{font-size:36px;font-weight:900;color:#2563eb}
.pricing-price .per{font-size:14px;color:#64748b;font-weight:600}
.pricing-meta{font-size:13px;line-height:1.6;color:#475569;padding:12px 0;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9;margin-bottom:12px}
.pricing-meta div{margin-bottom:6px}
.pricing-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:#475569;line-height:1.5}
.pricing-bullets li:before{content:"✓";color:#10b981;font-weight:900;margin-right:8px}
.pricing-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pricing-actions .sentio-btn{width:100%;justify-content:center;font-weight:700}
.pricing-actions .sentio-btn[data-billing="annual"]{display:none}
.pricing-foot{text-align:center;margin-top:24px;padding:20px;background:#f8fafc;border-radius:14px}
.pricing-foot .muted{font-size:14px}

/* Pricing toggle states */
body[data-pricing-mode="annual"] .pricing-price[data-price="monthly"],
body[data-pricing-mode="annual"] .pricing-actions button[data-billing="monthly"]{display:none}
body[data-pricing-mode="annual"] .pricing-price[data-price="annual"],
body[data-pricing-mode="annual"] .pricing-actions button[data-billing="annual"]{display:flex}
body:not([data-pricing-mode="annual"]) .pricing-price[data-price="monthly"],
body:not([data-pricing-mode="annual"]) .pricing-actions button[data-billing="monthly"]{display:flex}
body:not([data-pricing-mode="annual"]) .pricing-price[data-price="annual"],
body:not([data-pricing-mode="annual"]) .pricing-actions button[data-billing="annual"]{display:none}

/* Responsive tutorial */
@media (max-width:720px){
  .tutorial-types{grid-template-columns:1fr}
  .tutorial-summary-item{grid-template-columns:1fr;gap:6px}
  .tutorial-summary-label{font-size:12px}
}

/* v2.5.6 - Tutorial Wizard Styles */
.tutorial-wizard{background:#fff;border-radius:16px;border:1px solid #e5e7eb;overflow:hidden}
.tutorial-progress-bar{height:6px;background:#e5e7eb;position:relative}
.tutorial-progress-fill{height:100%;background:linear-gradient(90deg,#2563eb 0%,#7c3aed 100%);transition:width .3s ease}
.tutorial-step{padding:20px;display:none}
.tutorial-step.active{display:block}
.tutorial-step-header{margin-bottom:16px}
.tutorial-step-title{font-size:22px;font-weight:900;margin-bottom:8px;color:#0f172a}
.tutorial-step-desc{color:#64748b;font-size:14px;line-height:1.5}
.tutorial-types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.tutorial-type-card{border:2px solid #e5e7eb;border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .2s ease}
.tutorial-type-card:hover{border-color:#cbd5e1;background:#f8fafc}
.tutorial-type-card.selected{border-color:#2563eb;background:#eff6ff}
.tutorial-type-icon{font-size:32px;margin-bottom:8px}
.tutorial-type-name{font-weight:800;font-size:14px;color:#0f172a;margin-bottom:4px}
.tutorial-type-desc{font-size:12px;color:#64748b;line-height:1.4}
.tutorial-examples{background:#f8fafc;border-radius:12px;padding:14px;margin-top:12px}
.tutorial-examples-title{font-weight:800;font-size:13px;color:#475569;margin-bottom:10px}
.tutorial-example{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;margin-bottom:8px;font-size:13px;cursor:pointer;transition:all .15s ease}
.tutorial-example:hover{border-color:#2563eb;background:#eff6ff}
.tutorial-example strong{color:#2563eb;font-weight:700}
.tutorial-competitors-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.tutorial-competitor-item{display:flex;gap:10px;align-items:flex-start}
.tutorial-competitor-item input[type="text"]{flex:1}
.tutorial-competitor-item .sentio-btn{flex-shrink:0}
.tutorial-hint{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px;margin-top:12px;font-size:13px;color:#92400e}
.tutorial-hint strong{color:#78350f}
.tutorial-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid #e5e7eb}
.tutorial-summary{background:#f8fafc;border-radius:12px;padding:16px;margin-top:12px}
.tutorial-summary-title{font-weight:900;margin-bottom:12px;color:#0f172a}
.tutorial-summary-item{display:grid;grid-template-columns:140px 1fr;gap:12px;margin-bottom:10px;padding:10px;background:#fff;border-radius:8px}
.tutorial-summary-label{font-weight:800;color:#64748b;font-size:13px}
.tutorial-summary-value{color:#0f172a;font-size:13px;line-height:1.5}

/* Enhanced Examples Block */
.examples-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin-top:12px}
.examples-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.examples-title{font-weight:900;font-size:16px;color:#0f172a}
.examples-content{display:none}
.examples-content.visible{display:block}
.example-item{margin-bottom:14px;padding:12px;background:#f8fafc;border-radius:8px;border-left:3px solid #3b82f6}
.example-item-title{font-weight:900;margin-bottom:6px;color:#0f172a;font-size:14px}
.example-item-desc{color:#64748b;font-size:13px;margin-bottom:8px;line-height:1.4}
.example-item-code{background:#fff;padding:10px;border-radius:6px;font-family:monospace;font-size:12px;white-space:pre-wrap;word-break:break-word;border:1px solid #e2e8f0;margin-bottom:8px;color:#0f172a}
.example-item-actions{display:flex;gap:8px;flex-wrap:wrap}
.example-item-actions .sentio-btn{font-size:12px;padding:6px 12px}

/* Enhanced Tooltips */
.tooltip{position:fixed;max-width:380px;background:#1e293b;color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 20px 60px rgba(0,0,0,.4);display:none;z-index:999999;animation:tooltipFadeIn .15s ease}
@keyframes tooltipFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.tooltip.show{display:block}
.tooltip .tt-title{font-weight:900;margin-bottom:8px;font-size:14px}
.tooltip .tt-desc{color:#e2e8f0;font-size:13px;line-height:1.5}


/* Spinner para loading */
.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Notificaciones mejoradas */
.notifications-panel{position:relative}
.notifications-close{position:absolute;top:12px;right:12px;background:transparent;border:none;font-size:20px;cursor:pointer;color:#64748b;padding:4px 8px;border-radius:6px;transition:all .2s}
.notifications-close:hover{background:#f1f5f9;color:#0f172a}

/* Modales */
.sentio-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;display:none;align-items:center;justify-content:center}
.sentio-modal.open{display:flex}
.sentio-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)}
.sentio-modal-content{position:relative;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:90%;max-height:90%;overflow:auto;animation:modalSlideIn 0.2s ease}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Sentio IA Ultimate v5.0 - Professional UI with Platform Icons */

/* Platform Icons & Colors */
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}

.platform-twitter { background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%); color: #fff; }
.platform-facebook { background: linear-gradient(135deg, #1877F2 0%, #0c63d4 100%); color: #fff; }
.platform-instagram { background: linear-gradient(135deg, #E4405F 30%, #C13584 100%); color: #fff; }
.platform-tiktok { background: linear-gradient(135deg, #000 0%, #EE1D52 100%); color: #fff; }
.platform-youtube { background: linear-gradient(135deg, #FF0000 0%, #cc0000 100%); color: #fff; }
.platform-linkedin { background: linear-gradient(135deg, #0077B5 0%, #005885 100%); color: #fff; }
.platform-reddit { background: linear-gradient(135deg, #FF4500 0%, #cc3700 100%); color: #fff; }
.platform-news { background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); color: #fff; }
.platform-rss { background: linear-gradient(135deg, #F26522 0%, #d14f0f 100%); color: #fff; }
.platform-web { background: linear-gradient(135deg, #10B981 0%, #059669 100%); color: #fff; }

/* Favicon Support */
.mention-favicon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-left: 8px;
  object-fit: cover;
}

/* Modern Mention Cards */
.mention-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.mention-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}

.mention-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mention-author {
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
}

.mention-time {
  color: #64748b;
  font-size: 13px;
  margin-left: auto;
}

.mention-text {
  color: #334155;
  line-height: 1.6;
  margin-bottom: 12px;
  font-size: 14px;
}

.mention-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.mention-sentiment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.mention-sentiment.positive {
  background: #d1fae5;
  color: #065f46;
}

.mention-sentiment.neutral {
  background: #e0e7ff;
  color: #3730a3;
}

.mention-sentiment.negative {
  background: #fee2e2;
  color: #991b1b;
}

.mention-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.mention-link:hover {
  color: #1d4ed8;
  gap: 8px;
}

/* Project List Improvements */
.project-list-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-list-item:hover {
  background: #f8fafc;
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.project-info {
  flex: 1;
}

.project-name {
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 4px;
}

.project-keywords {
  color: #64748b;
  font-size: 13px;
}

.project-stats {
  display: flex;
  gap: 16px;
  margin-right: 16px;
}

.project-stat {
  text-align: center;
}

.project-stat-value {
  font-weight: 700;
  font-size: 18px;
  color: #0f172a;
}

.project-stat-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  font-weight: 600;
}

.action-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.action-btn.danger:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Enhanced Metrics */
.metric {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  position: relative;
  transition: all 0.2s ease;
}

.metric:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.metric .icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  margin-bottom: 12px;
}

.metric .val {
  font-size: 32px;
  font-weight: 900;
  margin-top: 8px;
  color: #0f172a;
}

.metric .lbl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-weight: 700;
  gap: 8px;
  color: #475569;
  font-size: 14px;
}

.metric .trend {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.metric .trend.up {
  background: #d1fae5;
  color: #065f46;
}

.metric .trend.down {
  background: #fee2e2;
  color: #991b1b;
}

/* Enhanced Charts */
.chart-container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.chart-title {
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
}

.chart-filter {
  display: flex;
  gap: 6px;
}

.chart-filter button {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chart-filter button.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Loading States */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-card {
  height: 120px;
  margin-bottom: 12px;
}

/* Enhanced Buttons */
.sentio-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.sentio-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.sentio-btn.primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-color: #2563eb;
  color: #fff;
}

.sentio-btn.primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.sentio-btn.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #10b981;
  color: #fff;
}

.sentio-btn.danger {
  background: #fff;
  border-color: #fca5a5;
  color: #dc2626;
}

.sentio-btn.danger:hover {
  background: #fef2f2;
  border-color: #f87171;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.empty-text {
  color: #64748b;
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Platform Badges */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.platform-badge .emoji {
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .mention-header {
    flex-wrap: wrap;
  }
  
  .mention-time {
    margin-left: 0;
    width: 100%;
    margin-top: 4px;
  }
  
  .project-list-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .project-stats {
    width: 100%;
    justify-content: space-around;
    margin: 12px 0;
  }
  
  .project-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Tooltips Enhancement */
.tooltip {
  position: fixed;
  max-width: 320px;
  background: #0f172a;
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: none;
  z-index: 999999;
  animation: tooltipIn 0.2s ease;
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tooltip.show {
  display: block;
}

.tooltip .tt-title {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 14px;
}

.tooltip .tt-desc {
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.4;
}

/* Success Messages */
.success-message {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7;
  color: #065f46;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Error Messages */
.error-message {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* Modal Improvements */
.modal-card {
  width: min(900px, 95vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalIn 0.3s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animación pulse para logo */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.pulse-animation {
  animation: pulse 2s ease-in-out infinite;
}