/* 网站评分系统 - 主样式表 */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;background:#f0f2f5;color:#333;min-height:100vh;}
a{text-decoration:none;color:#1890ff;}
a:hover{color:#40a9ff;}

/* 顶部导航栏 */
.header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);position:sticky;top:0;z-index:100;}
.header-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:56px;}
.logo{font-size:20px;font-weight:700;color:#f5a623;}
.logo span{color:#333;font-size:14px;margin-left:8px;}
.user-info{display:flex;align-items:center;gap:12px;}
.user-info img{width:32px;height:32px;border-radius:50%;}
.user-info .uname{font-size:14px;color:#333;}
.btn{display:inline-block;padding:6px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s;border:none;}
.btn-login{background:#f5a623;color:#fff;}
.btn-login:hover{background:#e09515;}
.btn-logout{background:#fff;color:#999;border:1px solid #d9d9d9;}
.btn-logout:hover{color:#f5a623;border-color:#f5a623;}

/* 主体布局 */
.main{max-width:1200px;margin:20px auto;padding:0 20px;display:flex;gap:20px;min-height:calc(100vh - 136px);}
.sidebar{width:320px;flex-shrink:0;}
.content{flex:1;}

/* 卡片样式 */
.card{background:#fff;border-radius:8px;padding:24px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:20px;}
.card-title{font-size:16px;font-weight:600;color:#333;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:8px;}
.card-title .icon{font-size:18px;}

/* 当前网站评分区 */
.score-display{text-align:center;padding:20px 0;}
.site-name{font-size:18px;font-weight:600;color:#333;margin-bottom:8px;}
.site-url{font-size:13px;color:#999;margin-bottom:20px;word-break:break-all;}
.big-stars{display:inline-flex;gap:4px;margin-bottom:12px;font-size:0;}
.big-star{display:inline-block;width:36px;height:36px;background-size:contain;background-repeat:no-repeat;background-position:center;}
.big-star-empty{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23e0e0e0'/%3E%3C/svg%3E");}
.big-star-full{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23f5a623'/%3E%3C/svg%3E");}
.big-star-half{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='hg' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='50%25' stop-color='%23f5a623'/%3E%3Cstop offset='50%25' stop-color='%23e0e0e0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='url(%23hg)'/%3E%3C/svg%3E");}

.score-number{font-size:48px;font-weight:700;color:#f5a623;line-height:1;}
.score-votes{font-size:14px;color:#999;margin-top:6px;}

/* 评分交互区 */
.score-interact{text-align:center;padding:10px 0;}
.score-interact .prompt{font-size:15px;color:#333;margin-bottom:14px;}
.score-select{display:inline-flex;gap:4px;cursor:pointer;margin-bottom:10px;font-size:0;}
.score-star{cursor:pointer;display:inline-block;width:32px;height:32px;background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .15s;}
.score-star:hover{transform:scale(1.15);}
.score-star.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23f5a623'/%3E%3C/svg%3E");}
.score-star.unsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23e0e0e0'/%3E%3C/svg%3E");}
.score-hint{font-size:16px;font-weight:600;color:#f5a623;min-height:24px;margin-bottom:12px;}
.btn-submit{display:inline-block;padding:10px 40px;background:#f5a623;color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:all .2s;}
.btn-submit:hover{background:#e09515;}
.btn-submit:disabled{background:#ccc;cursor:not-allowed;}
.already-voted{color:#999;font-size:14px;padding:20px 0;text-align:center;}
.already-voted .my-score{color:#f5a623;font-size:24px;font-weight:700;}

/* 历史记录 */
.history-list{}
.history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f5f5f5;transition:background .2s;}
.history-item:hover{background:#fafafa;}
.history-item:last-child{border-bottom:none;}
.history-info{flex:1;min-width:0;}
.history-title{font-size:14px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;}
.history-time{font-size:12px;color:#bbb;}
.history-score{font-weight:700;color:#f5a623;font-size:15px;white-space:nowrap;}
.history-empty{text-align:center;color:#bbb;padding:30px 0;font-size:14px;}

/* 登录提示 */
.login-tip{text-align:center;padding:20px 0;}
.login-tip p{font-size:16px;color:#666;margin-bottom:16px;}

/* 页脚 */
.footer{text-align:center;padding:20px;color:#bbb;font-size:12px;}

/* 响应式 */
@media (max-width:768px){
    .main{flex-direction:column;margin:10px auto;padding:0 10px;}
    .sidebar{width:100%;}
    .card{padding:16px;}
    .score-number{font-size:36px;}
    .big-star{width:28px;height:28px;}
    .score-star{width:26px;height:26px;}
}

/* Toast消息 */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;padding:12px 24px;border-radius:6px;font-size:15px;z-index:9999;pointer-events:none;animation:toastIn .3s ease;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-50%) scale(.8);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}

/* 加载状态 */
.loading{text-align:center;padding:40px;color:#999;}
.loading::after{content:'';display:inline-block;width:20px;height:20px;border:2px solid #f0f0f0;border-top-color:#f5a623;border-radius:50%;animation:spin .8s linear infinite;margin-left:8px;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 打分页面特殊布局 */
.rate-layout{display:flex;gap:20px;}
.rate-left{width:320px;flex-shrink:0;}
.rate-right{flex:1;}
@media (max-width:768px){.rate-layout{flex-direction:column;}.rate-left{width:100%;}}