[v-cloak] { display: none; }

:root {
    --bg-main:   #0f0f10;
    --bg-card:   #1a1a1e;
    --bg-input:  #252529;
    --text-pri:  #e8e8f0;
    --text-sec:  #9090a0;
    --primary:   #bb86fc;
    --secondary: #03dac6;
    --danger:    #cf6679;
    --warning:   #f2c94c;
    --info:      #46b7fc;
    --success:   #6fcf97;
    --fatal:     #b00020;
    --radius:    10px;
    --shadow:    0 4px 20px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-pri);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ── Header ── */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(26,26,30,.95);
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #2a2a30;
}
.header-brand    { display: flex; align-items: center; gap: 10px; }
.header-icon     { font-size: 1.4rem; }
.header-title    { font-size: 1.1rem; font-weight: 700; letter-spacing: .5px; color: var(--primary); }

/* ── Login ── */
.login-container {
    display: flex; justify-content: center; align-items: center;
    min-height: calc(100vh - 60px); padding: 20px;
}
.login-card { max-width: 380px; text-align: center; }
.login-logo { font-size: 3.5rem; margin-bottom: 10px; line-height: 1; }
.login-subtitle { color: var(--text-sec); font-size: .9rem; margin-bottom: 20px; }

/* ── Loading ── */
.loading-screen { display:flex; justify-content:center; align-items:center; height:calc(100vh - 60px); }
.spinner {
    width: 40px; height: 40px;
    border: 4px solid #333;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cards ── */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid #2a2a30;
    width: 100%;
}
.card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .5px; }

/* ── Dashboard ── */
.dashboard { padding: 20px; max-width: 1000px; margin: 0 auto; }
.grid-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .grid-layout { grid-template-columns: 1fr 1.5fr; } }

/* ── Forms ── */
.form-group { display: flex; flex-direction: column; gap: 12px; }
.input-group { display: flex; gap: 8px; margin-bottom: 10px; }
.input-group input { flex: 1; min-width: 0; }

input {
    background: var(--bg-input);
    color: var(--text-pri);
    border: 1px solid #383840;
    border-radius: var(--radius);
    padding: 11px 14px;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(187,134,252,.15); }
input::placeholder { color: var(--text-sec); }

/* ── Buttons ── */
button {
    border: none; border-radius: var(--radius);
    padding: 11px 16px;
    font-size: .9rem; font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s, filter .15s;
    white-space: nowrap;
    color: #000;
}
button:hover:not(:disabled)   { filter: brightness(1.12); }
button:active:not(:disabled)  { transform: scale(.97); }
button:disabled               { opacity: .45; cursor: not-allowed; }

.btn-primary  { background: var(--primary); }
.btn-danger   { background: var(--danger);  }
.btn-warning  { background: var(--warning); }
.btn-info     { background: var(--info);    }
.btn-success  { background: var(--success); }
.btn-fatal    { background: var(--fatal); color: #fff; }
.btn-outline-danger {
    background: transparent; border: 1px solid var(--danger);
    color: var(--danger); padding: 8px 14px;
}
.btn-outline {
    background: transparent; border: 1px solid #444;
    color: #aaa; padding: 6px 12px; font-size: .8rem; font-weight: 500;
}

.btn-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.error-msg { color: var(--danger); font-size: .85rem; text-align: center; }

/* ── Log Console ── */
.log-console { display: flex; flex-direction: column; height: 340px; }
.log-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.log-window  {
    background: #090909; flex: 1; border-radius: 6px;
    padding: 10px; overflow-y: auto;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: .82rem; border: 1px solid #222; line-height: 1.5;
}
.log-line    { margin-bottom: 3px; word-break: break-all; }
.log-tx      { color: var(--success); }
.log-rx      { color: var(--info);    }
.log-sys     { color: var(--warning); }
.log-err     { color: var(--danger);  }
.log-empty   { color: #444; text-align: center; margin-top: 20px; font-style: italic; }

/* ── Devices Table ── */
.devices-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.devices-table th, .devices-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #272730; }
.devices-table th { color: var(--primary); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }
.devices-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── Modal ── */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,.65);
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.modal-box {
    background: var(--bg-card);
    border: 1px solid #333;
    border-radius: 14px;
    padding: 30px 28px;
    max-width: 420px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    text-align: center;
}
.modal-icon  { font-size: 2.8rem; margin-bottom: 12px; line-height: 1; }
.modal-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.modal-message {
    color: var(--text-sec); font-size: .92rem;
    white-space: pre-line; margin-bottom: 24px; line-height: 1.6;
}
.modal-actions { display: flex; gap: 12px; justify-content: center; }
.modal-actions button { min-width: 100px; }

/* ── Fade transition ── */
.fade-enter-active, .fade-leave-active { transition: opacity .18s ease; }
.fade-enter-from, .fade-leave-to       { opacity: 0; }