:root{--primary:#09b5d5;--dark:#1f2937;--muted:#7b8794;--bg:#f7f8fa;--card:#fff;--danger:#e3342f;--green:#1f8f3a;--orange:#f47b00;--shadow:0 8px 24px rgba(15,23,42,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--dark)}
.topbar{position:sticky;top:0;z-index:10;height:62px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 2px 14px rgba(0,0,0,.05)}
.brand{font-size:22px;font-weight:800;color:var(--primary)}.icon-btn{border:0;background:transparent;font-size:27px;color:#555}.container{max-width:1040px;margin:0 auto;padding:20px 16px 96px}.page-title{font-size:24px;margin:8px 0 18px;font-weight:800}.search{display:flex;background:#fff;border:1px solid #e4e7eb;border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}.search input{border:0;outline:0;flex:1;padding:16px;font-size:16px}.search button{border:0;background:#fff;color:var(--primary);font-size:24px;padding:0 16px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px}.card-link{height:145px;background:var(--card);border-radius:24px;text-decoration:none;color:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;box-shadow:var(--shadow);font-weight:700;font-size:16px}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.stat{background:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow)}.stat span{display:block;color:var(--muted);font-size:13px}.stat b{display:block;font-size:24px;margin-top:7px}.customer-card{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}.avatar{width:54px;height:54px;border-radius:50%;background:#d1d5db;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}.cust-main{flex:1}.cust-main b{font-size:18px}.cust-main span{display:block;color:var(--muted);margin-top:5px}.balance{text-align:right}.balance b{color:var(--danger);font-size:19px}.fab{position:fixed;right:22px;bottom:24px;background:var(--primary);color:#fff;border:0;border-radius:32px;padding:17px 24px;font-size:15px;font-weight:800;box-shadow:0 12px 28px rgba(9,181,213,.35);text-decoration:none}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;height:68px;display:flex;justify-content:space-around;align-items:center;box-shadow:0 -4px 18px rgba(0,0,0,.07)}.bottom-nav a{text-decoration:none;color:#6b7280;font-size:12px;text-align:center}.bottom-nav b{display:block;font-size:22px}.form-card{background:#fff;border-radius:22px;padding:18px;box-shadow:var(--shadow)}.field{margin-bottom:14px}.field label{display:block;font-size:13px;color:#6b7280;margin-bottom:6px}.field input,.field select{width:100%;border:1px solid #e5e7eb;border-radius:13px;padding:13px;font-size:15px}.btn{display:inline-block;width:100%;border:0;border-radius:15px;background:var(--primary);color:#fff;padding:15px;font-weight:800;font-size:16px;text-align:center;text-decoration:none}@media(min-width:800px){.grid{grid-template-columns:repeat(4,1fr)}.card-link{height:135px}.stats{grid-template-columns:repeat(4,1fr)}.bottom-nav{display:none}.fab{bottom:28px}.container{padding-bottom:40px}}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--theme-color);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

.app-status-line {
    height: 8px;
    background: rgba(0,0,0,.16);
}

.app-topbar-main {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
}

.app-icon-btn {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.app-icon-btn:hover {
    background: rgba(255,255,255,.14);
}

.app-title-wrap {
    flex: 1;
    min-width: 0;
}

.app-title-wrap h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-title-wrap p {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-topbar-logo,
.app-topbar-avatar {
    width: 35px;
    height: 35px;
    border-radius: 12px;
    background: transparent;
}

.app-topbar-logo {
    object-fit: cover;
}

.app-topbar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.28);
}

@media (max-width: 420px) {
    .app-topbar-main {
        height: 60px;
        padding: 0 10px;
        gap: 8px;
    }

    .app-icon-btn {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .app-title-wrap h1 {
        font-size: 18px;
    }

    .app-topbar-actions .app-icon-btn:nth-child(2) {
        display: none;
    }
}

.app-icon-btn i{

font-size:24px;

display:flex;

align-items:center;

justify-content:center;

}

.bi{

pointer-events:none;

}

.app-topbar-search {
    display: none;
    flex: 1;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    padding: 0 10px;
    height: 42px;
}

.app-topbar-search.open {
    display: flex;
}

.app-topbar-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 15px;
}

.app-topbar-search input::placeholder {
    color: rgba(255,255,255,.75);
}

.app-topbar-search button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 17px;
}

.app-title-wrap.hide-on-search {
    display: none;
}

.topbar-menu-panel,
.topbar-notify-panel,
.topbar-profile-panel {
    display: none;
    background: rgba(255,255,255,.98);
    color: #111827;
    margin: 0 10px 10px;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.topbar-menu-panel.open,
.topbar-notify-panel.open,
.topbar-profile-panel.open {
    display: block;
}

.topbar-menu-panel a,
.topbar-profile-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    color: #111827;
    text-decoration: none;
    font-weight: 600;
}

.topbar-menu-panel a:hover,
.topbar-profile-panel a:hover {
    background: #f3f4f6;
}

.topbar-panel-title {
    font-weight: 800;
    margin-bottom: 8px;
}

.topbar-empty {
    color: #6b7280;
    font-size: 14px;
    padding: 8px;
}

.alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0 0 14px;
    border: 1px solid #d8dee8;
    border-left-width: 5px;
    border-radius: 6px;
    background: #fff;
    padding: 13px 15px;
    color: #102033;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.alert::before {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.alert.success {
    border-color: #99f6e4;
    border-left-color: #008a68;
    background: #ecfdf8;
    color: #065f46;
}

.alert.success::before {
    content: "OK";
    background: #008a68;
    font-size: 10px;
}

.alert.error {
    border-color: #fecaca;
    border-left-color: #dc2626;
    background: #fff1f2;
    color: #991b1b;
}

.alert.error::before {
    content: "!";
    background: #dc2626;
}

.alert.warning {
    border-color: #fde68a;
    border-left-color: #d97706;
    background: #fffbeb;
    color: #92400e;
}

.alert.warning::before {
    content: "!";
    background: #d97706;
}

.app-profile-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.card-link i{

font-size:42px;

margin-bottom:14px;

display:block;

}

.icon-blue{
color:#1E88E5;
}

.icon-green{
color:#2E7D32;
}

.icon-purple{
color:#7B1FA2;
}

.icon-orange{
color:#EF6C00;
}

.icon-red{
color:#E53935;
}

.icon-yellow{
color:#F9A825;
}

.icon-cyan{
color:#00ACC1;
}

.icon-gray{
color:#546E7A;
}

.form-group .field-error {
    display: none;
    margin-top: 6px;
    color: #c1121f;
    font-size: 13px;
    font-weight: 700;
}

.form-group.has-error .field-error {
    display: block;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #c1121f !important;
    border-bottom-color: #c1121f !important;
}

.form-group.has-ok input,
.form-group.has-ok select,
.form-group.has-ok textarea {
    border-color: #00806a !important;
    border-bottom-color: #00806a !important;
}