:root{font-family:Inter,'Segoe UI','Noto Sans JP',system-ui,sans-serif;color:#20304d;background:#f7f9fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}.app{display:grid;grid-template-columns:232px minmax(0,1fr) 268px;min-height:100vh;max-width:1800px;margin:auto}.sidebar{background:#fff;border-right:1px solid #e8edf4;padding:29px 15px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{font-size:22px;font-weight:800;display:flex;align-items:center;gap:12px;padding:0 12px 38px;letter-spacing:-.6px}.brand-icon{display:grid;place-items:center;border-radius:12px;background:#6179ec;color:#fff;width:38px;height:38px}.brand small{font-size:10px;font-weight:600;display:block;color:#94a0b5;letter-spacing:1.6px;margin-top:1px}.nav{border:0;background:transparent;display:flex;align-items:center;gap:13px;text-align:left;width:100%;padding:13px 14px;color:#738099;font-size:14px;font-weight:650;border-radius:10px;margin:3px 0}.nav:hover,.nav.active{background:#ecf0ff;color:#5069d9}.nav b{margin-left:auto;font-size:11px;background:#dbe2fb;border-radius:20px;padding:2px 8px}.nav-label{font-size:10px;letter-spacing:2px;color:#b2b9c7;font-weight:800;margin:25px 12px 10px}.side-bottom{margin-top:auto}.side-note{font-size:11px;color:#a7b0c0;line-height:1.8;margin:13px}.sync-dot{width:7px;height:7px;border-radius:50%;background:#c6ccd6;margin-left:auto}.sync-dot.online{background:#38bd90}.main{padding:38px clamp(20px,3.5vw,56px);min-width:0}.top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:28px}.eyebrow{font-weight:800;font-size:12px;color:#6d80d9;margin-bottom:10px}.top h1{margin:0 0 8px;font-size:30px;letter-spacing:-1px}.top p{color:#99a4b6;font-size:13px;margin:0}.primary,.secondary{border-radius:10px;padding:12px 18px;border:1px solid #dce3ee;font-weight:750;font-size:13px}.primary{background:#637ae7;color:white;border-color:#637ae7;box-shadow:0 4px 12px #556cce30}.primary:hover{background:#526bdf}.secondary{background:#fff;color:#627292}.secondary:hover{background:#f4f6ff}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:27px}.stat{background:#fff;border:1px solid #ebeff6;border-radius:15px;padding:19px 20px}.stat small{font-size:12px;font-weight:700;color:#9ba6b8}.stat strong{display:block;font-size:27px;margin-top:9px}.stat span{font-size:11px;color:#8b97af}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-heading h2,.section-heading h3{font-size:17px;margin:0}.section-heading h3{font-size:14px}.task-panel{background:#fff;border:1px solid #e9edf5;border-radius:15px;overflow:hidden;margin-bottom:17px}.panel-head{padding:21px 22px 16px;border-bottom:1px solid #f0f2f6}.panel-head small{color:#9ba7b7;font-size:12px}.tasks{min-height:90px}.task{display:flex;align-items:flex-start;gap:12px;padding:16px 22px;border-bottom:1px solid #f1f3f7}.task:last-child{border-bottom:0}.task:hover{background:#fcfdff}.check{flex-shrink:0;margin-top:3px;width:20px;height:20px;accent-color:#637ae7}.task-info{flex:1;min-width:0}.task-name{font-weight:700;font-size:14px;overflow-wrap:anywhere}.done .task-name{text-decoration:line-through;color:#b2b9c7}.task-meta{font-size:11px;color:#a0aabb;display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.priority-high{color:#d66d65}.priority-low{color:#5a9e7c}.task-actions{display:flex;gap:5px}.icon-btn{border:0;background:transparent;color:#9aa6b7;border-radius:6px;padding:5px 7px;font-size:16px}.icon-btn:hover{background:#eff2ff;color:#566dda}.empty{text-align:center;padding:33px 12px;color:#9daabc;font-size:13px}.right{border-left:1px solid #e8edf4;background:#fff;padding:31px 20px;display:flex;flex-direction:column;gap:19px}.card{border:1px solid #e9eef5;border-radius:15px;padding:20px}.card h3{font-size:14px;margin:0}.progress-ring{width:142px;height:142px;border-radius:50%;margin:28px auto 14px;background:conic-gradient(#637ae7 var(--pct,0%),#edf0f8 0);display:grid;place-items:center}.progress-ring>div{background:white;border-radius:50%;width:117px;height:117px;display:flex;align-items:center;justify-content:center;flex-direction:column}.progress-ring strong{font-size:29px}.progress-ring small{font-size:11px;color:#9daabc}.overview p,.tips p{text-align:center;font-size:12px;line-height:1.8;color:#97a2b4}.tips p{text-align:left}.mini-focus{text-align:center}.mini-focus .section-heading{text-align:left}.pill{font-size:10px;padding:5px 8px;background:#f0f3ff;color:#6a80d9;border-radius:20px}.mini-focus>strong{display:block;font-size:36px;font-variant-numeric:tabular-nums;margin-top:25px}.mini-focus>p{color:#a5aec0;font-size:12px;margin:0 0 22px}.mini-focus .secondary{width:100%}.mobile-nav{display:none}.calendar-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.calendar-bar h2{margin:0;font-size:18px}.calendar-bar button{border:1px solid #e5e9f2;background:white;border-radius:8px;padding:8px 13px}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:white;border:1px solid #e5eaf3;border-radius:14px;overflow:hidden}.day-label{text-align:center;background:#f2f5fa;padding:12px 3px;font-size:12px;font-weight:700;color:#8b98ac}.day{min-height:100px;border-top:1px solid #edf0f6;border-right:1px solid #edf0f6;padding:9px 7px;cursor:pointer;overflow:hidden}.day:nth-child(7n){border-right:0}.day.other{background:#f9fafc;color:#b9c1ce}.day.current{background:#f0f4ff}.day-number{font-size:12px;font-weight:800;margin-bottom:7px}.cal-item{display:block;background:#eaf0ff;color:#4860b8;font-size:10px;border-radius:4px;padding:4px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cal-item.completed{opacity:.48;text-decoration:line-through}.focus-layout{max-width:670px;margin:auto}.focus-box{background:#fff;text-align:center;border:1px solid #e7ecf5;border-radius:20px;padding:34px 20px}.mode-tabs{display:flex;background:#f0f2f8;border-radius:12px;padding:4px;gap:5px;margin:0 auto 25px;width:fit-content}.mode-tabs button{border:0;background:transparent;padding:10px 13px;border-radius:9px;color:#8e9aaf;font-size:12px}.mode-tabs button.selected{background:white;color:#4e66d8;box-shadow:0 2px 8px #b0b9d333}.clock{font-variant-numeric:tabular-nums;font-size:clamp(60px,11vw,95px);font-weight:800;letter-spacing:-3px;margin:20px 0}.timer-buttons{display:flex;justify-content:center;gap:10px;margin:20px 0 28px}.timer-buttons button{min-width:110px}.focus-box label{font-size:13px;color:#8b98ae}.focus-box select{max-width:350px;width:100%;margin-top:8px}.focus-total{margin:25px auto;color:#8c97aa;font-size:13px}.focus-total b{color:#526bdf}.field,.focus-box select{padding:12px;border:1px solid #dce3ee;border-radius:10px;background:#fff}.focus-options{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-size:12px;color:#8792a8;margin-top:18px}.focus-options input{width:55px;padding:5px;border:1px solid #e1e6ef;border-radius:6px}dialog{border:1px solid #e6ebf4;box-shadow:0 20px 90px #1c2c4b33;border-radius:18px;width:min(95vw,520px);padding:25px;color:#20304d}dialog::backdrop{background:#17233d80}.dialog-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-title h2{margin:0;font-size:20px}form label,dialog label{display:block;font-size:12px;font-weight:700;color:#56637c;margin-bottom:17px}form input,form select,form textarea,#sync-settings input{display:block;width:100%;margin-top:8px;border:1px solid #dde4ef;border-radius:9px;background:#fff;padding:11px 12px;outline-color:#637ae7;color:#263957}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}dialog p{font-size:13px;line-height:1.8;color:#607089}.muted{font-size:12px;color:#9ba5b5}.auth-row{display:flex;gap:8px;align-items:end}.auth-row input{flex:1}.auth-row button{white-space:nowrap}#sync-settings .secondary{margin:4px}.toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);padding:12px 19px;background:#273650;color:white;font-size:13px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:100}.toast.visible{opacity:1}@media(max-width:1150px){.app{grid-template-columns:210px minmax(0,1fr)}.right{display:none}}@media(max-width:700px){.app{display:block}.sidebar{display:none}.main{padding:23px 15px 75px}.top h1{font-size:25px}.top-add{padding:10px;font-size:12px}.top p{font-size:12px}.mobile-nav{display:flex;overflow-x:auto;gap:7px;margin:0 -15px 19px;padding:3px 15px 9px}.mobile-nav button{flex:0 0 auto;background:white;border:1px solid #e7ebf3;border-radius:20px;padding:8px 12px;color:#8e9bb0;font-weight:650;font-size:12px}.mobile-nav button.active{background:#637ae7;color:white;border-color:#637ae7}.stats{gap:8px}.stat{padding:13px 12px}.stat strong{font-size:21px}.stat span{font-size:10px}.task{padding:14px 11px;gap:6px}.task-actions{gap:0}.panel-head{padding:16px 12px}.calendar .day{min-height:75px;padding:5px 2px}.day-number{margin-left:4px}.cal-item{font-size:9px;padding:3px}.calendar-bar h2{font-size:16px}dialog{padding:20px}}@media(max-width:400px){.task-actions .icon-btn{font-size:14px;padding:5px}.stat small{font-size:10px}}

.tag-filter{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 19px;font-size:12px;color:#7a859a}.tag-chip{border:1px solid #dce4fb;background:#f5f7ff;color:#566ec3;border-radius:999px;padding:4px 9px;font-size:11px;cursor:pointer}.tag-chip:hover,.tag-chip.chosen{background:#6179e7;color:white}.task-meta .tag-chip{padding:2px 7px}.stats-range{display:flex;gap:8px;margin-bottom:18px}.stats-range button{border:1px solid #dce3ee;background:white;padding:9px 15px;border-radius:10px;color:#65728c;cursor:pointer}.stats-range button.chosen{background:#6279e7;color:#fff}.stats-detailed{grid-template-columns:repeat(4,1fr)}.stats-panel .panel-head h2{margin:0;font-size:17px}.stats-panel .panel-head p{font-size:11px;color:#8792a5;margin-bottom:0}.graph-scroller{overflow-x:auto;padding:25px 20px 16px}.graph{height:200px;display:flex;align-items:stretch;gap:4px}.graph-col{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}.graph-col small{font-size:9px;color:#8b97a8;white-space:nowrap;margin-top:7px}.graph-bars{height:170px;display:flex;align-items:flex-end;justify-content:center;gap:2px;border-bottom:1px solid #e5eaf0}.bar{width:35%;min-height:0;border-radius:3px 3px 0 0}.donebar{background:#6279e7}.focusbar{background:#48b2a4}.tag-summary{padding:15px 22px}.tag-summary>div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eef0f5;font-size:13px}.stats-note{font-size:12px;color:#8793a5;line-height:1.7}@media(max-width:700px){.stats-detailed{grid-template-columns:repeat(2,1fr)}}

/* Notification sounds */
.sound-settings{margin-top:24px;padding:20px;border:1px solid #dbe3f0;border-radius:16px;background:#f9fbff;display:grid;gap:14px}.sound-settings h3{margin:0;font-size:17px}.sound-enable{display:flex!important;align-items:center;gap:10px}.sound-enable input{width:18px;height:18px}.sound-volume{display:flex!important;align-items:center;gap:12px;flex-wrap:wrap}.sound-volume input{flex:1;min-width:110px;accent-color:#6279ea}.sound-previews{display:flex;flex-wrap:wrap;gap:8px}.sound-previews button{border:1px solid #d4dff2;background:white;border-radius:10px;padding:9px 12px;cursor:pointer;color:#34466c}.sound-previews button:hover{background:#eaf0ff}.sound-settings .muted{font-size:12px;line-height:1.6;margin:0}

/* Projects and weekly planning */
.project-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}.project-tools h2{font-size:20px;margin:0}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:17px}.project-card{padding:20px;background:white;border:1px solid #e4eaf4;border-radius:16px;min-width:0}.project-card h3{margin:0}.project-card .section-heading{display:flex;justify-content:space-between;align-items:center}.project-card>.secondary{margin-top:15px}.project-metrics{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:8px}.project-metrics strong{font-size:24px}.project-metrics small{color:#708099}.project-progress{height:9px;background:#edf1fc;border-radius:20px;overflow:hidden;margin:8px 0 18px}.project-progress i{display:block;background:#657be7;height:100%;border-radius:20px}.project-tasks .task{padding:10px 2px}.project-pill{color:#5164bc;background:#eff2ff;border-radius:7px;padding:2px 7px}.subtask-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}.subtask-list label{display:flex;align-items:center;gap:7px;font-size:12px;color:#626c7e}.subtask-list input{accent-color:#657be7}.subtask-done{text-decoration:line-through;color:#a5adba}.board-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-bottom:16px}.board-toolbar strong{font-size:15px}.board-hint{font-size:12px;margin-bottom:15px}.week-board{display:grid;grid-template-columns:repeat(7,minmax(165px,1fr));gap:9px;overflow-x:auto;padding-bottom:12px}.board-day{min-height:240px;border:1px solid #e3e9f4;background:#fafbff;border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:9px}.board-day-head{display:flex;justify-content:space-between;gap:5px;border-bottom:1px solid #e8edf5;padding-bottom:9px}.board-day-head strong{font-size:13px}.board-day-head small{color:#7c8aa2}.board-task{background:white;border:1px solid #e3e8f1;border-radius:10px;padding:10px;cursor:grab}.board-task-name{font-size:13px;font-weight:600;overflow-wrap:anywhere}.board-task small{display:block;color:#6678ae;margin-top:5px}.board-actions{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-top:10px}.board-actions button,.board-actions select{font-size:11px;border:1px solid #e0e6f0;background:white;border-radius:6px;padding:5px;min-width:0}.board-add{border:1px dashed #bac8ed;border-radius:8px;background:transparent;color:#526bb6;padding:9px;font-size:12px;margin-top:auto}.backlog-panel{margin-top:18px}.backlog-panel .panel-head{padding:12px 16px}.backlog-panel h2{font-size:16px}
@media(max-width:880px){.week-board{grid-template-columns:repeat(7,185px)}.project-tools{flex-wrap:wrap}}
/* Simple, compact interface */
:root{background:#f8fafc;color:#27344a}.app{grid-template-columns:208px minmax(0,1fr)}.right{display:none}.main{padding:30px clamp(18px,3vw,44px)}.sidebar{padding:22px 12px}.brand{padding-bottom:21px}.nav{margin:1px 0;padding:10px 12px}.nav-label{margin-top:17px}.top{margin-bottom:22px}.top h1{font-size:25px}.top p{display:none}.stats{gap:10px;margin-bottom:18px}.stat{padding:14px 17px;border-radius:12px}.stat strong{font-size:24px}.task-panel,.project-card{border-radius:12px}.task{padding:12px 16px}.panel-head{padding:14px 18px 12px}.project-card{border-top:3px solid var(--project-color,#8c98a9)}.project-card h3{display:flex;align-items:center;gap:8px}.project-progress i{background:var(--project-color,#6179e7)}.project-pill{background:color-mix(in srgb,var(--project-color) 10%,white);color:var(--project-color);border-left:3px solid var(--project-color)}
.project-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;margin-right:5px}.board-task{border-left:5px solid var(--project-color,#8c98a9);box-shadow:0 1px 2px #17233d0d}.board-legend{display:flex;flex-wrap:wrap;gap:9px 17px;margin:0 0 15px;font-size:12px;color:#62718c}.board-legend span{display:inline-flex;align-items:center;gap:7px}.board-legend i{width:9px;height:9px;border-radius:50%}.color-fieldset{border:0;margin:0 0 17px;padding:0}.color-fieldset legend{font-size:12px;color:#56637c;font-weight:700;margin-bottom:11px}.color-options{display:flex;flex-wrap:wrap;gap:9px}.color-option{margin:0;cursor:pointer}.color-option input{position:absolute;opacity:0;width:1px;height:1px}.color-option span{display:block;width:26px;height:26px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #dae0e9}.color-option input:checked+span{box-shadow:0 0 0 2px #2e3e55}.color-option input:focus-visible+span{outline:3px solid #abc5ff}.project-stats{padding:14px 20px}.project-stat-row{padding:10px 0}.project-stat-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}.project-stat-head strong{display:flex;align-items:center}.project-stat-head span{color:#64748b;font-size:12px}.project-stat-track{background:#eef2f7;border-radius:6px;height:7px;margin-top:9px;overflow:hidden}.project-stat-track>div{height:100%;border-radius:6px}.sound-settings,.subtask-list{display:none!important}@media(max-width:700px){.main{padding:19px 14px 60px}.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.project-stat-head{display:block}.project-stat-head span{display:block;margin-top:5px}.top h1{font-size:22px}}

/* Project colors: a complete outline and subtle tinted background, not a single colored edge */
.project-card{border:2px solid var(--project-color,#8c98a9);border-top:2px solid var(--project-color,#8c98a9);background:color-mix(in srgb,var(--project-color,#8c98a9) 6%,white)}
.board-task{border:2px solid var(--project-color,#8c98a9);background:color-mix(in srgb,var(--project-color,#8c98a9) 12%,white);box-shadow:0 1px 2px #17233d0a}
.board-task:hover{background:color-mix(in srgb,var(--project-color,#8c98a9) 18%,white)}
.project-pill{border:1px solid var(--project-color,#8c98a9);background:color-mix(in srgb,var(--project-color,#8c98a9) 12%,white);color:#27344a}
.task{border:1px solid var(--project-color,#8c98a9);border-radius:9px;background:color-mix(in srgb,var(--project-color,#8c98a9) 8%,white);margin:8px 12px;padding:12px 14px}
.task:last-child{border-bottom:1px solid var(--project-color,#8c98a9)}
.task:hover{background:color-mix(in srgb,var(--project-color,#8c98a9) 14%,white)}
.project-tasks .task{padding:10px;margin:7px 0}
.cal-item{border:1px solid var(--project-color,#8c98a9);background:color-mix(in srgb,var(--project-color,#8c98a9) 14%,white);color:#27344a}
.focus-layout{max-width:760px}
.focus-history{border:1px solid #e3e8f2;background:white;border-radius:16px;padding:24px;margin-top:18px}
.focus-history-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid #edf0f5}
.focus-history h2{font-size:17px;margin:0}.focus-history h3{font-size:14px;margin:22px 0 12px}
.focus-history-heading p,.focus-help{font-size:12px;color:#8592a6;line-height:1.6;margin:6px 0 0}
.focus-grand-total{text-align:right;flex-shrink:0}.focus-grand-total strong{display:block;font-size:25px;color:#405dd0}.focus-grand-total small{color:#8190aa;font-size:12px}
.focus-project-row{padding:12px 14px;border:1px solid var(--project-color);background:color-mix(in srgb,var(--project-color) 8%,white);border-radius:10px;margin-bottom:9px}
.focus-project-info{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.focus-project-info span{color:#53627c;white-space:nowrap}
.focus-project-track{height:6px;border-radius:8px;background:#e8edf5;margin-top:10px;overflow:hidden}.focus-project-track div{height:100%;border-radius:8px;background:var(--project-color)}
@media(max-width:700px){.focus-history{padding:17px}.focus-grand-total strong{font-size:21px}.task{margin:6px;padding:11px}}

/* Vivid project palette: full outline and tinted surfaces */
.project-card{background:color-mix(in srgb,var(--project-color,#8c98a9) 16%,white);border-width:2px;box-shadow:0 3px 14px #25314b0d}
.board-task{background:color-mix(in srgb,var(--project-color,#8c98a9) 23%,white);border-width:2px}
.board-task:hover{background:color-mix(in srgb,var(--project-color,#8c98a9) 30%,white)}
.task{background:color-mix(in srgb,var(--project-color,#8c98a9) 17%,white);border-width:2px}
.task:hover{background:color-mix(in srgb,var(--project-color,#8c98a9) 24%,white)}
.cal-item{background:color-mix(in srgb,var(--project-color,#8c98a9) 26%,white);border-width:2px}
.project-pill{background:color-mix(in srgb,var(--project-color,#8c98a9) 24%,white);border-width:2px}
.focus-project-row{background:color-mix(in srgb,var(--project-color) 18%,white);border-width:2px}
.color-option span{width:31px;height:31px}


/* 2026-10-17: light list style inspired by TickTick screenshot (no dark mode) */
html{color-scheme:light}
:root{
  background:#f6f8fc;
  color:#24324a;
}
body{background:#f6f8fc;color:#24324a}
.top p{display:block;color:#8b97aa}
.task-panel,.stats-panel,.project-card,.focus-box,.focus-history,.stat,.calendar,.board-day,.card{
  background:#fff;
  border:1px solid #e7ecf3;
  box-shadow:0 4px 20px rgba(25,39,70,.04);
}
.task-panel{overflow:hidden}
.panel-head{padding:16px 18px 12px;background:#fff;border-bottom:1px solid #eef2f7}
.panel-head h2{font-size:18px}
.panel-head p,.panel-head small{color:#8b96a9}
.tasks{padding:0 14px 4px}
.task{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:14px 6px;
  border:none;
  border-bottom:1px solid #edf1f6;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.task:last-child{border-bottom:0}
.task:hover{background:#fafcff}
.task.done{opacity:.72}
.task-info{padding-top:1px}
.task-name{font-size:15px;font-weight:700;line-height:1.5;color:#25344d}
.done .task-name{color:#9aa6b8}
.task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 9px;margin-top:7px;font-size:12px;color:#7f8ca3}
.task-meta>span,.task-meta>button{display:inline-flex;align-items:center}
.check{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex:0 0 22px;
  margin-top:2px;border-radius:7px;
  border:2px solid var(--project-color,#ef4444);
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  transition:all .15s ease;
}
.check:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,52,77,.08)}
.check:checked{
  background-color:var(--project-color,#ef4444);
  border-color:var(--project-color,#ef4444);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.3 6.4 11.5 12.8 4.9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px 13px;
}
.priority-high{color:#e5484d;font-weight:700}
.priority-low{color:#2f9e74;font-weight:700}
.tag-chip{
  border:1px solid #e0ddff;
  background:#f5f3ff;
  color:#6e55cf;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
}
.tag-chip:hover,.tag-chip.chosen{background:#ede9fe;color:#5b42c8;border-color:#cfc7ff}
.task-meta .tag-chip{padding:3px 9px}
.project-pill{
  border:1px solid color-mix(in srgb,var(--project-color,#8c98a9) 60%,white);
  background:color-mix(in srgb,var(--project-color,#8c98a9) 18%,white);
  color:#24324a;
  border-radius:999px;
  padding:4px 10px;
  font-weight:800;
}
.task-actions{gap:4px;opacity:.78}
.task:hover .task-actions{opacity:1}
.icon-btn:hover{background:#eef3ff;color:#4760d8}
.empty{padding:28px 12px;color:#8b97aa}
.project-card{
  background:color-mix(in srgb,var(--project-color,#8c98a9) 10%,white);
  border:2px solid color-mix(in srgb,var(--project-color,#8c98a9) 40%,white);
}
.project-progress{background:#eef2f7}
.project-progress i{background:var(--project-color,#637ae7)}
.board-day{background:#fff}
.board-task{
  background:color-mix(in srgb,var(--project-color,#8c98a9) 12%,white);
  border:2px solid color-mix(in srgb,var(--project-color,#8c98a9) 40%,white);
  border-radius:12px;
  box-shadow:none;
}
.board-task:hover{background:color-mix(in srgb,var(--project-color,#8c98a9) 18%,white)}
.board-legend{padding:2px 2px 8px}
.board-legend i,.project-dot{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 3px rgba(37,52,77,.08)}
.calendar{background:#fff}
.day{background:#fff}
.day.current{background:#f4f7ff}
.cal-item{
  border:1px solid color-mix(in srgb,var(--project-color,#8c98a9) 40%,white);
  background:color-mix(in srgb,var(--project-color,#8c98a9) 16%,white);
  color:#24324a;
  border-radius:999px;
  padding:4px 8px;
}
.focus-history,.focus-box{background:#fff}
.focus-project-row{
  border:2px solid color-mix(in srgb,var(--project-color,#8c98a9) 40%,white);
  background:color-mix(in srgb,var(--project-color,#8c98a9) 10%,white);
}
.progress-ring{background:conic-gradient(#637ae7 var(--pct,0%), #edf1f7 0)}
.mobile-nav button{background:#fff}
@media(max-width:700px){
  .tasks{padding:0 10px 2px}
  .task{padding:12px 2px}
  .task-name{font-size:14px}
}


/* 2026-10-17 fix: remove gray / tinted task backgrounds, closer to reference screenshot */
body{background:#f7f7f8}
.main{background:#fff}
.task-panel,.stats-panel,.project-card,.focus-box,.focus-history,.stat,.calendar,.board-day,.card{
  box-shadow:none;
}
.tasks{padding:0 18px 6px;background:#fff}
.task{
  margin:0;
  padding:14px 2px;
  background:#fff !important;
  border:none !important;
  border-bottom:1px solid #efefef !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.task:hover{background:#f8f8f8 !important}
.task:last-child{border-bottom:none !important}
.task-name{font-size:14px;font-weight:500;color:#222}
.done .task-name{color:#9aa0aa}
.task-meta{justify-content:flex-end;gap:8px 10px;color:#9aa0aa;font-size:12px}
.task-info{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.task-info>.task-name{flex:1;min-width:0}
.task-info>.task-meta{flex:0 0 auto;margin-top:0}
.check{
  width:24px;height:24px;flex:0 0 24px;
  border-radius:7px;
  border:2px solid var(--project-color,#fb4d3d);
  background:#fff !important;
}
.check:checked{
  background-color:var(--project-color,#fb4d3d) !important;
  border-color:var(--project-color,#fb4d3d) !important;
}
.project-pill{
  padding:4px 10px;
  border:none;
  background:color-mix(in srgb,var(--project-color,#22c55e) 24%,white);
  color:#1f4b40;
  font-weight:700;
}
.tag-chip{
  border:none;
  background:#f7e6f6;
  color:#9b6b95;
  font-weight:600;
}
.panel-head{border-bottom:none;padding:14px 20px 10px}
.panel-head.section-heading{align-items:flex-end}
.panel-head h2{font-size:16px;font-weight:700;color:#202124}
.panel-head small{font-size:12px;color:#a0a0a0}
.sidebar{background:#fbfbfb;border-right:1px solid #efefef}
.nav:hover,.nav.active{background:#f0f0f0;color:#222}
.nav b{background:transparent;color:#8f8f8f;padding:0}
.top{margin-bottom:16px}
.top-add{box-shadow:none}
.calendar{border-color:#ececec}
.board-task{background:#fff;border:1px solid #e8e8e8}
.board-task:hover{background:#fafafa}
@media (max-width:900px){
  .task-info{display:block}
  .task-meta{justify-content:flex-start;margin-top:7px}
}

/* Desktop focus: history to the right of the timer */
.focus-layout{max-width:1180px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);gap:20px;align-items:start}
.focus-layout>.focus-box,.focus-layout>.focus-history{min-width:0;width:100%;margin:0}
.focus-layout>.focus-history{position:sticky;top:20px}
.focus-layout .clock{font-size:clamp(55px,6vw,90px)}
@media(max-width:1050px){.focus-layout{grid-template-columns:minmax(0,1fr)}.focus-layout>.focus-history{position:static;margin-top:4px}}

/* Minimal weekly cards; context menu and extended statistics */
.board-task{background:color-mix(in srgb,var(--project-color,#64748b) 17%,white);border:2px solid var(--project-color,#64748b);padding:12px 10px;border-radius:10px;cursor:grab;min-height:45px;user-select:none}
.board-task:hover{background:color-mix(in srgb,var(--project-color,#64748b) 26%,white)}
.board-task:active{cursor:grabbing}
.board-task:focus-visible{outline:3px solid #6281ff;outline-offset:2px}
.board-task-name{color:#172235;font-size:13px;font-weight:650;line-height:1.5}
.board-day.drag-over{background:#eef4ff;border-color:#6382ff}
.board-hint{font-size:12px}
.board-legend{gap:12px}
.board-legend span{font-weight:600}
.board-context-menu{position:fixed;width:176px;z-index:9999;background:#fff;border:1px solid #dfe4ed;box-shadow:0 12px 32px #17233d2c;border-radius:12px;padding:7px;display:grid;gap:3px}
.board-context-menu button{background:#fff;border:0;border-radius:7px;padding:10px 12px;text-align:left;font-size:13px;color:#23324a;cursor:pointer}
.board-context-menu button:hover{background:#eff3ff}
.board-context-menu button:last-child{color:#d14848}
.analysis-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.analysis-overview>div{background:#fff;border:1px solid #e8edf4;border-radius:13px;padding:18px}
.analysis-overview small{display:block;color:#8592a6;font-size:12px}
.analysis-overview strong{display:block;margin-top:10px;font-size:23px;color:#5271e8}
.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.analysis-card{min-width:0;margin:0}
.analysis-card.wide{grid-column:1/-1}
.weekday-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:235px;padding:18px 18px 12px;gap:12px;align-items:end}
.weekday-col{display:flex;flex-direction:column;align-items:center;height:100%;gap:7px;min-width:0}
.weekday-track{height:165px;width:100%;max-width:40px;background:#f1f5fd;border-radius:6px;display:flex;align-items:flex-end;overflow:hidden;margin-top:auto}
.weekday-track div{background:#6b85f0;width:100%;border-radius:5px 5px 0 0}
.weekday-col small{font-size:11px;color:#8592a6}
.weekday-col b{font-size:10px;color:#718099;white-space:nowrap}
.hourly-chart{height:235px;display:flex;align-items:flex-end;gap:3px;padding:16px 16px 20px}
.time-column{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.time-column>div{background:#6b85f0;border-radius:3px 3px 0 0;width:100%;min-height:0}
.time-column small{height:18px;white-space:nowrap;font-size:9px;color:#8492a8;margin-top:4px}
.heat-scroll{overflow-x:auto;padding:13px 18px}
.heatmap{display:grid;grid-template-rows:repeat(7,12px);gap:3px;min-width:690px}
.heat-row{display:flex;gap:3px}
.heat-cell{display:inline-block;min-width:12px;width:12px;height:12px;flex:0 0 12px;border-radius:2px;background:#edf1fa}
.heat-cell.level-1{background:#c9d5ff}.heat-cell.level-2{background:#91a9ff}.heat-cell.level-3{background:#6083fb}.heat-cell.level-4{background:#355cda}
.heat-legend{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:0 20px 18px;color:#8995a8;font-size:11px}
.focus-log{padding:6px 19px 17px;max-height:400px;overflow:auto}
.focus-log-row{display:grid;grid-template-columns:125px minmax(0,1fr) 74px;gap:10px;align-items:center;border-bottom:1px solid #f0f2f6;padding:12px 0;font-size:12px}
.focus-log-row span{color:#8290a5}.focus-log-row span:last-child{text-align:right}.focus-log-row strong{overflow-wrap:anywhere;font-weight:600}
@media(max-width:850px){.analysis-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.analysis-grid{grid-template-columns:1fr}.analysis-card.wide{grid-column:auto}}
@media(max-width:450px){.analysis-overview strong{font-size:18px}.focus-log-row{grid-template-columns:94px minmax(0,1fr) 52px;gap:6px}}

/* Inline editing: same visual style as the task title. */
[data-inline-title]{cursor:text}
[data-inline-title]:hover{color:#3e63dd;text-decoration:underline;text-decoration-color:#cbd5ff;text-underline-offset:3px}
.inline-title-input{display:block;flex:1;min-width:80px;width:100%;font:inherit;font-size:14px;color:#222;background:#fff;border:1px solid #93a7ff;border-radius:6px;padding:4px 6px;margin:-5px -7px;outline:2px solid #dee5ff;box-shadow:none}
.board-task .inline-title-input{font-size:13px;font-weight:600}

/* Early finish control */
.finish-hint{font-size:12px;color:#7c8a9d;margin:0 0 18px;line-height:1.6}
.timer-buttons{flex-wrap:wrap}
#timer-finish{border-color:#61a6a0;color:#176c64;background:#f2faf8}
#timer-finish:hover{background:#e6f5f0}

/* 教材進捗 */
.book-toolbar,.book-head,.book-entry-heading,.book-graph-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.book-toolbar{margin:0 0 18px}.book-toolbar h2{margin:0 0 4px}.book-toolbar p{margin:0}
.book-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.books-layout{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:18px}
.books-list{display:flex;flex-direction:column;gap:8px}
.book-select{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;text-align:left;padding:14px;border:1px solid #e5eaf2;background:white;border-radius:12px;color:#24324a}
.book-select.selected{border:2px solid var(--book-color);background:color-mix(in srgb,var(--book-color) 7%,white)}
.book-select span{font-weight:700;overflow-wrap:anywhere}.book-select small{color:#76849c}.book-select i{height:4px;background:var(--book-color);position:absolute;bottom:0;left:0}
.book-detail{border:1px solid #e5eaf2;background:white;border-radius:16px;padding:24px;min-width:0}
.book-head h2{margin:3px 0 5px;overflow-wrap:anywhere}.book-label{font-size:12px;color:#6179e7;font-weight:800}.book-head-actions{display:flex;gap:8px}
.book-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin:28px 0 12px}
.book-numbers>div{background:#f8faff;border-radius:12px;padding:16px 4px}.book-numbers small,.book-numbers span{display:block;color:#71809a}.book-numbers strong{display:block;font-size:26px;margin:6px 0}
.book-progress{height:12px;background:#eef2f8;border-radius:10px;overflow:hidden}.book-progress div{height:100%;border-radius:10px}
.book-pace{color:#5d718a;font-size:13px}.book-graph-wrap{margin:22px 0;padding:16px;border:1px solid #e7ebf3;border-radius:14px}.book-chart{display:block;width:100%;height:auto;margin-top:12px}
.book-graph-heading small{color:#8793a6}.book-entry-heading h3{margin:0}.book-entry-heading .primary{padding:10px}
.book-entries{margin-top:10px}.book-entry{display:flex;gap:14px;align-items:center;border-bottom:1px solid #edf1f5;padding:12px 0;flex-wrap:wrap;font-size:13px}.book-entry>.muted{flex:1}.book-entry .secondary{padding:7px 10px}
@media(max-width:850px){.books-layout{grid-template-columns:1fr}.books-list{flex-direction:row;overflow-x:auto}.book-select{min-width:170px}.book-detail{padding:16px}.book-summary{gap:7px}.book-summary .stat{padding:12px}.book-summary .stat strong{font-size:20px}}

/* 教材とプロジェクトの学習記録 */
.book-linked-focus{margin:24px 0;background:#fff;border:1px solid #e2e7f0;border-radius:15px;padding:20px}
.book-linked-title{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.book-linked-title h3{font-size:17px;margin:0}
.book-linked-project{color:#4c63bb;background:#eef2ff;border-radius:999px;font-size:12px;font-weight:700;padding:6px 12px}
.book-linked-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 22px}
.book-linked-stats>div{border-radius:12px;background:#f7f9ff;padding:15px;min-width:0}
.book-linked-stats small{display:block;color:#71819c;font-size:11px}
.book-linked-stats strong{display:block;margin-top:8px;font-size:21px;overflow-wrap:anywhere}
.book-linked-focus h4{margin:0 0 12px}
.book-combined-head,.book-combined-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #eef1f5;font-size:12px}
.book-combined-head{color:#8290a5;font-weight:700}
.book-combined-row strong{color:#304b9d}
.book-linked-note{font-size:11px;color:#7b879b;line-height:1.7;margin:16px 0 0}
@media(max-width:700px){.book-linked-focus{padding:14px}.book-linked-stats{grid-template-columns:1fr 1fr}.book-linked-stats strong{font-size:17px}}

/* Book round schedule */
.book-round-section{background:#fff;border:1px solid #e4eaf3;border-radius:14px;padding:17px;margin:18px 0}
.book-round-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.book-round-head h3{margin:0;font-size:16px}
.book-round-tabs{display:flex;gap:10px;overflow-x:auto;margin:14px 0}
.book-round-tab{min-width:126px;text-align:left;border:1px solid #d9e1ee;border-radius:11px;padding:12px;background:#fff;color:#37465e;display:flex;flex-direction:column;gap:5px}
.book-round-tab.current{border:2px solid var(--book-color,#5575ef);background:color-mix(in srgb,var(--book-color,#5575ef) 10%,white)}
.book-round-tab strong{font-size:15px}.book-round-tab small{font-size:11px;color:#738098}.book-round-tab span{font-weight:700;color:#5170d8}

/* 教材一覧は横一列で詳細エリアの上。グラフは詳細の先頭。 */
.books-layout{display:flex;flex-direction:column;gap:16px}
.books-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
.book-select{width:clamp(190px,24%,290px);min-width:190px}
.book-detail{display:flex;flex-direction:column}
.book-graph-wrap{order:-2;margin:0 0 22px}
.book-head{order:-1}
.nav[draggable=true]{cursor:grab}
.nav.nav-dragging{opacity:.42;cursor:grabbing}
@media(max-width:700px){.books-list{flex-wrap:nowrap;overflow-x:auto}.book-select{flex:0 0 210px}}

/* Archived projects */
.archive-section{margin-top:24px;border:1px solid #e1e8f2;background:white;border-radius:14px;padding:14px 18px}
.archive-section summary{cursor:pointer;font-weight:700;color:#536784;padding:8px 0}
.archive-list{display:grid;gap:10px;padding:14px 0 4px}
.archive-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid color-mix(in srgb,var(--project-color) 40%,white);border-radius:10px;background:color-mix(in srgb,var(--project-color) 7%,white)}
.archive-item small{display:block;margin-top:5px;color:#64748b}
.project-archive-btn{font-size:11px;padding:6px 9px}
/* Textbook ordering */
.book-detail>.book-graph-wrap,.book-detail>.book-head,.book-detail>.book-round-section{order:0}
.book-detail>.book-summary{order:0;width:100%;margin:15px 0 24px}
.book-detail>.book-graph-wrap{margin-bottom:20px}
.book-detail>.book-round-section{margin:0 0 8px}
@media(max-width:700px){.archive-item{align-items:flex-start}.archive-item .secondary{white-space:nowrap}}

/* Compact textbook overview and prominent quick progress action */
.book-toolbar{margin:0 0 8px;gap:8px}
.book-toolbar h2{font-size:17px;margin:0}
.book-toolbar p{display:none}
.book-toolbar .primary{padding:8px 11px;font-size:12px}
.books-layout{gap:8px}
.books-list{gap:8px;margin:0;padding:0}
.book-select{padding:8px 11px;gap:2px;border-radius:9px;font-size:12px;min-width:160px;width:clamp(160px,20%,225px)}
.book-select small{font-size:10px}
.book-detail{padding:12px 16px;gap:0}
.book-quick-record{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f4f7ff;border:1px solid #dce5ff;border-radius:11px;padding:10px 14px;margin:0 0 9px}
.book-quick-record strong{display:block;font-size:15px;color:#24324a}
.book-quick-record small{display:block;color:#8190a8;font-size:11px}
.book-quick-record .primary{padding:9px 13px;font-size:12px;white-space:nowrap}
.book-graph-wrap{margin:0 0 12px!important;padding:9px 12px}
.book-chart{width:100%;height:min(33vh,330px);min-height:190px;max-height:330px;object-fit:fill;margin-top:4px}
.book-graph-heading{font-size:12px}
.book-head{margin:12px 0 8px}
.book-head h2{font-size:17px;margin:3px 0}
.book-head .muted{font-size:11px;margin:2px 0}
.book-head-actions .secondary{padding:8px 11px}
.book-numbers{margin:10px 0}
.book-entry-heading .primary{display:none}
@media(max-width:700px){.book-detail{padding:9px}.book-select{flex:0 0 160px}.book-chart{height:220px;min-height:0}.book-quick-record{padding:9px}}

/* 教材進捗: 教材を登録を選択欄の次行にし、グラフ全体を最初の画面へ */
.books-view .main{padding-top:14px}
.books-view .top{margin-bottom:5px;align-items:center}
.books-view .top h1{font-size:23px;margin:1px 0}
.books-view .top .eyebrow{font-size:10px;margin:0 0 2px}
.books-view .top p{display:none}
.books-view .top-add{padding:8px 12px;font-size:12px}
.books-view .books-layout{display:flex;flex-direction:column;gap:0}
.books-view .books-list{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin:0 0 5px;padding:0;min-height:0}
.books-view .book-select{padding:6px 10px;min-height:46px;max-width:245px}
.books-view .book-select small{font-size:10px}
.books-view .book-toolbar{display:flex;justify-content:flex-end;margin:0 0 5px;padding:0}
.books-view .book-toolbar .primary{padding:5px 12px;font-size:12px}
.books-view .book-detail{padding:8px 12px}
.books-view .book-quick-record{padding:7px 11px;margin:0 0 5px;min-height:43px}
.books-view .book-quick-record strong{font-size:14px}
.books-view .book-quick-record small{display:none}
.books-view .book-quick-record .primary{padding:6px 11px}
.books-view .book-graph-wrap{padding:7px 10px 3px;margin:0 0 9px!important}
.books-view .book-graph-heading{line-height:1.2}
.books-view .book-chart{height:clamp(200px,calc(100dvh - 325px),640px);min-height:0;max-height:none;width:100%;margin-top:0}
@media(max-width:700px){
 .books-view .main{padding-top:10px}
 .books-view .top h1{font-size:21px}
 .books-view .book-select{flex:0 0 160px}
 .books-view .book-chart{height:clamp(170px,calc(100dvh - 330px),460px)}
}

.book-link-controls{padding:16px 20px;margin:14px 0;border:1px solid #cdd9f9;border-radius:12px;background:#f7f9ff}.book-link-controls>label{display:flex;align-items:center;gap:12px;font-weight:700}.book-link-controls select{padding:9px;border-radius:8px;border:1px solid #c7d4ed;min-width:180px;max-width:100%}.book-link-controls small{display:block;margin-top:6px;color:#64748b}.book-task-link-list{margin-top:13px;display:grid;gap:8px}.book-task-link-list strong{font-size:13px}.book-task-link-list label{display:flex;align-items:center;gap:9px;background:#fff;padding:8px 10px;border:1px solid #e4e9f5;border-radius:8px;font-size:13px}.book-task-link-list input{width:17px;height:17px;accent-color:#6077e7}@media(max-width:700px){.book-link-controls>label{flex-direction:column;align-items:start}}
.project-book-progress{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:7px 0;padding:9px 10px;border-radius:8px;background:#fff;border:1px solid #dae3f4;font-size:12px}.project-book-progress strong{color:#435ed1;margin-left:auto}.project-book-progress small{color:#6e7d96}

.book-chart-container{position:relative;width:100%}
.book-chart-tooltip{position:absolute;z-index:3;background:#24344a;color:#fff;border-radius:8px;padding:9px 12px;font-size:12px;max-width:270px;pointer-events:none;box-shadow:0 5px 18px #24344a30}
.book-chart-tooltip[hidden]{display:none}
.book-chart-hint{font-size:12px;color:#8290a5;margin:5px 0 0}
.book-chart{width:100%;height:auto;max-height:min(55vh,520px);min-height:245px;object-fit:contain}
@media(max-width:700px){.book-chart{min-height:190px;max-height:55vh}}

.app-version{position:fixed;right:12px;bottom:7px;z-index:5;color:#8e9bab;font-size:10px;font-weight:500;letter-spacing:.02em;opacity:.72;pointer-events:none}
@media(max-width:700px){.app-version{right:8px;bottom:5px;font-size:9px}}

.transfer-actions{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 10px}.transfer-actions button{flex:1 1 170px}