:root { font-family: Inter, system-ui, sans-serif; color: #182235; background: #f4f7fb; } * { box-sizing: border-box; } body { margin: 0; } header { background: #182235; } .nav { max-width: 980px; margin: auto; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; } .brand, .nav a { color: white; text-decoration: none; } .brand { font-weight: 700; } .nav-links { display: flex; gap: 1.2rem; align-items: center; } .container { max-width: 980px; margin: 2.5rem auto; padding: 0 1.5rem; } h1 { font-size: 2rem; margin: .2rem 0 .7rem; } h2 { margin-top: 0; } .hero { padding: 2rem 0; } .eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: #466adb; } .card, .login-card { background: white; border: 1px solid #dbe2ef; border-radius: 12px; padding: 1.5rem; margin: 1.25rem 0; box-shadow: 0 4px 16px #2534510d; } .login-card { max-width: 440px; margin: 4rem auto; } .form { display: grid; gap: .55rem; } .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } .full-width { grid-column: 1 / -1; } input { border: 1px solid #aeb9cc; border-radius: 6px; font: inherit; padding: .65rem .75rem; width: 100%; } .button { display: inline-block; background: #3156c9; color: white; border: 0; border-radius: 6px; padding: .65rem 1rem; font: inherit; cursor: pointer; text-decoration: none; } .button.secondary { background: #e9eefc; color: #233e98; margin-left: .5rem; } .danger-button { background: #af2735; margin-left: .5rem; } .link-button { border: 0; background: none; color: #3156c9; cursor: pointer; padding: 0; font: inherit; } .nav .link-button { color: white; } .danger { color: #af2735; } .inline-form { display: flex; gap: .75rem; } .inline-form input { flex: 1; } .inline { display: inline; margin-left: .7rem; } .subscription-list, .proxy-list { padding: 0; list-style: none; } .subscription-list li { border-top: 1px solid #e5eaf3; padding: .8rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .proxy-list { max-height: 360px; overflow: auto; border: 1px solid #e0e6f0; border-radius: 6px; padding: .5rem; margin-bottom: 1rem; } .proxy-list label, .proxy-list li { display: block; padding: .4rem; overflow-wrap: anywhere; } .proxy-list input { width: auto; } .saved small { display: block; color: #62708a; margin: .2rem 0 0; } .table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { border-bottom: 1px solid #e5eaf3; padding: .7rem; text-align: left; vertical-align: top; } .status { border-radius: 999px; display: inline-block; font-size: .8rem; font-weight: 700; padding: .2rem .55rem; } .status.enabled { background: #e4f7ea; color: #176634; } .status.disabled { background: #ffeaed; color: #a61e2c; } .notice { padding: .85rem 1rem; border-radius: 6px; margin-bottom: 1rem; } .success { background: #e4f7ea; color: #176634; } .error, .validation { color: #a61e2c; } .error { background: #ffeaed; } .empty, .lede { color: #59677d; } code { overflow-wrap: anywhere; } @media (max-width: 620px) { .nav, .subscription-list li { align-items: flex-start; flex-direction: column; } .inline-form, .two-column { display: flex; flex-direction: column; } .danger-button, .button.secondary { margin: .5rem 0 0; } }