/* 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); font-family:var(--mono); 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(--mono); font-size:12px; 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(--mono); font-size:12px; color:var(--text3); 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(--s1); border:1px solid var(--b2); border-radius:var(--r); padding:1.25rem; box-shadow:none; display:flex; flex-direction:column; gap:10px; transition:border-color .15s,box-shadow .15s; animation:up .18s ease; }
.card:hover { border-color:var(--border2); box-shadow:none; }
@keyframes up{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.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:14px; font-weight:600; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-cat { color:var(--t2); font-family:var(--mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.4px; }
.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(--blue); border-color:rgba(0,102,255,.2); background:var(--blue-dim); }
.card-actions { display:flex; gap:7px; }
.btn-dl { display:flex; align-items:center; gap:6px; flex:1; height:var(--control-action-h); padding:0 14px; background:var(--text); border:none; border-radius:7px; color:var(--bg2); font-family:var(--sans); font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; transition:opacity .13s; box-shadow:none; justify-content:center; }
.btn-dl:hover { opacity:.85; }
.btn-dl svg { width:13px; height:13px; flex-shrink:0; }
.btn-cp { height:var(--control-action-h); padding:0 12px; background:var(--bg3); border:1px solid var(--border); border-radius:7px; color:var(--text2); font-family:var(--mono); font-size:var(--text-xs); cursor:pointer; transition:all .13s; white-space:nowrap; }
.btn-cp:hover { border-color:var(--border2); color:var(--text); }
.btn-cp.ok { border-color:var(--green-br); color:var(--green); background:var(--green-bg); }
.empty { text-align:center; padding:4rem 1rem; color:var(--text3); font-family:var(--mono); font-size:13px; 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:2rem; left:50%; transform:translateX(-50%) translateY(8px); background:var(--text); color:var(--bg2); font-size:13px; font-family:var(--mono); padding:9px 20px; border-radius:var(--arc-radius-md); opacity:0; transition:all .22s cubic-bezier(0.34,1.56,0.64,1); pointer-events:none; white-space:nowrap; z-index:999; box-shadow:var(--sh-lg); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
footer { margin-top:3rem; font-family:var(--mono); font-size:var(--text-xs); color:var(--text3); 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; }