.app-shell{position:fixed;inset:0;display:flex;align-items:stretch;background:var(--bg)}
.sidebar{display:none;width:220px;background:rgba(255,255,255,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0}
.sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid var(--border);font-size:22px;font-weight:700;letter-spacing:-0.5px}
.sidebar-logo span{color:var(--green)}
.premium-logo-sparkle{display:none;position:relative;margin-left:5px;color:#F59E0B;font-size:0.78em;line-height:1;vertical-align:0.18em}
.sidebar-logo .premium-logo-sparkle,.topbar-logo .premium-logo-sparkle{color:#F59E0B}
body.jouro-premium .premium-logo-sparkle{display:inline-flex}
body.jouro-on-trial .premium-logo-sparkle{cursor:help}
.premium-logo-sparkle::after{content:'Compte Premium actif';position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:180px;padding:6px 8px;border-radius:8px;background:var(--text);color:var(--surface);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.2;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:20}
body.jouro-on-trial .premium-logo-sparkle::after{content:'Essai Premium actif'}
.premium-logo-sparkle:hover::after,.premium-logo-sparkle:focus-visible::after{opacity:1}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.snav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;color:var(--muted);transition:all 0.15s}
.snav-item:hover{background:var(--surface2);color:var(--text)}
.snav-item.active{background:var(--green-light);color:var(--green);font-weight:500}
.snav-icon{font-size:18px;width:24px;text-align:center}
.app-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
.app{position:fixed;inset:0;display:flex;flex-direction:column;background:transparent;min-height:0}
.app.hidden{display:none}
.topbar{background:rgba(255,255,255,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;box-shadow:0 1px 8px rgba(14,165,233,0.08)}
.topbar-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;line-height:1.2;display:flex;flex-direction:column;justify-content:center}
.topbar-logo span{color:var(--green)}
.topbar-logo-mark{line-height:1.1}
.topbar-right{display:flex;gap:8px}
.support-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.support-actions .sbtn{width:100%}
.chatbot-modal{display:none;position:fixed;inset:0;z-index:1001;background:rgba(15,23,42,0.48);align-items:center;justify-content:center;padding:16px}
.chatbot-modal.is-open{display:flex}
.chatbot-modal-card{width:min(100%,460px);max-height:92vh;overflow:hidden;border-radius:18px;background:var(--card,#fff);box-shadow:var(--shadow-lg);border:1px solid var(--border,#e5e7eb);display:flex;flex-direction:column}
.chatbot-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--border,#e5e7eb)}
.chatbot-modal-title{font-size:18px;font-weight:700;color:var(--text,#111)}
.chatbot-modal-sub{margin-top:4px;font-size:13px;color:var(--muted)}
.chatbot-modal-close{border:none;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.chatbot-modal iframe{display:block;width:100%;height:min(600px,calc(92vh - 78px));background:var(--surface,#fff)}
.chatbot-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:260px;-webkit-overflow-scrolling:touch}
.chatbot-msg{max-width:82%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.chatbot-msg.user{align-self:flex-end;background:var(--green,#0EA5E9);color:#fff;border-bottom-right-radius:4px}
.chatbot-msg.bot{align-self:flex-start;background:var(--surface,#f1f5f9);color:var(--text,#111);border-bottom-left-radius:4px}
.chatbot-msg.typing{color:var(--muted);font-style:italic}
.chatbot-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,#e5e7eb)}
.chatbot-input-row input{flex:1;border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit;background:var(--card,#fff);color:var(--text,#111)}
.chatbot-input-row input:focus{outline:none;border-color:var(--green,#0EA5E9)}
.chatbot-input-row button{border:none;background:var(--green,#0EA5E9);color:#fff;border-radius:12px;padding:0 16px;font-size:16px;cursor:pointer;flex-shrink:0}
.chatbot-input-row button:disabled{opacity:.5;cursor:default}
body.dark .chatbot-msg.bot{background:rgba(30,41,59,0.9)}
body.dark .chatbot-input-row input{background:rgba(30,41,59,0.9)}
.chatbot-feedback{align-self:flex-start;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:-4px}
.chatbot-feedback button{border:1px solid var(--border,#e5e7eb);background:var(--card,#fff);border-radius:8px;padding:2px 8px;font-size:13px;cursor:pointer;line-height:1.4}
.chatbot-feedback button:disabled{opacity:.5;cursor:default}
.chatbot-feedback.done{color:var(--green,#0EA5E9);font-style:italic}
.chatbot-handoff-btn{border:none!important;background:var(--green,#0EA5E9)!important;color:#fff!important;border-radius:10px;padding:8px 14px!important;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.chatbot-human-btn{align-self:center;margin:0 12px;border:none;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;padding:6px;font-family:inherit}
.chatbot-human-btn:hover{color:var(--green,#0EA5E9)}
.chatbot-new-btn{border:1px solid var(--border,#e5e7eb);background:var(--card,#fff);color:var(--muted);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;font-family:inherit}
.chatbot-new-btn:hover{border-color:var(--green,#0EA5E9);color:var(--green,#0EA5E9)}
body.dark .chatbot-feedback button{background:rgba(30,41,59,0.9)}
.main{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;min-height:0;overscroll-behavior-y:contain}
#ptr-indicator{position:sticky;top:-40px;left:0;right:0;height:0;display:flex;justify-content:center;overflow:visible;pointer-events:none;opacity:0;transition:opacity 0.1s;z-index:10}
.ptr-spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(14,165,233,0.2);border-top-color:var(--green);animation:ptr-spin 0.7s linear infinite;margin-top:8px}
@keyframes ptr-spin{to{transform:rotate(360deg)}}
.bottom-nav{background:rgba(255,255,255,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;padding:8px 0 max(12px,env(safe-area-inset-bottom));flex-shrink:0;box-shadow:0 -2px 16px rgba(14,165,233,0.06)}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px}
.nav-tab:active{opacity:0.7}
.nav-icon{font-size:22px;transition:transform 0.15s}
.nav-label{font-size:10px;color:var(--muted);transition:color 0.15s}
.nav-tab.active .nav-label{color:var(--green);font-weight:500}
.nav-tab.active .nav-icon{transform:scale(1.1)}
.page{display:none}
.page.active{display:block}
@media(min-width:768px){
  .sidebar{display:flex}
  .bottom-nav{display:none!important}
  .app{position:relative!important;inset:auto!important;flex:1}
  html,body{overflow:auto}
  .app-shell{overflow:auto}
  .main{max-width:680px;margin:0 auto;width:100%;padding:24px 32px}
  .topbar{padding:16px 32px}
  .drawer{border-radius:var(--radius)!important;margin:auto;position:relative}
  .drawer-bg{align-items:center!important;justify-content:center!important}
}
@media(max-width:767px){
  .app-shell{display:block}
  .sidebar{display:none!important}
  .support-actions{grid-template-columns:1fr}
  .chatbot-modal{padding:0}
  .chatbot-modal-card{width:100%;height:100%;max-height:none;border-radius:0}
  .chatbot-modal iframe{height:calc(100dvh - 78px)}
}
body.dark .topbar{background:rgba(15,23,42,0.92)!important}
body.dark .bottom-nav{background:rgba(15,23,42,0.92)!important}
body.dark .sidebar{background:rgba(15,23,42,0.92)!important}
body.dark .hero{background:rgba(30,41,59,0.85)!important}
body.dark .card,body.dark .kpi,body.dark .sum-card{background:rgba(30,41,59,0.9)!important}