:root {
    --blue-10: #145591;
    --blue-6: #228be6;
    --blue-8: #1971c2;
    --border-size-1: 1px;
    --border-size-2: 2px;
    --border-size-3: 5px;
    --dietpi-dark: #9ccc00;
    --dietpi-light: #c5ff00;
    --dietpi-teal-dark: #1a3237;
    --dietpi-teal-light: #213f45;
    --font-size-4: 1.5rem;
    --font-system-ui: system-ui, sans-serif;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --gray-1: #f1f3f5;
    --gray-10: #16191d;
    --gray-12: #030507;
    --gray-2: #e9ecef;
    --gray-3: #dee2e6;
    --gray-4: #ced4da;
    --gray-6: #868e96;
    --gray-8: #343a40;
    --gray-9: #212529;
    --green-10: #237032;
    --green-6: #40c057;
    --pink-6: #e64980;
    --purple-6: #be4bdb;
    --radius-md: 8px;
    --radius-sm: 6px;
    --radius-xs: 3px;
    --red-10: #b02525;
    --red-6: #fa5252;
    --red-8: #e03131;
    --shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --size-1: .25rem;
    --size-10: 5rem;
    --size-13: 15rem;
    --size-14: 20rem;
    --size-2: .5rem;
    --size-3: 1rem;
    --size-4: 1.25rem;
    --size-6: 1.75rem;
    --size-7: 2rem;
    --size-8: 3rem;
    --size-9: 4rem;
    --yellow-10: #b35c00;
    --yellow-6: #fab005;
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button,
select,
input {
    font: inherit;
}

pre {
    white-space: pre-wrap;
}

dialog {
    margin: auto;
    padding: var(--size-2);
}

body {
    display: grid;
    grid-template-columns: var(--size-13) auto;
    grid-template-rows: var(--size-8) 0 auto var(--size-9);
    grid-template-areas:
        "title head"
        "nav   msgs"
        "nav   main"
        "nav   foot";

    min-height: 100vh;

    font-family: var(--font-system-ui);

    &.nav-closed {
        grid-template-columns: 0 auto;
    }

    &.msgs-open {
        grid-template-rows: var(--size-8) var(--size-10) auto var(--size-9);
    }

    transition: grid-template-columns 500ms, grid-template-rows 500ms;
}

h1 {
    grid-area: title;

    display: grid;
    place-content: center;

    background-color: light-dark(var(--dietpi-dark), var(--dietpi-teal-dark));

    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-4);
    text-wrap: nowrap;
}

header {
    grid-area: head;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: var(--size-2);

    background-color: light-dark(var(--dietpi-light), var(--dietpi-teal-light));
}

.msg-btn {
    position: relative;

    .notifier {
        position: absolute;
        bottom: -3px;
        right: -5px;

        color: var(--red-6);
        animation: scale 2s ease-in-out infinite;
    }
}

@keyframes scale {
    50% { transform: scale(1.5) }
    100% { transform: scale(1) }
}

#msgs {
    grid-area: msgs;

    overflow: hidden;

    background-color: light-dark(var(--gray-3), var(--gray-10));

    > ul {
        padding: var(--size-2);
        line-height: 1.5;

        list-style: none;

        > li {
            border-bottom: var(--gray-6) solid var(--border-size-2);
        }
    }
}

footer {
    grid-area: foot;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: light-dark(var(--gray-3), var(--gray-10));
    border-top: var(--border-size-1) solid var(--gray-6);
}

nav {
    grid-area: nav;

    display: grid;
    grid-template-columns: min-content auto;
    grid-auto-rows: var(--size-8);

    background-color: var(--gray-12);

    overflow-x: hidden;

    &[aria-expanded] {
        width: var(--size-13);
    }

    a {
        grid-column: span 2;

        display: grid;
        grid-template-columns: subgrid;
        align-content: center;

        padding-inline: var(--size-2);
        gap: var(--size-2);

        color: var(--gray-3);
        text-decoration: none;

        font-size: var(--font-size-4);

        &:hover {
            background-color: var(--gray-9);
        }
    }
}

main {
    grid-area: main;

    padding: var(--size-4);
}

button:has(svg) {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

select {
    padding: var(--size-1);

    border-radius: var(--radius-sm);
    border: var(--border-size-1) solid black;
}

section {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    padding: var(--size-2);

    background-color: light-dark(white, black);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    border-top: var(--border-size-3) solid light-dark(var(--gray-3), var(--gray-9));

    > h2 {
        border-bottom: var(--border-size-2) solid light-dark(var(--gray-3), var(--gray-9));

        font-weight: var(--font-weight-medium);
    }
}

table {
    width: 100%;

    border-collapse: collapse;
    border: light-dark(var(--gray-1), var(--gray-8)) solid var(--border-size-2);

    th {
        background-color: light-dark(var(--dietpi-light), var(--dietpi-teal-light));
        height: var(--size-6);
    }

    td {
        border-bottom: var(--gray-6) solid var(--border-size-1);
        padding: var(--size-1);
        height: var(--size-7);
    }

    tr:nth-child(odd) {
        background-color: light-dark(var(--gray-3), var(--gray-9));
    }
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-14), 1fr));
    grid-auto-rows: var(--size-10);
    gap: var(--size-3);
}

