:root
{
  accent-color:black;
}
.theme-dark { background:#071426; color:#ffffff; } .theme-dark a { color: #ffffff; } .theme-dark a:hover { color: #ffffff; opacity:0.85; }
.theme-main { background:#145da0; color:#ffffff; } .theme-main a { color: #ffffff; } .theme-main a:hover { color: #ffffff; opacity:0.85; }
.theme-light { background:#f8fbff; color:#0b1f33; } .theme-light a { color: #0b1f33; } .theme-light a:hover { color: #0b1f33; opacity:0.85; }
.theme-soft { background:#dbeafe; color:#0b1f33; } .theme-soft a { color: #0b1f33; } .theme-soft a:hover { color: #0b1f33; opacity:0.85; }
.theme-accent { background:#38bdf8; color:#071426; } .theme-accent a { color: #071426; } .theme-accent a:hover { color: #071426; opacity:0.85; }

.privilege
{
  position:relative;
  overflow:hidden;
  padding:10px 10px 10px 20px;
  border:1px solid #e0b84a;
  border-radius:12px;
  background:linear-gradient(135deg, #fff9d8 0%, #ffe58a 45%, #fff6c2 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.8);
}

.privilege:before
{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:45%;
  background:linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events:none;
}

.privilege:after
{
  content:"\2605";
  position:absolute;
  top:10px;
  right:14px;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-radius:50%;
  background:#b8860b;
  color:#fff8c6;
  font-size:18px;
  font-weight:bold;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.2);
}

.btn, .btn:hover
{
  -min-width:180px;
  margin:2px;
  text-align:left;
  border:solid 1px silver;
}

input.double,.double
{
  -ms-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -webkit-transform:scale(1.5);
  -o-transform:scale(1.5);
}

#editor
{
  width:100%;
  height:calc(100vh - 240px);
  -border:1px solid #ccc;
}

.sort-item
{
  display:flex;
  align-items:center;
  margin-bottom:4px;
}

.move-handle
{
  cursor:move;
  font-size:20px;
  color:#888;
  padding:0 10px;
}

.move-handle:hover
{
  color:#333;
}

.note-stars {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.note-star {
  color: #ccc;
  cursor: pointer;
}

.note-star.active {
  color: #ffc107;
}

.ellipsis {
  display:inline-block;
  max-width:140px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  vertical-align:middle;
  line-height:16px;
  height:24px;
}

.btn
{
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 1px 3px rgba(0,0,0,.18);
}

.btn::before
{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:25%;
  background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,.26));
  pointer-events:none;
}

.btn:hover
{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.20);
}

.btn:hover::before
{
  background:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,.34));
}

.btn:active,
.btn.active
{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.15);
}

.btn:active::before,
.btn.active::before
{
  opacity:.32;
}