:root{
  --bg:#f4f6fb;--surface:#fff;--surface2:#f8f9fc;--surface3:#eef1f7;--text:#172033;--muted:#667085;--muted2:#98a2b3;
  --line:#e4e7ec;--line-strong:#d0d5dd;--blue:#2d5be3;--blue2:#5b8cff;--blue-soft:#eef3ff;--red:#d92d20;--red-soft:#fff1f0;
  --green:#079455;--green-soft:#ecfdf3;--amber:#dc6803;--amber-soft:#fffaeb;--shadow:0 18px 50px rgba(23,32,51,.08);
  --shadow-sm:0 8px 24px rgba(23,32,51,.07);--radius:18px;--ease:cubic-bezier(.2,.8,.2,1);--sidebar:226px;--topbar:80px;
  font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;color-scheme:light;
}
body.theme-dark{--bg:#0f1116;--surface:#171a21;--surface2:#1d212a;--surface3:#252a35;--text:#f2f4f7;--muted:#a5adbd;--muted2:#737b8c;--line:#292f3b;--line-strong:#3a4250;--blue-soft:#17244a;--red-soft:#341b1c;--green-soft:#123126;--amber-soft:#332813;--shadow:0 18px 50px rgba(0,0,0,.28);--shadow-sm:0 8px 24px rgba(0,0,0,.22);color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{min-height:100vh;overflow-x:hidden}button,input,textarea,select{font:inherit}button{color:inherit}button,a{touch-action:manipulation}a{color:inherit}
/* ── CutBoard opening movie ── */
.app-opening{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;animation:openingFailsafe .45s ease 4s forwards;background:radial-gradient(circle at 50% 44%,rgba(91,140,255,.13),transparent 34%),#f8f9fc;opacity:1;visibility:visible}.app-opening::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(45,91,227,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(45,91,227,.032) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,#000 18%,transparent 72%);animation:openingGrid 9s linear infinite}.opening-stage{position:relative;z-index:1;width:min(82vw,520px);display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 22px 44px rgba(23,32,51,.08))}.opening-clapper{width:74px;height:63px;position:relative;margin-bottom:24px;opacity:0;transform:translateY(14px) scale(.92);animation:openingClapperIn .42s var(--ease) .08s forwards}.opening-clap-body{position:absolute;left:0;bottom:0;width:74px;height:48px;padding:8px;border:2px solid var(--blue);border-radius:7px;background:#fff;display:grid;align-content:center;gap:4px}.opening-clap-body span{height:4px;border-radius:99px;background:var(--blue);opacity:.5}.opening-clap-body span:nth-child(2){opacity:.3}.opening-clap-body span:nth-child(3){opacity:.16}.opening-clap-top{position:absolute;left:0;top:0;width:74px;height:18px;padding:0 7px;border-radius:5px 5px 2px 2px;background:var(--blue);display:flex;align-items:center;gap:6px;transform-origin:left bottom;animation:openingClap .62s cubic-bezier(.2,.8,.2,1) .48s both}.opening-clap-top i{width:14px;height:7px;border-radius:2px;background:#fff;opacity:.92;transform:skewX(-20deg)}.opening-clap-top i:nth-child(2){opacity:.55}.opening-clap-top i:nth-child(3){opacity:.3}.opening-logo{display:block;width:min(78vw,420px);height:auto;opacity:0;transform:translateY(10px) scale(.985);filter:blur(5px);animation:openingLogoIn .58s var(--ease) .6s forwards}.opening-progress{width:min(58vw,310px);height:3px;margin-top:24px;border-radius:99px;background:rgba(45,91,227,.1);overflow:hidden;opacity:0;animation:openingFadeIn .3s ease .82s forwards}.opening-progress span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue2));transform:translateX(-120%);animation:openingScan .82s var(--ease) .92s forwards}.opening-copy{margin:12px 0 0;color:#98a2b3;font-size:9px;font-weight:800;letter-spacing:.22em;opacity:0;animation:openingFadeIn .35s ease 1s forwards}.app-opening.is-closing{animation:openingOut .5s cubic-bezier(.55,0,.18,1) forwards}.app-opening.is-closing .opening-stage{animation:openingStageOut .42s cubic-bezier(.55,0,.18,1) forwards}@keyframes openingFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes openingGrid{to{background-position:44px 44px}}@keyframes openingClapperIn{to{opacity:1;transform:none}}@keyframes openingClap{0%{transform:rotate(-18deg)}48%{transform:rotate(2deg)}66%{transform:rotate(-3deg)}100%{transform:rotate(0)}}@keyframes openingLogoIn{to{opacity:1;transform:none;filter:blur(0)}}@keyframes openingFadeIn{to{opacity:1}}@keyframes openingScan{0%{transform:translateX(-120%)}100%{transform:translateX(240%)}}@keyframes openingStageOut{to{opacity:0;transform:translateY(-8px) scale(1.015);filter:blur(5px)}}@keyframes openingOut{70%{opacity:0}100%{opacity:0;visibility:hidden;pointer-events:none}}
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--surface);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;z-index:40}.brand{border:0;background:transparent;display:flex;align-items:center;text-align:left;padding:7px 8px 20px;width:100%;cursor:pointer}.brand-logo-wrap{display:block;width:100%}.brand-logo{display:block;width:min(174px,100%);height:auto;object-fit:contain}.brand-logo-wrap small{display:block;font-size:10px;color:var(--muted);margin-top:7px;padding-left:1px}body.theme-dark .brand-logo-wrap{background:#fff;border-radius:12px;padding:8px}body.theme-dark .brand-logo-wrap small{color:#667085}.side-nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:11px;color:var(--muted);cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}.nav-item:hover{background:var(--surface2);color:var(--text);transform:translateX(2px)}.nav-item.active{background:var(--blue-soft);color:var(--blue);font-weight:700}.nav-item [data-icon]{width:19px;height:19px}.sidebar-foot{margin-top:auto;padding:14px 8px 2px;color:var(--muted2);display:grid;gap:9px}.sidebar-foot small{font-size:10px}.save-state{font-size:10px;display:flex;align-items:center;gap:6px}.save-dot{width:7px;height:7px;border-radius:99px;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.main-shell{margin-left:var(--sidebar);min-height:100vh;padding-top:var(--topbar);transition:margin-right .34s var(--ease)}.topbar{height:var(--topbar);position:fixed;top:0;left:var(--sidebar);right:0;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);transition:right .34s var(--ease)}.topbar h1{font-size:21px;margin:1px 0 0;letter-spacing:-.02em}.eyebrow,.section-kicker{margin:0;font-size:9px;letter-spacing:.17em;font-weight:800;color:var(--blue);text-transform:uppercase}.topbar-actions{display:flex;align-items:center;gap:8px}.primary-btn,.soft-btn,.icon-btn,.text-btn{border:0;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}.primary-btn{min-height:42px;padding:0 16px;border-radius:12px;background:var(--blue);color:#fff;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 22px rgba(45,91,227,.22)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(45,91,227,.28)}.soft-btn{min-height:40px;padding:0 13px;border:1px solid var(--line);background:var(--surface);border-radius:11px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:7px}.soft-btn:hover{border-color:var(--line-strong);background:var(--surface2);transform:translateY(-1px)}.icon-btn{width:40px;height:40px;border-radius:11px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:22px}.icon-btn:hover{background:var(--surface2);transform:translateY(-1px)}.text-btn{background:transparent;padding:8px;color:var(--blue);font-weight:700}.text-btn:hover{transform:translateX(2px)}[data-icon]{display:inline-grid;place-items:center;line-height:0}[data-icon] svg{width:100%;height:100%}.primary-btn [data-icon],.soft-btn [data-icon]{width:16px;height:16px}.mobile-only{display:none}
.view{display:none;padding:28px;max-width:1500px;margin:0 auto;animation:viewIn .32s var(--ease)}.view.active{display:block}@keyframes viewIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.home-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:18px}.home-intro h2,.section-head h2{margin:4px 0 0;font-size:22px;letter-spacing:-.025em}.home-intro>p{margin:0;color:var(--muted);font-size:12px;max-width:420px;line-height:1.7}.stage-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:34px}.stage-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px;min-height:126px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);animation:stageIn .48s var(--ease) both;animation-delay:var(--delay,0ms)}@keyframes stageIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}.stage-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--stage-color) 40%,var(--line))}.stage-card:before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;right:-28px;top:-34px;background:color-mix(in srgb,var(--stage-color) 10%,transparent)}.stage-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--stage-color) 11%,transparent);color:var(--stage-color);margin-bottom:14px}.stage-icon svg{width:19px;height:19px}.stage-card-bottom{display:flex;align-items:end;justify-content:space-between;gap:8px}.stage-name{font-size:12px;font-weight:750;min-width:0;overflow-wrap:anywhere}.stage-count{font-size:27px;font-weight:820;letter-spacing:-.04em}.stage-count small{font-size:10px;color:var(--muted);font-weight:650;margin-left:2px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 13px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.project-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:17px;cursor:pointer;position:relative;overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--blue) 28%,var(--line))}.project-card-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.project-card h3{font-size:15px;margin:0 0 4px;line-height:1.4}.category-chip,.stage-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-size:10px;font-weight:700;padding:5px 8px;background:var(--surface3);color:var(--muted)}.stage-chip{background:color-mix(in srgb,var(--stage-color) 10%,transparent);color:var(--stage-color);max-width:100%;white-space:normal;line-height:1.3;overflow-wrap:anywhere}.project-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.due{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}.due.overdue{color:var(--red);font-weight:700}.progress-row{margin-top:15px}.progress-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin-bottom:6px}.progress-label strong{font-size:12px;color:var(--text)}.progress-track{height:7px;border-radius:99px;background:var(--surface3);overflow:hidden}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:width .7s var(--ease)}.empty-state{grid-column:1/-1;background:var(--surface);border:1px dashed var(--line-strong);border-radius:16px;padding:44px 20px;text-align:center;color:var(--muted)}.empty-state strong{display:block;color:var(--text);font-size:16px;margin-bottom:5px}.mobile-project-feed{display:none}
.view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.view-switch{display:inline-flex;padding:4px;background:var(--surface3);border-radius:13px;gap:3px}.view-switch button{border:0;background:transparent;min-height:36px;border-radius:10px;padding:0 11px;color:var(--muted);font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer}.view-switch button.active{background:var(--surface);color:var(--blue);box-shadow:0 2px 8px rgba(23,32,51,.08)}.view-switch [data-icon]{width:15px;height:15px}.month-controls{display:flex;align-items:center;gap:7px}.month-controls strong{font-size:14px;min-width:100px;text-align:center}.purpose-note{background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 14%,var(--line));border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;margin-bottom:13px}.purpose-note>[data-icon]{width:22px;height:22px;color:var(--blue);margin-top:1px}.purpose-note strong{font-size:12px}.purpose-note p{margin:2px 0 0;color:var(--muted);font-size:10px;line-height:1.6}.calendar-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(23,32,51,.03)}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{background:var(--surface2);border-bottom:1px solid var(--line)}.calendar-weekdays span{text-align:center;font-size:10px;color:var(--muted);font-weight:700;padding:9px}.calendar-weekdays span:first-child{color:var(--red)}.calendar-cell{min-height:114px;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .18s}.calendar-cell:nth-child(7n){border-right:0}.calendar-cell.outside{background:var(--surface2);opacity:.58}.calendar-cell.today{background:color-mix(in srgb,var(--blue-soft) 60%,var(--surface))}.calendar-day{font-size:10px;color:var(--muted);font-weight:700;margin-bottom:6px}.calendar-cell.today .calendar-day{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--blue);color:#fff;margin-top:-2px}.calendar-event{display:block;width:100%;border:0;background:var(--blue-soft);color:var(--blue);text-align:left;border-radius:7px;padding:5px 6px;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;cursor:pointer;transition:transform .16s var(--ease),background .16s}.calendar-event:hover{transform:translateX(2px);background:color-mix(in srgb,var(--blue-soft) 75%,var(--blue) 8%)}
.gantt-shell{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:auto}.gantt-table{min-width:980px}.gantt-header,.gantt-row{display:grid;grid-template-columns:250px minmax(680px,1fr)}.gantt-header{position:sticky;top:0;background:var(--surface2);z-index:2;border-bottom:1px solid var(--line)}.gantt-info-head{padding:12px 15px;font-size:10px;color:var(--muted);font-weight:750}.gantt-days{display:grid;border-left:1px solid var(--line)}.gantt-day-head{font-size:8px;color:var(--muted);text-align:center;padding:8px 0;border-right:1px solid var(--line)}.gantt-day-head.today{background:var(--blue-soft);color:var(--blue);font-weight:800}.gantt-row{border-bottom:1px solid var(--line);min-height:74px;cursor:pointer;transition:background .17s}.gantt-row:last-child{border-bottom:0}.gantt-row:hover{background:var(--surface2)}.gantt-project-info{padding:11px 14px;display:flex;flex-direction:column;justify-content:center}.gantt-project-name{font-size:12px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gantt-project-meta{display:flex;align-items:center;gap:8px;margin-top:5px}.gantt-project-meta .stage-chip{font-size:9px;padding:3px 6px}.mini-progress{height:5px;flex:1;max-width:90px;border-radius:99px;background:var(--surface3);overflow:hidden}.mini-progress i{display:block;height:100%;background:var(--blue);border-radius:inherit}.gantt-project-meta b{font-size:9px}.gantt-track{display:grid;position:relative;border-left:1px solid var(--line)}.gantt-grid-day{border-right:1px solid var(--line);min-height:73px}.gantt-grid-day.today{background:color-mix(in srgb,var(--blue-soft) 70%,transparent)}.deadline-marker{position:absolute;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--blue);z-index:1}.deadline-marker i{width:12px;height:12px;background:var(--blue);transform:rotate(45deg);border-radius:3px;box-shadow:0 3px 8px rgba(45,91,227,.27)}.deadline-marker small{font-size:8px;white-space:nowrap;font-weight:750;background:var(--surface);padding:2px 4px;border-radius:4px}.gantt-outside{font-size:9px;color:var(--muted);display:flex;align-items:center;padding-left:12px}
.projects-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 170px 180px auto;gap:9px;margin-bottom:13px}.search-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 12px}.search-box>[data-icon]{width:16px;height:16px;color:var(--muted)}.search-box input{border:0;outline:0;background:transparent;color:var(--text);height:42px;min-width:0;flex:1}.select-control{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;min-height:42px;padding:0 34px 0 11px;outline:0}.select-control:focus,.search-box:focus-within{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:0 0 0 3px var(--blue-soft)}.archive-toggle{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:0 12px;font-size:10px;color:var(--muted);cursor:pointer}.archive-toggle input{accent-color:var(--blue)}.project-table{background:var(--surface);border:1px solid var(--line);border-radius:17px;overflow:hidden}.project-row{display:grid;grid-template-columns:minmax(220px,1.5fr) 130px 1fr 115px 95px;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .17s var(--ease),transform .17s var(--ease)}.project-row:last-child{border-bottom:0}.project-row:hover{background:var(--surface2)}.project-row-name strong{display:block;font-size:12px}.project-row-name small{display:block;color:var(--muted);font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-row .progress-label{margin:0 0 4px}.archived-badge{font-size:9px;background:var(--green-soft);color:var(--green);padding:4px 7px;border-radius:999px;font-weight:750}
.profile-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:18px;align-items:start}.profile-section{margin-bottom:26px}.profile-section .section-head{margin-bottom:10px}.profile-card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:16px}.card-lead,.section-note{margin:0 0 13px;color:var(--muted);font-size:10px;line-height:1.7}.section-note{margin-top:-4px}.stage-name-manager{display:grid;gap:7px}.stage-name-row{display:grid;grid-template-columns:34px 22px minmax(0,1fr);gap:8px;align-items:center}.stage-name-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--stage-color) 10%,transparent);color:var(--stage-color)}.stage-name-icon .material-symbols-outlined{font-size:18px}.stage-name-order{font-size:9px;font-weight:800;color:var(--muted2);text-align:center}.stage-name-row input{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:9px;height:38px;padding:0 10px;outline:0;min-width:0}.stage-name-row input:focus{border-color:var(--stage-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--stage-color) 12%,transparent)}.category-manager{display:grid;gap:7px;margin-bottom:10px}.category-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center}.category-dot{width:9px;height:9px;border-radius:50%;background:var(--cat-color)}.category-row input,.inline-add input{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:9px;height:38px;padding:0 10px;outline:0;min-width:0}.category-row input:focus,.inline-add input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}.tiny-btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;height:34px;padding:0 9px;cursor:pointer;color:var(--muted);font-size:9px}.tiny-btn:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 28%,var(--line));background:var(--red-soft)}.inline-add{display:grid;grid-template-columns:1fr auto;gap:7px}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.resource-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px;text-decoration:none;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}.resource-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--blue) 26%,var(--line))}.resource-card>[data-icon]{width:32px;height:32px;border-radius:9px;background:var(--blue-soft);color:var(--blue);padding:7px}.resource-card strong{font-size:11px}.resource-card p{font-size:9px;color:var(--muted);margin:2px 0 0}.resource-card>span:last-child{font-size:12px;color:var(--muted)}.hoto-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-image-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}.tool-image-card:hover{transform:translateY(-5px) scale(1.005);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--blue) 28%,var(--line))}.tool-image-card img{width:100%;aspect-ratio:16/10;object-fit:contain;display:block;background:#070707}.tool-image-card:nth-child(2) img{object-fit:contain;background:#070707}.tool-image-card.wide{grid-column:1/-1}.tool-image-card.wide img{aspect-ratio:16/8;object-fit:contain;background:#070707}.tool-image-card div{padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.tool-image-card strong{font-size:11px}.tool-image-card span{font-size:9px;color:var(--muted);text-align:right}.sticky-profile{position:sticky;top:calc(var(--topbar) + 20px)}.data-actions{display:grid;gap:8px}.save-explainer{display:flex;align-items:start;gap:9px;padding:10px 3px 12px;border-bottom:1px solid var(--line)}.save-explainer>[data-icon]{width:24px;height:24px;color:var(--green)}.save-explainer strong{font-size:11px}.save-explainer p{margin:2px 0 0;color:var(--muted);font-size:9px;line-height:1.6}.profile-action{width:100%;border:1px solid var(--line);background:var(--surface2);border-radius:12px;min-height:55px;padding:10px 11px;display:grid;grid-template-columns:27px 1fr;text-align:left;gap:9px;align-items:center;cursor:pointer;transition:background .18s,border-color .18s,transform .18s var(--ease)}.profile-action:hover{background:var(--surface);border-color:color-mix(in srgb,var(--blue) 30%,var(--line));transform:translateY(-1px)}.profile-action>[data-icon]{width:23px;height:23px;color:var(--blue)}.profile-action strong{display:block;font-size:10px}.profile-action small{display:block;color:var(--muted);font-size:8px;margin-top:2px;line-height:1.5}.profile-action.danger>[data-icon]{color:var(--red)}.profile-action.danger:hover{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 25%,var(--line))}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 3px}.setting-row strong{font-size:10px}.setting-row small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.setting-row select{min-height:36px;width:90px;font-size:10px}.version-note{text-align:center;font-size:8px;color:var(--muted2);margin:12px 0 0}
.detail-drawer{position:fixed;right:0;top:0;bottom:0;width:min(390px,92vw);background:var(--surface);border-left:1px solid var(--line);z-index:60;box-shadow:-18px 0 50px rgba(23,32,51,.12);transform:translateX(102%);transition:transform .34s var(--ease);display:flex;flex-direction:column}.detail-drawer.open{transform:none}.drawer-head{min-height:80px;padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.drawer-head h2{font-size:16px;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:270px}.drawer-body{padding:18px;overflow:auto;flex:1}.drawer-stage{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.drawer-stage .stage-chip{font-size:11px;padding:7px 10px}.drawer-progress{font-size:28px;font-weight:820;letter-spacing:-.04em}.drawer-section{padding:14px 0;border-top:1px solid var(--line)}.drawer-label{font-size:8px;letter-spacing:.13em;color:var(--muted2);font-weight:800;text-transform:uppercase;margin-bottom:5px}.drawer-value{font-size:11px;line-height:1.75;white-space:pre-wrap;word-break:break-word}.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.drawer-actions .danger-btn{grid-column:1/-1}.danger-btn{min-height:40px;border:1px solid color-mix(in srgb,var(--red) 24%,var(--line));background:var(--red-soft);color:var(--red);border-radius:11px;font-weight:700;cursor:pointer}.danger-btn:hover{filter:brightness(.98)}body.drawer-open .main-shell{margin-right:min(390px,92vw)}body.drawer-open .topbar{right:min(390px,92vw)}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.34);backdrop-filter:blur(8px);z-index:100;display:grid;place-items:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .22s}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{width:min(540px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 100px rgba(15,23,42,.24);transform:translateY(18px) scale(.985);transition:transform .28s var(--ease)}.modal-backdrop.open .modal{transform:none}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:17px 18px 13px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:18px;margin:2px 0 0}.modal-body{padding:17px 18px;display:grid;gap:16px}.field{display:grid;gap:7px}.field>span,.field-inline-label>span{font-size:10px;color:var(--muted);font-weight:750}.field input[type=text],.field input[type=date],.field textarea{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:11px;padding:10px 11px;outline:0}.field input[type=text],.field input[type=date]{height:43px}.field textarea{resize:vertical;min-height:92px}.field input:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}.field small{font-size:8px;color:var(--muted);line-height:1.6}.field-inline-label{display:flex;align-items:center;justify-content:space-between}.field-inline-label strong{font-size:14px;color:var(--blue)}.range{width:100%;accent-color:var(--blue)}.stage-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.stage-pick{border:1px solid var(--line);background:var(--surface2);border-radius:11px;min-height:52px;padding:6px 4px;display:grid;place-items:center;gap:3px;font-size:8px;color:var(--muted);cursor:pointer;transition:transform .16s var(--ease),border-color .16s,background .16s}.stage-pick [data-icon]{width:18px;height:18px}.stage-pick strong{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.25}.stage-pick.active{border-color:color-mix(in srgb,var(--stage-color) 45%,var(--line));background:color-mix(in srgb,var(--stage-color) 9%,var(--surface));color:var(--stage-color);font-weight:800;transform:translateY(-2px)}.enter-note{margin:0;background:var(--blue-soft);border-radius:10px;padding:8px 9px;font-size:8px;color:var(--muted);display:flex;gap:6px;line-height:1.6}.enter-note>[data-icon]{width:14px;height:14px;color:var(--blue);flex:0 0 auto}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px 17px;border-top:1px solid var(--line)}.modal-foot button{min-width:105px}.toast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,20px);background:#172033;color:#fff;border-radius:999px;padding:10px 15px;font-size:10px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease);box-shadow:0 12px 30px rgba(15,23,42,.25)}.toast.show{opacity:1;transform:translate(-50%,0)}.bottom-nav{display:none}
@media(max-width:1180px){.stage-summary{grid-template-columns:repeat(3,1fr)}.project-grid{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:1fr}.sticky-profile{position:static}.profile-side{max-width:none}.projects-toolbar{grid-template-columns:1fr 150px 160px}.archive-toggle{grid-column:1/-1;width:max-content}.project-row{grid-template-columns:minmax(200px,1.4fr) 110px 1fr 100px}.project-row>:nth-child(5){display:none}}
@media(max-width:768px){:root{--topbar:62px}.sidebar{display:none}.main-shell{margin-left:0;padding-top:var(--topbar);padding-bottom:66px}.topbar{left:0;height:var(--topbar);padding:10px 14px}.topbar h1{font-size:17px}.topbar .eyebrow{display:none}.topbar-actions .primary-btn{min-height:39px;padding:0 12px;font-size:11px}.mobile-only{display:grid}.view{padding:14px 12px 22px}.home-intro{display:block;margin:4px 2px 14px}.home-intro h2{font-size:19px}.home-intro>p{font-size:10px;margin-top:6px}.stage-summary{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible;padding:1px 0 5px;margin-right:0;margin-bottom:13px}.stage-card{min-width:0;min-height:96px;padding:9px 6px}.stage-icon{width:27px;height:27px;margin-bottom:7px;border-radius:9px}.stage-icon svg{width:16px;height:16px}.stage-card-bottom{display:grid;gap:2px;align-items:end}.stage-name{font-size:8px;line-height:1.25;white-space:normal}.stage-count{font-size:19px;line-height:1}.stage-count small{font-size:7px}.home-projects-head{display:none}.desktop-project-grid{display:none}.mobile-project-feed{display:flex;flex-direction:column;gap:10px;height:calc(100dvh - var(--topbar) - 66px - 138px);min-height:360px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;padding:2px 0 16px;scrollbar-width:none}.mobile-project-feed::-webkit-scrollbar{display:none}.mobile-project-card{scroll-snap-align:start;min-height:min(480px,calc(100dvh - var(--topbar) - 80px));background:var(--surface);border:1px solid var(--line);border-radius:21px;padding:22px 18px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.mobile-project-card:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-100px;background:color-mix(in srgb,var(--stage-color) 9%,transparent)}.mobile-project-card .mobile-stage-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--stage-color) 11%,transparent);color:var(--stage-color);margin-bottom:16px}.mobile-project-card .mobile-stage-icon svg{width:22px;height:22px}.mobile-project-card h3{font-size:23px;letter-spacing:-.03em;line-height:1.35;margin:0 0 9px;position:relative}.mobile-project-card .mobile-stage-name{font-size:11px;font-weight:800;color:var(--stage-color);position:relative}.mobile-project-card .progress-row{margin:22px 0 15px;position:relative}.mobile-project-card .progress-track{height:10px}.mobile-project-card .progress-label strong{font-size:17px}.mobile-project-meta{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px;position:relative}.mobile-project-meta div{display:grid;grid-template-columns:78px 1fr;gap:8px;font-size:10px}.mobile-project-meta span:first-child{color:var(--muted)}.mobile-project-meta p{margin:0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.swipe-tip{text-align:center;font-size:8px;color:var(--muted2);margin-top:13px}.bottom-nav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(58px + env(safe-area-inset-bottom));padding:5px 5px env(safe-area-inset-bottom);grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.bottom-nav button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;align-content:center;gap:2px;border-radius:10px;cursor:pointer}.bottom-nav button.active{color:var(--blue);background:var(--blue-soft)}.bottom-nav [data-icon]{width:18px;height:18px}.bottom-nav small{font-size:8px}.view-toolbar{align-items:stretch;flex-direction:column}.view-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}.view-switch button{justify-content:center}.month-controls{justify-content:center}.purpose-note{padding:10px}.calendar-card{border-radius:14px;overflow:auto}.calendar-card>div{min-width:650px}.calendar-cell{min-height:96px}.calendar-event{font-size:8px}.gantt-shell{border-radius:14px}.projects-toolbar{grid-template-columns:1fr 1fr}.search-box{grid-column:1/-1}.archive-toggle{width:auto;grid-column:1/-1;min-height:42px}.project-table{border-radius:14px}.project-row{grid-template-columns:1fr auto;gap:8px;padding:12px}.project-row>:nth-child(2),.project-row>:nth-child(3),.project-row>:nth-child(4),.project-row>:nth-child(5){display:none}.profile-grid{gap:0}.profile-side{order:-1}.profile-main{order:0}.profile-section{margin-bottom:19px}.resource-grid{grid-template-columns:1fr}.hoto-tools-grid{grid-template-columns:1fr}.tool-image-card.wide{grid-column:auto}.tool-image-card img,.tool-image-card.wide img{aspect-ratio:16/10;object-fit:contain;background:#070707}.tool-image-card:nth-child(2) img{object-fit:contain}.profile-card{padding:13px}.detail-drawer{width:100%;top:var(--topbar);bottom:calc(58px + env(safe-area-inset-bottom));border-left:0;border-top:1px solid var(--line)}body.drawer-open .main-shell{margin-right:0}body.drawer-open .topbar{right:0}.drawer-head{min-height:62px}.modal-backdrop{align-items:end;padding:0}.modal{width:100%;max-height:90dvh;border-radius:22px 22px 0 0;border-bottom:0}.stage-picker{grid-template-columns:repeat(5,minmax(60px,1fr));overflow-x:auto;padding-bottom:3px}.stage-pick{min-width:66px}.modal-foot{display:grid;grid-template-columns:1fr 1fr}.modal-foot button{width:100%;min-width:0}.toast{bottom:80px}.section-head h2{font-size:18px}}
@media(max-width:420px){.topbar-actions .primary-btn span:last-child{display:none}.topbar-actions .primary-btn{width:40px;padding:0}.stage-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.mobile-project-feed{height:calc(100dvh - var(--topbar) - 66px - 134px)}.projects-toolbar{grid-template-columns:1fr}.projects-toolbar>*{grid-column:1!important}.stage-picker{grid-template-columns:repeat(5,70px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.stage-chip svg{width:12px;height:12px;flex:0 0 auto}
.due svg{width:10px;height:10px;flex:0 0 auto}

/* Medium-width stability: keep the project view readable instead of squeezing it
   beside the detail drawer. The drawer overlays content until a wide desktop. */
@media (max-width:1180px) and (min-width:769px){
  body.drawer-open .main-shell{margin-right:0}
  body.drawer-open .topbar{right:0}
  .detail-drawer{box-shadow:-18px 0 48px rgba(23,32,51,.12)}
}
@media (max-width:900px) and (min-width:769px){
  .project-row{grid-template-columns:minmax(0,1fr) 90px minmax(110px,.72fr);gap:9px}
  .project-row>:nth-child(4),.project-row>:nth-child(5){display:none}
}
@media (max-width:900px) and (min-width:769px){
  .projects-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .projects-toolbar>*{min-width:0;max-width:100%}
  .projects-toolbar .search-box{grid-column:1/-1}
  .projects-toolbar .archive-toggle{grid-column:1/-1;width:max-content}
  .projects-toolbar .select-control{width:100%}
}
.project-card:focus-visible,.mobile-project-card:focus-visible,.project-row:focus-visible,.gantt-row:focus-visible,.stage-card:focus-visible,.nav-item:focus-visible,.resource-card:focus-visible,.tool-image-card:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent);outline-offset:2px}

/* ── v0.4.2 mobile project focus ────────────────────────────────────────────
   Home on phones is intentionally a one-project-per-screen experience.
   The five-stage overview stays available as a compact floating strip, while
   each project occupies the entire usable viewport between the top and bottom
   navigation. */
@media (max-width:768px){
  #view-home.active{
    position:relative;
    width:100%;
    max-width:none;
    height:calc(100dvh - var(--topbar) - 66px);
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    animation:none;
    background:var(--surface);
  }
  #view-home .home-intro,
  #view-home .home-projects-head,
  #view-home .desktop-project-grid{display:none}

  #view-home .stage-summary{
    position:absolute;
    z-index:6;
    top:10px;
    left:10px;
    right:10px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    margin:0;
    padding:5px;
    border:1px solid color-mix(in srgb,var(--line) 74%,transparent);
    border-radius:17px;
    background:color-mix(in srgb,var(--surface) 86%,transparent);
    box-shadow:0 8px 28px rgba(23,32,51,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  #view-home .stage-card{
    min-width:0;
    min-height:64px;
    height:64px;
    padding:6px 2px;
    border:0;
    border-radius:12px;
    background:transparent;
    box-shadow:none;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
  }
  #view-home .stage-card:hover,
  #view-home .stage-card:active{
    transform:none;
    background:color-mix(in srgb,var(--stage-color) 8%,transparent);
    box-shadow:none;
  }
  #view-home .stage-card::before{display:none}
  #view-home .stage-icon{
    width:23px;
    height:23px;
    margin:0;
    border-radius:8px;
  }
  #view-home .stage-icon svg{width:14px;height:14px}
  #view-home .stage-card-bottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    min-width:0;
  }
  #view-home .stage-name{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-size:7px;
    line-height:1.1;
  }
  #view-home .stage-count{
    font-size:15px;
    line-height:1;
  }
  #view-home .stage-count small{font-size:6px}

  #view-home .mobile-project-feed{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
    gap:0;
    margin:0;
    padding:0;
    overflow-y:auto;
    overflow-x:hidden;
    scroll-snap-type:y mandatory;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  #view-home .mobile-project-feed::-webkit-scrollbar{display:none}

  #view-home .mobile-project-card{
    flex:0 0 100%;
    width:100%;
    height:100%;
    min-height:100%;
    margin:0;
    padding:96px 24px 26px;
    border:0;
    border-radius:0;
    background:
      radial-gradient(circle at 92% 9%,color-mix(in srgb,var(--stage-color) 12%,transparent) 0 18%,transparent 42%),
      linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%,var(--stage-color) 2%),var(--surface));
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    isolation:isolate;
  }
  #view-home .mobile-project-card::before{
    width:300px;
    height:300px;
    right:-140px;
    top:60px;
    opacity:.7;
  }
  #view-home .mobile-project-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:34%;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--stage-color) 3%,transparent));
  }
  #view-home .mobile-project-card .mobile-stage-icon{
    width:52px;
    height:52px;
    margin-bottom:14px;
    border-radius:17px;
    box-shadow:0 10px 30px color-mix(in srgb,var(--stage-color) 14%,transparent);
  }
  #view-home .mobile-project-card .mobile-stage-icon svg{width:26px;height:26px}
  #view-home .mobile-project-card .mobile-stage-name{
    margin-bottom:7px;
    font-size:12px;
    letter-spacing:.03em;
  }
  #view-home .mobile-project-card h3{
    max-width:92%;
    margin:0;
    font-size:clamp(25px,7vw,32px);
    line-height:1.27;
    letter-spacing:-.04em;
    text-wrap:balance;
  }
  #view-home .mobile-project-card .progress-row{
    margin:28px 0 20px;
  }
  #view-home .mobile-project-card .progress-label{
    margin-bottom:9px;
    font-size:11px;
  }
  #view-home .mobile-project-card .progress-label strong{
    font-size:22px;
    letter-spacing:-.03em;
  }
  #view-home .mobile-project-card .progress-track{
    height:11px;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 65%,transparent);
  }
  #view-home .mobile-project-meta{
    gap:11px;
    padding-top:18px;
  }
  #view-home .mobile-project-meta div{
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    align-items:start;
    font-size:11px;
  }
  #view-home .mobile-project-meta strong{font-size:12px}
  #view-home .mobile-project-meta p{
    font-size:11px;
    line-height:1.65;
    -webkit-line-clamp:4;
  }
  #view-home .swipe-tip{
    position:absolute;
    left:0;
    right:0;
    bottom:15px;
    margin:0;
    font-size:9px;
    letter-spacing:.04em;
  }
  #view-home .mobile-project-feed>.empty-state{
    height:100%;
    min-height:100%;
    border:0;
    border-radius:0;
    display:grid;
    place-content:center;
    padding:100px 24px 24px;
    background:var(--surface);
  }
}

