body{background-color:#f4f4f4;margin:0;display:flex;justify-content:center;align-items:center}#app{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem;background-color:white;border-radius:.5rem;box-shadow:0 0 1rem rgba(0,0,0,.1);padding:1rem}h2{color:#111111}h3{color:#111111}a{color:#FF5733;text-decoration:none}button{font-size:1rem;line-height:2rem;padding:.2rem .5rem;text-align:center;font-family:fzzyjt;border:none;box-shadow:0 0 .5rem rgba(0,0,0,.4);background-color:rgba(255,68,0,.9);color:white;border-radius:.5rem;text-wrap:nowrap;overflow-wrap:nowrap;word-break:keep-all;white-space:nowrap;transition:all .2s}button:hover{scale:1.05;background-color:rgba(255,68,0,1)}button:active{scale:1;box-shadow:inset 0 0 .5rem rgba(0,0,0,.2)}button[disabled]{color:#AAAAAA;background-color:#EEEEEE;box-shadow:none;cursor:not-allowed}.button-with-label{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.button-with-label label{font-size:1rem;font-family:fzzyjt}.top-bar{width:100%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;row-gap:1.5rem}.top-bar>*{position:relative;z-index:1}.top-bar a{color:#495057;text-decoration:none;font-weight:600;font-size:1em;padding:.4rem .8rem;border-radius:.5rem;transition:all .3s ease;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);line-height:.8rem}.top-bar a:hover{background:rgba(255,255,255,.9);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.15)}.top-bar button{line-height:.8rem}.top-button{line-height:.8rem;background:#ff4400;color:white;border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.85em;font-weight:600;transition:all .3s ease;position:relative;overflow:hidden}.top-button:hover{background:#ff4400;transform:translateY(-2px);box-shadow:0 4px 15px #c82333}.user-info{display:flex;align-items:center;gap:1.2rem;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);padding:.5rem 1.2rem;border-radius:.8rem;border:1px solid rgba(0,0,0,.1)}.user-details{display:flex;flex-direction:column;gap:.5rem}.user-details label{font-weight:600;font-size:1.2rem;color:#495057;text-shadow:0 1px 2px rgba(0,0,0,.1)}.user-id-section{display:flex;align-items:center;gap:.75rem;font-size:.9em}.user-id-label{font-weight:500;color:rgba(73,80,87,.9)}.user-id-value{background:rgba(255,255,255,.8);padding:.3rem .75rem;border-radius:.5rem;font-family:'Courier New',monospace;border:1px solid rgba(0,0,0,.15);color:#495057;font-weight:500;backdrop-filter:blur(5px);position:relative;overflow:hidden;transition:all .3s ease}.user-id-value:hover{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.25);transform:scale(1.02)}.user-id-value::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}.user-id-value:hover::after{left:100%}.copy-btn{background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:.4rem;border-radius:.5rem;color:#495057;transition:all .3s ease;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center}.copy-btn:hover{background:rgba(255,255,255,.95);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.15)}.copy-btn:active{transform:scale(.95) translateY(0)}.copy-success{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#28a745;color:white;padding:1rem 2rem;border-radius:.5rem;z-index:9999;font-size:1rem;box-shadow:0 4px 20px rgba(0,0,0,.3);animation:copyFeedback 2s ease forwards}@keyframes copyFeedback{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.user-actions{display:flex;gap:.75rem}.profile-btn{background:linear-gradient(135deg,#6c757d,#495057);color:white;border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.85em;font-weight:600;transition:all .3s ease;box-shadow:0 2px 8px rgba(108,117,125,.3)}#logout-button{background:linear-gradient(135deg,#dc3545,#c82333);color:white;border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.85em;font-weight:600;transition:all .3s ease;box-shadow:0 2px 8px rgba(220,53,69,.3);position:relative;overflow:hidden}#logout-button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}#logout-button:hover::before{left:100%}#logout-button:hover{background:linear-gradient(135deg,#c82333,#dc3545);transform:translateY(-2px);box-shadow:0 4px 15px rgba(220,53,69,.4)}#user-name{font-family:fzlb}@media screen and (orientation:landscape){:root{font-size:16px}#return{order:-1}}@media screen and (orientation:portrait){:root{font-size:48px}}footer{text-align:center;padding:16px;color:black;display:flex;flex-direction:row;gap:1em;justify-content:center}footer a{color:#b6c4d4;text-decoration:none;vertical-align:middle;line-height:1.5em;font-size:16px;font-weight:400;display:inline-flex;align-items:center}