* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 "Helvetica Neue", Arial, sans-serif; color: #333; background: #fff; }
a { color: #1ea7dc; }
.logo { font-weight: 700; font-size: 11px; letter-spacing: .5px; color: #fff; text-align: center; }
.side { position: fixed; top: 0; left: 0; bottom: 0; width: 55px; background: #f3f3f3; display: flex; flex-direction: column; }
.side .logo { background: #222; padding: 18px 0 10px; }
.side .item { display: block; height: 40px; line-height: 40px; text-align: center; color: #222; text-decoration: none; font-size: 18px; border-bottom: 1px solid #e3e3e3; }
.side .item.active { background: #e3e3e3; }
.side .item.soon { color: #aaa; cursor: default; }
.side .logout { margin-top: auto; }
.side .logout button { width: 100%; height: 40px; border: 0; background: none; font-size: 18px; cursor: pointer; }
main { margin-left: 55px; padding: 30px 12px 12px; }
main header { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; margin-bottom: 20px; padding: 0 12px 10px; }
main header h1 { margin: 0; font-weight: 400; font-size: 22px; }
.company { font-size: 10px; letter-spacing: 1px; color: #999; }
.date { font-size: 10px; color: #999; text-align: right; letter-spacing: 1px; }
body.auth { background: #f3f3f3; }
.auth-box { width: 340px; margin: 80px auto; background: #fff; padding: 24px; border: 1px solid #e3e3e3; }
.auth-box .logo { background: #222; padding: 12px 0; margin: -24px -24px 20px; }
.auth-box h1 { font-weight: 400; font-size: 20px; margin: 0 0 16px; }
label { display: block; margin: 12px 0 4px; font-weight: 600; }
input[type=email], input[type=password] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; }
button.primary { margin-top: 16px; padding: 8px 16px; border: 0; border-radius: 3px; background: #1ea7dc; color: #fff; cursor: pointer; }
.error { background: #fde8ea; color: #a12; padding: 8px; margin-bottom: 8px; border-radius: 3px; }
.small { font-size: 12px; margin-top: 14px; }
.tabs { text-align: center; margin: 0 0 24px; }
.tab { display: inline-block; padding: 4px 12px; margin: 0 4px; font-size: 11px; text-decoration: none; border-radius: 3px; color: #1ea7dc; }
.tab.on { background: #1ea7dc; color: #fff; }
.tab.soon { color: #aaa; }
.flash { padding: 8px 12px; margin: 0 12px 12px; border-radius: 3px; }
.flash.ok { background: #e6f6ea; color: #1b6b32; }
.flash.err { background: #fde8ea; color: #a12; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 12px 10px; }
.plain { font-size: 12px; }
.btn { display: inline-block; padding: 6px 14px; border: 1px solid #ddd; border-radius: 3px; background: #f5f5f5; color: #222; text-decoration: none; cursor: pointer; font-size: 13px; }
.btn.blue { background: #1ea7dc; border-color: #1ea7dc; color: #fff; }
.btn.green { background: #1fc08b; border-color: #1fc08b; color: #fff; }
.btn.red { background: #e8445a; border-color: #e8445a; color: #fff; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-size: 12px; padding: 8px; }
table.list th a { color: #222; text-decoration: none; }
table.list td { padding: 7px 8px; border-top: 1px solid #eee; vertical-align: middle; }
table.list tr.off td { color: #aaa; }
table.list input[type=text], table.list input[type=email] { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 3px; }
.cols { display: flex; gap: 30px; padding: 0 12px; }
.cols .left { width: 45%; }
.cols .right { flex: 1; }
.form label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }
.form input[type=text], .form input[type=email], .form input[type=number], .form select, .form textarea { width: 100%; padding: 7px; border: 1px solid #ccc; border-radius: 3px; font: inherit; }
.form .buttons { display: flex; justify-content: space-between; margin-top: 18px; }
h2 { font-weight: 400; font-size: 20px; margin: 0 0 10px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: #ccc; }
.perm-head td { background: #f3f3f3; font-weight: 600; font-size: 12px; }
.perm-box { margin-bottom: 4px; }
.perm-box label { display: block; margin: 4px 0; font-weight: 400; }
select.exc { padding: 3px; border: 1px solid #ccc; border-radius: 3px; }
select.exc.allow { background: #e6f6ea; }
select.exc.deny { background: #fde8ea; }
.hint { color: #888; font-size: 12px; margin: 6px 0; }
.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; color: #fff; background: #999; white-space: nowrap; }
.badge.green { background: #1fc08b; }
.badge.yellow { background: #e6c93a; color: #333; }
.badge.dark { background: #555; }
.badge.red { background: #e8445a; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #f7f7f7; }
.red-text { color: #e8445a; }
.panel { border: 1px solid #1ea7dc; margin-bottom: 20px; }
.panel > h3 { background: #1ea7dc; color: #fff; margin: 0; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.panel > .body { padding: 10px 12px; }
.panel .total td { font-weight: 600; }
.proj-head { display: flex; align-items: center; gap: 12px; margin: 0 12px 14px; }
.proj-head h2 { margin: 0; }
.proj-head .badge { font-size: 14px; padding: 4px 10px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats .num { font-size: 24px; color: #1fc08b; }
.stats .lbl { font-size: 10px; letter-spacing: 1px; color: #999; text-transform: uppercase; }
dl.det { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; margin: 0 12px 16px; }
dl.det dt { font-weight: 600; }
dl.det dd { margin: 0; }
.pager { margin: 12px; text-align: center; }
.pager a, .pager span { display: inline-block; padding: 3px 9px; margin: 0 2px; border: 1px solid #ddd; border-radius: 3px; text-decoration: none; }
.pager span { background: #1ea7dc; color: #fff; border-color: #1ea7dc; }
.radios label { display: inline-block; margin-right: 14px; font-weight: 400; }