/* Common components across SkyCMS pages */
:root { --primary:#2563eb; --danger:#dc2626; --success:#16a34a; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-600:#4b5563; --gray-900:#111827; }

.form-label { display:block; margin-bottom:8px; color:#1d1d1f; font-weight:500; font-size:14px; }
.form-input-group { position:relative; }
.form-input-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#9e9e93; font-size:18px; z-index:2; }

.apple-input { width:100%; padding:16px; border:1px solid #d2d2d7; border-radius:12px; font-size:16px; background:#f5f5f7; transition:all .2s; box-sizing:border-box; color:#1d1d1f; }
.apple-input:focus { outline:none; border-color:#4B73FF; box-shadow:0 0 0 3px rgba(75,115,255,0.2); background:#fff; }
.apple-input::placeholder { color:#8e8e93; }

.apple-btn { background:linear-gradient(135deg,#4FC3F7 0%, #29B6F6 100%); color:#fff; border:none; padding:16px 32px; border-radius:12px; font-weight:600; font-size:16px; cursor:pointer; transition:all .3s; box-shadow:0 4px 12px rgba(79,195,247,0.3); position:relative; overflow:hidden; }
.apple-btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(79,195,247,0.4); background:linear-gradient(135deg,#29B6F6 0%, #0288D1 100%); }
.apple-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); transition:left .5s; }
.apple-btn:hover::before { left:100%; }

.frosted-back-btn { background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); border:1px solid rgba(25,118,210,0.2); color:#1976d2; padding:12px 24px; border-radius:12px; font-weight:500; text-decoration:none; transition:all .2s; display:inline-flex; align-items:center; gap:8px; }
.frosted-back-btn:hover { background:rgba(25,118,210,0.1); border-color:rgba(25,118,210,0.3); transform:translateY(-1px); color:#1565c0; }

.password-input-group { position:relative; }
.toggle-password { position:absolute; right:16px; background:none; border:none; cursor:pointer; color:#9e9e93; font-size:18px; padding:4px; transition:color .2s; }
.toggle-password:hover { color:#1976d2; }

.error-message { background:linear-gradient(135deg,#ff5252 0%, #ff3b30 100%); color:#fff; padding:12px 16px; border-radius:12px; margin-bottom:20px; font-size:14px; text-align:center; box-shadow:0 4px 12px rgba(255,59,48,0.2); }
.info-message { background:linear-gradient(135deg,#4CAF50 0%, #2E7D32 100%); color:#fff; padding:12px 16px; border-radius:12px; margin-bottom:20px; font-size:14px; text-align:center; box-shadow:0 4px 12px rgba(46,125,50,0.2); }

.loading-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; transition:opacity .3s; }
.loading-overlay.active { opacity:1; }
.loading-spinner { width:50px; height:50px; border:4px solid rgba(75,115,255,0.2); border-top:4px solid #4B73FF; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Ant-like UI common styles */
.ant-btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 15px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;color:#1f2937;font-size:14px;line-height:32px;cursor:pointer;transition:.2s}
.ant-btn:hover{border-color:#1677ff;color:#1677ff}
.ant-btn-primary{background:#1677ff;border-color:#1677ff;color:#fff}
.ant-btn-primary:hover{background:#4096ff;border-color:#4096ff;color:#fff}
.ant-btn-danger{background:#ff4d4f;border-color:#ff4d4f;color:#fff}
.ant-btn-danger:hover{background:#ff7875;border-color:#ff7875;color:#fff}
.ant-btn-default{background:#fff;border-color:#d9d9d9;color:#1f2937}
.ant-btn-disabled{cursor:not-allowed;opacity:.6;background:#f5f5f5;color:#bfbfbf;border-color:#d9d9d9}
.ant-input{width:100%;height:40px;padding:0 12px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;font-size:14px;color:#1f2937;box-sizing:border-box}
.ant-input:focus{outline:none;border-color:#1677ff;box-shadow:0 0 0 2px rgba(22,119,255,.2)}
.ant-select{height:32px;padding:0 12px;border:1px solid #d9d9d9;border-radius:6px;background:#fff;color:#1f2937;cursor:pointer}
.ant-select:hover{border-color:#1677ff;color:#1677ff}
.input-row{display:flex;gap:8px;align-items:center}
.input-row .ant-input{flex:1}
.ant-notify{position:fixed;right:20px;top:20px;z-index:3000;display:flex;flex-direction:column;gap:8px}
.ant-notice{min-width:240px;padding:10px 14px;border-radius:6px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.ant-notice.success{background:#52c41a}
.ant-notice.info{background:#1677ff}
.ant-notice.warning{background:#faad14}
.ant-notice.error{background:#ff4d4f}