/* ywfteam app chrome on top of brand.css */
.site-header { padding-bottom: .9rem; }
.brandline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brandline .home { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.brandline .site { font: 400 1.05rem/1.2 'Fjalla One', Figtree, sans-serif; color: #24313b; }
.who { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 700; }
.who .muted { font-weight: 500; }
.chip { border: 1px solid #ffffff99; background: #ffffffb0; border-radius: 999px; padding: .2rem .7rem; font-size: .76rem; font-weight: 700; color: var(--ywf-steel-dark); cursor: pointer; text-decoration: none; }
.chip.on { background: var(--ywf-steel-dark); color: #fff; border-color: var(--ywf-steel-dark); }
.wrap { max-width: 1500px; }
.muted { color: var(--ywf-gray); }
.small { font-size: .76rem; }
.err { color: #b0433c; font-weight: 700; }
.warn { color: #91660f; }
.envtag { position: fixed; bottom: .5rem; right: .6rem; background: #a8720c; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 6px; opacity: .8; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card.app { text-decoration: none; color: inherit; display: block; position: relative; }
.card.app:hover { border-color: var(--ywf-steel); }
.card.app .icon { font-size: 1.8rem; }
.card.app .role { position: absolute; top: .8rem; right: .9rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ywf-gray); }
.card.login { max-width: 460px; margin: 2rem auto; text-align: center; }
.btn { border: 0; border-radius: 9px; padding: .48rem .85rem; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; background: var(--ywf-steel-dark); color: #fff; text-decoration: none; display: inline-block; }
.btn.ghost { background: #eef2f5; color: var(--ywf-steel-dark); }
.btn.go { background: #1e7847; } .btn.warn { background: #a8720c; }
.btn.small { padding: .25rem .55rem; font-size: .74rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* app header + tabs */
.apphead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.apphead h1 { font-size: 1.7rem; }
.tabs { display: flex; gap: .3rem; }
.tabs a { background: #ffffff90; border-radius: 999px; padding: .38rem .9rem; font-size: .84rem; font-weight: 700; color: var(--ywf-steel-dark); text-decoration: none; }
.tabs a.active { background: var(--ywf-steel-dark); color: #fff; }
/* toolbar */
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.toolbar input[type=search] { border: 1px solid var(--ywf-mist); border-radius: 8px; padding: .38rem .6rem; font: inherit; font-size: .85rem; min-width: 240px; }
.count { margin-left: auto; color: var(--ywf-gray); font-size: .8rem; font-weight: 700; }
.statusline { font-size: .78rem; color: var(--ywf-gray); margin: .4rem 0; min-height: 1.1rem; }
.statusline .bad { color: #b0433c; font-weight: 700; }
/* queue rows */
.queue .qrow { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: .8rem; border-top: 1px solid var(--ywf-mist); padding: .8rem 0; }
.qrow.done { opacity: .55; }
.ord .name { font: 400 1.15rem/1.1 'Fjalla One', Figtree, sans-serif; color: var(--ywf-steel-dark); }
.ord .co { font-weight: 700; margin-top: .15rem; }
.ord .meta { color: var(--ywf-gray); font-size: .76rem; margin-top: .25rem; line-height: 1.45; }
.ord .flag { display: inline-block; background: #ffd9e866; color: #7a3d57; border-radius: 6px; font-size: .66rem; font-weight: 750; padding: .05rem .38rem; margin: .15rem .15rem 0 0; }
.ord .note { background: #ffd9e84d; border-left: 3px solid #d4628f; border-radius: 5px; color: #6c4053; font-size: .74rem; font-weight: 650; padding: .25rem .45rem; margin-top: .35rem; }
.ord .actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.jobchip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .6rem; font-size: .72rem; font-weight: 800; }
.jobchip.queued { background: #eef2f5; color: #4a5a66; } .jobchip.running { background: #99d6ea55; color: #274e63; } .jobchip.done { background: #4e9b6f22; color: #2e6b49; } .jobchip.failed, .jobchip.abandoned { background: #c9605b22; color: #93372f; }
.pill { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 700; }
.pill.s-done { background: #4e9b6f22; color: #2e6b49; } .pill.s-running { background: #99d6ea55; color: #274e63; } .pill.s-queued { background: #eef2f5; color: #4a5a66; } .pill.s-failed, .pill.s-abandoned { background: #c9605b22; color: #93372f; }
.strip { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.pkg { flex: 0 0 250px; background: #fff; border: 1.5px solid #cdd9df; border-radius: 12px; padding: .5rem .6rem .55rem; min-height: 110px; }
.pkg.over { border-color: #b0433c; background: #fff4f1; }
.pkg.drop { border-color: var(--ywf-steel); background: #99d6ea22; }
.pkg.locked { background: #f6f8fa; }
.pkg h4 { margin: 0 0 .35rem; display: flex; justify-content: space-between; gap: .4rem; font-size: .82rem; color: var(--ywf-steel-dark); }
.pkg h4 .w { color: var(--ywf-gray); font-weight: 600; font-size: .74rem; white-space: nowrap; }
.pkg .items { display: flex; flex-direction: column; gap: .28rem; min-height: 36px; }
.item { display: flex; align-items: center; gap: .4rem; background: #f6f8fa; border: 1px solid #e3e9eb; border-radius: 8px; padding: .22rem .4rem; font-size: .76rem; cursor: grab; }
.item.dragging { opacity: .4; }
.item .k { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.k-jar { background: #2a72ab; } .k-bag { background: #a8720c; } .k-slime { background: #d4628f; } .k-kit, .k-potion, .k-bin, .k-bath { background: #1e7847; } .k-other { background: #9455ad; }
.item .sku { font-weight: 800; color: var(--ywf-steel-dark); white-space: nowrap; }
.item .nm { color: #45525c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.item .qty { font-weight: 800; background: #fff; border: 1px solid #e3e9eb; border-radius: 6px; padding: 0 .35rem; min-width: 2.1rem; text-align: center; }
.item .split { border: 0; background: transparent; color: var(--ywf-steel); font-size: .72rem; font-weight: 800; cursor: pointer; padding: 0 .1rem; }
.pkg.add { border-style: dashed; display: flex; align-items: center; justify-content: center; color: var(--ywf-steel-dark); font-weight: 800; font-size: .82rem; cursor: pointer; background: #fbfdfe; }
.pkg .fill { height: 6px; border-radius: 3px; background: #eef2f5; margin-top: .4rem; overflow: hidden; }
.pkg .fill i { display: block; height: 100%; background: var(--c1); }
.pkg.over .fill i { background: #b0433c; }
.pkg .track { font-size: .74rem; color: #1e6a45; font-weight: 700; margin-top: .3rem; word-break: break-all; }
.kinds-key { display: flex; gap: .8rem; font-size: .72rem; color: var(--ywf-gray); margin: .2rem 0 .6rem; flex-wrap: wrap; }
.kinds-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; }
/* tables, drawer */
.table-shell { border: 1px solid var(--ywf-mist); border-radius: 12px; max-height: 70vh; overflow: auto; margin-top: .6rem; }
table.data th { position: sticky; top: 0; background: #fff; z-index: 1; }
tr.row { cursor: pointer; }
.scrim { position: fixed; inset: 0; background: #2f3a4433; display: none; z-index: 40; } .scrim.open { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: #fff; box-shadow: -8px 0 30px #0002; transform: translateX(102%); transition: transform .2s; z-index: 50; overflow: auto; padding: 1.1rem 1.3rem 2rem; }
.drawer.open { transform: none; }
.drawer .close { position: absolute; top: .8rem; right: .9rem; border: 0; background: #eef2f5; border-radius: 999px; width: 32px; height: 32px; cursor: pointer; font-weight: 800; }
.events { font-size: .78rem; margin: .3rem 0 0 1rem; padding: 0; } .events li { margin: .2rem 0; }
pre.small { background: #f6f8fa; border-radius: 8px; padding: .5rem .6rem; font-size: .72rem; overflow: auto; max-height: 200px; }
/* settings */
.settings .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem 1.2rem; }
.settings label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 700; color: var(--ywf-steel-dark); }
.settings label.check { flex-direction: row; align-items: center; gap: .5rem; }
.settings input:not([type=checkbox]) { border: 1px solid var(--ywf-mist); border-radius: 8px; padding: .38rem .55rem; font: inherit; font-size: .86rem; font-weight: 500; }
.settings .hint { font-size: .72rem; color: var(--ywf-gray); font-weight: 500; }
.kv { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0; }
.kvrow { display: flex; gap: .4rem; align-items: center; }
.kvrow input { border: 1px solid var(--ywf-mist); border-radius: 8px; padding: .3rem .5rem; font: inherit; font-size: .84rem; }
.kvrow .x { border: 0; background: #eef2f5; border-radius: 6px; cursor: pointer; padding: .2rem .5rem; }
.health { border-radius: 10px; padding: .7rem .9rem; margin-top: .6rem; }
.health.ok { background: #4e9b6f18; } .health.bad { background: #c9605b18; }
.addrow { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.addrow input, .addrow select, .inline select { border: 1px solid var(--ywf-mist); border-radius: 8px; padding: .3rem .5rem; font: inherit; font-size: .84rem; }
@media (max-width: 900px) { .queue .qrow { grid-template-columns: 1fr; } }