*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } :root { --bg: #F5F3EE; --surface: #FFF; --surface2: #F0EDE7; --border: #E2DDD6; --text: #1A1916; --text2: #6B6760; --text3: #A09C97; --accent: #1B4B91; --accent-l: #E7EEFA; --danger: #C0392B; --danger-l: #FDECEA; --warn: #D97706; --warn-l: #FEF3C7; --blue: #1D4ED8; --blue-l: #EFF6FF; --purple: #6D28D9; --purple-l: #F5F3FF; --pink: #BE185D; --pink-l: #FCE7F3; --r: 10px; --rl: 16px; --sh: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04); --shl: 0 4px 24px rgba(0, 0, 0, .1); --f: 'DM Sans', sans-serif; --m: 'DM Mono', monospace; } /* Dark mode: mesma lista de variáveis, valores diferentes. Ativado via atributo data-theme="dark" no (ver public/js/theme.js) em vez de @media prefers-color-scheme, pra dar pra alternar manualmente e não só seguir o sistema. */ html[data-theme="dark"] { --bg: #12161c; --surface: #1b2029; --surface2: #232935; --border: #313847; --text: #E8EAED; --text2: #9AA3B2; --text3: #6B7280; --accent: #5B9BF0; --accent-l: #1A2A42; --danger: #F87171; --danger-l: #3B1B1B; --warn: #FBBF24; --warn-l: #3B2F13; --blue: #60A5FA; --blue-l: #1E2F4D; --purple: #A78BFA; --purple-l: #2C2140; --pink: #F472B6; --pink-l: #3D1F2E; --sh: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2); --shl: 0 4px 24px rgba(0, 0, 0, .45); } body { font-family: var(--f); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; min-height: 100vh; transition: background-color .15s, color .15s; } /* Login Auth */ .auth-bg { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; } .auth-box { background: var(--surface); padding: 40px; border-radius: var(--rl); box-shadow: var(--shl); width: 100%; max-width: 380px; text-align: center; position: relative; } .auth-title { font-size: 22px; font-weight: 600; margin-bottom: 8px; } .auth-sub { font-size: 14px; color: var(--text2); margin-bottom: 24px; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .shell { display: none; grid-template-columns: 252px 1fr; min-height: 100vh } .sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden } .main { overflow-y: auto; padding: 28px 32px; min-height: 100vh } /* Sidebar */ .logo { padding: 18px 16px 14px; border-bottom: 1px solid var(--border) } .logo-mark { display: flex; align-items: center; gap: 9px } .logo-icon { width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0 } .logo-text { font-size: 13px; font-weight: 600 } .logo-sub { font-size: 11px; color: var(--text2); margin-top: 1px } .nav { padding: 10px 8px; flex: 1; overflow-y: auto } .nav-lbl { font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: .8px; text-transform: uppercase; padding: 0 8px; margin: 10px 0 4px } .ni { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--text2); font-size: 13px; font-weight: 500; transition: all .15s; margin-bottom: 1px; user-select: none } .ni:hover { background: var(--surface2); color: var(--text) } .ni.active { background: var(--accent-l); color: var(--accent); font-weight: 600 } .ni.rnav.active { background: var(--blue-l); color: var(--blue) } .ni.cnav.active { background: var(--purple-l); color: var(--purple) } .ndot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 } .nc { font-size: 10px; color: var(--text3); font-family: var(--m) } .nadd { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 7px; cursor: pointer; color: var(--text3); font-size: 12px; font-weight: 500; transition: all .15s; border: 1px dashed var(--border); margin-top: 5px } .nadd:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l) } .nfooter { display: flex; align-items: stretch; gap: 8px; margin-top: 15px; padding: 8px; border-top: 1px solid var(--border); } .nlogout { flex: 1; color: var(--danger); font-size: 12px; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 6px; transition: background .15s; } .nlogout:hover { background: var(--danger-l); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 7px; font-family: var(--f); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .15s } .btn-login { width: 100%; justify-content: center; padding: 12px; font-size: 15px; } .bp { background: var(--accent); color: #fff } .bp:hover { background: #163d78 } .bg { background: transparent; color: var(--text2); border: 1px solid var(--border) } .bg:hover { background: var(--surface2); color: var(--text) } .bd { background: var(--danger-l); color: var(--danger); border: none } .bd:hover { background: #f5c6c3 } .bb { background: var(--blue-l); color: var(--blue); border: none } .bb:hover { background: #dbeafe } .bsm { padding: 5px 10px; font-size: 12px } .btn:disabled { opacity: .65; cursor: not-allowed } /* Page */ .ph { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px } .pt { font-size: 20px; font-weight: 600; letter-spacing: -.4px } .ps { font-size: 13px; color: var(--text2); margin-top: 2px } .btn-row { display: flex; gap: 7px; flex-wrap: wrap } /* Stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px } .sc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 14px 16px; box-shadow: var(--sh); cursor: pointer; transition: all .15s } .sc:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-l) } .sc.af { border-color: var(--accent); background: var(--accent-l) } .sc.af .sl { color: var(--accent) } .sl { font-size: 10px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px } .sv { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1 } .sm { font-size: 10px; color: var(--text3); margin-top: 3px } /* Table */ .sh2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px } .st { font-size: 14px; font-weight: 600 } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); box-shadow: var(--sh); overflow: hidden } /* Deixa só a tabela rolar na horizontal em tela estreita, sem quebrar o layout da página. */ .tblwrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse } th { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; padding: 10px 13px; border-bottom: 1px solid var(--border); text-align: left; background: var(--surface2) } td { padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: middle } tr:last-child td { border-bottom: none } tr.cr:hover td { background: var(--surface2); cursor: pointer } .cn { font-weight: 600; font-size: 13px } .cr2 { font-size: 11px; color: var(--text2); margin-top: 1px } .av { width: 29px; height: 29px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0 } .cc { display: flex; align-items: center; gap: 8px } .pw { display: flex; align-items: center; gap: 6px } .pb { flex: 1; height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; min-width: 55px } .pf { height: 100%; border-radius: 3px } .fg { background: var(--accent) } .fw { background: var(--warn) } .fd { background: var(--danger) } .pp { font-size: 11px; font-weight: 600; color: var(--text2); min-width: 26px; font-family: var(--m) } .nb { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 6px; font-size: 12px; font-weight: 700; font-family: var(--m) } .na { background: var(--accent-l); color: var(--accent) } .nm { background: var(--warn-l); color: var(--warn) } .nl { background: var(--danger-l); color: var(--danger) } .cc2 { display: flex; flex-wrap: wrap; gap: 3px } .chip { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 20px; background: var(--surface2); color: var(--text2); border: 1px solid var(--border) } .chip.done { background: var(--accent-l); color: var(--accent); border-color: transparent } .empty { text-align: center; padding: 36px 20px; color: var(--text2) } .empty p { font-size: 13px; line-height: 1.8 } .ftag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--accent-l); color: var(--accent); display: inline-flex; align-items: center; gap: 4px } .ftag button { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 13px; line-height: 1 } /* Drawer */ .ov { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 100; display: flex; align-items: flex-start; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity .2s } .ov.open { opacity: 1; pointer-events: all } .drawer { background: var(--surface); width: 580px; height: 100vh; overflow-y: auto; box-shadow: var(--shl); transform: translateX(40px); transition: transform .25s; display: flex; flex-direction: column } .ov.open .drawer { transform: translateX(0) } .dh { padding: 16px 20px 13px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; position: sticky; top: 0; background: var(--surface); z-index: 1 } .dt { font-size: 15px; font-weight: 600; letter-spacing: -.3px; outline: none; border-bottom: 1px dashed transparent; transition: border-color .15s } .dt:focus { border-color: var(--accent) } .ds { font-size: 12px; color: var(--text2); margin-top: 2px; outline: none; border-bottom: 1px dashed transparent } .ds:focus { border-color: var(--accent) } .xcl { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text2); font-size: 16px } .xcl:hover { background: var(--surface2) } .db { padding: 18px 20px; flex: 1 } .dsec { margin-bottom: 18px } .dst { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 9px; display: flex; align-items: center; gap: 5px } .dst::after { content: ''; flex: 1; height: 1px; background: var(--border) } .df { padding: 11px 20px; border-top: 1px solid var(--border); display: flex; gap: 7px; position: sticky; bottom: 0; background: var(--surface) } /* Drawer tabs */ .dtabs { display: flex; border-bottom: 1px solid var(--border); margin: -18px -20px 18px; padding: 0 20px; overflow-x: auto } .dtab { padding: 11px 13px; font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; margin-bottom: -1px; white-space: nowrap } .dtab:hover { color: var(--text) } .dtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600 } /* Form */ .inp { font-family: var(--f); font-size: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); outline: none; transition: border .15s; width: 100% } .inp:focus { border-color: var(--accent) } .sel { font-family: var(--f); font-size: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); outline: none; cursor: pointer; width: 100% } .sel:focus { border-color: var(--accent) } .ta { font-family: var(--f); font-size: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); outline: none; resize: vertical; width: 100%; min-height: 56px; line-height: 1.5 } .ta:focus { border-color: var(--accent) } .fl { font-size: 11px; font-weight: 500; color: var(--text2); margin-bottom: 3px } .fg2 { display: grid; gap: 9px; margin-bottom: 9px } .fg2-2 { grid-template-columns: 1fr 1fr } .fg2-3 { grid-template-columns: 1fr 1fr 1fr } /* Avaliações timeline */ .avt { display: flex; flex-direction: column; gap: 7px } .avrow { display: flex; align-items: flex-start; gap: 11px; padding: 10px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); position: relative } .avrow.avlast { border-color: var(--accent); background: var(--accent-l) } .avnb { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: var(--m); flex-shrink: 0 } .avnb.alta { background: var(--accent); color: #fff } .avnb.media { background: var(--warn); color: #fff } .avnb.baixa { background: var(--danger); color: #fff } .avmeta { flex: 1 } .avper { font-size: 12px; font-weight: 600; color: var(--text) } .avby { font-size: 11px; color: var(--text2); margin-top: 1px } .avobs { font-size: 11px; color: var(--text2); font-style: italic; margin-top: 3px } .avdel { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 4px; border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0 } .avrow:hover .avdel { opacity: 1 } .avdel:hover { background: var(--danger-l); color: var(--danger) } .avedit { position: absolute; top: 7px; right: 29px; width: 18px; height: 18px; border-radius: 4px; border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; opacity: 0 } .avrow:hover .avedit { opacity: 1 } .avedit:hover { background: var(--blue-l); color: var(--blue) } .avbadge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; background: var(--accent); color: #fff; margin-left: 5px } /* Trend */ .tbar { flex: 1; border-radius: 3px 3px 0 0; min-height: 3px; position: relative; cursor: default } .tbar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 4px; white-space: nowrap; font-family: var(--m); pointer-events: none } .tlbl { font-size: 9px; color: var(--text3); text-align: center; flex: 1 } /* Cursos */ .ci { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 6px; background: var(--surface2); position: relative } .ci.done { border-color: #C7DBF2; background: #EFF6FC } .cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px } .cinfo { flex: 1; min-width: 0 } .cname { font-size: 13px; font-weight: 500 } .cmeta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap } .cptag { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); font-weight: 500 } .cdata { font-size: 10px; color: var(--text3) } .clink { font-size: 10px; color: var(--blue); text-decoration: none } .clink:hover { text-decoration: underline } .cobs { font-size: 11px; color: var(--text2); font-style: italic; margin-top: 3px } .cact { display: flex; align-items: center; gap: 3px; flex-shrink: 0 } .pctinp { width: 44px; font-family: var(--m); font-size: 11px; font-weight: 600; padding: 3px 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); text-align: center; outline: none } .pctinp:focus { border-color: var(--accent) } .ckbtn { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 5px; padding: 2px 6px; font-size: 10px; font-weight: 600; cursor: pointer; font-family: var(--f) } .ckbtn:hover { background: var(--accent-l); color: var(--accent); border-color: transparent } .ckbtn.undo { background: var(--accent-l); color: var(--accent); border-color: transparent } .ibtn { width: 20px; height: 20px; border-radius: 4px; border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center } .ibtn:hover { background: var(--danger-l); color: var(--danger) } /* Feedback */ .fbrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 6px; position: relative } .fbrow.positivo { border-left: 3px solid var(--accent) } .fbrow.melhoria { border-left: 3px solid var(--warn) } .fbrow.neutro { border-left: 3px solid var(--text3) } .fbtipo { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; margin-top: 2px } .fbt-pos { background: var(--accent-l); color: var(--accent) } .fbt-mel { background: var(--warn-l); color: var(--warn) } .fbt-neu { background: var(--surface); color: var(--text3); border: 1px solid var(--border) } .fbinfo { flex: 1 } .fbtext { font-size: 13px; color: var(--text) } .fbmeta { font-size: 11px; color: var(--text2); margin-top: 3px } .fbdel { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 4px; border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0 } .fbrow:hover .fbdel { opacity: 1 } .fbdel:hover { background: var(--danger-l); color: var(--danger) } .fbedit { position: absolute; top: 7px; right: 29px; width: 18px; height: 18px; border-radius: 4px; border: none; background: transparent; color: var(--text3); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; opacity: 0 } .fbrow:hover .fbedit { opacity: 1 } .fbedit:hover { background: var(--blue-l); color: var(--blue) } /* Histórico resumo */ .hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px } .hcard { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px; text-align: center } .hval { font-size: 19px; font-weight: 700; font-family: var(--m) } .hlbl { font-size: 10px; color: var(--text2); margin-top: 2px } /* Modal */ .mbg { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s } .mbg.open { opacity: 1; pointer-events: all } .modal { background: var(--surface); border-radius: var(--rl); padding: 22px; width: 440px; max-width: 92vw; box-shadow: var(--shl); transform: translateY(8px); transition: transform .2s; max-height: 90vh; overflow-y: auto } .mbg.open .modal { transform: translateY(0) } .mtitle { font-size: 15px; font-weight: 600; margin-bottom: 15px } .mfoot { display: flex; gap: 7px; margin-top: 15px } /* Share modal wide */ .modal.wide { width: 520px } .share-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 12px } .share-box-title { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 8px; display: flex; align-items: center; gap: 5px } .share-step { font-size: 12px; color: var(--text2); margin-bottom: 5px; display: flex; gap: 7px } .alerta { background: var(--danger-l); border: 1px solid #FECACA; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: var(--danger); line-height: 1.6 } .link-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px; text-decoration: none } .link-btn:hover { background: #1e40af } /* Relatórios */ .rg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 22px } .rc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 15px; box-shadow: var(--sh) } .rct { font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 9px; text-transform: uppercase; letter-spacing: .4px } .sr { display: flex; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border) } .sr:last-child { border-bottom: none } .sd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 6px } .sn { font-size: 12px; font-weight: 500; flex: 1 } .bm { flex: 1; height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; margin: 0 7px } .bmf { height: 100%; border-radius: 3px } .vm { font-family: var(--m); font-size: 11px; font-weight: 700; color: var(--text2); min-width: 26px; text-align: right } /* Config */ .cc2b { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 18px; margin-bottom: 14px; box-shadow: var(--sh) } .cct { font-size: 13px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between } .li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 6px; background: var(--surface2) } .lin { flex: 1 } .linn { font-size: 13px; font-weight: 500 } .linm { font-size: 11px; color: var(--text2); margin-top: 1px } /* Toast */ .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--text); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; z-index: 400; opacity: 0; transition: all .25s; pointer-events: none; white-space: nowrap } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0) } .spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block } @keyframes spin { to { transform: rotate(360deg) } } /* Checkbox envio */ .envio-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 10px; background: var(--blue-l); border: 1px solid #BFDBFE; border-radius: 8px; font-size: 12px; color: var(--blue) } .envio-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--blue) } .envio-row label { cursor: pointer; flex: 1 } .no-email { color: var(--text3); font-style: italic } /* ============ RESPONSIVO (mobile/tablet) ============ */ .mobile-menu-btn { display: none; position: fixed; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--sh); align-items: center; justify-content: center; cursor: pointer; z-index: 310; } .sidebar-overlay { display: none; } @media (max-width: 900px) { .shell { display: block; } .mobile-menu-btn { display: flex; } .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 290; opacity: 0; pointer-events: none; transition: opacity .2s; } .sidebar-overlay.open { opacity: 1; pointer-events: all; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 82vw; max-width: 300px; z-index: 300; transform: translateX(-100%); transition: transform .25s; } .sidebar.open { transform: translateX(0); } .main { padding: 70px 16px 24px; } .drawer { width: 100vw; } .stats { grid-template-columns: repeat(2, 1fr); } .rg, .hgrid { grid-template-columns: 1fr; } .fg2-2, .fg2-3 { grid-template-columns: 1fr; } .ph { flex-direction: column; gap: 10px; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }