*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #e96fa6;--color-primary-light: #f7a8cd;--color-success: #5fc3a0;--color-warning: #f3aabe;--color-danger: #e25b88;--color-text: #4b2f3f;--color-text-light: #7b5a72;--color-muted: #b497aa;--color-border: #f4d2e1;--color-bg: #fff1f7;--color-white: #ffffff;--color-primary-very-light: rgba(233, 111, 166, .28);--sp-4: 2px;--sp-6: 3px;--sp-8: 4px;--sp-12: 6px;--sp-16: 8px;--sp-20: 10px;--sp-24: 12px;--sp-32: 16px;--sp-40: 20px;--sp-48: 24px;--sp-64: 32px;--sp-80: 40px;--sp-96: 48px;--sp-128: 64px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-xxl: 20px;--radius-btn: 22px;--radius-full: 999px;--fs-xs: 11px;--fs-sm: 12px;--fs-md: 14px;--fs-lg: 16px;--fs-xl: 18px;--fs-xxl: 22px;--lh-base: 1.4;--lh-tight: 1.2;--lh-loose: 1.6;--shadow-sm: 0 1px 3px rgba(233, 111, 166, .1);--shadow-md: 0 2px 6px rgba(233, 111, 166, .16);--shadow-lg: 0 4px 10px rgba(233, 111, 166, .22);--opacity-disabled: .5}html,body{margin:0;padding:0;width:100%;height:100%;background:var(--color-bg);overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:var(--color-bg);color:var(--color-text);font-size:var(--fs-md);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-top:0;margin-top:0}#app{min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg);margin:0;padding:0}.nav-bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 var(--sp-24);background:var(--color-white);box-shadow:var(--shadow-sm);margin-top:0;padding-top:env(safe-area-inset-top,0);min-height:calc(44px + env(safe-area-inset-top,0))}.nav-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.nav-back:active{opacity:.7}.nav-title{flex:1;text-align:center;font-size:var(--fs-lg);font-weight:600;color:var(--color-text)}.nav-placeholder{width:44px}.content{flex:1;padding:var(--sp-24);padding-bottom:calc(var(--sp-24) + env(safe-area-inset-bottom))}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-96) var(--sp-24)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:var(--sp-16);font-size:var(--fs-sm);color:var(--color-muted)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-96) var(--sp-24)}.error-icon{font-size:48px;margin-bottom:var(--sp-16)}.error-text{font-size:var(--fs-md);color:var(--color-muted);margin-bottom:var(--sp-24)}.retry-btn{padding:var(--sp-12) var(--sp-24);background:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius-full);font-size:var(--fs-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}.retry-btn:active{transform:scale(.98);opacity:.9}.detail-container{display:flex;flex-direction:column;gap:var(--sp-24)}.card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--sp-12) var(--sp-32);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--sp-32)}.card-item{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12) 0}.form-label{font-size:var(--fs-md);color:var(--color-text);padding:var(--sp-8) 0;font-weight:600}.form-label-row{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-8) 0}.change-work-btn{background:transparent;border:1px solid var(--color-primary-light);color:var(--color-primary);font-size:var(--fs-sm);padding:var(--sp-8) var(--sp-16);border-radius:var(--radius-full);cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:400;transition:all .2s ease}.change-work-btn:active{opacity:.7;transform:scale(.98)}.info-text{font-size:var(--fs-sm);color:var(--color-text);line-height:var(--lh-loose);word-break:break-all;margin-bottom:var(--sp-16)}.declaration-text{white-space:pre-wrap}.placeholder-text{color:var(--color-muted)}.period-card{padding:var(--sp-24) var(--sp-32);background:var(--color-white);border-radius:var(--radius-md)}.tip-card{padding:var(--sp-32) var(--sp-24);border-radius:var(--radius-md);background-color:var(--color-primary)}.tip-text{color:var(--color-white);font-size:var(--fs-md);font-weight:600;line-height:var(--lh-base);padding-left:var(--sp-8)}.error-card{padding:var(--sp-32) var(--sp-24);border-radius:var(--radius-md);background-color:var(--color-warning);text-align:center}.error-card .error-text{color:var(--color-text);font-size:var(--fs-md);margin-bottom:var(--sp-24)}.error-card .retry-btn{padding:var(--sp-16) var(--sp-32);background-color:var(--color-primary);color:var(--color-white);border:none;border-radius:var(--radius-btn);font-size:var(--fs-md);font-weight:600;cursor:pointer}.image-wrapper{position:relative;width:100%;height:200px;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg)}.work-image{width:100%;height:100%;object-fit:cover;display:block}.image-label{position:absolute;top:var(--sp-8);left:var(--sp-8);background:var(--color-primary);color:var(--color-white);font-size:var(--fs-sm);padding:2px var(--sp-8);border-radius:var(--radius-sm)}.video-wrapper{position:relative;width:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg)}.video-player{width:100%;display:block;background:#000}.video-placeholder{width:100%;height:150px;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border:1px dashed var(--color-border)}.video-placeholder.hidden{display:none}.video-icon{font-size:var(--fs-md);color:var(--color-muted);text-align:center}.vote-count{font-size:var(--fs-xl);color:var(--color-primary);font-weight:600;margin-bottom:var(--sp-16)}@media(max-width:375px){.content{padding:var(--sp-16)}.card{padding:var(--sp-12) var(--sp-24)}}@supports (padding: max(0px)){.content{padding-bottom:max(var(--sp-24),env(safe-area-inset-bottom))}}