:root {
--btn-veil:  .14;
--btn-press: .24;
--btn-h: 38px;
}
html.dark {
--btn-veil:  .20;
--btn-press: .32;
}
.btn, .det-act-btn {
--btn-bg: var(--fill2, rgba(120,120,120,.08));
--btn-fg: var(--label2, rgba(60,60,60,.6));
box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
min-height: var(--btn-h); padding: .35rem .7rem;
border: none; border-radius: 8px; cursor: pointer;
text-decoration: none; white-space: nowrap;
font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
background: var(--btn-bg); color: var(--btn-fg);
position: relative; isolation: isolate;
transition: background .12s, color .12s, scale .15s cubic-bezier(.2,0,0,1);
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:disabled          { opacity: .4; cursor: default; }
.btn .ui-i,  .det-act-btn .ui-i { width: 12px; height: 12px; }
.btn .i-cross, .det-act-btn .i-cross { width: 10px; height: 10px; }
.btn > svg,  .det-act-btn > svg { width: 12px; height: 12px; }
.btn-primary { --btn-bg: var(--label, #1c1814);  --btn-fg: var(--surface, #fff); }
.btn-danger  { --btn-bg: rgba(255,59,48,.10);    --btn-fg: var(--danger, #FF3B30); }
.btn-success { --btn-bg: rgba(52,199,89,.12);    --btn-fg: #1a7a34; }
@media (prefers-color-scheme: dark) { .btn-success { --btn-fg: #32d158; } }
.btn-full { width: 100%; }
.btn-lg   { min-height: 44px; padding: .6rem 1rem; font-size: 14px; }
.btn-xs   { min-height: 0;    padding: .2rem .6rem; font-size: 12px; }
.btn::after, .det-act-btn::after {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; background: currentColor;
opacity: 0; transition: opacity .12s; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.btn:hover:not(:disabled)::after,
.det-act-btn:hover::after  { opacity: var(--btn-veil); }
}
.btn:active:not(:disabled)::after,
.det-act-btn:active::after   { opacity: var(--btn-press); }
.btn:active:not(:disabled),
.det-act-btn:active   { scale: .96; }
.det-act-btn        { flex: 1; min-width: max-content; padding: .35rem .4rem; }
.det-act-btn.a-ts   { --btn-bg: var(--blue,   #007AFF); --btn-fg: #fff; }
.det-act-btn.a-fav  { --btn-bg: var(--pink,   #FF2D55); --btn-fg: #fff; }
.det-act-btn.a-seen { --btn-bg: var(--green,  #34C759); --btn-fg: #fff; }
.det-act-btn.a-hid  { --btn-bg: var(--orange, #FF9500); --btn-fg: #fff; }