/* Template design tokens and component styles imported from Template/index.css */
*{margin:0;padding:0;box-sizing:border-box}
:root{--background:hsl(220,20%,97%);--foreground:hsl(220,15%,15%);--card:#fff;--card-foreground:hsl(220,15%,15%);--primary:hsl(221,83%,53%);--primary-foreground:#fff;--primary-glow:hsl(221,83%,63%);--accent:hsl(217,91%,60%);--accent-foreground:#fff;--success:hsl(142,71%,45%);--success-foreground:#fff;--muted:hsl(220,15%,94%);--muted-foreground:hsl(220,11%,40%);--border:hsl(220,13%,88%);--shadow-soft:0 2px 8px -2px hsla(220,15%,15%,0.08);--shadow-medium:0 4px 16px -4px hsla(220,15%,15%,0.12);--shadow-elevated:0 8px 24px -6px hsla(220,15%,15%,0.16)}
body.template{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5;color:var(--foreground);background:linear-gradient(180deg,var(--background) 0%,hsl(217,91%,97%) 100%);min-height:100vh}
.header{border-bottom:1px solid var(--border);background:hsla(0,0%,100%,0.8);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft);position:sticky;top:0;z-index:10}
.header-container{max-width:1280px;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}
.header-left{display:flex;align-items:center;gap:.75rem}.header-logo{height:2rem}.header-divider{height:1.5rem;width:1px;background:var(--border)}.header-title{font-size:1.125rem;font-weight:600;color:var(--foreground)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;text-decoration:none;border:none;padding:.5rem 1rem;height:2.5rem}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:var(--primary-foreground);box-shadow:var(--shadow-soft)}.btn-primary:hover{opacity:.9;box-shadow:var(--shadow-medium)}
.btn-outline{border:1px solid var(--border);background:var(--card);color:var(--foreground)}.btn-outline:hover{background:var(--muted)}
.btn-secondary{background:var(--muted);color:var(--foreground)}.btn-secondary:hover{background:var(--border)}
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:hsl(142,71%,40%)}
.btn-ghost{background:transparent;color:var(--foreground)}.btn-ghost:hover{background:var(--muted)}
.btn-link{background:transparent;color:var(--primary);text-decoration:underline}
.btn-sm{height:2.1rem;padding:.3rem .7rem;font-size:.7rem}
.btn-icon{height:2.4rem;width:2.4rem;padding:0}
.badge-warning{background:hsla(41,92%,60%,.18);color:#b45309;border:1px solid hsla(41,92%,60%,.4)}
.badge-destructive{background:hsla(0,84%,60%,.15);color:#dc2626;border:1px solid hsla(0,84%,60%,.45)}
.btn-lg{height:2.75rem;padding:.5rem 2rem;font-size:1rem;box-shadow:var(--shadow-medium)}.btn-lg:hover{box-shadow:var(--shadow-elevated)}
.main-wrapper{padding:4rem 1rem}@media (min-width:768px){.main-wrapper{padding:6rem 1rem}}
.container{max-width:1280px;margin:0 auto;padding:0 1rem}.content-max{max-width:64rem;margin:0 auto;display:flex;flex-direction:column;gap:4rem}
@keyframes fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fade-in .5s ease-out}
.hero-section{text-align:center;display:flex;flex-direction:column;gap:1.5rem}.hero-logo-wrapper{display:inline-block;margin-bottom:1.5rem}.hero-logo{height:4rem;margin:0 auto}.hero-heading{font-size:2.25rem;font-weight:700;line-height:1.2;color:var(--foreground)}@media (min-width:768px){.hero-heading{font-size:3rem}}@media (min-width:1024px){.hero-heading{font-size:3.75rem}}
.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-description{font-size:1.125rem;color:var(--muted-foreground);max-width:42rem;margin:0 auto}@media (min-width:768px){.hero-description{font-size:1.25rem}}
.hero-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;padding-top:1rem}@media (min-width:640px){.hero-actions{flex-direction:row}}
.hero-hint{font-size:.875rem;color:var(--muted-foreground);padding-top:1rem}.code-snippet{padding:.125rem .5rem;background:var(--muted);border-radius:.25rem;font-size:.75rem;font-family:'Courier New',monospace}
.features-grid{display:grid;gap:1.5rem}@media (min-width:768px){.features-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{padding:1.5rem;border-radius:.5rem;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-soft);transition:all .3s cubic-bezier(.4,0,.2,1)}.feature-card:hover{box-shadow:var(--shadow-medium);transform:scale(1.05)}
.feature-icon{width:3rem;height:3rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.feature-icon-primary{background:hsla(221,83%,53%,.1)}.feature-icon-accent{background:hsla(217,91%,60%,.1)}.feature-icon-success{background:hsla(142,71%,45%,.1)}
.feature-icon .icon{width:1.5rem;height:1.5rem}.feature-icon-primary .icon{color:var(--primary)}.feature-icon-accent .icon{color:var(--accent)}.feature-icon-success .icon{color:var(--success)}
.feature-title{font-size:1.25rem;font-weight:600;color:var(--foreground);margin-bottom:.5rem}.feature-description{color:var(--muted-foreground);font-size:.875rem}
.how-it-works{display:flex;flex-direction:column;gap:2rem}.how-it-works-header{text-align:center}.section-heading{font-size:1.875rem;font-weight:700;color:var(--foreground);margin-bottom:1rem}.section-description{color:var(--muted-foreground);max-width:42rem;margin:0 auto}
.steps-grid{display:grid;gap:2rem}@media (min-width:768px){.steps-grid{grid-template-columns:repeat(3,1fr)}}.step{text-align:center;display:flex;flex-direction:column;gap:.75rem}.step-number{width:3rem;height:3rem;border-radius:50%;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;margin:0 auto}.step-title{font-weight:600;color:var(--foreground)}.step-description{font-size:.875rem;color:var(--muted-foreground)}
.security-card{padding:2rem;background:hsla(221,83%,53%,.05);border:1px solid hsla(221,83%,53%,.2);border-radius:.5rem;box-shadow:var(--shadow-soft);display:flex;align-items:flex-start;gap:1rem}.security-icon-container{width:3rem;height:3rem;border-radius:.5rem;background:hsla(221,83%,53%,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}.security-check-icon{width:1.5rem;height:1.5rem;color:var(--primary)}.security-title{font-size:1.25rem;font-weight:600;color:var(--foreground);margin-bottom:.5rem}.security-description{color:var(--muted-foreground)}
.cta-section{text-align:center;display:flex;flex-direction:column;gap:1rem;padding-top:2rem}.cta-heading{font-size:1.5rem;font-weight:700;color:var(--foreground)}
.footer{border-top:1px solid var(--border);background:hsla(0,0%,100%,0.8);backdrop-filter:blur(8px);margin-top:4rem}.footer-container{max-width:1280px;margin:0 auto;padding:2rem 1rem}.footer-text{text-align:center;font-size:.875rem;color:var(--muted-foreground)}
.icon{stroke-linecap:round;stroke-linejoin:round}
/* Dashboard enhancements */
.dashboard-hero{display:flex;flex-direction:column;gap:1rem;text-align:center}
.dashboard-hero-title{font-size:2.25rem;font-weight:700;color:var(--foreground)}@media (min-width:768px){.dashboard-hero-title{font-size:2.75rem}}
.dashboard-hero-sub{font-size:1rem;color:var(--muted-foreground);max-width:40rem;margin:0 auto}
.stats-grid{display:grid;gap:1rem}@media (min-width:768px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{padding:1.25rem 1.25rem 1.1rem;border:1px solid var(--border);border-radius:.5rem;background:var(--card);box-shadow:var(--shadow-soft);display:flex;gap:.9rem;align-items:flex-start;transition:box-shadow .25s,transform .25s}
.stat-card:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px)}
.stat-icon{width:2.75rem;height:2.75rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);box-shadow:inset 0 0 0 1px hsla(220,15%,15%,0.04),0 1px 2px hsla(220,15%,15%,0.08);background:var(--muted)}
.stat-icon .icon{width:1.4rem;height:1.4rem;stroke-width:1.6}
.stat-icon-primary{background:linear-gradient(135deg,hsla(221,83%,53%,.09) 0%,hsla(217,91%,60%,.09) 100%);color:var(--primary)}
.stat-icon-success{background:linear-gradient(135deg,hsla(142,71%,45%,.1) 0%,hsla(142,71%,45%,.05) 100%);color:var(--success)}
.stat-icon-accent{background:linear-gradient(135deg,hsla(217,91%,60%,.1) 0%,hsla(221,83%,53%,.05) 100%);color:var(--accent)}
.stat-value{font-size:1.75rem;font-weight:700;color:var(--foreground);line-height:1.1;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}
.upload-card{padding:2rem;border:1px solid var(--border);border-radius:.75rem;background:var(--card);box-shadow:var(--shadow-medium);text-align:center;display:flex;flex-direction:column;gap:1rem}
.upload-icon-wrapper{width:4rem;height:4rem;border-radius:9999px;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);display:flex;align-items:center;justify-content:center;margin:0 auto}
.upload-title{font-size:1.5rem;font-weight:600;color:var(--foreground)}
.upload-description{font-size:.85rem;color:var(--muted-foreground);max-width:26rem;margin:0 auto}
.upload-form-inline{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.upload-input{flex:1 1 auto;min-width:220px;border:1px solid var(--border);background:var(--card);padding:.6rem .7rem;border-radius:.375rem;font-size:.75rem}
.upload-select{border:1px solid var(--border);background:var(--card);padding:.55rem .6rem;border-radius:.375rem;font-size:.7rem}
.upload-select.upload-select-wide{min-width:200px;width:200px}
.table-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:.5rem;box-shadow:var(--shadow-soft);background:var(--card)}
.table{width:100%;font-size:.75rem;border-collapse:separate;border-spacing:0}
.table thead{background:var(--muted);color:var(--foreground);font-weight:500}
.table th{padding:.6rem .75rem;text-align:left;font-weight:500;font-size:.65rem;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-foreground)}
.table td{padding:.55rem .75rem}
.table tr{border-top:1px solid var(--border);transition:background .2s}
.table tr:hover{background:var(--muted)}
.badge{display:inline-block;padding:.25rem .55rem;border-radius:.375rem;font-size:.65rem;font-weight:700;line-height:1;letter-spacing:.3px}
.badge-active{background:hsla(142,71%,45%,.14);color:var(--success);border:1px solid hsla(142,71%,45%,.42)}
.badge-revoked{background:hsla(0,84%,60%,.14);color:#dc2626;border:1px solid hsla(0,84%,60%,.42)}
.badge-expired{background:hsla(41,92%,60%,.22);color:#b45309;border:1px solid hsla(41,92%,60%,.44)}
.badge-default{background:var(--muted);color:var(--muted-foreground);border:1px solid var(--border)}
.btn-tiny{height:1.9rem;padding:0 .6rem;font-size:.6rem}
.btn-action-sm{height:2.05rem;padding:0 .7rem;font-size:.72rem;font-weight:600}
.actions-inline{display:flex;flex-wrap:wrap;gap:.4rem}
/* Dashboard table refinements */
.table-dashboard thead{background:linear-gradient(135deg,hsla(220,15%,94%,1) 0%,hsla(0,0%,100%,1) 100%)}
.table-dashboard tbody tr:nth-child(odd){background:var(--card)}
.table-dashboard tbody tr:nth-child(even){background:linear-gradient(90deg,var(--muted) 0%,hsla(220,15%,96%,1) 100%)}
.table-dashboard tbody tr:hover{background:var(--muted)}
.table-dashboard td{vertical-align:middle}
@media (max-width:420px){.stats-grid{grid-template-columns:1fr}.stat-card{flex-direction:row;align-items:center}.stat-value{font-size:1.5rem}}
.table-dashboard td,.table-dashboard th{border-bottom:1px solid var(--border)}
.table-dashboard tbody tr:last-child td{border-bottom:none}
.table-compact th{padding:.45rem .6rem;font-size:.6rem}
.table-compact td{padding:.45rem .6rem}
/* Additional utility classes */
.policy-card{padding:1.1rem 1.25rem;border:1px solid hsla(45,100%,51%,.35);border-radius:.6rem;background:linear-gradient(135deg,hsla(45,100%,51%,.10) 0%,hsla(45,100%,51%,.06) 100%);display:flex;gap:1.05rem;box-shadow:0 2px 6px -2px hsla(45,60%,30%,.2),var(--shadow-soft)}
.policy-card-title{font-size:1rem;font-weight:600;color:hsl(45,80%,25%);margin:0}
.policy-card-list{margin:0;padding-left:1.15rem;font-size:.75rem;color:var(--muted-foreground);list-style:disc;display:flex;flex-direction:column;gap:.3rem}
.btn-neutral{background:#334155;color:#fff}.btn-neutral:hover{background:#1e293b}
.share-link-field{border:1px solid var(--border);background:var(--muted);padding:.35rem .5rem;width:16rem;border-radius:.375rem;font-size:.65rem}
.select-tiny{border:1px solid var(--border);background:var(--card);border-radius:.375rem;font-size:.6rem;padding:.25rem .3rem;height:1.9rem}
.main-wrapper-compact{padding-top:3rem;padding-bottom:3rem}
.btn-compact{height:2.25rem;padding:0 .9rem;font-size:.8rem}
.hidden-initial{display:none}
.gap-3rem{gap:3rem}
.minw-160{min-width:160px}

/* Accessibility & focus states */
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px hsla(217,91%,60%,.25)}
.link-field:focus-visible,.share-link-field:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px hsla(221,83%,53%,.25)}

/* Additional structural utility classes (inline style replacements) */
.section-heading-sm{font-size:1.4rem;font-weight:700;color:var(--foreground)}
.btn-sm-wide{padding:0 1rem}
.upload-msg{font-size:.7rem;color:var(--muted-foreground)}
.stat-meta{display:flex;flex-direction:column;gap:.2rem}
.stat-label{font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;color:var(--muted-foreground)}
.count-hint{color:var(--muted-foreground);font-size:.75rem;font-weight:400}
.btn-short{height:2.2rem}
.blob-hint{display:block;font-size:.7rem;color:var(--muted-foreground)}
.security-icon-warning{background:linear-gradient(135deg,hsla(45,100%,51%,.10) 0%,hsla(45,100%,51%,.06) 100%);width:3.4rem;height:3.4rem;border:1px solid hsla(45,100%,40%,.35);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.4),0 2px 4px hsla(45,60%,30%,.25);display:flex;align-items:center;justify-content:center}
.security-icon-warning .security-check-icon{width:1.75rem;height:1.75rem;stroke-width:2.1}