@media (max-width:420px){
  #view-home .mobile-project-card{padding-left:20px;padding-right:20px}
}

@media (max-width:768px) and (max-height:700px){
  #view-home .stage-summary{top:7px;left:7px;right:7px;padding:4px;border-radius:15px}
  #view-home .stage-card{height:56px;min-height:56px;padding:4px 1px}
  #view-home .stage-icon{width:20px;height:20px}
  #view-home .stage-icon svg{width:12px;height:12px}
  #view-home .stage-count{font-size:13px}
  #view-home .mobile-project-card{padding-top:76px;padding-bottom:20px}
  #view-home .mobile-project-card .mobile-stage-icon{width:44px;height:44px;margin-bottom:9px;border-radius:14px}
  #view-home .mobile-project-card .mobile-stage-icon svg{width:22px;height:22px}
  #view-home .mobile-project-card h3{font-size:23px}
  #view-home .mobile-project-card .progress-row{margin:18px 0 14px}
  #view-home .mobile-project-meta{gap:7px;padding-top:12px}
  #view-home .mobile-project-meta div{font-size:10px}
  #view-home .mobile-project-meta p{font-size:10px;line-height:1.5;-webkit-line-clamp:2}
  #view-home .swipe-tip{bottom:8px}
}

/* ── v0.4.3 Account / compact tools / mobile deck refinement ─────────────── */
.auth-card{display:grid;gap:11px}.auth-user-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center}.auth-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--blue-soft);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 14%,var(--line))}.auth-avatar svg{width:21px;height:21px}.auth-avatar img{width:100%;height:100%;object-fit:cover;display:block}.auth-user-copy{min-width:0}.auth-user-copy strong{display:block;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-user-copy p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.45;overflow-wrap:anywhere}.google-login-btn{min-height:40px;width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-weight:750;font-size:10px;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s,background .18s}.google-login-btn:hover:not(:disabled){transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 28%,var(--line));box-shadow:var(--shadow-sm)}.google-login-btn:disabled{opacity:.55;cursor:not-allowed}.google-mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#4285f4;border:1px solid #e4e7ec;font:800 12px/1 Arial,sans-serif}.auth-logout-btn{width:100%;min-height:38px;font-size:10px}.auth-note{margin:0;color:var(--muted);font-size:8px;line-height:1.6}.auth-note.auth-error{color:var(--red)}

