/* ============================================================ DEV SERVER — Task Board · Design tokens & global styles ============================================================ */ :root { /* surfaces */ --bg-0: #050505; --bg-1: #0a0a0a; --surf-1: #121212; --surf-2: #1a1a1a; --surf-3: #202020; --border: #262626; --border-soft: #1d1d1d; --border-strong: #333333; /* aliases legados usados por alguns componentes */ --line: var(--border); --bg-2: var(--surf-2); /* text */ --txt-1: #f5f5f5; --txt-2: #b8b8b8; --txt-3: #7a7a7a; --txt-4: #555555; /* accent — overridden live by Tweaks */ --accent: #ff7a00; --accent-hi: #ff9633; --accent-lo: #c25c00; --accent-rgb: 255, 122, 0; --gold: #f5b942; /* category colors */ --c-bug: #f0453a; --c-bug-bg: rgba(240, 69, 58, 0.14); --c-projeto: var(--accent); --c-feature: #8b5cf6; --c-feature-bg: rgba(139, 92, 246, 0.15); --c-melhoria: #2dd4a7; --c-melhoria-bg: rgba(45, 212, 167, 0.14); --c-baixa: #6b7280; --c-baixa-bg: rgba(107, 114, 128, 0.16); --c-alta: #ff6b35; --c-alta-bg: rgba(255, 107, 53, 0.14); --c-emdev: #d4b020; --c-emdev-bg: rgba(212, 176, 32, 0.14); /* effects — overridden live by Tweaks */ --glow: 1; /* 0..1.6 glow strength multiplier */ --anim: 1; /* 0..1.4 animation intensity multiplier */ /* radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; /* type */ --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Bebas Neue", "Inter", sans-serif; /* shadows */ --sh-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35); --sh-card-hi: 0 6px 14px rgba(0,0,0,0.45), 0 18px 44px rgba(0,0,0,0.55); --sh-pop: 0 24px 70px rgba(0,0,0,0.65); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg-0); color: var(--txt-1); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } #root { height: 100%; } ::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea { font-family: inherit; color: inherit; } /* scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #3a3a3a; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ============================================================ APP SHELL ============================================================ */ .app { height: 100%; display: grid; grid-template-columns: 264px 1fr; background: radial-gradient(1200px 700px at 78% -10%, rgba(var(--accent-rgb), calc(0.10 * var(--glow))), transparent 60%), var(--bg-0); } /* fade-in for the whole board after login */ .app.entering { animation: appReveal 620ms cubic-bezier(.2,.7,.2,1) both; } @keyframes appReveal { from { opacity: 0; transform: scale(0.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { background: linear-gradient(180deg, var(--bg-1), #070707); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; padding: 22px 18px; gap: 6px; min-height: 0; } .brand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 24px; } .brand-logo { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 calc(22px * var(--glow)) rgba(var(--accent-rgb), calc(0.45 * var(--glow)))); } .brand-name { font-family: var(--font-display); letter-spacing: 2px; font-size: 24px; line-height: 0.9; text-align: center; color: var(--accent); text-shadow: 0 0 calc(16px * var(--glow)) rgba(var(--accent-rgb), calc(0.45*var(--glow))); } .brand-name span { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 3.5px; color: var(--txt-3); text-shadow: none; margin-top: 4px; text-transform: uppercase; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); color: var(--txt-3); font-size: 14.5px; font-weight: 500; position: relative; transition: color .18s, background .18s, box-shadow .2s; } .nav-item svg { width: 21px; height: 21px; flex: none; } .nav-item:hover { color: var(--txt-1); background: rgba(255,255,255,0.03); } .nav-item.active { color: var(--accent); background: linear-gradient(100deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.05)); border: 1px solid rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 calc(26px*var(--glow)) rgba(var(--accent-rgb), calc(0.22*var(--glow))), inset 0 0 18px rgba(var(--accent-rgb),0.07); } .nav-item.active::before { content: ""; position: absolute; left: -18px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .nav-badge { margin-left: auto; font-size: 11px; color: var(--txt-3); background: var(--surf-2); padding: 1px 8px; border-radius: 20px; } .profile { margin-top: auto; position: relative; } .profile-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surf-1); width: 100%; text-align: left; transition: border-color .18s, background .18s; } .profile-card:hover { border-color: var(--border-strong); background: var(--surf-2); } .avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; object-fit: cover; background: var(--surf-3); border: 1px solid rgba(var(--accent-rgb),0.3); } .profile-meta { line-height: 1.25; min-width: 0; } .profile-meta b { font-size: 13.5px; font-weight: 600; display: block; } .profile-meta span { font-size: 11.5px; color: var(--txt-3); } .profile-chev { margin-left: auto; color: var(--txt-3); transition: transform .2s; } .profile-card[aria-expanded="true"] .profile-chev { transform: rotate(180deg); } .dropdown { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: var(--surf-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 6px; z-index: 50; box-shadow: var(--sh-pop); animation: pop 160ms cubic-bezier(.2,.8,.2,1) both; } .dropdown button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--txt-2); transition: background .15s, color .15s; } .dropdown button:hover { background: rgba(255,255,255,0.05); color: var(--txt-1); } .dropdown button svg { width: 17px; height: 17px; } .dropdown .danger:hover { color: var(--c-bug); } @keyframes pop { from { opacity:0; transform: translateY(6px) scale(.97);} to {opacity:1; transform:none;} } /* sidebar mini stat (streak/level) */ .side-stats { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; } /* ============================================================ MAIN COLUMN ============================================================ */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; } .topbar { display: flex; align-items: center; gap: 22px; padding: 26px 30px 14px; flex-wrap: wrap; } .page-title { font-family: var(--font-display); font-size: 46px; letter-spacing: 0.5px; line-height: 0.95; font-weight: 400; white-space: nowrap; flex: 0 0 auto; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .btn-primary { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: #1a0e00; font-weight: 700; font-size: 14.5px; padding: 12px 20px; border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(var(--accent-rgb), calc(0.4*var(--glow))), 0 0 calc(26px*var(--glow)) rgba(var(--accent-rgb), calc(0.3*var(--glow))), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform .15s, box-shadow .2s, filter .15s; } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 26px rgba(var(--accent-rgb),calc(0.5*var(--glow))), 0 0 calc(40px*var(--glow)) rgba(var(--accent-rgb),calc(0.4*var(--glow))); } .btn-primary:active { transform: translateY(0) scale(.98); } .btn-primary svg { width: 18px; height: 18px; } .search { display: flex; align-items: center; gap: 10px; background: var(--surf-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 14px; height: 46px; width: 300px; transition: border-color .18s, box-shadow .18s, width .25s; } .search:focus-within { border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); width: 340px; } .search svg { width: 18px; height: 18px; color: var(--txt-3); flex: none; } .search input { background: none; border: none; outline: none; width: 100%; font-size: 14px; } .search input::placeholder { color: var(--txt-3); } .search .clear { color: var(--txt-3); display:grid; place-items:center; } .search .clear:hover { color: var(--txt-1); } .icon-btn { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--txt-2); background: var(--surf-1); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; } .icon-btn:hover { color: var(--txt-1); border-color: var(--border-strong); } .icon-btn svg { width: 19px; height: 19px; } .icon-btn.on { color: var(--accent); border-color: rgba(var(--accent-rgb),0.5); } /* filter chips row */ .filters { display: flex; align-items: center; gap: 9px; padding: 4px 30px 8px; flex-wrap: wrap; } .fchip { font-size: 12.5px; color: var(--txt-3); padding: 6px 13px; border-radius: 20px; border: 1px solid var(--border); background: var(--surf-1); transition: all .15s; } .fchip:hover { color: var(--txt-1); border-color: var(--border-strong); } .fchip.on { color: var(--accent); border-color: rgba(var(--accent-rgb),0.55); background: rgba(var(--accent-rgb),0.1); } .fchip .x { margin-left: 4px; opacity: .7; } /* ============================================================ BOARD ============================================================ */ .board-wrap { flex: 1; min-height: 0; padding: 8px 30px 26px; overflow: hidden; } .board { height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .column { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, rgba(18,18,18,0.7), rgba(12,12,12,0.5)); border: 1px solid var(--border-soft); border-radius: var(--r-lg); transition: border-color .2s, background .2s, box-shadow .2s; } .column.drop-active { border-color: rgba(var(--accent-rgb),0.45); background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(12,12,12,0.5)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.18); } .col-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; } .col-dot { width: 9px; height: 9px; border-radius: 50%; flex:none; } .col-title { font-size: 15px; font-weight: 600; letter-spacing: .2px; } .col-count { margin-left: auto; min-width: 26px; height: 24px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; background: var(--surf-2); color: var(--txt-2); font-size: 12.5px; font-weight: 600; transition: transform .25s, background .25s, color .25s; } .col-count.bump { animation: countBump .4s cubic-bezier(.2,1.4,.4,1); } @keyframes countBump { 0%{transform:scale(1);} 40%{transform:scale(1.4); background:var(--accent); color:#1a0e00;} 100%{transform:scale(1);} } .col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 10px; } .col-add { display: flex; align-items: center; gap: 9px; justify-content: center; padding: 12px; margin: 4px 14px 14px; border-radius: var(--r-md); color: var(--txt-3); font-size: 13.5px; font-weight: 500; border: 1px dashed var(--border-strong); transition: color .15s, border-color .15s, background .15s; } .col-add:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.05); } .col-add svg { width: 16px; height: 16px; } /* drop placeholder gap */ .drop-ph { height: 0; margin: 0; border-radius: var(--r-md); border: 1px dashed rgba(var(--accent-rgb),0.55); background: rgba(var(--accent-rgb),0.07); transition: height .16s ease, margin .16s ease; } .drop-ph.show { height: 74px; } /* ============================================================ CARD ============================================================ */ .card { background: linear-gradient(180deg, var(--surf-2), var(--surf-1)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 13px 11px; cursor: grab; position: relative; box-shadow: var(--sh-card); transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s; touch-action: none; } .card:hover { transform: translateY(calc(-3px * var(--anim))); border-color: var(--border-strong); box-shadow: var(--sh-card-hi); } .card.selected { border-color: rgba(var(--accent-rgb),0.7); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.4), 0 0 calc(30px*var(--glow)) rgba(var(--accent-rgb),calc(0.18*var(--glow))), var(--sh-card-hi); } .card.dragging { opacity: 0; } .card.ghost { position: fixed; z-index: 1000; pointer-events: none; cursor: grabbing; width: var(--ghost-w); transform: rotate(2.5deg) scale(1.03); box-shadow: var(--sh-pop), 0 0 calc(40px*var(--glow)) rgba(var(--accent-rgb),calc(0.25*var(--glow))); border-color: rgba(var(--accent-rgb),0.5); } .card.pop { animation: cardPop .5s cubic-bezier(.2,1.5,.4,1); } @keyframes cardPop { 0%{transform:scale(1);} 30%{transform:scale(calc(1 + .06*var(--anim))); box-shadow: var(--sh-card-hi), 0 0 calc(50px*var(--glow)) rgba(var(--accent-rgb),calc(0.5*var(--glow)));} 100%{transform:scale(1);} } .card-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin-bottom: 9px; letter-spacing: .1px; text-wrap: pretty; } .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; } .tag { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; letter-spacing: .2px; } .tag svg { width: 12px; height: 12px; } /* progress */ .prog-row { display: flex; align-items: center; gap: 11px; } .prog-track { flex: 1; height: 7px; border-radius: 20px; background: #0c0c0c; overflow: hidden; border: 1px solid #000; } .prog-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent-lo), var(--accent), var(--accent-hi)); box-shadow: 0 0 calc(10px*var(--glow)) rgba(var(--accent-rgb),calc(0.6*var(--glow))); transition: width .6s cubic-bezier(.3,1,.3,1); position: relative; } .prog-fill.full { background: linear-gradient(90deg, var(--gold), var(--accent-hi), var(--gold)); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; } @keyframes shimmer { from{background-position:0 0;} to{background-position:200% 0;} } .prog-pct { font-size: 12.5px; font-weight: 600; color: var(--txt-2); min-width: 38px; text-align: right; } .prog-pct.full { color: var(--gold); } .card-thumb { margin-top: 11px; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid var(--border); height: 86px; display: block; width: 100%; background: #0a0a0a; } .card-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .card-thumb.ct-photo { height: auto; aspect-ratio: 16 / 10; max-height: 200px; } .card-thumb.ct-photo .card-thumb-img { object-fit: contain; } .ct-blur { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(18px) brightness(0.42) saturate(1.1); transform: scale(1.2); } .card-thumb.zoomable .card-thumb-img { cursor: zoom-in; } /* multi-photo strip */ .cc-wrap { position: relative; margin-top: 11px; } .cc-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 1px; scroll-padding: 0; } .cc-strip::-webkit-scrollbar { height: 0; display: none; } .cc-shot { flex: 0 0 clamp(116px, 31%, 172px); aspect-ratio: 4 / 3; min-width: 0; border-radius: 11px; overflow: hidden; border: 1px solid var(--border); background: #0a0a0a; scroll-snap-align: start; cursor: zoom-in; padding: 0; position: relative; transition: border-color .18s, transform .18s, box-shadow .2s; } .cc-shot::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,0); transition: background .15s; } .cc-shot:hover { border-color: rgba(var(--accent-rgb),0.65); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.45); } .cc-shot:hover::after { background: rgba(0,0,0,0.10); } .cc-shot-blur { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(14px) brightness(0.4) saturate(1.1); transform: scale(1.25); } .cc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; } .cc-badge { position: absolute; top: 8px; left: 8px; z-index: 4; pointer-events: none; font-size: 10.5px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 20px; background: rgba(10,10,10,0.65); backdrop-filter: blur(2px); letter-spacing: .3px; } .cc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(10,10,10,0.78); backdrop-filter: blur(2px); z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,0.55); transition: background .15s, color .15s, opacity .18s; opacity: 0; } .card:hover .cc-arrow { opacity: 1; } .cc-arrow:hover { background: var(--accent); color: #1a0e00; } .cc-arrow.left { left: 4px; } .cc-arrow.right { right: 4px; } .cc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(10,10,10,0.6); backdrop-filter: blur(2px); opacity: 0; transition: opacity .15s, background .15s; z-index: 3; } .card-thumb:hover .cc-nav { opacity: 1; } .cc-nav:hover { background: var(--accent); color: #1a0e00; } .cc-nav.prev { left: 8px; } .cc-nav.next { right: 8px; } .cc-count { position: absolute; top: 8px; right: 8px; z-index: 3; font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 20px; background: rgba(10,10,10,0.6); backdrop-filter: blur(2px); font-variant-numeric: tabular-nums; } .cc-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; padding: 5px 8px; border-radius: 20px; background: rgba(10,10,10,0.45); } .cc-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.45); cursor: pointer; transition: background .15s, transform .15s; } .cc-dot:hover { transform: scale(1.25); } .cc-dot.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .card-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--txt-3); font-size: 12.5px; } .attach-chip { display: inline-flex; align-items: center; gap: 5px; } .attach-chip svg { width: 15px; height: 15px; } /* ============================================================ DETAIL PANEL ============================================================ */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 60; animation: fade .2s both; } @keyframes fade { from{opacity:0;} to{opacity:1;} } .detail { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw; background: linear-gradient(180deg, var(--surf-1), var(--bg-1)); border-left: 1px solid var(--border); z-index: 61; display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,0.55); animation: slideIn .32s cubic-bezier(.2,.8,.2,1) both; } @keyframes slideIn { from{transform: translateX(40px); opacity:0;} to{transform:none; opacity:1;} } .detail-scroll { flex: 1; overflow-y: auto; padding: 26px 30px 30px; } .detail-close { position: absolute; top: 22px; right: 24px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--txt-3); z-index: 2; transition: color .15s, background .15s; } .detail-close:hover { color: var(--txt-1); background: rgba(255,255,255,0.06); } .detail h2 { font-size: 25px; font-weight: 700; line-height: 1.2; padding-right: 40px; margin-bottom: 14px; letter-spacing: -.2px; text-wrap: pretty; } .detail h2[contenteditable] { outline: none; border-radius: 6px; } .detail h2[contenteditable]:focus { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.4); padding-left: 6px; margin-left: -6px; } .detail-tags { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .detail-tags .sep { color: var(--border-strong); } .section { margin-bottom: 24px; } .section-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt-3); margin-bottom: 12px; } .section h3 { font-size: 17px; font-weight: 600; margin-bottom: 11px; } .detail-desc { font-size: 14.5px; line-height: 1.6; color: var(--txt-2); border-radius: 10px; outline: none; min-height: 24px; } .detail-desc[contenteditable]:focus { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.35); padding: 10px; margin: -10px; } .detail-desc:empty::before { content: attr(data-ph); color: var(--txt-4); } .seg-btn { display: inline-flex; align-items: center; gap: 6px; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; } .gal-thumb { position: relative; width: 100%; height: 92px; border-radius: 10px; border: 1px solid var(--border); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; cursor: zoom-in; padding: 0; transition: border-color .15s, transform .15s, box-shadow .2s; } .gal-thumb:hover { border-color: rgba(var(--accent-rgb),0.6); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.45); } .gal-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .15s; } .gal-thumb:hover::after { background: rgba(0,0,0,0.18); } .gal-zoom { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.5); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; z-index: 2; } .gal-thumb:hover .gal-zoom { opacity: 1; transform: scale(1); } .gal-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(10,10,10,0.7); opacity: 0; transition: opacity .15s, background .15s, color .15s; z-index: 3; } .gal-thumb:hover .gal-del { opacity: 1; } .gal-del:hover { background: var(--c-bug); } .gal-actions { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; } .gal-thumb:hover .gal-actions { opacity: 1; transform: none; } .gal-act { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(10,10,10,0.72); backdrop-filter: blur(2px); transition: background .15s, color .15s; } .gal-act:hover { background: var(--accent); color: #1a0e00; } .gal-act.del:hover { background: var(--c-bug); color: #fff; } .gal-add { width: 100%; height: 92px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--txt-3); border: 1.5px dashed var(--border-strong); background: var(--surf-1); font-size: 12.5px; font-weight: 600; transition: color .15s, border-color .15s, background .15s; } .gal-add:hover, .gal-add.over { color: var(--accent); border-color: rgba(var(--accent-rgb),0.6); background: rgba(var(--accent-rgb),0.06); } .gal-add.over { transform: scale(1.02); } .gal-hint { font-size: 12.5px; color: var(--txt-4); line-height: 1.5; margin-top: 4px; } /* videos */ .vid-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .vid-item { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; } .vid-item iframe { width: 100%; height: 100%; display: block; border: 0; } .vid-del { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(10,10,10,0.7); backdrop-filter: blur(2px); opacity: 0; transition: opacity .15s, background .15s; z-index: 2; } .vid-item:hover .vid-del { opacity: 1; } .vid-del:hover { background: var(--c-bug); } .vid-add { display: flex; align-items: center; gap: 10px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 8px 0 14px; height: 50px; transition: border-color .15s, box-shadow .15s; } .vid-add svg { color: var(--c-bug); flex: none; } .vid-add:focus-within { border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); } .vid-add.err { border-color: rgba(240,69,58,0.6); } .vid-add input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 14px; } .vid-add input::placeholder { color: var(--txt-3); } .vid-add-btn { flex: none; padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: #1a0e00; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 calc(16px*var(--glow)) rgba(var(--accent-rgb),calc(0.25*var(--glow))); transition: filter .15s, transform .15s; } .vid-add-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,0.88); backdrop-filter: blur(6px); animation: fade .2s both; padding: 60px 20px 110px; } .lb-img { max-width: min(1100px, 92vw); max-height: 80vh; border-radius: 12px; box-shadow: var(--sh-pop); animation: modalPop .28s cubic-bezier(.2,.9,.3,1) both; object-fit: contain; } .lb-close { position: fixed; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.08); transition: background .15s; z-index: 2; } .lb-close:hover { background: rgba(255,255,255,0.18); } .lb-counter { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); color: var(--txt-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.08); transition: background .15s, transform .15s; } .lb-nav:hover { background: var(--accent); color: #1a0e00; } .lb-nav.prev { left: 24px; } .lb-nav.next { right: 24px; } .lb-strip { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.06); max-width: 92vw; overflow-x: auto; } .lb-dot { width: 48px; height: 38px; flex: none; border-radius: 7px; background-size: cover; background-position: center; border: 2px solid transparent; opacity: .55; transition: opacity .15s, border-color .15s; } .lb-dot:hover { opacity: .85; } .lb-dot.on { opacity: 1; border-color: var(--accent); } .lb-del { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; color: var(--txt-2); font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,0.06); transition: color .15s, background .15s; } .lb-del:hover { color: #fff; background: rgba(240,69,58,0.5); } .attach-count { display: inline-flex; align-items: center; gap: 7px; color: var(--txt-2); font-size: 15px; } .attach-count svg { width: 16px; height: 16px; color: var(--txt-3); } /* checklist */ .check-list { display: flex; flex-direction: column; gap: 4px; } .check-item { display: flex; align-items: center; gap: 13px; padding: 9px 8px; border-radius: 9px; transition: background .15s; cursor: pointer; } .check-item:hover { background: rgba(255,255,255,0.03); } .check-box { width: 24px; height: 24px; border-radius: 7px; flex: none; border: 2px solid var(--border-strong); display: grid; place-items: center; color: #1a0e00; transition: all .2s cubic-bezier(.2,1.4,.4,1); } .check-box svg { width: 15px; height: 15px; transform: scale(0); transition: transform .22s cubic-bezier(.2,1.6,.4,1); } .check-item.done .check-box { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 calc(14px*var(--glow)) rgba(var(--accent-rgb),calc(0.55*var(--glow))); } .check-item.done .check-box svg { transform: scale(1); } .check-text { font-size: 14.5px; color: var(--txt-1); transition: color .2s; } .check-item.done .check-text { color: var(--txt-3); text-decoration: line-through; text-decoration-color: var(--txt-4); } .check-del { margin-left: auto; opacity: 0; color: var(--txt-3); transition: opacity .15s, color .15s; } .check-item:hover .check-del { opacity: 1; } .check-del:hover { color: var(--c-bug); } .check-add { display: flex; align-items: center; gap: 10px; padding: 9px 8px; color: var(--txt-3); font-size: 14px; width: 100%; border-radius: 9px; transition: color .15s; } .check-add:hover { color: var(--accent); } .check-add input { background: none; border: none; outline: none; width: 100%; font-size: 14.5px; } .detail-foot { border-top: 1px solid var(--border-soft); padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; color: var(--txt-3); font-size: 13px; } .detail-foot .who { display: flex; align-items: center; gap: 9px; } .detail-foot .who img { width: 24px; height: 24px; border-radius: 7px; } .detail-foot .date { display: inline-flex; align-items: center; gap: 7px; } .detail-foot svg { width: 15px; height: 15px; } .detail-actions { display: flex; gap: 10px; margin-top: 8px; } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); color: var(--txt-2); font-size: 13.5px; font-weight: 500; transition: all .15s; } .btn-ghost:hover { border-color: var(--border-strong); color: var(--txt-1); } .btn-ghost.danger:hover { color: var(--c-bug); border-color: rgba(240,69,58,0.5); background: rgba(240,69,58,0.08); } .btn-ghost svg { width: 16px; height: 16px; } /* status switcher in detail */ .status-switch { display: flex; gap: 6px; background: var(--surf-2); padding: 4px; border-radius: 10px; } .status-switch button { flex: 1; padding: 8px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--txt-3); transition: all .15s; } .status-switch button:hover { color: var(--txt-1); } .status-switch button.on { background: var(--accent); color: #1a0e00; box-shadow: 0 0 calc(16px*var(--glow)) rgba(var(--accent-rgb),calc(0.4*var(--glow))); } /* ============================================================ MODAL (new task) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); animation: fade .2s both; padding: 24px; } .modal-box { width: 520px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg, var(--surf-2), var(--surf-1)); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-pop); animation: modalPop .3s cubic-bezier(.2,.9,.3,1) both; } @keyframes modalPop { from{opacity:0; transform: translateY(20px) scale(.97);} to{opacity:1; transform:none;} } .modal-box h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .modal-box .sub { color: var(--txt-3); font-size: 13.5px; margin-bottom: 22px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--txt-2); margin-bottom: 8px; letter-spacing: .3px; } .input, .textarea { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s; } .input:focus, .textarea:focus { border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); } .textarea { resize: vertical; min-height: 84px; line-height: 1.5; } .seg { display: flex; gap: 8px; flex-wrap: wrap; } .seg button { padding: 9px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-1); color: var(--txt-2); font-size: 13px; font-weight: 600; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; } .seg button:hover { border-color: var(--border-strong); color: var(--txt-1); } .seg button.on { border-color: currentColor; } .modal-foot { display: flex; gap: 12px; margin-top: 26px; } .modal-foot .btn-primary { flex: 1; justify-content: center; } .modal-foot .btn-ghost { padding: 12px 22px; } /* ============================================================ XP / STATS / STREAK ============================================================ */ .statbar { display: flex; align-items: center; gap: 14px; padding: 0 30px 6px; flex-wrap: wrap; } .stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, var(--surf-1), var(--bg-1)); border: 1px solid var(--border-soft); border-radius: var(--r-md); } .stat-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; } .stat-num { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .stat-lbl { font-size: 11.5px; color: var(--txt-3); margin-top: 3px; } .stat-num.flash { animation: numFlash .6s ease; } @keyframes numFlash { 0%{color:var(--accent); transform:scale(1.18);} 100%{color:inherit; transform:scale(1);} } /* XP widget (sidebar) */ .xp { background: linear-gradient(165deg, rgba(var(--accent-rgb),0.1), var(--surf-1)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; } .xp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .xp-level { display: flex; align-items: center; gap: 9px; } .xp-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; color: #1a0e00; background: linear-gradient(145deg, var(--gold), var(--accent)); box-shadow: 0 0 calc(18px*var(--glow)) rgba(var(--accent-rgb),calc(0.4*var(--glow))); } .xp-level b { font-size: 13.5px; } .xp-level span { font-size: 11px; color: var(--txt-3); display: block; } .xp-pts { font-size: 11.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; } .xp-track { height: 9px; border-radius: 20px; background: #0c0c0c; overflow: hidden; border:1px solid #000; } .xp-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 calc(12px*var(--glow)) rgba(var(--accent-rgb),calc(0.6*var(--glow))); transition: width .8s cubic-bezier(.2,.9,.2,1); } .xp.levelup { animation: levelGlow 1.2s ease; } @keyframes levelGlow { 0%,100%{box-shadow:none;} 30%{box-shadow:0 0 calc(40px*var(--glow)) rgba(var(--accent-rgb),calc(0.6*var(--glow)));} } .streak-pill { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-md); border: 1px solid rgba(var(--accent-rgb),0.3); background: linear-gradient(165deg, rgba(var(--accent-rgb),0.12), var(--surf-1)); } .streak-flame { font-size: 20px; filter: drop-shadow(0 0 calc(8px*var(--glow)) rgba(var(--accent-rgb),0.6)); } .streak-pill b { font-size: 16px; font-variant-numeric: tabular-nums; } .streak-pill span { font-size: 11px; color: var(--txt-3); display:block; } /* ============================================================ TOAST (reinforcement) ============================================================ */ .toast-host { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: linear-gradient(180deg, var(--surf-3), var(--surf-2)); border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 14px; box-shadow: var(--sh-pop), 0 0 calc(34px*var(--glow)) rgba(var(--accent-rgb),calc(0.25*var(--glow))); font-size: 14.5px; font-weight: 600; animation: toastIn .45s cubic-bezier(.2,1.3,.3,1) both; } .toast .emoji { font-size: 20px; } .toast.out { animation: toastOut .35s ease forwards; } @keyframes toastIn { from{opacity:0; transform: translateY(24px) scale(.9);} to{opacity:1; transform:none;} } @keyframes toastOut { to{opacity:0; transform: translateY(14px) scale(.95);} } /* ============================================================ CONFETTI ============================================================ */ .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 300; } /* ============================================================ CONGRATS (empty A Fazer) ============================================================ */ .congrats { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 30px; min-height: 0; } .congrats-ring { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); margin-bottom: 12px; background: radial-gradient(circle, rgba(var(--accent-rgb),0.15), transparent 70%); box-shadow: 0 0 calc(60px*var(--glow)) rgba(var(--accent-rgb),calc(0.4*var(--glow))); animation: ringPulse 2.4s ease-in-out infinite; } .congrats-ring svg { width: 64px; height: 64px; } @keyframes ringPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} } .congrats h2 { font-family: var(--font-display); font-size: 40px; letter-spacing: .5px; } .congrats p { color: var(--txt-2); font-size: 15px; max-width: 320px; line-height: 1.5; } /* ============================================================ LOGIN ============================================================ */ .login { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-0); } .login.leaving { animation: loginOut .55s cubic-bezier(.6,0,.4,1) forwards; } @keyframes loginOut { to { opacity: 0; transform: scale(1.04); filter: blur(8px); } } .login-left { display: grid; place-items: center; padding: 40px; } .login-card { width: 400px; max-width: 100%; background: linear-gradient(180deg, rgba(20,20,20,0.7), rgba(10,10,10,0.6)); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 42px 38px; backdrop-filter: blur(12px); box-shadow: var(--sh-pop); animation: loginCardIn .6s cubic-bezier(.2,.8,.2,1) both; } @keyframes loginCardIn { from{opacity:0; transform: translateY(20px);} to{opacity:1; transform:none;} } .login-logo { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 3px solid var(--accent); box-shadow: 0 0 calc(34px*var(--glow)) rgba(var(--accent-rgb),calc(0.5*var(--glow))), inset 0 0 20px rgba(var(--accent-rgb),0.15); } .login-logo svg { width: 40px; height: 40px; } .login-logo-img { display: block; width: 104px; height: 104px; object-fit: contain; margin: 0 auto 18px; filter: drop-shadow(0 0 calc(28px*var(--glow)) rgba(var(--accent-rgb),calc(0.5*var(--glow)))); } .login-card h1 { font-size: 32px; font-weight: 800; text-align: center; letter-spacing: -.5px; } .login-card .sub { text-align: center; color: var(--txt-3); font-size: 14.5px; margin: 6px 0 30px; } .login-field { display: flex; align-items: center; gap: 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 16px; height: 54px; margin-bottom: 14px; transition: border-color .15s, box-shadow .15s; } .login-field:focus-within { border-color: rgba(var(--accent-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12); } .login-field svg { width: 19px; height: 19px; color: var(--txt-3); flex: none; } .login-field input { background: none; border: none; outline: none; width: 100%; font-size: 15px; } .login-field input::placeholder { color: var(--txt-3); } .login-field .eye { color: var(--txt-3); display: grid; place-items: center; } .login-field .eye:hover { color: var(--txt-1); } .forgot { display: block; text-align: right; color: var(--accent); font-size: 13px; font-weight: 600; margin: 2px 2px 22px; } .forgot:hover { text-decoration: underline; } .login-btn { width: 100%; height: 54px; border-radius: var(--r-md); font-size: 16px; font-weight: 700; color: #1a0e00; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 8px 24px rgba(var(--accent-rgb),calc(0.45*var(--glow))), 0 0 calc(40px*var(--glow)) rgba(var(--accent-rgb),calc(0.35*var(--glow))), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform .15s, filter .15s; } .login-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .login-btn:active { transform: scale(.99); } .login-or { display: flex; align-items: center; gap: 14px; color: var(--txt-4); font-size: 13px; margin: 22px 0; } .login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-discord { width: 100%; height: 54px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--txt-1); display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(var(--accent-rgb),0.4); background: var(--surf-1); transition: all .15s; } .login-discord:hover { border-color: var(--accent); background: var(--surf-2); } .login-discord svg { width: 21px; height: 21px; color: #5865f2; } .login-foot { text-align: center; margin-top: 24px; font-size: 13.5px; color: var(--txt-3); } .login-foot a { color: var(--accent); font-weight: 600; } .login-foot a:hover { text-decoration: underline; } .login-right { position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb),0.16), transparent 55%), linear-gradient(180deg, #0a0a0a, #050505); border-left: 1px solid var(--border-soft); } .login-hero { text-align: center; z-index: 2; padding: 40px; } .login-hero-logo { width: 150px; height: 150px; margin: 0 auto 28px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 5px solid var(--accent); box-shadow: 0 0 calc(80px*var(--glow)) rgba(var(--accent-rgb),calc(0.6*var(--glow))), inset 0 0 40px rgba(var(--accent-rgb),0.2); animation: heroFloat 5s ease-in-out infinite; } @keyframes heroFloat { 0%,100%{transform: translateY(0);} 50%{transform: translateY(-12px);} } .login-hero-logo svg { width: 84px; height: 84px; } .login-hero-img { display: block; width: 230px; height: 230px; object-fit: contain; margin: 0 auto 6px; filter: drop-shadow(0 0 calc(60px*var(--glow)) rgba(var(--accent-rgb),calc(0.55*var(--glow)))); animation: heroFloat 5s ease-in-out infinite; } .login-hero h1 { font-family: var(--font-display); font-size: 84px; letter-spacing: 1px; line-height: .9; } .login-hero p { color: var(--txt-2); font-size: 18px; margin-top: 10px; } .login-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: .7; } /* ============================================================ AVATAR FALLBACK + SETTINGS MODAL ============================================================ */ .avatar-initials { display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #1a0e00; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); } .settings-box { width: 540px; } .set-tabs { display: flex; gap: 8px; margin: 4px 0 22px; background: var(--bg-1); padding: 5px; border-radius: 12px; } .set-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--txt-3); transition: all .15s; } .set-tabs button:hover { color: var(--txt-1); } .set-tabs button.on { background: var(--surf-3); color: var(--accent); box-shadow: 0 0 calc(16px*var(--glow)) rgba(var(--accent-rgb),calc(0.18*var(--glow))); } .set-tabs button svg { width: 16px; height: 16px; } .set-pane { animation: fade .2s both; } .avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; } .avatar-lg { width: 84px; height: 84px; border-radius: 22px; flex: none; object-fit: cover; border: 1px solid rgba(var(--accent-rgb),0.4); font-size: 28px; box-shadow: 0 0 calc(24px*var(--glow)) rgba(var(--accent-rgb),calc(0.25*var(--glow))); } .avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .avatar-actions .btn-ghost { padding: 9px 14px; } .avatar-actions .hint { width: 100%; font-size: 12px; color: var(--txt-4); margin-top: 2px; } .field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field.two label { margin-bottom: 8px; } .form-err { color: var(--c-bug); font-size: 13px; margin: -6px 0 14px; font-weight: 500; } .set-divider { display: flex; align-items: center; gap: 12px; color: var(--txt-3); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin: 8px 0 18px; } .set-divider::before, .set-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ============================================================ RESPONSIVE ============================================================ */ .mobile-tabs { display: none; } /* ============================================================ MOBILE CHROME (barra superior, FAB, barra inferior, gaveta, sheet) — escondida por padrão; ligada em @media (max-width: 820px) ============================================================ */ .m-topbar, .m-fab, .m-bottomnav, .m-scrim, .m-hero { display: none; } /* "Todas" só aparece no celular; no desktop continua só o "Limpar filtros". */ .fchip-todas { display: none; } /* Hero de marca (logo grande) — visível só no celular, dentro da .main. */ .m-hero { flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 12px 16px 2px; } .m-hero-logo { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 0 calc(18px*var(--glow)) rgba(var(--accent-rgb), calc(0.55*var(--glow)))); } .m-hero-name { font-family: var(--font-display); font-size: 27px; line-height: 1; letter-spacing: 1px; color: var(--txt-1); text-shadow: 0 0 calc(14px*var(--glow)) rgba(var(--accent-rgb), calc(0.55*var(--glow))); } .m-hero-sub { font-size: 11px; letter-spacing: 4px; font-weight: 600; color: var(--txt-3); margin-top: 3px; } .m-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; height: 56px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; background: rgba(10,10,10,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); } .m-title { display: flex; align-items: center; gap: 9px; min-width: 0; } .m-title img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 calc(10px*var(--glow)) rgba(var(--accent-rgb), calc(0.5*var(--glow)))); } .m-title span { font-family: var(--font-display); font-size: 23px; letter-spacing: .5px; color: var(--txt-1); white-space: nowrap; } .m-icon { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--txt-2); background: transparent; border: none; transition: color .15s, background .15s; } .m-icon:hover, .m-icon:active { color: var(--txt-1); background: rgba(255,255,255,0.06); } .m-icon.on { color: var(--accent); } .m-fab { position: fixed; right: 16px; bottom: 84px; z-index: 44; width: 56px; height: 56px; border-radius: 18px; place-items: center; color: #1a0e00; border: none; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 8px 24px rgba(var(--accent-rgb), calc(0.5*var(--glow))), 0 0 calc(30px*var(--glow)) rgba(var(--accent-rgb), calc(0.4*var(--glow))), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform .15s, filter .15s; } .m-fab:active { transform: scale(.93); filter: brightness(1.06); } .m-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; height: 64px; align-items: stretch; background: rgba(10,10,10,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--border-soft); padding-bottom: env(safe-area-inset-bottom, 0px); } .m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--txt-3); font-size: 11px; font-weight: 600; background: none; border: none; transition: color .15s; } .m-tab svg { width: 22px; height: 22px; } .m-tab.on { color: var(--accent); } .m-tab.on svg { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.6)); } .m-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); animation: fade .2s both; } .m-scrim.sheet { align-items: flex-end; } .m-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: linear-gradient(180deg, var(--bg-1), #070707); border-right: 1px solid var(--border-soft); padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; animation: slideInLeft .26s cubic-bezier(.2,.8,.2,1) both; } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: none; } } .m-drawer-brand { display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px; } .m-drawer-brand img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 calc(14px*var(--glow)) rgba(var(--accent-rgb), calc(0.45*var(--glow)))); } .m-drawer-brand .brand-name { font-size: 20px; } .m-drawer-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surf-1); } .m-drawer-stats { display: flex; flex-direction: column; gap: 10px; } .m-drawer-menu { display: flex; flex-direction: column; gap: 2px; margin-top: auto; } .m-drawer-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border-radius: 10px; font-size: 14.5px; color: var(--txt-2); background: none; border: none; transition: background .15s, color .15s; } .m-drawer-menu button:hover, .m-drawer-menu button:active { background: rgba(255,255,255,0.05); color: var(--txt-1); } .m-drawer-menu button svg { width: 19px; height: 19px; flex: none; } .m-drawer-menu .pill-badge { margin-left: auto; } .m-drawer-menu .danger { color: var(--c-bug); margin-top: 6px; } .m-drawer-menu .danger:hover, .m-drawer-menu .danger:active { background: rgba(240,69,58,0.1); color: var(--c-bug); } .m-sheet { width: 100%; background: var(--surf-2); border: 1px solid var(--border-strong); border-bottom: none; border-radius: 22px 22px 0 0; padding: 14px 18px calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; animation: slideUp .28s cubic-bezier(.2,.8,.2,1) both; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } } .m-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 0 auto 2px; } .m-sheet h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; } .m-sheet h3 svg { color: var(--accent); } .m-sheet-note { font-size: 13px; color: var(--txt-3); line-height: 1.5; } @media (max-width: 1280px) { .search { width: 200px; } .search:focus-within { width: 230px; } } @media (max-width: 1120px) { .page-title { font-size: 34px; } .topbar { gap: 14px; padding: 22px 24px 12px; } .search { width: 170px; } .btn-primary { padding: 12px 16px; } .statbar { gap: 10px; } .stat { padding: 10px 13px; } } @media (max-width: 1100px) { .board { grid-auto-flow: column; grid-auto-columns: 300px; grid-template-columns: none; overflow-x: auto; gap: 16px; padding-bottom: 10px; } .column { min-width: 300px; } } @media (max-width: 820px) { /* Esconde toda a navegação de desktop — o celular usa a MobileChrome. */ .sidebar { display: none; } .topbar { display: none; } /* Layout em coluna única; a área principal rola por baixo das barras fixas. */ .app { display: block; height: 100%; overflow: hidden; } .main { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 56px; padding-bottom: 80px; } /* Liga a chrome móvel. */ .m-topbar { display: flex; } .m-fab { display: grid; } .m-bottomnav { display: flex; } .m-scrim { display: block; } .m-scrim.sheet { display: flex; } .m-hero { display: flex; } /* Quadro empilhado: colunas em largura total, página rola verticalmente. */ .board-wrap { flex: none; overflow: visible; padding: 16px 16px 28px; } .board { height: auto; display: flex; flex-direction: column; overflow: visible; gap: 14px; } .column { min-width: 0; width: 100%; } .col-body { overflow: visible; } /* Estatísticas: 4 em uma única linha, compactas (igual ao mockup). */ .statbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 16px 16px; } .stat { flex-direction: column; align-items: flex-start; gap: 7px; padding: 11px 10px; min-width: 0; } .stat > div { min-width: 0; } .stat-ico { width: 30px; height: 30px; border-radius: 9px; } .stat-ico svg { width: 16px; height: 16px; } .stat-num { font-size: 18px; } .stat-lbl { font-size: 10px; line-height: 1.25; margin-top: 2px; } /* Filtros quebram em linhas, não rolam de lado (igual ao mockup). */ .filters { padding: 16px 16px 18px; gap: 8px; flex-wrap: wrap; overflow: visible; } .filters .fchip, .filters > span { flex: 0 0 auto; } /* No celular: mostra "Todas" (igual ao mockup) e esconde o "Limpar filtros". */ .fchip-todas { display: inline-flex; align-items: center; } .fchip-clear { display: none; } /* Login continua empilhado. */ .login { grid-template-columns: 1fr; } .login-right { display: none; } } /* ============================================================ LOGIN TABS (Entrar / Criar conta) ============================================================ */ .login-tabs { display: flex; gap: 6px; margin: 8px 0 18px; background: var(--bg-1); padding: 4px; border-radius: 12px; } .login-tab { flex: 1; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--txt-3); background: none; border: none; cursor: pointer; transition: all .15s; } .login-tab:hover { color: var(--txt-1); } .login-tab.on { background: var(--surf-3); color: var(--accent); box-shadow: 0 0 calc(14px*var(--glow)) rgba(var(--accent-rgb), calc(0.20*var(--glow))); } /* ============================================================ BADGES (contador de pendentes) ============================================================ */ .pill-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: auto; border-radius: 999px; font-size: 11px; font-weight: 800; color: #1a0e00; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 0 calc(12px*var(--glow)) rgba(var(--accent-rgb), calc(0.40*var(--glow))); } .profile-dot { position: absolute; top: 6px; right: 36px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #1a0e00; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 0 calc(10px*var(--glow)) rgba(var(--accent-rgb), calc(0.45*var(--glow))); animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .profile { position: relative; } /* ============================================================ APROVAÇÕES (lista de cadastros pendentes) ============================================================ */ .approvals-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px; } .approval-card { display: flex; flex-direction: column; gap: 13px; padding: 15px 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--bg-1); transition: border-color .15s, background .15s; } .approval-card:hover { border-color: rgba(var(--accent-rgb), 0.4); background: var(--surf-1); } .approval-head { display: flex; align-items: center; gap: 12px; min-width: 0; } .approval-avatar { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--accent-hi); background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.3); } .approval-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .approval-info b, .approval-info .approval-email { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .approval-info b { font-size: 14.5px; color: var(--txt-1); } .approval-info .approval-email { font-size: 12.5px; color: var(--txt-3); } .approval-info .approval-time { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--txt-4); margin-top: 3px; } .approval-info .approval-time svg { color: var(--txt-4); flex: none; } .approval-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; } .approval-btns { display: flex; gap: 8px; margin-left: auto; } .approval-btns .btn-primary, .approval-btns .btn-ghost { padding: 9px 15px; font-size: 13px; white-space: nowrap; } /* Seletor de cargo (segmented control) — substitui o