Something went wrong. Try again.
PDS software with bells & whistles you didn’t even know you needed. will move this to its own account when ready.
Something went wrong. Try again.
8.9 kB · 496 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497@import "./tokens.css";
@property --accent { syntax: "<color>"; inherits: true; initial-value: #1a1d1d;}
@property --secondary { syntax: "<color>"; inherits: true; initial-value: #1a1d1d;}
*,*::before,*::after { box-sizing: border-box;}
body { margin: 0; font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease; overflow-wrap: anywhere; word-break: break-word;}
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--leading-tight);}
h1 { font-size: var(--text-2xl);}h2 { font-size: var(--text-xl);}h3 { font-size: var(--text-lg);}h4 { font-size: var(--text-base);}
p { margin: 0;}
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px;}
a:hover { color: var(--accent-hover);}
::selection { background: var(--secondary-muted);}
input,select,textarea { font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal); padding: var(--space-4); border: 1px solid var(--border-dark); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); width: 100%;}
input:focus,select:focus,textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);}
input:disabled,select:disabled,textarea:disabled { background: var(--bg-input-disabled); color: var(--text-muted); cursor: not-allowed;}
input::placeholder,textarea::placeholder { color: var(--text-muted);}
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-7);}
button { font-family: inherit; font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-normal); padding: var(--space-4) var(--space-6); border: none; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-normal), border-color var(--transition-normal), opacity var(--transition-normal); background: var(--accent); color: var(--text-inverse);}
button:hover:not(:disabled) { background: var(--accent-hover);}
button:disabled { opacity: 0.6; cursor: not-allowed;}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent);}
button.secondary:hover:not(:disabled) { background: var(--accent); color: var(--text-inverse);}
button.tertiary { background: transparent; color: var(--text-secondary); padding: var(--space-3) var(--space-4);}
button.tertiary:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-tertiary);}
button.danger { background: var(--error-text);}
button.danger:hover:not(:disabled) { background: #900;}
button.danger-outline { background: transparent; border: 1px solid var(--error-border); color: var(--error-text);}
button.danger-outline:hover:not(:disabled) { background: var(--error-bg); border-color: var(--error-text);}
button.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dark);}
button.ghost:hover:not(:disabled) { background: var(--bg-secondary); color: var(--text-primary);}
label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-2);}
fieldset { border: none; border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-5); padding-left: var(--space-6); margin: 0; background: var(--bg-secondary);}
fieldset legend { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; padding: 0; margin-left: calc(-1 * var(--space-1)); margin-bottom: var(--space-3); color: var(--text-secondary); float: left; width: 100%;}
fieldset legend + * { clear: both;}
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-tertiary); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);}
pre { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--bg-tertiary); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; margin: 0;}
hr { border: none; border-top: 1px solid var(--border-color); margin: var(--space-6) 0;}
.field { display: flex; flex-direction: column; gap: var(--space-2);}
.field + .field { margin-top: var(--space-5);}
.form-row .field + .field { margin-top: 0;}
.hint { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1);}
.hint.warning { color: var(--warning-text);}
.hint.error { color: var(--error-text);}
.message { padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm);}
.message.success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text);}
.message.error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text);}
.message.warning { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text);}
.badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-medium);}
.badge.success { background: var(--success-bg); color: var(--success-text);}
.badge.warning { background: var(--warning-bg); color: var(--warning-text);}
.badge.error { background: var(--error-bg); color: var(--error-text);}
.badge.accent { background: var(--accent); color: var(--text-inverse);}
.card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--space-6); overflow: hidden; min-width: 0;}
.section { background: var(--bg-secondary); border-radius: var(--radius-xl); padding: var(--space-6); overflow: hidden; min-width: 0;}
.section + .section { margin-top: var(--space-6);}
.page { max-width: var(--width-lg); margin: 0 auto; padding: var(--space-7);}
.page-sm { max-width: var(--width-md); margin: 0 auto; padding: var(--space-7);}
.page-lg { max-width: var(--width-xl); margin: 0 auto; padding: var(--space-7);}
.back-link { display: inline-block; color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); text-decoration: none;}
.back-link:hover { color: var(--accent); text-decoration: none;}
.text-muted { color: var(--text-muted);}
.text-secondary { color: var(--text-secondary);}
.text-sm { font-size: var(--text-sm);}
.text-xs { font-size: var(--text-xs);}
.text-center { text-align: center;}
.mono { font-family: var(--font-mono);}
.mt-4 { margin-top: var(--space-4);}.mt-5 { margin-top: var(--space-5);}.mt-6 { margin-top: var(--space-6);}.mb-4 { margin-bottom: var(--space-4);}.mb-5 { margin-bottom: var(--space-5);}.mb-6 { margin-bottom: var(--space-6);}
.split-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6);}
@media (min-width: 800px) { .split-layout { grid-template-columns: 1fr 1fr; align-items: start; } .split-layout.sidebar-right { grid-template-columns: 1.5fr 1fr; } .split-layout.sidebar-left { grid-template-columns: 1fr 1.5fr; }}
.split-layout > * { min-width: 0;}
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4);}
@media (min-width: 600px) { .form-row { grid-template-columns: repeat(2, 1fr); } .form-row.thirds { grid-template-columns: repeat(3, 1fr); }}
.full-width { grid-column: 1 / -1;}
.info-panel { background: var(--bg-secondary); border-radius: var(--radius-xl); padding: var(--space-6); height: fit-content; overflow: hidden; min-width: 0;}
.info-panel h3 { margin: 0 0 var(--space-3) 0; font-size: var(--text-base); font-weight: var(--font-semibold);}
.info-panel p { margin: 0 0 var(--space-4) 0; font-size: var(--text-sm); color: var(--text-secondary);}
.info-panel p:last-child { margin-bottom: 0;}