.pdg-wrap{margin-bottom: 2rem;}
.pdg-card{background: var(--surface, #fff);border: 1px solid var(--border, #e2e8f0);border-radius: 16px;overflow: hidden;box-shadow: var(--shadow-soft, 0 20px 45px rgba(15, 23, 42, 0.08));}
.pdg-controls{display: flex;flex-direction: column;gap: 1rem;padding: 1.25rem;}
.pdg-field{display: flex;flex-direction: column;gap: 0.35rem;}
.pdg-field label{font-size: 0.8125rem;font-weight: 600;color: var(--text-muted, #64748b);}
.pdg-field input{width: 100%;max-width: 12rem;padding: 0.75rem 1rem;font-size: 1rem;color: var(--text-main, #0f172a);background: var(--surface, #fff);border: 1px solid var(--border, #e2e8f0);border-radius: 10px;appearance: none;-moz-appearance: textfield;}
.pdg-field input::-webkit-outer-spin-button,.pdg-field input::-webkit-inner-spin-button{appearance: none;margin: 0;}
.pdg-hint{font-size: 0.75rem;color: var(--text-muted, #64748b);}
.pdg-presets{display: flex;flex-wrap: wrap;gap: 0.5rem;}
.pdg-preset{padding: 0.5rem 0.875rem;font-size: 0.875rem;font-weight: 500;color: var(--text-muted, #64748b);background: var(--surface-muted, #f8fafc);border: 1px solid var(--border, #e2e8f0);border-radius: 8px;cursor: pointer;transition: color 0.2s, background 0.2s, border-color 0.2s;}
.pdg-preset:hover,.pdg-preset:focus{color: var(--primary, #2563eb);background: var(--surface, #fff);border-color: var(--primary, #2563eb);}
.pdg-preset[aria-pressed="true"]{color: #fff;background: var(--primary, #2563eb);border-color: var(--primary, #2563eb);}
.pdg-actions{display: flex;flex-wrap: wrap;gap: 0.75rem;}
.pdg-btn{padding: 0.75rem 1.5rem;font-size: 1rem;font-weight: 600;border-radius: 10px;cursor: pointer;transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;border: 1px solid transparent;min-height: 44px;-webkit-tap-highlight-color: transparent;}
.pdg-btn-primary{background: var(--primary, #2563eb);color: #fff;border-color: var(--primary, #2563eb);}
.pdg-btn-primary:hover{background: var(--primary-dark, #1d4ed8);border-color: var(--primary-dark, #1d4ed8);}
.pdg-btn-primary:active{transform: scale(0.98);}
.pdg-btn-secondary{background: var(--surface, #fff);color: var(--text-main, #334155);border: 1px solid var(--border, #e2e8f0);}
.pdg-btn-secondary:hover:not(:disabled){background: var(--surface-muted, #f1f5f9);border-color: var(--text-muted, #cbd5e1);}
.pdg-btn-secondary:disabled{opacity: 0.5;cursor: not-allowed;}
.pdg-output{padding: 0 1.25rem 1.25rem;border-top: 1px solid var(--border, #e2e8f0);}
.pdg-output[hidden]{display: none;}
.pdg-value{padding: 1rem;background: var(--surface-muted, #f8fafc);border-radius: 10px;font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;font-size: clamp(0.8125rem, 2.5vw, 1rem);line-height: 1.6;word-break: break-all;color: var(--text-main, #0f172a);}
.pdg-value .pdg-int{font-weight: 700;color: var(--primary, #2563eb);}
.pdg-meta{margin-top: 0.75rem;font-size: 0.875rem;color: var(--text-muted, #64748b);}
.pdg-related{margin-top: 1rem;padding: 0.75rem;background: var(--surface, #fff);border: 1px solid var(--border, #e2e8f0);border-radius: 8px;font-size: 0.8125rem;}
.pdg-related strong{display: inline-block;min-width: 2.5rem;color: var(--text-muted, #64748b);}
.pdg-error{padding: 1rem 1.25rem;margin: 0 1.25rem 1.25rem;background: #fef2f2;color: #b91c1c;border-radius: 10px;font-size: 0.9375rem;}
.pdg-error[hidden]{display: none;}
.pdg-about{margin-top: 1.5rem;padding: 1rem 1.25rem;font-size: 0.9375rem;line-height: 1.5;color: var(--text-muted, #64748b);background: var(--surface-muted, #f8fafc);border-radius: 12px;border-left: 4px solid var(--primary, #2563eb);}
.pdg-about p{margin: 0;}
@media (min-width: 640px){.pdg-controls{flex-direction: row;flex-wrap: wrap;align-items: flex-end;gap: 1.25rem;}.pdg-field input{max-width: 8rem;}.pdg-actions{margin-left: auto;}}
@media (min-width: 768px){.pdg-controls{padding: 1.5rem;}.pdg-output{padding: 0 1.5rem 1.5rem;}.pdg-value{font-size: 1rem;padding: 1.25rem;}}