:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#182532;
  background:#eef2f5;
  font-synthesis:none;
  --navy:#11273a;
  --navy-2:#173b59;
  --green:#147451;
  --green-soft:#e7f4ee;
  --amber:#b87912;
  --amber-soft:#fff3d8;
  --blue:#2f6fa4;
  --blue-soft:#e8f2fa;
  --red:#a63b3b;
  --red-soft:#fff0f0;
  --border:#dfe5e9;
  --muted:#74808b;
  --surface:#ffffff;
  --shadow:0 12px 34px rgba(17,39,58,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#eef2f5}
body{min-height:100dvh}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{outline:3px solid rgba(47,111,164,.24);outline-offset:2px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 5px;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:900;color:#778491}

.auth-shell{width:min(440px,calc(100% - 28px));margin:0 auto;padding:9vh 0 40px}
.auth-brand{display:flex;align-items:center;gap:12px;margin:0 0 22px 4px}
.auth-brand>div:last-child{display:grid;line-height:1.05}
.auth-brand strong{font-size:1.2rem}.auth-brand span{font-size:.82rem;color:var(--muted);margin-top:4px}
.brand-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:950;letter-spacing:-.04em;box-shadow:0 8px 24px rgba(17,39,58,.18)}
.brand-mark.small{width:37px;height:37px;border-radius:11px;font-size:.85rem;box-shadow:none}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.auth-card h1{font-size:1.72rem;margin:0 0 8px}.auth-card p.muted{margin:0 0 22px;line-height:1.45}
.form-stack{display:grid;gap:15px}.form-stack label,.editor-form>label{display:grid;gap:7px;font-weight:800;font-size:.9rem;color:#344451}
input,select,textarea{width:100%;border:1px solid #cfd8de;border-radius:13px;background:#fff;color:#172532;padding:12px 13px;min-height:46px}
textarea{resize:none;line-height:1.45}
.inline-check{display:flex!important;align-items:center;gap:9px!important;font-weight:600!important;color:#5b6873!important}.inline-check input{width:18px;height:18px;min-height:0}
.primary-button,.secondary-button,.danger-button{min-height:48px;border-radius:13px;border:0;padding:11px 16px;font-weight:900;cursor:pointer}
.primary-button{background:var(--navy);color:#fff}.primary-button:active{transform:translateY(1px)}
.secondary-button{background:#edf1f4;color:#273845;border:1px solid #dce2e6}
.danger-button{background:var(--red-soft);color:var(--red);border:1px solid #f0c9c9}
.flash{padding:12px 14px;border-radius:13px;margin:0 0 14px;font-weight:750}.flash.success{background:var(--green-soft);color:#1c6549}.flash.error{background:var(--red-soft);color:var(--red)}

.app-shell{min-height:100dvh;padding-bottom:calc(75px + env(safe-area-inset-bottom))}
.app-header{position:sticky;top:0;z-index:30;height:62px;background:rgba(255,255,255,.96);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:9px max(12px,calc((100vw - 760px)/2));}
.brand-button{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;color:inherit}
.brand-copy{display:grid;line-height:1}.brand-copy strong{font-size:.98rem}.brand-copy small{color:var(--muted);font-size:.72rem;margin-top:4px}
.header-actions{display:flex;align-items:center;gap:9px}
.sync-pill{height:32px;padding:0 10px;border-radius:999px;background:#f2f5f6;color:#5e6c76;display:flex;align-items:center;gap:6px;font-size:.73rem;font-weight:850;border:1px solid #e2e7ea}
.sync-pill i{width:7px;height:7px;border-radius:50%;background:#31a46f;box-shadow:0 0 0 3px rgba(49,164,111,.12)}
.sync-pill.syncing i{animation:pulse 1s infinite;background:#d19b33}.sync-pill.offline i{background:#c24c4c}.sync-pill.offline span{color:#8c4545}
@keyframes pulse{50%{opacity:.35}}
.avatar-button{width:36px;height:36px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:.74rem;font-weight:900;cursor:pointer}
.main-content{width:min(760px,calc(100% - 22px));margin:0 auto;padding:20px 0 30px}
.view{display:none}.view.active{display:block}
.view-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px;padding:0 2px}
.view-head h1{margin:0;font-size:1.72rem;letter-spacing:-.03em}
.round-add{width:45px;height:45px;border-radius:15px;border:0;background:var(--navy);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(17,39,58,.18)}
.status-filter{display:flex;gap:7px;overflow:auto;padding:1px 1px 11px;scrollbar-width:none}.status-filter::-webkit-scrollbar{display:none}
.status-filter button{white-space:nowrap;border:1px solid #dce3e7;background:#fff;color:#5e6b75;padding:9px 12px;border-radius:999px;font-weight:800;font-size:.82rem;cursor:pointer}
.status-filter button span{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:#edf1f3;margin-left:4px;padding:0 5px;font-size:.7rem}
.status-filter button.active{background:var(--navy);border-color:var(--navy);color:#fff}.status-filter button.active span{background:rgba(255,255,255,.18)}
.ticket-list,.user-list{display:grid;gap:10px}
.ticket-table-wrap{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(17,39,58,.035)}
.ticket-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ticket-table th{padding:7px 9px;background:#f5f7f8;color:#7a8790;text-align:left;text-transform:uppercase;letter-spacing:.05em;font-size:.61rem;font-weight:900;border-bottom:1px solid var(--border)}
.ticket-table th:nth-child(1){width:auto}.ticket-table th:nth-child(2){width:82px}.ticket-table th:nth-child(3){width:54px;text-align:center}
.ticket-table td{padding:8px 9px;border-bottom:1px solid #edf0f2;vertical-align:middle;font-size:.79rem}
.ticket-table tbody tr:last-child td{border-bottom:0}
.ticket-table-row{cursor:pointer;background:#fff}
.ticket-table-row:active{background:#f5f8fa}.ticket-table-row:focus-visible{outline:3px solid rgba(47,111,164,.22);outline-offset:-3px}
.ticket-table-title{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#263845}
.ticket-table-status{white-space:nowrap}.ticket-table-checks{text-align:center;font-weight:900;color:#687680;font-variant-numeric:tabular-nums}.ticket-table-checks.complete{color:#267153}
.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 6px;font-size:.62rem;font-weight:900}.status-badge.new{background:var(--blue-soft);color:#27618e}.status-badge.doing{background:var(--amber-soft);color:#91630f}.status-badge.done{background:var(--green-soft);color:#267153}
.empty-state{padding:52px 18px;text-align:center;color:#76838d}.empty-state .empty-icon{width:48px;height:48px;border-radius:16px;background:#e6ecef;display:grid;place-items:center;margin:0 auto 12px;font-size:1.2rem}.empty-state strong{display:block;color:#3d4d58}.empty-state p{margin:5px 0 0;font-size:.86rem}

.user-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px 15px;display:flex;align-items:center;gap:12px;cursor:pointer}.user-card-avatar{width:42px;height:42px;border-radius:14px;background:#e7edf1;display:grid;place-items:center;font-weight:900;color:#455965}.user-card-main{min-width:0;flex:1;display:grid}.user-card-main strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.user-card-main small{color:#78858f;margin-top:3px}.user-card-role{font-size:.7rem;font-weight:900;padding:5px 8px;border-radius:999px;background:#edf1f4;color:#53636f}.user-card.inactive{opacity:.56}

.bottom-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;min-height:63px;padding:6px max(8px,calc((100vw - 760px)/2)) calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
.bottom-nav button{flex:1;max-width:160px;border:0;background:transparent;color:#77848e;display:grid;justify-items:center;gap:2px;padding:3px 8px;font-size:.67rem;font-weight:800;cursor:pointer}.bottom-nav button.active{color:var(--navy)}.nav-icon{font-size:1.2rem;height:25px;display:grid;place-items:center}

.overlay{position:fixed;inset:0;z-index:80;background:rgba(11,24,35,.42);display:flex;align-items:flex-end;justify-content:center;padding:0}
.ticket-panel{width:100%;height:100dvh;background:#f4f6f8;display:flex;flex-direction:column;overflow:hidden}
.ticket-detail-header{background:#fff;border-bottom:1px solid var(--border);padding:max(10px,env(safe-area-inset-top)) 12px 11px;z-index:4}
.ticket-title-row{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:7px;align-items:start}.icon-button{width:40px;height:40px;border-radius:12px;border:1px solid #e1e6e9;background:#f7f9fa;color:#53616c;font-size:1.42rem;display:grid;place-items:center;cursor:pointer;padding:0}.menu-trigger{font-size:1.65rem;line-height:1;transform:rotate(90deg)}
.ticket-title-copy{min-width:0;padding-top:2px}.ticket-title-copy span{display:block;color:#77848e;font-size:.72rem;font-weight:800;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ticket-title-copy h2{margin:0;font-size:1.05rem;line-height:1.22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-menu{margin:10px 0 2px;border:1px solid var(--border);background:#f8fafb;border-radius:14px;padding:12px}.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.meta-item{background:#fff;border:1px solid #e8ecef;border-radius:11px;padding:9px}.meta-item small{display:block;color:#86919a;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;font-weight:850;margin-bottom:3px}.meta-item strong{font-size:.77rem;word-break:break-word}.menu-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.menu-actions button{border:1px solid #dde4e8;background:#fff;border-radius:10px;padding:8px 10px;font-size:.76rem;font-weight:850;color:#455761;cursor:pointer}.menu-actions .danger-text{color:var(--red);border-color:#efcdcd}
.status-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#edf1f3;border-radius:12px;padding:4px;margin-top:10px}.status-switch button{border:0;background:transparent;color:#6a7781;border-radius:9px;padding:8px 7px;font-weight:850;font-size:.78rem;cursor:pointer}.status-switch button.active[data-status="new"]{background:#fff;color:#2d6a99;box-shadow:0 2px 8px rgba(17,39,58,.09)}.status-switch button.active[data-status="doing"]{background:#fff;color:#996a12;box-shadow:0 2px 8px rgba(17,39,58,.09)}.status-switch button.active[data-status="done"]{background:#fff;color:#277553;box-shadow:0 2px 8px rgba(17,39,58,.09)}.status-switch.readonly{opacity:.55;pointer-events:none}
.ticket-scroll{flex:1;min-height:0;overflow:auto;padding:15px 12px 24px;overscroll-behavior:contain;scroll-behavior:smooth}
.ticket-content{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 5px 18px rgba(17,39,58,.04)}
.content-text{margin:0 0 14px;white-space:pre-wrap;line-height:1.55;color:#344550;font-size:.94rem}.content-text:last-child{margin-bottom:0}
.task-check{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;width:100%;text-align:left;border:1px solid #e5dfcb;background:#fffbef;border-radius:14px;padding:11px;margin:10px 0;color:#2f3e48;cursor:pointer}.task-check:first-child{margin-top:0}.task-check:last-child{margin-bottom:0}.task-check .check-box{width:25px;height:25px;border:2px solid #b4934c;border-radius:8px;background:#fff;display:grid;place-items:center;font-weight:950;color:#fff;margin-top:1px}.task-check .task-copy{line-height:1.42;font-size:.9rem;white-space:pre-wrap}.task-check.done{background:#f1f6f3;border-color:#d7e6dd;color:#708078}.task-check.done .check-box{background:#2f936b;border-color:#2f936b}.task-check.done .task-copy{text-decoration:line-through;text-decoration-thickness:1.5px}.task-check:disabled{cursor:default}
.comments-section{margin-top:20px}.section-label{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px;color:#78858f;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.comment-list{display:grid;gap:9px}.comment{background:#fff;border:1px solid var(--border);border-radius:15px;padding:11px 12px}.comment-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}.comment-head strong{font-size:.78rem}.comment-head span{color:#8b959c;font-size:.66rem;white-space:nowrap}.comment p{margin:0;white-space:pre-wrap;line-height:1.43;color:#40515c;font-size:.86rem}.comment.mine{border-color:#d3e3da;background:#fbfefc}
.comment-composer{display:grid;grid-template-columns:minmax(0,1fr) 46px 46px;gap:8px;align-items:end;background:#fff;border-top:1px solid var(--border);padding:9px 10px calc(9px + env(safe-area-inset-bottom));z-index:5}.comment-composer textarea{min-height:44px;max-height:120px;padding:10px 12px}.comment-composer button{width:44px;height:44px;border-radius:13px;border:0;background:var(--navy);color:#fff;font-weight:950;font-size:1.2rem;cursor:pointer}.comment-composer .mail-comment-button{background:#edf1f4;color:#263946;border:1px solid #d8e0e5}.comment-composer button:disabled{opacity:.5;cursor:default}

.sheet{width:100%;max-height:94dvh;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(17,39,58,.18);overflow:auto;padding:18px 15px calc(22px + env(safe-area-inset-bottom))}.editor-sheet{height:min(94dvh,820px);display:flex;flex-direction:column;overflow:hidden}.compact-sheet{max-width:560px}.sheet-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px}.sheet-head h2{margin:0;font-size:1.3rem}.editor-form{display:flex;flex-direction:column;gap:13px;min-height:0;flex:1}.composer-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}.composer-label-row>label{font-weight:850;font-size:.9rem}.composer-toolbar{position:sticky;top:0;z-index:8;width:max-content;margin:0 0 3px 0;padding:2px;background:rgba(251,252,253,.96);border-radius:11px;backdrop-filter:blur(8px)}.task-mode-button{border:1px solid #dce3e7;background:#f5f7f8;color:#5e6d77;border-radius:10px;width:38px;height:38px;min-height:38px;padding:0;display:grid;place-items:center;font-weight:900;cursor:pointer;box-shadow:0 2px 8px rgba(17,39,58,.08)}.task-mode-button[aria-pressed="true"]{background:#f1b847;color:#5d4009;border-color:#dba533;box-shadow:0 0 0 3px rgba(219,165,51,.14)}.task-mode-icon{width:22px;height:22px;border-radius:6px;border:2px solid currentColor;display:grid;place-items:center;font-size:.73rem}.composer-help{color:#7d8992;font-size:.74rem;line-height:1.4;margin-top:-7px}.ticket-composer{flex:1;min-height:210px;overflow:auto;border:1px solid #cfd8de;border-radius:15px;padding:8px;background:#fbfcfd}.composer-row{position:relative;border-radius:10px;margin:2px 0;padding:1px}.composer-block{min-height:34px;padding:7px 9px;border-radius:9px;line-height:1.45;white-space:pre-wrap;word-break:break-word;outline:none}.composer-row.is-check{background:#fff3d8;border:1px solid #f2dca8;padding-left:32px}.composer-row.is-check:before{content:"✓";position:absolute;left:8px;top:8px;width:18px;height:18px;border:2px solid #b88728;border-radius:5px;display:grid;place-items:center;color:#9a6b13;font-size:.65rem;font-weight:950}.composer-row.is-check.is-active{background:#ffe6a8;border-color:#dba533}.composer-row.is-text.is-active{background:#f2f6f8}.composer-placeholder{color:#9aa4ab;pointer-events:none;position:absolute;padding:9px 10px}.ticket-mail-toggle{padding:9px 2px 0}.save-ticket-button{margin-top:auto;flex:none}
.toggle-line{display:flex!important;align-items:center;justify-content:space-between;gap:16px}.toggle-line span{display:grid}.toggle-line small{font-weight:500;color:#7a8790;margin-top:2px}.toggle-line input{position:absolute;opacity:0;width:1px;height:1px}.toggle-line i{width:50px;height:29px;border-radius:999px;background:#d4dbe0;position:relative;flex:none}.toggle-line i:after{content:"";position:absolute;width:23px;height:23px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:.18s}.toggle-line input:checked+i{background:#318b67}.toggle-line input:checked+i:after{transform:translateX(21px)}
.profile-info{display:flex;gap:8px;margin:-5px 0 18px}.profile-info span{padding:6px 9px;border-radius:9px;background:#f0f3f5;color:#60707b;font-size:.76rem;font-weight:800}.form-stack h3{margin:6px 0 -2px;font-size:1rem}.logout-form{margin-top:12px}.logout-form button{width:100%}.imprint-link{display:block;text-align:center;margin-top:15px;color:#74818b;text-decoration:none;font-size:.77rem}
.toast-stack{position:fixed;z-index:120;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,calc(100% - 24px));display:grid;gap:8px;pointer-events:none}.toast{background:#172c3d;color:#fff;border-radius:13px;padding:11px 13px;box-shadow:0 8px 26px rgba(0,0,0,.18);font-size:.83rem;font-weight:750;animation:toast-in .18s ease-out}.toast.error{background:#8f3939}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(min-width:700px){
  .app-shell{padding-bottom:30px}.bottom-nav{position:sticky;top:62px;bottom:auto;min-height:52px;padding:5px max(12px,calc((100vw - 760px)/2));border-top:0;border-bottom:1px solid var(--border);justify-content:flex-start}.bottom-nav button{display:flex;align-items:center;justify-content:center;gap:6px;max-width:none;flex:0 0 auto;padding:7px 12px;border-radius:10px;font-size:.75rem}.bottom-nav button.active{background:#edf1f4}.nav-icon{font-size:1rem;height:auto}.main-content{padding-top:24px}.ticket-panel{height:min(92dvh,900px);width:min(720px,calc(100% - 34px));border-radius:24px;margin:auto;box-shadow:0 24px 80px rgba(0,0,0,.25)}.overlay{align-items:center;padding:17px}.sheet{border-radius:24px;max-width:680px;max-height:90dvh;padding:21px}.editor-sheet{height:min(820px,90dvh)}.toast-stack{bottom:24px}}

@media(max-width:390px){
  .sync-pill span{display:none}.sync-pill{width:31px;padding:0;justify-content:center}.main-content{width:min(100% - 16px,760px)}.ticket-table th,.ticket-table td{padding-left:7px;padding-right:7px}.ticket-table th:nth-child(2){width:76px}.ticket-table th:nth-child(3){width:48px}.status-filter button{padding:8px 10px}.meta-grid{grid-template-columns:1fr}.ticket-detail-header{padding-left:9px;padding-right:9px}.ticket-scroll{padding-left:9px;padding-right:9px}.sheet{padding-left:12px;padding-right:12px}
}