:root {

```
--background: #e7e1d5;

--surface: #f4f0e7;
--surface-dark: #ddd6c8;

--text: #303229;
--muted: #77786f;

--green: #596a4f;
--green-dark: #485740;

--brown: #90745a;
--brown-dark: #755d48;

--border: rgba(48, 50, 41, 0.08);

--shadow:
    0 12px 35px rgba(55, 48, 37, 0.08);

--radius: 24px;
```

}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {

```
margin: 0;

min-height: 100vh;

background:
    radial-gradient(
        circle at 10% 0%,
        rgba(255,255,255,0.55),
        transparent 35%
    ),
    var(--background);

color: var(--text);

font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

-webkit-font-smoothing: antialiased;
```

}

/* ------------------------------------------------ */
/* Layout */
/* ------------------------------------------------ */

.dashboard {

```
width: min(
    1200px,
    calc(100% - 48px)
);

margin: 0 auto;

padding:
    65px
    0
    35px;
```

}

/* ------------------------------------------------ */
/* Header */
/* ------------------------------------------------ */

.header {

```
display: flex;

justify-content: space-between;

align-items: flex-start;

margin-bottom: 38px;
```

}

.eyebrow {

```
margin: 0 0 9px;

color: var(--muted);

font-size: 0.7rem;

font-weight: 700;

letter-spacing: 0.18em;
```

}

h1 {

```
margin: 0;

font-size:
    clamp(
        3rem,
        7vw,
        5.2rem
    );

line-height: 0.92;

letter-spacing: -0.055em;
```

}

.subtitle {

```
margin: 17px 0 0;

color: var(--muted);

font-size: 1.05rem;
```

}

.connection-status {

```
display: flex;

align-items: center;

gap: 9px;

margin-top: 9px;

padding:
    9px
    14px;

border-radius: 999px;

background:
    rgba(255,255,255,0.4);

color: var(--muted);

font-size: 0.82rem;

border: 1px solid var(--border);
```

}

/* ------------------------------------------------ */
/* Status dots */
/* ------------------------------------------------ */

.status-dot {

```
width: 8px;

height: 8px;

display: inline-block;

border-radius: 50%;

background: #71885f;

box-shadow:
    0 0 0 4px
    rgba(113,136,95,0.13);
```

}

/* ------------------------------------------------ */
/* Main grid */
/* ------------------------------------------------ */

.dashboard-grid {

```
display: grid;

grid-template-columns:
    minmax(0, 1fr)
    340px;

gap: 22px;

align-items: start;
```

}

/* ------------------------------------------------ */
/* Applications */
/* ------------------------------------------------ */

.applications {

```
display: grid;

grid-template-columns:
    repeat(2, minmax(0, 1fr));

gap: 18px;
```

}

/* ------------------------------------------------ */
/* Application cards */
/* ------------------------------------------------ */

.app-card {

```
position: relative;

min-height: 310px;

padding: 27px;

border-radius: var(--radius);

display: flex;

flex-direction: column;

justify-content: space-between;

text-decoration: none;

overflow: hidden;

box-shadow: var(--shadow);

transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
```

}

.app-card:hover {

```
transform:
    translateY(-4px);

box-shadow:
    0 18px 45px
    rgba(55,48,37,0.14);
```

}

.app-card:active {

```
transform:
    translateY(-1px);
```

}

/* ------------------------------------------------ */
/* Jellyfin */
/* ------------------------------------------------ */

.jellyfin {

```
color: #f8f6ef;

background: var(--green);
```

}

.jellyfin:hover {

```
background:
    var(--green-dark);
```

}

/* ------------------------------------------------ */
/* Immich */
/* ------------------------------------------------ */

.immich {

```
color: #fbf7ef;

background: var(--brown);
```

}

.immich:hover {

```
background:
    var(--brown-dark);
```

}

/* ------------------------------------------------ */
/* Placeholder */
/* ------------------------------------------------ */

.placeholder {

```
background:
    rgba(244,240,231,0.7);

border:
    1px solid var(--border);

box-shadow: none;

color: var(--text);

min-height: 210px;
```

}

.placeholder:hover {

```
box-shadow:
    var(--shadow);
```

}

/* ------------------------------------------------ */
/* Application top */
/* ------------------------------------------------ */

.app-top {

```
display: flex;

justify-content: space-between;

align-items: flex-start;
```

}

.app-icon {

```
width: 52px;

height: 52px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 16px;

background:
    rgba(255,255,255,0.14);

font-size: 1.35rem;

font-weight: 500;
```

}

.open-icon {

```
font-size: 1.5rem;

opacity: 0.6;

transition:
    transform 180ms ease,
    opacity 180ms ease;
```

}

.app-card:hover .open-icon {

```
opacity: 1;

transform:
    translate(
        3px,
        -3px
    );
```

}

/* ------------------------------------------------ */
/* Application text */
/* ------------------------------------------------ */

.app-info {

```
margin-top: 25px;
```

}