.embedded-tools{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}.embedded-tools-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.embedded-tools-head>div{display:grid;gap:1px}.embedded-tools-head strong{font-size:10px}.embedded-tools-head small{font-size:8px;color:var(--muted)}.embedded-tools-head>span{font-size:8px;color:var(--muted2);font-weight:700}.hoto-tools-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.tool-mini-card{min-width:0;min-height:64px;padding:7px;border:1px solid var(--line);border-radius:11px;background:var(--surface);text-decoration:none;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:8px;transition:transform .18s var(--ease),border-color .18s,background .18s,box-shadow .18s}.tool-mini-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 25%,var(--line));background:var(--surface2);box-shadow:var(--shadow-sm)}.tool-mini-card img{width:58px;height:46px;object-fit:cover;border-radius:7px;display:block;background:#070707}.tool-mini-card>div{min-width:0}.tool-mini-card strong{display:block;font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-mini-card span{display:block;margin-top:3px;color:var(--muted);font-size:7px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-mini-card b{font-size:9px;color:var(--muted2);font-weight:700}.tool-mini-card:focus-visible,.google-login-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent);outline-offset:2px}

@media(max-width:1180px){.hoto-tools-compact{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-width:768px){
  /* Home behaves like a vertical card deck: the project itself owns the screen. */
  body.home-deck-active{height:100dvh;overflow:hidden}
  body.home-deck-active .main-shell{height:100dvh;min-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
  body.home-deck-active .topbar{left:0;right:0;top:0;height:58px;padding:8px 10px;z-index:46;border-bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface) 56%,transparent) 72%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  body.home-deck-active .topbar>div:first-child{min-width:0}
  body.home-deck-active .topbar h1{font-size:15px;letter-spacing:-.02em}
  body.home-deck-active .topbar-actions{gap:6px}
  body.home-deck-active .topbar-actions .icon-btn,body.home-deck-active .topbar-actions .primary-btn{background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid color-mix(in srgb,var(--line) 76%,transparent);box-shadow:0 5px 18px rgba(23,32,51,.07);backdrop-filter:blur(12px)}
  body.home-deck-active .topbar-actions .primary-btn{color:var(--blue);min-height:40px}

  #view-home.active{height:100dvh!important;min-height:0!important;padding:0!important;background:var(--surface)}
  #view-home .stage-summary{top:62px;left:9px;right:9px;box-shadow:0 8px 28px rgba(23,32,51,.09)}
  #view-home .mobile-project-card{padding:137px 22px calc(82px + env(safe-area-inset-bottom));justify-content:center;touch-action:pan-y;cursor:grab}
  #view-home .mobile-project-card:active{cursor:grabbing}
  #view-home .mobile-project-card h3{font-size:clamp(27px,7.8vw,34px);max-width:94%}
  #view-home .mobile-project-card .mobile-stage-icon{width:55px;height:55px}
  #view-home .mobile-project-card .progress-label strong{font-size:24px}
  #view-home .mobile-project-card .progress-track{height:12px}
  #view-home .swipe-tip{bottom:calc(68px + env(safe-area-inset-bottom));font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.06em}
  #view-home .swipe-tip::after{content:"";display:block;width:18px;height:18px;margin:5px auto 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.55;animation:swipeNudge 1.8s var(--ease) infinite}
  @keyframes swipeNudge{0%,100%{transform:translateY(-2px) rotate(45deg);opacity:.28}50%{transform:translateY(4px) rotate(45deg);opacity:.7}}
  .bottom-nav{background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 -8px 28px rgba(23,32,51,.05)}

  .account-section{margin-bottom:14px}
  .auth-card{padding:11px}
  .hoto-tools-compact{grid-template-columns:1fr;gap:5px}
  .embedded-tools{margin-top:10px;padding-top:9px}
  .tool-mini-card{min-height:58px;grid-template-columns:66px minmax(0,1fr) auto;padding:6px 7px;border-radius:10px}
  .tool-mini-card img{width:66px;height:45px}
  .tool-mini-card strong{font-size:10px}.tool-mini-card span{font-size:8px}
}

@media(max-width:420px){
  #view-home .stage-summary{top:59px;left:6px;right:6px}
  #view-home .mobile-project-card{padding-left:19px;padding-right:19px;padding-top:129px}
  #view-home .mobile-project-meta{gap:9px}
  #view-home .mobile-project-meta div{grid-template-columns:76px minmax(0,1fr)}
}

@media(max-width:768px) and (max-height:700px){
  #view-home .stage-summary{top:57px}
  #view-home .mobile-project-card{padding-top:116px;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  #view-home .swipe-tip{bottom:calc(62px + env(safe-area-inset-bottom))}
}

.google-login-btn[hidden],.auth-logout-btn[hidden]{display:none!important}

@media(max-width:768px){
  /* HoTo Tools stays visible without becoming a second content block. */
  .hoto-tools-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .tool-mini-card{min-height:80px;padding:5px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px auto;gap:4px 3px;align-content:start}
  .tool-mini-card img{grid-column:1/-1;width:100%;height:40px;border-radius:6px;object-fit:cover}
  .tool-mini-card>div{align-self:center}
  .tool-mini-card strong{font-size:8px;line-height:1.15}
  .tool-mini-card span{display:none}
  .tool-mini-card b{align-self:center;font-size:8px}
}

/* ── v0.5.0: Material Symbols / Gantt / intuitive mobile deck ───────────── */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-feature-settings:'liga';
  font-variation-settings:'FILL' 0,'wght' 500;
}
[data-icon].material-symbols-outlined{display:inline-grid;place-items:center;line-height:1;width:auto;height:auto}
.primary-btn [data-icon],.soft-btn [data-icon]{font-size:18px}.nav-item [data-icon]{font-size:21px}.bottom-nav [data-icon]{font-size:20px}
.stage-icon .material-symbols-outlined{font-size:20px}.stage-chip .material-symbols-outlined{font-size:14px}.due .material-symbols-outlined{font-size:13px}
.stage-chip{position:relative;z-index:2}.stage-chip .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 500}

