/* MR Agency Portal Pro v12.0 */ #mrPortal,#mrPortal *{box-sizing:border-box} #mrPortal{font-family:system-ui,-apple-system,sans-serif;color:#fff;padding:0;margin:0;line-height:1.5} #mrPortal .mr-hide{display:none!important} #mrPortal .mr-center{text-align:center;padding:40px} #mrPortal .mr-btn{background:linear-gradient(135deg,#00f0ff,#ff00ff);color:#000;font-weight:700;cursor:pointer;padding:10px 18px;border-radius:8px;font-size:13px;transition:all .2s;border:none;outline:none} #mrPortal .mr-btn:hover{opacity:.9} #mrPortal .mr-btn2{background:#1a1a25;color:#bbb;cursor:pointer;padding:10px 18px;border-radius:8px;font-size:13px;border:none;outline:none} #mrPortal .mr-btn2:hover{background:#252535;color:#00f0ff} #mrPortal .mr-inp,.mr-modal .mr-inp{background:#1a1a25;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;width:100%;margin:6px 0;border:none;outline:none} #mrPortal .mr-inp:focus,.mr-modal .mr-inp:focus{box-shadow:0 0 0 2px #00f0ff} .mr-modal .mr-btn{display:inline-block;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;border:none;background:linear-gradient(135deg,#00f0ff,#0080ff);color:#000;font-weight:600} .mr-modal .mr-btn2{display:inline-block;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid #2a2a3a;background:transparent;color:#ddd} #mrPortal table{border:none!important;border-collapse:collapse} #mrPortal th,#mrPortal td{border:none!important} #mrPortal .mr-stats-table table{border:none!important} #mrPortal .mr-stats-table th,#mrPortal .mr-stats-table td{border:none!important;border-bottom:1px solid #1a1a25!important} #mrPortal .mr-box{background:#12121a;border-radius:12px;padding:16px;margin-bottom:12px} #mrPortal .mr-header{background:#12121a;padding:12px 20px;display:flex;justify-content:space-between;align-items:center} #mrPortal .mr-logo{font-size:18px;font-weight:800;background:linear-gradient(135deg,#00f0ff,#ff00ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent} #mrPortal .mr-tabs{display:flex;gap:6px;flex-wrap:wrap} #mrPortal .mr-badge{background:#ff0050;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;margin-left:6px} #mrPortal .mr-s0{color:#fa0;font-size:11px;background:#fa02;padding:2px 8px;border-radius:4px} #mrPortal .mr-s1{color:#00f0ff;font-size:11px;background:#00f0ff22;padding:2px 8px;border-radius:4px} #mrPortal .mr-s2{color:#0f0;font-size:11px;background:#0f02;padding:2px 8px;border-radius:4px} #mrPortal .mr-p0{color:#aaa;font-size:10px} #mrPortal .mr-p1{color:#fa0;font-size:10px} #mrPortal .mr-p2{color:#f44;font-size:10px} #mrPortal .mr-filter{background:transparent;color:#aaa;cursor:pointer;padding:8px 12px;font-size:11px;flex:1;text-align:center} #mrPortal .mr-filter-active{color:#00f0ff;background:#1a1a25} #mrPortal .mr-empty{color:#777;text-align:center;padding:30px;font-size:13px} /* ===== FULLSCREEN LOGIN ===== */ #mrPortal .mr-login-wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:99998;background:#000;overflow:hidden} #mrPortal .mr-login-wrap::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg at 50% 50%,#00f0ff11 0deg,transparent 60deg,#ff00ff11 120deg,transparent 180deg,#00f0ff11 240deg,transparent 300deg,#ff00ff11 360deg);animation:mrLoginBg 20s linear infinite} @keyframes mrLoginBg{to{transform:rotate(360deg)}} #mrPortal .mr-login-box{position:relative;max-width:420px;width:100%;margin:0;padding:40px 36px;background:rgba(12,12,20,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,.6),0 0 60px rgba(0,240,255,.05)} #mrPortal .mr-login-box .mr-inp{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:14px 16px;font-size:14px;border-radius:12px;transition:all .2s} #mrPortal .mr-login-box .mr-inp:focus{background:rgba(255,255,255,.08);border-color:rgba(0,240,255,.4);box-shadow:0 0 0 3px rgba(0,240,255,.1)} #mrPortal .mr-login-box .mr-inp::placeholder{color:rgba(255,255,255,.3)} #mrPortal .mr-login-box .mr-btn{width:100%;padding:14px;font-size:15px;border-radius:12px;letter-spacing:.5px} #mrPortal .mr-login-box .mr-btn2{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:12px 20px;border-radius:12px;transition:all .2s} #mrPortal .mr-login-box .mr-btn2:hover{background:rgba(255,255,255,.1);color:#fff} #mrPortal .mr-login-logo{text-align:center;margin-bottom:28px} #mrPortal .mr-login-logo img{max-width:180px;height:auto;filter:drop-shadow(0 4px 20px rgba(0,240,255,.2))} #mrPortal .mr-login-title{text-align:center;font-size:14px;color:rgba(255,255,255,.4);margin-bottom:24px;letter-spacing:2px;text-transform:uppercase;font-weight:500} /* ===== FULLSCREEN PORTAL (after login) ===== */ #mrPortal.mr-logged-in{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:99997;background:#0a0a0f;display:flex;flex-direction:column} #mrPortal.mr-logged-in>#mrCreator,#mrPortal.mr-logged-in>#mrAdmin{flex:1;display:flex;flex-direction:column;min-height:0} #mrCreatorContent,#mrAdminContent{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px} /* Toast notifications */ #mrPortal .mr-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1a1a25;color:#fff;padding:12px 20px;border-radius:8px;display:flex;align-items:center;gap:12px;z-index:10001;box-shadow:0 4px 20px rgba(0,0,0,.5);animation:mrToastIn .3s ease} #mrPortal .mr-toast button{background:none;color:#666;cursor:pointer;font-size:16px;padding:0} #mrPortal .mr-toast-success{border-left:4px solid #0f0} #mrPortal .mr-toast-error{border-left:4px solid #f44} #mrPortal .mr-toast-info{border-left:4px solid #00f0ff} @keyframes mrToastIn{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} @keyframes mrSpin{to{transform:rotate(360deg)}} /* Chat Grid */ #mrPortal .mr-chat-grid{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100vh - 180px);background:#0b141a;border-radius:12px;overflow:hidden} #mrPortal .mr-chat-sidebar{background:#111b21;display:flex;flex-direction:column;border-right:1px solid #222d34} #mrPortal .mr-chat-sidebar-header{padding:12px;border-bottom:1px solid #222d34;display:flex;justify-content:space-between;align-items:center;background:#202c33} #mrPortal .mr-chat-list{flex:1;overflow-y:auto} #mrPortal .mr-chat-main{display:flex;flex-direction:column;min-height:0;background:#0b141a} #mrPortal .mr-chat-item{padding:12px 14px;cursor:pointer;border-bottom:1px solid #222d34;transition:background .15s;position:relative} #mrPortal .mr-chat-item:hover{background:#202c33} #mrPortal .mr-chat-item.mr-sel{background:#2a3942} #mrPortal .mr-chat-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} #mrPortal .mr-chat-item-title{display:flex;justify-content:space-between;align-items:flex-start;gap:8px} #mrPortal .mr-chat-item-title b{font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e9edef} #mrPortal .mr-chat-item-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:#8696a0;margin-top:4px} #mrPortal .mr-chat-item-user{color:#00a884;font-size:12px} #mrPortal .mr-chat-item-status{padding:2px 8px;border-radius:10px;font-size:9px;font-weight:600} #mrPortal .mr-chat-item-status.mr-st-open{background:rgba(0,168,132,.2);color:#00a884} #mrPortal .mr-chat-item-status.mr-st-busy{background:rgba(255,170,0,.2);color:#ffa500} #mrPortal .mr-chat-item-status.mr-st-closed{background:rgba(134,150,160,.2);color:#8696a0} /* Link preview */ #mrPortal .mr-link-preview{background:#1f2c34;border-radius:8px;padding:10px;margin-top:8px;border-left:3px solid #00a884;cursor:pointer} #mrPortal .mr-link-preview:hover{background:#263943} #mrPortal .mr-link-preview-title{font-weight:bold;font-size:12px;margin-bottom:4px;color:#e9edef} #mrPortal .mr-link-preview-url{font-size:10px;color:#00a884;word-break:break-all} /* Chat Header */ #mrPortal .mr-chat-header{padding:12px 16px;background:#202c33;border-bottom:1px solid #222d34;flex-shrink:0} #mrPortal .mr-chat-header-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} #mrPortal .mr-chat-header-actions{display:flex;gap:6px;flex-wrap:wrap} /* Chat Messages - WhatsApp style */ #mrPortal .mr-chat-messages{flex:1;overflow-y:auto;padding:20px 60px;background-color:#0b141a;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23111b21' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");min-height:0} #mrPortal .mr-msg-group{margin-bottom:4px} #mrPortal .mr-msg-sender{font-size:12px;margin-bottom:2px;display:flex;align-items:center;gap:8px;font-weight:500} #mrPortal .mr-msg-sender-in{color:#00a884;padding-left:8px} #mrPortal .mr-msg-sender-out{color:#53bdeb;text-align:right;justify-content:flex-end;padding-right:8px} #mrPortal .mr-msg-sender-time{color:#8696a0;font-size:11px;font-weight:normal} #mrPortal .mr-msg{max-width:65%;padding:8px 12px;margin:2px 0;border-radius:8px;font-size:14px;position:relative;line-height:1.4} #mrPortal .mr-msg-in{background:#202c33;margin-right:auto;border-top-left-radius:0;color:#e9edef} #mrPortal .mr-msg-out{background:#005c4b;margin-left:auto;border-top-right-radius:0;color:#e9edef} #mrPortal .mr-msg-text{line-height:1.5;word-break:break-word} #mrPortal .mr-msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px} #mrPortal .mr-msg-time{font-size:11px;color:rgba(255,255,255,.5)} #mrPortal .mr-msg-check{font-size:14px;color:rgba(255,255,255,.5)} #mrPortal .mr-msg-check.mr-read{color:#53bdeb} #mrPortal .mr-msg-date{text-align:center;color:#8696a0;font-size:12px;padding:12px 0} #mrPortal .mr-msg-date span{background:#1f2c34;padding:6px 16px;border-radius:8px} #mrPortal .mr-msg img,#mrPortal .mr-msg video{max-width:100%;max-height:280px;border-radius:8px;cursor:pointer;display:block;margin-bottom:6px} #mrPortal .mr-msg-file{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.2);padding:10px 14px;border-radius:8px;margin-top:6px;cursor:pointer;text-decoration:none;color:#e9edef} #mrPortal .mr-msg-file:hover{background:rgba(0,0,0,.3)} /* Chat Input - WhatsApp style */ #mrPortal .mr-chat-input{padding:12px 16px;background:#202c33;border-top:1px solid #222d34;flex-shrink:0} #mrPortal .mr-chat-input-row{display:flex;gap:10px;align-items:center} #mrPortal .mr-chat-input-row .mr-inp{background:#2a3942;border:none!important;border-radius:8px;padding:12px 16px;color:#e9edef;font-size:14px;flex:1} #mrPortal .mr-chat-input-row .mr-inp:focus{box-shadow:none!important;outline:none!important} #mrPortal .mr-chat-input-row .mr-inp::placeholder{color:#8696a0} #mrPortal .mr-chat-input-row > .mr-btn{background:#00a884!important;border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px;padding:0!important;display:flex!important;align-items:center;justify-content:center;font-size:18px;cursor:pointer!important;color:#fff!important;flex-shrink:0} #mrPortal .mr-chat-input-row > .mr-btn:hover{background:#06cf9c!important} #mrPortal .mr-chat-preview{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:10px;background:#1a2930;border-radius:8px} #mrPortal .mr-chat-preview:empty{display:none;margin:0;padding:0} #mrPortal .mr-chat-preview-item{position:relative;background:#2a3942;border-radius:8px;padding:4px} #mrPortal .mr-chat-preview-item img{width:70px;height:70px;object-fit:cover;border-radius:6px} #mrPortal .mr-chat-preview-item .mr-file-info{padding:10px 14px;font-size:12px} #mrPortal .mr-chat-preview-remove{position:absolute;top:-8px;right:-8px;background:#f44336;color:#fff;width:22px;height:22px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:bold} #mrPortal .mr-attach-btn{padding:10px 14px!important;flex-shrink:0;background:#2a3942!important;border-radius:50%!important;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px} /* Media Modal */ #mrPortal .mr-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #mrPortal .mr-media-item{aspect-ratio:1;background:#1a1a25;border-radius:8px;overflow:hidden;cursor:pointer} #mrPortal .mr-media-item img,#mrPortal .mr-media-item video{width:100%;height:100%;object-fit:cover} #mrPortal .mr-link-item,#mrPortal .mr-doc-item{padding:12px;background:#1a1a25;border-radius:8px;margin-bottom:8px;cursor:pointer} #mrPortal .mr-link-item:hover,#mrPortal .mr-doc-item:hover{background:#252535} /* Avatar */ #mrPortal .mr-avatar{border-radius:50%!important;object-fit:cover;aspect-ratio:1/1} #mrPortal .mr-avatar-letter{border-radius:50%;background:linear-gradient(135deg,#00f0ff,#ff00ff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#000} #mrPortal .mr-tag{font-size:10px;margin-left:4px} #mrPortal .mr-t-top{color:#ffd700} #mrPortal .mr-t-new{color:#0f0} #mrPortal .mr-t-vip{color:#ff00ff} #mrPortal .mr-t-warn{color:#f44} /* Modal */ #mrPortal .mr-modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,.95);display:none;z-index:100000;overflow-y:auto;padding:40px 20px} #mrPortal .mr-modal.mr-show{display:block!important} #mrPortal .mr-modal-box{background:#12121a;border-radius:16px;padding:24px;width:100%;max-width:480px;margin:0 auto} #mrPortal #mrViewModal .mr-modal-box{max-width:1100px!important;width:95%!important} #mrPortal .mr-modal-box h3{margin:0 0 16px} /* Dashboard */ #mrPortal .mr-dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} #mrPortal .mr-dash-card{background:#1a1a25;border-radius:10px;padding:16px;text-align:center} #mrPortal .mr-dash-card .mr-val{font-size:28px;font-weight:700} #mrPortal .mr-dash-card .mr-lbl{font-size:11px;color:#aaa;margin-top:4px} #mrPortal .mr-gold{color:#ffd700!important} /* Tables */ #mrPortal .mr-stats-table{overflow-x:auto;margin:12px 0} #mrPortal .mr-stats-table table{width:100%;border-collapse:collapse;font-size:12px;background:#0d0d14} #mrPortal .mr-stats-table th{background:#15151f;color:#999;font-weight:600;text-align:left;padding:12px 10px;text-transform:uppercase;font-size:10px} #mrPortal .mr-stats-table td{padding:12px 10px;background:#0d0d14} #mrPortal .mr-stats-table tbody tr{transition:background .15s;cursor:pointer} #mrPortal .mr-stats-table tbody tr:hover{background:#151520} #mrPortal .mr-stat-creator{display:flex;align-items:center;gap:8px} #mrPortal .mr-tik-link{color:#00f0ff;text-decoration:none;cursor:pointer} #mrPortal .mr-tik-link:hover{text-decoration:underline} #mrPortal .mr-pct-up{color:#0f0} #mrPortal .mr-pct-down{color:#f44} #mrPortal .mr-pct-na{color:#555} #mrPortal .mr-small{font-size:10px;color:#999} #mrPortal .mr-stats-toolbar{background:#12121a;border-radius:10px;padding:12px;margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} #mrPortal .mr-pagination{display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:12px 0;font-size:12px;color:#aaa} #mrPortal .mr-pagination select,#mrPortal .mr-pagination button{background:#1a1a25;color:#fff;padding:6px 10px;border-radius:6px;cursor:pointer} #mrPortal .mr-pagination button:disabled{opacity:.3;cursor:not-allowed} #mrPortal .mr-profile-header{display:flex;gap:16px;align-items:center;margin-bottom:16px} #mrPortal .mr-period-badge{background:#1a1a25;padding:6px 12px;border-radius:6px;font-size:11px;color:#bbb;display:inline-block;margin-bottom:12px} #mrPortal .mr-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #mrPortal .mr-info-lbl{display:block;font-size:10px;color:#aaa} #mrPortal .mr-info-val{display:block;font-size:14px;font-weight:600;margin-top:4px} #mrPortal .mr-view-extra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;font-size:11px;color:#bbb} #mrPortal .mr-prog{background:#1a1a25;border-radius:4px;height:6px;margin:4px 0;overflow:hidden} #mrPortal .mr-prog-bar{background:linear-gradient(90deg,#00f0ff,#ff00ff);height:100%;transition:width .3s} #mrPortal .mr-log-row{padding:8px 12px;font-size:12px;border-bottom:1px solid #1a1a25} #mrPortal .mr-log-time{color:#999;margin-right:10px} #mrPortal .mr-log-action{color:#00f0ff;font-weight:600;margin-right:6px} #mrPortal .mr-log-user{float:right;color:#999} #mrPortal .mr-perms-box{background:#1a1a25;border-radius:8px;padding:12px;margin:12px 0} #mrPortal .mr-perms-box p{margin:0 0 8px;color:#bbb;font-size:11px} #mrPortal .mr-perms-box label{display:block;margin:6px 0;cursor:pointer;font-size:12px} #mrPortal .mr-perms-box input[type="checkbox"]{margin-right:8px} #mrPortal .mr-row{padding:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .15s} #mrPortal .mr-row:hover{background:rgba(0,240,255,.05)} @media(max-width:900px){#mrPortal .mr-chat-grid{display:block}#mrPortal .mr-chat-sidebar{height:200px}#mrPortal .mr-chat-messages{height:300px}#mrPortal .mr-dash-grid{grid-template-columns:repeat(2,1fr)}#mrPortal .mr-login-box{margin:0 16px;padding:30px 24px}} /* Detector Tab Styles */ #mrPortal .mr-detector-tab{background:none;color:#bbb;font-size:14px;padding:14px 24px;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;font-weight:600} #mrPortal .mr-detector-tab:hover{color:#00f0ff} #mrPortal .mr-detector-tab.active{color:#00f0ff;border-bottom-color:#00f0ff} #mrPortal .mr-account-card{background:rgba(255,255,255,0.03);border-radius:12px;overflow:hidden;border:2px solid rgba(255,0,255,0.3)} #mrPortal .mr-account-header{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,0.1)} #mrPortal .mr-account-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #ff00ff} #mrPortal .mr-account-name{font-size:16px;font-weight:700;color:#00ffff} #mrPortal .mr-account-badge{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600} #mrPortal .mr-account-badge-original{background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid #4ade80} #mrPortal .mr-account-badge-high{background:rgba(255,107,107,0.2);color:#ff6b6b;border:1px solid #ff6b6b} #mrPortal .mr-account-badge-medium{background:rgba(255,165,0,0.2);color:#ffa500;border:1px solid #ffa500} #mrPortal .mr-account-badge-low{background:rgba(74,222,128,0.2);color:#4ade80;border:1px solid #4ade80} #mrPortal .mr-account-details{padding:16px} #mrPortal .mr-account-row{display:flex;gap:8px;margin-bottom:6px;font-size:12px} #mrPortal .mr-account-row-label{color:#bbb;min-width:120px} #mrPortal .mr-account-row-value{color:#fff} #mrPortal .mr-account-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1)} #mrPortal .mr-account-stat{background:rgba(0,0,0,0.3);padding:10px;border-radius:8px;text-align:center;border:1px solid rgba(255,0,255,0.2)} #mrPortal .mr-account-stat-value{font-size:16px;font-weight:700;color:#ff00ff} #mrPortal .mr-account-stat-label{font-size:10px;color:#bbb;margin-top:2px} #mrPortal .mr-account-actions{display:flex;gap:8px;padding:12px 16px;background:rgba(0,0,0,0.2);border-top:1px solid rgba(255,255,255,0.1)} #mrPortal .mr-account-actions button{flex:1;padding:10px;font-size:12px} /* Drag & Drop styles */ #mrPortal .mr-chat-messages.mr-drag-over{background-color:#1a3a2a!important;outline:3px dashed #00a884;outline-offset:-10px} #mrPortal .mr-chat-messages.mr-drag-over::after{content:'📎 Sleep bestanden hier';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#00a884;color:#fff;padding:20px 40px;border-radius:12px;font-size:16px;font-weight:600;z-index:100} #mrPortal .mr-chat-messages{position:relative} /* File Preview styles */ #mrPortal .mr-chat-preview{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:12px;background:#1a2930;border-radius:10px;border:1px solid #2a3942} #mrPortal .mr-chat-preview:empty{display:none;margin:0;padding:0;border:none} #mrPortal .mr-preview-item{position:relative;background:#2a3942;border-radius:10px;overflow:hidden;border:2px solid #3a4952} #mrPortal .mr-preview-item img{width:80px;height:80px;object-fit:cover;display:block} #mrPortal .mr-preview-item:hover{border-color:#00a884} #mrPortal .mr-preview-file{padding:12px 16px;display:flex;align-items:center;gap:10px;min-width:120px} #mrPortal .mr-preview-icon{font-size:24px} #mrPortal .mr-preview-name{font-size:11px;color:#e9edef;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mrPortal .mr-preview-remove{position:absolute;top:-4px;right:-4px;background:#f44336;color:#fff;width:24px;height:24px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:bold;border:2px solid #1a2930;transition:transform .15s} #mrPortal .mr-preview-remove:hover{transform:scale(1.1);background:#ff5252} /* Paste hint */ #mrPortal .mr-chat-input-row .mr-inp::placeholder{color:#8696a0} #mrPortal .mr-paste-hint{font-size:10px;color:#8696a0;margin-top:6px;text-align:center} #mrPortal .mr-paste-hint kbd{background:#2a3942;padding:2px 6px;border-radius:4px;font-family:inherit} /* Discord Integration */ #mrPortal .mr-discord-container{background:#12121a;border-radius:12px;overflow:hidden} #mrPortal .mr-discord-header{padding:16px;background:#1a1a25;display:flex;justify-content:space-between;align-items:center} #mrPortal .mr-discord-tabs{display:flex;gap:4px;padding:12px;background:#0d0d14;overflow-x:auto;flex-wrap:wrap} #mrPortal .mr-discord-tab{background:#1a1a25;color:#bbb;padding:8px 14px;border-radius:8px;font-size:12px;cursor:pointer;white-space:nowrap;border:none;transition:all .15s} #mrPortal .mr-discord-tab:hover{background:#252535;color:#fff} #mrPortal .mr-discord-tab.mr-active{background:linear-gradient(135deg,#5865F2,#7289DA);color:#fff} #mrPortal .mr-discord-messages{padding:16px;max-height:calc(100vh - 350px);overflow-y:auto} #mrPortal .mr-discord-msg{background:#1a1a25;border-radius:12px;padding:14px;margin-bottom:12px;border-left:3px solid #5865F2} #mrPortal .mr-discord-msg-header{display:flex;align-items:center;gap:10px;margin-bottom:10px} #mrPortal .mr-discord-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover} #mrPortal .mr-discord-msg-meta{flex:1;display:flex;flex-direction:column;gap:2px} #mrPortal .mr-discord-author{font-weight:bold;font-size:13px;color:#fff} #mrPortal .mr-discord-channel{font-size:10px;padding:2px 8px;border-radius:10px;display:inline-block;width:fit-content} #mrPortal .mr-discord-time{font-size:11px;color:#aaa} #mrPortal .mr-discord-msg-content{font-size:14px;line-height:1.6;color:#e0e0e0} #mrPortal .mr-discord-msg-content a{color:#00a8ff;text-decoration:none} #mrPortal .mr-discord-msg-content a:hover{text-decoration:underline} #mrPortal .mr-discord-msg-content code{background:#0d0d14;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:12px} #mrPortal .mr-discord-attachments{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px} #mrPortal .mr-discord-img{max-width:300px;max-height:200px;border-radius:8px;cursor:pointer;transition:transform .15s} #mrPortal .mr-discord-img:hover{transform:scale(1.02)} #mrPortal .mr-discord-file{background:#0d0d14;padding:8px 12px;border-radius:6px;color:#00f0ff;text-decoration:none;font-size:12px} #mrPortal .mr-discord-file:hover{background:#15151f} #mrPortal .mr-discord-embed{background:#0d0d14;border-radius:8px;padding:12px;margin-top:10px;border-left:3px solid #5865F2} #mrPortal .mr-discord-embed-title{font-weight:bold;color:#fff;margin-bottom:6px} #mrPortal .mr-discord-embed-desc{font-size:13px;color:#ccc;line-height:1.5} /* ===== GLOBAL TEXT READABILITY - all text white on dark backgrounds ===== */ #mrPortal label,#mrPortal .mr-perms-box label{color:#e0e0e0!important;font-size:13px} #mrPortal .mr-perms-box p{color:#fff!important;font-weight:600;font-size:12px} #mrPortal .mr-modal-box h3{color:#fff} #mrPortal .mr-modal-box label{color:#e0e0e0!important} #mrPortal .mr-modal-box p{color:#ddd} #mrPortal .mr-dash-card .mr-lbl{color:#ccc} #mrPortal .mr-info-lbl{color:#ccc!important} #mrPortal .mr-log-time{color:#bbb} #mrPortal .mr-log-user{color:#bbb} #mrPortal .mr-small{color:#bbb!important} #mrPortal .mr-empty{color:#999} #mrPortal .mr-p0{color:#ccc} #mrPortal .mr-filter{color:#ccc} #mrPortal .mr-account-row-label{color:#ddd} #mrPortal .mr-account-stat-label{color:#ddd} #mrPortal .mr-discord-time{color:#ccc} #mrPortal .mr-discord-embed-desc{color:#ccc} #mrPortal .mr-chat-item-meta{color:#aab} #mrPortal .mr-period-badge{color:#ddd} #mrPortal .mr-stats-table th{color:#ccc!important} #mrPortal .mr-btn2{color:#ddd} /* Games panel - flush layout */ #mrPortal #mrAPanel7,#mrPortal #mrAPanel6{margin:-16px;margin-top:0} #mrPortal #mrCPanel4{margin:-16px;margin-top:0} @keyframes mrFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} @keyframes mrAlertSlide{0%{opacity:0;transform:translateX(-40px) scale(0.9)}60%{transform:translateX(6px) scale(1.02)}100%{opacity:1;transform:translateX(0) scale(1)}} @keyframes mrAlertPulse{0%,100%{box-shadow:0 4px 30px var(--ac,#ff006022)}50%{box-shadow:0 4px 50px var(--ac,#ff006055)}} @keyframes mrShimmer{0%{left:-100%}100%{left:150%}} @keyframes mrIconPop{0%{opacity:0;transform:scale(0.3) rotate(-20deg)}70%{transform:scale(1.15) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes mrGiftPop{0%{opacity:0;transform:translateX(20px) scale(0.85)}60%{transform:translateX(-4px) scale(1.03)}100%{opacity:1;transform:translateX(0) scale(1)}} @keyframes mrRainbow{0%{border-color:#ffd700}25%{border-color:#ff0060}50%{border-color:#00f0ff}75%{border-color:#a855f7}100%{border-color:#ffd700}} @keyframes mrRainbowText{0%{color:#ffd700}25%{color:#ff0060}50%{color:#00f0ff}75%{color:#a855f7}100%{color:#ffd700}} @keyframes mrRainbowGlow{0%{filter:drop-shadow(0 0 20px #ffd700)}33%{filter:drop-shadow(0 0 20px #ff0060)}66%{filter:drop-shadow(0 0 20px #00f0ff)}100%{filter:drop-shadow(0 0 20px #ffd700)}} /* ===== Premium tab buttons refresh ===== */ #mrPortal .mr-tabs{ display:flex; gap:12px; flex-wrap:nowrap; overflow-x:auto; padding:6px 4px 10px; scrollbar-width:thin; } #mrPortal .mr-tabs::-webkit-scrollbar{height:8px} #mrPortal .mr-tabs::-webkit-scrollbar-thumb{background:#2a2e55;border-radius:999px} #mrPortal .mr-tabs > button{ position:relative; min-width:132px; min-height:92px; padding:18px 16px 16px; border-radius:18px !important; border:1px solid rgba(116,128,255,.18) !important; background: radial-gradient(circle at top, rgba(0,240,255,.16), transparent 42%), linear-gradient(180deg, rgba(20,24,58,.98), rgba(10,12,34,.98)) !important; color:#d6ddff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.28); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; font-size:15px !important; font-weight:700 !important; line-height:1.15; transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease, background .25s ease; white-space:normal; flex:0 0 auto; overflow:hidden; } #mrPortal .mr-tabs > button::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg, rgba(0,240,255,.55), rgba(123,92,255,.28), rgba(255,0,200,.22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.38; pointer-events:none; } #mrPortal .mr-tabs > button::after{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:999px 999px 0 0; background:linear-gradient(90deg,#00e5ff,#7b5cff); opacity:0; transform:scaleX(.35); transition:all .25s ease; } #mrPortal .mr-tabs > button:hover{ transform:translateY(-4px); color:#fff !important; border-color:rgba(0,240,255,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.36), 0 0 0 1px rgba(0,240,255,.06); } #mrPortal .mr-tabs > button:hover::after{opacity:.7;transform:scaleX(.8)} #mrPortal .mr-tabs > .mr-btn{ background: radial-gradient(circle at top, rgba(0,240,255,.22), transparent 42%), linear-gradient(135deg, rgba(15,235,255,.22), rgba(123,92,255,.2), rgba(10,12,34,.98)) !important; color:#fff !important; border-color:rgba(0,240,255,.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.34), 0 0 22px rgba(0,240,255,.18); } #mrPortal .mr-tabs > .mr-btn::after{opacity:1;transform:scaleX(1)} #mrPortal .mr-tabs > .mr-btn2{ background: radial-gradient(circle at top, rgba(255,255,255,.05), transparent 40%), linear-gradient(180deg, rgba(18,21,51,.98), rgba(9,11,31,.98)) !important; } #mrPortal .mr-tabs > button .mr-badge{ position:absolute; top:10px; right:10px; margin-left:0; box-shadow:0 0 16px rgba(255,0,80,.35); } /* v22 compact premium tabs */ #mrPortal .mr-tabs{display:flex;gap:12px;flex-wrap:wrap;align-items:center} #mrPortal .mr-tabs>.mr-btn, #mrPortal .mr-tabs>.mr-btn2{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:10px 18px; border-radius:18px; font-size:13px; line-height:1.15; box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease; } #mrPortal .mr-tabs>.mr-btn:hover, #mrPortal .mr-tabs>.mr-btn2:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,240,255,.14)} #mrPortal .mr-tabs>.mr-btn2{background:linear-gradient(145deg,#0f1225,#171b37);border:1px solid rgba(0,240,255,.18);color:#d7ddff} #mrPortal .mr-tabs>.mr-btn{background:linear-gradient(145deg,#10152f,#1a2152);border:1px solid rgba(0,240,255,.34);color:#fff;box-shadow:0 0 0 1px rgba(0,240,255,.08),0 10px 26px rgba(0,240,255,.12)} #mrPortal .mr-tabs>.mr-btn::after, #mrPortal .mr-tabs>.mr-btn2::after, #mrPortal .mr-detector-tab::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,rgba(0,240,255,.38),rgba(123,92,255,.26),rgba(255,0,200,.18)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.55; } #mrPortal .mr-detector-tab{ position:relative; background:linear-gradient(145deg,#0c1024,#12183a); color:#d7ddff; font-size:12px; padding:10px 14px; min-height:50px; min-width:116px; border-radius:16px; border:1px solid rgba(0,240,255,.14); border-bottom:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease; font-weight:650; display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.2; box-shadow:0 8px 22px rgba(0,0,0,.22); margin:6px 6px 10px 0; white-space:normal; } #mrPortal .mr-detector-tab:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,240,255,.16)} #mrPortal .mr-detector-tab.active{ color:#fff; background:radial-gradient(circle at 50% 25%,rgba(0,240,255,.14),rgba(123,92,255,.12) 45%,#151a3a 100%); border-color:rgba(0,240,255,.46); box-shadow:0 0 0 1px rgba(0,240,255,.16),0 10px 28px rgba(0,240,255,.18), inset 0 -3px 0 #00f0ff; } #mrPortal .mr-detector-tab.active::before, #mrPortal .mr-tabs>.mr-btn::before{ content:''; position:absolute; left:18px; right:18px; bottom:6px; height:3px; border-radius:999px; background:linear-gradient(90deg,#00f0ff,#8b5cf6); box-shadow:0 0 12px rgba(0,240,255,.5); }