/* Shared visual system for management and account pages. Player media is untouched. */
.modern-app {
  --black:#3a3a3a; --blue:#3a3a3a; --accent:#3a3a3a; --accent-soft:#ebebeb;
  --bg:#f4f4f4; --card:#fff; --card-bg:#fff; --border:#e6e6e6;
  --text:#171717; --text-2:#434343; --text-3:#5f5f5f; --text-secondary:#434343;
  --hover:#f1f1f1; --radius:24px; --radius-sm:15px; --radius-xs:10px;
  --shadow:0 5px 18px #3030300a; --shadow-md:0 10px 30px #30303012;
  background:var(--bg); color:var(--text);
}
.modern-app .main-content { max-width:1600px; min-width:0; padding:34px 40px; }
.modern-app .page-header { gap:20px; }
.modern-app:not([data-page=dashboard]) .page-header {
  position:relative; padding:32px; min-height:140px; border-radius:27px;
  background:radial-gradient(circle at 88% -90%,#5c5c5c 0 35%,transparent 35.3%),linear-gradient(110deg,#3c3c3c,#4f4f4f);
  color:#fff; box-shadow:0 12px 28px #39393916; overflow:hidden;
}
.modern-app .page-title { font-size:clamp(25px,3vw,34px); letter-spacing:-1px; }
.modern-app:not([data-page=dashboard]) .page-subtitle { color:#e9e9e9; font-size:13px; margin-top:8px; max-width:570px; line-height:1.7; }
.modern-app:not([data-page=dashboard]) .page-header .btn-primary { background:#fff; color:#393939; box-shadow:0 5px 15px #21212120; }
.modern-app .page-clock { color:inherit; opacity:.8; font-size:12px; }
.modern-app .sidebar { background:#fff; border-right:1px solid var(--border); }
.modern-app .sidebar-logo { background:linear-gradient(145deg,#585858,#3a3a3a); color:#fff; box-shadow:0 5px 13px #3e3e3e30; }
.modern-app .sidebar-logo img { border-radius:9px; }
.modern-app .nav-item { color:#4e4e4e; border-radius:14px; }
.modern-app .nav-item:hover { background:#f1f1f1; color:#3a3a3a; }
.modern-app .nav-item.active { background:#e8e8e8; color:#3a3a3a; }
.modern-app .sidebar-bottom { border-color:var(--border); }
.modern-app .sidebar-avatar { background:#e8e8e8; color:#3a3a3a; }
.modern-app .sidebar-user-name { color:#353535; }.modern-app .sidebar-user-role { color:#545454; }
.modern-app .sidebar-user:hover { background:#f1f1f1; }
.modern-app .btn { border-radius:13px; padding:11px 17px; font-weight:650; }
.modern-app .btn-sm { padding:7px 12px; font-size:12px; }
.modern-app .btn-primary { background:linear-gradient(110deg,#464646,#3a3a3a); border:1px solid transparent; color:#fff; box-shadow:0 5px 12px #3e3e3e24; }
.modern-app .btn-primary:hover { background:linear-gradient(110deg,#3e3e3e,#303030); }
.modern-app .btn-secondary,.modern-app .btn-ghost { background:#fff; border:1px solid #e2e2e2; color:#3a3a3a; }
.modern-app .btn-ghost:hover,.modern-app .btn-secondary:hover { background:#efefef; }
.modern-app .btn-icon { border-radius:11px; background:#f6f6f6; color:#474747; min-width:34px; min-height:34px; }
.modern-app .btn-icon:hover { background:#e7e7e7; color:#343434; }
.modern-app .btn-danger { color:#b73956; background:#fff0f3; border-color:#f5d7df; }
.modern-app .btn-danger:hover { color:#fff; background:#bd3a58; }
.modern-app .btn:disabled { opacity:.5; box-shadow:none; cursor:not-allowed; }
.modern-app :focus-visible { outline:3px solid #606060; outline-offset:3px; }
.modern-app input[type=checkbox],.modern-app input[type=radio] { accent-color:#3f3f3f; }
.modern-app .form-control,.modern-app .search-input { border-radius:13px; border-color:#e2e2e2; background:#fbfbfb; padding-top:12px; padding-bottom:12px; color:#292929; }
.modern-app .form-control:focus,.modern-app .search-input:focus { border-color:#656565; box-shadow:0 0 0 3px #5c5c5c18; }
.modern-app .form-group label { font-size:12px; color:#373737; margin-bottom:8px; }
.modern-app .card,.modern-app .profile-card,.modern-app .mkt-card,.modern-app .stat-card { background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }
.modern-app .card:hover,.modern-app .mkt-card:hover { box-shadow:var(--shadow-md); border-color:#b6b6b6; }
.modern-app .stat-card { padding:23px; }.modern-app .stat-card.dark { background:linear-gradient(120deg,#3e3e3e,#555555); color:#fff; border-color:transparent; }
.modern-app .stat-card.dark .stat-label { color:#e8e8e8; }.modern-app .stat-value { letter-spacing:-1px; }
.modern-app .card-title { font-size:16px; }.modern-app .profile-card-header { color:#414141; background:#f8f8f8; padding:18px 22px; }
.modern-app .toolbar,.modern-app .page-toolbar { gap:12px; flex-wrap:wrap; }
.modern-app .filter-tabs,.modern-app .ai-tabs,.modern-app .mkt-tabs { background:#eaeaea; border:0; padding:5px; border-radius:16px; gap:5px; }
.modern-app .filter-tab,.modern-app .ai-tab,.modern-app .mkt-tab { border:0; border-radius:12px; padding:10px 17px; color:#474747; }
.modern-app .filter-tab.active,.modern-app .ai-tab.active,.modern-app .mkt-tab.active { background:#fff; color:#3a3a3a; box-shadow:0 3px 9px #3838380b; border:0; }
.modern-app .table-wrap { border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.modern-app th { background:#f4f4f4; color:#4a4a4a; font-size:10px; letter-spacing:.7px; padding:17px; }
.modern-app td { border-bottom-color:#ececec; padding:17px; }.modern-app tbody tr:hover { background:#fafafa; }
.modern-app .table-avatar { background:linear-gradient(145deg,#e8e8e8,#b6b6b6); color:#404040; border-radius:13px; }
.modern-app .badge { border-radius:9px; padding:5px 9px; font-size:10px; }
.modern-app .badge-dark,.modern-app .badge-admin { background:#e8e8e8; color:#383838; }
.modern-app .badge-success,.modern-app .badge-actif { background:#e7f7ee; color:#298152; }
.modern-app .badge-danger { background:#fff0f2; color:#b54059; }
.modern-app .modal-backdrop { background:#17171770; backdrop-filter:blur(7px); }
.modern-app .modal { border:1px solid #e2e2e2; border-radius:26px; box-shadow:0 24px 90px #0f0f0f30; }
.modern-app .modal-header { padding:22px 25px; background:#fafafa; }.modern-app .modal-header h3 { color:#232323; font-size:18px; }
.modern-app .modal-body { padding:24px; }.modern-app .modal-footer { padding:18px 24px; background:#fbfbfb; border-top-color:#e9e9e9; }
.modern-app .modal-close { color:#4f4f4f; background:#ededed; border-radius:11px; }
.modern-app .media-card { background:#fff; padding:7px; border:1px solid #e4e4e4; border-radius:22px; box-shadow:var(--shadow); }
.modern-app .media-thumb { border-radius:16px; overflow:hidden; }.modern-app .media-info { padding:14px 9px; }.modern-app .media-actions { padding:10px 5px 3px; }
.modern-app .media-card:hover { border-color:#a1a1a1; box-shadow:var(--shadow-md); }
.modern-app .video-thumb { background:#2b2b2b; }.modern-app .embed-thumb { background:linear-gradient(135deg,#4c4c4c,#646464); }
.modern-app .storage-bar-wrap { border-radius:18px; background:#eaeaea; border:1px solid #dedede; padding:19px; }
.modern-app .storage-track { background:#bebebe; }.modern-app .storage-fill { background:linear-gradient(90deg,#525252,#626262); }
.modern-app .storage-fill.warn { background:var(--warning); }.modern-app .storage-fill.danger { background:var(--danger); }
.modern-app .playlist-list-item { border-radius:16px; margin:5px 0; border:1px solid transparent; }
.modern-app .playlist-list-item.active { background:#ebebeb; border-color:#b5b5b5; color:#393939; }
.modern-app .pl-item-icon { border-radius:13px; background:#e8e8e8; color:#4c4c4c; }
.modern-app .playlist-item { background:#fff; border-radius:17px; border-color:#e6e6e6; }.modern-app .pi-thumb { border-radius:12px; }
.modern-app .orient-card.selected,.modern-app .ai-orient-opt.selected { background:#ececec; color:#3d3d3d; border-color:#5b5b5b; }
.modern-app .day-chip input:checked+span { background:#434343; border-color:#434343; }
.modern-app .schedule-section { background:#f8f8f8; border-color:#dedede; border-radius:17px; }
.modern-app .ai-upload-zone { background:#f8f8f8; border-color:#ababab; border-radius:20px; }
.modern-app .ai-preview-box:has(.ai-preview-empty) { background:radial-gradient(circle at 30% 20%,#535353,#2f2f2f); }
.modern-app .ai-preview-empty { color:#e0e0e0; }.modern-app .ai-mode-card.selected { background:#ececec; border-color:#5d5d5d; }
.modern-app .empty-state { background:#f8f8f8; border-radius:22px; margin:10px; padding:38px 24px; }.modern-app .empty-state svg { color:#616161; }
.modern-app .screen-key-code { background:#f0f0f0; color:#474747; border-radius:8px; }
.modern-app .toast { border-radius:16px; border:1px solid #e3e3e3; box-shadow:0 10px 35px #26262618; }
/* Screens become individual device cards, retaining all management actions. */
.screen-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.screen-overview>div { display:flex; align-items:center; gap:15px; border:1px solid var(--border); border-radius:20px; background:#fff; padding:20px; }
.screen-overview strong { font-size:27px; color:#434343; min-width:38px; }.screen-overview span { font-size:12px; color:#4d4d4d; }
.screen-tools { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }.screen-tools h2 { font-size:17px; letter-spacing:-.3px; }.screen-tools input { max-width:290px; }
.screen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; }
.device-card { min-width:0; background:#fff; border:1px solid var(--border); border-radius:24px; padding:20px; box-shadow:var(--shadow); }
.device-visual { height:130px; border-radius:17px; background:linear-gradient(135deg,#e9e9e9,#eeeeee); position:relative; display:grid; place-items:center; margin-bottom:18px; }
.device-monitor { width:116px; height:76px; border:7px solid #636363; background:linear-gradient(135deg,#4e4e4e,#393939); border-radius:10px; box-shadow:4px 5px 0 #b3b3b3; position:relative; display:grid; place-items:center; color:#e7e7e7; font-size:25px; }
.device-monitor::after { content:''; position:absolute; width:47px; height:10px; bottom:-21px; border-radius:4px; background:#656565; box-shadow:0 -8px 0 -2px #a2a2a2; }
.device-visual .device-connection { position:absolute; top:12px; left:12px; padding:5px 8px; border-radius:8px; background:#fff; font-size:9px; color:#474747; }.device-connection.online { color:#434343; }
.device-title { display:flex; justify-content:space-between; align-items:center; gap:10px; }.device-title h3 { font-size:16px; overflow-wrap:anywhere; }.device-location { color:#525252; font-size:12px; margin:6px 0 18px; }
.device-details { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:15px 0; border-top:1px solid #ebebeb; }.device-details dt { color:#5b5b5b; font-size:10px; margin-bottom:5px; }.device-details dd { color:#383838; font-size:12px; overflow-wrap:anywhere; }
.device-controls { display:flex; gap:7px; align-items:center; border-top:1px solid #ebebeb; padding-top:15px; flex-wrap:wrap; }.device-controls .btn { flex:1; }.device-url { margin-top:12px; display:flex; gap:8px; justify-content:space-between; align-items:center; }.device-url small { color:#5b5b5b; font-size:10px; }
.device-url .btn-icon { min-width:28px; min-height:28px; }.device-url svg { width:14px; height:14px; }
/* Account entry: soft card on a gray canvas. */
.modern-auth .login-page { min-height:100vh; padding:35px; gap:20px; background:#f1f1f1; }
.modern-auth .login-brand { position:relative; overflow:hidden; border-radius:34px; background:radial-gradient(circle at 90% 15%,#5d5d5d66 0 25%,transparent 25.2%),linear-gradient(145deg,#343434,#535353); box-shadow:0 20px 45px #3838381c; }
.modern-auth .login-brand h1 { font-size:clamp(35px,4vw,54px); letter-spacing:-2px; }.modern-auth .login-brand p,.modern-auth .login-feature { color:#e7e7e7; }
.modern-auth .login-feature { padding:13px 17px; background:#ffffff0c; border:1px solid #ffffff17; border-radius:14px; }
.modern-auth .login-brand-logo { background:#ffffff; border-radius:18px; padding:8px; box-shadow:0 7px 20px #1d1d1d25; }
.modern-auth .login-form-side { background:#fff; border:1px solid #e2e2e2; border-radius:34px; padding:40px; }.modern-auth .login-form-wrap { max-width:410px; width:100%; }
.modern-auth .login-form-wrap h2 { color:#1c1c1c; font-size:32px; letter-spacing:-1px; }.modern-auth .login-form .btn { border-radius:14px; }.modern-auth .remember-row input[type=checkbox] { accent-color:#414141; }
/* Public landing retains its existing sections and content. */
.modern-landing { --black:#121212; --gray-1:#171717; --gray-2:#1e1e1e; --gray-3:#2c2c2c; --gray-4:#616161; --gray-5:#a3a3a3; --gray-8:#f7f7f7; --radius:25px; background:#121212; }
.modern-landing .hero { background:radial-gradient(ellipse at 80% 10%,#3f3f3f66,transparent 60%),linear-gradient(130deg,#171717,#252525); }
.modern-landing .hero h1 .grad { background:linear-gradient(110deg,#fff,#aaaaaa); -webkit-background-clip:text; background-clip:text; }
.modern-landing .nav.scrolled { background:#171717dc; border-color:#ffffff12; }.modern-landing .hero-badge { background:#ffffff09; border-color:#ffffff20; color:#e2e2e2; }
.modern-landing .nav-cta,.modern-landing .btn-white { background:#f0f0f0; color:#383838; box-shadow:0 6px 25px #06060615; }
.modern-landing .showcase-card,.modern-landing .f-card { border-radius:25px; border-color:#5f5f5f22; box-shadow:0 10px 30px #07070719; }
.modern-landing .f-icon,.modern-landing .showcase-card-icon { background:#5f5f5f25; border-radius:16px; color:#bbbbbb; }
.modern-landing .market-card { background:linear-gradient(115deg,#2f2f2f,#424242); border-radius:32px; }.modern-landing .step-num { color:#bababa; border-color:#55555555; }
@media(max-width:1100px) { .modern-app .main-content { padding:28px; }.modern-app .ai-layout { grid-template-columns:320px minmax(0,1fr); } }
@media(max-width:900px) { .modern-app .ai-layout { grid-template-columns:1fr; } }
@media(max-width:768px) {
 .modern-app .main-content { padding:82px 18px 112px; }.modern-app:not([data-page=dashboard]) .page-header { padding:25px 23px; border-radius:24px; align-items:flex-start; min-height:150px; }.modern-app .page-title { font-size:28px; }.modern-app .page-subtitle { font-size:12px!important; }.modern-app .page-header .btn { margin-top:4px; }
 .modern-app .mobile-topbar { background:#f4f4f4ee; color:#353535; border-bottom:1px solid var(--border); backdrop-filter:blur(14px); }.modern-app .mobile-topbar-avatar { background:#bfbfbf; color:#3b3b3b; }
 .modern-app .mobile-bottom-nav { left:16px; right:16px; bottom:14px; height:65px; border-radius:23px; width:auto; background:#3a3a3a; padding:7px 8px; border:0; box-shadow:0 8px 24px #2f2f2f33; }
 .modern-app .mob-nav-item { color:#b8b8b8; }.modern-app .mob-nav-item.active { background:#fff; color:#3b3b3b; border-radius:17px; }.modern-app .mob-nav-item svg { width:20px; height:20px; }
 .modern-app .modal { max-width:calc(100vw - 24px); }.modern-app .modal-body { padding:18px; }.modern-app .mkt-grid { grid-template-columns:1fr; }.modern-app .media-grid { gap:12px; }.modern-app .table-wrap { border-radius:19px; }
 .screen-overview { gap:9px; }.screen-overview>div { padding:14px 10px; flex-direction:column; gap:3px; align-items:flex-start; border-radius:17px; }.screen-overview strong { font-size:23px; }.screen-overview span { font-size:10px; }.screen-tools { align-items:stretch; flex-direction:column; }.screen-tools input { max-width:none; }.screen-grid { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
 .modern-auth .login-page { padding:16px; display:block; }.modern-auth .login-form-side { padding:32px 22px; border-radius:27px; min-height:calc(100vh - 32px); }.modern-auth .login-brand { display:none; }
}
@media(prefers-reduced-motion:reduce) { .modern-app *,.modern-landing * { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
.modern-app .playlist-list-item { padding:13px 10px; gap:10px; }
.modern-app .pl-item-icon { width:35px; height:35px; flex-shrink:0; display:grid; place-items:center; }
.modern-app .pl-item-icon svg { width:18px; height:18px; }
.modern-app .pl-item-info { min-width:0; flex:1; }
.modern-app .pl-item-info strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.modern-app .pl-item-info>span { display:block; font-size:10px; margin-top:4px; }
.modern-app .page-toolbar { margin-bottom:18px; }
.modern-app .mobile-hamburger svg { stroke:#3b3b3b; }
.modern-app:not([data-page=dashboard]) .page-header { --text-2:#e9e9e9; }
.modern-app .mkt-empty { background:#fff; border:1px dashed #b6b6b6; border-radius:23px; padding:48px 24px; }