/* ──────────────────────────────────────────────────────────────────
   HiOphelia — Design System v3 · Warm Hospitality
   Boutique hotel meets modern SaaS · soft, premium, welcoming
   ────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* — Backward-compat aliases (old var names → new) — */
  --text-muted:var(--ink-3, #7E8499);
  --text:var(--ink, #2A2E3E);
  --navy:var(--ink, #2A2E3E);
  --border:var(--line, #EBE3D5);
  --border-soft:var(--line-soft, #F2EDE2);
  --muted:var(--cream, #FAF6F0);
  --brick:var(--coral, #E8927C);
  --pink:var(--coral-soft, #FBE5DD);
  --mint:var(--sage-soft, #E6EEEA);

  /* — Warm primaries — */
  --cream:#FAF6F0;
  --cream-deep:#F4ECDF;
  --ivory:#FFFEFB;
  --sand:#E8DDC8;

  /* — Brand — */
  --teal:#2D6A82;          /* primary deep teal */
  --teal-soft:#D9E8EE;
  --teal-deeper:#1F4E62;
  --sage:#A8C5B6;
  --sage-soft:#E6EEEA;

  /* — Accents — */
  --coral:#E8927C;         /* warm warm coral */
  --coral-soft:#FBE5DD;
  --gold:#D4A574;
  --gold-soft:#F5E9D4;
  --plum:#9C7B98;
  --plum-soft:#EFE5EE;

  /* — Ink — */
  --ink:#2A2E3E;
  --ink-2:#4D526B;
  --ink-3:#7E8499;
  --ink-4:#A8ADC2;

  /* — Lines / surfaces — */
  --line:#EBE3D5;
  --line-soft:#F2EDE2;
  --surface:#FFFEFB;
  --bg:var(--cream);

  /* — Floor accents (each floor a vibe) — */
  --f1:linear-gradient(135deg,#A8C5B6 0%,#7BAA98 100%);
  --f3:linear-gradient(135deg,#E8927C 0%,#D17661 100%);
  --f4:linear-gradient(135deg,#85ADC2 0%,#5B8AA0 100%);
  --f6:linear-gradient(135deg,#B79DC1 0%,#967AA1 100%);
  --f7:linear-gradient(135deg,#D4A574 0%,#B88556 100%);
  --f8:linear-gradient(135deg,#D6BC7E 0%,#B89D5E 100%);

  --f1-c:#5B917B;
  --f3-c:#C16949;
  --f4-c:#3F7895;
  --f6-c:#7B5D8A;
  --f7-c:#A8753D;
  --f8-c:#9A8240;

  /* — Type — */
  --font:'Inter',-apple-system,system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,serif;

  /* — Shape — */
  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:24px;
  --r-xl:32px;

  /* — Shadows (warm tinted) — */
  --shadow-xs: 0 1px 2px rgba(82,55,30,.04);
  --shadow-sm: 0 1px 2px rgba(82,55,30,.04), 0 3px 8px rgba(82,55,30,.04);
  --shadow:    0 2px 4px rgba(82,55,30,.04), 0 12px 28px rgba(82,55,30,.08);
  --shadow-lg: 0 4px 12px rgba(82,55,30,.06), 0 24px 56px rgba(82,55,30,.12);
  --shadow-glow:0 0 0 4px rgba(45,106,130,.12);

  /* — Motion — */
  --ease:cubic-bezier(.2,.9,.3,1.15);
  --transition:.28s var(--ease);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';line-height:1.5;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(232,146,124,.06) 0%, transparent 50%),
    radial-gradient(40% 40% at 0% 100%, rgba(168,197,182,.08) 0%, transparent 50%);
}
a{color:var(--teal);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--teal-deeper)}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit;font-size:15px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:var(--coral-soft);color:var(--ink)}

/* ─── Site shell ─── */
.site{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}

.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(255,254,251,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(235,227,213,.6);
  padding:14px 32px;
  display:flex;align-items:center;gap:24px;
}
.nav .brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:21px;
  letter-spacing:-.025em;color:var(--ink);
}
.nav .brand svg{flex:0 0 38px;width:38px;height:38px;filter:drop-shadow(0 3px 8px rgba(45,106,130,.20))}
.nav-links{display:flex;gap:2px;margin-left:12px;flex:1;flex-wrap:wrap}
.nav-links a{
  padding:8px 16px;border-radius:999px;color:var(--ink-2);font-weight:500;font-size:13.5px;
  transition:var(--transition);letter-spacing:-.005em;
}
.nav-links a:hover{background:var(--cream-deep);color:var(--ink)}
.nav-links a.active{
  background:var(--ink);color:var(--cream);font-weight:600;
  box-shadow:var(--shadow-xs);
}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-bell{
  position:relative;padding:10px;border-radius:50%;color:var(--ink-2);
  transition:var(--transition);
}
.nav-bell svg{width:18px;height:18px}
.nav-bell:hover{background:var(--cream-deep);color:var(--ink)}
.nav-bell .dot{
  position:absolute;top:8px;right:8px;width:8px;height:8px;
  background:var(--coral);border-radius:50%;border:2px solid var(--ivory);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,146,124,.6)}
  50%{box-shadow:0 0 0 6px rgba(232,146,124,0)}
}
.nav-user{
  display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;
  background:var(--ivory);border:1px solid var(--line);transition:var(--transition);
}
.nav-user:hover{box-shadow:var(--shadow-xs)}
.nav-user .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deeper) 100%);
  color:var(--ivory);display:grid;place-items:center;font-weight:700;font-size:12px;
}
.nav-user .name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.nav-user .role{font-size:11px;color:var(--ink-3);line-height:1.3}
.logout-btn{
  background:none;color:var(--ink-3);font-size:13px;padding:8px 12px;border-radius:var(--r-sm);
  transition:var(--transition);font-weight:500;
}
.logout-btn:hover{color:var(--coral);background:var(--coral-soft)}

main{flex:1;padding:48px 32px;max-width:1320px;width:100%;margin:0 auto}
.page-title{
  font-family:var(--font-display);font-size:46px;font-weight:600;
  letter-spacing:-.035em;margin:0 0 6px;color:var(--ink);line-height:1.05;
  font-variation-settings:"opsz" 144;
}
.page-sub{color:var(--ink-2);margin:0 0 36px;font-size:15.5px;line-height:1.6;max-width:600px}

/* ─── Login ─── */
.login-wrap{
  min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(60% 50% at 15% 10%, var(--sage-soft) 0%, transparent 60%),
    radial-gradient(50% 50% at 95% 90%, var(--coral-soft) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 50%, var(--cream-deep) 0%, var(--cream) 70%);
  padding:24px;position:relative;overflow:hidden;
}
.login-card{
  position:relative;z-index:1;
  width:100%;max-width:440px;background:var(--ivory);
  border-radius:var(--r-xl);padding:48px 40px;
  box-shadow:var(--shadow-lg);text-align:center;
  border:1px solid var(--line);
}
.login-mascot{
  width:140px;height:140px;margin:0 auto 18px;
  animation:float 5s ease-in-out infinite;
  filter:drop-shadow(0 14px 30px rgba(45,106,130,.18));
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.login-title{
  font-family:var(--font-display);font-size:38px;font-weight:600;
  letter-spacing:-.035em;margin:0 0 6px;color:var(--ink);
  font-variation-settings:"opsz" 144;
}
.login-sub{font-size:15px;color:var(--ink-2);margin:0 0 22px;font-style:italic}
.private-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--sage-soft);color:var(--f1-c);
  padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:600;
  margin-bottom:30px;letter-spacing:.02em;
}
.field{text-align:left;margin-bottom:14px}
.field label{
  display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);
  margin-bottom:7px;text-transform:uppercase;letter-spacing:.08em;
}
.field input{
  width:100%;background:var(--cream);border:1.5px solid transparent;
  padding:14px 16px;border-radius:var(--r-sm);outline:none;
  transition:var(--transition);font-size:15px;color:var(--ink);
}
.field input:focus{
  background:var(--ivory);border-color:var(--teal);
  box-shadow:var(--shadow-glow);
}
.field input::placeholder{color:var(--ink-4)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--ivory);padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:14.5px;width:100%;letter-spacing:-.005em;
  transition:var(--transition);position:relative;
}
.btn:hover{background:var(--teal-deeper);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--ink);border:1.5px solid var(--line);
}
.btn.ghost:hover{background:var(--cream-deep);border-color:var(--ink-3)}
.btn.brick,.btn.coral{background:var(--coral);color:var(--ivory)}
.btn.brick:hover,.btn.coral:hover{background:#D17661}
.btn.teal{background:var(--teal)}
.btn.teal:hover{background:var(--teal-deeper)}
.btn.small{padding:10px 20px;font-size:13px;width:auto}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
.login-error{
  background:var(--coral-soft);color:#B25539;border:1px solid #f5cbc4;
  padding:11px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:12px;font-weight:500;
}
.login-help{font-size:12px;color:var(--ink-3);margin-top:24px;line-height:1.5}
.login-help code{
  background:var(--cream);padding:2px 7px;border-radius:6px;font-size:11px;
  font-family:'JetBrains Mono','Menlo',monospace;color:var(--ink);
}

/* ─── Cards / grids ─── */
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}

.card{
  background:var(--ivory);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:24px;
  transition:var(--transition);position:relative;overflow:hidden;
}
.card.clickable{cursor:pointer}
.card.clickable::before{
  content:'';position:absolute;left:0;top:0;right:0;height:5px;
  background:var(--accent,linear-gradient(90deg,var(--sage) 0%,var(--teal-soft) 100%));
  opacity:.85;transition:var(--transition);
}
.card.clickable:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.card.clickable:hover::before{height:6px}
.card h3{
  margin:0 0 4px;font-family:var(--font-display);font-size:20px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);
}
.card .meta{color:var(--ink-3);font-size:13px;margin:0 0 18px;display:flex;align-items:center;gap:6px}

/* Floor gradient accents on room cards */
.card[data-floor="1"]{--accent:var(--f1)}
.card[data-floor="3"]{--accent:var(--f3)}
.card[data-floor="4"]{--accent:var(--f4)}
.card[data-floor="6"]{--accent:var(--f6)}
.card[data-floor="7"]{--accent:var(--f7)}
.card[data-floor="8"]{--accent:var(--f8)}

/* ─── Chips / badges ─── */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--cream-deep);color:var(--ink-2);letter-spacing:.01em;
  border:1px solid transparent;
}
.chip.teal{background:var(--teal-soft);color:var(--teal-deeper)}
.chip.mint,.chip.sage{background:var(--sage-soft);color:var(--f1-c);border-color:var(--sage)}
.chip.pink,.chip.coral{background:var(--coral-soft);color:#B25539}
.chip.brick{background:var(--coral-soft);color:var(--coral)}
.chip.navy,.chip.ink{background:var(--ink);color:var(--ivory)}
.chip.gold{background:var(--gold-soft);color:var(--f7-c)}

.chip-floor{
  background:transparent;color:var(--floor-c,var(--ink-2));font-weight:700;
  border:1.5px solid currentColor;padding:4px 10px;
}
.chip-floor[data-f="1"]{--floor-c:var(--f1-c)}
.chip-floor[data-f="3"]{--floor-c:var(--f3-c)}
.chip-floor[data-f="4"]{--floor-c:var(--f4-c)}
.chip-floor[data-f="6"]{--floor-c:var(--f6-c)}
.chip-floor[data-f="7"]{--floor-c:var(--f7-c)}
.chip-floor[data-f="8"]{--floor-c:var(--f8-c)}

/* Status dot */
.chip .dot-inline{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ─── Filters ─── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;align-items:center}
.filters select,.filters input{
  background:var(--ivory);border:1px solid var(--line);
  padding:10px 16px;border-radius:999px;font-size:13.5px;outline:none;
  transition:var(--transition);color:var(--ink);
}
.filters input:focus,.filters select:focus{border-color:var(--teal);box-shadow:var(--shadow-glow)}
.filter-chip{
  background:var(--ivory);border:1px solid var(--line);
  padding:10px 18px;border-radius:999px;font-size:13.5px;cursor:pointer;
  font-weight:500;color:var(--ink-2);transition:var(--transition);letter-spacing:-.005em;
}
.filter-chip:hover{border-color:var(--ink);color:var(--ink)}
.filter-chip.active{background:var(--ink);color:var(--ivory);border-color:var(--ink);font-weight:600}

/* ─── Duration & Recurrence pill selectors ─── */
.duration-grid,.rec-grid{
  display:flex!important;flex-wrap:wrap!important;gap:8px!important;
}
.dur-btn{
  background:var(--ivory);border:1.5px solid var(--line);
  padding:10px 18px;border-radius:999px;font-size:13.5px;
  font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:var(--transition);letter-spacing:-.005em;
  font-family:inherit;
}
.dur-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.dur-btn.active{
  background:var(--teal)!important;color:var(--ivory)!important;
  border-color:var(--teal)!important;font-weight:600!important;
  box-shadow:0 4px 12px rgba(45,106,130,.20)!important;
}

/* ─── Room cards selector (replaces plain <select>) ─── */
.room-picker{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  gap:10px!important;max-height:340px!important;overflow-y:auto!important;
  padding:4px!important;
}
.room-pick{
  background:var(--ivory);border:1.5px solid var(--line);
  border-radius:14px;padding:14px 16px;cursor:pointer;
  transition:var(--transition);display:flex;flex-direction:column;gap:4px;
  text-align:left;font-family:inherit;position:relative;
}
.room-pick:hover{border-color:var(--teal);background:var(--teal-soft)}
.room-pick.active{
  border-color:var(--teal)!important;background:var(--teal-soft)!important;
  box-shadow:0 4px 12px rgba(45,106,130,.15)!important;
}
.room-pick .rp-name{font-weight:600;color:var(--ink);font-size:14.5px;letter-spacing:-.01em}
.room-pick .rp-meta{font-size:12px;color:var(--ink-3)}
.room-pick .rp-busy{
  position:absolute;top:8px;right:8px;
  background:var(--coral-soft);color:var(--coral);
  font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;
}
.room-pick .rp-free{
  position:absolute;top:8px;right:8px;
  background:var(--sage-soft);color:var(--f1-c);
  font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;
}
.room-pick.busy{opacity:.65;border-style:dashed}
.room-pick .rp-owner{font-size:11px;color:var(--coral);font-weight:500;margin-top:2px}

/* ─── Search input (My bookings) ─── */
.search-bar{
  background:var(--ivory)!important;border:1.5px solid var(--line)!important;
  border-radius:14px!important;padding:12px 16px!important;
  width:100%!important;font-size:14px!important;color:var(--ink)!important;
  outline:none!important;transition:var(--transition)!important;
  margin:8px 0 20px!important;
}
.search-bar:focus{border-color:var(--teal)!important;background:var(--ivory)!important}

/* ─── Sections ─── */
.split{display:grid;grid-template-colu

/* ─── Forced layout polish (after all base rules) ─── */
.section{
  background:var(--ivory)!important;
  border:1px solid var(--line-soft)!important;
  border-radius:var(--r-lg)!important;
  padding:28px!important;
  margin-bottom:14px!important;
}
.summary-row{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
  padding:11px 0!important;
  border-bottom:1px dashed rgba(42,46,62,.10)!important;
}
.summary-row > span:first-child{
  color:var(--ink-3)!important;font-size:13px!important;font-weight:500!important;
}
.summary-row > b{
  color:var(--ink)!important;font-weight:600!important;text-align:right!important;
  font-size:13.5px!important;
}
.summary-row:last-of-type{border-bottom:0!important}

/* Better page sub on profile */
.page-sub b{font-weight:600;color:var(--ink)}


/* ─── GLOBAL FORCED LAYOUT FIXES v3.1 ─── */

/* All section / card-like containers must look like cards */
.section, .card, .list-item, .admin-card, .stat, .summary, .notif-panel, .login-card{
  background:var(--ivory)!important;
}
.section{padding:28px!important;border-radius:24px!important;border:1px solid var(--line-soft)!important;margin-bottom:14px!important}

/* All "label : value" rows */
.summary-row, .data-row{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:20px!important;
  padding:11px 0!important;
  border-bottom:1px dashed rgba(42,46,62,.10)!important;
  font-size:13.5px!important;
}
.summary-row > *:first-child, .data-row > *:first-child{
  color:var(--ink-3)!important;font-weight:500!important;flex:0 0 auto!important;
}
.summary-row > b, .summary-row > *:last-child,
.data-row > b, .data-row > *:last-child{
  color:var(--ink)!important;font-weight:600!important;text-align:right!important;flex:1!important;
}
.summary-row:last-of-type, .data-row:last-of-type{border-bottom:0!important}

/* My bookings list rows — title left, action right */
.list-item{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:16px!important;padding:18px 22px!important;border-radius:18px!important;
  border:1px solid var(--line-soft)!important;margin-bottom:8px!important;
}
.list-item .info{flex:1!important;min-width:0!important}
.list-item .info h4{
  font-family:var(--font-display)!important;font-size:15px!important;font-weight:600!important;
  margin:0 0 4px!important;color:var(--ink)!important;
}
.list-item .info p{font-size:13px!important;color:var(--ink-3)!important;margin:0!important;line-height:1.5!important}
.list-item .actions{flex-shrink:0!important;display:flex!important;gap:6px!important;align-items:center!important}

/* Section h2 spacing */
.section > h2{
  font-family:var(--font-display)!important;font-size:18px!important;font-weight:600!important;
  margin:0 0 20px!important;color:var(--ink)!important;
}

/* Filter chips row */
.filters{display:flex!important;gap:8px!important;flex-wrap:wrap!important;align-items:center!important;margin-bottom:24px!important}

/* Room cards meta */
.card .meta{
  display:flex!important;align-items:center!important;gap:6px!important;
  color:var(--ink-3)!important;font-size:13px!important;margin:0 0 14px!important;
}

/* Forms - rows of inputs */
.row{display:flex!important;gap:12px!important}
.row > *{flex:1!important}

/* Stat-cards grid container — REPORTS KPI ROW */
.stat-cards{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:16px!important;
  margin:0 0 36px!important;
}
/* Stat-card individual */
.stat{
  background:var(--ivory)!important;
  padding:22px 24px!important;
  border-radius:20px!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:var(--shadow-xs)!important;
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.stat .label{
  font-size:12px!important;
  font-weight:600!important;
  color:var(--ink-3)!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  margin:0!important;
}
.stat .value{
  font-family:var(--font-display)!important;
  font-size:38px!important;
  font-weight:600!important;
  color:var(--ink)!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  font-variation-settings:"opsz" 144!important;
  margin:0!important;
}

/* Section blocks (Top 10 / By project / By floor / etc.) */
.section{
  background:var(--ivory)!important;
  border:1px solid var(--line-soft)!important;
  border-radius:24px!important;
  padding:26px 28px!important;
  margin:0 0 22px!important;
  box-shadow:var(--shadow-xs)!important;
}
.section h2{
  font-family:var(--font-display)!important;
  font-size:22px!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
  color:var(--ink)!important;
  margin:0 0 20px!important;
}
.bar-chart{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.bar-track{
  background:var(--cream-deep)!important;
  height:10px!important;
  border-radius:999px!important;
  overflow:hidden!important;
}
.bar-fill{
  height:100%!important;
  background:linear-gradient(90deg,var(--teal) 0%,var(--sage) 100%)!important;
  border-radius:999px!important;
  transition:width .6s var(--ease)!important;
}

/* Bar chart row alignment */
.bar-row{display:grid!important;grid-template-columns:200px 1fr 70px!important;align-items:center!important;gap:12px!important;font-size:13px!important;color:var(--ink-2)!important}

/* Field labels & inputs */
.field label{display:block!important;font-size:11.5px!important;font-weight:600!important;color:var(--ink-2)!important;margin-bottom:6px!important;text-transform:uppercase!important;letter-spacing:.06em!important}
.field input{width:100%!important;background:var(--cream)!important;border:1.5px solid transparent!important;padding:13px 16px!important;border-radi