:root {
  --c-bg: #F0F2F5;
  --c-bg-sub: #E4E7EB;
  --c-card: #FFFFFF;
  --c-primary: #FF3366;
  --c-secondary: #00C2FF;
  --c-accent: #2D3436;
  --c-text-sub: #636E72;
  --c-border: #D1D5DB;
  --c-grid: #E2E8F0;
  --s-success: #00B894;
  --s-warning: #FDCA40;
  --s-error: #FF3366;
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}
body.dark-mode {
  --c-bg: #0F172A;
  --c-bg-sub: #1E293B;
  --c-card: #1E293B;
  --c-primary: #FF3366;
  --c-secondary: #38BDF8;
  --c-accent: #F1F5F9;
  --c-text-sub: #94A3B8;
  --c-border: #334155;
  --c-grid: #334155;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Oswald','Noto Sans SC',sans-serif;background:var(--c-bg);color:var(--c-accent);height:100vh;height:100dvh;overflow:hidden;line-height:1.5;-webkit-text-size-adjust:100%;text-size-adjust:100%}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-text-sub);border-radius:3px}

.bg-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.bg-grid{position:absolute;width:200%;height:200%;top:-50%;left:-50%;background-image:linear-gradient(var(--c-grid) 1px,transparent 1px),linear-gradient(90deg,var(--c-grid) 1px,transparent 1px);background-size:40px 40px;transform:perspective(500px) rotateX(60deg);opacity:0.6;animation:gridMove 20s linear infinite}
@keyframes gridMove{0%{transform:perspective(500px) rotateX(60deg) translateY(0)}100%{transform:perspective(500px) rotateX(60deg) translateY(40px)}}
.bg-shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.4}
.shape-1{width:400px;height:400px;background:var(--c-primary);top:-100px;right:-100px;animation:float 10s ease-in-out infinite}
.shape-2{width:300px;height:300px;background:var(--c-secondary);bottom:-50px;left:-50px;animation:float 12s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
.bg-decoration{position:absolute;font-family:'Oswald',sans-serif;font-weight:700;font-size:10rem;color:var(--c-grid);opacity:0.5;line-height:1;z-index:-1;user-select:none}
.text-decoration-top{top:-40px;left:20px}
.text-decoration-bottom{bottom:-20px;right:20px;font-size:6rem}

.announcement-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px}
.announcement-modal.hidden{display:none}
.announcement-backdrop{position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,51,102,0.20),transparent 30%),radial-gradient(circle at bottom left,rgba(0,194,255,0.20),transparent 35%),rgba(15,23,42,0.54);backdrop-filter:blur(10px)}
.announcement-dialog{position:relative;width:min(720px,100%);max-height:min(88vh,920px);overflow:auto;background:linear-gradient(135deg,rgba(255,255,255,0.98),rgba(244,247,251,0.96));border:1px solid rgba(255,255,255,0.65);border-radius:28px;box-shadow:0 28px 80px rgba(15,23,42,0.26);padding:28px 28px 22px;animation:announcementPopup 0.35s var(--ease-out-quint)}
@keyframes announcementPopup{from{opacity:0;transform:translateY(18px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.announcement-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.announcement-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(45,52,54,0.06);border:1px solid rgba(45,52,54,0.08)}
.announcement-badge-mark{color:var(--c-primary);font-size:.8rem;font-weight:700;letter-spacing:1.2px}
.announcement-badge-text{color:var(--c-text-sub);font-size:.82rem}
.announcement-close{width:42px;height:42px;border:1px solid var(--c-border);background:rgba(255,255,255,0.82);color:var(--c-text-sub);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.announcement-close:hover{color:#fff;background:var(--c-primary);border-color:var(--c-primary);transform:rotate(90deg)}
.announcement-close svg{width:18px;height:18px}
.announcement-body{display:flex;flex-direction:column;gap:18px}
.announcement-section{padding:18px 20px;border-radius:20px;background:rgba(255,255,255,0.72);border:1px solid rgba(209,213,219,0.8)}
.announcement-section h3{font-size:1rem;margin-bottom:10px;color:var(--c-accent)}
.announcement-section.warning{background:linear-gradient(135deg,rgba(255,51,102,0.08),rgba(253,202,64,0.14));border-color:rgba(255,51,102,0.18)}
.announcement-list{padding-left:20px;color:var(--c-text-sub);line-height:1.8;display:grid;gap:8px}
.announcement-consent{margin-top:18px;padding:16px 18px;border-radius:18px;background:rgba(45,52,54,0.04);border:1px dashed rgba(99,110,114,0.28)}
.announcement-consent .tech-btn{margin-top:14px}
.announcement-checkbox{display:flex;align-items:flex-start;gap:12px;color:var(--c-accent);line-height:1.7;cursor:pointer}
.announcement-checkbox input{margin-top:4px;width:18px;height:18px;accent-color:var(--c-primary);flex-shrink:0}
.tech-btn{border:none;background:var(--c-accent);color:#fff;font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:1px;padding:10px 20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-size:.9rem}
.tech-btn:hover{background:var(--c-primary)}
.tech-btn.text-only{background:transparent;color:var(--c-text-sub);border-bottom:1px solid transparent;border-radius:0}
.tech-btn.text-only:hover{color:var(--c-primary);border-color:var(--c-primary)}
.tech-btn:disabled{opacity:0.5;cursor:not-allowed}
.tech-btn:disabled:hover{background:var(--c-accent)}

.main-viewport{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;z-index:10}
.scene-container{width:100%;height:100%;position:relative}
.view-layer{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .6s var(--ease-out-quint);opacity:0;pointer-events:none;transform:scale(0.9) translateY(20px)}
.view-layer.active{opacity:1;pointer-events:all;transform:scale(1) translateY(0)}

.dashboard-header{text-align:center;margin-bottom:40px;position:relative}
.dashboard-header h1{font-size:4rem;font-weight:900;line-height:.9;letter-spacing:-2px;text-transform:uppercase;background:linear-gradient(135deg,var(--c-accent) 0,var(--c-text-sub) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:2}
.header-sub{font-family:'Noto Sans SC',sans-serif;font-size:1rem;letter-spacing:4px;color:var(--c-text-sub);margin-top:10px}
.header-decoration{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:120px;height:120px;border:1px dashed var(--c-primary);border-radius:50%;opacity:0.2;animation:rotate 20s linear infinite}
@keyframes rotate{to{transform:translateX(-50%) rotate(360deg)}}

.card-container{display:flex;gap:20px;perspective:1000px;flex-wrap:wrap;justify-content:center;max-width:1200px;padding:0 20px}

.tech-card{position:relative;width:240px;height:320px;background:var(--c-card);cursor:pointer;transition:all .3s var(--ease-out-quint);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tech-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,0.1)}
.tech-card:hover .card-icon{transform:scale(1.1);color:var(--c-primary);border-color:var(--c-primary)}
.tech-card:hover .card-action span{letter-spacing:2px}
.tech-card:hover .card-action svg{transform:translateX(4px)}
.card-bg{position:absolute;inset:0;background:var(--c-card);z-index:0;border:1px solid var(--c-border)}
.tech-card:hover .card-bg{border-color:var(--c-primary)}
.card-decoration-tl{position:absolute;top:0;left:0;width:20px;height:20px;border-top:2px solid var(--c-primary);border-left:2px solid var(--c-primary);z-index:1;opacity:0;transition:opacity .3s}
.card-decoration-br{position:absolute;bottom:0;right:0;width:20px;height:20px;border-bottom:2px solid var(--c-secondary);border-right:2px solid var(--c-secondary);z-index:1;opacity:0;transition:opacity .3s}
.tech-card:hover .card-decoration-tl,.tech-card:hover .card-decoration-br{opacity:1}
.card-content{position:relative;z-index:2;height:100%;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.card-icon{width:48px;height:48px;border:1px solid var(--c-border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--c-text-sub);transition:all .3s}
.card-icon svg{width:24px;height:24px}
.card-info h3{font-size:1.5rem;font-weight:700;margin-bottom:4px}
.card-info p{font-family:'Oswald',sans-serif;font-size:.8rem;color:var(--c-text-sub);letter-spacing:1px}
.card-id{font-family:'Oswald',sans-serif;font-size:4rem;font-weight:900;color:var(--c-bg-sub);position:absolute;top:40px;right:20px;line-height:1;pointer-events:none;opacity:0.5}
.card-action{display:flex;align-items:center;justify-content:space-between;font-family:'Oswald',sans-serif;font-weight:600;font-size:.9rem;color:var(--c-text-sub);border-top:1px solid var(--c-border);padding-top:16px}
.card-action svg{width:16px;height:16px;transition:transform .3s}
.card-action span{transition:letter-spacing .3s}

.workspace-container{display:flex;width:90%;max-width:1000px;height:80vh;background:rgba(255,255,255,0.8);backdrop-filter:blur(20px);border:1px solid var(--c-border);border-radius:4px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,0.1)}
body.dark-mode .workspace-container{background:rgba(15,23,42,0.85)}
.workspace-sidebar{width:280px;background:var(--c-bg);padding:30px;display:flex;flex-direction:column;border-right:1px solid var(--c-border);position:relative}
.nav-back-btn{display:flex;align-items:center;gap:10px;background:none;border:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:1rem;cursor:pointer;color:var(--c-text-sub);margin-bottom:60px;transition:all .3s}
.nav-back-btn svg{width:20px;height:20px}
.nav-back-btn:hover{color:var(--c-accent);transform:translateX(-5px)}
.project-indicator h2{font-size:2rem;font-weight:900;line-height:1.1;margin-bottom:10px}
.project-indicator p{font-family:'Oswald',sans-serif;font-size:.9rem;color:var(--c-text-sub);letter-spacing:1px}
.decor-line{position:absolute;bottom:30px;left:30px;width:40px;height:4px;background:var(--c-accent)}
.workspace-main{flex:1;position:relative;background:radial-gradient(circle at 50% 50%,#fff 0%,transparent 80%),repeating-linear-gradient(45deg,var(--c-bg-sub) 0,var(--c-bg-sub) 1px,transparent 1px,transparent 10px);display:flex;align-items:center;justify-content:center}
body.dark-mode .workspace-main{background:radial-gradient(circle at 50% 50%,#1e293b 0%,transparent 80%),repeating-linear-gradient(45deg,#0f172a 0,#0f172a 1px,transparent 1px,transparent 10px)}

.panel-box{width:400px;background:var(--c-card);border:1px solid var(--c-border);box-shadow:0 10px 30px rgba(0,0,0,0.05)}
.panel-header{height:48px;background:var(--c-bg);border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.panel-header.success{background:var(--s-success);color:#fff}
.panel-header.success .panel-title{color:#fff}
.panel-title{font-family:'Oswald',sans-serif;font-size:.9rem;font-weight:600;color:var(--c-text-sub);letter-spacing:1px}
.panel-dots{display:flex;gap:4px}
.panel-dots::before,.panel-dots::after{content:'';width:8px;height:8px;background:var(--c-border);border-radius:50%}
.panel-body{padding:30px}

.qr-scanner-frame{width:240px;height:240px;margin:0 auto 20px;position:relative;border:1px solid var(--c-border);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}
.scanner-corner{position:absolute;width:20px;height:20px;border-color:var(--c-secondary);border-style:solid;border-width:0;z-index:2}
.scanner-corner.tl{top:-1px;left:-1px;border-top-width:3px;border-left-width:3px}
.scanner-corner.tr{top:-1px;right:-1px;border-top-width:3px;border-right-width:3px}
.scanner-corner.bl{bottom:-1px;left:-1px;border-bottom-width:3px;border-left-width:3px}
.scanner-corner.br{bottom:-1px;right:-1px;border-bottom-width:3px;border-right-width:3px}
.scanner-line{position:absolute;top:0;left:5%;width:90%;height:2px;background:var(--c-secondary);box-shadow:0 0 10px var(--c-secondary);animation:scan 2s ease-in-out infinite;z-index:10;opacity:0.8;pointer-events:none}
@keyframes scan{0%{top:4%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:94%;opacity:0}}
.qr-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qr-content #qrCode{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.qr-content img{display:block;max-width:100%;max-height:100%;object-fit:contain;margin:0 auto;transition:filter .3s}
.qr-loading{width:36px;height:36px;border:4px solid var(--c-border);border-top-color:var(--c-secondary);border-radius:50%;animation:qrSpin 1s linear infinite}
@keyframes qrSpin{to{transform:rotate(360deg)}}
.qr-expired{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,0.7);backdrop-filter:blur(3px);color:#838383;font-size:44px;cursor:pointer;user-select:none;z-index:20}
.scan-status{font-family:'Oswald',sans-serif;font-size:.9rem;text-align:center;margin-top:10px;color:var(--c-text-sub)}
.workspace-feedback{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px}
.workspace-feedback .scan-status{margin-top:0}
.workspace-feedback .refresh-btn{width:auto;padding:7px 14px;font-size:.78rem}
.tech-btn svg{width:14px;height:14px;flex-shrink:0}
.tech-form{width:100%}
.input-group{margin-bottom:20px}
.input-group label{display:block;font-family:'Oswald',sans-serif;font-size:.8rem;color:var(--c-text-sub);margin-bottom:6px}
.tech-input{width:100%;padding:10px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:0;font-family:'Oswald',sans-serif;font-size:.9rem;color:var(--c-accent)}
.tech-input:focus{outline:none;border-color:var(--c-primary)}
.tech-input::placeholder{color:var(--c-text-sub);opacity:0.5}
.input-row{display:flex;gap:10px}
.input-row .tech-input{flex:1}
.input-row .tech-btn{width:132px;flex:0 0 132px}
.captcha-row{display:flex;gap:10px}
.captcha-row .tech-input{flex:1}
.captcha-img{width:110px;height:43px;object-fit:contain;background:#fff;border:1px solid var(--c-border);cursor:pointer;flex:0 0 110px}

.panel-icon{display:flex;align-items:center;gap:6px}
.panel-icon svg{width:20px;height:20px}
.result-summary{font-size:.9rem;color:var(--c-text-sub);margin-bottom:16px;line-height:1.6}
.token-data{background:var(--c-bg);padding:16px;font-family:'Oswald',sans-serif;font-size:.82rem;color:var(--c-accent);border:1px solid var(--c-border);word-break:break-all;max-height:200px;overflow:auto;margin-bottom:16px;white-space:pre-wrap}
.result-actions{display:flex;gap:10px;margin-bottom:12px}
.result-actions .tech-btn{flex:1}
.tech-btn.action{background:var(--c-accent);color:#fff}
.tech-btn.action:hover{background:var(--c-primary)}

.system-controls{position:fixed;bottom:20px;right:20px;display:flex;gap:8px;z-index:1100}
.sys-btn{width:40px;height:40px;border-radius:8px;background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-sub);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px)}
.sys-btn:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.sys-btn svg{width:18px;height:18px}
body.dark-mode .sys-btn{background:#1e293b;color:#94a3b8}
body.dark-mode .sys-btn:hover{background:#334155;color:#fff}

.copy-tooltip{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--c-accent);color:#fff;padding:10px 24px;font-family:'Oswald',sans-serif;font-size:.9rem;z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none}
.copy-tooltip.show{opacity:1}

@media(max-width:1024px){
  .card-container{gap:16px}
  .tech-card{width:220px;height:300px}
  .workspace-container{width:94%}
}
@media(max-width:768px),(max-height:620px){
  .dashboard-header{margin-bottom:28px}
  .dashboard-header h1{font-size:2.5rem}
  .card-container{gap:12px;padding:0 12px}
  .tech-card{width:180px;height:260px}
  .tech-card .card-icon{width:36px;height:36px}
  .tech-card .card-icon svg{width:18px;height:18px}
  .tech-card .card-info h3{font-size:1rem}
  .tech-card .card-info p{font-size:.65rem}
  .tech-card .card-id{font-size:2.5rem;top:20px;right:10px}
  .tech-card .card-action{padding-top:10px;font-size:.75rem}
  .workspace-container{flex-direction:column;width:95%;height:90vh;height:90dvh;overflow-y:auto}
  .workspace-sidebar{width:100%;padding:16px;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--c-border)}
  .nav-back-btn{margin-bottom:0;margin-right:16px}
  .decor-line{display:none}
  .project-indicator h2{font-size:1.2rem}
  .workspace-main{padding:16px 0}
  .panel-box{width:100%}
  .result-actions{flex-direction:column}
  .tech-input{font-size:16px}
  .captcha-img{height:46px}
}
@media(max-width:480px){
  .dashboard-header h1{font-size:2rem}
  .header-sub{font-size:.85rem;letter-spacing:2px}
  .tech-card{width:calc(50% - 6px);height:225px}
  .tech-card .card-content{padding:16px}
  .tech-card .card-id{font-size:2rem;top:14px;right:8px}
  .panel-body{padding:20px}
  .qr-scanner-frame{width:200px;height:200px;margin-bottom:14px}
  .captcha-img{width:96px;flex:0 0 96px}
  .input-row .tech-btn{width:108px;flex:0 0 108px;font-size:.78rem}
  .announcement-modal{padding:16px}
  .announcement-dialog{padding:20px 16px 16px;border-radius:20px}
  .announcement-consent .tech-btn{margin-top:10px}
  .system-controls{bottom:12px;right:12px;gap:6px}
  .copy-tooltip{bottom:64px;font-size:.8rem;max-width:88vw}
}
@media(max-height:620px){
  .dashboard-header{margin-bottom:16px}
  .header-sub{margin-top:6px}
  .tech-card{height:220px}
  .qr-scanner-frame{width:180px;height:180px}
  .panel-body{padding:16px}
}