body {
            font-family: Arial, sans-serif;
            background: #f7f7f7;background:light-dark(#f7f7f7,#282421);
            text-align: center;
            padding-top: 100px;
        }

        
        
        #brandLogo { margin: 0 auto 26px; min-height: 65px; }
        #brandLogo img { display: block; width: 150px; height: auto; margin: 0 auto; }
        @media print { #brandLogo { display: none !important; } }

        
        #loginInput,
        #passwordInput {
            width: 224px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #4CAF50;
            border-radius: 6px;
            background-color: #f8f8f8;background-color:light-dark(#f8f8f8,#272320);
            margin-top: 15px;
            box-sizing: border-box;
            
        }

        #passwordInput {
            margin-bottom: 15px;
        }

        button {
            width: 200px;
            padding: 12px;
            font-size: 16px;
            background: #4CAF50;
            color: white;
            border: 2px solid #2d662d;border:2px solid light-dark(#2d662d,#69a367);
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        button:hover {
            background: #45a049;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #loginError {
            color: red;color:light-dark(red,#db7d6f);
            display: none;
            margin-top: 10px;
        }

        
        .auth-links {
            margin-top: 14px;
            display: flex;
            gap: 18px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .auth-links a {
            color: #1976D2;color:light-dark(#1976D2,#6ba6ec);
            font-size: 14px;
            text-decoration: none;
            cursor: pointer;
            border-bottom: 1px dashed #9cc4ea;
        }

        .auth-links a:hover { color: #0d5aa7;color:light-dark(#0d5aa7,#78b2f9); }

        .fld { margin-bottom: 12px; }

        .fld label {
            display: block;
            font-weight: bold;
            font-size: 13px;
            margin-bottom: 4px;
        }

        .fld input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #bbb;border:1px solid light-dark(#bbb,#615c58);
            border-radius: 6px;
            font-size: 14px;
            box-sizing: border-box;
            font-family: inherit;
            margin: 0;
        }

        .fld input:read-only { background: #f2f2f2;background:light-dark(#f2f2f2,#2c2824); color: #666;color:light-dark(#666,#aea8a4); }

        .modal-msg {
            display: none;
            font-size: 14px;
            margin: 0 0 12px;
            padding: 9px 11px;
            border-radius: 6px;
        }

        .modal-msg.show { display: block; }
        .modal-msg.err { background: #fdecea;background:light-dark(#fdecea,#2d2926); color: #a32019;color:light-dark(#a32019,#f19183); }
        .modal-msg.ok { background: #e8f5e9;background:light-dark(#e8f5e9,#252c25); color: #1e6b26;color:light-dark(#1e6b26,#7dc37f); }

        .modal-hint {
            margin: 0 0 14px;
            font-size: 13px;
            color: #555;color:light-dark(#555,#b6b0ac);
        }

        
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 9998;
            align-items: flex-start;
            justify-content: center;
            overflow: auto;
            padding: 30px 12px;
        }

        .modal-overlay.show { display: flex; }

        .modal-card {
            background: #fff;background:light-dark(#fff,#221e1b);
            border-radius: 8px;
            padding: 22px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
            text-align: left;
        }

        .modal-card h3 {
            margin: 0 0 14px;
            font-size: 17px;
        }

        .modal-card h3 i { color: #17a2b8;color:light-dark(#17a2b8,#25a9bf); margin-right: 8px; }

        .co-item {
            display: block;
            width: 100%;
            text-align: left;
            background: #f8f8f8;background:light-dark(#f8f8f8,#272320);
            color: #222;color:light-dark(#222,#cfc9c4);
            border: 1px solid #ddd;border:1px solid light-dark(#ddd,#403b37);
            border-radius: 6px;
            padding: 12px 14px;
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
        }

        .co-item:hover { background: #eef7ee;background:light-dark(#eef7ee,#2b2623); border-color: #4CAF50; }

        .co-item .co-pos {
            display: block;
            font-weight: normal;
            font-size: 13px;
            color: #666;color:light-dark(#666,#aea8a4);
            margin-top: 3px;
        }

        .modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 6px;
        }

        .modal-actions button {
            width: auto;
            padding: 8px 14px;
            font-size: 14px;
            background: #6c757d;
            border-color: #56606a;border-color:light-dark(#56606a,#525c66);
        }

        .modal-actions button:hover { background: #5c636a; }

        .modal-actions button.b-save {
            background: #4CAF50;
            border-color: #2d662d;border-color:light-dark(#2d662d,#69a367);
        }

        .modal-actions button.b-save:hover { background: #45a049; }

        .modal-actions button:disabled { opacity: .55; cursor: default; }

        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.85);background:light-dark(rgba(255, 255, 255, 0.85),rgba(34,30,27,0.85));
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            color: #555;color:light-dark(#555,#b6b0ac);
            font-size: 18px;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .loading-overlay.visible {
            opacity: 1;
            visibility: visible;
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid #f3f3f3;border:4px solid light-dark(#f3f3f3,#2c2824);
            border-top: 4px solid #007BFF;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    


@media screen{
  :root{ --ground:#F3EFE9; --surface:#FFFFFF; --ink:#1D1A17; --muted:#6E655C;
    --rule:#E2DAD0; --accent:#B5502F; --soft:#F7E9E2; --danger:#A33B28; }
  html body{ background:var(--ground); }
}



@media screen{
  :root{ --ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }
  html body:not(#_){ padding-top:9vh; font-family:var(--ui-font); color:var(--ink); }
  html body #brandLogo:not(#_){ margin:0 auto 22px; }
  html body .auth-card:not(#_){ box-sizing:border-box; width:calc(100% - 30px); max-width:380px; margin:0 auto 40px;
    padding:30px 30px 26px; background:var(--surface); text-align:left; }
  html body .auth-card h2:not(#_){ margin:0 0 20px; color:var(--ink); font-size:21px; font-weight:700; letter-spacing:-.01em; text-align:center; }
  html body .auth-card br:not(#_){ display:none; }
  html body .auth-card :is(#loginInput, #passwordInput):not(#_){ display:block; width:100%; height:44px; margin:0 0 12px; padding:0 12px;
    border:1px solid var(--rule); border-radius:0; background:var(--surface); color:var(--ink); font-size:15px; font-family:inherit; }
  html body .auth-card :is(#loginInput, #passwordInput):not(#_):focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
  html body .auth-card #passwordInput:not(#_){ margin-bottom:16px; }
  html body .auth-card > button:not(#_){ display:block; width:100%; height:46px; margin:0; padding:0 16px; border:0; border-radius:0;
    background:var(--accent-fill, var(--accent)); color:#fff; font-size:15px; font-weight:600; font-family:inherit; box-shadow:none; transform:none; }
  html body .auth-card > button:not(#_):hover{ background:var(--accent-fill, var(--accent)); filter:brightness(1.08); transform:none; box-shadow:none; }
  html body .auth-card > button:not(#_):active{ filter:brightness(.95); }
  html body #loginError:not(#_){ margin:12px 0 0; color:var(--danger); font-size:14px; text-align:center; }
  html body .auth-links:not(#_){ margin-top:18px; gap:8px 20px; }
  html body .auth-links a:not(#_){ display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-size:13.5px; font-weight:600;
    border-bottom:0; }
  html body .auth-links a:not(#_) i{ color:var(--muted); }
  html body .auth-links a:not(#_):hover{ color:var(--signal, #7A3B22); text-decoration:underline; }
  html body .auth-links a:not(#_):hover i{ color:inherit; }

  
  html body .modal-overlay:not(#_){ background:rgba(29,26,23,.45); }
  html body .modal-card:not(#_){ box-sizing:border-box; width:min(92vw, 440px); max-width:none; padding:20px 22px; border-radius:0;
    box-shadow:0 16px 40px rgba(29,26,23,.30); color:var(--ink); font-family:var(--ui-font); }
  html body .modal-card h3:not(#_){ margin:0 0 12px; color:var(--ink); font-size:17px; font-weight:700; letter-spacing:-.01em; }
  html body .modal-card h3 i:not(#_){ color:var(--accent); }
  html body .modal-card :is(.modal-hint, p[style*="color:#555"]):not(#_){ color:var(--muted) !important; font-size:13.5px; line-height:1.5; }
  html body .modal-card .fld label:not(#_){ margin:0 0 5px; color:var(--muted); font-size:12.5px; font-weight:600; }
  html body .modal-card .fld input:not(#_){ height:42px; padding:0 11px; border:1px solid var(--rule); border-radius:0; background:var(--surface);
    color:var(--ink); font-size:14.5px; }
  html body .modal-card .fld input:not(#_):focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
  html body .modal-card .fld input:not(#_):read-only{ background:var(--zebra, #FBF8F4); color:var(--muted); }
  html body .modal-msg:not(#_){ border-radius:0; font-size:13.5px; }
  html body .modal-msg.err:not(#_){ background:#F9E7E3;background:light-dark(#F9E7E3,#352b29); color:var(--danger); }
  html body .modal-msg.ok:not(#_){ background:#E4EFE7;background:light-dark(#E4EFE7,#312d29); color:#1E6B44;color:light-dark(#1E6B44,#78c195); }
  html body .modal-actions:not(#_){ gap:9px; margin-top:18px; flex-wrap:wrap; }
  
  html body .modal-actions button:not(#_){ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:auto;
    padding:12px 18px; border:0; border-radius:0; background:var(--surface); color:var(--accent); box-shadow:inset 0 0 0 1px var(--rule);
    font-size:14.5px; font-weight:600; font-family:var(--ui-font); line-height:1; transform:none; }
  html body .modal-actions button:not(#_):hover:not(:disabled){ background:var(--accent-fill, var(--accent)); color:#fff; box-shadow:none; transform:none; }
  html body .modal-actions button.b-save:not(#_){ background:var(--accent-fill, var(--accent)); color:#fff; box-shadow:none; }
  html body .modal-actions button.b-save:not(#_):hover:not(:disabled){ filter:brightness(1.08); }
  
  html body .co-item:not(#_){ width:100%; margin:0 0 8px; padding:12px 14px; border:0; border-radius:0; background:var(--surface);
    box-shadow:inset 0 0 0 1px var(--rule); color:var(--ink); font-size:15px; font-weight:600; font-family:var(--ui-font); transform:none; }
  html body .co-item:not(#_):hover{ background:var(--soft); box-shadow:inset 0 0 0 1px var(--accent); transform:none; }
  html body .co-item i:not(#_){ color:var(--accent) !important; }   
  html body .co-item .co-pos:not(#_){ color:var(--muted); font-weight:400; }
  html body .loading-overlay:not(#_){ background:rgba(var(--ground-rgb, 243,239,233),.85); color:var(--ink); font-size:16px; font-weight:600; font-family:var(--ui-font); }
  html body .loading-overlay .fa-spinner:not(#_){ color:var(--accent); }
  @media (max-width:560px){
    html body:not(#_){ padding-top:5vh; }
    html body .auth-card:not(#_){ width:calc(100% - 24px); padding:24px 18px 22px; }
    html body .modal-overlay:not(#_){ align-items:flex-end; padding:0; }
    html body .modal-card:not(#_){ width:100%; max-height:92vh; overflow:auto; padding:16px 14px 18px; }
    html body .modal-actions button:not(#_){ flex:1 1 46%; }
  }
}

  
  html body .auth-card .pl-in:not(#_){ display:block; width:100%; height:44px; margin:0 0 12px; padding:0 12px; box-sizing:border-box;
    border:1px solid var(--rule, #E2DAD0); border-radius:0; background:var(--surface, #fff); color:var(--ink, #1D1A17); font-size:15px; font-family:inherit; }
  html body .auth-card .pl-in:not(#_):focus{ outline:2px solid var(--accent, #B5502F); outline-offset:-1px; border-color:var(--accent, #B5502F); }
  .pl-sub{ margin:-12px 0 18px; text-align:center; color:var(--muted, #6E655C); font-size:13px; line-height:1.45; }
  .pl-msg{ display:none; margin:0 0 14px; padding:9px 12px; font-size:13.5px; line-height:1.45; }
  .pl-msg.show{ display:block; }
  .pl-msg.ok{ background:#E4EFE7;background:light-dark(#E4EFE7,#312d29); color:#1E6B44;color:light-dark(#1E6B44,#78c195); }
  .pl-msg.err{ background:#F6DEDE;background:light-dark(#F6DEDE,#3d2f30); color:#8A1F2B;color:light-dark(#8A1F2B,#f89595); }
@media screen{
  
  html body .auth-card .pwd-wrap:not(#_){ position:relative; }
  html body .auth-card .pwd-wrap :is(#passwordInput, .pl-in):not(#_){ padding-right:46px; }
  html body .auth-card .pwd-eye:not(#_){ position:absolute; top:0; right:0; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:0;
    background:transparent; color:var(--muted, #6E655C); font-size:16px; line-height:44px; text-align:center; cursor:pointer; box-shadow:none; transform:none; filter:none; }
  html body .auth-card .pwd-eye:not(#_):hover{ color:var(--accent, #B5502F); background:transparent; }
  html body .auth-card .pwd-eye:not(#_):focus-visible{ outline:2px solid var(--accent, #B5502F); outline-offset:-2px; }
}