.app-category {

```
display: block;

margin-bottom: 8px;

font-size: 0.67rem;

font-weight: 700;

letter-spacing: 0.16em;

opacity: 0.65;
```

}

.app-info h2 {

```
margin: 0;

font-size: 2rem;

line-height: 1;

letter-spacing: -0.04em;
```

}

.app-info p {

```
margin:
    9px
    0
    0;

font-size: 0.94rem;

opacity: 0.72;
```

}

/* ------------------------------------------------ */
/* App statistics */
/* ------------------------------------------------ */

.app-stats {

```
display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 8px;

margin-top: 24px;
```

}

.app-stats > div {

```
padding:
    11px
    10px;

border-radius: 12px;

background:
    rgba(255,255,255,0.10);
```

}

.app-stats strong {

```
display: block;

font-size: 1.05rem;

font-weight: 600;
```

}

.app-stats span {

```
display: block;

margin-top: 2px;

font-size: 0.66rem;

opacity: 0.65;
```

}

/* ------------------------------------------------ */
/* Server card */
/* ------------------------------------------------ */

.server-card {

```
padding: 27px;

border-radius: var(--radius);

background:
    rgba(244,240,231,0.76);

border:
    1px solid var(--border);

box-shadow: var(--shadow);

backdrop-filter: blur(8px);
```

}

.server-header {

```
display: flex;

justify-content: space-between;

align-items: flex-start;

gap: 15px;

padding-bottom: 23px;

border-bottom:
    1px solid var(--border);
```

}

.server-header h2 {

```
margin: 0;

font-size: 1.35rem;

letter-spacing: -0.025em;
```

}

.server-status {

```
display: flex;

align-items: center;

gap: 8px;

font-size: 0.75rem;

color: var(--muted);

white-space: nowrap;
```

}

/* ------------------------------------------------ */
/* Metrics */
/* ------------------------------------------------ */

.metrics {

```
display: flex;

flex-direction: column;

gap: 22px;

padding:
    25px
    0;
```

}

.metric-header {

```
display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 9px;

font-size: 0.8rem;

color: var(--muted);
```

}

.metric-header strong {

```
color: var(--text);

font-size: 0.85rem;
```

}

.progress {

```
height: 7px;

overflow: hidden;

border-radius: 999px;

background:
    rgba(48,50,41,0.08);
```

}

.progress-fill {

```
height: 100%;

border-radius: inherit;

background:
    var(--green);

transition:
    width 500ms ease;
```

}

/* ------------------------------------------------ */
/* Server details */
/* ------------------------------------------------ */

.server-details {

```
display: grid;

grid-template-columns:
    1fr
    1fr;

gap: 10px;

padding-top: 22px;

border-top:
    1px solid var(--border);
```

}

.server-details > div {

```
padding:
    14px;

border-radius: 14px;

background:
    rgba(255,255,255,0.3);
```

}

.server-details span {

```
display: block;

color: var(--muted);

font-size: 0.67rem;
```

}

.server-details strong {

```
display: block;

margin-top: 5px;

font-size: 0.9rem;

font-weight: 600;
```

}

/* ------------------------------------------------ */
/* Server footer */
/* ------------------------------------------------ */

.server-footer {

```
display: flex;

align-items: center;

gap: 9px;

margin-top: 20px;

color: var(--muted);

font-size: 0.72rem;
```

}

/* ------------------------------------------------ */
/* Footer */
/* ------------------------------------------------ */

footer {

```
display: flex;

gap: 8px;

margin-top: 35px;

color: var(--muted);

font-size: 0.72rem;
```

}

/* ------------------------------------------------ */
/* Focus */
/* ------------------------------------------------ */

.app-card:focus-visible {

```
outline:
    3px solid
    rgba(48,50,41,0.4);

outline-offset: 4px;
```

}

/* ------------------------------------------------ */
/* Tablet */
/* ------------------------------------------------ */

@media (max-width: 950px) {

```
.dashboard-grid {

    grid-template-columns: 1fr;
}


.server-card {

    order: -1;
}


.applications {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}
```

}

/* ------------------------------------------------ */
/* Mobile */
/* ------------------------------------------------ */

@media (max-width: 650px) {

```
.dashboard {

    width:
        calc(100% - 28px);

    padding-top: 40px;
}


.header {

    margin-bottom: 28px;
}


h1 {

    font-size: 3.5rem;
}


.connection-status {

    margin-top: 3px;

    padding:
        7px
        10px;
}


.applications {

    grid-template-columns: 1fr;

    gap: 15px;
}


.app-card {

    min-height: 270px;

    padding: 23px;
}


.server-card {

    padding: 23px;
}


.server-header {

    padding-bottom: 20px;
}
```

}

/* ------------------------------------------------ */
/* Small phones */
/* ------------------------------------------------ */

@media (max-width: 400px) {

```
.dashboard {

    width:
        calc(100% - 20px);

    padding-top: 30px;
}


h1 {

    font-size: 3rem;
}


.subtitle {

    font-size: 0.95rem;
}


.app-stats {

    gap: 6px;
}


.app-stats > div {

    padding:
        9px 7px;
}
```

}