/* Home thumbnails: Material Symbols become the recognizable visual, category color owns the atmosphere. */
.project-card{isolation:isolate;background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 7%,var(--surface)) 0%,var(--surface) 58%)}
.project-thumb-watermark{position:absolute;z-index:-1;right:-14px;bottom:-24px;font-size:142px;line-height:1;color:color-mix(in srgb,var(--cat-color) 12%,transparent);font-variation-settings:'FILL' 1,'wght' 500;transform:rotate(-4deg);pointer-events:none}
.mobile-thumbnail-watermark{position:absolute;z-index:0;right:-9vw;top:15%;font-size:min(74vw,340px);line-height:1;color:color-mix(in srgb,var(--cat-color) 16%,transparent);font-variation-settings:'FILL' 1,'wght' 500;transform:rotate(-5deg);pointer-events:none;filter:saturate(.9)}
.mobile-project-card>*:not(.mobile-thumbnail-watermark){position:relative;z-index:2}
.mobile-project-card{background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 13%,var(--surface)) 0%,var(--surface) 52%,color-mix(in srgb,var(--cat-color) 5%,var(--surface)) 100%)}
.mobile-project-card::before{background:radial-gradient(circle,color-mix(in srgb,var(--cat-color) 15%,transparent),transparent 69%)!important}

