/* TaskHelper mobile light: barra in alto, schede in basso, liste a schede, composer fisso */
body.mob { background: var(--bs-tertiary-bg); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.m-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--oc-mainnav-bg, #2d3134); color: #fff; }
.m-brand { color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; }
.m-top .ua { width: 30px; height: 30px; font-size: 12px; }
#view { padding: 10px 10px 20px; }
.m-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding-bottom: env(safe-area-inset-bottom); }
.m-tabs a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; text-decoration: none; color: var(--th-muted); font-size: 11px; }
.m-tabs a i { font-size: 21px; }
.m-tabs a.active { color: var(--bs-primary); }
.m-tabs a.m-new i { width: 44px; height: 44px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-top: -14px; box-shadow: 0 4px 12px rgba(106,108,247,.4); }
.m-badge { position: absolute; top: 3px; left: 54%; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; border-radius: 9px; background: var(--th-down); color: #fff; font-size: 10.5px; text-align: center; }
.m-h { font-size: 1.15rem; font-weight: 600; margin: 6px 4px 10px; }
.m-card { display: block; background: var(--bs-body-bg); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.m-card:active { background: var(--bs-secondary-bg); }
.m-card .t1 { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--th-muted); }
.m-card .t2 { font-weight: 600; font-size: 15.5px; margin: 3px 0 2px; color: var(--bs-body-color); }
.m-card .t3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--th-muted); }
.m-search { margin: 0 0 10px; }
.m-seg { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; }
.m-seg a { white-space: nowrap; padding: 5px 12px; border-radius: 16px; background: var(--bs-body-bg); text-decoration: none; color: var(--bs-body-color); font-size: 13.5px; border: 1px solid var(--bs-border-color); }
.m-seg a.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.m-empty { text-align: center; color: var(--th-muted); padding: 40px 10px; }
.m-empty i { font-size: 40px; display: block; margin-bottom: 6px; }
.m-section { background: var(--bs-body-bg); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; }
.m-section h2 { font-size: 1.15rem; margin: 4px 0 6px; }
.m-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-actions .btn { flex: 1 1 auto; }
.m-composer { position: sticky; bottom: calc(60px + env(safe-area-inset-bottom)); background: var(--bs-body-bg); border-radius: 12px; padding: 8px; box-shadow: 0 -2px 14px rgba(0,0,0,.08); margin-top: 10px; }
.m-composer textarea { border: 0; resize: none; min-height: 44px; box-shadow: none !important; font-size: 16px; }
.m-composer .bar { display: flex; align-items: center; gap: 6px; }
.m-composer .bar .btn { padding: 6px 10px; }
.m-composer .bar label.btn { margin: 0; }
.m-form .form-control, .m-form .form-select { font-size: 16px; }
.m-form .form-group { margin-bottom: 12px; }
.mob .tl-img img { max-width: 160px; max-height: 160px; }
.mob .timeline { background: var(--bs-body-bg); border-radius: 12px; padding: 4px 12px; }
.m-qsec { border-top: 1px solid var(--bs-border-color-translucent); padding: 8px 0; }
.m-qsec b { display: block; }
.m-qitem { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.m-qitem span:last-child { white-space: nowrap; font-weight: 500; }
.m-total { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: 700; padding-top: 8px; border-top: 2px solid var(--bs-border-color); }
