:root{--bg:#07111d;--panel:#0d1b2a;--line:#1e3850;--text:#ecf7ff;--muted:#90a9bb;--cyan:#37d9d0;--blue:#5694ff}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 75% 10%,#123b50 0,transparent 32%),var(--bg);color:var(--text);font:16px/1.55 system-ui,sans-serif;min-height:100vh}a{color:var(--cyan);text-decoration:none}header,footer,main{width:min(1180px,calc(100% - 40px));margin:auto}header{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;gap:9px;color:var(--text);font-size:21px}.brand em{font-style:normal;color:var(--cyan);font-size:13px;border:1px solid #37d9d055;padding:2px 7px;border-radius:99px}nav{display:flex;align-items:center;gap:20px}nav form,td form{display:inline}.link{background:none;border:0;color:#c3d5e1;font:inherit}.btn{display:inline-flex;border:0;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06111c!important;padding:11px 18px;font-weight:750}.hero{min-height:570px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px}.hero.mini{min-height:240px;display:block;padding-top:65px}.hero h1,h1{font-size:clamp(38px,6vw,72px);line-height:1.04}.hero h1 span{color:transparent;-webkit-text-stroke:1px var(--cyan)}.lead{font-size:20px;color:#b6c9d7;max-width:610px}.orb{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#123d50,#091823 68%);border:1px solid #52e5db55;box-shadow:0 0 80px #37d9d022;position:relative}.orb span{color:var(--muted);font-size:24px}.orb b{font-size:29px}.orb i{position:absolute;right:12%;bottom:19%;background:#173d37;color:#77f9c3;padding:4px 10px;border-radius:20px;font-size:11px}.features,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 70px}.features article,.card{background:#0d1b2add;border:1px solid var(--line);border-radius:13px;padding:25px;box-shadow:0 24px 70px #0007}.features article>b{color:var(--cyan)}.narrow{max-width:580px;margin:60px auto}.form{display:flex;flex-direction:column;gap:15px}.form input,.form select{display:block;width:100%;margin-top:6px;background:#07131e;border:1px solid #29475e;color:var(--text);border-radius:7px;padding:12px;font:inherit}button{background:#152c3e;border:1px solid #31516a;color:var(--text);padding:9px 12px;border-radius:7px;cursor:pointer}.danger{color:#ffadb5}.flash,.token{margin:22px 0;padding:14px 18px;border-radius:8px;background:#173d37;border:1px solid #3b8b72}.bad{background:#3b1820}.token code{display:block;word-break:break-all}.top{margin-top:50px}.top h1{font-size:44px}.grid{grid-template-columns:1fr 1fr}.table{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 9px;border-bottom:1px solid #1c3549;white-space:nowrap}small{display:block;color:var(--muted)}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#06101a;border:1px solid #1d384d;padding:18px;border-radius:8px;color:#a9efe9}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff12;padding:28px 0;margin-top:70px;color:var(--muted);font-size:13px}@media(max-width:780px){header{height:auto;padding:18px 0;align-items:flex-start}nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.hero{grid-template-columns:1fr;min-height:auto;padding:65px 0}.orb{width:min(410px,100%);margin:auto}.features,.grid{grid-template-columns:1fr}.narrow h1,.top h1{font-size:36px}footer{flex-direction:column;gap:15px}}@media(max-width:500px){header,footer,main{width:calc(100% - 24px)}header{display:block}.brand{margin-bottom:13px}nav{justify-content:flex-start;font-size:14px}.hero h1{font-size:44px}.orb b{font-size:23px}}


/* MEINOPENSIM HOST ACTIONS V1 */

/* Hostnamen-Tabelle */
.table {
    width: 100%;
    overflow-x: auto;
}

.table table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    vertical-align: top;
    white-space: normal;
}

.table td:first-child {
    overflow-wrap: anywhere;
    min-width: 190px;
}

/* Aktionsbereich */
.table td:last-child {
    min-width: 290px;
    width: 44%;
}

.table td:last-child form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 12px;
}

.table td:last-child form[action$="/show"],
.table td:last-child form[action$="/token"] {
    padding: 12px;
    background: #102235;
    border: 1px solid #29475e;
    border-radius: 9px;
}

.table td:last-child input[type="password"] {
    flex: 1 1 190px;
    min-width: 0;
    width: 100%;
    padding: 11px 13px;
    background: #07131e;
    border: 1px solid #35536b;
    border-radius: 7px;
    color: var(--text);
    font: inherit;
}

.table td:last-child input[type="password"]:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.table td:last-child button {
    min-height: 42px;
    padding: 10px 16px;
    white-space: normal;
    font-weight: 600;
}

.table td:last-child form[action$="/show"] button {
    background: linear-gradient(135deg,var(--cyan),var(--blue));
    color: #06111c;
    border: 0;
}

.table td:last-child form[action$="/delete"] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.table td:last-child .danger {
    color: #ffadb5;
    border-color: #8c4651;
}

/* Kleine Bildschirme */
@media (max-width: 900px) {
    .table table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        margin-bottom: 18px;
        padding: 15px;
        background: #0d1b2a;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .table th {
        display: none;
    }

    .table td {
        padding: 7px 0;
        border-bottom: 0;
        min-width: 0 !important;
    }

    .table td:first-child {
        font-size: 18px;
    }

    .table td:last-child {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .table td:last-child form {
        flex-direction: column;
        align-items: stretch;
    }

    .table td:last-child input[type="password"] {
        flex: auto;
        width: 100%;
    }

    .table td:last-child button {
        width: 100%;
    }
}