/* ArcShare tools content. Shared tokens and primitives: workspace-ui.css. */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body { min-height:100dvh; background:var(--bg); color:var(--t0); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; margin:0; padding:0; justify-content:flex-start; align-items:stretch; }

.btn-icon { width:38px; height:var(--control-action-h); border:1px solid var(--border2); border-radius:var(--arc-radius-sm); background:var(--bg2); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; transition:all .15s; box-shadow:none; }
.btn-icon:hover { color:var(--text); }
.page-wrap { width:100%; max-width:var(--arc-content-max); margin:0 auto; padding:32px var(--arc-page-gutter) 56px; }
.page-title { font-size:var(--text-title); font-weight:650; letter-spacing:-.6px; margin-bottom:8px; line-height:1.2; }
.page-sub { font-size:14px; color:var(--text2); margin-bottom:24px; line-height:1.5; }
.controls { display:flex; gap:10px; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.search-wrap { flex:1; min-width:200px; position:relative; }
.search-inp { width:100%; height:42px; padding:0 14px 0 40px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .13s,box-shadow .13s; box-shadow:none; }
.search-inp:focus { border-color:var(--acc); box-shadow:none; }
.search-inp::placeholder { color:var(--text3); }
.search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--text3); pointer-events:none; }
.cats { display:flex; gap:6px; flex-wrap:wrap; }
.cat-btn { font-family:var(--sans); font-size:13.5px; font-weight:650; padding:6px 13px; border-radius:var(--arc-radius-sm); border:1px solid var(--border); background:var(--bg2); color:var(--text2); cursor:pointer; transition:all .13s; white-space:nowrap; box-shadow:none; }
.cat-btn:hover { border-color:var(--border2); color:var(--text); }
.cat-btn.on { background:var(--text); border-color:var(--text); color:var(--bg2); }
[data-theme="dark"] .cat-btn.on { background:var(--acc); border-color:var(--acc); color:#fff; }
.stats { font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--t2); margin-bottom:1rem; display:flex; gap:1.5rem; }
.stats span { color:var(--text2); font-weight:500; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.card { background:var(--paper); border:0; border-radius:var(--arc-radius-lg); padding:1.25rem; box-shadow:var(--shadow-paper); display:flex; flex-direction:column; gap:10px; transition:border-color .15s,box-shadow .15s; }
.card:hover { box-shadow:inset 0 0 0 1.5px var(--acc),var(--shadow-paper); }
.card-top { display:flex; align-items:flex-start; gap:10px; }
.card-icon { color:var(--t2); background:var(--s2); border:1px solid var(--b2); width:46px; height:46px; border-radius:var(--arc-radius-md); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--text-xs); font-weight:500; flex-shrink:0; box-shadow:none; }
.card-info { flex:1; min-width:0; }
.card-name { font-size:16px; font-weight:700; margin-bottom:2px; overflow-wrap:anywhere; }
.card-cat { color:var(--t2); font-size:var(--text-xs); }
.card-desc { font-size:13px; color:var(--text2); line-height:1.5; flex:1; }
.card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pill { font-family:var(--mono); font-size:var(--text-xs); padding:2px 7px; border-radius:4px; border:1px solid var(--border); color:var(--text3); background:var(--bg3); white-space:nowrap; }
.pill.ver { color:var(--t1); border-color:var(--b3); background:var(--s2); font-size:12px; }
.card-actions { display:flex; gap:7px; }
.btn-dl { flex:1; }
.btn-dl svg { width:13px; height:13px; flex-shrink:0; }
body.arc-ui .btn-cp.ok { border-color:var(--green-br); color:var(--green); background:var(--green-bg); }
.empty { text-align:center; padding:4rem 1rem; color:var(--t2); font-family:var(--sans); font-size:15px; grid-column:1/-1; }
.empty-icon { width:56px; height:56px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--arc-radius-md); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; box-shadow:none; }
.empty-icon svg { width:24px; height:24px; stroke:var(--text3); }
.toast { position:fixed; bottom:24px; left:50%; z-index:999; max-width:calc(100vw - 32px); padding:12px 18px; border-radius:var(--arc-radius-md); background:var(--t0); color:var(--bg); font:650 14px var(--sans); white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .2s var(--ease),transform .26s var(--spring); }
.toast.show { opacity:1; transform:translate(-50%,0); }
footer { margin-top:3rem; font-family:var(--sans); font-size:13px; color:var(--t2); text-align:center; }
[data-theme="dark"] .nav-logo .logo-dark { display:block; }
[data-theme="light"] .nav-logo .logo-light { display:block; }
.iso-filter { font-family:var(--mono); font-size:var(--text-xs); padding:4px 12px; border-radius:var(--arc-radius-md); border:1px solid var(--border); background:transparent; color:var(--text3); cursor:pointer; transition:all .13s; white-space:nowrap; }
.iso-filter:hover { border-color:var(--border2); color:var(--text); }
.iso-filter.on { background:var(--acc); border-color:var(--acc); color:#fff; }
body.arc-ui .search-inp.arc-input { padding-left:40px; }