/* public/theme.css Design tokens partilhados por login.html, painel.html e overlays. Tema alterna via atributo data-theme no . Além do clássico "light" / "dark", existe agora uma pequena coleção de temas visuais (paletas completas, não só cor de destaque) para quem quiser um visual diferente no painel — ver .theme-picker mais abaixo. Guarda a escolha em localStorage com a chave "ui-theme" (replicado via script inline no topo de cada página, antes do primeiro paint). */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Lexend:wght@600;700;800&display=swap'); :root, [data-theme="light"] { --bg: #F4F6FB; --bg-elevated: #FFFFFF; --card-bg: #FFFFFF; --card-bg-soft: #FAFBFD; --card-border: #E6EAF2; --sidebar-bg: #FFFFFF; --sidebar-border: #E6EAF2; --text: #10192B; --text-muted: #67728A; --text-faint: #9BA4B7; --accent-teal: #0EA894; --accent-blue: #3D5DFF; --accent-green: #1FA35C; --accent-red: #E6433F; --accent-amber: #E58E15; --accent-teal-soft: rgba(14, 168, 148, .12); --accent-blue-soft: rgba(61, 93, 255, .10); --accent-green-soft: rgba(31, 163, 92, .12); --accent-red-soft: rgba(230, 67, 63, .12); --accent-amber-soft: rgba(229, 142, 21, .14); --accent-gradient: linear-gradient(135deg, #0EA894, #3D5DFF); --accent-gradient-soft: linear-gradient(135deg, rgba(14,168,148,.10), rgba(61,93,255,.10)); --on-accent: #08131A; --shadow-card: 0 1px 2px rgba(16, 25, 43, .05), 0 10px 26px -8px rgba(16, 25, 43, .10); --shadow-hover: 0 4px 10px rgba(16, 25, 43, .07), 0 18px 40px -12px rgba(16, 25, 43, .16); --shadow-pop: 0 12px 32px -6px rgba(16, 25, 43, .22), 0 4px 12px rgba(16, 25, 43, .08); } [data-theme="dark"] { --bg: #0A0E17; --bg-elevated: #121826; --card-bg: #131A29; --card-bg-soft: #0F1522; --card-border: #232C40; --sidebar-bg: #0C111C; --sidebar-border: #1E2637; --text: #EDF1FC; --text-muted: #8D97B3; --text-faint: #565F78; --accent-teal: #2BE0C6; --accent-blue: #6E8CFF; --accent-green: #4FDB8E; --accent-red: #FF6B6B; --accent-amber: #F5C063; --accent-teal-soft: rgba(43, 224, 198, .14); --accent-blue-soft: rgba(110, 140, 255, .16); --accent-green-soft: rgba(79, 219, 142, .14); --accent-red-soft: rgba(255, 107, 107, .14); --accent-amber-soft: rgba(245, 192, 99, .14); --accent-gradient: linear-gradient(135deg, #2BE0C6, #6E8CFF); --accent-gradient-soft: linear-gradient(135deg, rgba(43,224,198,.14), rgba(110,140,255,.14)); --on-accent: #06131A; --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -8px rgba(0, 0, 0, .45); --shadow-hover: 0 4px 10px rgba(0, 0, 0, .4), 0 20px 44px -12px rgba(0, 0, 0, .55); --shadow-pop: 0 16px 36px -6px rgba(0, 0, 0, .55), 0 4px 14px rgba(0, 0, 0, .3); } /* ---- Midnight: azul-marinho profundo com violeta (premium, escuro) ---- */ [data-theme="midnight"] { --bg: #080A16; --bg-elevated: #10132A; --card-bg: #12152B; --card-bg-soft: #0D0F20; --card-border: #232748; --sidebar-bg: #0A0C1C; --sidebar-border: #1E2140; --text: #ECEBFF; --text-muted: #8C8FBE; --text-faint: #52548A; --accent-teal: #8B7CFF; --accent-blue: #5B6EF5; --accent-green: #4FDB8E; --accent-red: #FF6E8E; --accent-amber: #F5C063; --accent-teal-soft: rgba(139, 124, 255, .16); --accent-blue-soft: rgba(91, 110, 245, .18); --accent-green-soft: rgba(79, 219, 142, .14); --accent-red-soft: rgba(255, 110, 142, .14); --accent-amber-soft: rgba(245, 192, 99, .14); --accent-gradient: linear-gradient(135deg, #8B7CFF, #5B6EF5); --accent-gradient-soft: linear-gradient(135deg, rgba(139,124,255,.16), rgba(91,110,245,.16)); --on-accent: #0A0A1A; --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -8px rgba(6, 4, 30, .5); --shadow-hover: 0 4px 10px rgba(0, 0, 0, .4), 0 20px 44px -12px rgba(91, 60, 245, .28); --shadow-pop: 0 16px 36px -6px rgba(0, 0, 0, .55), 0 4px 14px rgba(91, 60, 245, .18); } /* ---- Graphite: neutro grafite com âmbar (profissional, tipo "estúdio") ---- */ [data-theme="graphite"] { --bg: #121212; --bg-elevated: #1B1B1B; --card-bg: #1C1C1C; --card-bg-soft: #171717; --card-border: #2E2E2E; --sidebar-bg: #161616; --sidebar-border: #292929; --text: #F2F1EE; --text-muted: #A0A0A0; --text-faint: #6B6B6B; --accent-teal: #E0B15C; --accent-blue: #D9D9D9; --accent-green: #7FC97F; --accent-red: #E8615C; --accent-amber: #E0B15C; --accent-teal-soft: rgba(224, 177, 92, .14); --accent-blue-soft: rgba(217, 217, 217, .10); --accent-green-soft: rgba(127, 201, 127, .13); --accent-red-soft: rgba(232, 97, 92, .14); --accent-amber-soft: rgba(224, 177, 92, .14); --accent-gradient: linear-gradient(135deg, #E0B15C, #C98A3E); --accent-gradient-soft: linear-gradient(135deg, rgba(224,177,92,.14), rgba(201,138,62,.10)); --on-accent: #1A1204; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -8px rgba(0, 0, 0, .5); --shadow-hover: 0 4px 10px rgba(0, 0, 0, .45), 0 18px 38px -12px rgba(0, 0, 0, .6); --shadow-pop: 0 16px 36px -6px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .35); } /* ---- Arctic: alternativa clara, mais fria e "editorial" ---- */ [data-theme="arctic"] { --bg: #EEF1F8; --bg-elevated: #FFFFFF; --card-bg: #FFFFFF; --card-bg-soft: #F6F8FC; --card-border: #DEE3F0; --sidebar-bg: #FBFCFF; --sidebar-border: #DEE3F0; --text: #171B33; --text-muted: #5E6482; --text-faint: #9498B5; --accent-teal: #6F5BF0; --accent-blue: #2F6BFF; --accent-green: #17A672; --accent-red: #E0424B; --accent-amber: #D98A11; --accent-teal-soft: rgba(111, 91, 240, .12); --accent-blue-soft: rgba(47, 107, 255, .10); --accent-green-soft: rgba(23, 166, 114, .12); --accent-red-soft: rgba(224, 66, 75, .12); --accent-amber-soft: rgba(217, 138, 17, .13); --accent-gradient: linear-gradient(135deg, #6F5BF0, #2F6BFF); --accent-gradient-soft: linear-gradient(135deg, rgba(111,91,240,.10), rgba(47,107,255,.10)); --on-accent: #0C0A22; --shadow-card: 0 1px 2px rgba(23, 27, 51, .05), 0 10px 26px -8px rgba(23, 27, 51, .10); --shadow-hover: 0 4px 10px rgba(23, 27, 51, .07), 0 18px 40px -12px rgba(23, 27, 51, .14); --shadow-pop: 0 12px 32px -6px rgba(23, 27, 51, .18), 0 4px 12px rgba(23, 27, 51, .08); } /* ---- TikScreen: paleta oficial da marca — coral + violeta, dark-first ---- */ [data-theme="tikscreen"] { --bg: #0E0F1A; --bg-elevated: #141524; --card-bg: #171827; --card-bg-soft: #12131F; --card-border: #272A42; --sidebar-bg: #12131F; --sidebar-border: #23253C; --text: #F1F1F8; --text-muted: #9B9CB8; --text-faint: #5C5D7A; --accent-teal: #2FE896; --accent-blue: #5B4FE8; --accent-green: #2FE896; --accent-red: #FF5C5C; --accent-amber: #FFC24B; --accent-teal-soft: rgba(47, 232, 150, .14); --accent-blue-soft: rgba(91, 79, 232, .18); --accent-green-soft: rgba(47, 232, 150, .14); --accent-red-soft: rgba(255, 92, 92, .14); --accent-amber-soft: rgba(255, 194, 75, .15); --accent-gradient: linear-gradient(135deg, #FF4D6D, #5B4FE8); --accent-gradient-soft: linear-gradient(135deg, rgba(255,77,109,.14), rgba(91,79,232,.16)); --on-accent: #FFFFFF; --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -8px rgba(0, 0, 0, .5); --shadow-hover: 0 4px 10px rgba(0, 0, 0, .4), 0 20px 44px -12px rgba(91, 79, 232, .3); --shadow-pop: 0 16px 36px -6px rgba(0, 0, 0, .55), 0 4px 14px rgba(255, 77, 109, .2); } /* ---- Sunset: escuro, quente, âmbar/coral em gradiente ---- */ [data-theme="sunset"] { --bg: #160D0C; --bg-elevated: #1F1412; --card-bg: #211514; --card-bg-soft: #190F0E; --card-border: #362221; --sidebar-bg: #180F0E; --sidebar-border: #301E1D; --text: #FCEFE8; --text-muted: #C2A199; --text-faint: #7A625C; --accent-teal: #FF8A5B; --accent-blue: #FF5D8F; --accent-green: #6FD09A; --accent-red: #FF5D5D; --accent-amber: #FFB454; --accent-teal-soft: rgba(255, 138, 91, .16); --accent-blue-soft: rgba(255, 93, 143, .16); --accent-green-soft: rgba(111, 208, 154, .14); --accent-red-soft: rgba(255, 93, 93, .14); --accent-amber-soft: rgba(255, 180, 84, .16); --accent-gradient: linear-gradient(135deg, #FF8A5B, #FF5D8F); --accent-gradient-soft: linear-gradient(135deg, rgba(255,138,91,.16), rgba(255,93,143,.16)); --on-accent: #1F0A08; --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -8px rgba(20, 5, 5, .5); --shadow-hover: 0 4px 10px rgba(0, 0, 0, .4), 0 20px 44px -12px rgba(255, 93, 91, .22); --shadow-pop: 0 16px 36px -6px rgba(0, 0, 0, .55), 0 4px 14px rgba(255, 138, 91, .18); } :root { --radius-xl: 22px; --radius-lg: 18px; --radius-md: 13px; --radius-sm: 10px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Lexend', 'Inter', -apple-system, sans-serif; --ease-out: cubic-bezier(.16, 1, .3, 1); } * { box-sizing: border-box; } body { background: radial-gradient(1100px 560px at 10% -10%, var(--accent-blue-soft), transparent 60%), radial-gradient(900px 520px at 100% 0%, var(--accent-teal-soft), transparent 55%), radial-gradient(760px 460px at 88% 92%, var(--accent-teal-soft), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; } * { scrollbar-width: thin; scrollbar-color: var(--card-border) transparent; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 4px; } /* ---------- Layout ---------- */ .app-shell { display: flex; min-height: 100vh; gap: .9rem; align-items: flex-start; padding: .9rem .9rem .9rem 0; } .sidebar { width: 254px; flex-shrink: 0; background: linear-gradient(180deg, var(--sidebar-bg), var(--card-bg-soft)); border: 1px solid var(--sidebar-border); border-radius: var(--radius-xl); padding: 1.3rem .95rem 1rem; margin: .9rem 0 .9rem .9rem; display: flex; flex-direction: column; gap: .2rem; position: sticky; top: .9rem; align-self: flex-start; height: calc(100vh - 1.8rem); overflow-y: auto; box-shadow: var(--shadow-card); backdrop-filter: saturate(160%) blur(18px); } .sidebar .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; padding: .3rem .5rem 1.35rem; display: flex; align-items: center; gap: .6rem; } .sidebar .brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--accent-gradient); box-shadow: 0 4px 14px -4px var(--accent-blue-soft), inset 0 1px 0 rgba(255,255,255,.3); color: var(--on-accent); font-size: .98rem; position: relative; overflow: hidden; } .sidebar .brand .brand-mark-logo { background: none; box-shadow: 0 4px 14px -4px var(--accent-blue-soft); } .sidebar .brand .brand-mark-logo img { width: 100%; height: 100%; display: block; object-fit: cover; } .sidebar .brand .brand-mark::after { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.55) 85%, transparent 100%); animation: brand-spin 4.5s linear infinite; mix-blend-mode: overlay; } @keyframes brand-spin { to { transform: rotate(360deg); } } .sidebar .brand-label { background: linear-gradient(90deg, var(--text), var(--text) 60%, var(--accent-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sidebar .nav-item { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; margin: .05rem 0; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: .87rem; text-decoration: none; cursor: pointer; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out); } .sidebar .nav-item:hover { background: var(--card-border); color: var(--text); transform: translateX(2px); } .sidebar .nav-item.active { background: var(--accent-gradient-soft); color: var(--text); } .sidebar .nav-item.active .nav-icon { background: var(--accent-gradient); color: var(--on-accent); box-shadow: 0 3px 10px -3px var(--accent-blue-soft); } .sidebar .nav-item.active::before { content: ''; position: absolute; left: -1.15rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-gradient); } .sidebar .nav-icon { font-size: .92rem; flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-align: center; transition: background .18s var(--ease-out), color .18s var(--ease-out); } .sidebar .nav-label { white-space: nowrap; } .sidebar .brand-label { white-space: nowrap; } .sidebar-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--bg-elevated); color: var(--text); cursor: pointer; font-size: 1.05rem; } .sidebar-backdrop { display: none; } .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(6, 10, 18, .5); backdrop-filter: blur(2px); z-index: 45; } .main-content { flex: 1; padding: .9rem 2.2rem 2rem; max-width: 1220px; margin: 0 auto; } /* ---------- Cards ---------- */ .card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.45rem 1.55rem; overflow: hidden; transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-gradient); opacity: 0; transition: opacity .25s ease; } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .card:hover::before { opacity: .9; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card-label { font-size: .76rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .card-value { font-family: var(--font-display); font-size: 1.95rem; font-weight: 800; letter-spacing: -.02em; margin-top: .35rem; } .card-sub { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--bg-elevated); color: var(--text); font-family: inherit; font-weight: 600; font-size: .87rem; cursor: pointer; transition: filter .15s ease, transform .1s ease, box-shadow .15s ease, border-color .15s ease; } .btn:hover { filter: brightness(1.04); border-color: var(--text-faint); } .btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; cursor: default; transform: none; } .btn-primary { position: relative; background: var(--accent-gradient); border: none; color: var(--on-accent); box-shadow: 0 6px 16px -6px var(--accent-blue-soft); overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); background-size: 220% 100%; background-position: 120% 0; transition: background-position .5s var(--ease-out); } .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 8px 22px -6px var(--accent-blue-soft); } .btn-primary:hover::after { background-position: -20% 0; } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); box-shadow: none; } .btn-ghost:hover { background: var(--card-border); color: var(--text); } .btn-sm { padding: .38rem .7rem; font-size: .78rem; border-radius: 8px; } /* ---------- Inputs ---------- */ .input { width: 100%; background: var(--card-bg-soft); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text); padding: .7rem .9rem; font-family: inherit; font-size: .9rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--accent-blue-soft); background: var(--card-bg); } .input::placeholder { color: var(--text-faint); } /* ---------- Badges / status ---------- */ .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid transparent; } .badge-green { background: var(--accent-green-soft); color: var(--accent-green); } .badge-red { background: var(--accent-red-soft); color: var(--accent-red); } .badge-amber { background: var(--accent-amber-soft); color: var(--accent-amber); } .badge .dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; } .badge-green .dot { animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 4px transparent; opacity: .55; } } /* ---------- Toggle / escolha de tema ---------- */ .theme-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--bg-elevated); cursor: pointer; font-size: 1.05rem; transition: border-color .15s ease, transform .1s ease; } .theme-toggle:hover { border-color: var(--text-faint); } .theme-toggle:active { transform: scale(.96); } .theme-picker { position: relative; } .theme-menu { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 60; width: 258px; padding: .6rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: none; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .theme-menu.open { display: grid; } .theme-menu-title { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: .1rem .2rem .3rem; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .5rem .3rem .55rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; transition: background .15s ease, border-color .15s ease; } .theme-swatch:hover { background: var(--card-border); } .theme-swatch.active { border-color: var(--accent-blue); background: var(--accent-blue-soft); } .theme-swatch-preview { width: 42px; height: 30px; border-radius: 7px; position: relative; overflow: hidden; border: 1px solid rgba(127,127,127,.25); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } .theme-swatch-preview .a { position: absolute; inset: 0; } .theme-swatch-preview .b { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%; } .theme-swatch-label { font-size: .68rem; font-weight: 600; color: var(--text-muted); } .theme-swatch.active .theme-swatch-label { color: var(--accent-blue); } ::selection { background: var(--accent-teal-soft); } .text-link-row { text-align: center; margin: .9rem 0 0; } .text-link { font-size: .82rem; font-weight: 600; color: var(--accent-blue); text-decoration: none; cursor: pointer; } .text-link:hover { text-decoration: underline; } /* ---------- Hero card (cabeçalho de destaque, ex. Dashboard) ---------- */ .hero-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--card-bg), var(--card-bg-soft)); } .hero-card::before { content: ''; position: absolute; top: -40%; right: -12%; width: 320px; height: 320px; border-radius: 50%; background: var(--accent-gradient); opacity: .16; filter: blur(10px); } .hero-card::after { content: ''; position: absolute; bottom: -50%; left: 8%; width: 220px; height: 220px; border-radius: 50%; background: var(--accent-teal); opacity: .10; filter: blur(30px); } .hero-card > * { position: relative; z-index: 1; } /* ---------- Banner lateral (promoção / parceiro) ---------- */ .sidebar-promo { position: relative; margin: .8rem .1rem .3rem; padding: .95rem .9rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--card-border); background: radial-gradient(120% 140% at 15% -10%, var(--accent-teal-soft), transparent 60%), var(--card-bg-soft); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .sidebar-promo:hover { border-color: var(--accent-teal); transform: translateY(-2px); box-shadow: var(--shadow-hover); } .sidebar-promo::after { content: ''; position: absolute; top: -30%; right: -25%; width: 140px; height: 140px; border-radius: 50%; background: var(--accent-gradient); opacity: .18; filter: blur(4px); pointer-events: none; } .sidebar-promo-tag { align-self: flex-start; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-teal); background: var(--accent-teal-soft); border-radius: 999px; padding: .2rem .55rem; margin-bottom: .55rem; } .sidebar-promo-top { display: flex; align-items: center; gap: .65rem; position: relative; z-index: 1; } .sidebar-promo-media { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); box-shadow: 0 4px 12px -4px var(--accent-blue-soft); background: var(--card-bg); } .sidebar-promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-promo-title { font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: var(--text); letter-spacing: -.01em; line-height: 1.15; } .sidebar-promo-title span { color: var(--accent-teal); } .sidebar-promo-text { font-size: .76rem; color: var(--text-muted); line-height: 1.35; margin: .55rem 0 .8rem; position: relative; z-index: 1; } .sidebar-promo-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .5rem .6rem; border-radius: 999px; background: var(--accent-gradient); color: var(--on-accent); box-shadow: 0 4px 14px -4px var(--accent-blue-soft); } .sidebar-promo:hover .sidebar-promo-cta { filter: brightness(1.08); } @media (max-width: 860px) { .app-shell { display: block; padding: 0; } .main-content { margin-left: 60px; padding: 1.1rem .9rem; max-width: 100%; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 60px; margin: 0; border-radius: 0; flex-direction: column; border-right: 1px solid var(--sidebar-border); border-bottom: none; overflow-x: hidden; overflow-y: auto; z-index: 50; padding: .9rem .5rem; transition: width .22s ease, box-shadow .22s ease; } .sidebar.expanded { width: 240px; box-shadow: 12px 0 32px rgba(0, 0, 0, .28); } .sidebar-promo { display: none; } .sidebar.expanded .sidebar-promo { display: flex; } .sidebar-toggle { display: flex; margin-bottom: .6rem; } .sidebar:not(.expanded) .sidebar-toggle .icon-close { display: none; } .sidebar.expanded .sidebar-toggle .icon-open { display: none; } .sidebar .brand { display: flex; align-items: center; justify-content: center; padding: 0 0 .9rem; } .sidebar.expanded .brand { justify-content: flex-start; padding-left: .5rem; } .sidebar .brand-label { display: none; } .sidebar.expanded .brand-label { display: inline; } .sidebar .nav-item { justify-content: center; padding: .65rem; } .sidebar.expanded .nav-item { justify-content: flex-start; } .sidebar .nav-item.active::before { left: -.5rem; } .sidebar .nav-label { display: none; } .sidebar.expanded .nav-label { display: inline; } .sidebar .nav-group { align-items: center; } .sidebar.expanded .nav-group { align-items: stretch; } .sidebar .nav-submenu { display: none; } .sidebar.expanded .nav-submenu { display: flex; } .theme-menu { right: -50px; } }