/**
 * ============================================================
 *  ╔════╗╔╗ ╔╗╔═╗╔═╗╔╗  ╔╗
 *  ║╔╗╔╗║║║ ║║╚╗╚╝╔╝║╚╗╔╝║
 *  ╚╝║║╚╝║╚═╝║ ╚╗╔╝ ╚╗╚╝╔╝╔╗╔╦══╗╔══╦══╦╗╔╗
 *    ║║  ║╔═╗║ ╔╝╚╗  ╚╗╔╝ ║╚╝║╔═╝║╔═╣╔╗║╚╝║
 *    ║║  ║║ ║║╔╝╔╗╚╗  ║║  ║║║║╚═╦╣╚═╣╚╝║║║║
 *    ╚╝  ╚╝ ╚╝╚═╝╚═╝  ╚╝  ╚╩╩╩══╩╩══╩══╩╩╩╝
 * ============================================================
 * 网站:admin.thxymc.com	版本:V1.0.0	更新日期:2026/06/28
 * ============================================================
 * 版权归天河星雨工作室[thxymc Studio] thxymc.com所有
 * Copyright © 2026 thxymc.com. All rights reserved.
 * 网页由天河星雨工作室制作 thxymc.com
 * ！！未经允许禁止公开源码！！
 * ============================================================
 */

/* CSS Icon System — 替代emoji，跨平台一致渲染 */

.icon-i {
  display: inline-block; width: 20px; height: 20px;
  position: relative; vertical-align: middle; margin-right: 4px;
}
.icon-i::before, .icon-i::after { content: ""; position: absolute; }

/* Logs — document icon */
.icon-logs::before {
  width: 14px; height: 17px; left: 3px; top: 1px;
  border: 2px solid #4fc3f7; border-radius: 2px;
  background: transparent;
}
.icon-logs::after {
  width: 8px; height: 2px; left: 6px; top: 6px;
  background: #4fc3f7; box-shadow: 0 4px 0 #4fc3f7, 0 8px 0 #4fc3f7;
}

/* Plus — add new */
.icon-plus::before {
  width: 14px; height: 2px; left: 3px; top: 9px;
  background: #4fc3f7;
}
.icon-plus::after {
  width: 2px; height: 14px; left: 9px; top: 3px;
  background: #4fc3f7;
}

/* Users — people */
.icon-users::before {
  width: 10px; height: 10px; left: 1px; top: 2px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}
.icon-users::after {
  width: 10px; height: 10px; left: 7px; top: 2px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}

/* Mail — envelope */
.icon-mail::before {
  width: 16px; height: 11px; left: 2px; top: 4px;
  border: 2px solid #4fc3f7; border-radius: 2px;
}
.icon-mail::after {
  width: 0; height: 0; left: 2px; top: 4px;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 6px solid #4fc3f7;
}

/* Logout — door/arrow */
.icon-logout::before {
  width: 10px; height: 10px; left: 2px; top: 5px;
  border: 2px solid #e57373; border-radius: 2px;
  border-right: none;
}
.icon-logout::after {
  width: 6px; height: 2px; left: 12px; top: 9px;
  background: #e57373;
  box-shadow: -3px -3px 0 #e57373, -3px 3px 0 #e57373;
}

/* User — person */
.icon-user::before {
  width: 8px; height: 8px; left: 6px; top: 2px;
  border: 2px solid #888; border-radius: 50%;
}
.icon-user::after {
  width: 14px; height: 7px; left: 3px; top: 12px;
  border: 2px solid #888; border-radius: 8px 8px 0 0;
  border-bottom: none;
}

/* Edit — pencil */
.icon-edit::before {
  width: 2px; height: 12px; left: 12px; top: 2px;
  background: #4fc3f7; transform: rotate(-30deg);
}
.icon-edit::after {
  width: 5px; height: 5px; left: 12px; top: 0;
  border-left: 2px solid #4fc3f7; border-bottom: 2px solid #4fc3f7;
  transform: rotate(45deg);
}

/* Save — floppy disk */
.icon-save::before {
  width: 14px; height: 16px; left: 3px; top: 1px;
  border: 2px solid #fff; border-radius: 2px;
}
.icon-save::after {
  width: 8px; height: 4px; left: 6px; top: 1px;
  background: #fff; border-radius: 0 0 2px 2px;
}

/* Settings — gear */
.icon-gear::before {
  width: 12px; height: 12px; left: 4px; top: 4px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}
.icon-gear::after {
  width: 2px; height: 2px; left: 9px; top: 9px;
  background: #4fc3f7; border-radius: 50%;
}

