@import url("https://fontsapi.zeoseven.com/908/main/result.css");
:root{--a:#ff4fa3;--b:#2ea8ff;--bg:#050507;--panel:#0b0b10;--panel2:#101019;--text:#f8f5fa;--muted:#aaa4b4;--line:#383342;--danger:#ff5367;--warn:#ffb14a;--ok:#63e6be;color-scheme:dark;font-family:"KazukiReiwa","Hiragino Mincho ProN","Yu Mincho",serif}
*{box-sizing:border-box}html{background:#050507}body{margin:0;color:var(--text);min-height:100vh;background:#050507;background-image:linear-gradient(rgba(5,5,7,.88),rgba(5,5,7,.92)),url('cyber-texture.jpg');background-size:cover;background-position:center;background-attachment:fixed}body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:0}body:before{inset:0;background:radial-gradient(circle at 5% 8%,color-mix(in srgb,var(--a) 22%,transparent),transparent 27%),radial-gradient(circle at 95% 28%,color-mix(in srgb,var(--b) 15%,transparent),transparent 24%),linear-gradient(115deg,transparent 0 13%,color-mix(in srgb,var(--a) 7%,transparent) 13.2% 13.5%,transparent 13.7% 100%)}body:after{left:0;right:0;top:0;height:100vh;opacity:.25;background:repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--a) 16%,transparent) 48px,transparent 49px 96px);mask-image:linear-gradient(to bottom,black,transparent 22%)}
.app{position:relative;z-index:1;max-width:720px;margin:auto;padding:calc(20px + env(safe-area-inset-top)) 14px calc(34px + env(safe-area-inset-bottom))}.app:before{content:"BEAUTY RECORDS  //  PR SYSTEM";display:block;font-family:Arial,sans-serif;font-size:9px;letter-spacing:.28em;color:color-mix(in srgb,var(--a) 72%,white);margin:2px 3px 12px}.head{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:8px 4px 21px;border-bottom:1px solid color-mix(in srgb,var(--a) 30%,#27232d);margin-bottom:13px}.head:after{content:"✦";position:absolute;bottom:-8px;left:44%;color:var(--a);text-shadow:0 0 12px var(--a);background:#050507;padding:0 8px}.eyebrow{font-family:Arial,sans-serif;letter-spacing:.27em;font-size:10px;color:color-mix(in srgb,var(--a) 66%,white)}h1,h2,h3,p{margin:0}h1{font-size:30px;font-weight:400;letter-spacing:.12em;margin-top:5px;text-shadow:0 0 22px color-mix(in srgb,var(--a) 20%,transparent)}.btn,.field,input,select,textarea{font:inherit}.btn{position:relative;border:1px solid color-mix(in srgb,var(--a) 24%,var(--line));background:linear-gradient(145deg,rgba(17,15,22,.95),rgba(7,7,10,.96));color:var(--text);border-radius:7px;min-height:44px;padding:9px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(110deg,color-mix(in srgb,var(--a) 72%,#100811),color-mix(in srgb,var(--b) 68%,#0b0b10));border:1px solid color-mix(in srgb,var(--a) 80%,white);color:#fff;box-shadow:0 0 15px color-mix(in srgb,var(--a) 30%,transparent),inset 0 0 18px rgba(255,255,255,.08)}.btn.ghost{background:transparent}.tabs{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:12px}.tabs .btn{clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}.panel,.job{position:relative;background:linear-gradient(145deg,rgba(13,12,18,.95),rgba(5,5,8,.97));border:1px solid color-mix(in srgb,var(--a) 20%,var(--line));border-radius:7px;box-shadow:0 8px 28px rgba(0,0,0,.28),inset 0 0 26px color-mix(in srgb,var(--a) 2%,transparent)}.panel:before,.job:before{content:"";position:absolute;left:-1px;top:12px;width:2px;height:24px;background:var(--a);box-shadow:0 0 9px var(--a)}.panel{padding:14px;margin-bottom:12px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.panel-title h2{font-size:17px;font-weight:400;letter-spacing:.05em}.small{font-size:12px;color:var(--muted)}.alerts{display:grid;gap:7px}.alert{display:flex;justify-content:space-between;gap:8px;background:rgba(5,5,9,.82);border:1px solid #25222d;border-radius:5px;padding:9px}.alert strong{color:var(--danger);text-shadow:0 0 10px color-mix(in srgb,var(--danger) 35%,transparent)}.list{display:grid;gap:10px}.job{padding:11px;display:grid;grid-template-columns:70px 1fr;gap:12px;cursor:pointer;overflow:hidden}.job:after{content:"//";position:absolute;right:7px;bottom:3px;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.18em;color:color-mix(in srgb,var(--b) 35%,transparent)}.thumb{width:70px;height:70px;border-radius:5px;object-fit:cover;background:#1a1720;display:grid;place-items:center;font-family:Arial,sans-serif;color:#c9ccd4;border:1px solid color-mix(in srgb,var(--a) 22%,#333);box-shadow:0 0 14px color-mix(in srgb,var(--a) 10%,transparent)}.jobtop{display:flex;justify-content:space-between;gap:8px}.brand{font-size:11px;color:color-mix(in srgb,var(--a) 55%,white);font-family:Arial,sans-serif;letter-spacing:.08em}.product{font-size:17px;margin-top:3px}.badge{font-family:Arial,sans-serif;font-size:10px;border:1px solid color-mix(in srgb,var(--b) 40%,var(--line));padding:4px 8px;border-radius:4px;height:max-content;box-shadow:0 0 10px color-mix(in srgb,var(--b) 9%,transparent)}.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;font-size:12px}.meta b{display:block;font-weight:400;color:var(--muted);margin-bottom:2px;font-family:Arial,sans-serif;font-size:9px;letter-spacing:.12em}.progress{display:flex;gap:7px;align-items:center;margin-top:9px}.bar{height:3px;background:#2a2731;border-radius:0;overflow:hidden;flex:1}.fill{height:100%;background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 0 8px var(--a)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.79);backdrop-filter:blur(7px);z-index:10;overflow:auto;padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}.sheet{position:relative;max-width:720px;margin:auto;background:linear-gradient(160deg,rgba(13,11,17,.98),rgba(4,4,7,.99));border:1px solid color-mix(in srgb,var(--a) 28%,var(--line));border-radius:9px;padding:16px;box-shadow:0 0 35px color-mix(in srgb,var(--a) 10%,transparent)}.sheet:before{content:"PR // BEAUTY // RECORD";display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.25em;color:color-mix(in srgb,var(--a) 58%,white);padding-bottom:9px;border-bottom:1px solid #25222d;margin-bottom:13px}.sheethead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sheethead h2{font-weight:400;letter-spacing:.08em}.grid{display:grid;gap:12px}.field{display:grid;gap:6px;font-size:13px}.field input,.field select,.field textarea{width:100%;background:rgba(10,9,14,.95);border:1px solid #3b3543;color:#fff;border-radius:5px;padding:11px;font-size:16px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--a);box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 45%,transparent),0 0 12px color-mix(in srgb,var(--a) 12%,transparent)}.field textarea{min-height:78px;resize:vertical}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.check{position:relative;min-width:0;min-height:44px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;white-space:nowrap;overflow:hidden;background:#0b0a0f;border:1px solid #3b3643;border-radius:5px;cursor:pointer;transition:.15s ease}.check input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:15px;height:15px;min-width:15px;margin:0;border:1px solid #85808d;border-radius:2px;background:#060609;display:grid;place-items:center}.check input[type="checkbox"]:checked{border-color:var(--a);background:var(--a);box-shadow:0 0 12px var(--a)}.check input[type="checkbox"]:checked:after{content:"✓";font-family:Arial,sans-serif;font-size:11px;font-weight:700;color:#fff;line-height:1}.check:has(input:checked){border-color:color-mix(in srgb,var(--a) 78%,white);background:color-mix(in srgb,var(--a) 11%,#09090d);box-shadow:0 0 14px color-mix(in srgb,var(--a) 15%,transparent)}.actions{display:flex;gap:8px;margin-top:16px}.actions .btn:first-child{flex:1}.danger{color:#ff8390}.detailrow{background:rgba(10,9,14,.92);border:1px solid #35303d;border-radius:5px;padding:11px;margin-top:8px}.copy{float:right;min-height:32px;padding:4px 9px}.themegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.themebtn{display:flex;gap:7px;align-items:center}.dot{width:13px;height:13px;border-radius:2px;box-shadow:0 0 8px currentColor}.empty{text-align:center;color:var(--muted);padding:28px}.warn2{color:var(--danger);text-shadow:0 0 8px color-mix(in srgb,var(--danger) 45%,transparent)}.warn4{color:var(--warn);text-shadow:0 0 8px color-mix(in srgb,var(--warn) 30%,transparent)}.amount-hidden{display:none!important}
@media(max-width:430px){.checks{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.check{font-size:12px;padding:0 5px;gap:5px}.tabs{grid-template-columns:1fr 1fr}.tabs .add{grid-column:1/-1}.twocol{grid-template-columns:1fr 1fr}h1{font-size:27px}.app{padding-left:12px;padding-right:12px}.job{grid-template-columns:66px 1fr}.thumb{width:66px;height:66px}}

/* v6 — HUD / industrial cyberpunk layer */
body{background-image:linear-gradient(rgba(3,4,7,.91),rgba(3,4,7,.96)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.018) 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.018) 32px),url('cyber-texture.jpg')}
.app:before{content:"CPM // PERSONAL SYSTEM   •   VER.6.0";color:color-mix(in srgb,var(--a) 74%,#d8dde4);font-size:8px;letter-spacing:.22em}
.head{border-bottom:1px solid color-mix(in srgb,var(--a) 46%,#2a2d34)}
.head:before{content:"///  ///  ///";position:absolute;right:5px;bottom:4px;font:700 8px Arial,sans-serif;letter-spacing:.15em;color:var(--b);opacity:.7}
.panel,.job,.sheet,.btn,.field input,.field select,.field textarea,.detailrow{border-radius:2px}
.panel,.job{clip-path:polygon(10px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 10px),calc(100% - 10px) 100%,9px 100%,0 calc(100% - 9px),0 10px)}
.panel:after{content:"SYSTEM // ACTIVE";position:absolute;right:10px;top:5px;font:6px Arial,sans-serif;letter-spacing:.18em;color:color-mix(in srgb,var(--b) 55%,transparent)}
.job{height:166px;min-height:166px;max-height:166px;padding:13px;grid-template-columns:70px minmax(0,1fr);border-color:color-mix(in srgb,var(--a) 32%,#3a3d45)}
.job:after{content:"ID // CPM-PR  ▌▌▌▌";right:9px;bottom:5px;font-size:6px;letter-spacing:.12em;color:color-mix(in srgb,var(--b) 55%,transparent)}
.job>div:last-child{min-width:0;display:flex;flex-direction:column}
.jobtop{min-height:62px}
.jobtop>div{min-width:0;flex:1}
.product{line-height:1.45;height:2.9em;min-height:2.9em;max-height:2.9em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-word}
.meta{margin-top:7px}.progress{margin-top:auto;margin-bottom:5px}
.thumb{border-radius:1px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.badge{border-radius:1px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.btn{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.btn.primary{box-shadow:0 0 11px color-mix(in srgb,var(--a) 24%,transparent),inset 0 0 10px rgba(255,255,255,.05)}
.sheet{clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.sheet:before{content:"CPM // DATA TERMINAL // EDIT RECORD";color:color-mix(in srgb,var(--a) 62%,white)}
.field{position:relative}.field:after{content:"+";position:absolute;right:7px;top:0;font:9px Arial,sans-serif;color:color-mix(in srgb,var(--b) 48%,transparent)}
.check{border-radius:1px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.bar{height:4px;background:repeating-linear-gradient(90deg,#292c33 0 16px,#17191e 16px 19px)}
.fill{background:linear-gradient(90deg,var(--a),var(--b));box-shadow:none}
@media(max-width:430px){.job{height:164px;min-height:164px;max-height:164px;grid-template-columns:66px minmax(0,1fr)}.jobtop{min-height:62px}}

/* v7 — denser cute cyber-HUD visual pass */
.app{max-width:720px;padding-left:16px;padding-right:16px}
.app:before{content:"+  CPM // PERSONAL SYSTEM     COSME PR MANAGER     VER.7.0";padding:0 0 8px 20px;border-left:3px solid var(--a);text-shadow:0 0 9px color-mix(in srgb,var(--a) 45%,transparent)}
.head{min-height:142px;padding:18px 8px 26px;background:linear-gradient(110deg,color-mix(in srgb,var(--a) 5%,transparent),transparent 40%);border-top:1px solid color-mix(in srgb,var(--a) 28%,transparent)}
.head:before{content:"// USER MODE : PERSONAL\A// SYSTEM : ONLINE\A// CPM TERMINAL";white-space:pre;right:8px;top:14px;bottom:auto;line-height:1.8;color:color-mix(in srgb,var(--b) 68%,white);font-size:7px}
.head:after{content:"+     +     +";left:8px;bottom:5px;width:58%;padding:0;background:transparent;letter-spacing:3.4em;font:10px Arial,sans-serif;color:var(--a);text-shadow:0 0 9px var(--a)}
h1{font-size:36px;letter-spacing:.16em;margin-top:12px}
.eyebrow{font-size:9px;max-width:52%;line-height:1.7}
.panel{padding:18px 16px;border-color:color-mix(in srgb,var(--a) 46%,#3b3d46);box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 0 18px color-mix(in srgb,var(--a) 7%,transparent)}
.panel:before{width:4px;height:44px;top:10px;box-shadow:0 0 12px var(--a)}
.panel:after{content:"// NEAR DEADLINE     SYSTEM // ACTIVE";left:16px;right:auto;top:7px;font-size:6px;color:color-mix(in srgb,var(--b) 72%,white)}
.panel-title{padding-top:7px}.panel-title h2{font-size:20px;letter-spacing:.08em}
.alert{border-radius:1px;border-color:color-mix(in srgb,var(--b) 24%,#35323b);padding:12px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.tabs{gap:10px;margin:14px 0 16px}.tabs .btn{min-height:54px;font-size:17px;letter-spacing:.06em;border-color:color-mix(in srgb,var(--a) 36%,#3b3c43)}
.tabs .btn.primary{position:relative}.tabs .btn.primary:before{content:">>";margin-right:10px;font:12px Arial,sans-serif;letter-spacing:-.2em}
.tabs .add:before{content:"///";position:absolute;left:14px;bottom:10px;font:900 13px Arial,sans-serif;letter-spacing:-.05em;color:var(--a);opacity:.55}
.list{gap:12px}
.job{height:174px;min-height:174px;max-height:174px;padding:15px 14px;border-color:color-mix(in srgb,var(--a) 48%,#343640);box-shadow:0 0 17px color-mix(in srgb,var(--a) 7%,transparent),inset 0 0 24px rgba(255,255,255,.008)}
.job:before{width:4px;height:30px;top:8px}.job:after{content:"ID // CPM-PR-00X     ▌▌▌▌▌";font-size:6px;color:color-mix(in srgb,var(--b) 72%,white)}
.jobtop:after{content:"+";position:absolute;right:10px;top:45px;font:12px Arial,sans-serif;color:color-mix(in srgb,var(--a) 65%,transparent)}
.thumb{border-color:color-mix(in srgb,var(--a) 55%,#42434b);box-shadow:0 0 13px color-mix(in srgb,var(--a) 11%,transparent)}
.brand{font-size:12px;color:color-mix(in srgb,var(--a) 72%,white)}
.product{font-size:18px;line-height:1.4;height:2.8em;min-height:2.8em;max-height:2.8em}
.badge{border-color:color-mix(in srgb,var(--b) 68%,#383941);box-shadow:0 0 10px color-mix(in srgb,var(--b) 14%,transparent)}
.meta b{color:color-mix(in srgb,var(--b) 42%,#aaa4b4)}
.progress{gap:10px}.bar{height:6px;background:repeating-linear-gradient(90deg,#292b34 0 22px,#0b0c10 22px 25px);border-top:1px solid rgba(255,255,255,.025)}.fill{background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 0 10px color-mix(in srgb,var(--a) 35%,transparent)}
.btn{border-color:color-mix(in srgb,var(--a) 42%,#393b43)}
.btn:not(.primary):after{content:"";position:absolute;right:5px;top:5px;width:8px;height:1px;background:var(--b);box-shadow:0 0 7px var(--b)}
.sheet{border-color:color-mix(in srgb,var(--a) 55%,#3c3d45);box-shadow:0 0 35px color-mix(in srgb,var(--a) 12%,transparent),inset 0 0 40px rgba(255,255,255,.006)}
.sheet:before{content:"+  CPM // DATA TERMINAL // EDIT RECORD                         ONLINE";border-left:3px solid var(--a);padding-left:10px}
.field input,.field select,.field textarea{border-color:color-mix(in srgb,var(--b) 25%,#3b3543);background:linear-gradient(100deg,rgba(12,11,16,.98),rgba(6,6,10,.98))}
.check{border-color:color-mix(in srgb,var(--b) 28%,#3b3643)}
.actions .btn.primary{box-shadow:0 0 18px color-mix(in srgb,var(--a) 30%,transparent)}
@media(max-width:430px){.head{min-height:132px}.head:before{font-size:6px;opacity:.78}h1{font-size:31px}.job{height:172px;min-height:172px;max-height:172px;padding:14px 12px}.product{font-size:17px}.app{padding-left:13px;padding-right:13px}}

/* v8 — faithful compact CPM cyber terminal */
.app{max-width:720px;padding-left:12px;padding-right:12px}
.app:before{content:"+  CPM // PERSONAL SYSTEM   •   VER.8.0";border-left:0;padding-left:0;margin:0 3px 5px;color:color-mix(in srgb,var(--a) 78%,#d9d9e5);font:8px Arial,sans-serif;letter-spacing:.25em}
.head{min-height:190px;padding:12px 8px 24px;margin-bottom:12px;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--a) 7%,transparent),transparent 40%),repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.018) 55px)}
.head:before{content:"// USER MODE : PERSONAL\A// SYSTEM : ONLINE\A// CPM TERMINAL";top:13px;right:8px;font-size:7px;line-height:1.85;color:color-mix(in srgb,var(--b) 72%,white)}
.head:after{content:"";left:8px;right:8px;bottom:11px;width:auto;height:48px;background:linear-gradient(90deg,var(--a) 0 22%,transparent 22% 100%);opacity:.7;clip-path:polygon(0 46%,18% 46%,18% 50%,45% 50%,45% 53%,100% 53%,100% 56%,0 56%)}
.head .eyebrow{margin-top:76px;font-size:9px;letter-spacing:.3em;color:#d8d1df}
h1{font-family:Arial,sans-serif;font-weight:800;font-style:italic;font-size:54px;line-height:.9;letter-spacing:-.06em;margin-top:6px;background:linear-gradient(110deg,#fff 0%,color-mix(in srgb,var(--a) 65%,white) 48%,color-mix(in srgb,var(--b) 72%,white));-webkit-background-clip:text;color:transparent;text-shadow:0 0 20px color-mix(in srgb,var(--a) 20%,transparent)}
.head .btn{position:absolute;right:8px;bottom:20px;min-width:118px;border-color:color-mix(in srgb,var(--a) 70%,#444);box-shadow:0 0 14px color-mix(in srgb,var(--a) 16%,transparent)}
.panel{padding:21px 16px 16px;border-width:1px;border-color:color-mix(in srgb,var(--a) 62%,#31323a);box-shadow:0 0 20px color-mix(in srgb,var(--a) 10%,transparent),inset 0 0 0 1px rgba(255,255,255,.015)}
.panel:before{height:56px;width:5px;top:9px}.panel:after{content:"// NEAR DEADLINE";top:7px;left:25px;font-size:7px;letter-spacing:.2em;color:color-mix(in srgb,var(--a) 72%,white)}
.panel-title h2{font-size:22px}.alert{padding:13px 14px;border-color:color-mix(in srgb,var(--b) 38%,#333);box-shadow:inset 0 0 18px rgba(255,255,255,.01)}
.tabs{gap:10px}.tabs .btn{min-height:58px;font-size:18px;border-color:color-mix(in srgb,var(--a) 60%,#35363f);box-shadow:0 0 11px color-mix(in srgb,var(--a) 8%,transparent)}.tabs .btn.primary{background:linear-gradient(110deg,color-mix(in srgb,var(--a) 88%,#151018),color-mix(in srgb,var(--b) 82%,#111018));box-shadow:0 0 18px color-mix(in srgb,var(--a) 28%,transparent),inset 0 0 18px rgba(255,255,255,.09)}
.tabs .add{border-color:color-mix(in srgb,var(--b) 58%,#35363f)}.tabs .add:after{content:">>>";position:absolute;right:12px;top:8px;font:12px Arial,sans-serif;color:var(--b);letter-spacing:-.1em;text-shadow:0 0 8px var(--b)}
.list{gap:13px}.job{height:184px;min-height:184px;max-height:184px;padding:17px 15px;grid-template-columns:78px minmax(0,1fr);border-color:color-mix(in srgb,var(--a) 65%,#30313a);box-shadow:0 0 18px color-mix(in srgb,var(--a) 11%,transparent),inset 0 0 24px rgba(255,255,255,.008)}
.job:before{height:38px;width:5px;top:8px}.job:after{content:"ID // CPM-PR-00X     ▌▌▌▌▌▌";left:15px;right:auto;bottom:6px;color:color-mix(in srgb,var(--b) 78%,white);font-size:6px}.jobtop:before{content:"00X   // PROJECT";position:absolute;left:15px;top:6px;font:7px Arial,sans-serif;letter-spacing:.18em;color:color-mix(in srgb,var(--a) 72%,white)}
.jobtop{padding-top:7px;min-height:68px}.thumb{width:78px;height:92px;margin-top:8px;border-color:color-mix(in srgb,var(--a) 75%,#444);background:linear-gradient(145deg,#111018,#07070b);font-size:20px;box-shadow:inset 0 0 18px color-mix(in srgb,var(--a) 6%,transparent)}
.brand{font-size:12px}.product{font-size:18px}.badge{margin-top:7px;border-color:color-mix(in srgb,var(--b) 75%,#444);color:color-mix(in srgb,var(--b) 45%,white)}
.meta{margin-top:8px}.bar{height:7px}.progress{margin-bottom:9px}.jobtop:after{font-size:14px;color:var(--b)}
body:after{opacity:.18;background:repeating-linear-gradient(90deg,transparent 0 63px,color-mix(in srgb,var(--a) 13%,transparent) 64px,transparent 65px 128px),repeating-linear-gradient(0deg,transparent 0 63px,color-mix(in srgb,var(--b) 8%,transparent) 64px,transparent 65px 128px);mask-image:none}
@media(max-width:430px){.head{min-height:184px}.head .eyebrow{margin-top:72px}h1{font-size:49px}.job{height:180px;min-height:180px;max-height:180px;grid-template-columns:74px minmax(0,1fr);padding:16px 12px}.thumb{width:74px;height:88px}.product{font-size:17px}}
/* v9: six-cell cyber energy gauge */
.progress{display:flex;align-items:center;gap:10px;margin-top:auto;margin-bottom:9px}
.energy-gauge{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;flex:1;height:11px;align-items:stretch;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--a) 10%,transparent))}
.energy-cell{position:relative;display:block;min-width:0;background:linear-gradient(180deg,#242630,#12131a);border:1px solid #30323d;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.energy-cell.charged{background:linear-gradient(100deg,var(--a),color-mix(in srgb,var(--a) 45%,var(--b)),var(--b));border-color:color-mix(in srgb,var(--a) 72%,white);box-shadow:0 0 8px color-mix(in srgb,var(--a) 45%,transparent),inset 0 0 6px rgba(255,255,255,.18)}
.energy-cell.charged:after{content:"";position:absolute;inset:1px;background:linear-gradient(180deg,rgba(255,255,255,.26),transparent 55%);clip-path:inherit;opacity:.45}
.energy-count{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.08em;color:#b9bac4;min-width:27px;text-align:right}

/* v10 — industrial technical cyberpunk / decal terminal */
:root{--industrial:#c9cbd2}
body:before{opacity:.14;background-size:28px 28px,28px 28px,100% 100%;filter:contrast(1.15)}
.app:before{content:"CPM // PERSONAL CONTROL SYSTEM   •   VER.10.0   •   STATUS:ONLINE";font-family:Arial,sans-serif;font-size:7px;letter-spacing:.23em;color:color-mix(in srgb,var(--a) 55%,#d9dbe0);border-left:3px solid var(--a);padding:2px 0 3px 9px;margin:0 3px 8px}
.head{min-height:154px;padding:16px 8px 19px;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--a) 45%,#34343c);border-bottom:1px solid color-mix(in srgb,var(--a) 45%,#34343c);background:linear-gradient(110deg,color-mix(in srgb,var(--a) 5%,transparent),transparent 42%,color-mix(in srgb,var(--b) 5%,transparent));clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.head>div:first-child{align-self:flex-end;position:relative;padding:0 0 6px 8px}
.head>div:first-child:before{content:"CPM";display:block;font-family:Arial Black,Arial,sans-serif;font-style:italic;font-weight:900;font-size:58px;line-height:.82;letter-spacing:-.09em;color:#e7e8ec;text-shadow:3px 0 0 color-mix(in srgb,var(--a) 62%,transparent),-2px 0 0 color-mix(in srgb,var(--b) 42%,transparent);transform:skewX(-8deg);margin-bottom:11px}
.eyebrow{font:7px Arial,sans-serif;letter-spacing:.32em;color:#b9bbc3}.head h1{font-family:Arial,sans-serif;font-size:18px;font-weight:800;letter-spacing:.15em;margin:0;text-transform:uppercase;color:#f0f0f2;text-shadow:none}.head h1{font-size:0}.head h1:after{content:"PROJECT CONTROL";font-size:18px}
.head:before{content:"// USER MODE : PERSONAL\A// SYSTEM : ONLINE\A// ACCESS : LOCAL\A// TERMINAL : CPM-01";font:7px/1.85 Arial,sans-serif;letter-spacing:.17em;color:color-mix(in srgb,var(--b) 62%,#d8d8df);top:16px;right:10px}
.head:after{content:"CAUTION // DATA MANAGEMENT\A▌▌▌▌▌▌▌▌  010110";white-space:pre;left:16px;bottom:9px;background:none;padding:0;font:6px/1.5 Arial,sans-serif;letter-spacing:.16em;color:color-mix(in srgb,var(--a) 55%,#b9bbc3);text-shadow:none}
.head .btn{align-self:center;margin-top:28px;min-width:116px;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-family:Arial,sans-serif;letter-spacing:.08em}
.panel,.job,.btn{border-radius:0}.panel,.job{border-color:color-mix(in srgb,var(--a) 34%,#3b3d43);background:linear-gradient(145deg,rgba(8,9,12,.97),rgba(4,5,7,.985))}
.panel{clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.panel-title:before{content:"CAUTION / NEAR DEADLINE";position:absolute;top:7px;left:30px;font:6px Arial,sans-serif;letter-spacing:.22em;color:color-mix(in srgb,var(--a) 62%,white)}
.panel-title{padding-top:8px}.panel-title h2{margin-top:8px}
.tabs .btn{font-family:Arial,sans-serif;letter-spacing:.09em}.tabs .btn:before{content:">> ";font-size:10px;color:var(--a)}.tabs .add:after{content:"   ///";color:var(--b);font:8px Arial,sans-serif}
.job{min-height:236px;padding:29px 14px 24px;grid-template-columns:120px 1fr;gap:14px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 10px)}
.job:before{content:"";height:45px;width:4px;top:10px;box-shadow:none}.job:after{content:"ID // CPM-PR-00X     ▌▌▌▌▌▌▌▌     PROTOCOL DRIVER";font-size:6px;letter-spacing:.13em;left:15px;bottom:7px;color:#aeb0b8}
.jobtop:before{content:"00X // PROJECT   •   STATUS:ACTIVE";top:8px;left:15px;font-size:6px;letter-spacing:.18em;color:color-mix(in srgb,var(--a) 58%,#d7d8dc)}
.jobtop:after{content:"+  ×  +";position:absolute;right:14px;top:10px;font:10px Arial,sans-serif;letter-spacing:.42em;color:color-mix(in srgb,var(--b) 48%,#9b9da5)}
.thumb{width:120px;height:120px;border-radius:0;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);border:1px solid #444750;background:linear-gradient(135deg,#171920,#0a0b0f);position:relative}
.job>div:nth-child(2){min-width:0;display:flex;flex-direction:column}.brand{font-size:10px;letter-spacing:.18em}.product{font-size:17px;line-height:1.42;height:48px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px}.badge{border-radius:0;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);font-weight:700}.meta{margin-top:13px}.meta b{font-size:7px;letter-spacing:.2em}.progress{margin-top:auto}.energy-gauge{height:15px;gap:5px}.energy-cell{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);background:repeating-linear-gradient(135deg,#24262c 0 5px,#17181d 5px 9px);border-color:#34363d}.energy-cell.charged{background:repeating-linear-gradient(135deg,var(--a) 0 6px,color-mix(in srgb,var(--a) 45%,var(--b)) 6px 11px);box-shadow:0 0 5px color-mix(in srgb,var(--a) 26%,transparent)}
.energy-count:before{content:"PWR ";font-size:6px;color:#8f9199}.energy-count{font-size:10px}
@media(max-width:520px){.head{min-height:145px}.head>div:first-child:before{font-size:51px}.head h1:after{font-size:15px}.head .btn{min-width:104px}.job{grid-template-columns:120px 1fr;min-height:230px}.thumb{width:120px;height:120px}}
@media(max-width:390px){.job{grid-template-columns:105px 1fr}.thumb{width:105px;height:112px}.head>div:first-child:before{font-size:45px}}


/* v11 — hard industrial decal terminal */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V11.0   /   LOCAL TERMINAL"}
.head{min-height:172px;background:linear-gradient(105deg,rgba(255,255,255,.018),transparent 38%),repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.025) 12px 13px);border-color:#555861}
.head>div:first-child:before{content:"PROJECT";font-size:42px;letter-spacing:-.045em;color:#f1f1f1;text-shadow:2px 0 var(--a),-2px 0 var(--b);margin-bottom:2px}
.head .eyebrow{margin-top:0;font:7px Arial,sans-serif;letter-spacing:.28em;color:#aeb0b7}
.head h1{font-size:0!important;margin-top:0}.head h1:after{content:"CONTROL";display:block;font:900 italic 42px/.9 Arial Black,Arial,sans-serif;letter-spacing:-.035em;color:#f1f1f1;transform:skewX(-7deg);text-shadow:2px 0 var(--b);}
.head:before{content:"// USER : PERSONAL\A// SYSTEM : ONLINE\A// ACCESS : LOCAL\A// UNIT : CPM-11";color:#aeb0b7}
.head:after{content:"CAUTION  /  DATA CONTROL\A▰▰▰▰▰▰▰▰   S/N 110926";color:#9fa1a8}
.panel,.job{border-color:#50535b;box-shadow:none}
.panel:before,.job:before{background:var(--a);box-shadow:none}
.panel-title:before{content:"WARNING // DEADLINE MONITOR";color:#aeb0b7}
.tabs .btn{border-color:#555861;background:#08090c;box-shadow:none}.tabs .btn.primary{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--a) 60%,#101116) 0 10px,color-mix(in srgb,var(--b) 42%,#101116) 10px 20px);box-shadow:none}
.tabs .btn:before{content:"▶ ";color:#d8d9dd}.tabs .add:after{content:"CAUTION ///";font-size:6px;color:#9fa1a8;top:7px}
.job{background:linear-gradient(100deg,#090a0d,#050609 68%);border-width:1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)}
.jobtop:before{content:"PROJECT // ACTIVE   S/N CPM-00X";color:#aeb0b7}.jobtop:after{content:"+  ×  ◇  +";color:#8e9199}
.job:after{content:"CAUTION   ▌▌▌ ▌▌ ▌▌▌▌   PROTOCOL DRIVER   011001";color:#92949c}
.thumb{border-color:#5a5d65;background:repeating-linear-gradient(135deg,#15171c 0 9px,#0b0c10 9px 18px);box-shadow:none}
.badge{border-color:#5a5d65;box-shadow:none;color:#e6e7ea}
.brand{color:#d8d9dd}.meta b{color:#92949c}
.energy-gauge{filter:none}.energy-cell{box-shadow:none}.energy-cell.charged{box-shadow:none;border-color:#c5c7cc;background:repeating-linear-gradient(135deg,var(--a) 0 7px,color-mix(in srgb,var(--b) 55%,#111) 7px 13px)}
body:before{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.018) 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.018) 32px),linear-gradient(120deg,transparent 0 14%,rgba(255,255,255,.025) 14.1% 14.3%,transparent 14.4%);opacity:.7}
@media(max-width:430px){.head>div:first-child:before,.head h1:after{font-size:38px}.head{min-height:168px}}

/* v12 — compact hard-industrial refinement */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V12.0   /   LOCAL TERMINAL"}

/* Deadline header: one clean technical label only */
.panel:after{content:none!important}
.panel-title{position:relative;padding-top:17px}
.panel-title:before{content:"// NEAR DEADLINE"!important;position:absolute;left:0!important;top:0!important;font:7px/1 Arial,sans-serif!important;letter-spacing:.24em!important;color:color-mix(in srgb,var(--a) 72%,#d7d9de)!important;white-space:nowrap}
.panel-title h2{margin-top:0!important}

/* Japanese action labels use the same Mincho face as the deadline heading */
.tabs .btn{font-family:"KazukiReiwa","Hiragino Mincho ProN","Yu Mincho",serif!important;font-weight:400;letter-spacing:.04em;font-size:19px}
.tabs .btn:before{content:none!important}
.tabs .btn:after{content:"";position:absolute;pointer-events:none}
.tabs .btn:not(.add):after{width:18px;height:10px;right:9px;top:8px;border-top:1px solid color-mix(in srgb,var(--b) 70%,#777);border-right:1px solid color-mix(in srgb,var(--b) 70%,#777);clip-path:none;background:none;text-shadow:none}
.tabs .add:after{content:""!important;width:32px;height:14px;right:9px!important;top:8px!important;border-top:1px solid #777b83;border-right:1px solid #777b83;background:linear-gradient(135deg,transparent 0 68%,color-mix(in srgb,var(--a) 55%,#74777e) 69% 72%,transparent 73%);color:transparent!important;text-shadow:none!important;clip-path:none}
.tabs .add{overflow:hidden}
.tabs .add:before{content:none!important}

/* Project cards: much slimmer while keeping two product-name lines */
.list{gap:10px}
.job{height:178px!important;min-height:178px!important;max-height:178px!important;grid-template-columns:96px minmax(0,1fr)!important;gap:12px!important;padding:24px 13px 21px!important;clip-path:polygon(8px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 8px)}
.job:before{height:34px!important;width:4px!important;top:9px!important}
.job:after{content:"CAUTION  ▌▌ ▌▌▌ ▌▌  PROTOCOL  011001"!important;left:13px!important;bottom:6px!important;font-size:5.5px!important;letter-spacing:.12em!important;color:#8f929a!important}
.jobtop{padding-top:0!important;min-height:54px!important}
.jobtop:before{content:"PROJECT // ACTIVE   S/N CPM-00X"!important;left:13px!important;top:7px!important;font-size:5.5px!important;letter-spacing:.16em!important;color:#a5a8af!important}
.jobtop:after{content:""!important;position:absolute!important;right:13px!important;top:8px!important;width:50px!important;height:9px!important;background:repeating-linear-gradient(135deg,#777b83 0 3px,transparent 3px 7px)!important;border-top:1px solid #555961!important;opacity:.72;letter-spacing:0!important}
.thumb{width:96px!important;height:104px!important;margin-top:0!important;font-size:19px!important;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.job>div:nth-child(2){min-height:0!important}
.brand{font-size:10px!important;line-height:1.1!important}
.product{font-size:16px!important;line-height:1.32!important;height:43px!important;margin-top:3px!important}
.badge{margin-top:0!important;padding:3px 7px!important;font-size:9px!important}
.meta{margin-top:4px!important;gap:7px!important;font-size:11.5px!important;line-height:1.18!important}
.meta b{font-size:6px!important;margin-bottom:1px!important}
.progress{margin-top:auto!important;margin-bottom:0!important;gap:7px!important}
.energy-gauge{height:12px!important;gap:4px!important}
.energy-count{font-size:9px!important;min-width:36px!important}
.energy-count:before{font-size:5.5px!important}

/* More mechanical framing, less decorative/cute punctuation */
.job,.panel,.tabs .btn{background-color:#07080b}
.job{background-image:linear-gradient(100deg,rgba(255,255,255,.018),transparent 35%),repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.012) 18px 19px)}

@media(max-width:430px){
  .tabs .btn{font-size:18px}
  .job{height:174px!important;min-height:174px!important;max-height:174px!important;grid-template-columns:90px minmax(0,1fr)!important;padding:23px 11px 20px!important;gap:10px!important}
  .thumb{width:90px!important;height:100px!important}
  .jobtop:before{left:11px!important}
  .jobtop:after{right:11px!important;width:43px!important}
  .job:after{left:11px!important}
  .product{font-size:15.5px!important;height:41px!important}
}

/* v13 — cache-busted compact terminal pass */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V13.0   /   LOCAL TERMINAL"!important}

/* compact project records */
.list{gap:8px!important}
.job{
  height:154px!important;min-height:154px!important;max-height:154px!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  gap:10px!important;padding:20px 11px 18px!important;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 7px)!important;
}
.job:before{height:27px!important;width:3px!important;top:8px!important;box-shadow:none!important}
.job:after{content:"CAUTION  ▌▌ ▌▌▌  PROTOCOL 011001"!important;left:11px!important;bottom:4px!important;font:5px/1 Arial,sans-serif!important;letter-spacing:.11em!important;color:#858890!important}
.thumb{width:82px!important;height:90px!important;margin-top:0!important;font-size:18px!important;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)!important}
.jobtop{padding-top:0!important;min-height:45px!important}
.jobtop:before{content:"PROJECT // ACTIVE   S/N CPM-00X"!important;left:11px!important;top:5px!important;font:5px/1 Arial,sans-serif!important;letter-spacing:.14em!important;color:#9699a1!important}
/* no cute + × ◇ + : use a hard technical rail */
.jobtop:after{content:""!important;position:absolute!important;right:11px!important;top:6px!important;width:54px!important;height:8px!important;border-top:1px solid #6e7178!important;border-right:1px solid #6e7178!important;background:repeating-linear-gradient(135deg,transparent 0 5px,#777a82 5px 7px,transparent 7px 11px)!important;opacity:.8!important}
.brand{font-size:9px!important;line-height:1!important;letter-spacing:.14em!important}
.product{font-size:15px!important;line-height:1.2!important;height:36px!important;margin-top:2px!important}
.badge{font-size:8px!important;padding:2px 6px!important}
.meta{margin-top:2px!important;gap:6px!important;font-size:10.5px!important;line-height:1.1!important}
.meta b{font-size:5.5px!important;margin-bottom:1px!important}
.progress{margin-top:auto!important;gap:6px!important}
.energy-gauge{height:10px!important;gap:3px!important}
.energy-count{font-size:8.5px!important;min-width:34px!important}
.energy-count:before{font-size:5px!important}

/* actions: same Japanese face, cleaner mechanical framing */
.tabs{gap:8px!important;margin:10px 0 12px!important}
.tabs .btn{font-family:"KazukiReiwa","Hiragino Mincho ProN","Yu Mincho",serif!important;font-weight:400!important;min-height:50px!important;font-size:18px!important;letter-spacing:.04em!important}
.tabs .btn:before{content:none!important}
.tabs .btn:not(.add):after{content:""!important;width:20px!important;height:9px!important;right:8px!important;top:7px!important;border-top:1px solid #6e7178!important;border-right:1px solid #6e7178!important;background:none!important}
.tabs .add{min-height:48px!important}
.tabs .add:before{content:none!important}
.tabs .add:after{content:""!important;right:7px!important;top:6px!important;width:48px!important;height:13px!important;border-top:1px solid #6e7178!important;border-right:1px solid #6e7178!important;background:repeating-linear-gradient(135deg,transparent 0 7px,#62656c 7px 9px,transparent 9px 14px)!important;opacity:.85!important}

/* deadline label: remove duplicated monitor text */
.panel:after{content:none!important}
.panel-title{position:relative!important;padding-top:15px!important}
.panel-title:before{content:"// NEAR DEADLINE"!important;left:0!important;top:0!important;font:6px/1 Arial,sans-serif!important;letter-spacing:.22em!important;white-space:nowrap!important}

@media(max-width:430px){
  .job{height:150px!important;min-height:150px!important;max-height:150px!important;grid-template-columns:78px minmax(0,1fr)!important;padding:19px 10px 17px!important;gap:9px!important}
  .thumb{width:78px!important;height:87px!important}
  .product{font-size:14.5px!important;height:35px!important}
  .jobtop:before{left:10px!important}.jobtop:after{right:10px!important;width:47px!important}.job:after{left:10px!important}
  .tabs .btn{font-size:17px!important}
}

/* v14 — black / white industrial decal system + stable project chassis variants */
:root{--struct:#eef0f3;--struct-dim:#a8abb2}
.app:before{content:"CPM // PERSONAL SYSTEM   /   V14.0   /   LOCAL TERMINAL"!important;color:color-mix(in srgb,var(--a) 56%,var(--struct))!important}

/* White is now structural; theme colors remain accents. */
.head{border-top:1px solid rgba(238,240,243,.72)!important;border-bottom:2px solid rgba(238,240,243,.72)!important}
.head:before{color:#b8bbc2!important}
.head .btn{border:1.5px solid var(--struct)!important;box-shadow:none!important}
.panel{border:2px solid rgba(238,240,243,.78)!important;background:#07080b!important;box-shadow:none!important}
.panel:before{background:var(--a)!important;width:5px!important}
.panel-title:before{color:color-mix(in srgb,var(--a) 58%,var(--struct))!important}
.panel-title h2{color:#f5f5f6!important}
.small{color:#b5b7bd!important}
.alert{border:1px solid rgba(238,240,243,.52)!important}

.tabs .btn{border:1.5px solid rgba(238,240,243,.82)!important;background:#07080b!important;box-shadow:none!important}
.tabs .btn.primary{border-color:var(--struct)!important;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--a) 66%,#111218) 0 11px,color-mix(in srgb,var(--b) 46%,#111218) 11px 22px)!important}
.tabs .btn:not(.add):after{border-color:rgba(238,240,243,.82)!important}
.tabs .add:after{border-color:rgba(238,240,243,.9)!important;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(238,240,243,.7) 7px 9px,transparent 9px 14px)!important}

/* Completed-project control: replace the meaningless glowing square with a slim technical archive plate. */
.tabs .btn:nth-child(2){padding-right:68px!important}
.tabs .btn:nth-child(2):after{
  content:"ARCHIVE"!important;box-sizing:border-box!important;display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;
  width:58px!important;height:18px!important;right:8px!important;top:7px!important;padding:2px 4px!important;
  border:1px solid rgba(238,240,243,.9)!important;color:#dfe1e5!important;font:5px/1 Arial,sans-serif!important;letter-spacing:.16em!important;
  clip-path:polygon(0 0,82% 0,88% 28%,100% 28%,100% 100%,18% 100%,12% 72%,0 72%)!important;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(238,240,243,.78) 5px 7px,transparent 7px 11px) left bottom/100% 5px no-repeat!important;
  opacity:1!important;
}
.tabs .btn:nth-child(2):before{content:""!important;position:absolute!important;right:61px!important;top:10px!important;width:3px!important;height:3px!important;background:var(--a)!important;box-shadow:0 0 0 1px #090a0d!important}

/* Project records become individual machine-part silhouettes. Variant is stable per job ID. */
.job{
  border:2px solid rgba(238,240,243,.88)!important;
  background-color:#06070a!important;
  background-image:linear-gradient(100deg,rgba(255,255,255,.035),transparent 36%),repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.018) 18px 19px)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.job.frame-a{clip-path:polygon(0 7px,7px 0,68% 0,71% 5px,90% 5px,92% 0,100% 0,100% 78%,97% 81%,97% 100%,9% 100%,7% calc(100% - 5px),0 calc(100% - 5px))!important}
.job.frame-b{clip-path:polygon(0 0,79% 0,82% 6px,96% 6px,100% 12px,100% 100%,72% 100%,69% calc(100% - 5px),18% calc(100% - 5px),15% 100%,0 100%,0 24%,5px 20%,5px 8px)!important}
.job.frame-c{clip-path:polygon(0 0,26% 0,29% 5px,74% 5px,77% 0,100% 0,100% 34%,calc(100% - 6px) 38%,calc(100% - 6px) 72%,100% 76%,100% 100%,12% 100%,9% calc(100% - 6px),0 calc(100% - 6px))!important}
.job.frame-d{clip-path:polygon(8px 0,57% 0,60% 5px,86% 5px,89% 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,38% 100%,35% calc(100% - 5px),8% calc(100% - 5px),0 calc(100% - 13px),0 8px)!important}
.job:before{background:var(--a)!important;box-shadow:none!important}
.jobtop:before{color:#c4c6cb!important}
.jobtop:after{border-color:#e5e7ea!important;background:repeating-linear-gradient(135deg,transparent 0 5px,#e5e7ea 5px 7px,transparent 7px 11px)!important;opacity:.9!important}
.job:after{color:#c1c3c8!important}
.thumb{border:1.5px solid rgba(238,240,243,.82)!important;color:#e8e9ec!important;background:repeating-linear-gradient(135deg,#181a20 0 9px,#090a0e 9px 18px)!important}
.badge{border:1.5px solid rgba(238,240,243,.82)!important;color:#f2f3f4!important;background:#090a0d!important}
.brand{color:#e5e6e9!important}.meta b{color:#aeb1b8!important}
.energy-cell{border:1px solid #4e5158!important}.energy-cell.charged{border-color:#f0f1f3!important}
.energy-count:before{color:#aeb1b8!important}

/* White decal details on the edit/detail terminal as well. */
.sheet{border:2px solid rgba(238,240,243,.76)!important;box-shadow:none!important}
.sheet:before{border-left-color:var(--a)!important;border-bottom-color:rgba(238,240,243,.35)!important;color:#cfd1d6!important}
.field input,.field select,.field textarea,.detailrow,.check{border-color:rgba(238,240,243,.38)!important}

@media(max-width:430px){
  .tabs .btn:nth-child(2){padding-right:61px!important}
  .tabs .btn:nth-child(2):after{width:52px!important;right:6px!important}
}

/* v15 — true machine-part chassis; remove unexplained stripe boxes */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V15.0   /   LOCAL TERMINAL"!important}

/* The add-project control no longer carries a decorative boxed stripe. */
.tabs .add:after{content:none!important;display:none!important}

/* The project header no longer carries the small boxed stripe rail. */
.jobtop:after{content:none!important;display:none!important}

/* Real silhouette frames: the white chassis is the card itself, with a dark inset core.
   The notches are intentionally large enough to read as different hardware parts on a phone. */
.job{
  --shape:polygon(0 12px,12px 0,38% 0,41% 8px,59% 8px,62% 0,91% 0,100% 14px,100% 39%,calc(100% - 15px) 47%,calc(100% - 15px) 66%,100% 74%,100% calc(100% - 14px),calc(100% - 14px) 100%,59% 100%,56% calc(100% - 8px),24% calc(100% - 8px),21% 100%,10px 100%,0 calc(100% - 10px));
  clip-path:var(--shape)!important;
  border:0!important;
  background:#eef0f3!important;
  background-image:none!important;
  box-shadow:none!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
.job.frame-a{--shape:polygon(0 12px,12px 0,38% 0,41% 8px,59% 8px,62% 0,91% 0,100% 14px,100% 39%,calc(100% - 15px) 47%,calc(100% - 15px) 66%,100% 74%,100% calc(100% - 14px),calc(100% - 14px) 100%,59% 100%,56% calc(100% - 8px),24% calc(100% - 8px),21% 100%,10px 100%,0 calc(100% - 10px))!important}
.job.frame-b{--shape:polygon(0 0,31% 0,34% 9px,67% 9px,70% 0,92% 0,100% 12px,100% 100%,77% 100%,73% calc(100% - 9px),49% calc(100% - 9px),46% 100%,13% 100%,13% calc(100% - 8px),0 calc(100% - 8px),0 72%,13px 64%,13px 43%,0 35%)!important}
.job.frame-c{--shape:polygon(14px 0,47% 0,50% 9px,83% 9px,86% 0,100% 0,100% 29%,calc(100% - 18px) 38%,calc(100% - 18px) 61%,100% 70%,100% calc(100% - 13px),calc(100% - 13px) 100%,69% 100%,66% calc(100% - 8px),34% calc(100% - 8px),31% 100%,0 100%,0 61%,12px 54%,12px 26%,0 19%,0 14px)!important}
.job.frame-d{--shape:polygon(0 10px,10px 0,24% 0,28% 10px,54% 10px,58% 0,100% 0,100% 44%,calc(100% - 12px) 44%,calc(100% - 12px) 58%,100% 58%,100% 88%,88% 88%,84% 100%,43% 100%,39% calc(100% - 9px),14% calc(100% - 9px),10% 100%,0 100%,0 71%,14px 63%,14px 37%,0 29%)!important}

/* inset dark core creates a continuous white outline that follows every notch */
.job:before{
  content:""!important;position:absolute!important;inset:2px!important;width:auto!important;height:auto!important;
  background:linear-gradient(100deg,rgba(255,255,255,.035),transparent 36%),repeating-linear-gradient(135deg,#08090c 0 18px,#090a0e 18px 19px)!important;
  clip-path:var(--shape)!important;box-shadow:none!important;z-index:0!important;pointer-events:none!important;
}
.job>*{position:relative;z-index:2}
.job:after{z-index:3!important}
.job-accent{position:absolute!important;z-index:4!important;left:3px!important;top:13px!important;width:4px!important;height:31px!important;background:var(--a)!important;box-shadow:none!important;pointer-events:none!important}

/* Keep the silhouette visible: pull content slightly away from the deeper side notches. */
.job.frame-b,.job.frame-c,.job.frame-d{padding-left:15px!important;padding-right:15px!important}

@media(max-width:430px){
  .job.frame-b,.job.frame-c,.job.frame-d{padding-left:14px!important;padding-right:14px!important}
}

/* v16 — continuous chassis rails + HUD deadline frame */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V16.0   /   LOCAL TERMINAL"!important}

/* Deadline monitor becomes a real HUD screen frame instead of a plain rectangle. */
.panel{
  --panel-shape:polygon(0 10px,10px 0,31% 0,33% 5px,61% 5px,63% 0,91% 0,100% 10px,100% 42%,calc(100% - 7px) 46%,calc(100% - 7px) 79%,100% 83%,100% calc(100% - 10px),calc(100% - 10px) 100%,68% 100%,66% calc(100% - 5px),24% calc(100% - 5px),22% 100%,9px 100%,0 calc(100% - 9px));
  position:relative!important;clip-path:var(--panel-shape)!important;border:0!important;border-radius:0!important;
  background:var(--struct)!important;padding:22px 17px 17px!important;overflow:hidden!important;isolation:isolate!important;
}
.panel:after{
  content:""!important;display:block!important;position:absolute!important;inset:2px!important;z-index:0!important;pointer-events:none!important;
  background:#07080b!important;clip-path:var(--panel-shape)!important;
}
.panel>*{position:relative;z-index:2}
.panel:before{content:""!important;display:block!important;position:absolute!important;z-index:4!important;left:3px!important;top:14px!important;width:5px!important;height:54px!important;background:var(--a)!important;box-shadow:none!important}
.panel-title{padding-top:15px!important}
.panel-title:before{z-index:3!important}

/* Chassis border: make the white route visibly continuous around every step/notch. */
.job:before{inset:4px!important}
.job.frame-a:before{clip-path:polygon(0 10px,10px 0,37% 0,40% 6px,60% 6px,63% 0,91% 0,100% 12px,100% 39%,calc(100% - 13px) 47%,calc(100% - 13px) 66%,100% 74%,100% calc(100% - 12px),calc(100% - 12px) 100%,60% 100%,57% calc(100% - 6px),23% calc(100% - 6px),20% 100%,8px 100%,0 calc(100% - 8px))!important}
.job.frame-b:before{clip-path:polygon(0 0,30% 0,33% 7px,68% 7px,71% 0,92% 0,100% 10px,100% 100%,78% 100%,74% calc(100% - 7px),48% calc(100% - 7px),45% 100%,12% 100%,12% calc(100% - 6px),0 calc(100% - 6px),0 72%,11px 64%,11px 43%,0 35%)!important}
.job.frame-c:before{clip-path:polygon(12px 0,46% 0,49% 7px,84% 7px,87% 0,100% 0,100% 29%,calc(100% - 16px) 38%,calc(100% - 16px) 61%,100% 70%,100% calc(100% - 11px),calc(100% - 11px) 100%,70% 100%,67% calc(100% - 6px),33% calc(100% - 6px),30% 100%,0 100%,0 61%,10px 54%,10px 26%,0 19%,0 12px)!important}
.job.frame-d:before{clip-path:polygon(0 8px,8px 0,23% 0,27% 8px,55% 8px,59% 0,100% 0,100% 43%,calc(100% - 10px) 43%,calc(100% - 10px) 59%,100% 59%,100% 88%,88% 88%,84% 100%,44% 100%,40% calc(100% - 7px),13% calc(100% - 7px),9% 100%,0 100%,0 71%,12px 63%,12px 37%,0 29%)!important}

/* Keep the record label above the brand/product instead of crossing through them. */
.jobtop{position:relative!important;padding-top:10px!important}
.jobtop:before{left:0!important;top:0!important;font-size:5px!important;line-height:1!important;white-space:nowrap!important}
.brand{margin-top:3px!important}

@media(max-width:430px){
  .panel{padding:21px 15px 16px!important}
  .panel:before{left:3px!important;top:13px!important;height:52px!important}
  .jobtop{padding-top:9px!important}
}

/* v17 — long straight rails + selective hardware cuts */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V17.0   /   LOCAL TERMINAL"!important}

/* Deadline monitor: mostly straight screen frame. The few cuts now read as intentional hardware. */
.panel{
  --panel-shape:polygon(0 12px,12px 0,80% 0,83% 5px,95% 5px,100% 10px,100% 43%,calc(100% - 7px) 47%,calc(100% - 7px) 72%,100% 76%,100% calc(100% - 12px),calc(100% - 12px) 100%,23% 100%,20% calc(100% - 5px),12px calc(100% - 5px),0 calc(100% - 17px));
  padding:22px 17px 17px!important;
}
.panel:after{inset:2px!important;clip-path:var(--panel-shape)!important}
.panel-title:after{content:"SCREEN / 04";position:absolute;right:0;top:0;font:5px/1 Arial,sans-serif;letter-spacing:.18em;color:#aeb1b7;border-top:1px solid rgba(238,240,243,.72);padding-top:3px;width:72px;text-align:right}

/* Project chassis: four stable silhouettes, each dominated by long straight edges. */
.job{
  --shape:polygon(0 11px,11px 0,78% 0,81% 6px,94% 6px,100% 12px,100% 71%,calc(100% - 12px) 77%,calc(100% - 12px) 91%,calc(100% - 20px) 100%,22% 100%,19% calc(100% - 6px),10px calc(100% - 6px),0 calc(100% - 16px));
  clip-path:var(--shape)!important;
}
.job.frame-a{--shape:polygon(0 11px,11px 0,78% 0,81% 6px,94% 6px,100% 12px,100% 71%,calc(100% - 12px) 77%,calc(100% - 12px) 91%,calc(100% - 20px) 100%,22% 100%,19% calc(100% - 6px),10px calc(100% - 6px),0 calc(100% - 16px))!important}
.job.frame-b{--shape:polygon(0 0,28% 0,31% 7px,84% 7px,87% 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,67% 100%,64% calc(100% - 6px),17% calc(100% - 6px),14% 100%,0 100%,0 67%,12px 61%,12px 42%,0 36%)!important}
.job.frame-c{--shape:polygon(12px 0,89% 0,100% 11px,100% 34%,calc(100% - 14px) 41%,calc(100% - 14px) 65%,100% 72%,100% 100%,73% 100%,70% calc(100% - 7px),31% calc(100% - 7px),28% 100%,0 100%,0 15%,12px 8%)!important}
.job.frame-d{--shape:polygon(0 10px,10px 0,46% 0,49% 6px,88% 6px,91% 0,100% 0,100% 82%,calc(100% - 18px) 100%,45% 100%,42% calc(100% - 7px),12% calc(100% - 7px),9% 100%,0 100%,0 55%,11px 49%,11px 31%,0 25%)!important}

/* One inset core follows the same silhouette, keeping the white chassis visually continuous. */
.job:before{inset:4px!important;clip-path:var(--shape)!important}
.job.frame-a:before,.job.frame-b:before,.job.frame-c:before,.job.frame-d:before{clip-path:var(--shape)!important}

/* Each chassis family gets its own small, non-boxed hardware signature. */
.jobtop:after{content:""!important;display:block!important;position:absolute!important;height:7px!important;background:none!important;opacity:.9!important;pointer-events:none!important}
.frame-a .jobtop:after{right:7px!important;top:0!important;width:42px!important;border-top:1px solid #dfe1e4!important;background:repeating-linear-gradient(135deg,transparent 0 7px,#dfe1e4 7px 9px,transparent 9px 14px)!important}
.frame-b .jobtop:after{right:7px!important;top:0!important;width:34px!important;border-top:1px solid #dfe1e4!important;border-left:7px solid transparent!important;border-right:0!important}
.frame-c .jobtop:after{right:8px!important;top:0!important;width:38px!important;border-top:1px solid #dfe1e4!important;background:linear-gradient(90deg,#dfe1e4 0 3px,transparent 3px 8px,#dfe1e4 8px 11px,transparent 11px)!important}
.frame-d .jobtop:after{right:8px!important;top:0!important;width:44px!important;border-top:1px solid #dfe1e4!important;background:repeating-linear-gradient(90deg,transparent 0 6px,#dfe1e4 6px 8px,transparent 8px 12px)!important}

/* Thumbnail becomes part of the hardware family without touching the photo itself. */
.frame-a .thumb{clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)!important}
.frame-b .thumb{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,7px 100%,0 calc(100% - 7px))!important}
.frame-c .thumb{clip-path:polygon(7px 0,100% 0,100% 72%,calc(100% - 7px) 78%,calc(100% - 7px) 100%,0 100%,0 7px)!important}
.frame-d .thumb{clip-path:polygon(0 7px,7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)!important}

/* Bottom protocol decal is now a deliberate component, pulled safely inside the chassis. */
.job:after{
  content:"CPM / 011001   ▌▌▌▌   PROTOCOL"!important;
  left:16px!important;bottom:7px!important;width:132px!important;height:10px!important;
  padding-top:3px!important;border-top:1px solid rgba(238,240,243,.46)!important;
  font:5px/1 Arial,sans-serif!important;letter-spacing:.1em!important;color:#aeb1b7!important;
  white-space:nowrap!important;
}
.frame-b:after{width:118px!important}.frame-c:after{width:142px!important}.frame-d:after{width:124px!important}

/* Action controls echo the same language, but stay quieter than project records. */
.tabs .btn{clip-path:polygon(0 7px,7px 0,92% 0,100% 8px,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)!important}
.tabs .btn:nth-child(2){clip-path:polygon(0 0,91% 0,100% 9px,100% 100%,8px 100%,0 calc(100% - 8px))!important}
.tabs .add{clip-path:polygon(0 0,78% 0,81% 5px,100% 5px,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)!important}

@media(max-width:430px){
  .panel{padding:21px 15px 16px!important}
  .panel-title:after{width:60px;font-size:4.5px}
  .job:after{left:14px!important;bottom:6px!important}
}

/* v18 — white adhesive ID labels + final protocol spacing */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V18.0   /   LOCAL TERMINAL"!important}

/* The existing job-type badge becomes a physical white ID sticker instead of another outlined HUD box. */
.badge{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  min-width:48px!important;
  min-height:28px!important;
  padding:3px 7px 3px 9px!important;
  margin-top:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#f2f2ef!important;
  color:#08090b!important;
  box-shadow:none!important;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,5px 100%,0 calc(100% - 5px))!important;
  font:700 9px/1 Arial,sans-serif!important;
  letter-spacing:.04em!important;
  text-align:left!important;
}
.badge:before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;bottom:0!important;
  width:3px!important;
  background:var(--a)!important;
}
.badge:after{
  content:"STATUS / ACTIVE"!important;
  display:block!important;
  margin-top:3px!important;
  font:4px/1 Arial,sans-serif!important;
  letter-spacing:.09em!important;
  color:#303238!important;
  white-space:nowrap!important;
}
.frame-b .badge{clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)!important}
.frame-c .badge{clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%)!important}
.frame-d .badge{clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px)!important}

/* Pull the protocol decal away from the chassis rail so it reads as a separate applied marking. */
.job:after{
  left:16px!important;
  bottom:10px!important;
  width:126px!important;
  height:9px!important;
  padding-top:2px!important;
  border-top:1px solid rgba(238,240,243,.38)!important;
  background:rgba(4,5,7,.76)!important;
}
.frame-b:after{width:114px!important}.frame-c:after{width:134px!important}.frame-d:after{width:120px!important}

@media(max-width:430px){
  .badge{min-width:45px!important;min-height:26px!important;padding:3px 6px 3px 8px!important;font-size:8.5px!important}
  .badge:after{font-size:3.8px!important}
  .job:after{left:14px!important;bottom:9px!important}
}


/* v19 — product identity decals; project type returns to HUD control */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V21.0   /   LOCAL TERMINAL"!important}

/* Brand + product now read as a physical identification label applied to the chassis. */
.jobtop{align-items:flex-start!important;gap:7px!important;padding-top:0!important}
.jobtop:before{content:none!important;display:none!important}
.product-decal{
  position:relative!important;box-sizing:border-box!important;flex:1 1 auto!important;min-width:0!important;
  min-height:49px!important;padding:5px 9px 6px 10px!important;
  background:#f1f1ed!important;color:#090a0d!important;overflow:hidden!important;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,7px 100%,0 calc(100% - 7px))!important;
  box-shadow:none!important;
}
.product-decal:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a)}
.product-decal:after{content:"";position:absolute;right:7px;bottom:5px;width:27px;height:5px;opacity:.72;background:repeating-linear-gradient(90deg,#111319 0 1px,transparent 1px 3px,#111319 3px 5px,transparent 5px 7px)}
.decal-head{height:8px!important;margin-bottom:2px!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:5px!important;font:4px/1 Arial,sans-serif!important;letter-spacing:.14em!important;color:#55585e!important;white-space:nowrap!important}
.decal-head i{display:block;width:28px;height:4px;margin-top:0;background:repeating-linear-gradient(90deg,#5d6065 0 1px,transparent 1px 3px,#5d6065 3px 4px,transparent 4px 6px)}
.product-decal .brand{margin:0!important;color:#202227!important;font:700 7px/1.1 Arial,sans-serif!important;letter-spacing:.1em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;padding-right:30px!important}
.product-decal .product{margin:2px 0 0!important;color:#08090b!important;font-family:"KazukiReiwa","Hiragino Mincho ProN","Yu Mincho",serif!important;font-size:13.5px!important;line-height:1.12!important;height:2.24em!important;min-height:2.24em!important;max-height:2.24em!important;padding-right:28px!important;overflow:hidden!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;word-break:break-word!important}

/* Each chassis family gets a slightly different adhesive-label cut. */
.frame-b .product-decal{clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)!important}
.frame-c .product-decal{clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)!important}
.frame-d .product-decal{clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)!important}
.frame-b .product-decal:after{width:22px}.frame-c .product-decal:after{width:31px}.frame-d .product-decal:after{width:24px}

/* Project type is an interface chip again, not a sticker. */
.badge{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;min-width:38px!important;min-height:27px!important;padding:4px 7px!important;margin:0!important;
  border:1.5px solid rgba(238,240,243,.9)!important;border-radius:0!important;background:#08090c!important;color:#f2f3f4!important;
  box-shadow:none!important;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)!important;
  font:700 9px/1 Arial,sans-serif!important;letter-spacing:.04em!important;text-align:center!important;
}
.badge:before{content:""!important;position:absolute!important;left:4px!important;top:4px!important;width:3px!important;height:3px!important;background:var(--a)!important}
.badge:after{content:""!important;position:absolute!important;right:3px!important;bottom:3px!important;width:8px!important;height:4px!important;border-right:1px solid #8d9097!important;border-bottom:1px solid #8d9097!important;background:none!important;margin:0!important}
.frame-b .badge,.frame-c .badge,.frame-d .badge{clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)!important}

/* Keep metadata clear of the new applied label and keep the lower decal comfortably inside. */
.meta{margin-top:7px!important}
.job:after{bottom:9px!important}

@media(max-width:430px){
  .product-decal{min-height:47px!important;padding:5px 7px 5px 9px!important}
  .product-decal .product{font-size:12.8px!important;padding-right:24px!important}
  .product-decal .brand{font-size:6.7px!important;padding-right:25px!important}
  .badge{min-width:36px!important;min-height:25px!important;padding:4px 6px!important;font-size:8.5px!important}
  .meta{margin-top:6px!important}
}


/* v20 — urgency plates in NEAR DEADLINE: normal info stays white/black, urgency lights up */
.alert{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:48px!important;
  align-items:center!important;
  border:1px solid rgba(238,240,243,.50)!important;
  background:#07080b!important;
  padding:10px 13px 10px 15px!important;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)!important;
}
.alert>span,.alert>strong{position:relative;z-index:2}
.alert>span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-family:"KazukiReiwa","Hiragino Mincho ProN","Yu Mincho",serif!important;
  letter-spacing:.02em!important;
}
.alert>strong{
  flex:0 0 auto!important;
  font-weight:400!important;
  letter-spacing:.04em!important;
}
/* 4–3 days: restrained warning — dark plate + a thin live accent rail. */
.alert.urgent-4:before,.alert.urgent-3:before{
  content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:4px;background:var(--a);
}
.alert.urgent-4>strong,.alert.urgent-3>strong{color:var(--a)!important;text-shadow:none!important}
/* 2 days: the identity side starts illuminating, like a warning insert switching on. */
.alert.urgent-2:before{
  content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:58%;
  background:linear-gradient(100deg,var(--a) 0%,color-mix(in srgb,var(--a) 64%,var(--b)) 76%,transparent 100%);
  box-shadow:0 0 18px color-mix(in srgb,var(--a) 32%,transparent);
}
.alert.urgent-2>span{color:#07080b!important;font-weight:700!important;text-shadow:0 1px rgba(255,255,255,.16)!important}
.alert.urgent-2>strong{color:var(--a)!important;text-shadow:0 0 9px color-mix(in srgb,var(--a) 55%,transparent)!important}
/* 1 day: the complete plate becomes a fluorescent hazard label. */
.alert.urgent-1{
  border-color:rgba(255,255,255,.94)!important;
  background:linear-gradient(100deg,var(--a) 0%,color-mix(in srgb,var(--a) 55%,var(--b)) 72%,var(--b) 130%)!important;
  box-shadow:0 0 16px color-mix(in srgb,var(--a) 30%,transparent),inset 0 0 0 1px rgba(255,255,255,.18)!important;
}
.alert.urgent-1:after{
  content:"D-1";position:absolute;z-index:1;right:8px;top:3px;font:5px/1 Arial,sans-serif;letter-spacing:.16em;color:rgba(0,0,0,.52);
}
.alert.urgent-1>span,.alert.urgent-1>strong{color:#050609!important;text-shadow:none!important;font-weight:700!important}
/* Due today / overdue are semantic alarms, independent of the decorative theme. */
.alert.urgent-today,.alert.urgent-overdue{
  border-color:#ff6064!important;
  background:linear-gradient(100deg,#ff2c35,#ff5a52)!important;
  box-shadow:0 0 18px rgba(255,44,53,.28)!important;
}
.alert.urgent-today>span,.alert.urgent-today>strong,
.alert.urgent-overdue>span,.alert.urgent-overdue>strong{color:#08090b!important;text-shadow:none!important;font-weight:700!important}
.alert.urgent-today:after,.alert.urgent-overdue:after{
  position:absolute;z-index:1;right:8px;top:3px;font:5px/1 Arial,sans-serif;letter-spacing:.14em;color:rgba(0,0,0,.56)
}
.alert.urgent-today:after{content:"D-DAY"}.alert.urgent-overdue:after{content:"OVERDUE"}
@media(max-width:430px){
  .alert{min-height:46px!important;padding:9px 11px 9px 13px!important}
  .alert.urgent-2:before{width:61%}
}


/* v21 — flat fluorescent hazard labels + remove the meaningless tab rectangle */
/* The old decorative rectangle on the first navigation tab had no semantic role. */
.tabs .btn:first-child:after{content:none!important;display:none!important}

/* Deadline signal color is deliberately high-saturation and independent of pale theme mixes. */
.alert.urgent-4:before,.alert.urgent-3:before{background:var(--signal)!important}
.alert.urgent-4>strong,.alert.urgent-3>strong{color:var(--signal)!important}

/* D-2: a hard-edged fluorescent insert, not a gradient. */
.alert.urgent-2:before{
  width:58%!important;
  background:var(--signal)!important;
  box-shadow:none!important;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)!important;
}
.alert.urgent-2>strong{color:var(--signal)!important;text-shadow:none!important}

/* D-1: solid fluorescent industrial warning label. */
.alert.urgent-1{
  background:var(--signal)!important;
  border-color:#f4f5f6!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--signal) 34%,transparent)!important;
  padding-right:12px!important;
}
.alert.urgent-1:before{
  content:""!important;position:absolute!important;z-index:1!important;left:0!important;top:0!important;bottom:0!important;width:9px!important;
  background:repeating-linear-gradient(135deg,#090a0c 0 4px,transparent 4px 8px)!important;
}
.alert.urgent-1:after{
  content:""!important;position:absolute!important;z-index:1!important;right:8px!important;bottom:5px!important;top:auto!important;
  width:34px!important;height:5px!important;opacity:.76!important;
  background:repeating-linear-gradient(90deg,#08090b 0 2px,transparent 2px 4px,#08090b 4px 5px,transparent 5px 7px)!important;
}
.alert.urgent-1>span{padding-left:4px!important;color:#050609!important;font-weight:700!important;text-shadow:none!important}
.alert.urgent-1>strong{
  position:relative!important;min-width:74px!important;padding:7px 8px 6px!important;
  background:#08090b!important;color:var(--signal)!important;text-align:center!important;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)!important;
  font-weight:700!important;line-height:1.05!important;
}
.alert.urgent-1>strong:before{
  content:"D-1";display:block;margin-bottom:2px;font:5px/1 Arial,sans-serif;letter-spacing:.18em;color:#f2f3f4;
}

/* Today / overdue stay semantic red, but use the same hard industrial treatment. */
.alert.urgent-today,.alert.urgent-overdue{
  background:#ff2932!important;box-shadow:0 0 13px rgba(255,41,50,.30)!important;
}
.alert.urgent-today:before,.alert.urgent-overdue:before{
  content:"";position:absolute;z-index:1;left:0;top:0;bottom:0;width:9px;
  background:repeating-linear-gradient(135deg,#090a0c 0 4px,transparent 4px 8px);
}
.alert.urgent-today:after,.alert.urgent-overdue:after{color:#08090b!important;font-weight:700!important}

@media(max-width:430px){
  .alert.urgent-1>strong{min-width:70px!important;padding:6px 7px 5px!important}
  .alert.urgent-1:after{right:7px!important;bottom:4px!important;width:29px!important}
}

/* v22 — continuous fine chassis trace + label-system icon */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V23.0   /   LOCAL TERMINAL"!important}

/* Keep the heavy structural armor, but never let its route visually break.
   A 1px outer trace follows every silhouette and bridges the intentional deep cuts. */
.job{
  filter:
    drop-shadow(1px 0 0 rgba(244,246,248,.96))
    drop-shadow(-1px 0 0 rgba(244,246,248,.96))
    drop-shadow(0 1px 0 rgba(244,246,248,.96))
    drop-shadow(0 -1px 0 rgba(244,246,248,.96))!important;
}


/* v23 — optional-post home status */
.optional-status{
  display:inline-flex;align-items:center;min-height:20px;padding:1px 8px;
  border:1px solid rgba(244,246,248,.82);color:#f4f6f8;background:#0a0b0e;
  font-family:Arial,sans-serif;font-size:11px;letter-spacing:.12em;line-height:1;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}

/* v24 — genuinely continuous chassis trace + light-base inverse themes */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V24.0   /   LOCAL TERMINAL"!important}

/* The card box is no longer clipped. The heavy armor remains a clipped layer, while a
   separate 1px technical rail runs continuously behind it and bridges every armor cut. */
.job{
  clip-path:none!important;
  background:transparent!important;
  background-image:none!important;
  overflow:visible!important;
  filter:none!important;
  isolation:isolate!important;
}
.job .chassis-trace{
  position:absolute!important;inset:1px!important;z-index:0!important;pointer-events:none!important;
  display:block!important;border:1px solid rgba(244,246,248,.92)!important;background:transparent!important;
}
.job .chassis-shell{
  position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  display:block!important;background:#eef0f3!important;clip-path:var(--shape)!important;
}
.job:before{
  z-index:2!important;inset:4px!important;width:auto!important;height:auto!important;
  background:linear-gradient(100deg,rgba(255,255,255,.035),transparent 36%),repeating-linear-gradient(135deg,#08090c 0 18px,#090a0e 18px 19px)!important;
  clip-path:var(--shape)!important;
}
.job>*:not(.chassis-trace):not(.chassis-shell){position:relative;z-index:4}
.job:after{z-index:5!important}
.job-accent{z-index:6!important}

/* White-base themes: same machine language, but the terminal itself is inverted. */
html.light-theme{color-scheme:light;--struct:#111318;--struct-dim:#4e535b;--text:#101216;--muted:#5f646c;--line:#9da1a8}
html.light-theme,html.light-theme body{background:#f1f2ef!important;color:#101216!important}
html.light-theme body{
  background-image:linear-gradient(rgba(246,247,244,.90),rgba(240,241,238,.94)),repeating-linear-gradient(0deg,transparent 0 31px,rgba(0,0,0,.045) 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(0,0,0,.045) 32px),url('cyber-texture.jpg')!important;
}
html.light-theme body:before{opacity:.22!important;filter:grayscale(1)!important}
html.light-theme body:after{opacity:.12!important;background:repeating-linear-gradient(90deg,transparent 0 63px,rgba(0,0,0,.16) 64px,transparent 65px 128px),repeating-linear-gradient(0deg,transparent 0 63px,rgba(0,0,0,.10) 64px,transparent 65px 128px)!important}
html.light-theme .app:before{color:color-mix(in srgb,var(--a) 70%,#111318)!important;border-left-color:var(--a)!important}
html.light-theme .head{border-color:#25282d!important;background:linear-gradient(110deg,color-mix(in srgb,var(--a) 6%,transparent),rgba(255,255,255,.35) 42%,color-mix(in srgb,var(--b) 6%,transparent))!important}
html.light-theme .head>div:first-child:before{color:#111318!important;text-shadow:2px 0 0 var(--a),-2px 0 0 color-mix(in srgb,var(--b) 60%,#fff)!important}
html.light-theme .head .eyebrow,html.light-theme .head:before{color:#4d5158!important}
html.light-theme .head h1:after{color:#111318!important}
html.light-theme .head .btn,html.light-theme .tabs .btn{background:#f7f7f4!important;color:#111318!important;border-color:#111318!important}
html.light-theme .tabs .btn.primary{color:#fff!important;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--a) 82%,#111318) 0 11px,color-mix(in srgb,var(--b) 68%,#111318) 11px 22px)!important}
html.light-theme .tabs .btn:nth-child(2):after{border-color:#111318!important;color:#111318!important;background:repeating-linear-gradient(90deg,transparent 0 5px,#111318 5px 7px,transparent 7px 11px) left bottom/100% 5px no-repeat!important}
html.light-theme .panel{background:#111318!important}
html.light-theme .panel:after{background:#f7f7f4!important}
html.light-theme .panel-title h2{color:#111318!important}
html.light-theme .panel-title:after,html.light-theme .small{color:#555a62!important}
html.light-theme .alert{background:#f7f7f4!important;color:#111318!important;border-color:#111318!important}
html.light-theme .alert.urgent-1,html.light-theme .alert.urgent-today,html.light-theme .alert.urgent-overdue{color:#08090b!important}
html.light-theme .job .chassis-trace{border-color:#111318!important}
html.light-theme .job .chassis-shell{background:#111318!important}
html.light-theme .job:before{background:linear-gradient(100deg,rgba(0,0,0,.025),transparent 36%),repeating-linear-gradient(135deg,#fafaf7 0 18px,#f3f4f0 18px 19px)!important}
html.light-theme .job:after{color:#454a51!important;background:rgba(247,247,244,.78)!important;border-top-color:rgba(17,19,24,.48)!important}
html.light-theme .thumb{border-color:#111318!important;color:#111318!important;background:repeating-linear-gradient(135deg,#ecece8 0 9px,#f9f9f6 9px 18px)!important}
html.light-theme .product-decal{background:#111318!important;color:#f5f6f4!important}
html.light-theme .product-decal:after{background:repeating-linear-gradient(90deg,#f1f2ef 0 1px,transparent 1px 3px,#f1f2ef 3px 5px,transparent 5px 7px)!important}
html.light-theme .decal-head,html.light-theme .product-decal .brand{color:#c9ccd1!important}
html.light-theme .decal-head i{background:repeating-linear-gradient(90deg,#d7d9dd 0 1px,transparent 1px 3px,#d7d9dd 3px 4px,transparent 4px 6px)!important}
html.light-theme .product-decal .product{color:#fff!important}
html.light-theme .badge{background:#f7f7f4!important;color:#111318!important;border-color:#111318!important}
html.light-theme .badge:after{border-color:#555a62!important}
html.light-theme .meta{color:#111318!important}html.light-theme .meta b{color:#62676f!important}
html.light-theme .optional-status{background:#f7f7f4!important;color:#111318!important;border-color:#111318!important}
html.light-theme .energy-cell{background:repeating-linear-gradient(135deg,#d7d9dd 0 5px,#eceeeb 5px 9px)!important;border-color:#a4a8ae!important}
html.light-theme .energy-cell.charged{background:repeating-linear-gradient(135deg,var(--a) 0 6px,color-mix(in srgb,var(--a) 45%,var(--b)) 6px 11px)!important;border-color:#111318!important}
html.light-theme .energy-count{color:#34383e!important}html.light-theme .energy-count:before{color:#62676f!important}
html.light-theme .modal{background:rgba(235,236,233,.88)!important}
html.light-theme .sheet{background:#f7f7f4!important;color:#111318!important;border-color:#111318!important}
html.light-theme .sheet:before{color:#4f545b!important;border-bottom-color:#9a9ea5!important}
html.light-theme .field input,html.light-theme .field select,html.light-theme .field textarea,html.light-theme .detailrow,html.light-theme .check{background:#fff!important;color:#111318!important;border-color:#7f848c!important}
html.light-theme .check input[type="checkbox"]{background:#fff!important;border-color:#555a62!important}
html.light-theme .check input[type="checkbox"]:checked{background:var(--a)!important}
html.light-theme .btn{color:#111318!important;background:#f7f7f4!important;border-color:#111318!important}
html.light-theme .btn.primary{color:#fff!important;background:#111318!important}

/* v25 — targeted rail bridges + two additional light-base themes */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V25.0   /   LOCAL TERMINAL"!important}

/* V24's full rectangular trace produced stray lines outside the chassis.
   Keep the original armored silhouette and bridge ONLY the recessed top rail
   with a hairline, matching the intended hand-drawn correction. */
.job{
  clip-path:none!important;
  background:transparent!important;
  background-image:none!important;
  overflow:visible!important;
  filter:none!important;
  isolation:isolate!important;
}
.job .chassis-shell{
  position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  display:block!important;background:#eef0f3!important;clip-path:var(--shape)!important;
}
.job:before{
  z-index:2!important;inset:4px!important;width:auto!important;height:auto!important;
  background:linear-gradient(100deg,rgba(255,255,255,.035),transparent 36%),repeating-linear-gradient(135deg,#08090c 0 18px,#090a0e 18px 19px)!important;
  clip-path:var(--shape)!important;
}
.job .chassis-trace{
  position:absolute!important;top:0!important;bottom:auto!important;height:1px!important;z-index:3!important;
  display:block!important;border:0!important;background:#eef0f3!important;pointer-events:none!important;
}
.job.frame-a .chassis-trace{left:81%!important;right:0!important}
.job.frame-b .chassis-trace{left:31%!important;right:13%!important}
.job.frame-c .chassis-trace{left:89%!important;right:0!important}
.job.frame-d .chassis-trace{left:49%!important;right:9%!important}
.job>*:not(.chassis-trace):not(.chassis-shell){position:relative;z-index:4}
.job:after{z-index:5!important}.job-accent{z-index:6!important}

html.light-theme .job .chassis-shell{background:#111318!important}
html.light-theme .job .chassis-trace{background:#111318!important;border:0!important}
html.light-theme .job:before{
  background:linear-gradient(100deg,rgba(0,0,0,.025),transparent 36%),repeating-linear-gradient(135deg,#fafaf7 0 18px,#f3f4f0 18px 19px)!important;
}

/* v26 — continuous chassis, no floating helper rails */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V26.0   /   LOCAL TERMINAL"!important}

/* Remove V24/V25 helper traces completely. They created detached lines between cards. */
.job .chassis-trace{display:none!important}

/* The outer shell remains the machine-part silhouette. The dark/light inner core is now
   a deliberately simpler inset plate, so it can never erase the shell at a notch.
   Result: one continuous structural frame with no floating bridge lines. */
.job .chassis-shell{
  inset:0!important;
  background:#eef0f3!important;
  clip-path:var(--shape)!important;
}
.job:before{
  inset:6px!important;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)!important;
  background:linear-gradient(100deg,rgba(255,255,255,.035),transparent 36%),repeating-linear-gradient(135deg,#08090c 0 18px,#090a0e 18px 19px)!important;
}
html.light-theme .job .chassis-shell{background:#111318!important}
html.light-theme .job:before{
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)!important;
  background:linear-gradient(100deg,rgba(0,0,0,.025),transparent 36%),repeating-linear-gradient(135deg,#fafaf7 0 18px,#f3f4f0 18px 19px)!important;
}

/* v27 — clean white-concrete background for all WHITE BASE themes */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V27.0   /   LOCAL TERMINAL"!important}

/* Keep the light themes genuinely white-based, but give the field the subtle
   mineral variation of clean architectural concrete. No image asset is used. */
html.light-theme,html.light-theme body{
  background:#eef0ee!important;
}
html.light-theme body{
  background-image:
    radial-gradient(ellipse at 14% 9%,rgba(255,255,255,.94) 0 8%,rgba(255,255,255,0) 31%),
    radial-gradient(ellipse at 82% 17%,rgba(110,116,119,.075) 0 7%,rgba(110,116,119,0) 29%),
    radial-gradient(ellipse at 30% 58%,rgba(116,121,123,.055) 0 9%,rgba(116,121,123,0) 34%),
    radial-gradient(ellipse at 86% 76%,rgba(255,255,255,.78) 0 10%,rgba(255,255,255,0) 32%),
    radial-gradient(ellipse at 12% 92%,rgba(105,111,114,.045) 0 8%,rgba(105,111,114,0) 27%),
    linear-gradient(118deg,#f8f9f7 0%,#eceeec 31%,#f3f4f2 55%,#e8ebe9 78%,#f7f8f6 100%)!important;
  background-size:100% 100%!important;
  background-attachment:fixed!important;
}
/* Fine aggregate/grain plus the existing terminal grid. Kept deliberately faint
   so it reads as clean concrete rather than dirt or paper. */
html.light-theme body:before{
  opacity:.34!important;
  filter:none!important;
  background:
    radial-gradient(circle,rgba(34,39,42,.10) 0 .55px,transparent .75px) 0 0/11px 13px,
    radial-gradient(circle,rgba(255,255,255,.90) 0 .65px,transparent .85px) 4px 6px/17px 19px,
    radial-gradient(ellipse at 22% 34%,rgba(85,91,94,.065),transparent 23%),
    radial-gradient(ellipse at 73% 66%,rgba(255,255,255,.55),transparent 27%)!important;
  mix-blend-mode:multiply;
}
html.light-theme body:after{
  opacity:.075!important;
  background:
    repeating-linear-gradient(90deg,transparent 0 63px,rgba(20,24,27,.20) 64px,transparent 65px 128px),
    repeating-linear-gradient(0deg,transparent 0 63px,rgba(20,24,27,.14) 64px,transparent 65px 128px)!important;
}

/* v28 — cold cyber-lab concrete field; UI whites stay optically pure */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V28.0   /   LOCAL TERMINAL"!important}

/* WHITE BASE themes: background only gets the concrete treatment.
   Large-scale, cool mineral clouding; no warm greige and no diagonal strokes. */
html.light-theme,html.light-theme body{background:#edf2f3!important}
html.light-theme body{
  background-image:
    radial-gradient(ellipse 78% 48% at -8% 12%,rgba(255,255,255,.98) 0 24%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 68% 42% at 108% 29%,rgba(181,196,201,.20) 0 18%,rgba(181,196,201,0) 72%),
    radial-gradient(ellipse 92% 56% at 18% 72%,rgba(205,216,219,.22) 0 17%,rgba(205,216,219,0) 74%),
    radial-gradient(ellipse 72% 46% at 94% 92%,rgba(255,255,255,.90) 0 19%,rgba(255,255,255,0) 72%),
    linear-gradient(108deg,#f7fbfb 0%,#e8eff1 38%,#f3f7f7 64%,#e5edef 100%)!important;
  background-size:145% 145%,155% 155%,165% 165%,150% 150%,100% 100%!important;
  background-position:center top,center 8vh,center 30vh,center 55vh,center!important;
  background-attachment:fixed!important;
}
/* Sparse large mineral variation only. No diagonal decorative lines. */
html.light-theme body:before{
  opacity:.30!important;
  filter:none!important;
  mix-blend-mode:multiply!important;
  background:
    radial-gradient(ellipse 34% 18% at 20% 24%,rgba(91,111,118,.075),transparent 74%),
    radial-gradient(ellipse 42% 22% at 77% 52%,rgba(98,118,125,.055),transparent 76%),
    radial-gradient(ellipse 30% 16% at 31% 88%,rgba(80,103,111,.050),transparent 78%)!important;
}
/* Technical grid remains straight and extremely faint. */
html.light-theme body:after{
  opacity:.055!important;
  background:
    repeating-linear-gradient(90deg,transparent 0 95px,rgba(26,45,52,.22) 96px,transparent 97px 192px),
    repeating-linear-gradient(0deg,transparent 0 95px,rgba(26,45,52,.16) 96px,transparent 97px 192px)!important;
}

/* All UI surfaces intended to be white stay true white; concrete never leaks into cards. */
html.light-theme .head{background:rgba(255,255,255,.58)!important}
html.light-theme .head .btn,
html.light-theme .tabs .btn,
html.light-theme .alert,
html.light-theme .badge,
html.light-theme .optional-status,
html.light-theme .sheet,
html.light-theme .field input,
html.light-theme .field select,
html.light-theme .field textarea,
html.light-theme .detailrow,
html.light-theme .check{background:#fff!important}
html.light-theme .job:before{background:#fff!important}
html.light-theme .thumb{background:#fff!important}
html.light-theme .panel:after{background:#fff!important}


/* v29 — medium-scale white concrete + 18-theme release */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V29.0   /   LOCAL TERMINAL"!important}

/* WHITE BASE field only: recognizable clean concrete at a normal viewing distance.
   UI surfaces remain pure white. No cracks, grime, warm greige, or diagonal decoration. */
html.light-theme,html.light-theme body{background:#edf1f2!important}
html.light-theme body{
  background-image:
    radial-gradient(ellipse 46% 30% at 10% 8%,rgba(255,255,255,.98) 0 25%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 38% 28% at 88% 20%,rgba(160,174,180,.20) 0 18%,rgba(160,174,180,0) 72%),
    radial-gradient(ellipse 52% 34% at 26% 48%,rgba(190,201,205,.24) 0 20%,rgba(190,201,205,0) 74%),
    radial-gradient(ellipse 42% 30% at 82% 62%,rgba(255,255,255,.92) 0 22%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 48% 32% at 22% 86%,rgba(166,181,186,.18) 0 18%,rgba(166,181,186,0) 74%),
    linear-gradient(180deg,#f8faf9 0%,#e9eef0 42%,#f4f6f5 68%,#e8edef 100%)!important;
  background-size:100% 760px,100% 720px,100% 820px,100% 760px,100% 780px,100% 100%!important;
  background-position:center 0,center 130px,center 470px,center 760px,center 1080px,center!important;
  background-repeat:repeat-y!important;
  background-attachment:scroll!important;
}
/* Fine mineral pores: visible enough to read as concrete, still clean and chemical/lab-like. */
html.light-theme body:before{
  opacity:.42!important;
  filter:none!important;
  mix-blend-mode:multiply!important;
  background:
    radial-gradient(circle,rgba(54,69,75,.13) 0 .7px,transparent .9px) 0 0/19px 23px,
    radial-gradient(circle,rgba(255,255,255,.92) 0 .8px,transparent 1px) 8px 11px/29px 31px,
    radial-gradient(ellipse 26% 15% at 18% 31%,rgba(91,108,114,.10),transparent 76%),
    radial-gradient(ellipse 31% 17% at 76% 73%,rgba(98,116,122,.08),transparent 78%)!important;
}
/* Straight terminal grid only — no diagonal lines. */
html.light-theme body:after{
  opacity:.065!important;
  background:
    repeating-linear-gradient(90deg,transparent 0 95px,rgba(24,41,47,.22) 96px,transparent 97px 192px),
    repeating-linear-gradient(0deg,transparent 0 95px,rgba(24,41,47,.16) 96px,transparent 97px 192px)!important;
}
/* Keep all white interface plates optically pure. */
html.light-theme .head{background:rgba(255,255,255,.72)!important}
html.light-theme .head .btn,
html.light-theme .tabs .btn,
html.light-theme .alert,
html.light-theme .badge,
html.light-theme .optional-status,
html.light-theme .sheet,
html.light-theme .field input,
html.light-theme .field select,
html.light-theme .field textarea,
html.light-theme .detailrow,
html.light-theme .check{background:#fff!important}
html.light-theme .job:before,
html.light-theme .thumb,
html.light-theme .panel:after{background:#fff!important}

/* v30 — visible cool-white concrete field + remove residual warm/greige light surfaces */
.app:before{content:"CPM // PERSONAL SYSTEM   /   V30.0   /   LOCAL TERMINAL"!important}
html.light-theme,html.light-theme body{background:#edf3f5!important}
html.light-theme body{background-color:#edf3f5!important;background-image:url('concrete-light.png')!important;background-size:560px auto!important;background-position:center top!important;background-repeat:repeat-y!important;background-attachment:scroll!important}
html.light-theme body:before{opacity:.085!important;filter:none!important;mix-blend-mode:multiply!important;background:repeating-linear-gradient(90deg,transparent 0 95px,rgba(15,45,55,.22) 96px,transparent 97px 192px),repeating-linear-gradient(0deg,transparent 0 95px,rgba(15,45,55,.15) 96px,transparent 97px 192px)!important}
html.light-theme body:after{display:none!important}
html.light-theme .head,html.light-theme .head .btn,html.light-theme .tabs .btn,html.light-theme .btn,html.light-theme .themebtn,html.light-theme .alert,html.light-theme .badge,html.light-theme .optional-status,html.light-theme .sheet,html.light-theme .field input,html.light-theme .field select,html.light-theme .field textarea,html.light-theme .detailrow,html.light-theme .check,html.light-theme .thumb,html.light-theme .panel:after,html.light-theme .job:before{background:#fff!important}
html.light-theme .modal{background:rgba(232,239,242,.94)!important;backdrop-filter:blur(7px)!important}
html.light-theme .sheet{box-shadow:0 18px 48px rgba(25,38,44,.14)!important}
html.light-theme .sheet:before{border-bottom-color:#aab3b8!important}
html.light-theme .themegrid .btn{background:#fff!important}
html.light-theme .check input[type="checkbox"]{background:#fff!important}
html.light-theme .energy-cell{background:repeating-linear-gradient(135deg,#e8edf0 0 5px,#f7f9fa 5px 9px)!important;border-color:#a7b0b5!important}
html.light-theme .job:after{background:rgba(255,255,255,.82)!important}