/* Tailwind 兼容层（增强版 - 当前项目用） */

:root{
    --white:#fff;
    --black:#000;
    --primary-300:#a4bbfc;--primary-400:#8098f9;--primary-500:#6172f3;
    --emerald-300:#6ee7b7;--emerald-400:#34d399;--emerald-500:#10b981;
    --teal-600:#0d9488;
    --amber-400:#fbbf24;--amber-500:#f59e0b;
    --red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;
    --violet-500:#8b5cf6;
  }
  
  *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgba(255,255,255,.1)}
  html{line-height:1.5;-webkit-text-size-adjust:100%}
  body{margin:0}
  a{color:inherit;text-decoration:inherit}
  button,input,select,textarea{font:inherit;color:inherit}
  button{background:transparent}
  svg{display:block}
  
  /* typography */
  .text-xs{font-size:.75rem;line-height:1rem}
  .text-sm{font-size:.875rem;line-height:1.25rem}
  .text-base{font-size:1rem;line-height:1.5rem}
  .text-lg{font-size:1.125rem;line-height:1.75rem}
  .text-xl{font-size:1.25rem;line-height:1.75rem}
  .text-2xl{font-size:1.5rem;line-height:2rem}
  .text-center{text-align:center}
  .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
  .font-semibold{font-weight:600}
  .font-bold{font-weight:700}
  .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  
  /* colors */
  .text-white{color:var(--white)}
  .text-white\/80{color:rgba(255,255,255,.8)}
  .text-white\/60{color:rgba(255,255,255,.6)}
  .text-white\/50{color:rgba(255,255,255,.5)}
  .text-white\/40{color:rgba(255,255,255,.4)}
  .text-white\/30{color:rgba(255,255,255,.3)}
  .text-red-400{color:var(--red-400)}
  .text-emerald-300{color:var(--emerald-300)}
  .text-emerald-400{color:var(--emerald-400)}
  .text-amber-400{color:var(--amber-400)}
  .text-primary-300{color:var(--primary-300)}
  
  /* bg */
  .bg-white\/5{background:rgba(255,255,255,.05)}
  .bg-white\/10{background:rgba(255,255,255,.10)}
  .bg-white\/20{background:rgba(255,255,255,.20)}
  .bg-black\/30{background:rgba(0,0,0,.30)}
  .bg-primary-500\/20{background:rgba(97,114,243,.20)}
  .bg-emerald-500\/20{background:rgba(16,185,129,.20)}
  .bg-amber-500\/10{background:rgba(245,158,11,.10)}

  /* gradients */
  .bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}
  .bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}
  .from-primary-500{--tw-gradient-from:var(--primary-500);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgba(97, 114, 243, 0))}
  .from-emerald-500{--tw-gradient-from:var(--emerald-500);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0))}
  .to-purple-600{--tw-gradient-to:var(--violet-500)}
  .to-teal-600{--tw-gradient-to:var(--teal-600)}
  
  /* border/radius */
  .border{border-width:1px}
  .border-pad{padding:10px;border-width:1px}
  .icon-pad{padding:10px}
  .card-pad{padding:10px}
  .border-b{border-bottom-width:1px}
  .border-t{border-top-width:1px}
  .border-white\/5{border-color:rgba(255,255,255,.05)}
  .border-white\/10{border-color:rgba(255,255,255,.10)}
  .border-primary-500\/30{border-color:rgba(97,114,243,.30)}
  .border-emerald-500\/30{border-color:rgba(16,185,129,.30)}
  .border-amber-500\/20{border-color:rgba(245,158,11,.20)}
  .rounded-lg{border-radius:.5rem}
  .rounded-xl{border-radius:.75rem}
  .rounded-pad{padding:10px;border-radius:.75rem}
  .rounded-2xl{border-radius:1rem}
  .rounded-full{border-radius:9999px}
  
  /* shadows */
  .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)}
  .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04)}
  .shadow-primary-500\/30{box-shadow:0 10px 30px rgba(97,102,241,.3)}
  .shadow-emerald-500\/30{box-shadow:0 10px 30px rgba(16,185,129,.3)}
  
  /* layout */
  .w-full{width:100%}
  .w-48{width:12rem}
  .w-20{width:5rem}
  .w-16{width:4rem}
  .w-12{width:3rem}
  .w-10{width:2.5rem}
  .w-8{width:2rem}
  .w-5{width:1.25rem}
  .w-6{width:1.5rem}
  .w-4{width:1rem}
  .w-3\.5{width:.875rem}
  .h-16{height:4rem}
  .h-10{height:2.5rem}
  .h-8{height:2rem}
  .h-5{height:1.25rem}
  .h-6{height:1.5rem}
  .h-4{height:1rem}
  .h-3\.5{height:.875rem}
  .max-w-7xl{max-width:80rem}
  .max-w-5xl{max-width:64rem}
  .mx-auto{margin-left:auto;margin-right:auto}
  .flex{display:flex}
  .grid{display:grid}
  .hidden{display:none}
  .fixed{position:fixed}
  .top-6{top:1.5rem}
  .right-6{right:1.5rem}
  .flex-1{flex:1 1 0%}
  .flex-shrink-0{flex-shrink:0}
  .flex-col{flex-direction:column}
  .items-center{align-items:center}
  .items-start{align-items:flex-start}
  .justify-center{justify-content:center}
  .justify-between{justify-content:space-between}
  .justify-around{justify-content:space-around}
  .gap-2{gap:.5rem}
  .gap-3{gap:.75rem}
  .gap-4{gap:1rem}
  .gap-6{gap:1.5rem}
  .gap-8{gap:2rem}
  .space-y-1>*+*{margin-top:.25rem}
  .space-y-4>*+*{margin-top:1rem}

  /* display helpers */
  .inline-flex{display:inline-flex}
  .flex-wrap{flex-wrap:wrap}
  .leading-tight{line-height:1.25}
  
  /* spacing */
  .p-1\.5{padding:.375rem}
  .p-4{padding:1rem}
  .p-6{padding:1.5rem}
  .p-7{padding:1.75rem}
  .px-3{padding-left:.75rem;padding-right:.75rem}
  .px-4{padding-left:1rem;padding-right:1rem}
  .py-1{padding-top:.25rem;padding-bottom:.25rem}
  .py-2{padding-top:.5rem;padding-bottom:.5rem}
  .py-3{padding-top:.75rem;padding-bottom:.75rem}
  .py-8{padding-top:2rem;padding-bottom:2rem}
  .pt-2{padding-top:.5rem}
  .ml-auto{margin-left:auto}
  .mb-1{margin-bottom:.25rem}
  .mb-2{margin-bottom:.5rem}
  .mb-4{margin-bottom:1rem}
  .mb-6{margin-bottom:1.5rem}
  .mb-8{margin-bottom:2rem}
  .mt-0\.5{margin-top:.125rem}
  .mt-1{margin-top:.25rem}
  .mt-2{margin-top:.5rem}
  .mt-6{margin-top:1.5rem}
  
  /* position */
  .relative{position:relative}
  .absolute{position:absolute}
  .sticky{position:sticky}
  .inset-0{top:0;right:0;bottom:0;left:0}
  .top-0{top:0}
  .top-24{top:6rem}
  .right-0{right:0}
  .z-40{z-index:40}
  
  /* transitions */
  .transition-colors{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
  .transition-all{transition:all .2s ease}
  .hover\:bg-white\/5:hover{background:rgba(255,255,255,.05)}
  .hover\:bg-white\/10:hover{background:rgba(255,255,255,.10)}
  .hover\:text-white:hover{color:var(--white)}
  .hover\:translate-y-\[-2px\]:hover{transform:translateY(-2px)}
  
  /* responsive */
  @media (min-width: 640px){
    .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
    .sm\:inline-flex{display:inline-flex}
    .sm\:block{display:block}
  }
  @media (min-width: 768px){
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:items-center{align-items:center}
    .md\:justify-between{justify-content:space-between}
    .md\:flex-row{flex-direction:row}
  }
  @media (min-width: 1024px){
    .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lg\:col-span-1{grid-column:span 1/span 1}
    .lg\:col-span-2{grid-column:span 2/span 2}
    .lg\:px-8{padding-left:2rem;padding-right:2rem}
  }
  
  /* dashboard：头像字母居中 */
  .avatar-center{display:grid;place-items:center;line-height:1}
  
  /* 密钥之间间距 */
  .key-item{margin-bottom:0.85rem}
  
  /* 设备页：备注字号增大 */
  .mac-remark{font-size:1rem !important;line-height:1.4}
  .mac-added{font-size:1rem !important;line-height:1.4}

  /* 响应式网格布局 (用于设备列表) */
  .responsive-grid-3-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (max-width: 1024px) {
    .responsive-grid-3-col {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 768px) {
    .responsive-grid-3-col {
      grid-template-columns: 1fr;
    }
  }