:root{
  --bg:#fff;--text:#111;--muted:#5c6270;--border:#e6e8ea;--green:#0a9f2d
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg); color:var(--text);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  padding-bottom:64px; /* место под нижний бар */
}

.appbar{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--border);
  padding:14px 16px 8px;
}
.title{font-weight:700;font-size:18px}
.user-info{font-size:13px;color:#444;margin-top:4px}

.tab-panel{display:none;padding:12px}
.tab-panel.show{display:block}

.search-bar{margin-bottom:10px}
select,input,textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; font-size:15px;
}
label{display:block;margin:10px 0 6px}
textarea{resize:vertical;min-height:110px}
.checkbox-line{display:flex;align-items:center;gap:10px;margin:12px 0}
.primary{
  width:100%; padding:14px; border-radius:14px; border:none;
  background:#ffcc00; color:#000; font-weight:700; font-size:15px; margin-top:8px
}

/* карточка в ленте */
.card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:14px; margin-bottom:10px; cursor:pointer; transition: box-shadow .15s ease;
}
.card:hover{ box-shadow:0 1px 10px rgba(0,0,0,.06) }
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .platform{font-weight:700;font-size:15px}
.card .price{color:var(--green);font-weight:700;white-space:nowrap}
.card .desc{margin-top:6px;font-size:13px;color:var(--muted);line-height:1.35}
.desc.clamp{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card .details{display:none;margin-top:10px;border-top:1px dashed var(--border);padding-top:10px}
.card.expanded .details{display:block}
.card.expanded .desc{-webkit-line-clamp:unset;overflow:visible}
.detail-row{display:flex;gap:8px;margin:6px 0}
.detail-key{width:110px;color:var(--muted)}
.detail-val{flex:1}

/* перенос длинных строк */
.desc, .detail-val { word-break: break-word; overflow-wrap: anywhere; }

/* нижний бар */
.bottom-bar{
  position:fixed; left:0; right:0; bottom:0; height:58px;
  background:#fff; border-top:1px solid var(--border);
  display:flex; justify-content:space-around; align-items:center; z-index:50
}
.bottom-item{
  background:none; border:none; display:flex; flex-direction:column;
  align-items:center; gap:2px; font-size:11px; color:#777
}
.bottom-item .icon{font-size:18px; line-height:1}
.bottom-item.active{color:#000}

/* мои задания */
.section-title{font-weight:700;margin:16px 4px 8px}
.my-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; margin:10px 0 }
.my-card .top{ display:flex; justify-content:space-between; align-items:center; }
.my-card .platform{ font-weight:700 }
.my-card .price{ color:var(--green); font-weight:700 }
.my-card .desc{ color:var(--muted); margin-top:6px }
.my-card .actions{ margin-top:10px; text-align:right }
.btn-danger{
  background:#ffefef; color:#c40000;
  border:1px solid #f3bcbc; border-radius:10px;
  padding:8px 12px; font-weight:600; cursor:pointer;
}
.meta{ margin-top:6px; color:var(--muted); font-size:13px }
.admin-card{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:14px; margin:10px 0
}
.stat-line{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border)}
.stat-line:last-child{border-bottom:none}
.grant{margin-top:12px; display:flex; align-items:center}
.grant input{max-width:200px}
.card .actions { margin-top: 10px; }

/* по умолчанию скрываем админ-действия */
.admin-only-action { display: none; }
/* показываем, когда на html есть класс is-admin */
.is-admin .admin-only-action { display: block; }
#userStatus {
  display: none !important;
}
#adminStatus {
  display: none !important;
}