/* Right-side page indicator. Each inactive dot keeps its project's category color. */
.mobile-page-dots{display:none}

/* Gantt: a real time segment from automatic start (created date) to 「いつまでに」. */
.gantt-project-info{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;align-items:center;padding:8px 10px}
.gantt-project-copy{min-width:0}.gantt-drag-handle{width:30px;height:42px;border:0;border-radius:9px;background:transparent;color:var(--muted2);display:grid;place-items:center;cursor:grab;touch-action:none;transition:background .18s,color .18s,transform .18s var(--ease)}
.gantt-drag-handle:hover{background:var(--surface3);color:var(--text)}.gantt-drag-handle:active{cursor:grabbing;transform:scale(.96)}.gantt-drag-handle .material-symbols-outlined{font-size:22px}
.gantt-row.is-dragging{position:relative;z-index:8;background:var(--blue-soft);box-shadow:0 10px 28px rgba(45,91,227,.14);opacity:.94}
.gantt-track{min-height:78px;overflow:hidden}.gantt-grid-day{min-height:78px}
.gantt-segment{position:absolute;top:50%;height:24px;transform:translateY(-50%);border-radius:999px;background:color-mix(in srgb,var(--bar-color) 18%,var(--surface3));border:1px solid color-mix(in srgb,var(--bar-color) 32%,var(--line));overflow:visible;box-shadow:0 4px 14px color-mix(in srgb,var(--bar-color) 12%,transparent);z-index:2}
.gantt-segment-progress{display:block;height:100%;max-width:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--bar-color) 88%,#fff 0%),var(--bar-color));transition:width .55s var(--ease)}
.gantt-segment small{position:absolute;left:100%;top:50%;transform:translate(6px,-50%);white-space:nowrap;padding:3px 6px;border-radius:6px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 2px 8px rgba(23,32,51,.06);font-size:8px;color:var(--muted);font-weight:750}
.gantt-segment.clipped-end small{left:auto;right:4px;transform:translateY(-50%);color:color-mix(in srgb,var(--bar-color) 70%,var(--text))}
.gantt-segment.clipped-start{border-radius:4px 999px 999px 4px}.gantt-segment.clipped-end{border-radius:999px 4px 4px 999px}.gantt-segment.clipped-start.clipped-end{border-radius:4px}
.gantt-outside{z-index:2}.gantt-outside.overdue{color:var(--red);font-weight:700}

