:root{--bg:#000;--fg:#fff;--muted:#aaa;--surface:#111;--border:#333;--accent:#fff;--error:#fff;--control-height:44px;--dot-color:#1a1a1a;--input-bg:#000;--placeholder:#666;--focus-border:#666;--btn-bg:#000;--spinner-track:#ffffff59;--spinner-color:#fff;--overlay:#000000bf;--error-bg:#000}@media (prefers-color-scheme:light){:root{--bg:#f9f9f9;--fg:#000;--muted:#666;--surface:#fff;--border:#ddd;--accent:#000;--error:#000;--dot-color:#e5e5e5;--input-bg:#fff;--placeholder:#999;--focus-border:#aaa;--btn-bg:#fff;--spinner-track:#0003;--spinner-color:#000;--overlay:#00000080;--error-bg:#fff}}html,body{height:100%}*,:before,:after{box-sizing:border-box}body.app-body{background:var(--bg);background-image:radial-gradient(circle, var(--dot-color) 1px, transparent 1px);color:var(--fg);background-size:24px 24px;margin:0;font-family:Inter,sans-serif}.app-container{flex-direction:column;min-height:100vh;display:flex}.app-footer{text-align:center;color:var(--muted);padding:24px 0;font-size:.875rem}.app-footer p{margin:4px 0}.app-footer a{color:var(--fg);border:1px solid #0000;line-height:1;text-decoration:none;display:inline-block}@media (hover:hover){.app-footer a:hover{background:var(--fg);color:var(--bg);border-color:var(--bg)}}#app{flex-direction:column;flex:auto;display:flex}.center-column{text-align:center;flex-direction:column;flex:auto;justify-content:center;align-items:center;padding:16px;display:flex}.container-md{width:100%;max-width:640px;margin:0 auto}.card{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--border);box-shadow:none;padding:24px}.input-field{background:var(--input-bg);color:var(--fg);border:1px solid var(--border);height:var(--control-height);width:100%;max-width:100%;padding:0 16px}.input-field::placeholder{color:var(--placeholder)}.input-field:focus{border-color:var(--focus-border);box-shadow:none;outline:none}.btn-primary,.btn-secondary{background:var(--btn-bg);color:var(--fg);border:1px solid var(--fg);height:var(--control-height);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 12px;text-decoration:none;display:inline-flex}#shorten-btn{min-width:98px;font-size:.9rem;position:relative}@media (hover:hover){.btn-primary:hover:not(:disabled),.btn-secondary:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--bg)}}.btn-primary:active:not(:disabled),.btn-secondary:active:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--bg)}.btn-primary:focus:not(:active):not(:disabled),.btn-secondary:focus:not(:active):not(:disabled){background:var(--btn-bg);color:var(--fg);border-color:var(--fg);outline:none}.btn-primary:disabled,.btn-secondary:disabled{cursor:not-allowed;opacity:.5;background:var(--surface);color:var(--muted);border-color:var(--border)}.flex{display:flex}.flex-1{flex:1 1 0}.min-w-0{min-width:0}.items-center{align-items:center}.gap-4{gap:16px}.mb-4{margin-bottom:16px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-8{margin-top:32px}.text-center{text-align:center}.text-white{color:var(--fg)}.text-muted{color:var(--muted)}.text-2xl{font-size:1.5rem}.text-5xl{font-size:3.6rem}.text-6xl{font-size:3.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.icon{width:18px;height:18px}.h-5,.w-5{width:20px;height:20px}.h-6,.w-6{width:24px;height:24px}.h-24,.w-24{width:96px;height:96px}.mr-2{margin-right:8px}.header-tight{margin-bottom:18px}.header-tight h1{margin:0}.header-tight p{margin-top:5px;margin-bottom:0}#result-section{transition:opacity .5s ease-in-out,transform .5s ease-in-out}.hidden{display:none!important}.invisible{visibility:hidden}.result-container{border:1px solid var(--border);background:var(--bg);padding:20px}.result-label{color:var(--muted);text-align:left;margin:0 0 8px;font-size:.875rem}.result-grid{grid-template-columns:1fr 220px;align-items:center;gap:24px;display:grid}.result-grid-left{text-align:left;padding-right:24px;position:relative}.result-grid-right{border-left:1px solid var(--border);justify-content:center;padding-left:24px;display:flex}.result-link-wrapper{text-align:left;flex:1;min-width:0}.result-link-row{display:block}.result-copy{margin-top:10px;font-weight:700}.result-link{color:var(--fg);word-break:break-all;border:1px solid #0000;padding:2px 0;font-size:1.125rem;font-weight:600;text-decoration:none;display:inline-block}.inline-qr-code{cursor:pointer;background:#fff;flex-shrink:0;width:200px;height:200px;padding:8px}@media (hover:hover){.result-link:hover{background:var(--fg);color:var(--bg);border-color:var(--bg)}}.result-actions{flex-wrap:wrap;gap:12px;display:flex}.result-actions button{flex:1;min-width:120px}#loading-spinner.spinner{border:3px solid var(--spinner-track);border-top-color:var(--spinner-color);border-right-color:var(--spinner-color);pointer-events:none;z-index:1;background:0 0;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;animation:.75s linear infinite spin;position:absolute;top:50%;left:50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal-overlay{background:var(--overlay);z-index:50;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-surface{background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:24px;box-shadow:0 8px 24px #0009}.qr-canvas{cursor:pointer;background:#fff;padding:4px}.qr-link{color:var(--fg);text-decoration:underline}.error-banner{background:var(--error-bg);color:var(--fg);border:1px solid var(--fg);z-index:50;cursor:pointer;align-items:center;gap:12px;max-width:480px;padding:16px;display:flex;position:fixed;top:20px;right:20px}@media (width<=640px){:root{--control-height:52px}#shorten-form{flex-direction:column!important}#shorten-btn{width:100%}.input-field,#long-url-input,.btn-primary,.btn-secondary,#shorten-btn{height:52px!important;min-height:52px!important}.result-grid{flex-direction:column;display:flex}.result-grid-right{border-left:none;order:1;justify-content:center;width:100%;margin:0;padding-left:0}.result-grid-left{text-align:center;flex-direction:column;order:2;align-items:center;width:100%;padding-right:0;display:flex}.result-label{display:none}.result-link-row{flex-direction:column;align-items:center;max-width:280px;display:flex}.result-link-wrapper{text-align:center;width:100%}.result-link{text-align:center;width:100%;display:block}.result-copy{width:auto;margin:10px 0 0}.inline-qr-code{width:180px;height:180px;margin:0 auto}}.error-banner svg{flex-shrink:0;width:24px;height:24px}.error-banner #error-message{word-wrap:break-word;flex:1;line-height:1.4}