/* Painel da VPS: complementos do app.css (o mesmo da tela local). */
a.brand { text-decoration: none; color: inherit; }
.sitegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
a.sitecard { color: inherit; text-decoration: none; transition: border-color .15s; }
a.sitecard:hover, a.sitecard:focus-visible { border-color: var(--accent); }
.sitecard h2 { margin: 0; font-size: 16px; }
.sitenums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.sitenums div { display: flex; flex-direction: column; gap: 2px; }
.sitenums b { font-size: 18px; font-weight: 500; }
.chnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chnav .mono { min-width: 150px; text-align: center; }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.totals div { display: flex; flex-direction: column; gap: 2px; }
.sw.max { background: var(--accent); opacity: .4; }
.sw.gen { background: var(--info); }
.sw.exp-gen { background: var(--accent); height: 8px; }
svg .barg { cursor: pointer; }
svg .barg:hover rect { opacity: .8; }
.checks { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card2); }
.checks label, label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checks input, label.check input { min-height: 0; width: 18px; height: 18px; }
.events { margin: 0; padding: 0; list-style: none; max-height: 420px; overflow: auto; }
.outblock { display: flex; flex-direction: column; gap: 8px; }
.outblock h3 { margin: 0; font-size: 14px; font-weight: 600; }
.outblock pre.log { user-select: all; }
.subnav { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.subnav a { padding: 8px 14px; border-radius: 6px; color: var(--text2); text-decoration: none; font-size: 14px; }
.subnav a[aria-current="page"] { background: var(--sel); color: var(--text); font-weight: 600; }
.modchips { display: flex; flex-wrap: wrap; gap: 6px; }
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.invtile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--card2); border-left: 4px solid var(--ok); }
.invtile b { font-size: 12px; color: var(--muted); } .invtile .mono { font-size: 18px; color: var(--text); } .invtile small { color: var(--muted); font-size: 11px; }
.invtile.warn { border-left-color: var(--warn); } .invtile.crit { border-left-color: var(--crit); background: var(--crit-bg); } .invtile.mute { border-left-color: var(--dim); opacity: .7; }
fieldset.mods { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; }
fieldset.mods legend { padding: 0 6px; font-weight: 600; color: var(--text); }
.subopts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-left: 28px; color: var(--text2); }
.subopts select { min-height: 34px; }
#ciForm .acts { display: flex; gap: 8px; }
.epres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 14px 20px; }
.epbox { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card2); font-size: 13px; color: var(--text2); }
.epbox b { font-size: 22px; font-weight: 600; color: var(--text); }