*{box-sizing:border-box}
body{margin:0;background:#eef1f3;color:#20313a;font-family:"Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{border:0;border-radius:6px;background:#176f93;color:#fff;font-weight:700;padding:9px 13px;cursor:pointer}
button:hover{background:#105d7c}
button.secondary{background:#e7eef2;color:#304b59}
button.danger{background:#b93d35}
.bare{background:transparent!important;color:#687c86;padding:3px 6px}
input,select,textarea{width:100%;border:1px solid #c9d5db;border-radius:6px;background:#fff;color:#20313a;padding:9px 10px}
textarea{resize:vertical}
.page{max-width:1500px;min-height:100vh;margin:auto;padding:14px}
.topbar{display:flex;align-items:center;gap:20px;min-height:62px;padding:9px 15px;background:#fff;border:1px solid #d8e1e5;border-radius:8px}
.topbar h1{font-size:22px;margin:0}
.topbar p{margin:2px 0 0;color:#71828a;font-size:13px}
.tabs{display:flex;gap:4px;margin-left:auto}
.tabs button,.tool-tab{background:transparent;color:#526872;padding:8px 14px;border-radius:6px;text-decoration:none;font-weight:700;font-size:14px;line-height:1.2}
.tabs button.is-active{background:#176f93;color:#fff}
.tool-tab:hover{background:#e7eef2;color:#176f93}
.account{display:flex;align-items:center;gap:10px;font-size:13px}
.account a{color:#176f93}
.notice,.error{padding:10px 14px;margin-top:10px;border-radius:7px}
.notice{background:#e7f6ed;color:#17643d}
.error{background:#fff0ee;color:#a52e27}
.login-panel{width:min(390px,100%);margin:12vh auto;background:#fff;border:1px solid #d8e1e5;border-radius:8px;padding:24px}
.login-panel form{display:grid;gap:10px}
.login-panel h2{margin:0 0 4px}
.login-panel p{text-align:center;color:#7a8b93;font-size:13px;margin:14px 0 0}
.view{display:none;margin-top:10px}
.view.is-active{display:block}
#view-projects.is-active{display:grid;grid-template-columns:270px minmax(0,1fr);gap:10px}
.project-sidebar,.project-workspace,.draw-card,.score-card,.settings-card{background:#fff;border:1px solid #d8e1e5;border-radius:8px}
.project-sidebar{padding:12px;min-height:calc(100vh - 100px)}
.section-head,.steps-head,.project-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.section-head h2,.steps-head h2,.settings-card h2,.score-card h2{font-size:19px;margin:0}
.section-head p,.steps-head p{font-size:12px;color:#7c8c94;margin:2px 0 0}
.steps-head p.save-failed{color:#b4362e;font-weight:700}
.section-head span{font-size:12px;color:#7c8c94}
.icon-btn{font-size:23px;line-height:1;padding:6px 10px}
.new-project{display:grid;gap:7px;background:#f1f6f8;padding:9px;margin:10px 0}
.project-list{display:grid;gap:6px;margin-top:10px}
.project-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px;border:1px solid transparent;border-radius:7px;color:#20313a;text-decoration:none}
.project-item:hover{background:#f1f6f8}
.project-item.is-active{background:#e8f2f6;border-color:#bdd5df}
.project-item div{min-width:0}
.project-item strong,.project-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-item span{font-size:12px;color:#71848e;margin-top:3px}
.project-item b{color:#177154;font-size:13px}
.project-item i{grid-column:1/-1;height:3px;background:#dfe8ec;border-radius:2px;overflow:hidden}
.project-item em{display:block;height:100%;background:#2b9472}
.empty{color:#7b8b93;font-size:13px}
.project-workspace{padding:14px;min-width:0}
.project-title{display:grid;grid-template-columns:minmax(200px,1fr) 130px 100px auto auto;padding-bottom:12px;border-bottom:1px solid #e4eaed}
.title-input{border:0;font-size:24px;font-weight:800;padding-left:2px}
.steps-head{margin:13px 0 9px}
.steps{display:grid;gap:7px}
.step-card{display:grid;grid-template-columns:60px minmax(280px,1fr) 250px;gap:10px;border:1px solid #dbe4e8;border-radius:7px;padding:10px}
.step-card:has(.step-status option:checked[value="done"]){background:#f3f8f5}
.step-order{border-right:1px solid #e1e8eb;text-align:center}
.step-order>b{display:block;font-size:23px;color:#2c758f}
.step-order form{display:flex;justify-content:center}
.step-main{display:grid;gap:7px}
.step-name{border:0;padding:3px 6px;font-size:17px;font-weight:700}
.step-notes{min-height:53px;padding:7px}
.step-state{display:grid;grid-template-columns:1fr;gap:6px;align-content:start}
.timer-row{display:grid;grid-template-columns:54px auto 1fr;align-items:center;gap:5px}
.timer-row input{padding:7px}
.timer-row span{font-size:12px;color:#6e818a}
.timer-display{display:flex;align-items:baseline;justify-content:space-between}
.timer-display strong{font-size:21px;font-variant-numeric:tabular-nums;color:#176f93}
.timer-display span{font-size:12px;color:#74868f}
.delete-step{text-align:right}
.empty-workspace{display:grid;place-content:center;min-height:60vh;text-align:center;color:#71848e}
.draw-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:10px}
.draw-card,.score-card{padding:14px}
.draw-tools{display:flex;align-items:center;gap:10px;margin:10px 0}
.draw-tools label{display:flex;align-items:center;gap:7px;font-size:13px}
.draw-tools input[type=color]{width:45px;height:34px;padding:2px}
.draw-tools input[type=range]{width:130px}
#drawCanvas{display:block;width:100%;height:auto;background:#fff;border:1px solid #bdcdd5;touch-action:none}
#drawCanvas.is-viewonly{background:#f7f9fa}
.guess-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:9px}
.guess-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.guess-list span{padding:5px 9px;background:#e9f1f5;border-radius:999px;font-size:13px}
.guess-list span.correct{background:#dff3e8;color:#12633d}
.round-result{margin-top:9px;padding:11px;background:#dff3e8;border:1px solid #b8dfc8;color:#12633d;font-weight:700;text-align:center}
.score-card{align-self:start}
.score-card>p{font-size:12px;color:#71828a}
.score-row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:9px 2px;border-bottom:1px solid #e5ebee}
.score-row b{color:#177154}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:10px}
.settings-card{padding:14px}
.template-list{display:grid;gap:6px;margin-top:10px}
.template-row{display:grid;grid-template-columns:32px minmax(130px,1fr) 70px 38px 38px auto auto;gap:5px;align-items:center}
.template-row>b{color:#2a728d}
.template-row button{padding:8px}
.stack-form{display:grid;gap:8px;margin-top:12px}
.admin-users{grid-column:1/-1}
.add-user{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:10px}
.user-list{margin-top:10px}
.user-row{display:grid;grid-template-columns:minmax(130px,1fr) 70px minmax(280px,1fr) auto;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #e4eaed}
.user-row>form{display:flex;gap:6px}
.user-row span{font-size:13px;color:#71828a}

@media(max-width:900px){.page{padding:8px}
.topbar{flex-wrap:wrap}
.topbar>div:first-child p{display:none}
.tabs{order:3;width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
.tabs button,.tool-tab{padding:8px}
.account{margin-left:auto}
#view-projects.is-active{grid-template-columns:1fr}
.project-sidebar{min-height:0}
.project-list{display:flex;overflow:auto}
.project-item{min-width:190px}
.project-workspace{padding:9px}
.project-title{grid-template-columns:1fr 1fr}
.title-input{grid-column:1/-1}
.step-card{grid-template-columns:42px minmax(0,1fr)}
.step-order{grid-row:1/3}
.step-state{grid-column:2}
.draw-layout,.settings-grid{grid-template-columns:1fr}
.score-card{order:-1}
.admin-users{grid-column:auto}
.user-row{grid-template-columns:1fr auto}
.user-row>form{grid-column:1/-1}
.template-row{grid-template-columns:28px minmax(90px,1fr) 58px repeat(2,34px)}
.template-row button:nth-last-child(-n+2){grid-column:span 2}
.add-user{grid-template-columns:1fr}
.draw-tools{flex-wrap:wrap}
}

@media(max-width:520px){.topbar h1{font-size:18px}
.project-title{grid-template-columns:1fr 1fr}
.project-title button{padding:8px}
.step-card{padding:7px;gap:6px}
.step-name{font-size:16px}
.step-notes{min-height:62px}
.timer-row{grid-template-columns:50px auto 1fr}
.draw-card{padding:8px}
.user-row{display:grid}
.login-panel{margin-top:8vh}
}

@media(max-width:520px){
html,body,.page,.topbar,.view,.project-sidebar,.project-workspace,.project-title,.steps,.step-card,.step-main,.step-state{max-width:100%;min-width:0}
body{overflow-x:hidden}
.topbar{gap:8px;padding:9px}
.topbar>div:first-child{min-width:0}
.account{min-width:0}
.tabs{flex:0 0 100%;width:100%;min-width:0;margin:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.tabs button,.tool-tab{min-width:0;padding:8px 2px;font-size:13px;white-space:normal;text-align:center}
#view-projects.is-active{width:100%;min-width:0;overflow:hidden}
.project-list{max-width:100%}
.project-workspace{width:100%;overflow:hidden}
.project-title{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.project-title>*{min-width:0;max-width:100%}
.project-title button{white-space:normal}
.steps-head{align-items:flex-end;gap:5px}
.steps-head button{padding:8px 7px;font-size:13px}
.step-card{width:100%;overflow:hidden;grid-template-columns:42px minmax(0,1fr)}
.step-main,.step-state{width:100%;overflow:hidden}
.timer-row{grid-template-columns:50px 28px minmax(0,1fr)}
.timer-row button{padding-left:7px;padding-right:7px}
}

/* Compact project workflow */
.project-title{grid-template-columns:minmax(200px,1fr) 125px 100px auto auto auto}
.project-workspace.is-collapsed .steps-head,.project-workspace.is-collapsed .steps{display:none}
.compact-steps{gap:4px}
.step-card.compact-step{display:block;padding:0;overflow:visible;background:#fff}
.compact-step.is-done{background:#f1f7f3;border-color:#bdd9c8}
.step-summary{display:grid;grid-template-columns:34px 38px minmax(150px,1fr) minmax(100px,.8fr) 105px 62px 30px;align-items:center;gap:5px;min-height:45px;padding:4px 7px}
.step-check{display:grid;place-items:center;cursor:pointer}
.step-check input{height:1px;opacity:0;position:absolute;width:1px}
.step-check span{display:grid;place-items:center;width:24px;height:24px;border:2px solid #aebfc7;border-radius:5px;color:transparent;font-weight:800}
.step-check input:checked+span{background:#23805f;border-color:#23805f;color:#fff}
.step-number{color:#2a748f;font-size:16px;text-align:center}
.compact-step .step-name{height:34px;min-width:0;padding:4px 6px;font-size:15px}
.compact-step.is-done .step-name{text-decoration:line-through;color:#718078}
.step-note-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#72848d;font-size:13px}
.compact-step .timer-display{display:grid;line-height:1.1;text-align:right}
.compact-step .timer-display strong{font-size:17px}
.compact-step .timer-display span{margin-top:3px;white-space:nowrap}
.compact-step .timer-btn{padding:7px 8px}
.expand-step{font-size:20px;color:#2e667d!important}
.step-details{display:grid;grid-template-columns:minmax(240px,1fr) 120px 100px auto auto;align-items:center;gap:7px;padding:7px 40px 8px 79px;border-top:1px solid #e1e8eb;background:#f8fafb}
.step-details[hidden]{display:none}
.step-details .step-notes{min-height:52px;max-height:100px}
.minutes-field{display:flex;align-items:center;gap:5px}
.minutes-field input{width:62px}
.minutes-field span{font-size:12px;color:#6e818a}
.step-order-actions{display:flex;gap:5px}
.step-order-actions button,.step-details .delete-step button{padding:8px 9px}

@media(max-width:900px){
.project-title{grid-template-columns:repeat(3,minmax(0,1fr))}
.title-input{grid-column:1/-1}
.step-summary{grid-template-columns:32px 34px minmax(120px,1fr) 88px 58px 28px}
.step-note-preview{display:none}
.step-details{grid-template-columns:minmax(180px,1fr) 110px 95px;padding-left:72px}
.step-order-actions,.step-details .delete-step{grid-row:2}
}

@media(max-width:520px){
.project-title{grid-template-columns:repeat(3,minmax(0,1fr))}
.project-title .title-input{grid-column:1/-1}
.project-title select{grid-column:span 1}
.project-title button{font-size:12px;padding:7px 3px}
.step-summary{grid-template-columns:30px 30px minmax(0,1fr) 58px 26px;grid-template-rows:34px 24px;gap:2px 4px;padding:4px}
.step-check{grid-row:1/3}
.step-number{grid-row:1/3}
.compact-step .step-name{grid-column:3;grid-row:1}
.compact-step .timer-display{grid-column:3;grid-row:2;display:flex;align-items:center;gap:8px;text-align:left}
.compact-step .timer-display strong{font-size:15px}
.compact-step .timer-display span{margin:0}
.compact-step .timer-btn{grid-column:4;grid-row:1/3;padding:6px 4px;font-size:13px}
.expand-step{grid-column:5;grid-row:1/3}
.step-details{grid-template-columns:1fr 90px;padding:7px}
.step-details .step-notes{grid-column:1/-1}
.minutes-field{grid-column:2}
.step-order-actions{grid-column:1;grid-row:3}
.step-details .delete-step{grid-column:2;grid-row:3;text-align:right}
}