/* InternSwarm control-plane portal — design system. * Self-hosted (CSP style-src 'self'); no inline styles. Light/dark via * [data-theme] on , rendered server-side from the iswarm_theme cookie. */ :root { --bg: #0e0f13; --bg-elev: #16171d; --bg-elev-2: #1c1e26; --sidebar: #121319; --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.12); --text: #e8e9ee; --text-muted: #9096a3; --text-faint: #61667a; --brand: #8f70f3; --brand-strong: #6b3de0; --brand-soft: rgba(143,112,243,.14); --green: #47df75; --green-soft: rgba(71,223,117,.14); --yellow: #ffbf1f; --yellow-soft: rgba(255,191,31,.14); --rose: #fb7185; --rose-soft: rgba(251,113,133,.14); --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } :root[data-theme="light"] { --bg: #f6f7f9; --bg-elev: #ffffff; --bg-elev-2: #f0f1f4; --sidebar: #ffffff; --line: rgba(15,17,25,.09); --line-strong: rgba(15,17,25,.16); --text: #1a1c24; --text-muted: #5b6070; --text-faint: #8a90a0; --brand-soft: rgba(143,112,243,.12); --green: #1f9d4d; --green-soft: rgba(31,157,77,.13); --yellow: #b57d00; --yellow-soft: rgba(214,150,0,.15); --rose: #d63c5a; --rose-soft: rgba(214,60,90,.11); --shadow: 0 1px 2px rgba(15,17,25,.06), 0 8px 24px rgba(15,17,25,.06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; } .brand .logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(160deg, #22232c, #17181d); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; } :root[data-theme="light"] .brand .logo { background: linear-gradient(160deg, #f3f0ff, #e9e4fb); } .brand .name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; } .brand .name span { color: var(--brand); } .ws-switch { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev); } .ws-avatar { width: 26px; height: 26px; border-radius: 7px; flex: none; background: linear-gradient(140deg, var(--brand), var(--brand-strong)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; } .ws-meta { flex: 1; min-width: 0; } .ws-meta .t { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-meta .s { color: var(--text-faint); font-size: 11px; } .chev { color: var(--text-faint); flex: none; } .nav-label { color: var(--text-faint); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 12px 10px 6px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; margin-bottom: 1px; } .nav a:hover { background: var(--bg-elev); color: var(--text); } .nav a.active { background: var(--brand-soft); color: var(--text); } .nav a.active svg { color: var(--brand); } .nav a svg { width: 17px; height: 17px; flex: none; color: var(--text-faint); } .nav a .badge { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--bg-elev-2); color: var(--text-muted); padding: 1px 7px; border-radius: 20px; } .side-foot { margin-top: auto; padding-top: 12px; } .user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg-elev); } .user-card:hover { border-color: var(--line-strong); } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(140deg,#3a3d4d,#25272f); display: grid; place-items: center; font-weight: 650; font-size: 12px; color: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); } .user-card .u { flex: 1; min-width: 0; } .user-card .u .t { font-weight: 600; font-size: 13px; } .user-card .u .s { color: var(--text-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Main / topbar ---------- */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); z-index: 5; } .crumb { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 13px; } .crumb b { color: var(--text); font-weight: 600; } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .icon-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-muted); cursor: pointer; position: relative; } .icon-btn:hover { border-color: var(--line-strong); color: var(--text); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } :root[data-theme="light"] .theme-toggle .sun { display: block; } :root[data-theme="light"] .theme-toggle .moon { display: none; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid transparent; font-family: var(--font); } .btn.primary { background: linear-gradient(160deg, var(--brand), var(--brand-strong)); color: #fff; box-shadow: 0 2px 10px rgba(107,61,224,.35); } .btn.primary:hover { filter: brightness(1.06); } .btn.ghost { border-color: var(--line-strong); background: var(--bg-elev); color: var(--text); } .btn.ghost:hover { background: var(--bg-elev-2); } .btn.danger { border-color: var(--rose); color: var(--rose); background: transparent; } .btn.danger:hover { background: var(--rose-soft); } .btn svg { width: 15px; height: 15px; } .content { padding: 26px 28px 40px; max-width: 1180px; width: 100%; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 22px; font-weight: 680; letter-spacing: -.02em; margin: 0 0 4px; } .page-head p { color: var(--text-muted); margin: 0; font-size: 13.5px; } /* ---------- Cards & metrics ---------- */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } .metric { padding: 16px; } .metric .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .metric .label { color: var(--text-muted); font-size: 12.5px; font-weight: 550; } .metric .m-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; } .metric .m-ico.brand { background: var(--brand-soft); color: var(--brand); } .metric .m-ico.green { background: var(--green-soft); color: var(--green); } .metric .m-ico.yellow { background: var(--yellow-soft); color: var(--yellow); } .metric .val { font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .metric .val.sm { font-size: 15px; font-weight: 650; } .metric .val.endpoint { font-size: 13px; font-weight: 600; font-family: var(--mono); line-height: 1.4; overflow-wrap: anywhere; } .metric .val .of { font-size: 15px; color: var(--text-faint); font-weight: 600; } .metric .sub { font-size: 12px; color: var(--text-faint); margin-top: 3px; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; } .pill .led { width: 7px; height: 7px; border-radius: 50%; } .pill.green { background: var(--green-soft); color: var(--green); } .pill.yellow { background: var(--yellow-soft); color: var(--yellow); } .pill.brand { background: var(--brand-soft); color: var(--brand); } .pill.rose { background: var(--rose-soft); color: var(--rose); } .pill.muted { background: var(--bg-elev-2); color: var(--text-muted); } .pill.green .led { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .pill.yellow .led { background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); } .pill.muted .led { background: var(--text-faint); } .pill.rose .led { background: var(--rose); } /* A revoked device stays listed so the action has a visible result, but it is history rather than inventory — dimmed, and with no controls left to press. */ tr.revoked { opacity: .55; } .grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; } .rail { display: flex; flex-direction: column; gap: 16px; } .section-gap { height: 16px; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); gap: 12px; } .panel-head h2 { font-size: 14.5px; font-weight: 650; margin: 0; } .panel-head .link { color: var(--brand); font-size: 12.5px; font-weight: 600; } .panel-head .meta { color: var(--text-faint); font-size: 12.5px; font-family: var(--mono); } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; } thead th { text-align: left; color: var(--text-faint); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 10px 18px; } tbody td { padding: 13px 18px; border-top: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; } tbody tr:hover { background: var(--bg-elev-2); } td.right { text-align: right; } .dev { display: flex; align-items: center; gap: 11px; } .dev .d-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-elev-2); display: grid; place-items: center; color: var(--text-muted); flex: none; } .dev .d-name { font-weight: 600; } .dev .d-host { color: var(--text-faint); font-size: 12px; } td.mono, .mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); } .link-danger { color: var(--rose); font-weight: 600; cursor: pointer; font-size: 13px; background: none; border: 0; font-family: var(--font); padding: 0; } .link-danger:hover { text-decoration: underline; } .link-btn { color: var(--brand); font-weight: 600; cursor: pointer; font-size: 13px; background: none; border: 0; font-family: var(--font); padding: 0; } .link-btn:hover { text-decoration: underline; } .empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; } /* ---------- Forms ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .input { width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font-family: var(--font); font-size: 13.5px; outline: none; } .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } select.input { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239096a3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer; } .role-select { width: auto; min-width: 118px; padding: 6px 28px 6px 10px; font-size: 13px; } /* ---------- Billing ---------- */ .body-pad { padding: 18px; } .bill-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); } .bill-row:first-of-type { border-top: 0; } .bill-row .k { color: var(--text-muted); font-size: 13px; } .bill-row .v { font-weight: 600; font-size: 13px; } .trial-bar { height: 6px; border-radius: 20px; background: var(--bg-elev-2); overflow: hidden; margin: 14px 0 6px; } .trial-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), #ffd76b); border-radius: 20px; } .hint { font-size: 12px; color: var(--text-faint); } .checklist { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; font-size: 12.5px; color: var(--text-faint); } .checklist span { display: flex; align-items: center; gap: 8px; } .note-card { display: flex; gap: 11px; } .note-card svg { flex: none; margin-top: 1px; } .note-card .n-text { font-size: 12.5px; color: var(--text-muted); } /* ---------- Quick actions / activity ---------- */ .qa { display: flex; flex-direction: column; padding: 8px; } .qa a { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: var(--radius-sm); color: var(--text); } .qa a:hover { background: var(--bg-elev-2); } .qa .qa-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; } .qa .qa-t { font-weight: 600; font-size: 13px; } .qa .qa-s { color: var(--text-faint); font-size: 11.5px; } .activity { padding: 8px 18px 14px; } .act { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); } .act:first-child { border-top: 0; } .act .a-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; } .act .a-dot.brand { background: var(--brand); } .act .a-dot.green { background: var(--green); } .act .a-dot.yellow { background: var(--yellow); } .act .a-dot.rose { background: var(--rose); } .act .a-t { font-size: 13px; } .act .a-t b { font-weight: 600; } .act .a-time { color: var(--text-faint); font-size: 11.5px; margin-top: 2px; } /* ---------- Settings ---------- */ .set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding: 18px; border-top: 1px solid var(--line); } .set-row:first-of-type { border-top: 0; } .set-row .s-info { max-width: 440px; } .set-row .s-info h3 { margin: 0 0 4px; font-size: 14px; font-weight: 650; } .set-row .s-info p { margin: 0; color: var(--text-muted); font-size: 13px; } .set-row .s-control { flex: none; min-width: 240px; } .danger-card { border-color: var(--rose-soft); } .danger-card .panel-head h2 { color: var(--rose); } .mt-10 { margin-top: 10px; } .mb-16 { margin-bottom: 16px; } .w-full { width: 100%; justify-content: center; } .cap { text-transform: capitalize; } /* ---------- Auth (login / device approval) ---------- */ .auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .auth-top { position: fixed; top: 18px; right: 18px; } .auth-card { width: 100%; max-width: 400px; } .auth-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 24px; } .auth-logo .logo { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(160deg, #22232c, #17181d); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); } :root[data-theme="light"] .auth-logo .logo { background: linear-gradient(160deg, #f3f0ff, #e9e4fb); } .auth-card h1 { font-size: 20px; font-weight: 680; text-align: center; margin: 0 0 4px; letter-spacing: -.01em; } .auth-card .lede { text-align: center; color: var(--text-muted); font-size: 13.5px; margin: 0 0 22px; } .auth-box { padding: 22px; } .oauth { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; margin-bottom: 10px; font-family: var(--font); text-decoration: none; } .oauth:hover { background: var(--bg-elev-2); } .divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; margin: 18px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .fine { text-align: center; color: var(--text-faint); font-size: 11.5px; margin-top: 18px; line-height: 1.6; } .fine a { color: var(--brand); } .banner { border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 18px; } .banner.error { border: 1px solid var(--rose); background: var(--rose-soft); color: var(--rose); } .code-box { display: flex; justify-content: center; gap: 10px; margin: 6px 0 20px; } .code-box span { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: .08em; padding: 12px 16px; border-radius: 12px; background: var(--bg-elev-2); border: 1px solid var(--line); } .approve-meta { padding: 14px 16px; border-radius: 12px; background: var(--bg-elev-2); margin-bottom: 20px; } .approve-meta .ar { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; } .approve-meta .ar .k { color: var(--text-muted); } .approve-actions { display: flex; gap: 10px; } .approve-actions .btn, .approve-actions form { flex: 1; } .approve-actions form .btn { width: 100%; justify-content: center; } @media (max-width: 1080px) { .metrics { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .app { grid-template-columns: 1fr; } .sidebar { display: none; } .metrics { grid-template-columns: 1fr; } .set-row { flex-direction: column; gap: 14px; } .set-row .s-control { min-width: 0; width: 100%; } }