/* Build 96: shared design tokens; consumers opt in through page classes. */
:root, :root[data-theme="light"] {
  --dr-bg: #f4f8f1;
  --entry-bg: #f3f6f3;
  --entry-line: #d7e2da;
  --entry-photo-ink: #ffffff;
  --entry-photo-muted: #e2efe5;
  --entry-overlay: #09271de8;
  --entry-overlay-mid: #09271d99;
  --entry-overlay-clear: #09271d14;
  --entry-photo-edge: #ffffff42;
  --entry-photo-glass: #14392dd9;
  --dr-card: #ffffff;
  --dr-soft: #edf4e8;
  --dr-ink: #172f27;
  --dr-muted: #4d655b;
  --dr-line: #b9c9bf;
  --dr-brand: #18633c;
  --dr-brand-ink: #ffffff;
  --dr-on: #145c3c;
  --dr-on-bg: #dff5df;
  --dr-off: #4b5b53;
  --dr-off-bg: #e9eeeb;
  --dr-warn: #7b4215;
  --dr-warn-bg: #fff0d8;
  --dr-danger: #a12632;
  --dr-danger-bg: #fff0f1;
  --dr-water: #246886;
  --dr-water-bg: #e1f0f5;
  --dr-focus: #955400;
  --dr-shade: #19382a12;
  --dr-clear: transparent;
  --dr-hero: #ddf3d6;
  --dr-sun: #ffda76;
  --dr-warm-bg: #fff1cf;
  --dr-warm-ink: #805018;
  --dr-grape-bg: #eee8fb;
  --dr-grape-ink: #60418d;
}
:root[data-theme="dark"] {
  --dr-bg: #101b17;
  --entry-bg: #111c18;
  --entry-line: #3d5447;
  --entry-photo-ink: #ffffff;
  --entry-photo-muted: #e2efe5;
  --entry-overlay: #061c16f2;
  --entry-overlay-mid: #061c16ad;
  --entry-overlay-clear: #061c1629;
  --entry-photo-edge: #ffffff42;
  --entry-photo-glass: #102c23e8;
  --dr-card: #1b2b23;
  --dr-soft: #26392f;
  --dr-ink: #eff7f2;
  --dr-muted: #bed0c4;
  --dr-line: #587063;
  --dr-brand: #a2e4bd;
  --dr-brand-ink: #103522;
  --dr-on: #afe6c1;
  --dr-on-bg: #244b36;
  --dr-off: #c5d1c9;
  --dr-off-bg: #304037;
  --dr-warn: #ffd398;
  --dr-warn-bg: #4a351e;
  --dr-danger: #ffb5bd;
  --dr-danger-bg: #4c252b;
  --dr-water: #acdced;
  --dr-water-bg: #203f4c;
  --dr-focus: #ffd398;
  --dr-shade: #00000026;
  --dr-clear: transparent;
  --dr-hero: #1c3b2a;
  --dr-sun: #735b22;
  --dr-warm-bg: #44361f;
  --dr-warm-ink: #f8d294;
  --dr-grape-bg: #362d47;
  --dr-grape-ink: #d8c4ff;
}

/* Shared presentation for the five application entry pages.
   Keep device state colors, permission visibility and control layouts intact. */
