/* Images Collator look: charcoal sidebar, dark top bar, light content, blue active item, lime status dots */
:root{--side:#262626;--side2:#2f2f2f;--top:#303030;--blue:#0e9fe0;--lime:#9acd32;--pink:#e6197a;--line:#e3e3e3;--muted:#8a8a8a;--text:#4a4a4a}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:"Open Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--text);background:#fff}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:67px;background:var(--side);z-index:10;overflow-y:auto}
.sidebar .brand{display:block;height:33px;background:var(--top)}
.sidebar a:not(.brand){display:flex;flex-direction:column;align-items:center;justify-content:center;height:54px;color:#c9c9c9;font-size:10px;border-bottom:1px solid #3a3a3a;position:relative;text-decoration:none}
.sidebar a svg{width:22px;height:22px;margin-bottom:3px}
.sidebar a:hover{background:#333;color:#fff}
.sidebar a.active{background:var(--blue);color:#fff}
.sidebar a.active:after{content:"";position:absolute;right:-1px;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:#fff}
.topbar{position:fixed;left:67px;right:0;top:0;height:33px;background:var(--top);display:flex;align-items:center;padding:0 12px 0 20px;z-index:9;gap:16px}
.topbar .search input{width:170px;height:19px;border-radius:10px;border:0;padding:0 8px 0 22px;font-size:12px;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="3"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg>') 6px 50%/10px no-repeat}
.topbar .filters{display:flex;gap:10px}
.topbar .filters select{background:transparent;color:#ddd;border:0;font-size:11px;cursor:pointer}
.topbar .filters select option{color:#333}
.topbar .tools{margin-left:auto;display:flex;gap:14px}
.topbar .tools a{color:#aaa;display:flex}.topbar .tools a:hover{color:#fff}
.topbar .tools svg{width:16px;height:16px}
.main{margin-left:67px;padding-top:33px;min-height:100vh}
.page{padding:12px 20px 40px}
h1{font-weight:300;font-size:26px;color:#555;margin:14px 0 18px}
h1.blue{color:var(--blue)}
h3{font-size:12px;font-weight:600;color:#555;margin:18px 0 8px}
.flash{background:#eef8e0;border-left:4px solid var(--lime);padding:8px 14px;margin:8px 20px 0}
.bar{display:flex;align-items:center;border-bottom:1px solid var(--line);min-height:34px;margin-bottom:12px}
.bar .tabs{display:flex}.bar .tabs a{padding:9px 16px;color:#555;font-size:12px;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.bar .tabs a.on{border-color:var(--line);background:#fff;border-radius:2px 2px 0 0}
.bar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.icon-btn{background:none;border:0;padding:2px;cursor:pointer;color:#222;display:inline-flex}.icon-btn svg{width:17px;height:17px}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;padding:6px 14px;border-radius:2px;font-size:12px;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.07);text-decoration:none}.btn.grey{background:#8d8d8d}.btn.red{background:#d9534f}.btn.lime{background:#86b82b}
.btn.small{padding:3px 8px;font-size:11px}
/* forms like the original: right-aligned grey labels */
.form{max-width:820px}.form .row{display:flex;align-items:flex-start;margin-bottom:9px}
.form .row label{width:230px;text-align:right;padding:6px 24px 0 0;color:var(--muted);font-weight:600;font-size:11px}
.form .row .ctl{flex:1}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input[type=search],select,textarea{width:100%;border:1px solid #ddd;background:#fff;padding:7px 14px;font:inherit;font-size:12px;color:#555;border-radius:1px}
textarea{min-height:80px}
.stack label{display:block;color:var(--muted);font-size:11px;margin:8px 0 3px}
table.grid{width:100%;border-collapse:collapse;font-size:12px}
table.grid th{background:#e9e9e9;text-align:left;padding:8px 10px;font-weight:600;color:#555;border:1px solid #e1e1e1}
table.grid td{padding:7px 10px;border:1px solid #ececec;vertical-align:middle}
table.grid tr:nth-child(even) td{background:#fafafa}
table.grid input[type=text]{padding:4px 6px;border-color:#eee}
.muted{color:var(--muted)}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
/* master-detail */
.md{display:flex;min-height:calc(100vh - 33px)}
.md .list{width:190px;background:#f1f1f1;border-right:1px solid #e5e5e5;position:relative;padding-bottom:46px;flex-shrink:0}
.md .list .items{max-height:calc(100vh - 80px);overflow-y:auto}
.md .list a.item{display:block;padding:10px 12px 10px 16px;border-bottom:1px solid #e6e6e6;color:#333;position:relative;background:#f5f5f5}
.md .list a.item.on{background:#dcdcdc}.md .list a.item:hover{background:#e8e8e8;text-decoration:none}
.md .list a.item .t{font-size:13px;line-height:1.25}.md .list a.item .s{font-size:10px;color:var(--muted);margin-top:4px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);position:absolute;left:5px;top:13px}
.dot.pink{background:var(--pink)}.dot.grey{background:#aaa}.dot.blue{background:var(--blue)}
.md .list .add{position:fixed;bottom:0;width:190px;height:34px;background:var(--blue);color:#fff;display:flex;align-items:center;padding-left:16px;gap:8px;font-size:12px}
.md .list .add svg{width:12px;height:12px}
.md .detail{flex:1;min-width:0}
/* calendar */
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{display:none}.cal td{border:1px solid #e0e0e0;height:80px;vertical-align:top;padding:0;background:#fff;font-size:10px}
.cal td .n{text-align:right;color:#777;padding:6px 7px}.cal td.other{background:#f7f7f7}.cal td.today{background:#bfe3f6}
.cal td .ev{display:block;background:var(--blue);color:#fff;height:12px;line-height:12px;font-size:9px;overflow:hidden;white-space:nowrap;padding:0 3px;margin:1px 0}
.cal td .ev.todo{background:#86b82b}.cal td .ev.cancel{background:#bbb}
.calnav{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;color:#666}.calnav .r a{color:#aaa;font-size:11px;margin-left:6px}
/* gallery admin */
.merge{display:flex;gap:0}.merge .l{flex:1;padding-right:14px;border-right:1px solid var(--line)}.merge .r{flex:1;padding-left:22px}
.merge .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding:0 10px}
.merge h4{font-size:12px;color:#555;font-weight:600;border-bottom:1px solid #ddd;padding-bottom:8px;margin:22px 0 8px}
.merge .rep{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:12px}
.merge .rep input{width:24px;height:20px;padding:0;text-align:center;font-size:11px}
.drop{border:0;background:#ececec;padding:22px;text-align:center;color:#555;border-radius:1px;cursor:pointer}
.drop.over{background:#d7eefa}
.thumb{width:44px;height:44px;object-fit:cover;border:1px solid #ddd;vertical-align:middle}.thumb.mount{border:5px solid #f4efe2;outline:1px solid #ccc}
.coltools a,.coltools button{background:none;border:0;padding:0 5px 0 0;color:#555;font-size:11px;cursor:pointer}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{border:1px solid var(--line);padding:14px;background:#fff;overflow-x:auto}.card h4{margin:0 0 8px;font-size:12px;color:#555}
.kpi{font-size:26px;font-weight:300;color:#333}.kpi small{font-size:12px;color:var(--muted)}
.pill{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10px;background:#eee;color:#555}
.pill.red{background:#fde2e2;color:#b42318}.pill.green{background:#e7f6d5;color:#3f6b0e}.pill.amber{background:#fff1cc;color:#8a5a00}
.pipe{display:flex;height:14px;border-radius:2px;overflow:hidden;background:#eee;min-width:160px}.pipe span{display:block;height:100%}
.progress{height:6px;background:#eee;border-radius:3px;overflow:hidden;min-width:70px}.progress span{display:block;height:100%;background:var(--lime)}
.legend span{display:inline-flex;align-items:center;gap:4px;margin-right:10px;font-size:11px}.legend i{width:10px;height:10px;display:inline-block}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--side)}
.login .box{background:#fff;width:340px;padding:30px}.login h1{margin-top:0}
@media print{.sidebar,.topbar,.noprint{display:none!important}.main{margin:0;padding:0}.page{padding:0}body{font-size:11px}}
.swatch{display:inline-block;width:9px;height:9px;border:1px solid #bbb;vertical-align:middle}
.topbar .filters{gap:6px}.topbar .filters select{max-width:110px}