/* Thumbnail selector: 30 Material Symbols, no generated SVG assets. */
.thumbnail-picker{display:grid;grid-template-columns:repeat(10,minmax(36px,1fr));gap:6px;padding:8px;border:1px solid var(--line);border-radius:13px;background:var(--surface2);max-height:150px;overflow:auto}
.thumbnail-option{aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:transform .16s var(--ease),border-color .16s,background .16s,color .16s,box-shadow .16s}
.thumbnail-option:hover{transform:translateY(-2px);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}.thumbnail-option.active{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 45%,var(--line));color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 10%,transparent)}
.thumbnail-option .material-symbols-outlined{font-size:22px}.thumbnail-option.active .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 550}
.drawer-thumbnail{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;margin-bottom:12px;background:color-mix(in srgb,var(--cat-color) 12%,var(--surface3));color:var(--cat-color)}.drawer-thumbnail .material-symbols-outlined{font-size:30px;font-variation-settings:'FILL' 1,'wght' 500}

/* Profile: tools are intentionally subordinate and never crop the promotional image. */
.tool-mini-card{grid-template-columns:52px minmax(0,1fr) auto!important;grid-template-rows:auto!important;min-height:56px!important;padding:6px!important}
.tool-mini-card img{grid-column:auto!important;width:52px!important;height:40px!important;object-fit:contain!important;background:#070707;border-radius:6px!important}
.tool-mini-card>div{min-width:0}.tool-mini-card strong{font-size:9px}.tool-mini-card span{font-size:7px}
.auth-logout-btn,.auth-delete-btn{gap:6px}.auth-logout-btn .material-symbols-outlined,.auth-delete-btn .material-symbols-outlined{font-size:17px}.auth-delete-btn{width:100%;min-height:38px;display:flex;align-items:center;justify-content:center}.account-delete-note{padding-top:2px;border-top:1px solid var(--line)}
.profile-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.profile-links button{border:0;background:transparent;color:var(--muted);font-size:9px;padding:5px 4px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}.profile-links button:hover{color:var(--blue)}.profile-links .material-symbols-outlined{font-size:15px}

/* About / Privacy */
.info-view{max-width:1040px}.info-hero{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--blue) 7%,var(--surface)));box-shadow:var(--shadow-sm);margin-bottom:18px}.info-hero>span{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:37px;font-variation-settings:'FILL' 1,'wght' 500}.info-hero h2{margin:3px 0 5px;font-size:28px;letter-spacing:-.04em}.info-hero p:last-child{margin:0;color:var(--muted);font-size:11px;line-height:1.75}.info-hero.compact{grid-template-columns:58px 1fr}.info-hero.compact>span{width:58px;height:58px;font-size:30px}
.about-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}.about-principles article{padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.about-principles article>span{font-size:25px;color:var(--blue);margin-bottom:10px}.about-principles strong{display:block;font-size:12px}.about-principles p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.7}.about-views,.policy-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:18px}.about-views h3,.policy-card h3{font-size:13px;margin:0 0 12px}.about-view-row{display:grid;grid-template-columns:32px 90px minmax(0,1fr);align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}.about-view-row>span{color:var(--blue);font-size:20px}.about-view-row strong{font-size:10px}.about-view-row p{margin:0;color:var(--muted);font-size:10px}.info-note{display:flex;align-items:flex-start;gap:9px;padding:13px 15px;border-radius:14px;background:var(--blue-soft);color:var(--blue)}.info-note>span{font-size:20px}.info-note p{margin:0;font-size:10px;line-height:1.7;color:color-mix(in srgb,var(--blue) 78%,var(--text))}.policy-updated{margin:0 0 18px;color:var(--muted2);font-size:9px}.policy-card h3{margin-top:20px;margin-bottom:6px}.policy-card h3:first-of-type{margin-top:0}.policy-card>p:not(.policy-updated){margin:0;color:var(--muted);font-size:10px;line-height:1.85}.policy-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}.policy-links a{font-size:9px;color:var(--blue);text-decoration:none;padding:7px 9px;border:1px solid color-mix(in srgb,var(--blue) 20%,var(--line));border-radius:9px;background:var(--blue-soft)}

@media(max-width:768px){
  /* One project really owns one screen. The summary remains compact and the right dots show location. */
  #view-home .mobile-project-feed{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;gap:0!important;overflow-y:auto!important;scroll-snap-type:y mandatory!important}
  #view-home .mobile-project-card{flex:0 0 100%!important;width:100%!important;height:100%!important;min-height:100%!important;border:0!important;border-radius:0!important;padding:142px 28px calc(86px + env(safe-area-inset-bottom)) 22px!important;scroll-snap-align:start;scroll-snap-stop:always}
  #view-home .stage-summary{z-index:9!important;right:24px!important}
  .mobile-page-dots{position:absolute;display:flex;z-index:12;right:7px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:8px;padding:7px 4px;border-radius:999px;background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .mobile-page-dots[hidden]{display:none!important}.mobile-page-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--dot-color);opacity:.36;box-shadow:0 0 0 0 color-mix(in srgb,var(--dot-color) 0%,transparent);cursor:pointer;transition:transform .22s var(--ease),opacity .22s,box-shadow .22s,background .22s}
  .mobile-page-dot.active{opacity:1;transform:scale(1.45);background:var(--dot-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--dot-color) 18%,transparent),0 0 12px color-mix(in srgb,var(--dot-color) 52%,transparent)}
  .mobile-thumbnail-watermark{right:-17vw;top:21%;font-size:min(92vw,390px);color:color-mix(in srgb,var(--cat-color) 17%,transparent)}
  #view-home .mobile-project-card .mobile-stage-icon{background:color-mix(in srgb,var(--stage-color) 13%,var(--surface));box-shadow:0 8px 28px color-mix(in srgb,var(--stage-color) 10%,transparent)}
  #view-home .mobile-project-card h3{max-width:88%}

  .thumbnail-picker{grid-template-columns:repeat(6,minmax(38px,1fr));max-height:168px}.thumbnail-option .material-symbols-outlined{font-size:21px}
  .embedded-tools{margin-top:8px!important;padding-top:8px!important}.embedded-tools-head{margin-bottom:5px!important}
  .info-view{padding-bottom:82px}.info-hero{grid-template-columns:52px 1fr;padding:16px;gap:12px;border-radius:16px}.info-hero>span{width:52px;height:52px;border-radius:15px;font-size:28px}.info-hero h2{font-size:21px}.about-principles{grid-template-columns:1fr;gap:7px}.about-principles article{padding:13px}.about-view-row{grid-template-columns:28px 72px minmax(0,1fr)}.about-views,.policy-card{padding:14px;border-radius:15px}.policy-links{display:grid}
}

@media(max-width:420px){
  #view-home .mobile-project-card{padding-left:18px!important;padding-right:25px!important}.mobile-page-dots{right:5px}.thumbnail-picker{grid-template-columns:repeat(5,1fr)}
}

