/** * Viskoo Agência — CSS do painel (shortcode [viskoo_dashboard]). * * Portado quase 1:1 do design system em app-estatico/index.html, com todos * os seletores prefixados por .viskoo-scope pra não vazar reset/tema pro * resto do site WordPress (o mockup original era uma página HTML inteira, * dona do ; aqui é só um bloco de conteúdo dentro de um tema). */ /* ============ TOKENS (mesmo design system de modelo-dashboard.html) ============ */ :root{ --bg-base:#080808; --bg-surface:#111111; --bg-elevated:#1a1a1a; --bg-overlay:#222222; --border:rgba(255,255,255,.07); --border-hover:rgba(255,255,255,.14); --text-primary:#ffffff; --text-secondary:rgba(255,255,255,.85); --text-muted:rgba(255,255,255,.62); --accent:#f48322; --accent-dim:rgba(244,131,34,.15); --accent-glow:rgba(244,131,34,.35); --accent-hover:#ff9a3c; --font-body:'DM Sans',sans-serif; --font-mono:'DM Mono',monospace; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px; --r-sm:6px;--r-md:12px;--r-lg:20px;--r-xl:32px;--r-full:9999px; --shadow-md:0 4px 24px rgba(0,0,0,.6); --shadow-accent:0 0 32px rgba(244,131,34,.25); --ease-out:cubic-bezier(.25,.46,.45,.94); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:150ms; --dur-base:280ms; --red:#ff453a; --red-dim:rgba(255,69,58,.14); --orange:#f48322; --orange-dim:rgba(244,131,34,.14); --yellow:#ffd60a; --yellow-dim:rgba(255,214,10,.14); --green:#30d158; --green-dim:rgba(48,209,88,.14); --blue:#64d2ff; --blue-dim:rgba(100,210,255,.14); --purple:#bf5af2; --purple-dim:rgba(191,90,242,.14); --gray:#8b8b8b; --gray-dim:rgba(139,139,139,.14); --topbar-bg:rgba(8,8,8,.85); --topnav-bg:rgba(0,0,0,.22); } /* ============ TEMA CLARO ============ */ :root[data-theme="light"]{ --bg-base:#f6f6f4; --bg-surface:#ffffff; --bg-elevated:#eeeeec; --bg-overlay:#e4e4e1; --border:rgba(0,0,0,.09); --border-hover:rgba(0,0,0,.18); --text-primary:#000000; --text-secondary:rgba(0,0,0,.82); --text-muted:rgba(0,0,0,.62); --shadow-md:0 4px 24px rgba(0,0,0,.08); --shadow-accent:0 0 32px rgba(244,131,34,.18); --topbar-bg:rgba(246,246,244,.85); --topnav-bg:rgba(0,0,0,.045); } html,body.viskoo-fullpage{margin:0;padding:0;min-height:100%} .viskoo-scope *,.viskoo-scope *::before,.viskoo-scope *::after{box-sizing:border-box;margin:0;padding:0} .viskoo-scope{-webkit-font-smoothing:antialiased} .viskoo-scope{background:var(--bg-base);color:var(--text-primary);font-family:var(--font-body);font-size:17px;line-height:1.6;transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)} .viskoo-scope ::selection{background:var(--accent);color:#000} .viskoo-scope ::-webkit-scrollbar{width:4px;height:4px} .viskoo-scope ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:var(--r-full)} .viskoo-scope a{color:inherit;text-decoration:none} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes fillBar{from{width:0}} @keyframes fillHeight{from{height:0}} @keyframes spin{to{transform:rotate(360deg)}} .viskoo-scope .btn-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:-2px;margin-right:7px} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} @keyframes drawLine{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}} .viskoo-scope .reveal{opacity:0;animation:fadeUp .6s var(--ease-out) forwards} /* ============ LOGIN ============ */ .viskoo-scope .login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden} .viskoo-scope .login-screen::before{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,var(--accent-glow),transparent 70%);opacity:.25;pointer-events:none} .viskoo-scope .login-card{width:100%;max-width:380px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px 32px;position:relative;z-index:1;box-shadow:var(--shadow-md)} .viskoo-scope .login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px} .viskoo-scope .login-mark{width:52px;height:52px;background:var(--accent);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:#000} .viskoo-scope .login-title{font-size:17px;font-weight:700;letter-spacing:-.02em} .viskoo-scope .login-sub{font-size:14px;color:var(--text-muted);text-align:center} .viskoo-scope .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .viskoo-scope .field label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)} .viskoo-scope .field input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;color:var(--text-primary);font-family:var(--font-body);font-size:15px;outline:none;transition:border-color var(--dur-fast)} .viskoo-scope .field input:focus{border-color:var(--accent)} .viskoo-scope .field-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px} .viskoo-scope .field-row a{font-size:13px;color:var(--accent)} .viskoo-scope .chk-row{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-secondary)} .viskoo-scope .login-foot{margin-top:22px;text-align:center;font-size:13px;color:var(--text-muted)} .viskoo-scope .login-foot a{color:var(--accent)} .viskoo-scope .login-error{font-size:13px;color:var(--red);margin:-8px 0 14px;display:none} .viskoo-scope .login-success{font-size:13px;color:var(--green);background:var(--green-dim);border-radius:var(--r-sm);padding:12px 14px;margin:4px 0 6px;display:none} .viskoo-scope .login-screen .theme-toggle{position:absolute;top:20px;right:20px;z-index:2} /* ============ THEME SWITCH ============ */ .viskoo-scope .theme-switch{position:relative;width:54px;height:28px;border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;flex-shrink:0;padding:0;transition:background var(--dur-base),border-color var(--dur-base)} .viskoo-scope .theme-switch:hover{border-color:var(--border-hover)} .viskoo-scope .ts-track{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font-size:13px;pointer-events:none} .viskoo-scope .ts-icon{opacity:.55;line-height:1;transition:opacity var(--dur-base)} .viskoo-scope .theme-switch.is-light .ts-icon.ts-sun,.viskoo-scope .theme-switch:not(.is-light) .ts-icon.ts-moon{opacity:1} .viskoo-scope .ts-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform var(--dur-base) var(--ease-spring)} .viskoo-scope .theme-switch.is-light .ts-knob{transform:translateX(26px)} /* ============ SELEÇÃO DE EMPRESA ============ */ .viskoo-scope .empresa-screen{min-height:100vh;padding:40px 24px;display:none} .viskoo-scope .empresa-screen.active{display:block} .viskoo-scope .empresa-screen-inner{max-width:960px;margin:0 auto} .viskoo-scope .es-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap} .viskoo-scope .es-head-left{display:flex;align-items:center;gap:14px} .viskoo-scope .es-title{font-size:19px;font-weight:700;letter-spacing:-.02em} .viskoo-scope .es-sub{font-size:14px;color:var(--text-muted);margin-top:2px} .viskoo-scope .es-sub b{color:var(--text-secondary)} .viskoo-scope .es-head-right{display:flex;align-items:center;gap:10px} .viskoo-scope .empresa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .viskoo-scope .empresa-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;cursor:pointer;transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base),box-shadow var(--dur-base)} .viskoo-scope .empresa-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-md)} .viskoo-scope .empresa-card .avatar{width:44px;height:44px;font-size:17px;margin-bottom:14px;border-radius:var(--r-md)} .viskoo-scope .ec-name{font-size:16px;font-weight:700;margin-bottom:3px} .viskoo-scope .ec-seg{font-size:13px;color:var(--text-muted);margin-bottom:14px} .viskoo-scope .ec-foot{display:flex;justify-content:space-between;align-items:center} .viskoo-scope .empresa-card.add-new{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);min-height:172px} .viskoo-scope .empresa-card.add-new .plus{font-size:26px;color:var(--accent);margin-bottom:8px} .viskoo-scope .empresa-card.add-new:hover{color:var(--text-primary)} .viskoo-scope .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#000;font-weight:600;font-size:15px;font-family:var(--font-body);border-radius:var(--r-md);padding:12px 18px;border:none;cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast)} .viskoo-scope .btn:hover{background:var(--accent-hover)} .viskoo-scope .btn:active{transform:scale(.98)} .viskoo-scope .btn-block{width:100%} .viskoo-scope .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-primary)} .viskoo-scope .btn-ghost:hover{background:var(--bg-elevated);border-color:var(--border-hover)} .viskoo-scope .btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--r-sm)} .viskoo-scope .btn[disabled]{opacity:.35;cursor:not-allowed} /* ============ APP SHELL — menu superior + container central ============ */ .viskoo-scope .app-shell{display:none;min-height:100vh;flex-direction:column} .viskoo-scope .app-shell.active{display:flex} .viskoo-scope .app-topbar{position:sticky;top:0;z-index:50;background:var(--topbar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} .viskoo-scope .app-topbar-row1{display:flex;align-items:center;gap:20px;padding:14px 32px;max-width:1200px;margin:0 auto} .viskoo-scope .topbar-brand{display:flex;align-items:center;gap:10px;flex-shrink:0} .viskoo-scope .logo-mark{width:34px;height:34px;background:var(--accent);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;color:#000;flex-shrink:0} .viskoo-scope .logo-text{font-size:16px;font-weight:700;letter-spacing:-.02em} .viskoo-scope .logo-sub{font-size:12px;color:var(--text-muted)} .viskoo-scope .topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto} .viskoo-scope .topbar-user{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--r-full);background:var(--bg-elevated);border:1px solid var(--border)} .viskoo-scope .topbar-user .user-meta{display:flex;flex-direction:column;line-height:1.25} .viskoo-scope .topbar-user .user-meta b{font-size:12px;font-weight:600} .viskoo-scope .topbar-user .user-meta span{font-size:11px;color:var(--text-muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .viskoo-scope .icon-btn{width:36px;height:36px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);font-size:15px;flex-shrink:0;padding:0;transition:color var(--dur-fast),border-color var(--dur-fast)} .viskoo-scope .icon-btn:hover{color:var(--red);border-color:rgba(255,69,58,.3)} .viskoo-scope .app-topnav-wrap{border-top:1px solid var(--border);background:var(--topnav-bg);position:relative} .viskoo-scope .app-topnav-wrap::before,.viskoo-scope .app-topnav-wrap::after{content:'';position:absolute;top:0;bottom:0;width:24px;pointer-events:none;z-index:1;opacity:0;transition:opacity var(--dur-fast)} .viskoo-scope .app-topnav-wrap::before{left:0;background:linear-gradient(90deg,var(--topnav-bg),transparent)} .viskoo-scope .app-topnav-wrap::after{right:0;background:linear-gradient(270deg,var(--topnav-bg),transparent)} .viskoo-scope .app-topnav-wrap.can-scroll-l::before,.viskoo-scope .app-topnav-wrap.can-scroll-r::after{opacity:1} .viskoo-scope .app-topnav{display:flex;gap:2px;padding:0 32px;max-width:1200px;margin:0 auto;overflow-x:auto} .viskoo-scope .nav-item{position:relative;display:flex;align-items:center;gap:7px;padding:13px 14px;font-size:14px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)} .viskoo-scope .nav-item:hover{color:var(--text-primary)} .viskoo-scope .nav-item.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} .viskoo-scope .nav-tooltip{position:fixed;max-width:220px;background:var(--bg-overlay);color:var(--text-primary);font-size:12px;font-weight:400;line-height:1.4;text-align:center;padding:8px 11px;border-radius:var(--r-md);border:1px solid var(--border-hover);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur-fast),transform var(--dur-fast);transform:translateX(-50%) translateY(-4px);z-index:500;white-space:normal} .viskoo-scope .nav-tooltip.show{opacity:1;transform:translateX(-50%) translateY(0)} .viskoo-scope .nav-icon{font-size:15px} .viskoo-scope .topnav-divider{width:1px;align-self:center;height:18px;background:var(--border);margin:0 6px;flex-shrink:0} .viskoo-scope .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0} /* ============ WORKSPACE SWITCHER ============ */ .viskoo-scope .workspace-switcher{position:relative;flex-shrink:0} .viskoo-scope .ws-btn{width:220px;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-md);background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;text-align:left;font-family:var(--font-body)} .viskoo-scope .ws-btn:hover{border-color:var(--border-hover)} .viskoo-scope .ws-btn .avatar{border-radius:var(--r-sm)} .viskoo-scope .ws-info{flex:1;min-width:0} .viskoo-scope .ws-name{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .viskoo-scope .ws-sub{display:block;font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .viskoo-scope .ws-caret{font-size:12px;color:var(--text-muted);flex-shrink:0} .viskoo-scope .ws-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;width:260px;background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:60;overflow:hidden} .viskoo-scope .ws-dropdown.active{display:block} .viskoo-scope .ws-dropdown-list{max-height:220px;overflow-y:auto} .viskoo-scope .ws-item{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;font-size:14px} .viskoo-scope .ws-item:hover{background:var(--bg-elevated)} .viskoo-scope .ws-item.current{background:var(--accent-dim);color:var(--accent)} .viskoo-scope .ws-item .avatar{width:24px;height:24px;font-size:12px;flex-shrink:0;border-radius:var(--r-sm)} .viskoo-scope .ws-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .viskoo-scope .ws-dropdown-actions{border-top:1px solid var(--border)} .viskoo-scope .ws-action{width:100%;text-align:left;padding:10px 12px;font-size:14px;color:var(--text-secondary);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--font-body)} .viskoo-scope .ws-action:hover{background:var(--bg-elevated);color:var(--text-primary)} .viskoo-scope .page-container{width:100%;max-width:1200px;margin:0 auto;padding:28px 32px 80px;display:flex;flex-direction:column;gap:10px} .viskoo-scope .page-title-block{margin-bottom:6px} .viskoo-scope .topbar-title{font-size:20px;font-weight:700;letter-spacing:-.02em} .viskoo-scope .topbar-sub{font-size:13px;color:var(--text-muted);margin-top:2px} .viskoo-scope .chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-family:var(--font-mono);color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 10px;cursor:default} .viskoo-scope .chip.live{color:var(--green)} .viskoo-scope .chip.live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease-in-out infinite} .viskoo-scope .chip.toggle{cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)} .viskoo-scope .chip.toggle.active{background:var(--accent-dim);color:var(--accent);border-color:rgba(244,131,34,.3)} .viskoo-scope .page{padding:0;display:none;flex-direction:column;gap:26px} .viskoo-scope .page.active{display:flex} .viskoo-scope .section-title{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-bottom:14px} /* ============ GRID ============ */ .viskoo-scope .grid{display:grid;gap:16px} .viskoo-scope .g-stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .viskoo-scope .g-2{grid-template-columns:1.4fr .9fr} .viskoo-scope .g-2-even{grid-template-columns:1fr 1fr} .viskoo-scope .g-3{grid-template-columns:repeat(3,1fr)} @media(max-width:1100px){ .viskoo-scope .g-stats{grid-template-columns:repeat(2,1fr)} .viskoo-scope .g-2,.viskoo-scope .g-3,.viskoo-scope .g-2-even{grid-template-columns:1fr} } /* ============ CARD ============ */ .viskoo-scope .card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base),box-shadow var(--dur-base)} .viskoo-scope .card:hover{transform:translateY(-2px);border-color:var(--border-hover);box-shadow:var(--shadow-md)} .viskoo-scope .card-h{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .viskoo-scope .card-ht{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px} .viskoo-scope .card-hd{width:6px;height:6px;border-radius:50%;background:var(--accent)} .viskoo-scope .card-b{padding:18px 20px} /* ============ STAT TILES ============ */ .viskoo-scope .stat-card{padding:18px 20px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);position:relative;overflow:hidden} .viskoo-scope .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .viskoo-scope .stat-icon{font-size:17px;margin-bottom:10px;opacity:.9} .viskoo-scope .stat-value{font-size:clamp(22px,2.6vw,29px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:6px} .viskoo-scope .stat-label{font-size:14px;color:var(--text-secondary)} .viskoo-scope .stat-delta{font-size:13px;font-weight:500;margin-top:8px;display:flex;align-items:center;gap:4px} .viskoo-scope .stat-delta.up{color:var(--green)} .viskoo-scope .stat-delta.down{color:var(--red)} .viskoo-scope .stat-delta.flat{color:var(--text-muted)} .viskoo-scope .stat-card.accent{border-color:rgba(244,131,34,.35)} .viskoo-scope .stat-card.accent::after{content:'';position:absolute;top:-30%;right:-20%;width:140px;height:140px;background:radial-gradient(circle,var(--accent-glow),transparent 70%);pointer-events:none} /* ============ BADGES ============ */ .viskoo-scope .badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:var(--r-full);border:1px solid transparent} .viskoo-scope .badge-danger{background:rgba(255,69,58,.12);color:var(--red);border-color:rgba(255,69,58,.25)} .viskoo-scope .badge-warning{background:rgba(255,214,10,.12);color:var(--yellow);border-color:rgba(255,214,10,.25)} .viskoo-scope .badge-success{background:rgba(48,209,88,.12);color:var(--green);border-color:rgba(48,209,88,.25)} .viskoo-scope .badge-default{background:var(--bg-overlay);color:var(--text-secondary);border-color:var(--border)} .viskoo-scope .badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor} /* ============ CAMPAIGN STATUS ============ */ .viskoo-scope .status-card{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .viskoo-scope .status-left{display:flex;align-items:center;gap:14px} .viskoo-scope .status-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .viskoo-scope .status-name{font-size:17px;font-weight:700} .viskoo-scope .status-desc{font-size:14px;color:var(--text-muted);margin-top:2px} /* ============ PROGRESS ============ */ .viskoo-scope .progress-wrap{height:10px;background:var(--bg-elevated);border-radius:var(--r-full);overflow:hidden;margin-bottom:10px} .viskoo-scope .progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#ffb347);border-radius:var(--r-full);animation:fillBar 1.2s var(--ease-out) forwards} /* ============ CHART ============ */ .viskoo-scope .chart-toolbar{display:flex;gap:8px;flex-wrap:wrap} .viskoo-scope .chart-wrap{padding:8px 20px 20px;position:relative} .viskoo-scope .chart-wrap svg{width:100%;height:220px;display:block;overflow:visible} .viskoo-scope .chart-axis-label{font-family:var(--font-mono);font-size:12px;fill:var(--text-muted)} .viskoo-scope .chart-legend{display:flex;gap:16px;padding:14px 20px 0;font-size:13px;color:var(--text-muted)} .viskoo-scope .chart-legend b{color:var(--text-primary);font-family:var(--font-mono)} /* ============ GALLERY (criativos) ============ */ .viskoo-scope .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .viskoo-scope .creative-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base)} .viskoo-scope .creative-card:hover{transform:translateY(-2px);border-color:var(--border-hover)} .viskoo-scope .creative-thumb{aspect-ratio:16/10;position:relative;display:flex;align-items:center;justify-content:center;font-size:34px} .viskoo-scope .creative-crown{position:absolute;top:10px;left:10px;background:var(--accent);color:#000;font-size:12px;font-weight:700;padding:3px 9px;border-radius:var(--r-full);display:flex;align-items:center;gap:4px} .viskoo-scope .creative-type{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);border-radius:var(--r-sm);padding:4px 8px;font-size:13px;font-family:var(--font-mono);color:var(--text-primary)} .viskoo-scope .creative-body{padding:14px 16px} .viskoo-scope .creative-name{font-size:15px;font-weight:600;margin-bottom:8px} .viskoo-scope .creative-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--text-muted);border-top:1px solid var(--border);padding-top:10px;margin-top:2px} .viskoo-scope .creative-meta b{color:var(--text-secondary);font-family:var(--font-mono);font-weight:500} /* ============ TIMELINE ============ */ .viskoo-scope .timeline{padding:22px 24px} .viskoo-scope .timeline-item{display:grid;grid-template-columns:22px 1fr;gap:16px;position:relative;padding-bottom:26px} .viskoo-scope .timeline-item::before{content:'';position:absolute;left:10px;top:24px;bottom:-4px;width:1px;background:var(--border)} .viskoo-scope .timeline-item:last-child{padding-bottom:0} .viskoo-scope .timeline-item:last-child::before{display:none} .viskoo-scope .timeline-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:1} .viskoo-scope .timeline-dot.done{background:var(--green-dim);color:var(--green);border:1px solid var(--green)} .viskoo-scope .timeline-dot.andamento{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent)} .viskoo-scope .timeline-dot.andamento::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite} .viskoo-scope .timeline-dot.planejado{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border)} .viskoo-scope .t-date{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em} .viskoo-scope .t-title{font-size:15px;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .viskoo-scope .t-desc{font-size:14px;color:var(--text-secondary)} /* ============ AGENDAMENTO ============ */ .viskoo-scope .hours-card{padding:20px 24px} .viskoo-scope .hours-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;gap:10px} .viskoo-scope .hours-value{font-size:28px;font-weight:700;letter-spacing:-.03em} .viskoo-scope .hours-value .of{color:var(--text-muted);font-weight:500;font-size:17px} .viskoo-scope .hours-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--text-muted)} .viskoo-scope .hours-foot b{color:var(--text-secondary);font-weight:500} .viskoo-scope .next-session{display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid var(--border)} .viskoo-scope .next-session .ns-icon{width:38px;height:38px;border-radius:var(--r-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0} .viskoo-scope .next-session .ns-title{font-size:14px;font-weight:600} .viskoo-scope .next-session .ns-sub{font-size:13px;color:var(--text-muted);margin-top:2px} .viskoo-scope .cal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0} .viskoo-scope .cal-month{font-size:14px;font-weight:600;font-family:var(--font-mono)} .viskoo-scope .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:14px 20px 6px} .viskoo-scope .cal-dow{text-align:center;font-size:12px;color:var(--text-muted);text-transform:uppercase;padding-bottom:4px} .viskoo-scope .cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-size:14px;cursor:default;background:transparent;color:var(--text-muted);position:relative} .viskoo-scope .cal-day.empty{visibility:hidden} .viskoo-scope .cal-day.past{opacity:.25} .viskoo-scope .cal-day.has-slot{background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;border:1px solid var(--border)} .viskoo-scope .cal-day.has-slot:hover{border-color:var(--accent)} .viskoo-scope .cal-day.has-slot::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--accent)} .viskoo-scope .cal-day.today{color:var(--accent);font-weight:700} .viskoo-scope .cal-day.selected{background:var(--accent);color:#000;font-weight:700} .viskoo-scope .cal-day.selected::after{display:none} .viskoo-scope .slot-section{padding:16px 20px 20px;border-top:1px solid var(--border)} .viskoo-scope .slot-section-title{font-size:13px;color:var(--text-muted);margin-bottom:10px} .viskoo-scope .slot-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .viskoo-scope .slot-chip{font-family:var(--font-mono);font-size:14px;padding:8px 14px;border-radius:var(--r-md);background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast)} .viskoo-scope .slot-chip:hover{border-color:var(--border-hover)} .viskoo-scope .slot-chip.selected{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700} .viskoo-scope .confirm-banner{display:none;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);background:var(--green-dim);color:var(--green);font-size:14px;margin-top:12px} /* ============ RELATÓRIOS ============ */ .viskoo-scope .report-row{display:grid;grid-template-columns:1fr 130px 100px 90px;align-items:center;gap:14px;padding:14px 20px} .viskoo-scope .report-row:not(:last-child){border-bottom:1px solid var(--border)} .viskoo-scope .report-name{font-size:15px;font-weight:600} .viskoo-scope .report-sub{font-size:13px;color:var(--text-muted);margin-top:2px} .viskoo-scope .report-date{font-family:var(--font-mono);font-size:14px;color:var(--text-secondary)} @media(max-width:800px){ .viskoo-scope .report-row{grid-template-columns:1fr;gap:8px} .viskoo-scope .report-row .report-actions{display:flex;gap:8px} } /* ============ FINANCEIRO (nível de conta) ============ */ .viskoo-scope .plan-card{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px} .viskoo-scope .plan-name{font-size:17px;font-weight:700} .viskoo-scope .plan-desc{font-size:14px;color:var(--text-muted);margin-top:2px} .viskoo-scope .plan-price{font-size:26px;font-weight:700;letter-spacing:-.03em;text-align:right} .viskoo-scope .plan-price span{font-size:14px;color:var(--text-muted);font-weight:500} .viskoo-scope .pm-card{padding:18px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .viskoo-scope .pm-icon{width:42px;height:42px;border-radius:var(--r-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .viskoo-scope .pm-info{flex:1;min-width:160px} .viskoo-scope .pm-title{font-size:15px;font-weight:600} .viskoo-scope .pm-sub{font-size:13px;color:var(--text-muted);margin-top:2px} .viskoo-scope .invoice-item{padding:14px 20px} .viskoo-scope .invoice-item:not(:last-child){border-bottom:1px solid var(--border)} .viskoo-scope .invoice-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px} .viskoo-scope .invoice-name{font-size:15px;font-weight:600} .viskoo-scope .invoice-date{font-size:13px;color:var(--text-muted);margin-top:2px} .viskoo-scope .invoice-value{font-family:var(--font-mono);font-size:16px;font-weight:600;text-align:right} .viskoo-scope .invoice-breakdown{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .viskoo-scope .invoice-chip{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 8px} /* ============ NOTIFICAÇÕES ============ */ .viskoo-scope .notif-wrap{position:relative} .viskoo-scope .notif-btn{position:relative;width:36px;height:36px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--text-secondary);flex-shrink:0;padding:0} .viskoo-scope .notif-btn:hover{border-color:var(--border-hover);color:var(--text-primary)} .viskoo-scope .notif-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-full);background:var(--red);color:#fff;font-size:10px;font-family:var(--font-mono);display:none;align-items:center;justify-content:center;border:2px solid var(--bg-base)} .viskoo-scope .notif-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 40px);max-height:420px;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--r-lg);box-shadow:var(--shadow-md);z-index:120} .viskoo-scope .notif-dropdown.active{display:block} .viskoo-scope .notif-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .viskoo-scope .notif-head b{font-size:13px} .viskoo-scope .notif-markall{background:none;border:none;color:var(--accent);font-size:11px;cursor:pointer;font-family:var(--font-body)} .viskoo-scope .notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start} .viskoo-scope .notif-item:last-child{border-bottom:none} .viskoo-scope .notif-item:hover{background:var(--bg-elevated)} .viskoo-scope .notif-item.unread{background:rgba(244,131,34,.06)} .viskoo-scope .notif-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0} .viskoo-scope .notif-body{flex:1;min-width:0} .viskoo-scope .notif-title{font-size:12px;font-weight:600} .viskoo-scope .notif-desc{font-size:11px;color:var(--text-muted);margin-top:2px} .viskoo-scope .notif-time{font-size:10px;color:var(--text-muted);margin-top:4px;font-family:var(--font-mono)} .viskoo-scope .notif-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px} .viskoo-scope .notif-empty{padding:32px 16px;text-align:center;color:var(--text-muted);font-size:12px} /* ============ MULTI-SERVIÇO ============ */ .viskoo-scope .service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} .viskoo-scope .service-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base)} .viskoo-scope .service-card:hover{transform:translateY(-2px);border-color:var(--border-hover)} .viskoo-scope .service-card.active{border-color:var(--accent);background:var(--accent-dim)} .viskoo-scope .service-card .sc-icon{font-size:20px;margin-bottom:8px} .viskoo-scope .service-card .sc-name{font-size:13px;font-weight:700;margin-bottom:6px} .viskoo-scope .service-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 8px} .viskoo-scope .servico-check-grid{display:flex;flex-wrap:wrap;gap:8px} .viskoo-scope .catalog-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base)} .viskoo-scope .catalog-card-remove{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1} .viskoo-scope .catalog-card-remove:hover{color:var(--red)} .viskoo-scope .catalog-card:hover{transform:translateY(-2px);border-color:var(--border-hover)} .viskoo-scope .catalog-card .cc-icon{font-size:26px} .viskoo-scope .catalog-card .cc-name{font-size:14px;font-weight:700} .viskoo-scope .catalog-card .cc-desc{font-size:12px;color:var(--text-secondary);flex:1} .viskoo-scope .req-urgent-note{display:none;gap:8px;align-items:flex-start;font-size:12px;color:var(--yellow);background:var(--yellow-dim);border:1px solid rgba(255,214,10,.25);border-radius:var(--r-md);padding:10px 12px;margin-top:-4px} /* ============ SOLICITAÇÕES ============ */ .viskoo-scope .info-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-lg);background:var(--accent-dim);border:1px solid rgba(244,131,34,.25);font-size:14px;color:var(--text-secondary)} .viskoo-scope .info-banner .ib-icon{font-size:17px;flex-shrink:0} .viskoo-scope .info-banner b{color:var(--text-primary)} .viskoo-scope .req-form{padding:20px 24px;display:flex;flex-direction:column;gap:14px} .viskoo-scope .req-form label{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block} .viskoo-scope .req-form select,.viskoo-scope .req-form textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;color:var(--text-primary);font-family:var(--font-body);font-size:15px;outline:none;transition:border-color var(--dur-fast)} .viskoo-scope .req-form select:focus,.viskoo-scope .req-form textarea:focus{border-color:var(--accent)} .viskoo-scope .req-form textarea{resize:vertical;min-height:88px} .viskoo-scope .req-form input[type="file"]{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 12px;color:var(--text-secondary);font-family:var(--font-body);font-size:13px;cursor:pointer} .viskoo-scope .req-form input[type="file"]::file-selector-button{background:var(--accent);color:#000;border:none;border-radius:var(--r-sm);padding:6px 12px;margin-right:10px;font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer} .viskoo-scope .req-form input[type="file"]::file-selector-button:hover{background:var(--accent-hover)} .viskoo-scope .req-file-preview{margin-top:10px;display:flex;align-items:center;gap:10px} .viskoo-scope .req-file-preview img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)} .viskoo-scope .req-file-preview .rfp-name{font-size:12px;color:var(--text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .viskoo-scope .req-file-preview .rfp-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:15px} .viskoo-scope .req-file-preview .rfp-remove:hover{color:var(--red)} .viskoo-scope .req-confirm{display:none;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);background:var(--green-dim);color:var(--green);font-size:14px} .viskoo-scope .request-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px} .viskoo-scope .request-meta b{color:var(--text-secondary);font-weight:500} .viskoo-scope .request-attachment{margin-top:8px} .viskoo-scope .request-attachment img{max-width:130px;max-height:100px;border-radius:var(--r-md);border:1px solid var(--border);display:block;object-fit:cover} .viskoo-scope .request-item{padding:16px 20px} .viskoo-scope .request-item:not(:last-child){border-bottom:1px solid var(--border)} .viskoo-scope .request-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap} .viskoo-scope .request-type{font-size:15px;font-weight:600} .viskoo-scope .request-date{font-size:13px;color:var(--text-muted);margin-top:2px} .viskoo-scope .request-msg{font-size:14px;color:var(--text-secondary);margin-bottom:10px} .viskoo-scope .request-response{display:flex;gap:10px;background:var(--bg-elevated);border-radius:var(--r-md);padding:10px 14px;border-left:2px solid var(--accent)} .viskoo-scope .request-response .rr-icon{font-size:16px;flex-shrink:0} .viskoo-scope .request-response .rr-text{font-size:14px;color:var(--text-secondary)} .viskoo-scope .request-response .rr-text b{color:var(--text-primary)} .viskoo-scope .badge-info{background:rgba(100,210,255,.12);color:var(--blue);border-color:rgba(100,210,255,.25)} /* ============ MODAL ============ */ .viskoo-scope .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px} .viskoo-scope .modal-overlay.active{display:flex} .viskoo-scope .modal-box{width:100%;max-width:460px;background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--r-xl);box-shadow:var(--shadow-md);animation:fadeUp .3s var(--ease-out) forwards} .viskoo-scope .modal-h{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .viskoo-scope .modal-h b{font-size:16px} .viskoo-scope .modal-close{cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;background:none;border:none} .viskoo-scope .modal-close:hover{color:var(--text-primary)} .viskoo-scope .modal-b{padding:20px 22px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-secondary)} .viskoo-scope .modal-b .m-row{display:flex;justify-content:space-between} .viskoo-scope .modal-b .m-row b{color:var(--text-primary);font-family:var(--font-mono);font-weight:500} .viskoo-scope .modal-f{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px} .viskoo-scope footer.app-footer{border-top:1px solid var(--border);padding:18px 0 0;margin-top:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} .viskoo-scope .footer-text{font-size:13px;color:var(--text-muted)} .viskoo-scope .footer-text code{font-family:var(--font-mono);color:var(--accent);background:var(--bg-elevated);padding:1px 6px;border-radius:4px} /* ============ PIP VÍDEO ============ */ .viskoo-scope .pip-widget{position:fixed;bottom:20px;left:20px;width:150px;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:#000;border:1px solid var(--border-hover);box-shadow:var(--shadow-md);z-index:300;transition:transform var(--dur-base) var(--ease-spring)} .viskoo-scope .pip-widget:hover{transform:translateY(-2px)} .viskoo-scope .pip-widget iframe{position:absolute;top:50%;left:50%;width:316%;height:100%;border:none;pointer-events:none;transform:translate(-50%,-50%)} .viskoo-scope .pip-controls{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:2} .viskoo-scope .pip-btn{width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px)} .viskoo-scope .pip-btn:hover{background:rgba(0,0,0,.75)} .viskoo-scope .pip-label{position:absolute;bottom:6px;left:6px;font-size:11px;font-family:var(--font-mono);color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:var(--r-full);display:flex;align-items:center;gap:4px;z-index:2} .viskoo-scope .pip-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 1.6s ease-in-out infinite} @media(max-width:480px){ .viskoo-scope .pip-widget{width:112px;bottom:14px;left:14px} } /* ============ CHAT DE SUPORTE ============ */ .viskoo-scope .chat-fab{position:fixed;bottom:20px;right:20px;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;font-size:22px;border:none;cursor:pointer;box-shadow:var(--shadow-accent);z-index:300;transition:transform var(--dur-fast) var(--ease-spring)} .viskoo-scope .chat-fab:hover{transform:scale(1.06)} .viskoo-scope .chat-badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);border:2px solid var(--bg-base)} .viskoo-scope .chat-panel{position:fixed;bottom:84px;right:20px;width:320px;max-width:calc(100vw - 40px);height:440px;max-height:calc(100vh - 120px);background:var(--bg-surface);border:1px solid var(--border-hover);border-radius:var(--r-xl);box-shadow:var(--shadow-md);z-index:300;display:none;flex-direction:column;overflow:hidden} .viskoo-scope .chat-panel.active{display:flex} .viskoo-scope .chat-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px} .viskoo-scope .chat-head .avatar{width:34px;height:34px} .viskoo-scope .chat-head-title{font-size:15px;font-weight:700} .viskoo-scope .chat-head-status{font-size:12px;color:var(--green);display:flex;align-items:center;gap:4px} .viskoo-scope .chat-head-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)} .viskoo-scope .chat-close{margin-left:auto;background:none;border:none;color:var(--text-muted);font-size:17px;cursor:pointer} .viskoo-scope .chat-close:hover{color:var(--text-primary)} .viskoo-scope .chat-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px} .viskoo-scope .chat-msg{max-width:80%;font-size:14px;padding:9px 12px;border-radius:var(--r-md);line-height:1.5} .viskoo-scope .chat-msg.in{align-self:flex-start;background:var(--bg-elevated);color:var(--text-primary);border-bottom-left-radius:4px} .viskoo-scope .chat-msg.out{align-self:flex-end;background:var(--accent);color:#000;border-bottom-right-radius:4px} .viskoo-scope .chat-typing{align-self:flex-start;display:flex;gap:3px;padding:10px 12px;background:var(--bg-elevated);border-radius:var(--r-md);border-bottom-left-radius:4px} .viskoo-scope .chat-typing span{width:5px;height:5px;border-radius:50%;background:var(--text-muted);animation:pulse 1s ease-in-out infinite} .viskoo-scope .chat-typing span:nth-child(2){animation-delay:.15s} .viskoo-scope .chat-typing span:nth-child(3){animation-delay:.3s} .viskoo-scope .chat-foot{border-top:1px solid var(--border);padding:10px 12px;display:flex;gap:8px} .viskoo-scope .chat-input{flex:1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 12px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;outline:none} .viskoo-scope .chat-input:focus{border-color:var(--accent)} .viskoo-scope .chat-send{width:36px;height:36px;border-radius:var(--r-md);background:var(--accent);color:#000;border:none;cursor:pointer;font-size:16px;flex-shrink:0} .viskoo-scope .chat-send:hover{background:var(--accent-hover)} @media(max-width:480px){ .viskoo-scope .chat-panel{right:14px;bottom:80px} .viskoo-scope .chat-fab{bottom:14px;right:14px} } @media(max-width:900px){ .viskoo-scope .topbar-user .user-meta{display:none} .viskoo-scope .workspace-switcher{display:none} } @media(max-width:640px){ .viskoo-scope .app-topbar-row1,.viskoo-scope .app-topnav,.viskoo-scope .page-container{padding-left:20px;padding-right:20px} } @media(max-width:420px){ .viskoo-scope .app-topbar-row1{gap:8px;padding-left:14px;padding-right:14px} .viskoo-scope .logo-sub{display:none} .viskoo-scope .topbar-right{gap:6px} .viskoo-scope .theme-switch{width:44px;height:24px} .viskoo-scope .theme-switch .ts-knob{width:18px;height:18px} .viskoo-scope .theme-switch.is-light .ts-knob{transform:translateX(20px)} .viskoo-scope .icon-btn,.viskoo-scope .notif-btn{width:32px;height:32px;font-size:13px} .viskoo-scope .avatar{width:26px;height:26px;font-size:12px} } /* ============ EXTRAS DO PLUGIN — formulários/telas exclusivas do admin ============ */ .viskoo-scope .field select,.viskoo-scope .field textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;color:var(--text-primary);font-family:var(--font-body);font-size:15px;outline:none;transition:border-color var(--dur-fast)} .viskoo-scope .field select:focus,.viskoo-scope .field textarea:focus{border-color:var(--accent)} .viskoo-scope .field textarea{resize:vertical;min-height:70px} .viskoo-scope .field textarea.mono{font-family:var(--font-mono);font-size:13px} .viskoo-scope .field-hint{font-size:12px;color:var(--text-muted);margin-top:-2px} .viskoo-scope .inline-form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} .viskoo-scope .inline-form-row .field{margin-bottom:0;flex:1;min-width:140px} .viskoo-scope .admin-panel{border:1px dashed var(--border-hover);border-radius:var(--r-lg);padding:16px;margin-top:4px;background:var(--bg-elevated)} .viskoo-scope .admin-panel-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:6px} .viskoo-scope .approval-item{padding:16px 20px} .viskoo-scope .approval-item:not(:last-child){border-bottom:1px solid var(--border)} .viskoo-scope .approval-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center} .viskoo-scope .approval-actions textarea{width:100%;margin-bottom:8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 12px;color:var(--text-primary);font-family:var(--font-body);font-size:14px;min-height:60px;resize:vertical} .viskoo-scope .modal-box.modal-lg{max-width:640px} .viskoo-scope .modal-b.scroll{max-height:60vh;overflow-y:auto} .viskoo-scope .list-empty{padding:28px 20px;color:var(--text-muted);font-size:14px} .viskoo-scope [data-vk-admin-only]{display:none} .viskoo-scope .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--bg-overlay);color:var(--text-primary);border:1px solid var(--border-hover);border-radius:var(--r-md);padding:12px 18px;font-size:14px;box-shadow:var(--shadow-md);z-index:400;display:none} .viskoo-scope .toast.show{display:block} .viskoo-scope .toast.error{border-color:rgba(255,69,58,.4);color:var(--red)}