*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,PingFang HK,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);min-height:100vh;color:#f0f0f0}.container{max-width:720px;margin:0 auto;padding:32px 20px}.header{text-align:center;margin-bottom:32px}.header h1{font-size:32px;background:linear-gradient(90deg,#ff6b6b,#feca57);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.header p{color:#aaa;font-size:14px}.skill-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.skill-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;border-radius:16px;border:2px solid #333;background:#ffffff0a;color:#ccc;cursor:pointer;font-size:14px;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.skill-card:hover{border-color:var(--card-color, #feca57);background:#ffffff14;transform:scale(1.08) translateY(-4px);z-index:1}.skill-card.active{border-color:var(--card-color, #feca57);background:#ffffff1a;box-shadow:0 0 24px color-mix(in srgb,var(--card-color, #feca57) 30%,transparent);transform:scale(1.08);z-index:1}.card-avatar{font-size:56px;line-height:1;filter:grayscale(.3);transition:all .3s cubic-bezier(.34,1.56,.64,1)}.skill-card:hover .card-avatar,.skill-card.active .card-avatar{filter:grayscale(0);transform:scale(1.2)}.card-name{font-weight:500;font-size:13px;transition:color .2s ease}.skill-card:hover .card-name{color:var(--card-color, #feca57)}.skill-card.active .card-name{color:var(--card-color, #feca57);font-weight:600}@media(max-width:480px){.skill-cards{grid-template-columns:repeat(2,1fr)}}.input-area{background:#ffffff0d;border:1px solid #333;border-radius:12px;padding:16px;margin-bottom:16px}.input-area textarea{width:100%;background:transparent;border:none;color:#f0f0f0;font-size:15px;resize:vertical;min-height:80px;outline:none;font-family:inherit}.input-area textarea::placeholder{color:#666}.send-btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(90deg,#ff6b6b,#feca57);color:#1a1a2e;font-size:16px;font-weight:600;cursor:pointer;transition:transform .1s}.send-btn:hover:not(:disabled){transform:translateY(-1px)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.result{margin-top:24px;padding:20px;background:#ffffff0d;border-left:4px solid #feca57;border-radius:8px;white-space:pre-wrap;line-height:1.7;font-size:15px}.result.error{border-left-color:#ff6b6b;color:#f99}.history{margin-top:32px}.history-item{margin-bottom:16px;padding:16px;background:#ffffff08;border-radius:8px;font-size:14px}.history-item .q{color:#aaa;margin-bottom:8px}.history-item .a{color:#f0f0f0;white-space:pre-wrap;line-height:1.6}.loading{display:inline-block;width:16px;height:16px;border:2px solid #1a1a2e;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}.chat-area{animation:fadeInUp .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}