:root { --bg: #f4f7f7; --card: #fff; --ink: #14272a; --soft: #5b6f72; --line: #d8e2e2; --river: #0b6b6f; --river-deep: #085558; --wash: #e3f1f1; --gold: #b86e00; --gold-wash: #fff2d9; --red: #b3261e; --red-wash: #fde7e5; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f1b1d; --card: #172628; --ink: #e8f1f1; --soft: #9bb0b3; --line: #2a3d40; --river: #4fc3c8; --river-deep: #7ad6da; --wash: #1d3638; --gold: #f0b252; --gold-wash: #3a2d12; --red: #ff8a80; --red-wash: #3d1d1b; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
#app { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: 1.5rem; margin: 0; } h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
button, input, select { font: inherit; color: inherit; }
button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card); font-weight: 600; cursor: pointer; }
button:hover { background: var(--wash); } button:disabled { opacity: .55; cursor: default; }
button.danger { color: var(--red); } button.link { border: 0; background: none; color: var(--river); text-decoration: underline; min-height: 2.5rem; padding: 0 .25rem; }
input, select { min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--card); max-width: 100%; }
input:focus, select:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--river) 40%, transparent); outline-offset: 1px; }
.signin { margin-top: 18vh; text-align: center; display: grid; gap: .75rem; justify-items: center; }
.signin button { background: var(--river); color: #fff; border: 0; min-width: 14rem; } .signin button:hover { background: var(--river-deep); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0 1rem; }
.who, .hint, .seen, .empty { color: var(--soft); margin: .15rem 0; font-size: .9rem; }
.notice { min-height: 1.5rem; margin: 0 0 .5rem; font-weight: 600; } .notice.ok { color: var(--river); } .notice.error { color: var(--red); }
.tools { margin-bottom: .75rem; } .tools input { width: 100%; }
.customers { display: grid; gap: .75rem; }
.customer { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: .85rem 1rem; }
.top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.email { font-weight: 700; overflow-wrap: anywhere; } .detail { margin: .25rem 0 0; }
.badge { padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.badge.trial { background: var(--gold-wash); color: var(--gold); } .badge.active { background: var(--wash); color: var(--river-deep); } .badge.expired { background: var(--red-wash); color: var(--red); }
.manage { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); display: grid; gap: .9rem; }
.group { display: grid; gap: .4rem; } .row { display: flex; gap: .5rem; align-items: center; } .row.wrap { flex-wrap: wrap; }
.row input[type=number] { width: 7rem; } .row input[type=date] { flex: 1; min-width: 9rem; }
.add { margin-top: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
.add input[type=email] { flex: 1; min-width: 12rem; } .add input[name=newValue] { width: 9rem; }
.blocked { margin-top: 2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); display: grid; gap: .75rem; justify-items: start; }
@media (max-width: 30rem) { .row.wrap > *, .add .row > * { flex: 1 1 100%; } }
.history ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; } .history li { font-size: .9rem; overflow-wrap: anywhere; border-top: 1px solid var(--line); padding-top: .4rem; }