*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:#0f172a;background:#e5e7eb;display:flex;flex-direction:column}a{color:inherit}
.header{position:sticky;top:0;z-index:10;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#ffffffaa;backdrop-filter:saturate(150%) blur(6px);border-bottom:1px solid #e2e8f0;flex-shrink:0}
.brand{display:flex;align-items:center;gap:8px}
.logo{height:32px;width:auto}
.brand-text{font-weight:700;font-size:18px;letter-spacing:0.2px;color:#0f172a}
.net-banner{margin-left:12px;padding:6px 10px;border-radius:8px;background:#fee2e2;color:#7f1d1d;font-size:12px}
.hidden{display:none}
.loading-overlay{position:fixed;inset:0;background:#e5e7eb;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}
.loading-overlay.hidden{display:none}
.loading-spinner{width:48px;height:48px;border:4px solid #cbd5e1;border-top-color:#0ea5e9;border-radius:50%;animation:spin 1s linear infinite}
.loading-text{margin-top:12px;font-size:14px;color:#64748b}
.container{flex:1;overflow-y:auto;max-width:920px;width:100%;margin:0 auto;padding:16px 16px 80px 16px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.title{margin:0 0 6px 0;font-size:20px}
.section-title{margin:0 0 16px 0;font-size:20px;font-weight:700;color:#0f172a}
.subtitle{margin:0 0 10px 0;font-size:13px;color:#475569}
.uploader{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.llm-toggle{font-size:13px;color:#334155;display:flex;align-items:center;gap:6px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#0ea5e9;color:#fff;border-radius:10px;cursor:pointer;user-select:none;transition:transform .1s ease,box-shadow .1s ease,background .15s ease;border:none}
.btn:active{transform:scale(0.93);box-shadow:inset 0 2px 6px rgba(0,0,0,.18)}
.btn.ghost{background:#fff;color:#0f172a;border:1px solid #e2e8f0}
.btn.ghost:active{transform:scale(0.93);background:#f1f5f9;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.btn input{display:none}
.status{font-size:13px;color:#0f172a}
.preview{margin-top:12px;border:1px dashed #cbd5e1;border-radius:12px;padding:12px;display:grid;gap:8px}
.preview img{max-width:100%;height:auto;border-radius:10px}
.heic-note{font-size:12px;color:#7c2d12;background:#ffedd5;border:1px solid #fdba74;border-radius:8px;padding:8px}
.result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;min-height:44px}
.result-btns{display:flex;gap:10px}
.result-content{margin-top:8px}
.histogram{margin:10px 0 6px 0;border:1px solid #e2e8f0;border-radius:10px;padding:8px;background:#f8fafc;display:flex;flex-direction:column;align-items:center}
.histogram-hidden{display:none !important}
.histogram-title{font-size:12px;color:#64748b;margin-bottom:4px}
.score{font-size:44px;font-weight:700;line-height:1}
.grade{font-size:14px;padding:6px 10px;border-radius:999px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0}
.processing{display:flex;align-items:center;gap:8px;color:#475569}
.progress-wrap{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.progress-wrap.hidden{display:none}
.spinner{width:16px;height:16px;border:2px solid #cbd5e1;border-top-color:#0ea5e9;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{width:160px;height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:#0ea5e9;width:0%;transition:width .2s ease}
.progress-text{font-size:12px;color:#334155;min-width:36px;text-align:right}
.dimensions{display:grid;gap:10px;margin-top:12px}
.dim{border:1px solid #e2e8f0;border-radius:10px;padding:12px}
.dim h3{margin:0 0 4px 0;font-size:14px}
.dim p{margin:0;font-size:13px;color:#334155}
.sec{margin-top:12px}
.sec h2{margin:0 0 8px 0;font-size:16px}
.sec p{margin:0 0 6px 0;font-size:13px;color:#334155}
.sec ul{margin:0;padding-left:18px}
.sec li{margin:6px 0;font-size:13px}
.cols{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:720px){.cols{grid-template-columns:1fr 1fr}}
.footer{max-width:920px;margin:8px auto 24px auto;padding:0 16px;color:#64748b;font-size:12px}
.tabs{display:flex;gap:8px;margin:8px 0}
.tab{padding:6px 12px;border:1px solid #e2e8f0;background:#f1f5f9;border-radius:8px}
.tab.active{background:#e0f2fe;border-color:#bae6fd}
.form{display:grid;gap:8px;margin-top:8px;max-width:420px}
.form input{padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px}
.radio-group{display:flex;gap:12px;color:#334155}
.line{display:flex;gap:8px;align-items:center}
.btn.ghost{background:#fff;color:#0f172a;border:1px solid #e2e8f0}
.hero{max-width:920px;margin:8px auto 8px auto;padding:0 16px;text-align:center}
.tab-nav{position:fixed;bottom:0;left:0;right:0;display:flex;gap:8px;justify-content:center;padding:12px 16px;background:#fff;border-top:1px solid #e2e8f0;z-index:20;box-shadow:0 -2px 8px rgba(0,0,0,.05)}
.tab-nav.hidden{display:none}
.tab-card{padding:10px 24px;border-radius:20px;border:none;background:#f1f5f9;color:#64748b;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}
.tab-card:active{transform:scale(0.95)}
.tab-card.active{background:#0ea5e9;color:#fff;box-shadow:0 2px 8px rgba(14,165,233,.3)}
.grid{column-count:2;column-gap:8px}
.grid-item{border:1px solid #e2e8f0;border-radius:8px;padding:6px;background:#fff;margin-bottom:8px;break-inside:avoid}
.grid-item img{width:100%;height:auto;border-radius:6px;display:block}
.avatar{width:80px;height:80px;border-radius:50%;border:1px solid #e2e8f0;background:#f8fafc}
.legal{display:flex;gap:12px}
.link{background:none;border:none;color:#0ea5e9;padding:0;cursor:pointer;transition:opacity .1s ease}
.link:active{opacity:0.6}
.version{color:#64748b;font-size:12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-content{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;min-width:280px}
.type-switch{border:1px solid #e2e8f0;border-radius:10px;padding:12px;background:#f8fafc}
.type-switch>label{font-size:14px;font-weight:600;margin-bottom:6px;display:block;color:#0f172a}
.retry-btn{padding:8px 14px;font-size:13px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;white-space:nowrap}
.retry-btn:hover{background:#e0f2fe;border-color:#bae6fd}
.detail-modal{max-width:480px;max-height:85vh;overflow-y:auto;padding:20px}
.detail-modal h3{margin:12px 0 4px 0;font-size:14px;font-weight:600;color:#0f172a}
.detail-modal p{margin:0 0 6px 0;font-size:13px;color:#334155;line-height:1.6}
.detail-modal ul{margin:0 0 6px 0;padding-left:18px}
.detail-modal li{font-size:13px;color:#334155;margin:4px 0;line-height:1.5}
.detail-img{width:100%;height:auto;border-radius:10px;display:block;margin-bottom:8px}
.detail-btns{display:flex;gap:10px;margin-top:14px;justify-content:center}
.empty-tip{text-align:center;color:#94a3b8;font-size:14px;padding:40px 0}
.grid-item img{cursor:pointer;transition:transform .15s ease}
.grid-item img:active{transform:scale(0.95)}
.profile-header{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #e2e8f0;margin-bottom:12px}
.profile-header .avatar{width:64px;height:64px}
.profile-info{flex:1}
.profile-name-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.nickname{font-size:18px;font-weight:600;color:#0f172a}
.edit-btn{padding:4px 12px;font-size:12px;background:#f1f5f9;color:#0ea5e9;border:1px solid #e2e8f0;border-radius:14px;cursor:pointer;transition:all .15s ease}
.edit-btn:active{transform:scale(0.95);background:#e0f2fe}
.account{font-size:13px;color:#64748b}
.menu-list{display:grid;gap:0;margin:12px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.menu-item{display:flex;align-items:center;padding:14px 16px;background:#fff;border:none;width:100%;text-align:left;font-size:15px;color:#0f172a;cursor:pointer;transition:background .15s ease}
.menu-item:not(:last-child){border-bottom:1px solid #e2e8f0}
.menu-item:active{background:#f1f5f9}
.menu-item.logout-btn{color:#ef4444}
.gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.manage-btn{padding:6px 14px;font-size:13px;background:#f1f5f9;color:#0f172a;border:1px solid #e2e8f0;border-radius:14px;cursor:pointer;transition:all .15s ease}
.manage-btn:active{transform:scale(0.95);background:#e0f2fe}
.grid-item.manage-mode{position:relative}
.grid-item.manage-mode img{opacity:0.7;cursor:pointer}
.select-box{position:absolute;top:6px;right:6px;width:22px;height:22px;background:#fff;border:2px solid #cbd5e1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#0ea5e9;cursor:pointer;transition:all .15s ease;z-index:1}
.select-box.selected{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.delete-bar{position:fixed;bottom:56px;left:0;right:0;padding:12px 16px;background:#fff;border-top:1px solid #e2e8f0;display:flex;justify-content:center;box-shadow:0 -2px 8px rgba(0,0,0,.05);z-index:19}
.edit-profile-modal,.feedback-modal,.legal-modal{max-width:400px;padding:20px}
.edit-profile-modal h2,.feedback-modal h2,.legal-modal h2{margin:0 0 16px 0;font-size:18px}
.avatar-upload{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:12px}
.avatar-upload .avatar{width:80px;height:80px}
.edit-btns{display:flex;gap:10px;justify-content:center;margin-top:16px}
.legal-content{max-height:50vh;overflow-y:auto;font-size:13px;color:#334155;line-height:1.8;padding-right:8px}
.legal-content p{margin:0 0 12px 0}
.legal-content h3{margin:16px 0 8px 0;font-size:14px;color:#0f172a}
@media(max-width:480px){
.title{font-size:18px}
.card{padding:16px;border-radius:12px}
.btn{padding:8px 12px;font-size:14px}
.score{font-size:36px}
.grade{font-size:12px;padding:4px 8px}
.form{max-width:100%}
.line{flex-direction:column;align-items:stretch}
.line .btn{width:100%;justify-content:center}
.tab-nav{padding:10px 12px;gap:6px}
.tab-card{padding:8px 16px;font-size:13px}
.grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.profile-header{flex-direction:column;text-align:center;gap:12px}
.profile-name-row{justify-content:center}
.menu-item{padding:12px 14px;font-size:14px}
.modal-content{margin:16px;min-width:auto;width:calc(100% - 32px)}
.detail-modal{max-width:calc(100% - 32px);padding:16px}
.edit-profile-modal,.feedback-modal,.legal-modal{max-width:calc(100% - 32px);padding:16px}
}