/* File input enhancement */
.file-input-wrapper{position:relative;display:inline-flex;align-items:center}
.file-input-native{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file-input-display{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--border);border-radius:.375rem;padding:.55rem .75rem;font-size:.7rem;color:var(--muted-foreground);min-width:200px;box-shadow:var(--shadow-soft);transition:background .2s,border-color .2s}
.file-input-display:hover{background:var(--muted)}
.file-input-display .file-icon{width:1rem;height:1rem;color:var(--primary)}
.file-input-has-file{color:var(--foreground)}
.file-input-trigger{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:#fff;border:none;border-radius:.375rem;padding:.55rem .8rem;font-size:.7rem;font-weight:500;cursor:pointer;box-shadow:var(--shadow-soft);transition:opacity .2s,box-shadow .2s}
.file-input-trigger:hover{opacity:.9;box-shadow:var(--shadow-medium)}
.file-input-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Disabled button state (generic) */
button:disabled, .btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.15);box-shadow:none}

/* Soft button variant for secondary actions */
.btn-soft{background:var(--muted);color:var(--foreground);border:1px solid var(--border)}
.btn-soft:hover{background:var(--border)}

/* Responsive: stack upload form vertically on narrow screens */
@media (max-width:500px){
	#uploadForm{flex-direction:column;align-items:stretch}
	#uploadForm .file-input-wrapper{width:100%}
	#uploadForm .file-input-display{width:100%}
	#uploadForm .upload-select,
	#uploadForm .upload-select-wide,
	#uploadForm button[data-upload-btn]{width:100%}
}
/* Upload form grid layout */
.upload-form-grid{display:grid;grid-template-columns:220px 220px auto;grid-template-rows:auto auto;column-gap:1.6rem;row-gap:.9rem;align-items:start}
/* Two-column variant (option B) */
.upload-form-grid.upload-form-grid-2{grid-template-columns:220px 1fr;grid-template-rows:auto auto}
.upload-expiry-group{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* Utility to push element to bottom within grid cell if needed */
.align-bottom{align-self:end}
.upload-form-grid .file-input-wrapper{max-width:220px;flex-wrap:wrap}
.upload-form-grid .file-input-display{flex:1 1 auto}
.upload-form-grid .file-input-wrapper{margin-right:.2rem}
.upload-form-grid select.upload-select{margin-right:.2rem}
.upload-form-grid .upload-form-header{font-size:.65rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted-foreground)}
/* Alignment tweaks for upload form second row */
.upload-form-grid select.upload-select{height:2.1rem;display:inline-flex;align-items:center;padding:.55rem .6rem}
.upload-form-grid .file-input-display{height:2.1rem}
.upload-form-grid .file-input-trigger{height:2.1rem}
@media (max-width:500px){
	.upload-form-grid{display:flex;flex-direction:column}
	.upload-form-grid .upload-form-header{display:none}
}
/* Screen-reader only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}