@media(prefers-reduced-motion:reduce){.gantt-segment-progress,.mobile-page-dot{transition:none!important}}
.auth-delete-btn[hidden]{display:none!important}
@media(max-width:768px){
  .hoto-tools-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  .tool-mini-card{min-width:0!important;min-height:62px!important;padding:4px!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:34px auto!important;gap:3px!important;align-content:start!important}
  .tool-mini-card img{grid-column:1!important;grid-row:1!important;width:100%!important;height:34px!important;object-fit:contain!important;border-radius:5px!important}
  .tool-mini-card>div{grid-row:2!important;min-width:0!important;text-align:center!important}
  .tool-mini-card strong{font-size:7.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .tool-mini-card span,.tool-mini-card b{display:none!important}
}

/* ── v0.6.0 cloud sync / safer project management ─────────────────────── */
.save-state,.sync-status{display:flex;align-items:center;gap:7px}
.sync-status{margin-top:8px;font-size:9px;font-weight:750;color:var(--muted)}
.save-state .save-dot,.sync-status .save-dot{transition:background .2s,box-shadow .2s,transform .2s var(--ease)}
.save-state.syncing .save-dot,.sync-status.syncing .save-dot{background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);animation:syncPulse 1.1s ease-in-out infinite}
.save-state.synced .save-dot,.sync-status.synced .save-dot{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.save-state.offline .save-dot,.sync-status.offline .save-dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.save-state.error .save-dot,.sync-status.error .save-dot{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
@keyframes syncPulse{50%{transform:scale(.72);opacity:.55}}
.sync-backdrop{z-index:260}
.sync-modal{width:min(560px,calc(100vw - 28px))}
.sync-modal .modal-body{gap:14px}
.sync-hero-icon{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);margin:2px auto 4px;box-shadow:inset 0 0 0 1px rgba(59,91,219,.06)}
.sync-hero-icon .material-symbols-outlined{font-size:40px}
.sync-modal-text{margin:0;text-align:center;color:var(--text);font-size:13px;line-height:1.75}
.sync-choice-list{display:grid;gap:8px}
.sync-choice-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:stretch;min-height:58px;border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:visible;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease),background .18s var(--ease)}
.sync-choice-item:hover{border-color:rgba(59,91,219,.35);box-shadow:0 8px 22px rgba(23,32,51,.07);transform:translateY(-1px)}
.sync-choice-item:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sync-choice-item[hidden],.sync-choice-item:has(> .sync-choice-action[hidden]){display:none!important}
.sync-choice-action{appearance:none;border:0;background:transparent;color:var(--text);min-width:0;width:100%;padding:9px 8px 9px 12px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;text-align:left;cursor:pointer;font:inherit;border-radius:13px 0 0 13px}
.sync-choice-action:hover{background:var(--surface2)}
.sync-choice-icon{width:38px;height:38px;border-radius:11px;background:var(--surface2);color:var(--blue);display:grid;place-items:center;font-size:24px!important;transition:transform .18s var(--ease),background .18s var(--ease)}
.sync-choice-item:hover .sync-choice-icon{transform:scale(1.04);background:var(--blue-soft)}
.sync-choice-label{min-width:0;font-size:12px;font-weight:800;line-height:1.45;letter-spacing:.01em}
.sync-choice-primary{border-color:rgba(59,91,219,.32);background:linear-gradient(90deg,var(--surface),rgba(59,91,219,.035))}
.sync-choice-primary .sync-choice-icon{background:var(--blue);color:#fff}
.sync-help{position:relative;align-self:center;justify-self:center;width:23px;height:23px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--muted);display:grid;place-items:center;padding:0;font-size:11px;font-weight:900;line-height:1;cursor:help;z-index:30;isolation:isolate;transition:color .16s,background .16s,border-color .16s}
.sync-help:hover,.sync-help:focus-visible{color:var(--blue);border-color:var(--blue);background:var(--blue-soft);outline:none}
/* ツールチップは「？」の左側に出し、ヘルプボタン自体を覆わない */
.sync-help::after{content:attr(data-tooltip);position:absolute;right:calc(100% + 12px);top:50%;bottom:auto;width:min(290px,calc(100vw - 80px));padding:9px 10px;border-radius:9px;background:#172033;color:#fff;font-size:9px;font-weight:600;line-height:1.6;text-align:left;box-shadow:0 10px 26px rgba(23,32,51,.22);opacity:0;visibility:hidden;transform:translate(5px,-50%);transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;pointer-events:none;z-index:1}
.sync-help::before{content:"";position:absolute;right:calc(100% + 3px);top:50%;bottom:auto;border:5px solid transparent;border-left-color:#172033;opacity:0;visibility:hidden;transform:translateY(-50%);transition:opacity .16s var(--ease),visibility .16s;pointer-events:none;z-index:2}
.sync-help:hover::after,.sync-help:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%)}
.sync-help:hover::before,.sync-help:focus-visible::before{opacity:1;visibility:visible}
.sync-backup-btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding-left:0}
.sync-backup-btn .material-symbols-outlined{font-size:17px}
.sync-modal-note{margin:0;padding:10px 11px;border-radius:10px;background:var(--surface2);color:var(--muted);font-size:9px;line-height:1.7}
.toast.has-action{display:flex;align-items:center;gap:12px;padding:8px 9px 8px 14px;pointer-events:auto}
.toast-action{border:0;border-radius:999px;background:#fff;color:#172033;min-height:30px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;cursor:pointer}
.toast-action .material-symbols-outlined{font-size:15px}
.due.due-today,.drawer-value.due-today{color:var(--red);font-weight:800}
.due.due-soon,.drawer-value.due-soon{color:var(--amber);font-weight:800}
.calendar-events{min-width:0}
.calendar-more{display:none;border:0;background:transparent;color:var(--blue);font-size:8px;font-weight:800;padding:2px 3px;cursor:pointer}
.calendar-day-list{display:grid;gap:8px}
.calendar-day-project{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;cursor:pointer;transition:transform .18s var(--ease),background .18s}
.calendar-day-project:hover{transform:translateY(-1px);background:var(--surface2)}
.calendar-day-project strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.drawer-actions .soft-btn .material-symbols-outlined{font-size:16px}

/* Mobile calendar: preserve a predictable 7-column month instead of stretching vertically. */
@media(max-width:768px){
  #view-calendar .calendar-card{overflow:hidden}
  #view-calendar .calendar-card>div{min-width:0!important;width:100%}
  #view-calendar .calendar-weekdays{grid-template-columns:repeat(7,minmax(0,1fr))}
  #view-calendar .calendar-weekdays span{padding:7px 2px;font-size:8px}
  #view-calendar .calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:auto}
  #view-calendar .calendar-cell{min-height:0!important;aspect-ratio:1 / 1.08;padding:4px 3px;overflow:hidden}
  #view-calendar .calendar-day{font-size:8px;margin-bottom:3px;line-height:1}
  #view-calendar .calendar-cell.today .calendar-day{width:18px;height:18px;margin-top:-1px}
  #view-calendar .calendar-events{display:grid;gap:2px;overflow:hidden}
  #view-calendar .calendar-event{font-size:7px;line-height:1.2;padding:3px 3px;margin:0;border-radius:5px;min-height:0}
  #view-calendar .calendar-event-extra{display:none}
  #view-calendar .calendar-more{display:block;text-align:left;line-height:1;padding:1px 2px}
  .calendar-day-project{grid-template-columns:1fr;gap:5px}
  .calendar-day-project .category-chip{justify-self:start}
}

/* Mobile gantt: keep project names pinned and move through the month horizontally. */
@media(max-width:760px){
  #view-gantt .gantt-shell{--gantt-day-width:44px;max-width:100%;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  #view-gantt .gantt-table{min-width:max-content;width:max-content}
  #view-gantt .gantt-header,#view-gantt .gantt-row{grid-template-columns:142px max-content;width:max-content}
  #view-gantt .gantt-info-head,#view-gantt .gantt-project-info{position:sticky;left:0;background:var(--surface);z-index:5;border-right:1px solid var(--line);box-shadow:8px 0 16px rgba(23,32,51,.05)}
  #view-gantt .gantt-header .gantt-info-head{z-index:8;background:var(--surface2);padding:10px 8px;font-size:8px}
  #view-gantt .gantt-days,#view-gantt .gantt-track{width:max-content;min-width:0}
  #view-gantt .gantt-day-head{width:44px;min-width:44px;padding:7px 0;font-size:8px}
  #view-gantt .gantt-project-info{grid-template-columns:28px minmax(0,1fr);padding:7px 6px;gap:3px;min-height:72px}
  #view-gantt .gantt-drag-handle{width:27px;height:38px;touch-action:none}
  #view-gantt .gantt-project-name{font-size:10px;max-width:96px}
  #view-gantt .gantt-project-meta{display:grid;grid-template-columns:1fr auto;gap:3px;margin-top:4px}
  #view-gantt .gantt-project-meta .stage-chip{grid-column:1/-1;width:max-content;max-width:100%;font-size:7px;padding:2px 4px}
  #view-gantt .gantt-project-meta .stage-chip .material-symbols-outlined{font-size:11px}
  #view-gantt .mini-progress{max-width:none;width:100%}
  #view-gantt .gantt-grid-day{width:44px;min-width:44px;min-height:72px}
  #view-gantt .gantt-track{min-height:72px}
  #view-gantt .gantt-segment{height:22px}
  #view-gantt .gantt-segment small{font-size:7px}
  #view-gantt .gantt-outside{font-size:8px;min-width:180px;padding-left:8px}
}

@media(max-width:420px){
  .sync-modal{width:min(100% - 18px,560px)}
  .sync-modal .modal-body{gap:12px}
  .sync-hero-icon{width:68px;height:68px;border-radius:20px}
  .sync-hero-icon .material-symbols-outlined{font-size:36px}
  .sync-choice-item{grid-template-columns:minmax(0,1fr) 32px;min-height:56px}
  .sync-choice-action{grid-template-columns:36px minmax(0,1fr);gap:9px;padding-left:10px}
  .sync-choice-icon{width:36px;height:36px;font-size:22px!important}
  .sync-choice-label{font-size:11px}
  .sync-help::after{right:calc(100% + 10px);width:min(270px,calc(100vw - 64px))}
  #view-gantt .gantt-shell{--gantt-day-width:42px}
  #view-gantt .gantt-header,#view-gantt .gantt-row{grid-template-columns:132px max-content}
  #view-gantt .gantt-project-name{max-width:88px}
  #view-gantt .gantt-day-head,#view-gantt .gantt-grid-day{width:42px;min-width:42px}
}

@media(prefers-reduced-motion:reduce){.save-state.syncing .save-dot,.sync-status.syncing .save-dot{animation:none}}


/* v0.6.2 Distribution: lightweight referral share card */
.cutboard-share-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--panel,#fff)}
.cutboard-share-card strong{display:block;font-size:14px;margin-bottom:4px}
.cutboard-share-card p{margin:0;color:var(--text2);font-size:12px;line-height:1.6}
.cutboard-share-card .soft-btn{flex:0 0 auto}
@media(max-width:760px){.cutboard-share-card{align-items:stretch;flex-direction:column}.cutboard-share-card .soft-btn{width:100%;justify-content:center}}


/* ── v0.6.5 responsive / dense home / calendar quick add / mobile scrubber ── */
.calendar-cell{position:relative}
.calendar-add{
  position:absolute;top:4px;right:4px;z-index:2;width:24px;height:24px;padding:0;border:1px solid transparent;border-radius:8px;
  display:grid;place-items:center;background:transparent;color:var(--muted2);font-size:14px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .16s,background .16s,color .16s,border-color .16s,transform .16s var(--ease)
}
.calendar-cell:hover .calendar-add,.calendar-add:focus-visible{opacity:1}
.calendar-add:hover,.calendar-add:focus-visible{background:var(--blue-soft);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 22%,var(--line));transform:scale(1.04);outline:0}
.desktop-project-grid.is-compact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.desktop-project-grid.is-compact .project-card{padding:13px;border-radius:14px}
.desktop-project-grid.is-compact .project-card h3{font-size:13px}
.desktop-project-grid.is-compact .category-chip,.desktop-project-grid.is-compact .stage-chip{font-size:9px;padding:4px 6px}
.desktop-project-grid.is-compact .project-meta{margin-top:9px}.desktop-project-grid.is-compact .progress-row{margin-top:11px}
.desktop-project-grid.is-dense{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px}
.desktop-project-grid.is-dense .project-card{padding:11px}.desktop-project-grid.is-dense .project-card h3{font-size:12px}
.desktop-project-grid.is-dense .project-thumb-watermark{font-size:106px}.desktop-project-grid.is-dense .progress-label{font-size:9px}

