
:root{color-scheme:dark;--bg:#0d121b;--panel:#171f2c;--line:#2a3547;--text:#edf2fa;--muted:#9eacc2;--blue:#5b91ff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}html{min-height:100%;scroll-padding-top:20px}body{margin:0 auto;max-width:680px;padding:calc(20px + env(safe-area-inset-top)) 18px calc(110px + env(safe-area-inset-bottom));font-size:15px;line-height:1.5;letter-spacing:0;background:radial-gradient(ellipse at 15% 0%,#1a2944 0,transparent 430px);min-height:100vh}header{display:flex;align-items:center;gap:12px;padding:4px 0 24px}header .appmark{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border:1px solid #5479b0;border-radius:15px;background:linear-gradient(145deg,#3e6eaf,#233959);color:#dbeaff}header svg{width:24px;height:24px}header h1{font-size:23px;font-weight:720;line-height:1.2;letter-spacing:-.6px;margin:0}header p{margin:5px 0 0!important;font-size:12px!important}h2{font-size:19px;line-height:1.35;font-weight:650;letter-spacing:-.35px;margin:0 0 12px}main>h2{font-size:24px;margin:2px 0 16px}p{margin:10px 0;line-height:1.55;overflow-wrap:anywhere}small,.muted{font-size:12px;line-height:1.5;color:var(--muted)}button,input,select,textarea{font:inherit;letter-spacing:0;width:100%;border-radius:13px;margin:6px 0;padding:13px 14px;min-height:48px;border:1px solid var(--line);color:var(--text)}input,select,textarea{font-size:16px;background:#111a28;line-height:1.35;max-width:100%;min-width:0}input[type="datetime-local"],input[type="month"]{display:block;min-width:0;width:100%;-webkit-appearance:none;appearance:none}input::-webkit-date-and-time-value{text-align:left}input[readonly]{color:#a5b3c9;background:#1a2434}input[type="checkbox"]{width:20px!important;height:20px;min-height:20px;vertical-align:middle;margin:0 8px 0 0;accent-color:var(--blue)}input[type="file"]{font-size:13px;padding:12px}input::file-selector-button{background:#2a3a53;color:#e9f1ff;border:0;border-radius:8px;padding:8px;margin-right:8px}select{padding-right:28px}textarea{min-height:90px;resize:vertical}label{display:block;font-size:12px;font-weight:550;line-height:1.45;color:#b6c4d8;margin:15px 0 2px}button{font-size:14px;line-height:1.35;font-weight:600;background:linear-gradient(180deg,#5189f6,#3974e5);border:1px solid #6499ff;cursor:pointer;touch-action:manipulation;transition:background .15s,transform .15s}button:active{transform:scale(.985)}button.secondary{background:#253147;border:1px solid #34435c;color:#dbe5f5}.danger{background:#44262f;border-color:#75404e;color:#ffd4db}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #7ba8ff;outline-offset:3px}.card{background:linear-gradient(130deg,#1b2535,#151e2c);border:1px solid var(--line);border-radius:19px;padding:18px;margin:12px 0;box-shadow:0 8px 26px #00000012;min-width:0}.card .card{background:#111a27;box-shadow:none;border-radius:14px;padding:14px}.row{display:flex;gap:10px;align-items:stretch}.row>*{flex:1;min-width:0}.row>.card{margin:10px 0}.money{font-size:clamp(21px,5.5vw,29px);font-weight:700;line-height:1.25;letter-spacing:-.65px;font-variant-numeric:tabular-nums;margin-top:7px;overflow-wrap:anywhere}.paid{color:#72ddbd}.unpaid{color:#f2bd79}article.card{padding:19px}article .jobtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}article .jobtop h2{margin:0;overflow-wrap:anywhere;font-size:19px}.tier{display:inline-block;font-size:11px;font-weight:650;white-space:nowrap;padding:5px 9px;border-radius:8px;letter-spacing:.1px}.tier.eco{color:#86dece;background:#17443f}.tier.full{color:#d0b8ff;background:#392954}.jobmaster{font-weight:550;color:#d1dced;margin-bottom:3px}.jobdate{margin:0 0 17px}.paymentstate{display:inline-block;padding:5px 10px;border:1px solid currentColor;border-radius:9px;font-size:11px;font-weight:550}.card .row{margin-top:10px}.card .row button{font-size:12px;padding:12px 6px;min-height:44px}.badge{display:inline-block;font-size:11px;font-weight:550;color:#c1d9ff;background:#253c5d;border-radius:8px;padding:5px 9px}.filterbox{margin:0 0 14px;border:1px solid var(--line);border-radius:16px;background:#131d2b;padding:0 14px 12px}.filterbox summary{font-size:13px;font-weight:600;padding:13px 0;cursor:pointer;color:#cbd9ec;list-style-position:inside}.filtergrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.filtergrid>div{min-width:0}.filtergrid label{margin-top:5px}.periodline{margin-bottom:12px}.periodline label{margin-top:0}nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;max-width:680px;margin:auto;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#101926f5;border-top:1px solid #2d3a50;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;max-width:none;min-height:53px;margin:0;padding:8px 4px;border:1px solid transparent;border-radius:13px;background:transparent;color:#91a2bd;font-size:10px;font-weight:550;line-height:1.2}nav button svg{width:21px;height:21px;flex-shrink:0}nav button.active{color:#bed5ff;background:#243958;border-color:#344f77}.directory{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 20px}.directory button{background:#1c2a40;border-color:#32435f;min-height:65px;margin:0;text-align:left;padding:15px}dialog{background:#101925;color:var(--text);border:1px solid #3b4d69;border-radius:23px;width:calc(100% - 20px);max-width:600px;max-height:calc(100dvh - 24px);padding:23px 19px calc(19px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#040811c9;backdrop-filter:blur(5px)}dialog h2{font-size:23px;margin-bottom:18px}dialog form>button{margin-top:12px}dialog form>button+button{margin-top:3px}dialog .modalclose{position:absolute;right:13px;top:10px;width:34px;min-height:34px;padding:6px;background:#263247;border:0;font-size:20px}dialog>h2{padding-right:30px}body:has(dialog[open]){overflow:hidden}b{font-weight:650}main:empty{min-height:100px}@media(min-width:560px){body{padding-left:26px;padding-right:26px}.money{font-size:30px}}@media(max-width:360px){body{padding-left:12px;padding-right:12px}.card{padding:14px}.filtergrid{grid-template-columns:1fr}.row{gap:8px}.money{font-size:21px}header h1{font-size:21px}}

nav a{display:block;text-align:center;color:#bed5ff;text-decoration:none;padding:14px 2px;font-size:12px}a{color:#8fb6ff} .actions{display:flex;gap:8px;flex-wrap:wrap}.actions form{flex:1} .notice{padding:15px;border:1px solid #5479b0;border-radius:12px} code{overflow-wrap:anywhere} .inline{display:inline} .inline button{width:auto} .scroll{overflow:auto} table{width:100%;border-collapse:collapse}td,th{padding:8px;text-align:left;border-bottom:1px solid #2a3547}
/* Light theme — block 1 */
:root {
  color-scheme: light;
  --bg: #fff;
  --panel: #fff;
  --line: #e6e8ed;
  --text: #20242c;
  --muted: #737b89;
  --blue: #d92332;
  background: #fff;
  color: #20242c;
}
body {
  max-width: 1120px;
  background: #fff;
}
header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
header .appmark {
  background: #d92332;
  color: #fff;
  border: 0;
  font-weight: 750;
}
header h1 { color: #20242c; }
a { color: #bc1d2a; }
.card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 4px 20px #19203006;
}
.card .card {
  background: #f8f9fb;
}
 /* END_LIGHT_BLOCK_1 */

/* Light theme — block 2 */
input, select, textarea {
  background: #fff;
  color: var(--text);
  border-color: #dce0e6;
}
input[readonly] {
  color: #666e7c;
  background: #f4f5f7;
}
input::placeholder { color: #969daa; }
label { color: #535c6b; }
button {
  background: #d92332;
  border-color: #d92332;
  color: #fff;
}
button.secondary {
  background: #f5f6f8;
  border-color: #e1e4ea;
  color: #343d4b;
}
button.danger, .danger {
  background: #fff0f1;
  border-color: #f3c5ca;
  color: #b51e2d;
}
input::file-selector-button {
  background: #f1f2f5;
  color: #343d4b;
}
.money { color: #20242c; }
.paid, .money.paid { color: #14804a; }
.unpaid, .money.unpaid { color: #bd2534; }
.jobmaster { color: #434c5b; }
.jobdate, .muted, small { color: var(--muted); }
/* END_LIGHT_BLOCK_2 */

/* Light theme — block 3 */
.tier {
  padding: 6px 11px;
  border-radius: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.tier.eco {
  background: #e9f7ef;
  color: #167348;
  border: 1px solid #cbead9;
}
.tier.full {
  background: #f1ebfc;
  color: #7043a7;
  border: 1px solid #dfd1f2;
}
.badge {
  color: #a81d2a;
  background: #ffedef;
}
.filterbox {
  background: #f8f9fb;
  border-color: var(--line);
  padding-top: 4px;
}
.filterbox summary { color: #434c5b; }
.notice {
  background: #fff7ed;
  color: #844d16;
  border-color: #f1d5b3;
}
.directory a.card {
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
}
td, th { border-bottom-color: var(--line); }
/* END_LIGHT_BLOCK_3 */

/* Light theme — block 4 */
nav {
  max-width: none;
  background: #d92332;
  border-top: 1px solid #c91d2c;
  padding: 9px 12px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  gap: 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 54px;
  padding: 8px 4px;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
nav a.active, nav a[aria-current="page"] {
  background: #fff;
  color: #c81e2d;
}
nav a svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
/* END_LIGHT_BLOCK_4 */

/* Light theme — block 5 */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid #d9233270;
  outline-offset: 3px;
}
dialog {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
}
dialog .modalclose {
  background: #f1f2f5;
  color: var(--text);
}
@media (min-width: 800px) {
  body {
    padding-left: 32px;
    padding-right: 32px;
  }
  nav {
    padding-left: max(12px, calc((100vw - 1080px) / 2));
    padding-right: max(12px, calc((100vw - 1080px) / 2));
  }
  .directory { grid-template-columns: repeat(3, 1fr); }
  article.card { padding: 24px; }
}
@media (max-width: 420px) {
  body {
    padding-left: 14px;
    padding-right: 14px;
  }
  article.card { padding: 16px; }
  article .jobtop h2 { font-size: 18px; }
  .tier { font-size: 10px; padding: 5px 8px; }
}
/* END_LIGHT_BLOCK_5 */