.span-2 {
    grid-row: span 2;
}

.span-3 {
    grid-row: span 3;
}

.span-4 {
    grid-row: span 4;
}

.span-5 {
    grid-row: span 5;
}

.span-6 {
    grid-row: span 6;
}

.meter-container {
    height: var(--size-4);

    border: solid var(--border-size-1) light-dark(black, var(--gray-6));
    border-radius: var(--radius-xs);

    >.bar {
        height: 100%;

        transform-origin: left;
        transform: scaleX(var(--scale));

        background: linear-gradient(to right, var(--start), var(--end));
        background-size: calc(100% / var(--scale));
    }

    >.bar.cpu {
        --start: var(--green-6);
        --end: var(--green-10);
    }

    >.bar.ram {
        --start: light-dark(var(--red-6), var(--red-8));
        --end: var(--red-10);
    }

    >.bar.swap {
        --start: light-dark(var(--blue-6), var(--blue-8));
        --end: var(--blue-10);
    }

    >.bar.disk {
        --start: var(--yellow-6);
        --end: var(--yellow-10);
    }
}

.graph {
    line {
        stroke-width: 0.25;
        stroke: gray;
    }

    text {
        font-size: 3pt;

        fill: light-dark(black, white);
        stroke: none;
    }
}

.legend {
    display: flex;
    gap: var(--size-2);
    justify-content: center;

    p {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--size-1);
    }

    .swap {
        color: var(--blue-6);
    }

    .ram {
        color: var(--red-6);
    }

    .sent {
        color: var(--purple-6);
    }

    .recv {
        color: var(--pink-6);
    }
}
.process-table {
    th button {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    .actions-cell {
        display: flex;
        gap: var(--size-2);

        width: 100%;
    }
}
.management-table {
    td:first-child {
        font-weight: var(--font-weight-medium);
    }
}
.tab-container {
    >.tabs {
        border-bottom: var(--border-size-1) solid var(--gray-6);
    }

    >.tabs>button {
        background-color: light-dark(var(--gray-2), var(--gray-10));
        border: var(--border-size-1) solid var(--gray-6);
        border-bottom: none;

        padding: var(--size-1);

        cursor: pointer;

        &[aria-selected="true"] {
            background-color: var(--gray-6);
        }
    }
}

.software-input {
    padding: var(--size-2);

    border-radius: var(--radius-md);
    border: none;

    cursor: pointer;

    &[value="install"] {
        background-color: var(--green-6);
    }

    &[value="uninstall"] {
        background-color: var(--red-6);
    }

    &:disabled {
        opacity: 70%;
    }

    >.spinner {
        display: none;
        animation: spin 1s linear infinite;
    }

    &:disabled>.spinner {
        display: inline-block;
    }
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}
code-editor {
    display: grid;

    > textarea {
        grid-area: 1 / 1;

        resize: none;

        overflow-y: hidden;

        background-color: transparent;
        color: transparent;
        caret-color: light-dark(black, white);
        border: solid var(--gray-4) var(--border-size-1);
    }

    > pre {
        grid-area: 1 / 1;

        pointer-events: none;

        border: solid var(--gray-4) var(--border-size-1);
    }
}

#browser-swap {
    display: grid;
    grid-template-columns: 1fr var(--size-9);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "path    --   "
        "table actions";
    gap: var(--size-4);
}

#browser-inner {
    grid-area: table;
    align-self: start;
}

table#browser-inner tr {
    user-select: none;

    button {
        text-align: start;

        width: 100%;
        height: 100%;
    }

    &[aria-current="true"] {
        background-color: light-dark(var(--dietpi-dark), var(--dietpi-teal-dark));
    }
}

#path-display {
    grid-area: path;

    display: flex;
    align-items: center;
    gap: var(--size-1);

    padding-inline: var(--size-2);

    background-color: light-dark(var(--gray-4), var(--gray-8));

    button, span {
        padding: var(--size-1);

        background-color: transparent;
    }
}

#actions-list {
    grid-area: actions;

    display: flex;
    flex-direction: column;
    gap: var(--size-2);

    padding: var(--size-1);

    background-color: light-dark(var(--gray-4), var(--gray-8));
}
.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:0}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm .xterm-cursor-pointer,.xterm.xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) ::selection{color:transparent}.xterm .xterm-accessibility-tree{user-select:text;white-space:pre}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}