@media(max-width:768px){
  :root{--topbar:calc(62px + env(safe-area-inset-top))}
  .topbar{height:var(--topbar);padding-top:calc(10px + env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  body.home-deck-active .topbar{height:calc(58px + env(safe-area-inset-top));padding-top:calc(8px + env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  #view-home .stage-summary{top:calc(62px + env(safe-area-inset-top))!important;left:max(9px,env(safe-area-inset-left))!important;right:max(24px,calc(env(safe-area-inset-right) + 24px))!important}
  #view-home .mobile-project-card{padding-top:calc(142px + env(safe-area-inset-top))!important;padding-left:max(22px,calc(env(safe-area-inset-left) + 18px))!important;padding-right:max(28px,calc(env(safe-area-inset-right) + 28px))!important}
  .bottom-nav{padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right))}
  .mobile-page-dots{
    right:max(5px,calc(env(safe-area-inset-right) + 5px));touch-action:none;user-select:none;-webkit-user-select:none;cursor:ns-resize;
    max-height:52dvh;gap:clamp(2px,calc(44dvh / var(--dot-count) - 6px),8px);padding:9px 6px
  }
  .mobile-page-dot{--dot-size:clamp(5px,calc(42dvh / var(--dot-count) - 2px),7px);width:var(--dot-size);height:var(--dot-size);min-width:var(--dot-size);min-height:var(--dot-size)}
  .mobile-page-dots::before{content:"上下になぞって移動";position:absolute;right:100%;top:50%;transform:translate(-5px,-50%);white-space:nowrap;font-size:7px;font-weight:700;color:var(--muted2);opacity:0;pointer-events:none;transition:opacity .18s}
  .mobile-page-dots:active::before{opacity:.9}
  #view-calendar .calendar-add{opacity:.78;top:2px;right:2px;width:18px;height:18px;border-radius:6px;font-size:11px;color:var(--blue);background:color-mix(in srgb,var(--blue-soft) 72%,transparent)}
  #view-calendar .calendar-day{padding-right:13px}
}
@media(max-width:390px){
  body.home-deck-active .topbar h1{font-size:14px}
  #view-home .stage-summary{left:max(6px,env(safe-area-inset-left))!important;right:max(22px,calc(env(safe-area-inset-right) + 22px))!important;padding:4px!important;gap:2px!important}
  #view-home .stage-card{height:58px!important;min-height:58px!important;padding:4px 1px!important}
  #view-home .stage-name{font-size:6.5px!important}#view-home .stage-count{font-size:13px!important}
  #view-home .mobile-project-card{padding-top:calc(127px + env(safe-area-inset-top))!important;padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
  #view-home .mobile-project-card h3{font-size:clamp(24px,7.3vw,29px)!important;max-width:86%!important}
  #view-home .mobile-project-card .mobile-stage-icon{width:48px!important;height:48px!important;border-radius:15px!important}
  #view-home .mobile-project-card .progress-row{margin:20px 0 15px!important}
  #view-home .mobile-project-meta{gap:8px!important;padding-top:13px!important}
  #view-home .mobile-project-meta div{grid-template-columns:70px minmax(0,1fr)!important;gap:7px!important;font-size:10px!important}
  #view-home .mobile-project-meta p{-webkit-line-clamp:2!important}
  .mobile-page-dots{padding:7px 5px}
}
@media(max-width:340px){
  .topbar-actions{gap:4px}.topbar-actions .icon-btn,.topbar-actions .primary-btn{width:38px!important;height:38px!important;min-height:38px!important}
  #view-home .stage-summary{right:max(20px,calc(env(safe-area-inset-right) + 20px))!important}
  #view-home .stage-icon{width:19px!important;height:19px!important}.bottom-nav small{font-size:7px}
  #view-home .mobile-project-card{padding-left:max(15px,calc(env(safe-area-inset-left) + 14px))!important;padding-right:max(24px,calc(env(safe-area-inset-right) + 24px))!important}
  #view-home .mobile-project-card h3{font-size:23px!important}
}
@media(min-width:769px) and (max-width:1024px){
  :root{--sidebar:190px;--topbar:72px}.sidebar{padding-left:10px;padding-right:10px}.brand-logo{width:min(154px,100%)}
  .topbar{padding-left:20px;padding-right:20px}.view{padding:22px}.stage-summary{gap:8px}.stage-card{padding:13px;min-height:112px}
  .desktop-project-grid.is-compact,.desktop-project-grid.is-dense{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* === AD / PROMOTION SLOTS v0.6.7.1 === */
.cb-ad-placement[hidden]{display:none!important}
.cb-ad-placement{margin:22px 0 4px;min-width:0}
.cb-ad-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;text-decoration:none;color:inherit;background:var(--surface,#fff);border:1px solid var(--border,#e4e7ec);border-radius:16px;padding:12px;box-shadow:0 5px 18px rgba(16,24,40,.045);transition:transform .18s ease,border-color .18s ease;overflow:hidden}
.cb-ad-card:hover{transform:translateY(-1px);border-color:#b9c9fb}
/* HoTo Tools creative is square. Keep the complete creative visible; never crop prices / labels. */
.cb-ad-media{width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#070707;display:grid;place-items:center}.cb-ad-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.cb-ad-copy{min-width:0;display:grid;gap:4px}.cb-ad-label,.cb-ad-network-label{font-size:9px;letter-spacing:.12em;font-weight:800;color:var(--muted,#667085);text-transform:uppercase}.cb-ad-copy strong{font-size:14px;line-height:1.4}.cb-ad-copy p{margin:0;color:var(--muted,#667085);font-size:11px;line-height:1.55}.cb-ad-cta{font-size:11px;font-weight:750;color:#2d5be3}
.cb-ad-preview-box{border:1px dashed #98a2b3;border-radius:14px;background:rgba(152,162,179,.06);padding:14px;display:grid;gap:4px}.cb-ad-preview-box span{font-size:9px;letter-spacing:.12em;font-weight:800}.cb-ad-preview-box strong{font-size:13px}.cb-ad-preview-box small{font-size:11px;color:var(--muted,#667085)}

/* Desktop / tablet: use the otherwise empty sidebar space between About and save status. */
.sidebar.has-ad-slot .cb-ad-sidebar{margin-top:auto;margin-bottom:0}
.sidebar.has-ad-slot .sidebar-foot{margin-top:10px}
.cb-ad-sidebar .cb-ad-card{grid-template-columns:1fr;gap:7px;padding:8px;border-radius:13px;box-shadow:none}
.cb-ad-sidebar .cb-ad-media{aspect-ratio:16/9;border-radius:8px}
.cb-ad-sidebar .cb-ad-copy{gap:3px;padding:0 2px 2px}.cb-ad-sidebar .cb-ad-copy strong{font-size:10px;line-height:1.35}.cb-ad-sidebar .cb-ad-copy p{display:none}.cb-ad-sidebar .cb-ad-label{font-size:7px}.cb-ad-sidebar .cb-ad-cta{font-size:9px}

/* Mobile: this slot exists only when there are 3+ active projects and is appended after the last project. */
.cb-ad-mobile-tail{display:none}
@media(max-width:768px){
  .cb-ad-mobile-tail.ad-slot-ready{display:block;flex:0 0 auto;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:12px 3px 24px;min-height:190px}
  .cb-ad-mobile-tail .cb-ad-card{grid-template-columns:96px minmax(0,1fr);gap:11px;padding:10px;border-radius:16px;min-height:142px}
  .cb-ad-mobile-tail .cb-ad-copy strong{font-size:12px}.cb-ad-mobile-tail .cb-ad-copy p{font-size:9px;line-height:1.45}.cb-ad-mobile-tail .cb-ad-cta{font-size:10px}
  .cb-ad-placement:not(.cb-ad-mobile-tail){margin:16px 0 2px}.cb-ad-card{grid-template-columns:100px minmax(0,1fr);gap:10px;padding:9px;border-radius:13px}.cb-ad-copy strong{font-size:12px}.cb-ad-copy p{font-size:10px}.cb-ad-cta{font-size:10px}.cb-ad-media{border-radius:8px}
}
@media(min-width:769px) and (max-height:760px){
  .cb-ad-sidebar .cb-ad-card{grid-template-columns:72px minmax(0,1fr);gap:7px}.cb-ad-sidebar .cb-ad-media{aspect-ratio:1/1}.cb-ad-sidebar .cb-ad-copy strong{font-size:9px}.cb-ad-sidebar .cb-ad-cta{font-size:8px}
}