*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;outline:none;-webkit-tap-highlight-color:transparent;}:root{--clr-bg:#f4f6f8;--clr-dots:#d0d0d0;--clr-ink:#111111;--clr-paper:#ffffff;--clr-accent:#7d5fff;--clr-accent-light:#f1eeff;--clr-error:#ff3366;--clr-success:#33ff99;--border-width:4px;--transition:0.6s cubic-bezier(0.175,0.885,0.32,1.275);--font-header:'Bangers',cursive;--font-body:'Comic Neue',cursive,sans-serif;--shadow-offset:6px;}body{min-height:100vh;background-color:var(--clr-bg);background-image:radial-gradient(var(--clr-dots) 10%,transparent 11%), radial-gradient(var(--clr-dots) 10%,transparent 11%);background-size:20px 20px;background-position:0 0,10px 10px;color:var(--clr-ink);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px 48px;font-family:var(--font-body);overflow-x:hidden;}.container{width:100%;max-width:800px;position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;}.header{text-align:center;background:var(--clr-paper);padding:18px;border:var(--border-width) solid var(--clr-ink);box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--clr-ink);transform:rotate(-0.8deg);}.logo-text{font-family:var(--font-header);font-size:3.2rem;color:var(--clr-accent);text-shadow: 2px 2px 0 var(--clr-ink), -2px -2px 0 var(--clr-ink), 2px -2px 0 var(--clr-ink), -2px 2px 0 var(--clr-ink), 4px 4px 0 var(--clr-ink);letter-spacing:2px;}.tagline{font-weight:700;text-transform:uppercase;font-size:1rem;color:#555;margin-top:4px;}.card{background:var(--clr-paper);border:var(--border-width) solid var(--clr-ink);padding:45px 35px 35px;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--clr-ink);position:relative;margin-bottom:20px;}.card::before{content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;border:2px solid var(--clr-ink);pointer-events:none;}.home-link{position:absolute;top:-15px;left:20px;background:var(--clr-paper);border:var(--border-width) solid var(--clr-ink);padding:5px 15px;text-decoration:none;font-family:var(--font-header);font-size:1.2rem;color:var(--clr-ink);box-shadow:4px 4px 0 var(--clr-ink);z-index:10;transition:transform var(--transition),box-shadow var(--transition);text-transform:uppercase;}.home-link:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--clr-ink);}.card-title{font-family:var(--font-header);font-size:2.6rem;letter-spacing:1px;margin-bottom:4px;text-transform:uppercase;}.card-subtitle{font-weight:700;font-size:1rem;margin-bottom:28px;opacity:0.75;}.address-box{margin-bottom:24px;}.input-row{display:flex;border:var(--border-width) solid var(--clr-ink);box-shadow:6px 6px 0 var(--clr-ink);}.input-row input{flex:1;padding:14px;font-family:monospace;font-weight:700;font-size:1.1rem;border:none;background:#f9f9f9;min-width:0;color:var(--clr-ink);}.input-row button{background:var(--clr-accent);color:var(--clr-ink);border:none;border-left:var(--border-width) solid var(--clr-ink);padding:0 25px;font-family:var(--font-header);font-size:1.4rem;cursor:pointer;transition:transform 0.1s;}.input-row button:active{background:var(--clr-accent-light);}.controls-row{display:flex;gap:12px;margin-top:15px;flex-wrap:wrap;}.btn-secondary{background:#fff;border:3px solid var(--clr-ink);padding:8px 16px;font-family:var(--font-header);font-size:1.2rem;letter-spacing:0.5px;cursor:pointer;box-shadow:4px 4px 0 var(--clr-ink);transition:transform 0.1s,box-shadow 0.1s;color:var(--clr-ink);}.btn-secondary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--clr-ink);}.btn-secondary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--clr-ink);}.email-list-container{border:var(--border-width) solid var(--clr-ink);box-shadow:6px 6px 0 var(--clr-ink);background:#fdfdfd;padding:20px;min-height:200px;}.section-label{font-family:var(--font-header);font-size:1.4rem;margin-bottom:12px;letter-spacing:1px;}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;text-align:center;}.pulse-spinner{width:30px;height:30px;background:var(--clr-accent);border-radius:50%;animation:pulse 1.2s infinite ease-in-out;margin-bottom:15px;border:2px solid var(--clr-ink);}@keyframes pulse{0%{transform:scale(0.6);opacity:0.4;}50%{transform:scale(1.1);opacity:1;}100%{transform:scale(0.6);opacity:0.4;}}.empty-title{font-family:var(--font-header);font-size:1.5rem;margin-bottom:4px;}.empty-sub{font-size:0.95rem;font-weight:700;opacity:0.6;}.email-item{border:3px solid var(--clr-ink);background:#fff;margin-bottom:12px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;box-shadow:4px 4px 0 var(--clr-ink);}.email-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--clr-ink);}.email-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:2px solid var(--clr-ink);background:var(--clr-accent-light);}.email-sender{font-weight:700;font-size:0.95rem;}.email-time{font-size:0.8rem;opacity:0.7;font-weight:700;}.email-summary{padding:12px 16px;}.email-subject{font-family:var(--font-header);font-size:1.3rem;margin-bottom:4px;letter-spacing:0.5px;}.email-preview-text{font-size:0.9rem;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.email-detail{border:3px solid var(--clr-ink);background:#fff;margin-bottom:16px;box-shadow:5px 5px 0 var(--clr-ink);}.detail-header{padding:16px;border-bottom:3px solid var(--clr-ink);background:var(--clr-accent-light);}.detail-meta-row{margin-bottom:4px;font-size:0.95rem;}.detail-meta-label{font-family:var(--font-header);font-size:1rem;margin-right:6px;}.detail-subject{font-family:var(--font-header);font-size:1.8rem;margin-top:10px;word-break:break-word;}.detail-body{padding:20px;overflow-x:auto;font-size:0.95rem;line-height:1.6;background:#fff;}.detail-body iframe{width:100%;border:none;min-height:350px;}.detail-actions{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:3px solid var(--clr-ink);background:#f9f9f9;}.btn-delete{background:var(--clr-error);color:#fff;border:2px solid var(--clr-ink);padding:6px 14px;font-family:var(--font-header);font-size:1.1rem;cursor:pointer;box-shadow:3px 3px 0 var(--clr-ink);}.btn-delete:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--clr-ink);}.instructions-card{background:var(--clr-paper);border:var(--border-width) solid var(--clr-ink);padding:30px;box-shadow:var(--shadow-offset) var(--shadow-offset) 0 var(--clr-ink);}.instructions-title{font-family:var(--font-header);font-size:1.8rem;margin-bottom:12px;}.instructions-text{font-weight:700;line-height:1.5;margin-bottom:16px;font-size:0.95rem;}.code-container{position:relative;border:3px solid var(--clr-ink);box-shadow:4px 4px 0 var(--clr-ink);margin-top:10px;}.code-header{background:var(--clr-ink);color:#fff;padding:6px 14px;display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;font-weight:700;}.code-header button{background:transparent;color:var(--clr-success);border:1px solid var(--clr-success);padding:2px 8px;font-family:var(--font-header);cursor:pointer;}.code-header button:hover{background:var(--clr-success);color:var(--clr-ink);}.code-body{background:#1a1a2e;color:#e0e0e0;padding:15px;font-family:monospace;font-size:0.8rem;overflow-x:auto;max-height:250px;white-space:pre;}#page-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--clr-bg);background-image:radial-gradient(var(--clr-dots) 15%,transparent 16%),radial-gradient(var(--clr-dots) 15%,transparent 16%);background-size:20px 20px;background-position:0 0,10px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;transition:opacity 0.2s ease,visibility 0.2s;visibility:visible !important;}#page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}.loader-spinner{width:60px;height:60px;border:6px solid var(--clr-ink);border-top-color:var(--clr-accent);border-right-color:#ff0050;border-bottom-color:#ffde00;border-left-color:#33ff99;border-radius:50%;animation:spinBrutal 1s linear infinite;box-shadow:4px 4px 0 var(--clr-ink);margin-bottom:20px;}@keyframes spinBrutal{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.hidden{display:none !important;}@media (max-width:600px){.card{padding:40px 18px 28px;}.logo-text{font-size:2.4rem;}.input-row button{padding:0 15px;font-size:1.2rem;}.detail-body{padding:8px;}.detail-header{padding:16px 12px;}.detail-subject{font-size:1.3rem;margin-top:8px;}}