:root{--page-bg: #e0e0e0;--clay-inner: #d8d8d8;--soft-shadow: rgba(0, 0, 0, .12);--deep-shadow: rgba(0, 0, 0, .18);--sharp-highlight: rgba(255, 255, 255, .85);--etched-text: #999999}.login-page{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:var(--page-bg);padding:2rem}.login-container{background:var(--clay-inner);border-radius:50px;padding:4rem;max-width:520px;width:100%;box-shadow:inset 8px 8px 20px var(--soft-shadow),inset -8px -8px 20px var(--sharp-highlight)}.login-title{font-size:4.5rem;font-weight:900;color:var(--page-bg);text-transform:uppercase;text-align:center;margin-bottom:.5rem;text-shadow:.5px .5px 0px var(--sharp-highlight),1px 1px 0px var(--soft-shadow),2px 2px 2px var(--soft-shadow),3px 3px 5px var(--soft-shadow)}.login-subtitle{text-align:center;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--etched-text);margin-bottom:3rem;text-shadow:-1px -1px 1px rgba(0,0,0,.1),1px 1px 1px var(--sharp-highlight)}.login-tabs{display:flex;gap:.75rem;margin-bottom:2.5rem;background:var(--page-bg);border-radius:18px;padding:.5rem;box-shadow:inset 4px 4px 8px var(--soft-shadow),inset -4px -4px 8px var(--sharp-highlight)}.login-tab{flex:1;background:transparent;border:none;border-radius:12px;padding:.75rem 1rem;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--etched-text);cursor:pointer;transition:all .2s ease;text-shadow:-1px -1px 1px rgba(0,0,0,.1),1px 1px 1px var(--sharp-highlight)}.login-tab.active{background:var(--clay-inner);color:var(--etched-text);box-shadow:3px 3px 8px var(--soft-shadow),-3px -3px 8px var(--sharp-highlight)}.login-form{display:flex;flex-direction:column;gap:1.25rem}.login-field-label{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--etched-text);margin-bottom:.5rem;text-shadow:-1px -1px 1px rgba(0,0,0,.1),1px 1px 1px var(--sharp-highlight)}.login-field{background:var(--clay-inner);border:none;border-radius:12px;padding:1.1rem 1.25rem;font-size:1rem;font-weight:600;color:#555;width:100%;box-sizing:border-box;box-shadow:inset 4px 4px 8px var(--soft-shadow),inset -4px -4px 8px var(--sharp-highlight);transition:all .3s ease;outline:none}.login-field::placeholder{color:#bbb;font-weight:500}.login-field:focus{box-shadow:inset 6px 6px 12px var(--soft-shadow),inset -6px -6px 12px var(--sharp-highlight)}.login-submit-btn{background:var(--page-bg);color:var(--etched-text);font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:3px;padding:1.25rem 2rem;border:none;border-radius:18px;cursor:pointer;margin-top:.5rem;width:100%;box-shadow:6px 6px 15px var(--soft-shadow),-3px -3px 8px var(--sharp-highlight);text-shadow:-1px -1px 2px rgba(0,0,0,.25),1px 1px 1px var(--sharp-highlight);transition:all .2s ease}.login-submit-btn:hover{box-shadow:8px 8px 20px var(--soft-shadow),-4px -4px 10px var(--sharp-highlight)}.login-submit-btn:active{box-shadow:inset 4px 4px 8px var(--soft-shadow),inset -4px -4px 8px var(--sharp-highlight);transform:translateY(1px)}.login-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-divider{display:flex;align-items:center;gap:1rem;margin:1.75rem 0}.login-divider-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(0,0,0,.1),transparent)}.login-divider-label{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:3px;color:var(--etched-text);text-shadow:-1px -1px 1px rgba(0,0,0,.1),1px 1px 1px var(--sharp-highlight);white-space:nowrap}.login-wallet-btn{background:var(--page-bg);color:var(--etched-text);font-size:.9rem;font-weight:900;text-transform:uppercase;letter-spacing:2px;padding:1rem 2rem;border:none;border-radius:18px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;box-shadow:5px 5px 12px var(--soft-shadow),-3px -3px 8px var(--sharp-highlight);text-shadow:-1px -1px 2px rgba(0,0,0,.2),1px 1px 1px var(--sharp-highlight);transition:all .2s ease;font-variant-emoji:text;filter:grayscale(100%)}.login-wallet-btn:hover{box-shadow:7px 7px 18px var(--soft-shadow),-4px -4px 10px var(--sharp-highlight)}.login-wallet-btn:active{box-shadow:inset 4px 4px 8px var(--soft-shadow),inset -4px -4px 8px var(--sharp-highlight)}.login-wallet-btn:disabled{opacity:.6;cursor:not-allowed}.login-error{background:var(--page-bg);border-radius:12px;padding:.9rem 1.25rem;font-size:.82rem;font-weight:700;color:#9a4a4a;text-align:center;box-shadow:inset 3px 3px 6px var(--soft-shadow),inset -3px -3px 6px var(--sharp-highlight);text-shadow:-.5px -.5px 1px rgba(0,0,0,.1),.5px .5px 1px var(--sharp-highlight)}.login-success{background:var(--page-bg);border-radius:12px;padding:.9rem 1.25rem;font-size:.82rem;font-weight:700;color:#4a7a4a;text-align:center;box-shadow:inset 3px 3px 6px var(--soft-shadow),inset -3px -3px 6px var(--sharp-highlight)}.login-wallet-address{text-align:center;font-family:monospace;font-size:.8rem;font-weight:700;color:var(--etched-text);opacity:.7;text-shadow:-1px -1px 1px rgba(0,0,0,.1),1px 1px 1px var(--sharp-highlight);margin-top:.5rem}.login-footer{text-align:center;margin-top:2rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--etched-text);text-shadow:-1px -1px 1px rgba(0,0,0,.1),1px 1px 1px var(--sharp-highlight)}:root{--clay-base: #d4d6d0;--clay-shadow: #b9bcb4;--clay-highlight: #eef0ea;--clay-text: #636860;--clay-accent: #848882;--etch-dark: rgba(0, 0, 0, .14);--etch-light: rgba(255, 255, 255, .42)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;background:var(--clay-base);color:var(--clay-text);font-family:Comic Sans MS,Rounded,system-ui,-apple-system,sans-serif;overflow:hidden}.sculpted{filter:url(#clay-mold)}.etched-no-color{color:var(--clay-base);text-shadow:-1px -1px 1px var(--etch-dark),1px 1px 1px var(--etch-light)}.color-etched{color:var(--clay-text);text-shadow:-1px -1px 1px var(--etch-dark),1px 1px 1px var(--etch-light)}.dopple-app{width:100%;height:100%;display:flex;background:var(--clay-base);position:relative}.dopple-app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");z-index:1000}.viewport{flex:1;position:relative;margin:16px 0 16px 16px;border-radius:30px;overflow:hidden;background:var(--clay-base);box-shadow:inset 10px 10px 25px var(--clay-shadow),inset -8px -8px 20px var(--clay-highlight)}.viewport canvas{width:100%!important;height:100%!important}.viewport-loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:var(--clay-base);border-radius:inherit;pointer-events:none;opacity:1;transition:opacity .25s ease}.viewport-loading.fade-out{opacity:0}.viewport-loading-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.12);border-top-color:#ffffff8c;border-radius:50%;animation:vp-spin .8s linear infinite}@keyframes vp-spin{to{transform:rotate(360deg)}}.demo-panel{width:340px;background:var(--clay-base);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;margin:16px;border-radius:24px;box-shadow:7px 7px 15px var(--clay-shadow),-7px -7px 15px var(--clay-highlight)}.panel-header{display:flex;justify-content:space-between;align-items:center}.demo-panel h2{font-size:18px;margin-bottom:4px}.back-chip{padding:4px 12px;font-size:12px;font-weight:600;background:var(--clay-base);color:var(--clay-text);border:none;border-radius:12px;cursor:pointer;box-shadow:3px 3px 6px var(--clay-shadow),-3px -3px 6px var(--clay-highlight);transition:all .15s}.back-chip:hover{box-shadow:4px 4px 8px var(--clay-shadow),-4px -4px 8px var(--clay-highlight);transform:translateY(-1px)}.back-chip:active{box-shadow:inset 3px 3px 6px var(--clay-shadow),inset -2px -2px 4px var(--clay-highlight);transform:translateY(1px)}.demo-panel section{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}.demo-panel label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--clay-accent);display:flex;align-items:center;gap:8px;font-weight:700}.demo-panel .value{font-size:14px;color:var(--clay-text);font-weight:600}.demo-panel .badge{font-size:10px;background:var(--clay-base);padding:2px 10px;border-radius:10px;color:var(--clay-accent);text-transform:none;letter-spacing:0;box-shadow:inset 2px 2px 4px var(--clay-shadow),inset -2px -2px 4px var(--clay-highlight)}.btn-row{display:flex;flex-wrap:wrap;gap:5px}.chip{padding:5px 12px;font-size:12px;font-weight:600;background:var(--clay-base);color:var(--clay-accent);border:none;border-radius:14px;cursor:pointer;transition:all .15s;box-shadow:3px 3px 6px var(--clay-shadow),-3px -3px 6px var(--clay-highlight)}.chip:hover{color:var(--clay-text);box-shadow:4px 4px 8px var(--clay-shadow),-4px -4px 8px var(--clay-highlight);transform:translateY(-1px)}.chip.active{color:var(--clay-text);font-weight:800;box-shadow:inset 3px 3px 6px var(--clay-shadow),inset -2px -2px 4px var(--clay-highlight);transform:translateY(1px)}.primary-btn{padding:10px 20px;font-size:14px;font-weight:700;background:var(--clay-base);color:var(--clay-text);border:none;border-radius:16px;cursor:pointer;transition:all .15s;margin-top:6px;box-shadow:5px 5px 12px var(--clay-shadow),-5px -5px 12px var(--clay-highlight);letter-spacing:.5px}.primary-btn:hover{box-shadow:6px 6px 14px var(--clay-shadow),-6px -6px 14px var(--clay-highlight);transform:translateY(-2px)}.primary-btn:active{box-shadow:inset 4px 4px 8px var(--clay-shadow),inset -3px -3px 6px var(--clay-highlight);transform:translateY(1px)}.color-row{display:flex;gap:8px;flex-wrap:wrap}.color-swatch{display:flex;flex-direction:column;align-items:center;gap:2px}.color-swatch .swatch{width:30px;height:30px;border-radius:50%;box-shadow:inset 2px 2px 4px #0000001a,inset -2px -2px 4px #ffffff4d,3px 3px 6px var(--clay-shadow),-3px -3px 6px var(--clay-highlight)}.color-swatch span{font-size:9px;color:var(--clay-accent);font-weight:600}.clip-list{display:flex;flex-wrap:wrap;gap:4px}.clip-tag{font-size:10px;padding:3px 8px;background:var(--clay-base);border:none;border-radius:8px;color:var(--clay-accent);font-weight:600;box-shadow:inset 2px 2px 3px var(--clay-shadow),inset -1px -1px 2px var(--clay-highlight)}.muted{font-size:11px;color:var(--clay-accent);opacity:.7}footer.muted{margin-top:auto;padding-top:8px;text-align:center}.demo-panel::-webkit-scrollbar{width:6px}.demo-panel::-webkit-scrollbar-track{background:transparent}.demo-panel::-webkit-scrollbar-thumb{background:var(--clay-shadow);border-radius:3px}.demo-panel::-webkit-scrollbar-thumb:hover{background:var(--clay-accent)}