/* Publish/check — checkmark */
.icon-check::before {
  width: 6px; height: 11px; left: 7px; top: 4px;
  border: 2px solid #81c784; border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* Code — brackets */
.icon-code::before {
  width: 5px; height: 12px; left: 2px; top: 4px;
  border-left: 2px solid #4fc3f7; border-top: 2px solid #4fc3f7;
  border-bottom: 2px solid #4fc3f7; border-radius: 3px 0 0 3px;
}
.icon-code::after {
  width: 5px; height: 12px; left: 11px; top: 4px;
  border-right: 2px solid #4fc3f7; border-top: 2px solid #4fc3f7;
  border-bottom: 2px solid #4fc3f7; border-radius: 0 3px 3px 0;
}

/* Globe — web */
.icon-globe::before {
  width: 14px; height: 14px; left: 3px; top: 3px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}
.icon-globe::after {
  width: 2px; height: 14px; left: 9px; top: 3px;
  border-left: 2px solid rgba(79,195,247,0.4);
  border-right: 2px solid rgba(79,195,247,0.4);
}

/* Server — rack */
.icon-server::before {
  width: 14px; height: 4px; left: 3px; top: 4px;
  background: rgba(255,255,255,0.15); border-radius: 1px;
}
.icon-server::after {
  width: 14px; height: 4px; left: 3px; top: 12px;
  background: rgba(255,255,255,0.15); border-radius: 1px;
}

/* Shield — security */
.icon-shield::before {
  width: 0; height: 0; left: 4px; top: 2px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 14px solid #4fc3f7;
}

/* Camera */
.icon-camera::before {
  width: 14px; height: 10px; left: 3px; top: 5px;
  border: 2px solid #4fc3f7; border-radius: 3px;
}
.icon-camera::after {
  width: 4px; height: 4px; left: 8px; top: 8px;
  border: 1.5px solid #4fc3f7; border-radius: 50%;
}

/* House */
.icon-house::before {
  width: 0; height: 0; left: 3px; top: 2px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 8px solid #4fc3f7;
}
.icon-house::after {
  width: 10px; height: 8px; left: 5px; top: 10px;
  border: 2px solid #4fc3f7; border-top: none; border-radius: 0 0 2px 2px;
}

/* Laptop */
.icon-laptop::before {
  width: 14px; height: 10px; left: 3px; top: 2px;
  border: 2px solid #4fc3f7; border-radius: 3px 3px 0 0;
}
.icon-laptop::after {
  width: 18px; height: 3px; left: 1px; top: 13px;
  background: #4fc3f7; border-radius: 0 0 4px 4px;
}

/* Bolt — power/energy */
.icon-bolt::before {
  width: 0; height: 0; left: 10px; top: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 10px solid #4fc3f7;
}
.icon-bolt::after {
  width: 0; height: 0; left: 5px; top: 8px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 8px solid #4fc3f7;
}

/* Plug */
.icon-plug::before {
  width: 4px; height: 6px; left: 4px; top: 2px;
  border: 2px solid #4fc3f7; border-bottom: none; border-radius: 2px 2px 0 0;
}
.icon-plug::after {
  width: 4px; height: 6px; left: 10px; top: 2px;
  border: 2px solid #4fc3f7; border-bottom: none; border-radius: 2px 2px 0 0;
}

/* Search — magnifier */
.icon-search::before {
  width: 10px; height: 10px; left: 3px; top: 3px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}
.icon-search::after {
  width: 2px; height: 6px; left: 14px; top: 13px;
  background: #4fc3f7; transform: rotate(-45deg);
}

/* View — eye */
.icon-eye::before {
  width: 14px; height: 10px; left: 3px; top: 4px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}
.icon-eye::after {
  width: 4px; height: 4px; left: 8px; top: 7px;
  background: #4fc3f7; border-radius: 50%;
}

/* Calendar */
.icon-cal::before {
  width: 14px; height: 12px; left: 3px; top: 4px;
  border: 2px solid #4fc3f7; border-radius: 2px;
}
.icon-cal::after {
  width: 14px; height: 3px; left: 3px; top: 2px;
  background: #4fc3f7; border-radius: 2px 2px 0 0;
}

/* Folder */
.icon-folder::before {
  width: 14px; height: 12px; left: 3px; top: 4px;
  border: 2px solid #4fc3f7; border-radius: 2px;
}
.icon-folder::after {
  width: 5px; height: 3px; left: 3px; top: 2px;
  background: #4fc3f7; border-radius: 2px 2px 0 0;
}

/* Lock */
.icon-lock::before {
  width: 10px; height: 8px; left: 5px; top: 8px;
  border: 2px solid #4fc3f7; border-radius: 2px;
}
.icon-lock::after {
  width: 6px; height: 6px; left: 7px; top: 2px;
  border: 2px solid #4fc3f7; border-radius: 50% 50% 0 0;
  border-bottom: none;
}

/* Hash — tag */
.icon-tag::before {
  width: 0; height: 0; left: 2px; top: 5px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-right: 6px solid #4fc3f7;
}
.icon-tag::after {
  width: 6px; height: 6px; left: 10px; top: 7px;
  border: 2px solid #4fc3f7; border-radius: 50%;
}

/* Star */
.icon-star::before {
  width: 0; height: 0; left: 2px; top: 2px;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 5px solid #ffb74d;
}
.icon-star::after {
  width: 0; height: 0; left: 8px; top: 2px;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 5px solid #4fc3f7;
}

/* Layout containers with icons */
.stat-icon { margin-right: 6px; vertical-align: middle; }
.nav-icon { margin-right: 6px; vertical-align: middle; }
.service-icon-css { display: block; width: 48px; height: 48px; margin-bottom: 18px; position: relative; }