*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{
--bg:#FFF7FB;
--primary:#E85D9E;
--primary-dark:#C9367D;
--soft-pink:#FCE4EF;
--white:#FFFFFF;
--text:#342A32;
--text-secondary:#8A7D86;
--border:#F0D4E0;
--danger:#DC3545;
--warning:#FFB84D;
--success:#28A745;
--radius:12px;
--radius-sm:8px;
--shadow:0 2px 8px rgba(232,93,158,.08);
--shadow-lg:0 8px 24px rgba(232,93,158,.12);
--transition:all .2s ease;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1,h2,h3,h4{color:var(--text);line-height:1.3;font-weight:600}
h1{font-size:1.75rem}
h2{font-size:1.5rem}
h3{font-size:1.25rem}
h4{font-size:1.1rem}
p{color:var(--text-secondary)}
a{color:var(--primary);text-decoration:none}
code{font-family:"SF Mono",Menlo,Consolas,monospace;background:var(--soft-pink);padding:2px 6px;border-radius:4px;font-size:.875rem;word-break:break-all}
input,select,button{font-family:inherit;font-size:1rem}
input,select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);color:var(--text);transition:var(--transition)}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,93,158,.15)}
input[type=search]{-webkit-appearance:none}
label{display:block;margin-bottom:6px;font-weight:500;font-size:.9rem;color:var(--text)}
.form-group{margin-bottom:16px}
.form-hint{display:block;margin-top:4px;font-size:.8rem;color:var(--text-secondary)}
.password-wrap{position:relative}
.password-wrap input{padding-right:60px}
.toggle-pass{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--primary);font-size:.85rem;padding:8px 12px;cursor:pointer;font-weight:500}
.btn-primary{background:var(--primary);color:var(--white);border:none;padding:12px 24px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-secondary{background:var(--white);color:var(--primary);border:1px solid var(--border);padding:10px 20px;border-radius:var(--radius-sm);cursor:pointer;font-weight:500;transition:var(--transition)}
.btn-secondary:hover{background:var(--soft-pink);border-color:var(--primary)}
.btn-danger{background:var(--danger);color:var(--white);border:none;padding:12px 24px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;transition:var(--transition)}
.btn-danger:hover{background:#b02a37}
.btn-sm{padding:6px 12px;font-size:.85rem;min-height:auto}
.btn-full{width:100%}
.btn-icon{background:none;border:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:var(--transition);min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--soft-pink);color:var(--primary)}
.btn-copy{background:var(--primary);color:var(--white);border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;white-space:nowrap}
.btn-copy.copied{background:var(--success)}
.btn-loader{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--white);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.alert-error{background:#FEE;border:#FCC;color:#B00;padding:12px 16px;border-radius:var(--radius-sm);margin-top:12px;font-size:.9rem}
.alert-warning{background:#FFF8E1;border:#FFE082;color:#8B6914;padding:12px 16px;border-radius:var(--radius-sm);margin-top:16px;font-size:.9rem}
.alert-success{background:#E8F5E9;border:#C8E6C9;color:#2E7D32;padding:12px 16px;border-radius:var(--radius-sm);margin-top:12px;font-size:.9rem}
.login-container{max-width:420px;margin:0 auto;padding:40px 20px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.logo-area{text-align:center;margin-bottom:32px}
.logo-icon{width:64px;height:64px;margin:0 auto 16px;background:var(--primary);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:var(--shadow-lg)}
.logo-icon.logo-sm{width:32px;height:32px;font-size:1rem;margin:0}
.logo-area h1{margin-bottom:8px}
.logo-area .subtitle{font-size:.95rem}
#loginForm,#adminLoginForm{background:var(--white);padding:28px 24px;border-radius:var(--radius);box-shadow:var(--shadow)}
.modal-overlay{position:fixed;inset:0;background:rgba(52,42,50,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay[hidden]{display:none!important}
.modal-content{background:var(--white);border-radius:var(--radius);max-width:640px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1}
.modal-body{padding:24px}
.modal-actions{margin-top:24px;padding-top:16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
.empty-state,.loading-state,.error-state{text-align:center;padding:60px 20px}
.empty-icon,.error-icon{font-size:3rem;margin-bottom:16px}
.empty-state h3,.loading-state h3,.error-state h3{margin-bottom:8px}
@media(max-width:480px){
h1{font-size:1.5rem}
.login-container{padding:24px 16px}
#loginForm,#adminLoginForm{padding:24px 20px}
.modal-content{max-height:95vh;border-radius:var(--radius-sm)}
.modal-header,.modal-body{padding:16px 20px}
}