@font-face{font-family:'Farm Thai';src:url('assets/NotoSansThai.ttf') format('truetype');font-weight:100 900;font-display:swap}
.platform-ui{
  --ui-bg:#f4f7f8;--ui-card:#fff;--ui-soft:#f5f8f6;--ui-line:#e0e8e4;
  --ui-ink:#203b32;--ui-muted:#677e73;--ui-brand:#174e3b;--ui-focus:#25865e;
  --ui-shadow:0 4px 20px #173d2907;
  font-family:'Farm Thai','Segoe UI',sans-serif;
}
[data-theme='dark'] .platform-ui{
  --ui-bg:#101b17;--ui-card:#192820;--ui-soft:#203329;--ui-line:#35493e;
  --ui-ink:#edf5ef;--ui-muted:#a4b9ac;--ui-focus:#8bd6ae;--ui-shadow:0 4px 20px #00000016;
}
.platform-ui :where(button,input,select,textarea){font-family:inherit}
.platform-ui :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
.platform-ui :where(input,select,textarea){accent-color:var(--ui-focus)}
.platform-ui :where(h1,h2,h3){text-wrap:balance}
.platform-ui :where(.modal,.modal-content){border-radius:20px}
.platform-section-title p{font-size:12px;font-weight:400;color:var(--ui-muted);margin-top:5px;line-height:1.8}
.platform-banner{position:relative;isolation:isolate;overflow:hidden;background:var(--ui-brand);color:#fff;border-radius:20px;padding:28px 30px;margin:20px 0}
.platform-banner::after{content:'';position:absolute;right:-80px;top:-150px;width:330px;height:330px;border:1px solid #ffffff15;border-radius:50%;box-shadow:0 0 0 30px #ffffff05,0 0 0 60px #ffffff05;z-index:-1;pointer-events:none}
.platform-banner>span{font-size:10px;letter-spacing:.15em;color:#c6e8ab;font-weight:600}
.platform-banner :is(h1,h2){color:#fff;font-size:26px;line-height:1.5;font-weight:650;margin:10px 0 6px;letter-spacing:-.4px}
.platform-banner p{color:#d0e0d7;font-size:13px;line-height:1.8;margin:0}

/* Device directory: a calm header and a clear, evenly spaced card grid. */
.devices-ui,.soil-ui{
  --bg:var(--ui-bg);--bg2:var(--ui-soft);--card:var(--ui-card);--soft:var(--ui-soft);
  --line:var(--ui-line);--line2:var(--ui-line);--ink:var(--ui-ink);--ink2:var(--ui-muted);--mute:var(--ui-muted);
  background:var(--ui-bg);color:var(--ui-ink);
}
.devices-ui{--acc:var(--ui-focus);--sh1:var(--ui-shadow)}
.devices-ui .wrap{max-width:1240px;padding-inline:28px}
.devices-ui>header{background:#174e3b;padding-top:34px;padding-bottom:76px;box-shadow:none}
.devices-ui .hi{font-size:11px;letter-spacing:.08em;color:#c6e8ab}
.devices-ui header h1{font-weight:650;font-size:28px;line-height:1.6}
.devices-ui .av{border-radius:18px;box-shadow:none;background:#ffffff16}
.devices-ui .ib{width:44px;height:44px;border-radius:12px}
.devices-ui .stats{gap:16px;background:transparent;box-shadow:none;border:0;overflow:visible}
.devices-ui .st{border:1px solid var(--ui-line);border-radius:16px;padding:24px 20px;box-shadow:var(--ui-shadow);text-align:left}
.devices-ui .st .n{font-size:34px;font-weight:650;line-height:1.25}
.devices-ui .st .l{font-size:12px;font-weight:500;margin-top:8px}
.devices-ui .sub{gap:14px;margin:30px 0 20px;align-items:center}
.devices-ui .sub h2{font-size:21px;font-weight:650}
.devices-ui .addbtn{background:#174e3b;min-height:44px;border-radius:11px;box-shadow:none;font-weight:600}
.devices-ui .grid{gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.devices-ui .dev{padding:24px;border-radius:18px;box-shadow:var(--ui-shadow)}
.devices-ui .dev{display:flex;flex-direction:column}
.devices-ui .dev.ras{--c:#168393;--cbg:#e6f3f5}
[data-theme='dark'] .devices-ui .dev.ras{--c:#83cfda;--cbg:#183b40}
.devices-ui .dev::before{top:22px;bottom:22px;width:3px;border-radius:3px}
.devices-ui .dname h3{font-size:16px;font-weight:650}
.devices-ui .dhead{flex-wrap:wrap;gap:12px}
.devices-ui .dname{flex:1;min-width:110px}
.devices-ui .dfoot{margin-top:20px;padding-top:16px;flex-wrap:wrap}
.devices-ui .dev .dfoot{margin-top:auto}
.devices-ui .dev .dhead{margin-bottom:12px}
.devices-ui .go{min-height:36px;font-weight:600}
.devices-ui .addcard{min-height:190px;border-radius:18px}
.devices-ui .note{margin-top:24px;font-size:12px;line-height:1.8}
.devices-ui .mact button.go2{background:#174e3b}
.devices-ui .modal input{min-height:44px}

/* Soil meter: retain channel-specific colors and stale reading treatment. */
.soil-ui>header{background:#174e3b;padding:22px 0;box-shadow:none}
.soil-ui header h1{font-weight:650;line-height:1.5}
.soil-ui header h1 small{margin-top:4px;line-height:1.6}
.soil-ui .chips a{min-height:40px;display:inline-flex;align-items:center;border-radius:10px;font-size:12px}
.soil-ui .wrap{max-width:1440px;padding-inline:24px}
.soil-ui .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:18px;margin-top:18px}
.soil-ui .card{border-radius:18px;padding:22px;box-shadow:var(--ui-shadow)}
.soil-ui .card h2{font-size:14px;font-weight:650;margin-bottom:20px;line-height:1.7;flex-wrap:wrap}
.soil-ui .v{padding:16px 12px;border:1px solid var(--ui-line);border-radius:12px}
.soil-ui .v .n{font-size:28px;font-weight:650;line-height:1.3}
.soil-ui .v .l{font-size:11px;line-height:1.7;font-weight:500}
.soil-ui #t0>.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.soil-ui #t0 .core .vals{grid-template-columns:repeat(4,minmax(0,1fr))}
.soil-ui .toolbar{border-radius:14px;padding:16px;gap:12px}
.soil-ui .toolbar select{min-width:0}
.soil-ui :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px;border-radius:10px}
.soil-ui :is(.act,nav button){min-height:44px;border-radius:10px}
.soil-ui nav button.on{background:#174e3b;border-color:#174e3b;box-shadow:none}
.soil-ui .rail-brand{padding:8px 6px 24px;border-bottom:1px solid var(--ui-line);margin-bottom:16px}
.soil-ui .rail-mark{background:#174e3b;box-shadow:none;border-radius:12px}
.soil-ui .rail-item{min-height:46px;padding:12px;font-size:12px;font-weight:550}
.soil-ui .rail-nav{gap:6px}
.soil-ui .rail-nav .rail-item.on{background:#174e3b;border-color:#174e3b;color:#fff;box-shadow:0 4px 12px #174e3b18}
.soil-ui .rail-who b{font-size:13px}
.soil-ui .rail-head{margin-top:20px;font-weight:500;font-size:11px}

/* Administration: spacious filters, readable tables, neutral surfaces. */
.admin-ui{
  --bg:var(--ui-bg);--card:var(--ui-card);--soft:var(--ui-soft);--border:var(--ui-line);
  --text:var(--ui-ink);--text2:var(--ui-muted);--muted:var(--ui-muted);--primary:var(--ui-focus);
  background:var(--ui-bg);color:var(--ui-ink);
}
.admin-ui .admin-wrap{max-width:1320px}
.admin-ui header{background:#174e3b;padding:22px 24px;border-radius:18px;box-shadow:none}
.admin-ui header .logo{font-size:18px;font-weight:650}
.admin-ui .icon-only{min-width:44px;min-height:44px}
.admin-ui .tabs{gap:8px;padding:6px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-card)}
.admin-ui .tab-button{border:0;background:transparent;border-radius:9px;min-height:44px;box-shadow:none;font-size:13px}
.admin-ui .tab-button.active{background:#174e3b;color:#fff;box-shadow:none}
.admin-ui .card{border-radius:18px;padding:24px;box-shadow:var(--ui-shadow)}
.admin-ui .card h3{font-size:16px;font-weight:650}
.admin-ui .admin-stat{border-radius:12px;box-shadow:none;padding:20px 16px}
.admin-ui .admin-stat{background:var(--ui-soft)}
.admin-ui .btn-primary{background:#174e3b;color:#fff;box-shadow:none;border-radius:10px}
.admin-ui .admin-stat .value{font-size:30px;font-weight:650}
.admin-ui .admin-live-card{border-radius:12px;padding:16px;box-shadow:none}
.admin-ui :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px;border-radius:10px;font-size:14px}
.admin-ui .admin-table{font-size:13px}
.admin-ui .admin-table :is(td,th){padding:14px 12px;line-height:1.7}
.admin-ui .admin-table th{background:var(--ui-soft);font-size:11px;font-weight:650}
.admin-ui .admin-table tbody tr:hover{background:var(--ui-soft)}
.admin-ui .admin-sub{line-height:1.7}
.admin-ui .admin-gate{max-width:640px;margin:36px auto;padding:36px 24px}

/* RAS: keep the SCADA stage and its independent operational color scheme. */
.ras-ui{
  --font-body:'Farm Thai','Segoe UI',sans-serif;--font-head:'Farm Thai','Segoe UI',sans-serif;
  --k-navy:#174e3b;--k-navy-2:#11392d;--k-blue:#267656;--k-blue-l:#e8f3ec;
  --k-bg:#f4f7f8;--k-line:#e0e8e4;--k-muted:#677e73;--k-text:#203b32;
}
.ras-ui .sidebar{background:linear-gradient(180deg,#174e3b,#11392d)}
.ras-ui .side-logo{height:76px;padding:0 20px}
.ras-ui .side-logo b{font-size:16px}
.ras-ui .side-menu{padding:16px 10px}
.ras-ui .side-menu .tab-button{margin:3px 0;border-radius:10px;min-height:46px;font-size:12px;line-height:1.6}
.ras-ui .side-menu .tab-button.active{background:#ffffff19;border-color:#ffffff26;box-shadow:inset 3px 0 #c6e8ab}
.ras-ui .side-foot{padding:18px 22px;font-size:11px;line-height:1.8}
.ras-ui .app-head{box-shadow:none;border-bottom:1px solid var(--k-line)}
.ras-ui .app{grid-template-rows:auto minmax(0,1fr) var(--k-foot)}
.ras-ui .app-head{min-height:64px;flex-wrap:wrap;padding:10px 16px;gap:8px}
.ras-ui .app-head .title{flex:1 1 260px}
.ras-ui .app-head .hitem{max-width:100%;box-sizing:border-box}
.ras-ui #ras-dev{max-width:160px;min-width:70px}
.ras-ui .k-burger{min-width:44px;min-height:44px}
.ras-ui .app-head h1{font-size:16px;line-height:1.5;font-weight:650}
.ras-ui .app-head h1 small{font-size:10px}
.ras-ui .app-main{background:var(--k-bg);padding:22px}
.ras-ui :is(.card,.sc-card,.io-card){border-radius:16px;box-shadow:0 3px 16px #173d2907}
.ras-ui :is(.card-title,.sc-title h3,.io-card h3){font-weight:650}
.ras-ui .operations-hero{border-radius:20px;box-shadow:none}
.ras-ui .app-foot{font-size:11px}

/* Shared polish for Smart Farm forms and secondary tabs. */
.smartfarm-ui .tab-content:not(#dashboard-tab) .card{margin-bottom:20px}
.smartfarm-ui .tab-content :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px;border-radius:10px}
.smartfarm-ui .modal-content{max-height:90dvh;overflow-y:auto}
@media(min-width:1100px){.soil-ui .page{gap:28px;grid-template-columns:225px minmax(0,1fr)}.soil-ui .rail{border-radius:18px;background:var(--ui-card);box-shadow:none;padding:20px 14px}}
@media(max-width:760px){
  .platform-banner{padding:22px;margin:16px 0;border-radius:16px}
  .platform-banner :is(h1,h2){font-size:22px}
  .platform-banner p{font-size:12px}
  .devices-ui .wrap,.soil-ui .wrap{padding-inline:16px}
  .devices-ui>header{padding-top:24px;padding-bottom:65px}
  .devices-ui header h1{font-size:23px}
  .devices-ui .stats{gap:8px}
  .devices-ui .st{padding:18px 12px;border-radius:12px}
  .devices-ui .st .n{font-size:27px}
  .devices-ui .st .l{font-size:10px}
  .devices-ui .sub{flex-wrap:wrap}
  .devices-ui .platform-section-title{width:100%}
  .devices-ui .dev{padding:20px}
  .devices-ui .hrow{flex-wrap:wrap}
  .devices-ui .hact{margin-left:auto}
  .soil-ui .card{padding:18px}
  .soil-ui #t0>.grid{grid-template-columns:minmax(0,1fr)}
  .soil-ui #t0 .core .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soil-ui .chips{margin-left:0}
  .soil-ui #tabbar{gap:6px}
  .soil-ui #tabbar button{flex:1 1 auto;font-size:12px;padding:10px 12px}
  .soil-ui .sw{min-width:0;flex-basis:100%}
  .admin-ui{padding:14px}
  .admin-ui header{padding:20px}
  .admin-ui .card{padding:18px}
  .admin-ui .tabs{flex-direction:row;flex-wrap:wrap}
  .admin-ui .tab-button{flex:1 1 calc(50% - 8px);padding:10px}
  .admin-ui .admin-head-right{gap:8px}
  .ras-ui .app-main{padding:12px}
  .ras-ui .app-head h1{font-size:14px}
  .ras-ui .app-head{padding:10px;gap:6px}
  .ras-ui .app-head .title{flex:1 1 calc(100% - 64px)}
  .ras-ui .app-head .hitem{padding-inline:6px;border:0;height:auto;min-height:36px}
  .ras-ui .app-head .hitem .val{font-size:11px}
  .ras-ui .app-head .btn-ntp-head{min-height:36px}
  .ras-ui .app-foot{overflow-x:auto;scrollbar-width:thin}
  .platform-ui :where(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
}
@media(prefers-reduced-motion:reduce){.platform-ui *,.platform-ui *::before,.platform-ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}