/* ========================================================= drand Random Picker — Stylesheet v2 Self-scoped under #drand-draw-app to avoid theme conflicts ========================================================= */ /* When the plugin is in dark mode (default), tint the page body to match so the dark cards sit on a dark page. JS toggles `drand-dark` on . When the user switches to light mode the class is removed and the page background falls back to whatever the site theme provides. */ body.drand-dark { background: #111521 !important; } .entry-title, header, footer { display: none !important; } #ddpThemeToggle { background: transparent !important; border: none !important; border-radius: 0px !important; outline: none; } #drand-draw-app { /* Default theme is DARK. Light mode is opt-in via [data-theme="light"]. */ --ddp-bg: #0b0d12; --ddp-surface: #181b24; --ddp-surface-2: #1f2330; --ddp-surface-3: #262a39; --ddp-border: #2c3142; --ddp-border-2: #383d52; --ddp-text: #f0f2f7; --ddp-text-2: #b6bbcd; --ddp-text-3: #b7bbc9; --ddp-accent: #3ecf8e; /* green */ --ddp-accent-2: #2eb878; --ddp-accent-soft: #143a2a; --ddp-cyan: #0e9488; --ddp-green: #10b981; --ddp-green-soft: #0b2b22; --ddp-amber: #f59e0b; --ddp-red: #dc2626; --ddp-red-soft: #2b1414; --ddp-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ddp-radius: 14px; --ddp-radius-sm: 8px; --ddp-shadow: 0 1px 2px rgba(17,20,28,.04), 0 8px 24px rgba(17,20,28,.06); color: var(--ddp-text); line-height: 1.55; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; max-width: 880px; margin: 2rem auto; box-sizing: border-box; } /* Light theme overrides — applied when the user toggles to light mode. */ #drand-draw-app[data-theme="light"] { --ddp-bg: #f7f7fb; --ddp-surface: #ffffff; --ddp-surface-2: #f7f7fb; --ddp-surface-3: #eef0f7; --ddp-border: #e3e6ee; --ddp-border-2: #d6dae6; --ddp-text: #11141c; --ddp-text-2: #4a5066; --ddp-text-3: #7c829a; --ddp-accent-soft: #dcfce7; --ddp-green-soft: #ecfdf5; --ddp-red-soft: #fef2f2; } #drand-draw-app *, #drand-draw-app *::before, #drand-draw-app *::after { box-sizing: border-box; } #drand-draw-app h1, #drand-draw-app h2, #drand-draw-app h3, #drand-draw-app h4 { color: var(--ddp-text); margin: 0 0 .5rem 0; line-height: 1.25; font-weight: 700; } #drand-draw-app p { margin: 0 0 .75rem 0; color: var(--ddp-text-2); font-weight: 400; } #drand-draw-app a { color: #00db9e; text-decoration: none; } #drand-draw-app[data-theme="light"] a { color: var(--ddp-accent); } #drand-draw-app a:hover { text-decoration: underline; } #drand-draw-app strong { font-weight: 600; } .ddp-randomness-check, .ddp-code-links { padding: 10px; background-color: #181b24; font-size: 12px; } .ddp-randomness-check { color: #ffffff; } .ddp-exporting-links { margin-top:20px !important; font-size:.82rem; color: #b8fff2; } .ddp-code-links { color: #ffffff; padding-bottom: 0px; } .ddp-code-links a { margin-left: 10px; color: #ffffff; } /* ----------- Hero ----------- */ .ddp-hero { background: linear-gradient(135deg, #0f834f 0%, #007940 50%, #0e1818 130%); color: #fff; border-radius: var(--ddp-radius); padding: 2.25rem 2rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .ddp-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0, transparent 35%); pointer-events: none; } .ddp-hero > * { position: relative; } .ddp-hero h1 { color: #ffffff !important; font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .5rem; letter-spacing: -.01em; } .ddp-hero .ddp-tag { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); color: #fff; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; margin-bottom: .9rem; letter-spacing: .02em; } .ddp-hero p { color: rgba(255,255,255,.92) !important; font-size: 1.05rem; max-width: 60ch; } .ddp-hero-stats { display: flex; gap: 1.5rem; margin-top: 1.25rem; flex-wrap: wrap; } .ddp-hero-stat .num { display: block; font-family: var(--ddp-mono); font-size: 1.15rem; font-weight: 600; color: #fff; } .ddp-hero-stat .lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); } /* ----------- Cards / Sections ----------- */ .ddp-card { background: var(--ddp-surface); border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--ddp-shadow); } .ddp-card h2 { font-size: 1.2rem; display: flex; align-items: center; gap: .5rem; } .ddp-card h2 .ddp-num { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ddp-accent-soft); color: var(--ddp-accent); font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .ddp-card .ddp-card-sub { color: var(--ddp-text-3); font-size: .9rem; margin-bottom: 1.25rem; } /* ----------- Status pill ----------- */ .ddp-status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--ddp-surface-3); color: var(--ddp-text-2); border: 1px solid var(--ddp-border); } .ddp-status-pill .ddp-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ddp-text-3); } .ddp-status-pill.is-connected { background: var(--ddp-green-soft); color: #047857; border-color: #a7f3d0; } .ddp-status-pill.is-connected .ddp-dot { background: var(--ddp-green); box-shadow: 0 0 0 4px rgba(16,185,129,.18); animation: ddp-pulse 2s ease-out infinite; } .ddp-status-pill.is-error { background: var(--ddp-red-soft); color: var(--ddp-red); border-color: #fecaca; } .ddp-status-pill.is-error .ddp-dot { background: var(--ddp-red); } @keyframes ddp-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.40); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } /* ----------- Form ----------- */ .ddp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 560px) { .ddp-form-row { grid-template-columns: 1fr; } .ddp-card ul {padding-left: 0px;}} .ddp-field { margin-bottom: 1rem; } .ddp-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ddp-text); margin-bottom: .4rem; } .ddp-hint { display: block; font-size: .78rem; color: var(--ddp-text-3); margin-top: .3rem; } .ddp-input, .ddp-textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--ddp-border-2); border-radius: var(--ddp-radius-sm); font-size: .95rem; background: var(--ddp-surface); color: var(--ddp-text); font-family: inherit; transition: border-color .15s, box-shadow .15s; } .ddp-input:focus, .ddp-textarea:focus { outline: none; border-color: var(--ddp-accent); box-shadow: 0 0 0 3px rgba(62,207,142,.16); } .ddp-textarea { min-height: 96px; resize: vertical; font-family: var(--ddp-mono); font-size: .88rem; } /* Mode toggle */ .ddp-toggle { display: inline-flex; background: var(--ddp-surface-3); border-radius: var(--ddp-radius-sm); padding: 4px; border: 1px solid var(--ddp-border); gap: 2px; } .ddp-toggle .mob-collapse { display: inline-block; } .ddp-toggle label { padding: .45rem .9rem; font-size: .87rem; font-weight: 600; color: var(--ddp-text-2); border-radius: 6px; cursor: pointer; user-select: none; transition: background .15s, color .15s; } .ddp-toggle input { position: absolute; opacity: 0; pointer-events: none; } .ddp-toggle input:checked + label { background: var(--ddp-surface); color: var(--ddp-accent); box-shadow: 0 1px 2px rgba(17,20,28,.08); } /* Range inputs */ .ddp-range-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; } .ddp-range-row .ddp-arrow { color: var(--ddp-text-3); font-size: .85rem; } /* Checkbox */ .ddp-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; color: var(--ddp-text-2); cursor: pointer; } .ddp-check input { margin-top: 2px; accent-color: var(--ddp-accent); } /* ----------- Buttons ----------- */ .ddp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.2rem; border: none; border-radius: var(--ddp-radius-sm); font-size: .95rem; font-weight: 600; cursor: pointer; transition: transform .08s, background .15s, box-shadow .15s; font-family: inherit; line-height: 1; } .ddp-btn-primary { background: var(--ddp-text); color: #fff; width: 100%; padding: .95rem 1.2rem; } .ddp-btn-primary:hover:not(:disabled) { background: #232838; } .ddp-btn-primary:active:not(:disabled) { transform: translateY(1px); } .ddp-btn-primary:disabled { background: #a3a8ba; cursor: not-allowed; } .ddp-btn-secondary { background: var(--ddp-surface-3); color: #ffffff; border: 1px solid var(--ddp-border); } .ddp-btn-secondary:hover:not(:disabled) { background: linear-gradient(45deg, #1d8a5a, #0d7f4b); } .ddp-btn-ghost { background: transparent; color: var(--ddp-accent); padding: .4rem .6rem; font-size: .85rem; } .ddp-btn-ghost:hover { background: var(--ddp-accent-soft); } /* ----------- Progress ----------- */ .ddp-progress { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--ddp-radius-sm); background: var(--ddp-surface-2); border: 1px solid var(--ddp-border); } .ddp-progress-bar { width: 100%; height: 6px; background: var(--ddp-surface-3); border-radius: 999px; overflow: hidden; margin: .75rem 0; } .ddp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ddp-accent), var(--ddp-cyan)); width: 0%; transition: width .5s ease; border-radius: 999px; } .ddp-progress-msg { font-size: .88rem; color: var(--ddp-text-2); font-family: var(--ddp-mono); } .ddp-countdown { text-align: center; margin: .5rem 0; } .ddp-countdown .num { font-family: var(--ddp-mono); font-size: 2.4rem; font-weight: 700; color: var(--ddp-accent); line-height: 1; } .ddp-countdown .lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ddp-text-3); margin-top: .25rem; } /* ----------- Result ----------- */ .ddp-result { margin-top: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(62,207,142,.06), rgba(20,184,166,.06)); border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius); animation: ddp-pop .35s cubic-bezier(.2,.7,.3,1.1); } @keyframes ddp-pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .ddp-result h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; color: var(--ddp-text); margin-bottom: 1rem; } .ddp-result h3 .ddp-check-icon { width: 1.4rem; height: 1.4rem; background: var(--ddp-green); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; } .ddp-winners { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; margin-top: 1rem; } .ddp-winner { display: inline-flex; align-items: center; background: var(--ddp-green-soft) !important; padding: .55rem 1rem; border-radius: 9px; font-weight: 600; font-family: var(--ddp-mono); font-size: 1.2rem; animation: ddp-winner-in .4s cubic-bezier(.2, .7, .3, 1.2) both; color: #00ff9a; border-color: #00ff9a; border-width: 2px; border-style: solid; } #drand-draw-app[data-theme="light"] .ddp-winner { background: var(--ddp-green) !important; } #drand-draw-app[data-theme="light"] .ddp-hash-check.is-ok { color: #008d66 !important; } @keyframes ddp-winner-in { 0% { transform: translateY(8px) scale(.85); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .ddp-result-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--ddp-border-2); } @media (max-width: 480px) { .ddp-result-meta { grid-template-columns: 1fr; } } .ddp-meta-item { font-size: .8rem; color: var(--ddp-text-2); } .ddp-meta-item strong { display: block; color: var(--ddp-text); font-weight: 600; margin-bottom: .15rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; } .ddp-meta-item code { font-family: var(--ddp-mono); font-size: .82rem; word-break: break-all; } /* Verification code box. Always rendered with a dark background regardless of theme — it's a "code chip" visual and looks broken on a white card. */ .ddp-vcode { margin: 1rem 0; padding: 1rem; background: #11141c; color: #c4ffce; border-radius: var(--ddp-radius-sm); font-family: var(--ddp-mono); font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; word-break: break-all; border: 1px solid #1f2330; } .ddp-vcode-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ddp-text-2); margin-bottom: .35rem; font-weight: 600; font-family: inherit; } .ddp-copy-btn { background: rgba(255,255,255,.1); color: #fff; border: none; padding: .35rem .7rem; border-radius: 6px; cursor: pointer; font-size: .78rem; font-weight: 600; transition: background .15s; flex-shrink: 0; } .ddp-copy-btn:hover { background: rgba(255,255,255,.2); } .ddp-copy-btn.is-copied { background: var(--ddp-green); } /* ----------- Verify ----------- */ .ddp-verify-input-row { display: flex; gap: .5rem; } .ddp-verify-input-row .ddp-input { flex: 1; font-family: var(--ddp-mono); } .ddp-verify-input-row .ddp-btn { width: auto; padding: .7rem 1.2rem; } @media (max-width: 480px) { .ddp-verify-input-row { flex-direction: column; } .ddp-verify-input-row .ddp-btn { width: 100%; } } .ddp-verify-result { margin-top: 1rem; padding: 1.25rem; border-radius: var(--ddp-radius-sm); border: 1px solid var(--ddp-border); } .ddp-verify-result.is-success { background: var(--ddp-green-soft); border-color: #a7f3d0; } .ddp-verify-result.is-failed { background: var(--ddp-red-soft); border-color: #fecaca; } .ddp-feed-verify-btn, .ddp-feed-verify-btn:focus { margin-top: 10px; margin-bottom: 10px; background: linear-gradient(45deg, #2eb878, #1d8a5a); } .ddp-card h4 { font-size: 16px; } .ddp-card ul { margin:.4rem 0 1rem 1.2rem; font-size:.92rem; } .drand-dark .ddp-card ul { color:var(--ddp-text-2); } /* ----------- Recent draws feed ----------- */ .ddp-feed-list { display: flex; flex-direction: column; gap: .6rem; } .ddp-feed-empty { text-align: center; padding: 2rem 1rem; color: var(--ddp-text-3); font-size: .9rem; } .ddp-feed-run { padding: 10px; border-bottom: solid 1px #4c3f89; margin-bottom: 10px; margin-top: 20px; } .ddp-feed-item { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: var(--ddp-surface-2); border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius-sm); transition: border-color .15s, transform .15s; flex-wrap: wrap; } .ddp-feed-item:hover { border-color: var(--ddp-accent); } .ddp-feed-main { flex: 1; min-width: 200px; } .ddp-feed-title { font-weight: 600; color: var(--ddp-text); margin-bottom: .15rem; } .ddp-feed-meta { font-size: .78rem; color: var(--ddp-text-3); } .ddp-feed-winners { font-family: var(--ddp-mono); font-size: .85rem; color: var(--ddp-text); margin-top: .3rem; } .ddp-feed-rerolls summary { cursor: pointer; padding: 4px 10px; background: linear-gradient(45deg, #009954, #007d43); max-width: max-content; line-height: normal; border-radius: 10px; color: #ffffff; margin-top: 10px; font-weight: 400; font-size: 14px; margin-bottom: 5px; } .ddp-feed-winners .ddp-feed-w { display: inline-block; background: var(--ddp-green-soft); color: #6ee7b7; border: 1px solid var(--ddp-border); padding: .15rem .5rem; border-radius: 4px; margin-right: .25rem; } .drand-dark .ddp-feed-winners .ddp-feed-w { border-color: #064e3b; } .entry-byte { margin:.5rem 0 0; font-size:.82rem; } .drand-dark .entry-byte { color: #ffffff; } .ddp-feed-verify { flex-shrink: 0; } /* ----------- How it works (explainer) ----------- */ .ddp-explainer .ddp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0; } @media (max-width: 720px) { .ddp-explainer .ddp-steps { grid-template-columns: 1fr; } .ddp-card {padding: 1rem;} } .ddp-step { padding: 1.1rem; background: var(--ddp-surface-2); border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius-sm); position: relative; } .ddp-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; background: var(--ddp-accent); color: #fff; border-radius: 50%; font-family: var(--ddp-mono); font-weight: 700; font-size: .85rem; margin-bottom: .6rem; } .ddp-step h4 { font-size: .95rem; margin-bottom: .3rem; } .ddp-step p { font-size: .85rem; color: var(--ddp-text-2); margin: 0; } .ddp-trust-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; } .ddp-trust-item { flex: 1; min-width: 180px; padding: .8rem 1rem; background: var(--ddp-surface-2); border-radius: var(--ddp-radius-sm); border-left: 3px solid var(--ddp-accent); } .ddp-trust-item strong { display: block; font-size: .82rem; margin-bottom: .15rem; } .ddp-trust-item span { font-size: .8rem; color: var(--ddp-text-3); } /* FAQ */ .ddp-faq details { border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius-sm); padding: 0; margin-bottom: .5rem; background: var(--ddp-surface-2); overflow: hidden; } .ddp-faq summary { padding: .9rem 1rem; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--ddp-text); list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; } .ddp-faq summary::-webkit-details-marker { display: none; } .ddp-faq summary::after { content: "+"; color: var(--ddp-accent); font-size: 1.2rem; font-weight: 700; transition: transform .2s; } .ddp-faq details[open] summary::after { content: "−"; } .ddp-faq .ddp-faq-body { padding: 0 1rem 1rem; color: var(--ddp-text-2); font-size: .9rem; font-weight: 400; } .ddp-faq .ddp-faq-body p:last-child { margin-bottom: 0; } /* Inline error / toast */ .ddp-error { background: var(--ddp-red-soft); color: var(--ddp-red); padding: .7rem 1rem; border-radius: var(--ddp-radius-sm); border: 1px solid #fecaca; margin-top: 1rem; font-size: .88rem; animation: ddp-shake .3s; } @keyframes ddp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* Spinner */ .ddp-spinner { display: inline-block; width: .9rem; height: .9rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ddp-spin .6s linear infinite; } @keyframes ddp-spin { to { transform: rotate(360deg); } } /* ----------- Code block (verify panel) ----------- */ .ddp-code-block { margin-top: .8rem; border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius-sm); overflow: hidden; background: #0f1117; } .ddp-code-tabs { display: flex; align-items: center; gap: 0; background: #181b24; border-bottom: 1px solid #2a2f3d; padding: 0 .25rem; } .ddp-code-tab { background: transparent; color: #9aa1b8; border: none; padding: .55rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; transition: color .12s, border-color .12s; } .ddp-code-tab:hover, .ddp-code-tab:focus { color: #d8dceb; background: transparent !important;} .ddp-code-tab.is-active { color: #fff; border-bottom-color: var(--ddp-accent); } .ddp-code-block .ddp-code-copy { background: rgba(255,255,255,.06); color: #d8dceb; margin: .3rem .4rem .3rem auto; } .ddp-code-block .ddp-code-copy:hover { background: rgba(255,255,255,.12); } .ddp-code-block .ddp-code-copy.is-copied { background: var(--ddp-green); color: #fff; } .ddp-code { margin: 0; padding: 1rem; background: #0f1117; color: #d8dceb; font-family: var(--ddp-mono); font-size: .8rem; line-height: 1.55; overflow-x: auto; max-height: 420px; overflow-y: auto; } .ddp-code code { font-family: inherit; white-space: pre; } /* Disclosure (details/summary) for verify extras */ .ddp-entries-toggle, .ddp-code-toggle { margin-top: 1rem; border: 1px solid var(--ddp-border); border-radius: var(--ddp-radius-sm); background: var(--ddp-surface); overflow: hidden; } .ddp-entries-toggle summary, .ddp-code-toggle summary { padding: .7rem 1rem; cursor: pointer; font-weight: 600; font-size: .88rem; list-style: none; color: var(--ddp-text); user-select: none; display: flex; align-items: center; justify-content: space-between; } #ddpReroll, #ddpReroll:hover { background-color: #5f1313; border: solid 1px #bb2323; color:#d34949; } #ddpSaveDraw, #ddpSaveDraw:hover { background-color: #155f13; border: solid 1px #23bb73; margin-right: 10px; color: #01e301; } .ddp-result-actions { margin-top: 20px; margin-bottom: 5px; } .ddp-entries-toggle summary::-webkit-details-marker, .ddp-code-toggle summary::-webkit-details-marker { display: none; } .ddp-entries-toggle summary::after, .ddp-code-toggle summary::after { content: "+"; color: var(--ddp-accent); font-size: 1.1rem; font-weight: 700; } .ddp-entries-toggle[open] summary::after, .ddp-code-toggle[open] summary::after { content: "−"; } .ddp-entries-list { padding: .8rem 1rem 1rem; border-top: 1px solid var(--ddp-border); display: flex; flex-wrap: wrap; gap: .35rem; max-height: 280px; overflow-y: auto; } .ddp-entry-chip { display: inline-block; background: var(--ddp-surface-3); color: var(--ddp-text); padding: .2rem .55rem; border-radius: 4px; font-family: var(--ddp-mono); font-size: .8rem; } .ddp-code-toggle > p { padding: 0 1rem .5rem; margin: 0; } /* Entries hash check */ .ddp-hash-check { margin: 1rem 0; padding: .85rem 1rem; border-radius: var(--ddp-radius-sm); border: 1px solid var(--ddp-border); background: var(--ddp-surface); font-size: .85rem; } .ddp-hash-check.is-ok { background: var(--ddp-green-soft); border-color: #a7f3d0; color: #dbfff5; } .ddp-hash-check.is-bad { background: var(--ddp-red-soft); border-color: #fecaca; color: var(--ddp-red); } .ddp-hash-check strong { display: block; margin-bottom: .35rem; font-size: .9rem; } .ddp-hash-line { font-size: .78rem; color: var(--ddp-text-2); word-break: break-all; margin-top: .15rem; } .ddp-hash-check.is-ok .ddp-hash-line, .ddp-hash-check.is-bad .ddp-hash-line { color: inherit; opacity: .85; } .ddp-hash-line code { font-family: var(--ddp-mono); font-size: .78rem; } /* ----------- Entry-list file upload ----------- */ .ddp-upload-card { padding: 1rem; background: var(--ddp-surface-2); border: 1px dashed var(--ddp-border-2); border-radius: var(--ddp-radius-sm); margin-bottom: .25rem; } .ddp-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: .35rem 0 .5rem; } /* Native file inputs are ugly; hide it visually and use the styled